/*!
 * Filename: myemailcenter-login.css
 * Description: Login & signup page styling for MyEmailCenter (MailEnable-independent).
 * Author: Ubiquitous LLC / Daniel Kearns (DDK) & ChatGPT (GPT)
 * Created: 2025-11-07
 * Last Modified: 2025-11-13 (GPT) - Adjust body/hero background so form sits on image
 * Last Modified: 2025-11-13 (GPT) - Add homepage-style header bar to login/signup
 */

/* Load Montserrat for the wordmark to match homepage */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&display=swap');

/* ================================
   Base layout and background
   ================================ */

/* Make sure the page can use full viewport height */
html,
body.login-body {
    height: 100%;
}

/* Body for login/signup pages */
body.login-body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    /* Fallback if the image fails */
    background-color: #000;
    color: #ffffff;
    position: relative;
    overflow: hidden;

    /* Let header sit on top and content fill the rest */
    display: flex;
    flex-direction: column;
}

/* Full-screen background image from <img class="hero-image"> */
.hero-image {
    position: fixed;       /* stick to viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;          /* fill the screen */
    object-fit: cover;     /* cover without distortion */
    z-index: -1;           /* behind all content */
    display: block;
}

/* ================================
   Header bar (matches homepage)
   ================================ */

.header {
    position: relative;
    z-index: 5;
    width: 100%;
    padding: 16px 40px;
    display: flex;
    align-items: center;

    /* Dark, translucent strip over hero image */
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.92),
        rgba(0, 0, 0, 0.55)
    );
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
}

/* Logo + wordmark wrapper */
.logo-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Logo image */
.site-logo {
    height: 48px;        /* tweak size as you like */
    width: auto;
    border-radius: 8px;  /* optional: soften corners */
}

/* Text next to the logo */
.logo-wordmark {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: #ffffff;
}

/* ================================
   Login / signup shell & panel
   ================================ */

/* Main wrapper that centers the login/signup shell */
.login_bg {
    position: relative;
    width: 100%;
    /* Fill remaining vertical space beneath the header */
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    padding: 24px 16px;
}

/* When wallpaper is enabled, this is applied via JS
   (optional: keep if you still want the old plugin backgrounds) */
.login_bg.login_background {
    background: transparent; /* hero-image now handles the background */
}

.login_shell {
    max-width: 780px;
    width: 95%;
    background: rgba(0, 0, 0, 0.75);
    border-radius: 10px;
    padding: 24px 28px;
    color: #fff;
    box-sizing: border-box;
}

/* Left/right split */
.login_panel {
    display: flex;
    flex-wrap: wrap;
}

/* Left side (logo area) */
.login_panel_left {
    flex: 0 0 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.login_panel_left_inner img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Right side (form) */
.login_panel_right {
    flex: 1 1 280px;
    padding: 10px 10px 10px 20px;
    box-sizing: border-box;
}

.login_panel_right h1 {
    margin: 0 0 14px;
    font-size: 1.6rem;
}

/* ================================
   Inputs & text fields
   ================================ */

.textfield {
    width: 100%;
    max-width: 320px;
    padding: 8px 10px;
    margin-bottom: 8px;
    border-radius: 4px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    font-size: 0.95rem;
    color: #111111;
}

.textfield::placeholder {
    color: #666666;
}

/* Shared info / error label */
#lblDescription {
    color: #ffd700;
    min-height: 22px;
    visibility: hidden;
    margin-top: 4px;
    font-size: 0.9rem;
}

/* ================================
   Language & theme selectors
   ================================ */

.login_lang_table {
    margin-top: 12px;
    margin-bottom: 10px;
    border-collapse: collapse;
}

.login_lang_table td {
    padding-right: 18px;
    vertical-align: top;
    color: #fff;
    font-size: 0.9rem;
}

.login_lang_table_mid {
    width: 10px;
}

/* ================================
   Remember checkbox
   ================================ */

.login_remember_checkbox {
    margin-top: 8px;
    margin-bottom: 8px;
    color: #fff;
    font-size: 0.9rem;
}

.login_remember_checkbox .checkbox {
    display: inline-flex;
    align-items: center;
}

.login_remember_checkbox input[type="checkbox"] {
    margin-right: 6px;
}

