/* Admin login / logout — full-bleed beach scene, left-aligned glass card, stable footer */

body.login {
    --ms-login-card-width: min(28rem, calc(100vw - 2.5rem));
    --ms-login-card-left: clamp(1rem, 4vw, 3.5rem);
    --ms-login-glass: rgba(255, 255, 255, 0.16);
    --ms-login-footer-glass: rgba(15, 23, 42, 0.34);
    min-height: 100vh;
    margin: 0;
    background-color: #87ceeb;
    background-image: url("../branding/admin_login_bg.png");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    /* Avoid background-attachment:fixed — it softens the photo on Windows/Chrome */
    background-attachment: scroll;
    image-rendering: -webkit-optimize-contrast;
}

/* Keep the centered Magic Sands watermark (from admin_theme) above the photo */
body.login::before {
    z-index: 0;
    opacity: 0.28;
}

body.login .skip-to-content-link {
    z-index: 5;
}

/* Full viewport shell — override Django's small centered card */
body.login #container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    overflow: visible;
    background: transparent;
    box-shadow: none;
}

/* Shared card column on the left — same outer width for header + body */
body.login #header,
body.login #main {
    box-sizing: border-box;
    width: var(--ms-login-card-width);
    max-width: var(--ms-login-card-width);
    margin-left: var(--ms-login-card-left);
    margin-right: auto;
    flex-shrink: 0;
}

/* Brand bar + form stack as one continuous box */
body.login #header {
    order: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    margin-bottom: 0;
    padding: 0.95rem 1.25rem;
    border: none;
    border-radius: 10px 10px 0 0;
    background: var(--logo-cyan);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
}

body.login #header #branding,
body.login #header h1,
body.login #site-name {
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
}

body.login #header h1,
body.login #header h1 a,
body.login #site-name a {
    color: #ffffff !important;
    text-align: center;
}

body.login #main {
    order: 2;
    display: block;
    flex: 0 0 auto;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0 !important;
    background: transparent;
    border: none;
}

body.login #main > .content,
body.login #content,
body.login #content-main {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    float: none;
}

body.login #content {
    padding: 1.15rem 1.25rem 1.35rem !important;
    border-radius: 0 0 10px 10px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-top: none;
    background: var(--ms-login-glass) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.14);
}

body.login .errornote {
    margin: 0 0 0.85rem;
    background: rgba(254, 242, 242, 0.92);
    color: #7f1d1d;
    border: 1px solid rgba(252, 165, 165, 0.85);
}

body.login #login-form {
    background: transparent;
}

body.login .form-row {
    padding: 0.35rem 0;
}

body.login .form-row label {
    color: var(--ms-text-on-light);
    font-weight: 600;
}

body.login .form-row #id_username,
body.login .form-row #id_password {
    box-sizing: border-box;
    width: 100%;
    color: var(--ms-text-on-light);
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.65);
    border-radius: 6px;
}

body.login .form-row #id_username:focus,
body.login .form-row #id_password:focus {
    border-color: var(--logo-cyan-dark);
    outline: 2px solid rgba(0, 163, 199, 0.28);
    outline-offset: 1px;
}

body.login .submit-row {
    text-align: right;
    background: transparent;
    border: none;
    padding: 1rem 0 0;
    margin: 0;
}

body.login .submit-row input[type="submit"] {
    background: var(--logo-cyan-dark);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 0.55rem 1.35rem;
    font-weight: 600;
    cursor: pointer;
}

body.login .submit-row input[type="submit"]:hover,
body.login .submit-row input[type="submit"]:focus {
    background: var(--logo-cyan-darker);
}

body.login .password-reset-link a {
    color: var(--ms-accent-on-light);
}

/* Stable full-width footer — transparent, slightly darker than login glass */
body.login #footer {
    order: 3;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin-top: auto;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    background: transparent;
}

body.login .ms-admin-footer {
    margin: 0;
    padding: 0.95rem 1.25rem 1.1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    background: var(--ms-login-footer-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: none;
}

body.login .ms-admin-footer__title {
    color: #f8fafc;
}

body.login .ms-admin-footer__subtitle,
body.login .ms-admin-footer__meta {
    color: rgba(241, 245, 249, 0.88);
}

@media (max-width: 767px) {
    body.login {
        --ms-login-card-left: 0.75rem;
    }

    body.login #header {
        margin-top: 2.5rem;
    }

    body.login #main {
        margin-bottom: 1.25rem;
    }
}

/* Logout confirmation card (same shell as login) */
body.logged-out #content {
    padding: 1.35rem 1.25rem 1.5rem !important;
    border-radius: 0 0 10px 10px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-top: none;
    background: var(--ms-login-glass) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.14);
}

body.logged-out .ms-logout-card {
    margin: 0;
    text-align: center;
}

body.logged-out .ms-logout-card__message {
    margin: 0 0 1.15rem;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--ms-text-on-light, #0f172a);
}

body.logged-out .ms-logout-card__actions {
    margin: 0;
}

body.logged-out .ms-logout-card__button {
    display: inline-block;
    padding: 0.6rem 1.35rem;
    border-radius: 6px;
    background: var(--logo-cyan-dark, #00a3c7);
    color: #ffffff !important;
    font-weight: 600;
    text-decoration: none !important;
}

body.logged-out .ms-logout-card__button:hover,
body.logged-out .ms-logout-card__button:focus {
    background: var(--logo-cyan-darker, #0088a8);
    color: #ffffff !important;
}