/* ===========================================
   Eastmen — Blue-Dominant Login Theme
   (logo-matched: deep navy primary, soft blue tints,
   subtle red/green accents kept very low)
   =========================================== */

/* Page background */
:root {
    /* Brand core */
    --brand-navy: #13234A; /* deep navy from logo ring */
    --brand-blue: #1d3e73; /* existing blue */
    --brand-royal: #2A4E86; /* lighter blue tint */
    --brand-red: #D73333; /* logo red */
    --brand-green: #187A3D; /* logo green */
    /* Background gradient (blue dominant) */
    --bg1: #0E1C39; /* deep base */
    --bg2: #1d3e73; /* blue sweep */
    /* Glass + borders */
    --glass: rgba(255,255,255,.10);
    --glass-strong: rgba(255,255,255,.16);
    --border: rgba(255,255,255,.26);
    /* Focus ring in blue */
    --ring: rgba(66,140,255,.8);
    --invalid-nudge: 1px;
}

html, body {
    height: 100%;
}

    body.login-body {
        margin: 0;
        min-height: 100dvh;
        background: radial-gradient(1000px 700px at 15% 8%, rgba(42,78,134,.35), transparent 55%), radial-gradient(900px 650px at 85% 92%, rgba(19,35,74,.28), transparent 60%), linear-gradient(135deg, var(--bg1), var(--bg2));
        display: grid;
        place-items: center;
        padding: clamp(12px, 2vw, 24px);
        color: #f8f9fa;
        overflow: hidden;
    }

/* Animated soft blobs (mostly blues, tiny R/G whispers) */
.bg-blob {
    position: fixed;
    inset: auto;
    z-index: 0;
    filter: blur(52px);
    opacity: .28;
    pointer-events: none;
}

.bg-blob-1 {
    width: 40vmax;
    height: 40vmax;
    background: rgba(31,69,128,.55); /* rich blue */
    top: -10vmax;
    left: -8vmax;
    border-radius: 50%;
    animation: float1 18s ease-in-out infinite;
}

.bg-blob-2 {
    width: 34vmax;
    height: 34vmax;
    background: rgba(19,35,74,.45); /* deep navy */
    bottom: -12vmax;
    right: -6vmax;
    border-radius: 43%;
    animation: float2 22s ease-in-out infinite;
}

.bg-blob-3 {
    width: 26vmax;
    height: 26vmax;
    /* faint logo accents mixed into blue so it stays blue-dominant */
    background: radial-gradient(circle at 40% 40%, rgba(29,62,115,.55) 0%, rgba(24,122,61,.08) 55%, /* green hint */
    rgba(215,51,51,.06) 85%); /* red hint */
    bottom: 10vmax;
    left: 10vmax;
    border-radius: 47%;
    animation: float3 26s ease-in-out infinite;
}

@keyframes float1 {
    0%,100% {
        transform: translate(0,0);
    }

    50% {
        transform: translate(4vmax,3vmax);
    }
}

@keyframes float2 {
    0%,100% {
        transform: translate(0,0);
    }

    50% {
        transform: translate(-3vmax,-2vmax);
    }
}

@keyframes float3 {
    0%,100% {
        transform: translate(0,0);
    }

    50% {
        transform: translate(2vmax,-3vmax);
    }
}

/* film grain (very subtle) */
.grain-overlay {
    position: fixed;
    inset: 0;
    z-index: 0;
    opacity: .05;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.25'/%3E%3C/svg%3E");
}

/* Center container */
.container-login {
    position: relative;
    z-index: 1;
    width: min(440px, 96vw);
}

/* Glass card */
.login-card {
    width: 100%;
    padding: clamp(1.5rem, 4vw, 2.25rem);
    border-radius: 20px;
    background: linear-gradient(180deg, var(--glass), rgba(255,255,255,.08));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--border);
    box-shadow: 0 18px 60px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.18);
    position: relative;
}

    .login-card::before {
        content: "";
        position: absolute;
        inset: 1px;
        border-radius: 19px;
        background: radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.18), transparent 60%);
        pointer-events: none;
    }

.text-muted {
    color: #cbd5e1 !important;
}

/* Brand header */
.brand {
    display: grid !important;
    grid-template-columns: auto 1fr auto; /* left fixed, middle flexible, right fixed */
    align-items: center !important;
    column-gap: 5px;
}

.brand-logo {
    margin-bottom:10px;
    min-height: 80px;
    width: auto;
    border-radius: 10px;
    display: block;
    grid-column: 1; /* left column */
    justify-content: center;
    text-align: center;
    padding: 5px;
    border-radius: 8px;
    background: linear-gradient(180deg, #fefefe 0%, #e5e5e5 40%, #c0c0c0 100%);
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.6), inset 0 -2px 4px rgba(0,0,0,0.25), 0 0 10px rgba(0,100,255,0.35);
}

/* Text (middle) */
.brand-text {
    grid-column: 2; /* middle column */
    min-width: 0; /* allow shrinking instead of wrapping onto new row */
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}


.brand-logo img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient( 120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.45) 40%, rgba(255,255,255,0) 80% );
    transform: translateX(-100%);
    animation: shine 6s infinite linear;
}

.brand-mark {
    grid-column: 1; /* right column */
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
    border: 1px solid rgba(255,255,255,.30);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
    color: #ffffff;
    font-size: 1.3rem;
}

.brand-text h1,
.brand-text p {
    margin: 0; /* remove default gaps */
}