/* ================================
   Buttons & button shells
   ================================ */

#tblButtons {
    width: 100%;
    margin-top: 10px;
}

#tblButtons td {
    text-align: right;
}

/* Button container (shell) */
.bttn_shell {
    display: inline-block;
    margin-left: 8px;
}

/* Base button style */
.bttn_shell .bttn {
    display: inline-block;
    padding: 6px 14px;
    background: #444;
    border-radius: 4px;
    color: #fff;
    text-decoration: none;
    font-size: 0.95rem;
    cursor: pointer;
    border: none;
    outline: none;
    transition: background 0.2s ease, transform 0.1s ease;
}

/* Primary/blue-style button */
.bttn_shell.blue .bttn {
    background: #007bff;
}

/* Hover/focus states */
.bttn_shell .bttn:hover,
.bttn_shell .bttn:focus {
    background: #555;
}

.bttn_shell.blue .bttn:hover,
.bttn_shell.blue .bttn:focus {
    background: #0066d6;
}

/* Active feedback */
.bttn_shell .bttn:active {
    transform: scale(0.97);
}

/* ================================
   Footer links & copyright
   ================================ */

.login_foot_nav {
    margin-top: 12px;
    font-size: 0.85rem;
}

.login_foot_nav a {
    color: #cfe4ff;
    text-decoration: none;
}

.login_foot_nav a:hover {
    text-decoration: underline;
}

.login_copyright {
    margin-top: 14px;
    text-align: center;
    color: #ddd;
    font-size: 0.8rem;
}

.login_copyright a {
    color: #cfe4ff;
    text-decoration: none;
}

.login_copyright a:hover {
    text-decoration: underline;
}

/* ================================
   Overlays: loading, options, notice
   ================================ */

.pageLoad_shell {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.6);
    z-index: 1000;
}

/* Card for the overlay content */
.loadPanel_shell {
    background: rgba(15, 15, 15, 0.9);
    border-radius: 6px;
    padding: 16px 18px;
    min-width: 220px;
    color: #fff;
    box-sizing: border-box;
    text-align: left;
}

.loadPanel_shell h2 {
    margin: 0 0 10px;
    font-size: 1.1rem;
}

/* Loading bar animation */
.loadPanel_bar {
    height: 4px;
    background: linear-gradient(90deg, #00b4ff, #00ff8c);
    border-radius: 4px;
    animation: loadBar 1.2s infinite alternate;
}

@keyframes loadBar {
    from { width: 30%; }
    to   { width: 100%; }
}

/* Cookie / terms notice sizing */
#js_terms_notice .loadPanel_shell {
    max-width: 670px;
}

/* Options dialog sizing */
#js_login_options .loadPanel_shell {
    width: 260px;
}

#js_login_options label {
    font-size: 0.9rem;
}

/* Hide overlays by default (JS will show them as needed) */
#js_login_wait,
#js_login_options,
#js_terms_notice {
    display: none;
}

/* ================================
   Miscellaneous
   ================================ */

/* JS warning banner */
#jsWarning {
    color: #fff;
    background: #c00;
    padding: 8px;
    text-align: center;
    font-size: 0.9rem;
}

/* Eye icon next to password (Font Awesome) */
#togglepwd {
    margin-left: -20px;
    cursor: pointer;
    color: #fff;
}

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

@media (max-width: 640px) {
    .header {
        padding: 12px 18px;
    }

    .login_panel {
        flex-direction: column;
    }

    .login_panel_left {
        flex: 0 0 auto;
        justify-content: center;
        margin-bottom: 10px;
    }

    .login_panel_right {
        padding-left: 10px;
    }

    .login_shell {
        padding: 18px 16px;
    }

    .textfield {
        max-width: 100%;
    }

    #tblButtons td {
        text-align: left;
    }

    .login_foot_nav {
        text-align: left;
    }
}

/* ================================
   Signup-specific tweaks
   ================================ */

.signup-field {
    width: 260px;
    max-width: 100%;
}

.signup-label {
    display: block;
    margin-bottom: 4px;
    font-weight: normal;
    color: #fff;
    font-size: 0.9rem;
}

.signup-section {
    margin-bottom: 8px;
}

.signup-help {
    font-size: 0.8rem;
    color: #d0d0d0;
    margin-bottom: 8px;
}