/* =====================================================
   LOGIN PAGE  ( /user/login )
   Styled to match sites/default/files/templates/maquette.jpg
===================================================== */

body.path-user-login {
    margin: 0;
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    background:
        radial-gradient(circle at 30% 40%,
            #0e4a92 0%,
            #0a366f 45%,
            #061f45 100%);
    height: 100vh;
    /* Keep everything within the viewport — no page scroll. */
    overflow: hidden;
}

/* Hide the default Drupal chrome we don't want on the login screen. */
.path-user-login h1,
.path-user-login .tabs,
.path-user-login .breadcrumb,
.path-user-login .messages__wrapper > .region-highlighted,
.path-user-login header,
.path-user-login footer {
    display: none;
}

/* Soft blue light blur glow behind the login card. */
body.path-user-login::before {
    content: "";
    position: fixed;
    top: 50%;
    left: 50%;
    width: 760px;
    height: 760px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle,
        rgba(70, 175, 255, 0.55) 0%,
        rgba(35, 125, 235, 0.25) 38%,
        rgba(20, 90, 200, 0) 70%);
    filter: blur(100px);
    pointer-events: none;
    z-index: 0;
}

/* ---- Layout ---- */

.login-page {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 16px;
    box-sizing: border-box;
}

.login-card {
    /* Render the card as if the window were zoomed to 90%. */
    zoom: 0.9;
    width: 460px;
    max-width: 100%;
    padding: 55px 55px 65px;
    box-sizing: border-box;
    border-radius: 22px;
    /* Transparent border painted by the bright gradient below (border-box). */
    border: 2px solid transparent;
    background:
        /* Card fill. */
        linear-gradient(160deg,
            rgba(30, 116, 236, 0.95) 0%,
            rgba(18, 86, 199, 0.96) 60%,
            rgba(16, 76, 178, 0.97) 100%) padding-box,
        /* Bright "lightning" edge: brilliant at the corners, dim mid-edge. */
        linear-gradient(135deg,
            #e6faff 0%,
            #5cc8ff 20%,
            rgba(120, 180, 255, 0.15) 50%,
            #7fe0ff 80%,
            #ffffff 100%) border-box;
    box-shadow:
        0 0 22px rgba(90, 195, 255, 0.55),   /* tight outer glow  */
        0 0 60px rgba(60, 150, 255, 0.35),   /* wide outer glow   */
        0 25px 60px rgba(0, 0, 0, 0.4),      /* drop shadow       */
        inset 0 0 26px rgba(160, 225, 255, 0.28); /* inner edge glow */
    position: relative;
    overflow: hidden;
}

/* ---- Logo badge (circular cyan ring, matches the maquette icon) ---- */

.login-logo {
    width: 120px;
    height: 120px;
    margin: 0 auto 50px;
    border-radius: 50%;
    border: 3px solid #2fdcff;
    box-shadow: 0 0 18px rgba(47, 220, 255, 0.35);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
}

.login-logo img {
    width: 72px;
    height: 72px;
    object-fit: contain;
}

/* ---- Form ---- */

.user-login-form {
    display: flex;
    flex-direction: column;
    gap: 34px;
}

.user-login-form label {
    display: none;
}

.user-login-form .form-item {
    margin: 0;
}

.user-login-form .form-text {
    width: 100%;
    box-sizing: border-box;
    background: transparent;
    border: none;
    border-bottom: 2px solid rgba(255, 255, 255, 0.7);
    color: #ffffff;
    font-size: 21px;
    padding: 12px 0 12px 42px;
    outline: none;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 24px 24px;
}

.user-login-form .form-text::placeholder {
    color: rgba(255, 255, 255, 0.85);
}

.user-login-form .form-text:focus {
    border-bottom-color: #2fdcff;
}

/* Envelope icon for the "Email ID" field. */
.user-login-form input[name="name"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect x='2' y='4' width='20' height='16' rx='1'/%3E%3Cpath d='M2 6l10 7 10-7'/%3E%3C/svg%3E");
}

/* Lock icon for the "Password" field. */
.user-login-form input[name="pass"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a5 5 0 00-5 5v3H5v14h14V9h-2V6a5 5 0 00-5-5zm3 8H9V6a3 3 0 016 0v3z'/%3E%3C/svg%3E");
}

/* ---- Submit button with cyan glow bar behind it ---- */

.form-actions {
    position: relative;
    margin-top: 30px;
}

.form-actions::before {
    content: "";
    position: absolute;
    left: -55px;
    right: -55px;
    top: 50%;
    height: 128px;
    transform: translateY(-50%);
    background: rgba(120, 235, 255, 0.18);
    pointer-events: none;
}

.form-submit {
    position: relative;
    width: 100%;
    padding: 22px;
    border: none;
    font-size: 30px;
    letter-spacing: 6px;
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    cursor: pointer;
    background: linear-gradient(90deg, #24c8ff, #0bb7ee);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.form-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

/* ---- "Reset your password" / other links ---- */

.item-list,
.user-login-form .description {
    text-align: center;
    margin-top: 30px;
}

.item-list a,
.user-login-form .description a {
    color: #ffffff;
    text-decoration: none;
    opacity: 0.85;
    letter-spacing: 1px;
}

.item-list a:hover,
.user-login-form .description a:hover {
    opacity: 1;
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 560px) {

    /* Let short phones scroll vertically; never scroll sideways. */
    body.path-user-login {
        height: auto;
        min-height: 100vh;
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* Smaller glow on phones; keep it fixed so it never adds page width. */
    body.path-user-login::before {
        width: 460px;
        height: 460px;
        filter: blur(80px);
    }

    .login-page {
        padding: 22px 14px;
    }

    .login-card {
        /* Predictable sizing on small screens (no zoom scaling). */
        zoom: 1;
        width: 100%;
        padding: 38px 24px 46px;
        border-radius: 18px;
    }

    .login-logo {
        width: 92px;
        height: 92px;
        margin-bottom: 34px;
    }

    .login-logo img {
        width: 54px;
        height: 54px;
    }

    .user-login-form {
        gap: 26px;
    }

    .user-login-form .form-text {
        font-size: 17px;
        padding: 10px 0 10px 38px;
        background-size: 20px 20px;
    }

    .form-actions {
        margin-top: 24px;
    }

    /* Match the glow bar to the reduced card padding. */
    .form-actions::before {
        left: -24px;
        right: -24px;
        height: 96px;
    }

    .form-submit {
        padding: 18px;
        font-size: 22px;
        letter-spacing: 4px;
    }
}