/* ============================================================
   NGA HOS PORTAL
   Main Stylesheet
   ============================================================

   DEFINING FRONTEND RULES
   ------------------------------------------------------------
   1. Mobile responsive by default.
   2. Primary font:
      Georgie, "Times New Roman", serif.
   3. Use scalable typography:
      rem, em, %, clamp(), vw/vh where appropriate.
   4. Avoid unnecessary fixed dimensions.
   5. Prevent horizontal overflow.
   6. Touch-friendly controls.
   7. Maintain consistent visual hierarchy.
   8. Never reference files that do not exist.
   ============================================================ */


/* ============================================================
   DESIGN TOKENS
   ============================================================ */

:root {

    /* Typography */
    --font-primary:
    "Inter",
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;
    /* Core colours - locked NGA brand palette */
    --color-primary: #455799;
    --color-primary-hover: #37457d;
    --color-primary-active: #2a3563;
    --color-primary-soft: #eaedf7;
    --color-accent-lavender: #b295c9;
    --color-accent-pink: #e2a9ca;
    --color-accent-rose: #fee5ee;
    --color-accent-peach: #ffe0b9;

    --color-dark: #2b2a40;
    --color-text: #2b2a40;
    --color-text-secondary: #5b5875;
    --color-text-muted: #8f8ba8;

    --color-white: #ffffff;
    --color-background: #faf8fb;
    --color-surface: #ffffff;

    --color-border: #e9e6f0;
    --color-border-soft: #f0edf5;

    --color-danger: #b42318;
    --color-danger-dark: #b42318;
    --color-danger-background: #faf8fb;

    /* Radius */
    --radius-small: 0.4rem;
    --radius-medium: 0.625rem;
    --radius-large: 0.875rem;

    /* Shadows */
    --shadow-primary:
        0 0.5rem 1.25rem rgba(69, 87, 153, 0.18);

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

}


/* ============================================================
   GLOBAL RESET
   ============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    font-size: 100%;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    margin: 0;

    font-family: var(--font-primary);
    font-size: 1rem;
    line-height: 1.5;

    color: var(--color-text);
    background: var(--color-background);

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;

    overflow-x: hidden;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

button:disabled {
    cursor: not-allowed;
}

img,
svg {
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
}


/* ============================================================
   LOGIN PAGE
   ============================================================ */

.hos-login-page {
    min-height: 100vh;
    min-height: 100dvh;

    background:
        var(--color-background);
}


/* ============================================================
   LOGIN SHELL
   ============================================================ */

.login-shell {

    display: grid;

    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(0, 1.05fr);

    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
}


/* ============================================================
   BRAND PANEL
   ============================================================ */

.login-brand-panel {

    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    min-width: 0;
    min-height: 100vh;

    padding:
        clamp(2rem, 5vw, 4.5rem);

    overflow: hidden;

    color: var(--color-white);

    background:
        radial-gradient(
            circle at 15% 10%,
            rgba(66, 133, 244, 0.16),
            transparent 34%
        ),
        radial-gradient(
            circle at 90% 85%,
            rgba(37, 99, 235, 0.14),
            transparent 35%
        ),
        var(--color-dark);
}


/* Decorative circles */

.login-brand-panel::before {

    content: "";

    position: absolute;

    width: clamp(18rem, 35vw, 29rem);
    aspect-ratio: 1;

    top: -15rem;
    right: -10rem;

    border:
        0.0625rem solid
        rgba(255, 255, 255, 0.08);

    border-radius: 50%;
}


.login-brand-panel::after {

    content: "";

    position: absolute;

    width: clamp(22rem, 45vw, 39rem);
    aspect-ratio: 1;

    bottom: -25rem;
    left: -18rem;

    border:
        0.0625rem solid
        rgba(255, 255, 255, 0.06);

    border-radius: 50%;
}


/* Keep content above decoration */

.brand-panel-content,
.brand-panel-footer {
    position: relative;
    z-index: 1;
}


/* ============================================================
   NGA BRAND MARK
   ============================================================ */