.brand-text h1 {
    margin: 0;
    color: #E9F2FF;
    font-weight: 700;
    letter-spacing: .2px;
    line-height: 1.2;
}

.brand-text p {
    margin: 0;
    color: rgba(218,230,255,.78);
    font-size: 0.9rem;
}

/* Inputs with leading icons */
.input-icon {
    position: relative;
}

    .input-icon > i {
        position: absolute;
        top: 50%;
        left: 12px;
        transform: translateY(-50%);
        color: #9EC3FF;
        font-size: 1rem;
        pointer-events: none;
        transition: color .25s ease, text-shadow .25s ease, opacity .25s ease;
    }

    /* Right icon (password eye) */
    .input-icon > .btn-eye {
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
        background: transparent;
        border: none;
        color: #9EC3FF;
        padding: .25rem .4rem;
        cursor: pointer;
        transition: opacity .25s ease;
    }

        .input-icon > .btn-eye:hover {
            opacity: 1;
        }

    /* The input/select (middle column) */
    .input-icon .form-control,
    .input-icon .form-select {
        padding-left: 2.2rem; /* room for left icon */
        padding-right: 2.4rem; /* room for right icon if exists */
        height: 44px;
        line-height: 44px;
        box-sizing: border-box;
    }

    .input-icon .form-select {
        height: 44px;
        line-height: 44px;
        padding: 0 .75rem 0 2.1rem;
        box-sizing: border-box;
    }

/* Controls */
.form-label {
    color: #E6EEFF;
    font-weight: 600;
    letter-spacing: .2px;
}

.form-control, .form-select {
    border-width: 1.5px;
}

    .form-control::placeholder {
        color: rgba(218,230,255,.75);
    }

    /* Focus (blue) */
    .form-control:focus, .form-select:focus {
        border-color: var(--ring);
        box-shadow: 0 0 0 .25rem rgba(66,140,255,.22);
    }

/* Improve icon visibility on focus */
.input-icon:focus-within > i {
    color: rgb(23,45,85);
    text-shadow: 0 0 6px rgba(126,174,255,.85);
}

/* === Stronger icon highlight on focus === */
.input-icon:focus-within > i,
.input-icon:focus-within > .btn-eye {
    color: rgb(23,45,85); /* brighter blue */
    text-shadow: 0 0 4px rgba(102,179,255,.75), 0 0 8px rgba(102,179,255,.55), 0 0 12px rgba(102,179,255,.35);
    transition: color .25s ease, text-shadow .25s ease;
}

/* optional: base icon color a bit softer, so the contrast on focus is stronger */
.input-icon > i,
.input-icon > .btn-eye {
    color: rgb(23,45,85);
    transition: color .25s ease, text-shadow .25s ease;
}

/* Validation state — red from logo */
.form-control.is-invalid,
.was-validated .form-control:invalid,
.form-select.is-invalid,
.was-validated .form-select:invalid {
    border-color: var(--brand-red);
    box-shadow: 0 0 0 .15rem rgba(215,51,51,.22);
    background-image: none !important;
}

.form-control.is-invalid {
    border-color: var(--brand-red);
    box-shadow: 0 0 0 .15rem rgba(215,51,51,.22);
    background-image: none !important;
}

.invalid-feedback {
    color: #ffd1d1;
    margin-top: .25rem;
}

/* Fix icon vertical shift when input is invalid */
.input-icon:has(.form-control.is-invalid) > i,
.input-icon:has(.form-select.is-invalid) > i {
    transform: translateY(calc(-100% + var(--invalid-nudge)));
}

.input-icon:has(.form-control.is-invalid) > .btn-eye,
.input-icon:has(.form-select.is-invalid) > .btn-eye {
    transform: translateY(calc(-100% + var(--invalid-nudge)));
}

/* Hide Edge/IE native reveal/clear icons */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
}
/* Hide WebKit auto-fill reveal button */
input[type="password"]::-webkit-credentials-auto-fill-button {
    visibility: hidden;
    display: none;
    pointer-events: none;
}

/* Button with soft blue glow */
.btn-primary {
    position: relative;
    border: 1px solid rgba(255,255,255,.28);
    background: linear-gradient(135deg, rgba(255,255,255,.26), rgba(255,255,255,.16));
    color: #0b2447;
    font-weight: 700;
    backdrop-filter: blur(6px);
}

    .btn-primary:hover {
        background: rgba(255,255,255,.32);
    }

    .btn-primary:active {
        transform: translateY(1px);
    }

/* Blue-first glow with tiny green accent */
.btn-glow {
    position: absolute;
    inset: -8px;
    border-radius: 14px;
    pointer-events: none;
    background: radial-gradient(120% 120% at 50% 0%, rgba(66,140,255,.35), rgba(24,122,61,.12) 55%, transparent 62%);
    filter: blur(8px);
    opacity: .6;
}

/* Footer */
.muted-foot {
    color: rgba(223,232,255,.75);
}

/* Autofill fix for dark backgrounds */
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px rgba(255,255,255,.12) inset !important;
    -webkit-text-fill-color: black !important;
}

/* Small checkbox */
.form-check-sm .form-check-input {
    transform: scale(.9);
}

/* Mobile tweaks */
@media (max-width:576px) {
    .login-card {
        border-radius: 16px;
    }
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
    .bg-blob-1, .bg-blob-2, .bg-blob-3 {
        animation: none;
    }
}

/* Spinner alignment on button */
#btnLogin .spinner-border {
    vertical-align: -.125em;
}