:root {
    --bg-primary: #0f3a5f;
    --bg-panel: rgba(27, 52, 54, 0.8);
    --text-secondary: #cfe0f1;
    --color-white: #ffffff;
    --color-blue-50: #0071bc;
    --color-blue-80: #014a7e;
    --color-error: red;
    --color-gray-05: #fafafa;
    --color-gray-10: #e9e9ea;
    --color-gray-20: #ddd;
    --color-gray-40: #a6a8a9;
    --color-gray-60: #7a7c7f;
    --color-gray-80: #4d5154;
    --color-gray-100: #212529;
    --cta-bg: #a9c6dd;
    --cta-text: #0f3a5f;
    --font-sans: "Fira Sans",Arial,sans-serif;
    --font-sans-bold: "Fira Sans Bold",Arial,sans-serif;
    --font-heading: "Montserrat",Arial,sans-serif;
    /*line height*/
    --line-height-heading: 1.175;
    --line-height-base: 1.5;
    --line-height-lg: 1.375;
    /* Spacing Scale */
    --space-base: calc(var(--line-height-base) * 1rem); /* 1.5rem */
    --space-0: 0;
    --space-0-5: calc(var(--space-base) * 0.125);
    --space-1: calc(var(--space-base) * 0.25);
    --space-1-5: calc(var(--space-base) * 0.375);
    --space-2: calc(var(--space-base) * 0.5);
    --space-3: calc(var(--space-base) * 0.75);
    --space-4: calc(var(--space-base) * 1);
    --space-5: calc(var(--space-base) * 1.5);
    --space-6: calc(var(--space-base) * 2);
    /*border radius*/
    --radius-32: calc(var(--space-base) * 1.5);
}

* {
    box-sizing: border-box;
    font-family: var(--font-sans);
}

/*Coomon spacing*/
.px-1 {
    padding-left: var(--space-1) !important;
    padding-right: var(--space-1) !important;
}

.mt-0 {
    margin-top: 0 !important;
}

.mt-1 {
    margin-top: var(--space-1) !important;
}

.mt-6 {
    margin-top: var(--space-6) !important;
}


.landing-wrapper {
    min-height: 100dvh;
    font-family: var(--font-sans);
    background: url("../img/safeharbor.jpg") center no-repeat fixed;
    background-size: cover;
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.wrapper {
    width: 100%;
    height: 100%;
    padding: 0 var(--space-base);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Logo */
.emp-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: var(--space-4) 0;
    width: 100%;

    img {
            width: 40%;
        }
}

@media (width >= 768px) {
    .emp-logo img {
        width: 20%;
    }
}

@media (width >= 1280px) {
    .emp-logo img {
        width: 15%;
    }
}


/* Center Panel */
.panel {
    width: 100%;
    height: 80vh;
    aspect-ratio: 16 / 9;
    background: var(--bg-panel);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-5) 0;
}

/* Lock exact size at full HD */
@media (width >= 992px) {

    .wrapper {
        padding: 0;
    }

    .panel {
        width: 70%;
        height: 70vh;
    }
}

.heading1 {
    font-size: clamp(2rem, 3.2vw, 3rem);
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 0;
    font-family: var(--font-heading);

    strong {
        font-family: inherit;
    }

    span {
        font-family: inherit;
        font-weight: 400;
        letter-spacing: 0.05em;
    }
}

.subhead {
    max-width: 95%;
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
    font-size: 1rem;
    line-height: var(--space-base);
    color: var(--text-secondary);
    text-align: justify;
    padding: var(--space-2);
    /*nested rule*/
    @media (width >= 62em) {
        max-width: 70%;
        margin-top: var(--space-2);
        margin-bottom: var(--space-2);
    }

    @media (width >= 85.38em) and (height >= 48em) {
        max-width: 60ch;
        margin-top: var(--space-4);
        margin-bottom: var(--space-4);
    }
}


