@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* font-family: "Inter", sans-serif; */
/* font-family: "Roboto", sans-serif; */

:root {
    /* ── Brand Colours ── */
    --primary: #004c80;
    /* Medium Blue  — GAP  */
    --primary-hover: #003560;
    /* Darker shade for hover */
    --accent-bright: #0089e3;
    /* Bright Blue  — FUSION */
    --accent-bright-2: #038AE2;
    /* Alternate bright blue */
    --dark-bg: #071424;
    /* Dark Blue    — Background */

    /* ── UI Colours ── */
    --secondary: #008080;
    --light: #F2F2F2;
    --dark: #323232;
    --gray: #989898;

    /* ── Typography ── */
    --primary-font: "Inter", sans-serif;
    --secondary-font: "Roboto", sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-size: 16px;
    background-color: var(--light);
    font-family: var(--secondary-font);
    color: var(--dark);
}

/* ============ Login Page ============ */

.login-container {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    /* prevent any scrollbar flash */
}

/* Left form column */
.login-form-col {
    height: 100vh;
    overflow-y: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--light);
}

/* Right banner column — zero padding so the image fills edge-to-edge */
.login-banner-col {
    height: 100vh;
    padding: 0 !important;
    overflow: hidden;
    position: relative;
    background-color: var(--dark-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Contain the full image within the column — no cropping, no scroll */
.login-banner-col img.banner-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    display: block;
}

.logo {
    max-height: 80px;
}

.login-card {
    padding: 0 8vw;
    user-select: none;
    width: 100%;
}

.input-group {
    border: 1px solid var(--gray);
    border-radius: 6px;
    overflow: hidden;
}

.form-control {
    border: none !important;
    padding: 8px 10px !important;
}

.form-control:focus {
    border: none !important;
    box-shadow: none !important;
}

.forgot-password {
    color: var(--accent-bright);
    text-decoration: none;
}

.forgot-password:hover {
    color: var(--primary);
}

.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    padding: 8px;
}

.btn-primary:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

.btn-primary:active {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--accent-bright);
}

.password-toggle-eye {
    font-size: 0.8rem;
    color: var(--gray);
}

.input-group-text {
    color: var(--dark);
    background: transparent;
    border: none;
}

/* Override Bootstrap's .text-secondary everywhere */
.text-secondary {
    color: var(--accent-bright) !important;
}

/* ============ Mobile ============ */
@media only screen and (max-width: 768px) {
    .login-container {
        height: auto;
        min-height: 100vh;
        /* Fallback atmospheric background on mobile */
        background: url('./../img/login_page_banner.png') no-repeat center center / cover;
    }

    .login-form-col {
        height: auto;
        min-height: 100vh;
        background: transparent;
        padding: 40px 0;
    }

    .login-card {
        background-color: var(--light);
        padding: 5vh 7vw;
        border-radius: 10px;
        margin: 0 20px;
    }

    /* Hide the banner column on mobile; background handles it */
    .login-banner-col {
        display: none !important;
    }
}

/* ============ Toast Message Styling ============ */
.toastify {
    z-index: 9999;
    transition: none !important;
}

.toastify.on {
    transition: none !important;
}