/* ORIGAMI login skin. Scoped to the ERPNext login page only. */

body:has(.for-login) {
    min-height: 100vh !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: #00271b !important;
    color: #22312d !important;
    font-family: Inter, "Helvetica Neue", Arial, sans-serif !important;
}

body:has(.for-login)::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: -2 !important;
    background:
        linear-gradient(135deg, rgba(0, 32, 19, 0.22), rgba(0, 54, 43, 0.28)),
        url("/assets/lcpaper_theme/img/origami-login-bg.jpg") center / cover no-repeat !important;
}

body:has(.for-login)::after {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: -1 !important;
    background:
        radial-gradient(115% 115% at 50% 36%, rgba(0, 25, 15, 0.04), rgba(0, 16, 10, 0.46)),
        linear-gradient(180deg, rgba(0, 24, 16, 0.12), rgba(0, 24, 16, 0.42)) !important;
    pointer-events: none !important;
}

body:has(.for-login) .navbar,
body:has(.for-login) .web-footer,
body:has(.for-login) .footer {
    display: none !important;
}

body:has(.for-login) .for-login {
    width: 100% !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 32px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    color: #22312d !important;
}

body:has(.for-login) .page-card-head {
    width: min(370px, 92vw) !important;
    height: 112px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    line-height: 0 !important;
    background: rgba(0, 58, 38, 0.34) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-bottom: 0 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 -6px 26px rgba(0, 0, 0, 0.18) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.38) !important;
    backdrop-filter: blur(16px) saturate(1.38) !important;
}

body:has(.for-login) .page-card-head h4 {
    display: none !important;
}

body:has(.for-login) .page-card-head .app-logo {
    content: url("/assets/lcpaper_theme/img/lcpaper.png") !important;
    width: min(167px, 47%) !important;
    height: auto !important;
    max-height: 47px !important;
    display: block !important;
    margin: 0 !important;
    object-fit: contain !important;
    opacity: 0.9 !important;
    filter: brightness(0) invert(1) !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

body:has(.for-login) .login-content.page-card {
    width: min(370px, 92vw) !important;
    margin: 0 !important;
    padding: 27px 26px 24px !important;
    background: #ffffff !important;
    border: 0 !important;
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.36), 0 4px 16px rgba(0, 0, 0, 0.22) !important;
}

body:has(.for-login) .login-content.page-card::before {
    content: "ORIGAMI" !important;
    display: block !important;
    margin: 0 0 15px !important;
    padding: 0 0 17px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.13) !important;
    text-align: center !important;
    font-family: "DM Sans", Inter, "Helvetica Neue", Arial, sans-serif !important;
    font-size: 20px !important;
    font-weight: 300 !important;
    line-height: 1.1 !important;
    letter-spacing: 0.46em !important;
    text-indent: 0.46em !important;
    color: transparent !important;
    background: linear-gradient(95deg, #002616 0%, #0a6b43 52%, #0b9c84 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

body:has(.for-login) .login-content.page-card,
body:has(.for-login) .login-content.page-card * {
    border-radius: 0 !important;
}

body:has(.for-login) .form-login > .page-card-body > .page-card-body,
body:has(.for-login) .form-login > .page-card-body > .page-card-actions,
body:has(.for-login) .forgot-password-message,
body:has(.for-login) .login-divider,
body:has(.for-login) .login-with-email-link,
body:has(.for-login) .btn-login,
body:has(.for-login) #login_email,
body:has(.for-login) #login_password {
    display: none !important;
}

body:has(.for-login) .login-content.page-card .page-card-body {
    padding: 0 !important;
}

body:has(.for-login) .social-logins,
body:has(.for-login) .social-login-buttons,
body:has(.for-login) .login-button-wrapper {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

body:has(.for-login) .btn-login-option.btn-google {
    width: 100% !important;
    min-height: 43px !important;
    margin: 0 !important;
    padding: 13px 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 11px !important;
    background: #003017 !important;
    border: 1px solid #003017 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    font-size: 0 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.09em !important;
}

body:has(.for-login) .btn-login-option.btn-google::after {
    content: "Iniciar sessi\0000f3 amb Google" !important;
    display: inline-block !important;
    font-size: 12.5px !important;
    line-height: 1 !important;
    color: #ffffff !important;
}

body:has(.for-login) .btn-login-option.btn-google .lcpaper-google-login-label {
    display: inline-block !important;
    font-size: 12.5px !important;
    line-height: 1 !important;
    color: #ffffff !important;
}

body:has(.for-login) .btn-login-option.btn-google:has(.lcpaper-google-login-label)::after {
    content: none !important;
}

body:has(.for-login) .btn-login-option.btn-google:hover,
body:has(.for-login) .btn-login-option.btn-google:focus {
    background: #00482c !important;
    border-color: #00482c !important;
    color: #ffffff !important;
    outline: none !important;
}

body:has(.for-login) .btn-login-option.btn-google:focus-visible {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.28) !important;
}

body:has(.for-login) .btn-login-option.btn-google img {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 2px !important;
    display: block !important;
    background: #ffffff !important;
}

body:has(.for-login) .social-logins .login-with-email-link,
body:has(.for-login) .social-logins .btn-login-with-email-link,
body:has(.for-login) .social-logins a[href="#login-with-email-link"],
body:has(.for-login) .social-logins .login-button-wrapper:has(.btn-login-with-email-link) {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

body:has(.for-login) .for-login::after {
    content: "© LC PAPER 1881 SA. Informació confidencial d'ús intern." !important;
    margin-top: 15px !important;
    color: rgba(255, 255, 255, 0.84) !important;
    font-size: 10.5px !important;
    line-height: 1.4 !important;
    letter-spacing: 0.02em !important;
    text-align: center !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important;
}

@media (max-width: 520px) {
    body:has(.for-login) {
        overflow: auto !important;
    }

    body:has(.for-login) .for-login {
        padding: 24px 14px !important;
    }

    body:has(.for-login) .page-card-head {
        height: 98px !important;
    }

    body:has(.for-login) .login-content.page-card {
        padding: 24px 22px 22px !important;
    }
}