/*login popup*/
#blanket {
    background-color: var(--color-gray-80);
    opacity: 0.65;
    position: fixed;
    z-index: 9001;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

#popUpDiv {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 9002;
    width: auto;
    height: auto;
    background-color: var(--color-white);
    transform: translate(-50%, -50%);

    @media (width >= 768px) {
        width: 580px;    
    }
}

.login-popup {
    padding: var(--space-4);

    .login-popup-header {
        display: flex;
        justify-content: space-between;

        h4 {
               margin: 0;
               color: var(--color-blue-50);
           }

       .close {
            color: var(--color-blue-50);
            text-decoration: none;
            width: var(--space-3);
            height: var(--space-3);  
            text-align: center;
            font-size: 0.85rem;
            font-weight: bold;
            padding-top: 0.125rem;

            &:hover {
                        background-color: var(--color-gray-20);
                        border-radius: 0.25rem;
                    }
        }       
    }

    .login-metric {
            background-color: var(--color-gray-10);
            padding: var(--space-3);
            margin-top: 1rem;
            border-radius: 0.5rem;

            h3 {
                margin: 0 0 var(--space-2) 0;
            }

            .editor-field {
                width: auto;
                display: flex;
                justify-content: space-between;
                margin-bottom: 0!important;
                align-items: center;
            }
    }
}



.get-started-btn {
    padding: var(--space-2) var(--space-5);
    border-radius: 2rem;
    background: var(--cta-bg);
    color: var(--cta-text);
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    &:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    }
}

footer {
    margin: var(--space-3) 0;
    font-size: 0.75rem;
    color: var(--color-white);
    text-shadow: 0 0 4px oklch(0% 0 0);
}

