/* ==========================================================================
   Betopia Glass UI — Login page styling (STATIC css, injected via a direct
   <link> in views/login_templates.xml so it bypasses the website asset-bundle
   filtering that strips custom frontend SCSS from the website variant).
   Scoped with :has(.oe_login_form) so only the login page is affected.
   ========================================================================== */

body:has(.oe_login_form) {
    background:
        radial-gradient(1200px 600px at 15% -10%, rgba(10,132,255,0.18), transparent 60%),
        radial-gradient(1000px 600px at 110% 10%, rgba(94,92,230,0.16), transparent 55%),
        linear-gradient(160deg, #F2F2F7 0%, #E8EAF0 100%) !important;
    min-height: 100vh;
}

/* Hide website chrome on the login page for a clean, focused screen */
body:has(.oe_login_form) header#top,
body:has(.oe_login_form) .o_header_standard,
body:has(.oe_login_form) #o_main_nav,
body:has(.oe_login_form) .o_footer,
body:has(.oe_login_form) footer.o_footer,
body:has(.oe_login_form) .o_footer_copyright { display: none !important; }

/* Frosted glass login card (the form itself) */
.oe_login_form {
    max-width: 420px;
    margin: 8vh auto;
    padding: 2.25rem 2rem 2rem;
    background: rgba(255, 255, 255, 0.62);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 28px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset,
                0 30px 70px rgba(0, 0, 0, 0.14);
    animation: betoLoginCardIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes betoLoginCardIn {
    from { opacity: 0; transform: translateY(12px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .oe_login_form { animation: none; }
}

/* Brand heading injected via CSS */
.oe_login_form::before {
    content: "Betopia ERP";
    display: block;
    text-align: center;
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #1C1C1E;
}
.oe_login_form::after {
    content: "Sign in to your workspace";
    display: block;
    text-align: center;
    color: #6E6E73;
    font-size: 0.95rem;
    margin: 0.25rem 0 1.5rem;
}

.oe_login_form .form-control {
    border-radius: 12px;
    padding: 0.6rem 0.85rem;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(0, 0, 0, 0.10);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.oe_login_form .form-control:focus {
    box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.18);
    border-color: #0A84FF;
}
.oe_login_form label { font-weight: 500; color: #3C3C43; }

.oe_login_form .btn-primary {
    width: 100%;
    border-radius: 12px;
    padding: 0.6rem 1rem;
    font-weight: 600;
    background-color: #0A84FF;
    border-color: #0A84FF;
    box-shadow: 0 6px 18px rgba(10, 132, 255, 0.28);
    transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}
.oe_login_form .btn-primary:hover {
    background-color: #0070E0;
    border-color: #0070E0;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(10, 132, 255, 0.34);
}
.oe_login_form .btn-primary:active {
    background-color: #0060C0;
    border-color: #0060C0;
    transform: scale(0.99);
    box-shadow: 0 2px 8px rgba(10, 132, 255, 0.28);
}
.oe_login_form a {
    color: #0A84FF;
    text-decoration: none;
    transition: opacity 0.15s ease;
}
.oe_login_form a:hover { opacity: 0.75; text-decoration: underline; }

/* Neutralize the stock card chrome around the form/logo.
   web.login_layout hard-codes style="max-width: 300px" on this card, which
   clamped the frosted form to ~268px instead of the 420px it is designed for;
   an inline style can only be beaten with !important. */
body:has(.oe_login_form) .card.o_database_list,
body:has(.oe_login_form) .o_database_list {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    max-width: 460px !important;   /* 420px card + .card-body padding */
}