.brand-logo,
.mobile-brand-logo {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: clamp(2.75rem, 5vw, 3.5rem);
    aspect-ratio: 1;

    border:
        0.0625rem solid
        rgba(255, 255, 255, 0.2);

    border-radius: var(--radius-large);

    background:
        rgba(255, 255, 255, 0.08);

    color: var(--color-white);

    font-size: clamp(0.8rem, 1vw, 1rem);
    font-weight: 800;

    letter-spacing: 0.12em;
}


/* ============================================================
   BRAND COPY
   ============================================================ */

.brand-copy {

    max-width: 40rem;

    margin-top:
        clamp(4rem, 12vh, 8rem);
}


.brand-eyebrow,
.login-eyebrow {

    display: inline-block;

    margin-bottom: 1rem;

    color: #b295c9;

    font-size:
        clamp(0.68rem, 0.8vw, 0.78rem);

    font-weight: 750;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


.brand-copy h1 {

    max-width: 38rem;

    margin: 0;

    color: var(--color-white);

    font-size:
        clamp(2.25rem, 4vw, 4.5rem);

    line-height: 1.04;

    letter-spacing: -0.035em;

    font-weight: 750;
}


.brand-copy h1 span {

    display: block;

    color: #b295c9;
}


.brand-copy p {

    max-width: 35rem;

    margin:
        clamp(1.25rem, 3vw, 1.75rem)
        0
        0;

    color:
        rgba(255, 255, 255, 0.68);

    font-size:
        clamp(0.95rem, 1.2vw, 1.1rem);

    line-height: 1.75;
}


/* ============================================================
   BRAND FEATURES
   ============================================================ */

.brand-features {

    display: grid;

    gap:
        clamp(1rem, 2vw, 1.35rem);

    max-width: 38rem;

    margin-top:
        clamp(2.5rem, 5vw, 3.75rem);
}


.brand-feature {

    display: flex;

    align-items: flex-start;

    gap: 0.9rem;
}


.feature-icon {

    flex: 0 0 auto;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 1.55rem;
    height: 1.55rem;

    margin-top: 0.1rem;

    border:
        0.0625rem solid
        rgba(143, 184, 255, 0.3);

    border-radius: 50%;

    background:
        rgba(143, 184, 255, 0.08);

    color: #b295c9;

    font-size: 0.72rem;

    font-weight: 800;
}


.brand-feature strong {

    display: block;

    margin-bottom: 0.2rem;

    color: var(--color-white);

    font-size:
        clamp(0.82rem, 1vw, 0.95rem);

    font-weight: 700;
}


.brand-feature div span {

    display: block;

    color:
        rgba(255, 255, 255, 0.52);

    font-size:
        clamp(0.76rem, 0.9vw, 0.86rem);

    line-height: 1.5;
}


/* ============================================================
   BRAND FOOTER
   ============================================================ */

.brand-panel-footer {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 0.7rem;

    color:
        rgba(255, 255, 255, 0.42);

    font-size:
        clamp(0.68rem, 0.8vw, 0.78rem);
}


.brand-panel-footer span:first-child {

    color:
        rgba(255, 255, 255, 0.78);

    font-weight: 750;

    letter-spacing: 0.08em;
}


/* ============================================================
   LOGIN FORM PANEL
   ============================================================ */

.login-form-panel {

    display: flex;

    align-items: center;
    justify-content: center;

    min-width: 0;
    min-height: 100vh;

    padding:
        clamp(2rem, 6vw, 5rem);
    
    background:
        var(--color-surface);
}


.login-form-wrapper {

    width: 100%;

    max-width:
        30rem;
}


/* ============================================================
   MOBILE BRAND
   ============================================================ */

.mobile-brand {
    display: none;
}


/* ============================================================
   LOGIN HEADER
   ============================================================ */

.login-header {

    margin-bottom:
        clamp(1.75rem, 4vw, 2.5rem);
}


.login-header .login-eyebrow {

    margin-bottom: 0.7rem;

    color: var(--color-primary);
}


.login-header h2 {

    margin: 0;

    color: #2b2a40;

    font-size:
        clamp(1.9rem, 3vw, 2.7rem);

    line-height: 1.12;

    letter-spacing: -0.025em;

    font-weight: 750;
}


.login-header p {

    max-width: 28rem;

    margin:
        0.75rem
        0
        0;

    color: var(--color-text-secondary);

    font-size:
        clamp(0.88rem, 1.2vw, 1rem);

    line-height: 1.65;
}


/* ============================================================
   LOGIN ALERT
   ============================================================ */

.login-alert {

    display: flex;

    align-items: flex-start;

    gap: 0.7rem;

    margin-bottom: 1.5rem;

    padding: 0.8rem 0.9rem;

    border:
        0.0625rem solid
        #f1c5c5;

    border-radius: var(--radius-medium);

    background:
        var(--color-danger-background);

    color:
        var(--color-danger-dark);

    font-size:
        clamp(0.76rem, 1vw, 0.86rem);

    line-height: 1.45;
}


.login-alert[hidden] {
    display: none;
}


.alert-icon {

    display: flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 1.25rem;
    height: 1.25rem;

    border-radius: 50%;

    background:
        var(--color-danger-dark);

    color: var(--color-white);

    font-size: 0.7rem;

    font-weight: 800;
}


/* ============================================================
   LOGIN FORM
   ============================================================ */

.login-form {

    display: grid;

    gap:
        clamp(1.1rem, 2.5vw, 1.45rem);
}


.form-field {

    display: grid;

    gap: 0.45rem;
}


.form-field label {

    color: #2b2a40;

    font-size:
        clamp(0.8rem, 1vw, 0.9rem);

    font-weight: 650;
}


.field-label-row {

    display: flex;

    align-items: center;

    justify-content: space-between;
}


/* ============================================================
   INPUT
   ============================================================ */

.input-wrapper {

    position: relative;

    display: flex;

    align-items: center;

    width: 100%;
}


.input-icon {

    position: absolute;

    left: 0.9rem;

    z-index: 1;

    color: var(--color-text-muted);

    font-size: 0.9rem;

    font-weight: 700;

    pointer-events: none;
}


.input-wrapper input {

    width: 100%;

    min-height:
        clamp(3rem, 6vw, 3.3rem);

    padding:
        0 0.9rem
        0 2.7rem;

    border:
        0.0625rem solid
        var(--color-border);

    border-radius:
        var(--radius-medium);

    outline: none;

    background: var(--color-white);

    color: #2b2a40;

    font-family: var(--font-primary);

    font-size:
        clamp(0.88rem, 1vw, 0.96rem);

    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        background-color 160ms ease;
}


.input-wrapper input::placeholder {
    color: var(--color-text-muted);
}


.input-wrapper input:hover {
    border-color: #e9e6f0;
}


.input-wrapper input:focus {

    border-color:
        var(--color-primary);

    box-shadow:
        0 0 0 0.25rem
        rgba(74, 123, 234, 0.11);
}


.input-wrapper input:disabled {

    background: #faf8fb;

    color: var(--color-text-secondary);
}


.input-wrapper input[aria-invalid="true"] {

    border-color:
        var(--color-danger);

    box-shadow:
        0 0 0 0.1875rem
        rgba(217, 45, 32, 0.08);
}


/* ============================================================
   PASSWORD TOGGLE
   ============================================================ */

.password-toggle {

    position: absolute;

    right: 0.5rem;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 3.2rem;

    min-height: 2.1rem;

    padding:
        0.3rem 0.5rem;

    border: 0;

    border-radius:
        var(--radius-small);

    background: transparent;

    color: var(--color-primary);

    font-family: var(--font-primary);

    font-size:
        clamp(0.74rem, 1vw, 0.82rem);

    font-weight: 700;
}


.password-toggle:hover {
    background: var(--color-primary-soft);
}


.password-toggle:focus-visible {

    outline:
        0.125rem solid
        var(--color-primary);

    outline-offset: 0.125rem;
}


/* ============================================================
   FIELD ERROR
   ============================================================ */

.field-error {

    min-height: 0;

    color: var(--color-danger);

    font-size:
        clamp(0.7rem, 0.9vw, 0.78rem);

    line-height: 1.35;
}


.field-error:not(:empty) {
    min-height: 1rem;
}


/* ============================================================
   LOGIN OPTIONS
   ============================================================ */

.login-options {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: -0.1rem;
}


.remember-option {

    display: inline-flex;

    align-items: center;

    gap: 0.55rem;

    cursor: pointer;

    user-select: none;
}


.remember-option input {

    position: absolute;

    width: 0;
    height: 0;

    opacity: 0;

    pointer-events: none;
}


.custom-checkbox {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 1.05rem;
    height: 1.05rem;

    border:
        0.0625rem solid
        #e9e6f0;

    border-radius:
        0.25rem;

    background:
        var(--color-white);

    transition:
        border-color 160ms ease,
        background-color 160ms ease;
}


.custom-checkbox span {

    width: 0.45rem;
    height: 0.25rem;

    border-bottom:
        0.125rem solid
        var(--color-white);

    border-left:
        0.125rem solid
        var(--color-white);

    transform:
        rotate(-45deg)
        translate(0.05rem, -0.05rem);

    opacity: 0;
}


.remember-option input:checked
+ .custom-checkbox {

    border-color:
        var(--color-primary);

    background:
        var(--color-primary);
}


.remember-option input:checked
+ .custom-checkbox span {

    opacity: 1;
}


.remember-option input:focus-visible
+ .custom-checkbox {

    outline:
        0.125rem solid
        var(--color-primary);

    outline-offset:
        0.125rem;
}


.remember-text {

    color: var(--color-text-secondary);

    font-size:
        clamp(0.76rem, 1vw, 0.84rem);
}


/* ============================================================
   LOGIN BUTTON
   ============================================================ */

.login-button {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;

    min-height:
        clamp(3rem, 6vw, 3.35rem);

    margin-top: 0.15rem;

    padding:
        0 1.25rem;

    border: 0;

    border-radius:
        var(--radius-medium);

    background:
        var(--color-primary);

    color:
        var(--color-white);

    box-shadow:
        var(--shadow-primary);

    font-family: var(--font-primary);

    font-size:
        clamp(0.88rem, 1vw, 0.98rem);

    font-weight: 700;

    transition:
        background-color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;
}


.login-button:hover:not(:disabled) {

    background:
        var(--color-primary-hover);

    box-shadow:
        0 0.6rem 1.5rem
        rgba(53, 111, 229, 0.24);

    transform:
        translateY(-0.0625rem);
}


.login-button:active:not(:disabled) {

    transform:
        translateY(0);
}


.login-button:focus-visible {

    outline:
        0.1875rem solid
        rgba(53, 111, 229, 0.25);

    outline-offset:
        0.1875rem;
}


.login-button:disabled {
    opacity: 0.72;
}


/* ============================================================
   LOADING STATE
   ============================================================ */

.button-loading {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 0.55rem;
}


.button-loading[hidden] {
    display: none;
}


.loading-spinner {

    width: 1rem;
    height: 1rem;

    border:
        0.125rem solid
        rgba(255, 255, 255, 0.35);

    border-top-color:
        var(--color-white);

    border-radius: 50%;

    animation:
        login-spinner 700ms linear infinite;
}


@keyframes login-spinner {

    to {
        transform: rotate(360deg);
    }

}


/* ============================================================
   SECURITY NOTICE
   ============================================================ */

.login-security {

    display: flex;

    align-items: flex-start;

    gap: 0.75rem;

    margin-top:
        clamp(1.75rem, 4vw, 2.25rem);

    padding:
        0.9rem;

    border:
        0.0625rem solid
        var(--color-border-soft);

    border-radius:
        var(--radius-medium);

    background:
        #faf8fb;
}


.security-icon {

    display: flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 1.8rem;
    height: 1.8rem;

    border-radius:
        var(--radius-small);

    background:
        var(--color-primary-soft);

    font-size:
        clamp(0.7rem, 1vw, 0.8rem);
}


.login-security strong {

    display: block;

    margin-bottom: 0.15rem;

    color: #2b2a40;

    font-size:
        clamp(0.74rem, 1vw, 0.82rem);

    font-weight: 700;
}


.login-security p {

    margin: 0;

    color: #5b5875;

    font-size:
        clamp(0.68rem, 0.9vw, 0.76rem);

    line-height: 1.5;
}


/* ============================================================
   LOGIN FOOTER
   ============================================================ */

.login-footer {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 0.55rem;

    margin-top:
        clamp(2rem, 5vw, 2.75rem);

    color:
        var(--color-text-muted);

    font-size:
        clamp(0.66rem, 0.9vw, 0.75rem);

    text-align: center;
}


.footer-separator {
    color: #e2a9ca;
}


/* ============================================================
   LARGE TABLET
   ============================================================ */

@media (max-width: 1100px) {

    .login-shell {

        grid-template-columns:
            minmax(0, 0.85fr)
            minmax(0, 1.15fr);
    }


    .login-brand-panel,
    .login-form-panel {

        padding:
            clamp(2rem, 5vw, 3rem);
    }


    .brand-copy {

        margin-top:
            clamp(3rem, 8vh, 5rem);
    }


    .brand-copy h1 {

        font-size:
            clamp(2.25rem, 4vw, 3.4rem);
    }

}


/* ============================================================
   TABLET / COMPACT
   ============================================================ */

@media (max-width: 850px) {

    .login-shell {

        display: block;

        min-height: 100vh;
        min-height: 100dvh;
    }


    .login-brand-panel {

        display: none;
    }


    .login-form-panel {

        display: flex;

        align-items: flex-start;

        min-height: 100vh;
        min-height: 100dvh;

        padding:
            clamp(2rem, 7vw, 4rem)
            clamp(1.25rem, 6vw, 3rem);
    }


    .login-form-wrapper {

        max-width:
            32rem;

        margin:
            0 auto;
    }


    .mobile-brand {

        display: flex;

        align-items: center;

        gap: 0.7rem;

        margin-bottom:
            clamp(2.5rem, 7vw, 4rem);

        color: #2b2a40;

        font-size:
            clamp(0.78rem, 1.5vw, 0.9rem);

        font-weight: 700;
    }


    .mobile-brand-logo {

        width:
            clamp(2.5rem, 7vw, 3rem);

        border:
            0.0625rem solid
            #e9e6f0;

        background:
            var(--color-dark);

        font-size:
            clamp(0.7rem, 1vw, 0.8rem);
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 600px) {

    html {
        font-size: 100%;
    }


    .login-form-panel {

        padding:
            1.5rem
            1rem
            2rem;
    }


    .mobile-brand {

        margin-bottom:
            2.5rem;
    }


    .login-header {

        margin-bottom:
            1.75rem;
    }


    .login-header h2 {

        font-size:
            clamp(1.8rem, 8vw, 2.25rem);
    }


    .login-header p {

        font-size:
            clamp(0.86rem, 3.5vw, 0.96rem);
    }


    .login-form {

        gap:
            1.15rem;
    }


    .input-wrapper input {

        min-height:
            3.1rem;

        font-size:
            1rem;
    }


    .password-toggle {

        min-height:
            2.25rem;

        min-width:
            3.5rem;
    }


    .login-button {

        min-height:
            3.15rem;

        font-size:
            1rem;
    }


    .login-security {

        margin-top:
            1.75rem;
    }


    .login-footer {

        margin-top:
            2rem;

        line-height:
            1.6;
    }

}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 380px) {

    .login-form-panel {

        padding:
            1.25rem
            0.8rem
            1.5rem;
    }


    .login-header h2 {

        font-size:
            1.75rem;
    }


    .remember-text {

        font-size:
            0.75rem;
    }


    .login-security {

        padding:
            0.75rem;
    }

}


/* ============================================================
   LANDSCAPE MOBILE
   ============================================================ */

@media (
    max-height: 600px
) and (
    orientation: landscape
) {

    .login-form-panel {

        align-items: flex-start;

        padding-top:
            1.5rem;

        padding-bottom:
            1.5rem;
    }


    .mobile-brand {

        margin-bottom:
            1.5rem;
    }


    .login-header {

        margin-bottom:
            1.25rem;
    }


    .login-security {

        margin-top:
            1.25rem;
    }


    .login-footer {

        margin-top:
            1.25rem;
    }

}


/* ============================================================
   ACCESSIBILITY — REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        scroll-behavior: auto !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }

}


/* ============================================================
   ACCESSIBILITY — HIGH CONTRAST FOCUS
   ============================================================ */

:focus-visible {

    outline:
        0.125rem solid
        var(--color-primary);

    outline-offset:
        0.125rem;
}