/* Custom Login Page Styling for Verteron - CloudStack 4.19 */

/* Apply our background ONLY to the body to prevent stacking overlays */
html {
    background-color: transparent !important;
}
body {
    background: url('bg-custom.png') no-repeat center center fixed !important;
    background-color: transparent !important;
    background-size: cover !important;
    min-height: 100vh !important;
}

/* Bruteforce transparent background for all layout wrappers to remove the "white film" */
#app,
.user-layout-wrapper,
.user-layout-wrapper .container,
.user-layout-wrapper .main,
.ant-layout {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Kill any pseudo-element overlays */
#app::before, #app::after,
.user-layout-wrapper::before, .user-layout-wrapper::after,
.user-layout-wrapper .container::before, .user-layout-wrapper .container::after,
.ant-layout::before, .ant-layout::after {
    display: none !important;
    opacity: 0 !important;
}

/* Bruteforce hide the banner image and native layout divisions globally */
img[src*="banner"],
.banner,
.login-banner,
.logo,
/* .top, */
.desc,
.footer,
.login-footer {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Layout Wrapper Anchor */
.user-layout-wrapper {
    position: relative !important;
    height: 100vh !important;
    width: 100vw !important;
    overflow: hidden !important;
}
.user-layout-wrapper .container {
    background: transparent !important;
}

/* Left Card (Form) */
.user-layout-login {
    width: 440px !important;
    height: 380px !important;
    position: fixed !important;
    top: 62% !important;
    left: 50% !important;
    transform: translate(calc(-50% - 202px), -50%) !important;
    background: white !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.06) !important;
    padding: 25px 35px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    min-height: unset !important;
}

/* Reset any native form centering since we are using the form as the card */
.user-layout-login .main,
.user-layout-login .tab-center,
/* Set a tighter margin for form items */
.user-layout-login .ant-form-item {
    margin-bottom: 14px !important;
}

/* Inputs Refinement */
.user-layout-login .ant-input,
.user-layout-login .ant-input-password,
.user-layout-login .ant-select-selector {
    height: 40px !important;
    border-radius: 6px !important;
    box-shadow: none !important;
}

/* Fix inner borders on password/affix inputs */
.user-layout-login .ant-input-affix-wrapper {
    padding: 0 11px !important;
    height: 40px !important;
    border-radius: 6px !important;
    border: 1px solid #e2e8f0 !important;
    display: flex;
    align-items: center;
}
.user-layout-login .ant-input-affix-wrapper .ant-input {
    border: none !important;
    height: 100% !important;
    box-shadow: none !important;
}

/* Base input border */
.user-layout-login .ant-input:not(.ant-input-affix-wrapper .ant-input) {
    border: 1px solid #e2e8f0 !important;
}

/* Button Refinement */
.user-layout-login button.login-button {
    height: 40px !important;
    border-radius: 6px !important;
    background-color: #0066ff !important;
    border-color: #0066ff !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    margin-top: 5px !important;
}
.user-layout-login button.login-button:hover {
    background-color: #0052cc !important;
    border-color: #0052cc !important;
}

/* Tabs Refinement */
.user-layout-login .ant-tabs-nav .ant-tabs-tab {
    padding: 8px 12px !important;
    margin: 0 12px 0 0 !important;
    font-weight: 500 !important;
    color: #64748b !important;
}
.user-layout-login .ant-tabs-nav .ant-tabs-tab-active {
    color: #0066ff !important;
}
.user-layout-login .ant-tabs-ink-bar {
    background: #0066ff !important;
}

/* Language Selector */
.user-layout-login .user-login-other {
    margin-top: 16px !important;
    text-align: left !important;
}
.user-layout-login .translation-menu {
    color: #64748b !important;
}

/* Right Card: Custom (Injected) */
.verteron-right-card {
    position: absolute !important;
    top: 50% !important;
    left: calc(100% + 24px) !important;
    transform: translateY(-50%) !important;
    width: 380px !important;
    background: white !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.06) !important;
    padding: 25px 35px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    z-index: 10 !important;
}
body:has(.user-layout-login) .verteron-right-card,
.user-layout-container .verteron-right-card,
.user-layout .verteron-right-card,
.user-layout-wrapper .verteron-right-card {
    display: flex !important; /* Show only when login wrapper is active */
}

