/* =========================================================
   Melecom Roundcube Login Page Customisations
   Safe: login page only
   ========================================================= */


/* Login background image */
body.task-login,
body.task-login #layout {
    background-image: url("../images/milky-way.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
body.task-login #layout-content {
    position: relative;
    z-index: 1;
}
/* Allow login background to show through */
body.task-login #layout-content {
    background: transparent !important;
}

/* Dark mode: dim the login background image */
html.dark-mode body.task-login #layout::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55); /* adjust darkness here */
    pointer-events: none;
    z-index: 0;
}


/* Dark mode: slightly dim the Melecom logo */
html.dark-mode .melecom-logo {
    opacity: 0.75;
}




/* Ensure login content keeps its normal flow */
#layout-content {
    position: relative;
}

/* ---------------------------------------------------------
   Melecom footer logo container
   --------------------------------------------------------- */
.melecom-footer {
    position: fixed;
    bottom: 1.2rem;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 5;
    pointer-events: auto;
}

/* Logo sizing and behaviour */
.melecom-logo {
    max-width: 240px;
    width: 100%;
    height: auto;
    margin: 0 auto;
    opacity: 0.95;
    transform: translateX(+12px);
}

/* ---------------------------------------------------------
   Mobile / small-height safety
   Hide logo when vertical space is too small
   --------------------------------------------------------- */
@media (max-height: 500px) {
    .melecom-footer {
        display: none;
    }
}

/* ---------------------------------------------------------
   Very small phones / embedded browsers
   --------------------------------------------------------- */
@media (max-width: 420px) {
    .melecom-logo {
        max-width: 160px;
    }
}