.scrollable-section {
    overflow-y: auto;
    max-height: 100vh; /* Default for mobile devices */
}

@media (min-width: 768px) {
    .scrollable-section {
        max-height: none; /* No max-height for larger screens */
    }
}

@media (max-width: 768px) {
    .hide-on-mobile {
        display: none !important;
    }
}

  .popup-demo-layout-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .dxfl-group .dxfl-row {
        flex-wrap: nowrap !important;
    }

.name-fields-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap; /* Prevents wrapping to a new line */
    justify-content: flex-start;
    align-items: flex-end; /* Aligns the bottoms of the fields */
    gap: 1rem;
    width: 100%;
    max-width: 900px;
    margin-left: 0;
    margin-right: auto;
    overflow-x: auto; /* Allows horizontal scroll if needed */
}

.name-field {
    flex: 1 1 0;
    min-width: 180px;
    max-width: 300px;
    display: flex;
    flex-direction: column;
}


.login-grid {
    width: 100%;
}

.login-column,
.clinic-column {
    padding: 1rem;
    height: 100%;
}

.video-column {
    padding: 1rem;
    height: 100%;
    margin: 0 2rem; /* Adds 2rem space on left and right */
}

.registration-section {
    padding: 2rem 1rem;
    margin-top: 2rem;
    border-top: 1px solid #dee2e6;
}