/* Logo - Fixed Anchor relative to Viewport */
.verteron-logo {
    position: fixed !important;
    top: 6vh !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    height: 110px !important; /* Elegant fixed height */
    width: 90% !important;
    max-width: 800px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 1000 !important;
    pointer-events: none !important;
}
body:has(.user-layout-login) .verteron-logo,
.user-layout-container .verteron-logo,
.user-layout .verteron-logo,
.user-layout-wrapper .verteron-logo {
    display: flex !important; /* Show only when login wrapper is active */
}
.verteron-logo img.my-safe-logo {
    height: 100% !important; /* Occupy the full 110px box height */
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.05)) !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Features */
.verteron-feature {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
}
.verteron-feature:last-child {
    margin-bottom: 0;
}
.verteron-feature .icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.verteron-feature .icon svg {
    width: 100%;
    height: 100%;
}
.verteron-feature h4 {
    margin: 0 0 2px 0;
    color: #1e293b;
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-weight: 600;
}
.verteron-feature p {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
}

/* Logo injected on top */
.custom-logo {
    position: absolute;
    top: -120px;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 100;
}
.custom-logo img {
    height: 90px;
    max-width: 100%;
    object-fit: contain;
    /* Ensure our custom logo is not hidden by the bruteforce rules */
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Custom Footer - Fixed Anchor relative to Viewport */
.verteron-custom-footer {
    position: fixed !important;
    bottom: 30px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    z-index: 1000 !important;
}
body:has(.user-layout-login) .verteron-custom-footer,
.user-layout-container .verteron-custom-footer,
.user-layout .verteron-custom-footer,
.user-layout-wrapper .verteron-custom-footer {
    display: flex !important; /* Show only when login wrapper is active */
}
.verteron-custom-footer .footer-lock {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}
.verteron-custom-footer .footer-lock svg {
    width: 14px !important;
    height: 14px !important;
}
.verteron-custom-footer .footer-copy {
    color: #94a3b8 !important;
    font-size: 12px !important;
}

/* Responsive Styles for Tablet & Mobile Resolutions */
@media (max-width: 900px) {
    /* 1. Force body to be a scrollable column flex container */
    body:has(.user-layout-login) {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        overflow-y: auto !important;
        height: auto !important;
        min-height: 100vh !important;
        padding: 110px 20px 80px 20px !important; /* Spacious padding to avoid overlaps */
        box-sizing: border-box !important;
    }

    /* 2. Remove standard layout height constraints on all wrappers */
    body:has(.user-layout-login) #app,
    body:has(.user-layout-login) .user-layout,
    body:has(.user-layout-login) .user-layout-container {
        height: auto !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        overflow: visible !important;
        position: static !important;
        background: transparent !important;
        /* Force reset native absolute centering and translation matrixes */
        top: auto !important;
        margin: 0 !important;
        transform: none !important;
    }

    /* 3. Scaled Logo positioned at the top of scroll flow */
    body:has(.user-layout-login) .verteron-logo {
        position: absolute !important;
        top: 20px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        height: 60px !important; /* Fluid, smaller logo on mobile */
        width: 90% !important;
        max-width: 320px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    body:has(.user-layout-login) .verteron-logo img.my-safe-logo {
        height: 100% !important;
        width: auto !important;
        object-fit: contain !important;
    }

    /* 4. Left Card (Form) Flow Position overrides */
    body:has(.user-layout-login) .user-layout-login {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        width: 100% !important;
        max-width: 440px !important;
        height: auto !important;
        min-height: unset !important;
        margin: 0 0 20px 0 !important; /* Generous separation before the card drops below */
        box-shadow: 0 4px 20px rgba(0,0,0,0.05) !important;
        padding: 25px 30px !important;
    }

    /* 5. Right Card (Info) Flow Position overrides (Drops below the Form) */
    body:has(.user-layout-login) .verteron-right-card {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        width: 100% !important;
        max-width: 440px !important; /* Matches form width exactly for symmetry */
        height: auto !important;
        display: flex !important;
        margin: 0 0 20px 0 !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.05) !important;
        padding: 25px 30px !important;
    }

    /* 6. Footer Flow Position overrides (Floats naturally below both cards) */
    body:has(.user-layout-login) .verteron-custom-footer {
        position: relative !important;
        bottom: 0 !important;
        left: 0 !important;
        transform: none !important;
        margin-top: 15px !important;
        margin-bottom: 15px !important;
        width: 100% !important;
        display: flex !important;
        gap: 6px !important;
    }
    body:has(.user-layout-login) .verteron-custom-footer .footer-lock {
        font-size: 12px !important;
    }
    body:has(.user-layout-login) .verteron-custom-footer .footer-copy {
        font-size: 11px !important;
    }
}

/* Height specific refinement for short viewports (landscape/tablets) */
@media (max-height: 700px) and (min-width: 901px) {
    body:has(.user-layout-login) .verteron-logo {
        height: 80px !important;
        top: 3vh !important;
    }
    body:has(.user-layout-login) .user-layout-login {
        top: 58% !important;
    }
    body:has(.user-layout-login) .verteron-custom-footer {
        bottom: 15px !important;
        gap: 6px !important;
    }
}