/*
   Custom theme overrides (Sufficit)
   Scope: STS login page
*/

/* Header title link: keep default text color (no blue link look), but stay clickable */
.menu .menu-logo a.logo,
.menu .menu-logo a.logo:hover,
.menu .menu-logo a.logo:focus,
.menu .menu-logo a.logo:active {
    color: inherit !important;
    text-decoration: none;
}

/* Footer links: keep neutral look (avoid default blue link style) */
.privacy-link,
.privacy-link:hover,
.privacy-link:focus,
.privacy-link:active {
    color: inherit !important;
    text-decoration: none;
}

.login-page-body .login-page .btn {
    border-radius: 0.5rem;
}

/* Bootstrap btn-group removes inner border radius; keep rounded corners on ALL buttons */
.login-page-body .login-page .btn-group > .btn,
.login-page-body .login-page .btn-group > .btn-group > .btn {
    border-radius: 0.5rem !important;
}

.login-page-body .login-page .btn-group > .btn:not(:last-child):not(.dropdown-toggle),
.login-page-body .login-page .btn-group > .btn-group:not(:last-child) > .btn {
    border-top-right-radius: 0.5rem !important;
    border-bottom-right-radius: 0.5rem !important;
}

.login-page-body .login-page .btn-group > .btn:not(:first-child),
.login-page-body .login-page .btn-group > .btn-group:not(:first-child) > .btn {
    border-top-left-radius: 0.5rem !important;
    border-bottom-left-radius: 0.5rem !important;
}

/* Increase translucency while keeping original Materia colors */
.login-page-body .login-page .btn-primary {
    background-color: rgba(33, 150, 243, 0.70) !important;
    background-image: linear-gradient(180deg, rgba(66, 166, 245, 0.70), rgba(33, 150, 243, 0.70)) !important;
    border-color: rgba(33, 150, 243, 0.70) !important;
}

.login-page-body .login-page .btn-info {
    background-color: rgba(156, 39, 176, 0.70) !important;
    background-image: linear-gradient(180deg, rgba(171, 71, 188, 0.70), rgba(156, 39, 176, 0.70)) !important;
    border-color: rgba(156, 39, 176, 0.70) !important;
}

.login-page-body .login-page .btn-secondary {
    background-color: rgba(255, 255, 255, 0.70) !important;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.70), rgba(255, 255, 255, 0.70)) !important;
    border-color: rgba(255, 255, 255, 0.70) !important;
}

.login-page-body .login-page .btn-dark {
    background-color: rgba(34, 34, 34, 0.70) !important;
    background-image: linear-gradient(180deg, rgba(67, 67, 67, 0.70), rgba(34, 34, 34, 0.70)) !important;
    border-color: rgba(34, 34, 34, 0.70) !important;
}

/* Keep our glass overlay, but make it lighter (more transparent) */
.login-page-body .login-page .btn::before {
    background: linear-gradient(
        rgba(255, 255, 255, 0.10),
        rgba(255, 255, 255, 0.03)
    ) !important;
}

/* Input padding: Materia sets horizontal padding to 0/.25rem; add breathing room */
.login-page-body .login-page .input-group .form-control {
    padding-left: 0.85rem !important;
    padding-right: 0.85rem !important;
}

.login-page-body .login-page .input-group-text {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

/* Login page background image (scoped) */
body.login-page-body {
    background: url('/images/login-background.png') no-repeat center center fixed;
    background-size: cover;
}

/* Login page menu and footer "glass" */
.login-page-body .menu {
    background-color: rgba(235, 235, 235, 0.92);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding-top: 1.75rem !important;
    padding-bottom: 1.75rem !important;
}

.login-page-body .menu .menu-logo {
    font-size: 1.35rem;
    line-height: 1.2;
}

.login-page-body footer {
    background-color: rgba(235, 235, 235, 0.72);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    margin-top: 1.25rem !important;
    margin-bottom: 0 !important;
    border-radius: 0.5rem;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.35) !important;
}

.login-page-body footer .row > .col-md-3 {
    display: none;
}

/* Login cards: translucent */
.login-page-body .login-page .card {
    /* Old STS used `card { opacity: 0.95; }`, which makes child elements (including
       buttons) also show the background through them (instead of turning white). */
    opacity: 0.95;

    /* Keep the card readable while allowing the background image to show through */
    background-color: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Login buttons: depth and "glass" */
.login-page-body .login-page .btn {
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    box-shadow:
        0 0.55rem 1.25rem rgba(0, 0, 0, 0.18),
        0 0.18rem 0.35rem rgba(0, 0, 0, 0.14),
        inset 0 0.07rem 0 rgba(255, 255, 255, 0.35);
}

.login-page-body .login-page .btn:focus,
.login-page-body .login-page .btn:hover {
    box-shadow:
        0 0.65rem 1.45rem rgba(0, 0, 0, 0.22),
        0 0.22rem 0.45rem rgba(0, 0, 0, 0.16),
        inset 0 0.07rem 0 rgba(255, 255, 255, 0.38);
}