/* Mobile-specific styles for MainLayout */
.mobile-user-info-container {
    background: var(--bs-light, #f8f9fa);
    border-radius: 8px;
    padding: 0.75rem;
    margin: 0.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.mobile-user-details {
    text-align: center;
}

.mobile-user-name {
    font-size: 1.1rem;
    color: var(--bs-primary, #0d6efd);
    margin-bottom: 0.25rem;
}

.mobile-account-number {
    font-size: 0.9rem;
}

/* Mobile content centering styles - UPDATED FOR WIDER CONTENT */
.mobile-content-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.mobile-scroll-wrapper {
    width: 100%;
    max-width: 100%; /* Changed from 800px to 100% for full width */
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 0 0.5rem; /* Reduced horizontal padding */
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    /* Hide scrollbar while keeping functionality */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

    /* Hide scrollbar for webkit browsers */
    .mobile-scroll-wrapper::-webkit-scrollbar {
        display: none;
    }

.mobile-centered-content {
    width: 100%;
    max-width: 100%; /* Changed from 600px to 100% for wider content */
    min-height: 100%;
    padding: 1rem 0.25rem; /* Reduced horizontal padding */
    display: flex;
    flex-direction: column;
    align-items: stretch; /* Changed from center to stretch for full width */
    text-align: center;
}

/* Mobile content wrapper */
.mobile-content-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 0 !important;
    margin: 0 !important;
}

/* Mobile sidebar container */
.mobile-sidebar-container {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0 0.5rem; /* Reduced padding */
}

/* Mobile MFA Warning */
.mobile-mfa-warning {
    width: 100%;
    max-width: 100%; /* Changed from 500px to 100% */
    margin: 1rem auto !important;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Mobile layout improvements */
@media (max-width: 1200px) {
    .layout-item {
        margin: 0 !important;
        padding: 0.25rem !important; /* Reduced padding */
    }

    .content {
        padding: 0.5rem !important; /* Reduced padding */
        margin: 0 !important; /* Remove margins */
    }

    .page-layout {
        gap: 0.25rem; /* Reduced gap */
    }

    /* Ensure mobile content container takes full space */
    .mobile-content-container {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Adjust scroll wrapper for mobile - WIDER CONTENT */
    .mobile-scroll-wrapper {
        max-width: 100%; /* Changed from 95% to 100% */
        padding: 0 0.25rem; /* Reduced padding */
    }

    /* Allow content to use full width */
    .mobile-centered-content > * {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        max-width: 100%;
    }

    /* Allow forms and components to use full width */
    .mobile-centered-content .dxbs-form-layout,
    .mobile-centered-content .dxbs-grid,
    .mobile-centered-content .dxbs-card,
    .mobile-centered-content .container,
    .mobile-centered-content .container-fluid {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Center buttons and controls */
    .mobile-centered-content .btn-group,
    .mobile-centered-content .dxbs-btn-group,
    .mobile-centered-content .d-flex {
        justify-content: center !important;
        text-align: center;
    }

    /* Improve touch targets for mobile */
    .btn, .dxbs-btn {
        min-height: 44px;
        min-width: 44px;
    }

    /* Better mobile typography */
    body {
        font-size: 16px; /* Prevents zoom on iOS */
    }

    /* Mobile-friendly alerts */
    .alert {
        margin: 0.5rem 0; /* Remove auto margins */
        padding: 0.75rem;
        border-radius: 8px;
        text-align: center;
        width: 100%;
    }

    /* Responsive navigation */
    .mobile-nav {
        position: sticky;
        top: 0;
        z-index: 1020;
        background: white;
        border-bottom: 1px solid #dee2e6;
    }

    /* Hide desktop-only elements on mobile */
    .desktop-only {
        display: none;
    }

    /* Allow containers to use full width */
    .container, .container-fluid {
        max-width: 100%;
        margin: 0;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    /* Allow DevExpress grids and components to use full width */
    .dxbs-grid, .dxbs-form-layout, .dxbs-card {
        margin: 0;
        max-width: 100%;
        width: 100%;
    }

    /* Center navigation menu in mobile */
    .mobile-sidebar-container .nav-menu,
    .mobile-sidebar-container .dxbs-nav {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        max-width: 100%; /* Changed from 400px to 100% */
        margin: 0 auto;
    }

    /* Center navigation items */
    .mobile-sidebar-container .nav-item,
    .mobile-sidebar-container .dxbs-nav-item {
        text-align: center;
        width: 100%;
    }
}

/* Tablet and larger mobile devices */
@media (min-width: 768px) and (max-width: 1200px) {
    .mobile-scroll-wrapper {
        max-width: 100%; /* Changed from 90% to 100% */
        padding: 0 0.5rem;
    }

    .mobile-centered-content {
        max-width: 100%; /* Changed from 700px to 100% */
    }
}

/* Desktop-specific styles */
@media (min-width: 1201px) {
    .mobile-only {
        display: none;
    }

    /* Hide mobile-specific classes on desktop */
    .mobile-content-container,
    .mobile-scroll-wrapper,
    .mobile-centered-content,
    .mobile-content-wrapper,
    .mobile-sidebar-container {
        display: contents;
    }

    .mobile-mfa-warning {
        display: none;
    }
}

/* Improved mobile scrolling - SCROLLBAR HIDDEN */
.mobile-scroll-container {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

    .mobile-scroll-container::-webkit-scrollbar {
        display: none; /* Hide scrollbar for webkit browsers */
    }

/* Better mobile form layouts */
@media (max-width: 1200px) {
    .dxbs-form-layout-item {
        margin-bottom: 0.75rem;
        text-align: center;
    }

    /* Center form elements but allow full width */
    .dxbs-form-layout {
        margin: 0;
        text-align: center;
        width: 100%;
    }

    /* Center buttons */
    .btn-group, .dxbs-btn-group {
        justify-content: center;
        display: flex;
        flex-wrap: wrap;
    }

    /* Allow tables to use full width */
    .mobile-centered-content table,
    .mobile-centered-content .table {
        width: 100%;
        margin: 0;
    }

    .mobile-centered-content .row {
        justify-content: center;
        margin: 0;
    }

    .mobile-centered-content .col,
    .mobile-centered-content [class*="col-"] {
        text-align: center;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }
}

/* Page layout styles */
.page {
    min-height: 100vh;
    width: 100%;
}

.page-layout {
    height: 100vh;
    display: grid;
    width: 100%;
}

/* Mobile user info layout */
.mobile-user-info-layout {
    padding: 0.25rem; /* Reduced padding */
}

/* Footer styles */
.footer {
    background-color: var(--bs-light, #f8f9fa);
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    padding: 1rem;
    margin-top: auto;
}

@media (max-width: 1200px) {
    .footer {
        padding: 0.75rem 0.25rem; /* Reduced horizontal padding */
        text-align: center;
    }
}

/* Remove all scrollbar styling for mobile since we're hiding it */
@media (max-width: 1200px) {
    /* Ensure all scrollable elements hide scrollbars */
    * {
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* Internet Explorer 10+ */
    }

        *::-webkit-scrollbar {
            display: none; /* Hide scrollbar for webkit browsers */
        }
}

/* Force full width for all mobile content */
@media (max-width: 1200px) {
    .mobile-centered-content * {
        max-width: 100% !important;
    }

    /* Override any restrictive width constraints */
    .mobile-centered-content .container,
    .mobile-centered-content .container-fluid,
    .mobile-centered-content .row,
    .mobile-centered-content [class*="col-"] {
        max-width: 100% !important;
        width: 100% !important;
    }
}