/* ========== Base (Light) ========== */
html, body {
    height: 100%;
}

body {
    margin: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background: #F1F3F4;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Logos */
.client-logo,
.dev-logo {
    position: absolute;
    top: 20px;
    z-index: 10;
}

.client-logo {
    left: 20px;
}

.dev-logo {
    right: 20px;
}

/*.client-logo img {
    max-height: 150px;*/ /* you can set 80px if you prefer smaller */
    /*max-width: 250px;
    height: auto;
    width: auto;
    object-fit: contain;
}*/



.client-logo img {
    max-height: 100px;
    max-width: 200px;
    height: auto;
    width: auto;
    object-fit: contain;
}


.dev-logo img {
    max-height: 100px;
    max-width: 200px;
    height: auto;
    width: auto;
    object-fit: contain;
}

/* Container */
.login-container {
    display: flex;
    max-width: 1100px;
    width: 100%;
    height: 550px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    overflow: hidden;
    background: #fff;
}

/* Left panel */
.login-left {
    flex: 1;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #005c89;
    color: #fff;
}

    .login-left h3 {
        font-size: 28px;
        font-weight: 700;
        margin-bottom: 20px;
    }

    .login-left .form-group {
        margin-bottom: 20px;
    }

        .login-left .form-group input {
            padding: 15px;
            font-size: 16px;
            border-radius: 5px;
            width: 100%;
            border: 4px solid #333;
            box-sizing: border-box;
        }

            .login-left .form-group input:focus {
                border-color: #0093F5;
            }

    .login-left button {
        width: 100%;
        padding: 15px;
        background-color: #0093F5;
        color: #fff;
        font-size: 16px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

        .login-left button:hover {
            background-color: #007bb5;
        }

    .login-left .reset-link {
        color: #ddd;
        font-size: 14px;
        text-decoration: none;
    }

        .login-left .reset-link:hover {
            color: #fff;
        }

/* Right panel */
.login-right {
    flex: 1;
    /* IMPORTANT: path is relative to /css/Login.css */
    background: url('../App_BackGrounds/BG1.png') center center no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000;
    text-align: center;
}

    .login-right h1 {
        font-size: 48px;
        font-weight: 600;
        color: #000;
    }

    .login-right p,
    .login-right .brand-credit {
        font-size: 18px;
        color: #000;
        font-weight: 800;
    }

    .login-right .brand-credit {
        font-size: 14px;
        font-style: italic;
        font-weight: 600;
    }

/* Utility */
.thick-border {
    border: 3px solid #333;
    border-radius: 6px;
    padding: 10px;
    box-sizing: border-box;
}

/* Password modal (light baseline uses Bootstrap defaults) */
.input-group-addon {
    color: inherit;
}

/* ========== Dark Theme Overrides ========== */
.theme-dark body {
    background: #121212;
    color: #e0e0e0;
}

.theme-dark .login-container {
    background: #1e1e1e;
    box-shadow: 0 4px 20px rgba(0,0,0,0.6);
}

/* Left panel dark */
.theme-dark .login-left {
    background-color: #222;
    color: #e0e0e0;
}

    .theme-dark .login-left h3 {
        color: #fff;
    }

    .theme-dark .login-left .form-group input {
        background-color: #333;
        color: #fff;
        border: 2px solid #555; /* slim border in dark for aesthetics */
    }

        .theme-dark .login-left .form-group input:focus {
            border-color: #0093F5;
            background-color: #2a2a2a;
        }

    .theme-dark .login-left button {
        background-color: #0093F5;
        color: #fff;
    }

        .theme-dark .login-left button:hover {
            background-color: #007bb5;
        }

.theme-dark .reset-link {
    color: #aaa;
}

    .theme-dark .reset-link:hover {
        color: #fff;
    }

/* Right panel dark */
.theme-dark .login-right {
    background: url('../App_BackGrounds/BG1.png') center center no-repeat;
    background-size: cover;
    color: #e0e0e0;
    /* alternative:
    background: linear-gradient(135deg, #1f1f1f, #2c2c2c);
    */
}

    .theme-dark .login-right h1,
    .theme-dark .login-right p,
    .theme-dark .login-right .brand-credit {
        color: #000;
        /* #e0e0e0 */
    }

/* Modal + Inputs in dark */
.theme-dark .modal-content {
    background: #1f1f1f;
    color: #e0e0e0;
}

.theme-dark .input-group-addon {
    background: #2a2a2a;
    border-color: #444;
    color: #ddd;
}

.theme-dark .form-control {
    background: #2a2a2a;
    border-color: #444;
    color: #eee;
}

/* Logo color inversion in dark (white/silver look) */
.theme-dark .client-logo img,
.theme-dark .dev-logo img {
    filter: brightness(0) invert(1) grayscale(100%) contrast(100%);
    opacity: 0.85; /* soften it slightly, looks more silver than pure white */
}

/* ============================================================
   Fancy 3D Text-Shadow Title (no Sass needed)
   Usage in HTML:
     <h1 class="font" style="font-size:66px;">P4<span>ADM</span></h1>
   ============================================================ */

/* Tune these two if you want different colours */
:root {
    --shadow-base: #E0E0E0; /* matches your light bg tone */
    --shadow-accent: salmon; /* accent for the <span> */
}

.theme-dark {
    --shadow-base: #d8d8d8; /* slightly dimmer in dark mode */
    --shadow-accent: salmon;
}

/* do not let the generic h1 color overwrite our effect */
.login-right h1.font {
    color: var(--shadow-base);
}

/* smooth animation */
.login-right .font,
.login-right .font span {
    transition: transform 1.2s ease, text-shadow 1.2s ease, color 1.2s ease;
}

.login-right .font {
    cursor: pointer;
    /* Base color of the main text */
    color: var(--shadow-base);
    /* Multi-layer text-shadow (compressed version of the CodePen mixin) */
    text-shadow: -1px 1px 0 rgba(0,0,0,0.10), 1px -1px 0 rgba(255,255,255,0.10), 1px -1px 25px rgba(255,255,255,0.65), -1px 1.9px 1px rgba(0,0,0,0.20), -2px 3.8px 2px rgba(0,0,0,0.18), -3px 5.7px 3px rgba(0,0,0,0.16), -4px 7.6px 4px rgba(0,0,0,0.15), -5px 9.5px 5px rgba(0,0,0,0.14), -6px 11.4px 6px rgba(0,0,0,0.13), -7px 13.3px 7px rgba(0,0,0,0.12), -8px 15.2px 8px rgba(0,0,0,0.11), -9px 17.1px 9px rgba(0,0,0,0.10), -10px 19.0px 10px rgba(0,0,0,0.09), -11px 20.9px 11px rgba(0,0,0,0.08), -12px 22.8px 12px rgba(0,0,0,0.07);
}

    .login-right .font span {
        color: var(--shadow-accent);
        text-shadow: -1px 1px 0 rgba(0,0,0,0.10), 1px -1px 0 rgba(255,255,255,0.12), 1px -1px 25px rgba(255,255,255,0.65), -1px 1.9px 1px rgba(128,0,0,0.20), -2px 3.8px 2px rgba(128,0,0,0.18), -3px 5.7px 3px rgba(128,0,0,0.16), -4px 7.6px 4px rgba(128,0,0,0.15), -5px 9.5px 5px rgba(128,0,0,0.14), -6px 11.4px 6px rgba(128,0,0,0.13), -7px 13.3px 7px rgba(128,0,0,0.12), -8px 15.2px 8px rgba(128,0,0,0.11), -9px 17.1px 9px rgba(128,0,0,0.10), -10px 19.0px 10px rgba(128,0,0,0.09), -11px 20.9px 11px rgba(128,0,0,0.08), -12px 22.8px 12px rgba(128,0,0,0.07);
    }

    /* Hover state roughly mimics the alternate mixin (reverses direction) */
    .login-right .font:hover {
        transform: translate3d(0, 12px, 0) rotate(-2deg);
        text-shadow: -1px -1px 0 rgba(0,0,0,0.10), 1px 1px 0 rgba(255,255,255,0.10), 1px -1px 25px rgba(255,255,255,0.65), -1px -1.9px 1px rgba(0,0,0,0.20), -2px -3.8px 2px rgba(0,0,0,0.18), -3px -5.7px 3px rgba(0,0,0,0.16), -4px -7.6px 4px rgba(0,0,0,0.15), -5px -9.5px 5px rgba(0,0,0,0.14), -6px -11.4px 6px rgba(0,0,0,0.13), -7px -13.3px 7px rgba(0,0,0,0.12), -8px -15.2px 8px rgba(0,0,0,0.11), -9px -17.1px 9px rgba(0,0,0,0.10), -10px -19.0px 10px rgba(0,0,0,0.09), -11px -20.9px 11px rgba(0,0,0,0.08), -12px -22.8px 12px rgba(0,0,0,0.07);
    }

        .login-right .font:hover span {
            text-shadow: -1px -1px 0 rgba(0,0,0,0.10), 1px 1px 0 rgba(255,255,255,0.12), 1px -1px 25px rgba(255,255,255,0.65), -1px -1.9px 1px rgba(128,0,0,0.20), -2px -3.8px 2px rgba(128,0,0,0.18), -3px -5.7px 3px rgba(128,0,0,0.16), -4px -7.6px 4px rgba(128,0,0,0.15), -5px -9.5px 5px rgba(128,0,0,0.14), -6px -11.4px 6px rgba(128,0,0,0.13), -7px -13.3px 7px rgba(128,0,0,0.12), -8px -15.2px 8px rgba(128,0,0,0.11), -9px -17.1px 9px rgba(128,0,0,0.10), -10px -19.0px 10px rgba(128,0,0,0.09), -11px -20.9px 11px rgba(128,0,0,0.08), -12px -22.8px 12px rgba(128,0,0,0.07);
        }