@import "global-styles.css";

/* ===== Root Branding Variables ===== */
:root {
    --branding-primary: #1c978d;
    --branding-primary-dark: #13877b;
    --branding-primary-darker: #0f6a65;
    --branding-primary-muted: #81c3bf;
    --branding-bg-right: #f8f9fa;
    --branding-text-light: #ffffff;
}

/* ===== Reset + Base ===== */

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

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    line-height: 1;
    overflow-x: hidden;
    font-family: sans-serif;
}

/* ===== Login Layout ===== */

.login-container {
    display: grid;
    grid-template-columns: 50% 50%;
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
}

/* ===== Left Branding Panel ===== */

.left-panel {
    background-image: url('/images/ForwardSpot/forward-spot-login.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2rem;
    color: var(--branding-text-light);
}

    .left-panel::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
    }

    .left-panel .content {
        position: relative;
        z-index: 2;
    }

    .left-panel .content-slogan {
        position: relative;
        z-index: 2;
        margin-bottom: 5%;
    }

/* ===== Right Panel ===== */

.right-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--branding-bg-right);
}

/* ===== Logo ===== */

.login-logo {
    background-image: url('/images/forwardspot/forward-spot-logo.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    height: 95px;
    width: 100%;
}

/* ===== Login Card ===== */

.login-form-card {
    width: 50%;
}

/* ===== Inputs ===== */

.input-group {
    position: relative;
}

    .input-group .form-control {
        padding-right: 45px;
        height: 56px;
        border-radius: 8px;
    }

        .input-group .form-control:focus {
            box-shadow: none;
            border-color: var(--branding-primary);
        }

/* ===== Input Icons ===== */

.form-control-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    pointer-events: none;
}

/* ===== Buttons ===== */

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-bg: var(--branding-primary) !important;
    --bs-btn-hover-bg: color-mix(in srgb, var(--lpx-primary) 65%, black);
    --bs-btn-active-bg: var(--branding-primary-darker) !important;
    --bs-btn-border-color: color-mix(in srgb, var(--lpx-primary) 65%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--lpx-primary) 65%, black);
    --bs-btn-active-border-color: #0c5a55;
    --bs-btn-disabled-bg: var(--branding-primary-muted);
    --bs-btn-disabled-color: #e0e0e0;
    --bs-btn-disabled-border-color: var(--branding-primary-muted);
    --bs-btn-focus-shadow-rgb: 28, 151, 141;
    --bs-btn-box-shadow: none;
}

/* ===== Secondary Buttons ===== */

.btn-primary-grey {
    --bs-btn-bg: #E9EDF0 !important;
    --bs-btn-hover-bg: #2B2B2B14;
    --bs-btn-active-bg: #E9EDF0 !important;
    --bs-btn-border-color: #E9EDF0;
}

/* ===== Responsive ===== */

@media (max-width: 992px) {
    .login-container {
        grid-template-columns: 1fr;
    }

    .left-panel {
        display: none;
    }

    .login-form-card {
        width: 80%;
        padding-left: 0;
    }
}


.login-text {
    font-size: 1.3rem;
    font-weight:bold
}

.slogan {
    font-size: clamp(3rem, 3vw, 6rem);
}

.filler-line {
    flex-grow: 1;
    height: 1px;
    background-color: rgba(0,0,0,.1)
}