/* MOBILE WIDTH FIX - Full Width Layout for Samsung S23 Ultra and All Mobile Devices */
/* Debug console log to confirm this CSS file loaded */
@media (max-width: 768px) {
    body::before {
        content: '';
        /* This creates a hidden element that mobile developers can check for in console to confirm CSS loaded */
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
        z-index: -1;
    }
}
console.log('✅ Mobile Width Fix CSS loaded successfully');

/* Reset ALL containers to full width on mobile */
@media (max-width: 768px) {
    /* Global Container Reset */
    * {
        box-sizing: border-box !important;
    }
    
    html, body {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
    }
    
    /* Bootstrap Container Override */
    .container,
    .container-fluid,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Row and Column Override */
    .row {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .col,
    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
    .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
    [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        flex: none !important;
    }
    
    /* Mobile App Containers */
    .mobile-container,
    .mobile-content,
    .content-area,
    #contentArea {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* Remove gaps between article containers and bottom navigation */
    .articles-list,
    #rssArticlesList,
    #rssArticlesContainer,
    .tab-content,
    .tab-pane {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* Profile Menu Items - Full Width */
    .profile-menu,
    .profile-menu-item,
    .menu-item,
    .settings-item,
    .nav-item {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        border-left: none !important;
        border-right: none !important;
    }
    
    /* Remove margin-top from Sign Out button specifically */
    a[href="/logout"],
    a[href="/auth/logout"] {
        margin-top: 0 !important;
    }
    
    /* Fix profile menu container gap */
    .tab-content div[style*="gap: 2px"] {
        gap: 0px !important;
    }
    
    /* Fix bottom padding in content areas that creates gaps */
    #pullContainer.pull-container,
    #contentArea.content-area,
    .content-area {
        padding-bottom: 0px !important;
        margin-bottom: 0px !important;
    }
    
    /* Card Elements */
    .card,
    .mobile-article-card,
    .article-card,
    .profile-card {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
    }
    
    /* Tab Content Areas */
    .tab-content,
    .tab-pane {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Navigation and Header */
    .navbar,
    .nav,
    .navigation {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Lists */
    .list-group,
    .list-group-item {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-radius: 0 !important;
    }
    
    /* Form Elements */
    .form-group,
    .form-control,
    .input-group {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Button Groups */
    .btn-group,
    .btn-toolbar {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Specific Mobile App Classes */
    .mobile-app-container,
    .app-container,
    .main-container,
    .page-container,
    .layout-container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Remove any gutters */
    .g-0, .gx-0 { --bs-gutter-x: 0 !important; }
    .g-0, .gy-0 { --bs-gutter-y: 0 !important; }
    
    /* Force full viewport width */
    .w-100 { width: 100% !important; }
    .mw-100 { max-width: 100% !important; }
    
    /* Samsung S23 Ultra specific fixes */
    @media (min-width: 412px) and (max-width: 915px) {
        /* Target Samsung Galaxy S23 Ultra and similar large phones */
        body, html {
            width: 100vw !important;
            max-width: 100vw !important;
        }
        
        .container, .container-fluid {
            width: 100vw !important;
            max-width: 100vw !important;
        }
        
        .profile-menu-item,
        .menu-item {
            width: calc(100vw - 2rem) !important;
            max-width: calc(100vw - 2rem) !important;
            margin: 0 1rem !important;
        }
    }
}

/* Very large mobile screens (Samsung Galaxy S23 Ultra, etc.) */
@media (min-width: 412px) and (max-width: 768px) and (orientation: portrait) {
    .container,
    .container-fluid,
    .mobile-container,
    .content-area {
        width: 100vw !important;
        max-width: 100vw !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    .profile-menu-item,
    .menu-item,
    .settings-item {
        width: calc(100vw - 1rem) !important;
        max-width: calc(100vw - 1rem) !important;
        margin-left: 0.5rem !important;
        margin-right: 0.5rem !important;
    }
}

/* Landscape mode fixes */
@media (max-width: 768px) and (orientation: landscape) {
    .container,
    .container-fluid {
        width: 100vw !important;
        max-width: 100vw !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* SAMSUNG S23 ULTRA ZOOM/SCALE ENHANCEMENTS */
/* Target high-resolution mobile devices like S23 Ultra (around 412-428px width) */
@media (min-width: 400px) and (max-width: 500px) and (-webkit-min-device-pixel-ratio: 2) {
    
    /* Larger base font size for better readability */
    body {
        font-size: 19px !important;
        line-height: 1.6 !important;
    }
    
    /* Larger menu items and better touch targets */
    .list-group-item, .nav-link, .btn, a {
        font-size: 21px !important;
        padding: 20px 24px !important;
        min-height: 68px !important;
        display: flex !important;
        align-items: center !important;
    }
    
    /* Larger profile section */
    .card-header, .card-body {
        padding: 28px !important;
        font-size: 19px !important;
    }
    
    /* Larger icons */
    .bi, i[class*="bi-"] {
        font-size: 26px !important;
        margin-right: 18px !important;
    }
    
    /* Larger headings */
    h1, h2, h3, h4, h5, h6 {
        font-size: 1.5em !important;
        margin-bottom: 18px !important;
    }
    
    /* Demo user info larger */
    .text-muted, .text-secondary {
        font-size: 17px !important;
    }
    
    /* Premium badge larger */
    .badge {
        font-size: 13px !important;
        padding: 8px 14px !important;
    }
    
    /* Better spacing between menu items */
    .list-group-item + .list-group-item {
        margin-top: 6px !important;
    }
    
    /* Larger avatar/profile image area */
    .text-center .bi-person-circle {
        font-size: 90px !important;
        margin-bottom: 20px !important;
    }
    
    /* Larger buttons and form controls */
    .btn, button, input, select, textarea {
        font-size: 19px !important;
        padding: 16px 20px !important;
        min-height: 60px !important;
    }
}