/* ==========================================================
   Wish Life TV – Login page structure
   ========================================================== */

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
}

/*
 * The page becomes a three-part vertical layout:
 *
 * 1. Small branded accent line
 * 2. Flexible centred login content
 * 3. Subtle footer
 */
#page-login {
    width: 100% !important;
    max-width: none !important;
    min-height: 100vh;
    min-height: 100svh;

    display: flex;
    flex-direction: column;

    margin: 0 !important;
    padding: 0 !important;

    background:
        radial-gradient(
            circle at 12% 25%,
            rgba(22, 139, 69, 0.15),
            transparent 30rem
        ),
        radial-gradient(
            circle at 88% 78%,
            rgba(239, 133, 15, 0.14),
            transparent 30rem
        ),
        linear-gradient(
            135deg,
            #f7fcf9 0%,
            #f5f9fd 52%,
            #fff9f3 100%
        );

    box-sizing: border-box;
}

/* Thin brand strip instead of a large header */
#page-login::before {
    content: "";

    display: block;
    flex: 0 0 4px;
    width: 100%;

    background:
        linear-gradient(
            90deg,
            #168b45 0%,
            #087fbd 52%,
            #ef850f 100%
        );
}

/* Centred login-content region */
#page-login section {
    width: 100%;
    flex: 1 0 auto;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    margin: 0 !important;
    padding: 38px 20px 30px !important;

    box-sizing: border-box;
}

/* Subtle page footer */
/* Fixed footer at the real bottom of the viewport */
#page-login::after {
    content:
        "© 2026 Wish Life TV  •  TV Channel Management System  •  Authorized access only";

    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;

    width: 100%;
    min-height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 10px 20px;

    color: #64748b;
    background: rgba(255, 255, 255, 0.72);

    border-top: 1px solid rgba(49, 77, 99, 0.09);

    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.15px;
    text-align: center;

    box-shadow: 0 -6px 20px rgba(31, 54, 72, 0.035);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    box-sizing: border-box;
}

/* Keep heading and card on the same centre line */
#page-login .page-card-head {
    width: 100%;
    max-width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;

    margin: 0 auto 26px !important;
    text-align: center;
    box-sizing: border-box;
}

/*
 * Frappe places the header inside the card's padded content box. Keeping the
 * header at the card's outer width shifts it by the padding amount, so both
 * the logo and its copy need to size against the inner content box instead.
 */
#page-login .page-card-head-text {
    width: 100%;
    text-align: center;
}

#page-login .page-card-head-text,
#page-login .page-card-body,
#page-login .page-card-actions,
#page-login form {
    max-width: 100%;
    box-sizing: border-box;
}

#page-login .login-content.page-card {
    width: 420px !important;
    max-width: calc(100vw - 32px) !important;

    margin: 0 auto !important;
    padding: 32px 36px !important;

    background: rgba(255, 255, 255, 0.94);

    border: 1px solid rgba(35, 67, 91, 0.09);
    border-radius: 20px;

    box-shadow:
        0 22px 55px rgba(30, 66, 91, 0.13),
        0 8px 20px rgba(30, 66, 91, 0.06);

    box-sizing: border-box;
}

/* Logo */
#page-login .page-card-head img {
    display: block;
    flex: 0 0 auto;

    width: 84px !important;
    height: 84px !important;
    max-height: none !important;

    margin: 0 auto !important;

    padding: 7px;

    object-fit: contain;

    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(27, 81, 110, 0.08);
    border-radius: 22px;

    box-shadow:
        0 12px 30px rgba(31, 79, 108, 0.12),
        0 4px 10px rgba(31, 79, 108, 0.06);

    box-sizing: border-box;
}

/* Main heading */
#page-login .page-card-head h4 {
    margin: 18px 0 0 !important;

    color: #17324d;

    font-size: 25px;
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: -0.45px;
}

/* Login-page subtitle */
#page-login .page-card-head h4::after {
    content: "TV Channel Management System";

    display: block;

    margin-top: 8px;

    color: #718197;

    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.15px;
}

/* Smaller laptop screens */
@media (max-height: 760px) {
    #page-login section {
        justify-content: flex-start;
        padding-top: 30px !important;
        padding-bottom: 24px !important;
    }

    #page-login .page-card-head {
        margin-bottom: 20px !important;
    }

    #page-login .page-card-head img {
        width: 72px !important;
        height: 72px !important;
    }

    #page-login .page-card-head h4 {
        margin-top: 14px !important;
        font-size: 23px;
    }

    #page-login .login-content.page-card {
        padding-top: 28px !important;
        padding-bottom: 28px !important;
    }
}

/* Mobile layout */
@media (max-width: 600px) {
    #page-login section {
        justify-content: flex-start;
        padding: 30px 16px 24px !important;
    }

    #page-login .login-content.page-card {
        width: 100% !important;
        max-width: 420px !important;
    }

    #page-login .page-card-head {
        margin-bottom: 20px !important;
    }

    #page-login .page-card-head img {
        width: 72px !important;
        height: 72px !important;
        border-radius: 19px;
    }

    #page-login .page-card-head h4 {
        font-size: 22px;
    }

    #page-login .login-content.page-card {
        padding: 27px 22px !important;
        border-radius: 18px;
    }

    #page-login::after {
        min-height: 54px;
        padding: 10px 18px;

        font-size: 10px;
        line-height: 1.5;
    }
}

@media (max-width: 600px) {
    #page-login section {
        padding-bottom: 76px !important;
    }

    #page-login::after {
        min-height: 52px;
        padding: 9px 16px;

        font-size: 9.5px;
        line-height: 1.45;
    }
}