/* Mobile breakpoint - make all sections full width */
@media (max-width: 768px) {
    /* Force the body and html to allow full width */
    body, html {
        overflow-x: hidden;
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Remove MainLayout mobile wrapper constraints */
    body .mobile-content-container,
    body .mobile-scroll-wrapper,
    body .mobile-centered-content {
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100vw !important;
        width: 100vw !important;
    }

    /* Override site.css container-fluid padding for login page */
    .login.scrollable-section .container-fluid {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
        max-width: 100vw !important;
        width: 100vw !important;
    }

    /* Remove all padding and margins from the login section */
    .login.scrollable-section {
        padding: 0 !important;
        margin: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        box-sizing: border-box;
    }

    /* Ensure all child divs inherit the full width */
    .login.scrollable-section > div,
    .login.scrollable-section * {
        box-sizing: border-box;
    }
    
    .login.scrollable-section > div {
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100vw !important;
        width: 100vw !important;
    }
    
    /* Make the grid layout full width */
    .login-grid,
    .dxbl-grid-layout {
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Target DevExpress grid layout items */
    .dxbl-grid-layout-item,
    .login-grid > div,
    .login-grid .dxbl-grid-layout-item {
        padding: 0 !important;
        margin: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
    }

    /* Individual column sections - add internal padding for content spacing */
    .login-column,
    .video-column,
    .clinic-column {
        margin: 0 !important;
        padding: 1.5rem 1rem !important;
        width: 100% !important;
        box-sizing: border-box;
    }
    
    /* Registration section full width */
    .registration-section {
        padding: 1.5rem 1rem !important;
        margin: 0 !important;
        width: 100% !important;
        border-top: 1px solid #dee2e6;
        box-sizing: border-box;
    }
    
    /* Remove item-specific margins */
    .video-item,
    .clinic-item {
        margin: 0 !important;
        padding: 0 !important;
        width: 100vw !important;
    }
}

/* Mobile breakpoint - make login sections full width */
@media (max-width: 768px) {
    /* Ensure body/html allow full width */
    body, html {
        overflow-x: hidden;
        margin: 0;
        padding: 0;
    }

    /* Login section full width */
    .login.scrollable-section {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Container full width */
    .login.scrollable-section .container-fluid {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Grid layout full width */
    .login-grid {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Grid items full width */
    .dxbl-grid-layout-item {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Content columns with internal padding */
    .login-column,
    .video-column,
    .clinic-column {
        margin: 0 !important;
        padding: 1.5rem 1rem !important;
        width: 100% !important;
    }

    /* Registration section */
    .registration-section {
        padding: 1.5rem 1rem !important;
        margin: 0 !important;
        width: 100% !important;
    }
}

/* Override MainLayout mobile wrappers for login page */
@media (max-width: 768px) {
    /* Force body/html to no padding */
    body, html {
        overflow-x: hidden;
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Remove MainLayout mobile wrapper constraints */
    body .mobile-content-container,
    body .mobile-scroll-wrapper,
    body .mobile-centered-content {
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100vw !important;
        width: 100vw !important;
    }

    /* Override site.css container-fluid padding for login page */
    .login.scrollable-section .container-fluid {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
        max-width: 100vw !important;
        width: 100vw !important;
    }

    /* Remove all padding and margins from the login section */
    .login.scrollable-section {
        padding: 0 !important;
        margin: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        box-sizing: border-box;
    }

    /* Ensure all child divs inherit the full width */
    .login.scrollable-section > div,
    .login.scrollable-section * {
        box-sizing: border-box;
    }
    
    .login.scrollable-section > div {
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100vw !important;
        width: 100vw !important;
    }
    
    /* Make the grid layout full width */
    .login-grid,
    .dxbl-grid-layout {
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Target DevExpress grid layout items */
    .dxbl-grid-layout-item,
    .login-grid > div,
    .login-grid .dxbl-grid-layout-item {
        padding: 0 !important;
        margin: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
    }

    /* Individual column sections - add internal padding for content spacing */
    .login-column,
    .video-column,
    .clinic-column {
        margin: 0 !important;
        padding: 1.5rem 1rem !important;
        width: 100% !important;
        box-sizing: border-box;
    }
    
    /* Registration section full width */
    .registration-section {
        padding: 1.5rem 1rem !important;
        margin: 0 !important;
        width: 100% !important;
        border-top: 1px solid #dee2e6;
        box-sizing: border-box;
    }
    
    /* Remove item-specific margins */
    .video-item,
    .clinic-item {
        margin: 0 !important;
        padding: 0 !important;
        width: 100vw !important;
    }
}

/* ─── Split-screen shell ─────────────────────────────────────────────────── */
.login-split {
    display: flex;
    /*
     * Changed from min-height: 100vh to min-height: 100%.
     * The login-split renders inside the DxGridLayout "content" row
     * (which has flex: 1 and overflow-y: auto). Using 100vh forced the
     * content area to be at least the full viewport height, pushing the
     * footer row below the fold and causing it to be overrun. Using 100%
     * fills the allocated flex row height instead, letting the footer sit
     * correctly within the page layout.
     */
    min-height: 100%;
}

/* ─── LEFT: Auth panel ───────────────────────────────────────────────────── */
.login-auth-panel {
    flex: 0 0 460px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* was: center — removes top whitespace */
    padding: 4rem 2rem 2.5rem;   /* was: 2.5rem 2rem — top pad gives breathing room under clinic link */
    position: relative;
    background: #fff;
    border-right: 1px solid #e9ecef;
    overflow-y: auto;
}

/* Clinic / Provider link pinned to top-right of the auth panel */
.login-clinic-link {
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
    font-size: 0.82rem;
}

    .login-clinic-link a {
        color: #6c757d;
        text-decoration: none;
        transition: color 0.15s ease;
    }

        .login-clinic-link a:hover {
            color: #0d6efd;
        }

/* White card holding the form */
.login-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
    padding: 2.25rem 2rem;
    width: 100%;
    max-width: 400px;
}

/* Registration hint below the card */
.login-register-hint {
    max-width: 400px;
    width: 100%;
}

/* ─── RIGHT: Image panel ─────────────────────────────────────────────────── */
.login-brand-panel {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 3rem 2rem;
    background: #fff;    /* was: #eef2f7 — now matches the login card background */
    overflow: hidden;
}

/* Image displayed as content at a controlled size — no stretch, no crop */
.brand-bg-media {
    display: block;
    width: 90%;
    max-width: 520px;
    height: auto;
    border-radius: 8px;          /* softens corners slightly */
}

/* ─── Mobile: auth panel goes full width; image panel hidden via Blazor ────── */
@media (max-width: 1100px) {
    .login-split {
        flex-direction: column;
    }

    .login-auth-panel {
        flex: 1;
        width: 100%;
        border-right: none;
        justify-content: flex-start;
        padding-top: 3rem;
    }

    .login-clinic-link {
        position: static;
        text-align: right;
        width: 100%;
        max-width: 400px;
        margin-bottom: 1rem;
    }

    .login-card {
        box-shadow: none;
        border: 1px solid #dee2e6;
    }
}

@media (max-width: 480px) {
    .login-auth-panel {
        padding: 1.5rem 1rem;
    }

    .login-card {
        padding: 1.5rem 1.25rem;
        border-radius: 10px;
    }
}