/*Login style*/
#login {
    margin: 0;

        /* Layout */
        .login-container {
            display: grid;
            grid-template-columns: 1fr;
            width: 100%;
            height: 100vh;
            background: var(--color-white);
        }

        /* LEFT PANEL */
        .left-container {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            margin-left: 0;
             padding: 0 var(--space-4) var(--space-2);
            overflow: auto;
        }

        .form-box {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100%;
            font-size: 0.85rem;
            color: var(--color-gray-80);

            form {
                     padding: var(--space-1);
                 }
        }

        .log-greeting {
            font-family: var(--font-heading);
            font-size: clamp(2.25rem, 2.5vw, 3.5rem);
            font-weight: 800;
            color: var(--color-gray-80); 
            margin-bottom: 3rem;
        }

        /* Inputs */
        .username-field, .editor-field, .captcha-image {
             margin-bottom: var(--space-4);
             font-size: 1rem;

            label {
                display: block;
                font-family: var(--font-sans);
                font-size: 1rem; 
                font-weight:600;
                color: var(--color-gray-80);
                margin-bottom: var(--space-1);
            }

            input, select {
                font-size: 1rem;
                width: 98%;
                padding: calc(var(--space-base) * 0.64) calc(var(--space-base) * 0.667);
                border-radius: 8px;
                border: 1px solid var(--color-gray-40);
                outline: none;
                transition: 0.3s;
            }

            input:focus, select:focus {
                border-color: var(--accent);
                box-shadow: 0 0 0 2px rgba(110,193,228,0.2);
            }            

            select {
                width: auto;
                margin-right: var(--space-3);
            }
        }




        /* Forgot */
        .forgot a {
            display: block;
            font-size: 1rem;
            font-weight: 600;
            padding-right: var(--space-2);
            margin-top: 3.5rem;
            margin-bottom: var(--space-3);
            color: var(--color-blue-50);
            text-align: right;
            text-decoration-line: underline;
            text-decoration-thickness: 0.1rem;
            text-decoration-color: oklch(60% 0.15 250 / 0.48);
            text-underline-offset: 0.25rem;
            transition: color 0.24s ease-in-out, text-decoration-color 0.24s ease-in-out, text-decoration-thickness 0.24s ease-in-out, text-underline-offset 0.2s ease-in-out;
        }

            .forgot a:hover, .forgot a:active, .forgot a:focus {
                color: var(--color-hover);
                text-decoration-color: var(--color-blue-80);
                text-decoration-thickness: 0.08rem;
                text-underline-offset: 0.1rem;
            }

        /* Button */
        .submit-btn {
            width: 100%;
            padding: calc(var(--space-base) * 0.5) calc(var( --space-base) * 1.36);
            margin: 0;
            border-radius: var(--radius-32);
            float: right;
            font-family: var(--font-heading);
            font-size: 1rem;
            font-weight: 600;
            background-color: var(--color-gray-80);
            border: 0;
            cursor: pointer;            
            color: var(--color-white);
        }

            .submit-btn:hover, .submit-btn:focus {
                background-color: var(--color-gray-100);
            }

        .editor-field > .submit-btn {
            padding: calc(var(--space-base) * 0.2) calc(var(--space-base) * 1.36);
            font-weight: 500;
            height: var(--space-5);
        }

        .send-pw-btn {
            margin-top: var(--space-6);
        }

        /* RIGHT PANEL */
        .right-container {
            position: relative;
            overflow: hidden;
            border-right: solid clamp(4px, 1.2vw, 20px) oklch(0.547 0.132484 243.0844);
        }

            .right-container::before {
                content: "";
                position: absolute;
                inset: 0;
                height: 100vw; 
                transform: scaleX(-1) rotate(-90deg);
                background: url("../img/safeharbor.png") no-repeat right bottom / 110%;
                z-index: 0; 
            }

        .boat-logo {
            display: none;
            width: 90px;
            left: auto;
            right: 5%;
            top: 5%;
            position: absolute;
            z-index: 1;
        }

        .emp-logo {
            height: auto;
            width: 120px;
            position: absolute;
            left: auto;
            right: 5%;
            top: auto;
            bottom: 0;
        }

        .primary-img {
            margin-top: var(--space-3);
             max-width: 180px;
            max-height: 48px;
        }

        .login-footer {
            font-size: 0.8rem;
            color: var(--color-gray-60);
            margin-bottom: var(--space-4);
        }

        .field-validation-error {
            color: var(--color-error);
            font-size: 0.8rem;
            margin-top: -1rem;
            margin-bottom: -2.5rem;
        }

        .help-block {
            display: block;
            margin-bottom: var(--space-3);
        }

    /*common classes*/
    .mb-0 {
        margin-bottom: 0!important;
    }

    /* Responsive */    
    @media (width >= 768px) {
        .login-container {
            grid-template-columns: 1.18fr 1fr;
        }

        .left-container {
            padding: 0 var(--space-6) var(--space-6);
            border-left: solid 1px var(--color-gray-60);
        }

        .right-container {
            min-height: 100vh;
        }

            .right-container::before {
                width: auto;
                height: 100vh;
                transform: scaleX(-1);
                background: url("../img/safeharbor.png") no-repeat right center / cover;
            }

        .boat-logo {
            display: block;
        }

        .emp-logo {
            width: 200px;
        }

        .submit-btn {
            width: auto;
            margin: calc(var(--space-base) * 0.1875) calc(var(--space-base) * 0.65);
        }

        #popUpDiv .submit-btn {
            margin: 0;
        }

        .editor-field select {
            width: 80%;
        }
    }

    @media (width >= 992px) {
        .left-container {
            margin-left: 3rem;
            border-left: solid 1px var(--color-gray-60);
        }
    }

    @media (width >= 1280px) {
        .left-container {
            padding: 0 calc(var(--space-base) * 3.2) calc(var(--space-base) * 2);
            margin-left: 6.5rem;
        }
    }

    @media (width >= 1600px) {
        .left-container {
            width: 80%;
            padding: 0 calc(var(--space-base) * 4) calc(var(--space-base) * 2);
            margin-left: 15%;
        }
    }
}