/* Mobile and Tablet Responsive Styles */
/* Comprehensive responsive design for SplitWise */

/* ============================================
   GLOBAL RESPONSIVE SETTINGS
   ============================================ */

/* Base responsive adjustments */
* {
    box-sizing: border-box;
}

/* FIXED: Remove black tap highlight globally for mobile/tablet */
* {
    -webkit-tap-highlight-color: transparent !important;
}

/* FIXED: Remove black artifacts on all clickable elements in sidebar */
.sidebar.show *:active,
.sidebar.show *:focus,
.sidebar.show button:active,
.sidebar.show button:focus,
.sidebar.show a:active,
.sidebar.show a:focus {
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Prevent horizontal scroll globally — html only (safe), not body */
html {
    overflow-x: hidden;
    overscroll-behavior-x: none; /* block left/right bounce on html root */
}

body {
    max-width: 100%;
    /* overflow-x: hidden intentionally NOT set on body — breaks touch scroll on mobile */
    overscroll-behavior-x: none;  /* block horizontal bounce without killing PTR */
}

/* Laptop / desktop trackpad: block vertical elastic bounce too.
   (hover:hover)+(pointer:fine) targets mice/trackpads, not phones. */
@media (hover: hover) and (pointer: fine) {
    html,
    body {
        overscroll-behavior: none;
    }
}

/* Ensure images are responsive */
img {
    max-width: 100%;
    height: auto;
}

/* ============================================
   DESKTOP STYLES (> 1024px) - Ensure Navigation Button Visible
   ============================================ */

@media (min-width: 1025px) {

    /* Desktop navigation toggle - visible on desktop */
    .desktop-nav-toggle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Hide mobile menu button on desktop */
    .mobile-menu-btn {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }

    /* Ensure page header is properly positioned */
    .page-header-fixed {
        left: var(--sidebar-width) !important;
    }

    body.sidebar-collapsed .page-header-fixed {
        left: 80px !important;
    }

    /* FIXED: Ensure header actions are visible on desktop */
    .page-header-fixed .header-actions {
        display: flex !important;
    }

    /* FIXED: Hide mobile container on desktop */
    .header-actions-mobile {
        display: none !important;
    }
}

/* ============================================
   TABLET LANDSCAPE OPTIMIZATIONS (1024px landscape)
   ============================================ */

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

    /* Optimize for horizontal space - use 3-4 columns for stat cards */
    .main-content .row>.col-md-3 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }

    .main-content .row>.col-md-4 {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
    }

    .main-content .row>.col-md-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    /* Quick actions - 3 columns in landscape */
    .quick-actions {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: clamp(1rem, 2vw, 1.5rem) !important;
    }

    /* Chart containers - shorter height for landscape */
    .chart-container>div[style*="position: relative"] {
        height: 320px !important;
        min-height: 320px !important;
        max-height: 320px !important;
    }

    /* Better sidebar in landscape */
    .sidebar.show {
        width: 240px !important;
    }

    /* Optimize main content spacing */
    .main-content {
        padding: clamp(1.25rem, 2.5vw, 1.75rem) !important;
        padding-top: calc(clamp(1.25rem, 2.5vw, 1.75rem) + 64px) !important;
    }
}

/* ============================================
   TABLET PORTRAIT OPTIMIZATIONS (768px - 1024px portrait)
   ============================================ */

@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {

    /* Use 2 columns for stat cards in portrait */
    .main-content .row>.col-md-3 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    .main-content .row>.col-md-4 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    .main-content .row>.col-md-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Quick actions - 2 columns in portrait */
    .quick-actions {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: clamp(1.25rem, 2.5vw, 1.5rem) !important;
    }

    /* Chart containers - good height for portrait */
    .chart-container>div[style*="position: relative"] {
        height: 360px !important;
        min-height: 360px !important;
        max-height: 360px !important;
    }

    /* === ENHANCED TABLET PORTRAIT OPTIMIZATIONS === */

    /* Main content - better padding */
    .main-content {
        padding: clamp(1.5rem, 3vw, 2rem) clamp(1.25rem, 2.5vw, 1.75rem) !important;
        padding-top: calc(clamp(1.5rem, 3vw, 2rem) + 64px) !important;
    }

    /* Stat & Action cards - better sizing */
    .stat-card,
    .stats-card,
    .action-card {
        padding: clamp(1.5rem, 3vw, 2rem) !important;
        border-radius: clamp(16px, 3vw, 20px) !important;
    }

    .stat-card,
    .stats-card {
        min-height: clamp(140px, 20vw, 160px) !important;
    }

    .action-card {
        min-height: clamp(160px, 22vw, 180px) !important;
    }

    /* Typography - optimal for tablet reading */
    h2 {
        font-size: clamp(1.75rem, 3.5vw, 2rem) !important;
    }

    h3 {
        font-size: clamp(1.5rem, 3vw, 1.75rem) !important;
    }

    h4 {
        font-size: clamp(1.25rem, 2.5vw, 1.5rem) !important;
    }

    /* Buttons - bigger touch targets */
    .btn {
        padding: clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem) !important;
        font-size: clamp(1rem, 2vw, 1.125rem) !important;
        min-height: 48px !important;
        border-radius: clamp(10px, 2vw, 12px) !important;
    }

    /* Form controls - comfortable sizing */
    .form-control,
    .form-select {
        padding: clamp(0.75rem, 1.5vw, 1rem) clamp(1rem, 2vw, 1.25rem) !important;
        font-size: clamp(1rem, 2vw, 1.125rem) !important;
        min-height: 48px !important;
    }

    .form-label {
        font-size: clamp(1rem, 2vw, 1.125rem) !important;
        font-weight: 600 !important;
    }

    /* Cards - consistent styling */
    .card {
        padding: clamp(1.5rem, 3vw, 2rem) !important;
        border-radius: clamp(16px, 3vw, 20px) !important;
        margin-bottom: clamp(1.25rem, 2.5vw, 1.5rem) !important;
    }

    /* Tables - better readability */
    .table {
        font-size: clamp(0.95rem, 1.9vw, 1.05rem) !important;
    }

    .table th,
    .table td {
        padding: clamp(0.875rem, 1.75vw, 1.125rem) !important;
    }

    /* Modal optimization */
    .modal-dialog {
        max-width: 90% !important;
        margin: clamp(1rem, 2vw, 1.5rem) auto !important;
    }

    /* Navigation */
    .nav-tabs .nav-link {
        padding: clamp(0.75rem, 1.5vw, 1rem) clamp(1.25rem, 2.5vw, 1.5rem) !important;
        font-size: clamp(1rem, 2vw, 1.125rem) !important;
    }

    /* Group cards - 2 columns */
    .groups-grid,
    .group-cards-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: clamp(1.25rem, 2.5vw, 1.5rem) !important;
    }

    .group-card {
        padding: clamp(1.5rem, 3vw, 2rem) !important;
        border-radius: clamp(16px, 3vw, 20px) !important;
    }

    /* === CRITICAL FIXES FOR TABLET PORTRAIT LAYOUT === */

    /* Fix header - ensure full width and proper positioning */
    .page-header-fixed {
        left: 0 !important;
        width: 100% !important;
        padding: clamp(1rem, 2vw, 1.25rem) clamp(1.25rem, 2.5vw, 1.75rem) !important;
        z-index: 999 !important;
    }

    /* Ensure header title is properly positioned */
    .page-header-fixed h2 {
        margin-left: clamp(3rem, 6vw, 3.5rem) !important;
        font-size: clamp(1.5rem, 3vw, 1.75rem) !important;
        width: auto !important;
        max-width: calc(100% - 4rem) !important;
    }

    /* Desktop nav toggle button positioning */
    .desktop-nav-toggle {
        position: fixed !important;
        left: clamp(0.75rem, 1.5vw, 1rem) !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 1001 !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Hide mobile menu button in favor of desktop toggle */
    .mobile-menu-btn,
    #mobileMenuBtn {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Sidebar - overlay mode in tablet portrait */
    .sidebar {
        position: fixed !important;
        left: -300px !important;
        width: 280px !important;
        transform: translateX(0) !important;
        transition: left 0.3s ease !important;
        z-index: 1000 !important;
    }

    .sidebar.show {
        left: 0 !important;
        transform: translateX(0) !important;
    }

    /* Sidebar overlay for tablet */
    #sidebarOverlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    #sidebarOverlay.show {
        display: block !important;
        opacity: 1 !important;
    }

    /* Main content - full width in tablet portrait */
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
        padding: clamp(1.5rem, 3vw, 2rem) clamp(1.25rem, 2.5vw, 1.75rem) !important;
        padding-top: calc(clamp(1.5rem, 3vw, 2rem) + 64px) !important;
    }

    /* Footer - full width */
    footer {
        margin-left: 0 !important;
        width: 100% !important;
    }

    /* Disable collapsed sidebar mode - always use overlay */
    body.sidebar-collapsed .sidebar {
        left: -300px !important;
    }

    body.sidebar-collapsed .main-content,
    body.sidebar-collapsed .page-header-fixed,
    body.sidebar-collapsed footer {
        margin-left: 0 !important;
        width: 100% !important;
    }
}


/* ============================================
   TABLET STYLES (768px - 1024px)
   ============================================ */

@media (max-width: 1024px) {

    /* ROOT CAUSE FIX: Ensure sidebar allows notification bell to be visible on tablet */
    .sidebar.show {
        display: flex !important;
        flex-direction: column !important;
        height: 100vh !important;
        max-height: 100vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    /* ROOT CAUSE FIX: Ensure mt-auto container is visible on tablet */
    .sidebar.show .mt-auto {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-top: auto !important;
        padding: clamp(0.75rem, 2vw, 1rem) clamp(0.75rem, 2vw, 1rem) !important;
        width: 100% !important;
        max-width: 100% !important;
        flex-shrink: 0 !important;
    }

    /* ROOT CAUSE FIX: Ensure notification bell is visible on tablet */
    .sidebar.show .mt-auto .notification-bell {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        padding: clamp(0.875rem, 2.5vw, 1rem) clamp(1rem, 3vw, 1.25rem) !important;
        min-height: clamp(44px, 8vw, 48px) !important;
        align-items: center !important;
        flex-direction: row !important;
    }

    /* ROOT CAUSE FIX: Ensure notification bell icon and text are visible on tablet */
    .sidebar.show .mt-auto .notification-bell i,
    .sidebar.show .mt-auto .notification-bell span:not(.notification-badge) {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Notification panel styles → see notifications.css */

    /* Sidebar adjustments for tablet */
    .sidebar {
        width: 250px;
    }

    body.sidebar-collapsed .sidebar {
        width: 80px;
    }

    .main-content {
        margin-left: 250px;
        padding-bottom: clamp(1rem, 2.5vw, 1.5rem) !important;
        padding-left: 5% !important;
        /* ROOT CAUSE FIX: 90% width content area on tablet */
        padding-right: 5% !important;
        /* ROOT CAUSE FIX: 90% width content area on tablet */
    }

    /* FIXED: Reduce top padding/margin for container-fluid on tablet to match tile gap */
    .main-content .container-fluid {
        padding-top: 0 !important;
        /* No top padding - gap handled by main-content */
        margin-top: 0 !important;
    }

    /* FIXED: First row/quickStats margin-top matches tile gap spacing on tablet */
    .main-content .container-fluid>.row:first-child,
    .main-content .container-fluid>#quickStats:first-child,
    .main-content .container-fluid>.row.mb-4:first-child {
        margin-top: 0 !important;
        /* No margin-top - gap handled by main-content padding */
        padding-top: 0 !important;
    }

    /* FIXED: Button groups - wrap when congested on tablet */
    .d-flex.gap-2,
    .d-flex.gap-2.mb-4,
    .d-flex.justify-content-between,
    .d-flex.align-items-center {
        flex-wrap: wrap !important;
        gap: clamp(0.5rem, 2vw, 0.75rem) !important;
    }

    .d-flex.gap-2 .btn,
    .d-flex.gap-2.mb-4 .btn,
    .d-flex.justify-content-between .btn {
        flex: 1 1 auto !important;
        min-width: clamp(140px, 25vw, 180px) !important;
        /* Wrap when too small */
        width: auto !important;
        margin-bottom: clamp(0.5rem, 2vw, 0.75rem) !important;
    }

    .d-flex.gap-2 .input-group,
    .d-flex.gap-2.mb-4 .input-group,
    .d-flex.gap-2 .sw-search-bar,
    .d-flex.gap-2.mb-4 .sw-search-bar {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        margin-top: clamp(0.5rem, 2vw, 0.75rem) !important;
        order: 999;
    }

    /* ROOT CAUSE FIX: Chart containers for tablet - proper height */
    .chart-container {
        padding: clamp(1.25rem, 2.5vw, 1.5rem) !important;
        margin-top: clamp(1rem, 2vw, 1.5rem) !important;
        margin-bottom: clamp(1rem, 2vw, 1.5rem) !important;
    }

    .chart-container>div {
        height: 380px !important;
        min-height: 380px !important;
        max-height: 380px !important;
    }

    .chart-container canvas {
        height: 100% !important;
        max-height: 100% !important;
    }

    /* FIXED: When header-actions-mobile exists on tablet, reduce container-fluid top spacing to match tile gap */
    .main-content .header-actions-mobile+.container-fluid {
        padding-top: 0 !important;
        /* No top padding - gap handled by header-actions-mobile margin-bottom */
        margin-top: 0 !important;
    }

    .main-content .header-actions-mobile+.container-fluid>.row:first-child,
    .main-content .header-actions-mobile+.container-fluid>#quickStats:first-child {
        margin-top: 0 !important;
        /* No margin-top - gap handled by header-actions-mobile margin-bottom */
    }

    body.sidebar-collapsed .main-content {
        margin-left: 80px;
    }

    /* Card padding adjustments */
    .card,
    .stats-card,
    .stat-card {
        padding: 1.5rem;
    }

    /* Reduce chart container padding */
    .chart-container {
        padding: 1.5rem;
        margin-top: 2rem;
    }

    /* Quick actions grid adjustment */
    .quick-actions {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1.5rem;
    }
}

/* ============================================
   MOBILE PORTRAIT OPTIMIZATIONS (max-width: 767px and portrait)
   ============================================ */

@media (max-width: 767px) and (orientation: portrait) {

    /* Stack everything vertically for portrait */
    .main-content .row>.col-md-3,
    .main-content .row>.col-md-4,
    .main-content .row>.col-md-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-left: clamp(0.5rem, 2vw, 0.75rem) !important;
        padding-right: clamp(0.5rem, 2vw, 0.75rem) !important;
        margin-bottom: clamp(0.75rem, 2vw, 1rem) !important;
    }

    /* No grid for quick actions - full vertical stack */
    .quick-actions {
        grid-template-columns: 1fr !important;
        gap: clamp(0.875rem, 2.5vw, 1rem) !important;
    }

    /* Chart containers - taller for portrait */
    .chart-container>div[style*="position: relative"] {
        height: 320px !important;
        min-height: 320px !important;
        max-height: 320px !important;
    }

    /* Better spacing for portrait scrolling */
    .main-content {
        padding-bottom: clamp(1.5rem, 4vw, 2rem) !important;
    }

    /* Typography - optimal for portrait reading */
    .stats-card h3,
    .stat-card h3 {
        font-size: clamp(1.15rem, 3.5vw, 1.35rem) !important;
    }

    .page-header-fixed h2 {
        font-size: clamp(1.05rem, 3.2vw, 1.2rem) !important;
    }

    /* Cards - comfortable padding for portrait */
    .card,
    .stat-card,
    .stats-card {
        padding: clamp(1.25rem, 3.5vw, 1.5rem) !important;
        margin-bottom: clamp(0.875rem, 2.5vw, 1rem) !important;
    }
}

/* ============================================
   MOBILE STYLES (max-width: 767px)
   ============================================ */

@media (max-width: 767px) {

    /* ROOT CAUSE FIX: Mobile-specific navigation button optimizations */
    .sidebar.show .nav-link {
        padding: clamp(1.125rem, 4vw, 1.25rem) clamp(1.5rem, 5vw, 1.75rem) !important;
        margin: 0 clamp(0.875rem, 3vw, 1rem) clamp(0.75rem, 2.5vw, 0.875rem) clamp(0.875rem, 3vw, 1rem) !important;
        min-height: clamp(50px, 12vw, 56px) !important;
        /* Larger touch targets on mobile */
        font-size: clamp(1rem, 3.5vw, 1.1rem) !important;
        gap: clamp(1rem, 3vw, 1.125rem) !important;
        width: calc(100% - clamp(1.75rem, 6vw, 2rem)) !important;
        max-width: calc(100% - clamp(1.75rem, 6vw, 2rem)) !important;
    }

    /* ROOT CAUSE FIX: Mobile navigation container - better spacing */
    .sidebar.show .nav {
        padding: clamp(0.875rem, 3vw, 1rem) 0 clamp(0.625rem, 2.5vw, 0.75rem) 0 !important;
    }

    /* ROOT CAUSE FIX: Mobile navigation icons - larger and more visible */
    .sidebar.show .nav-link i {
        width: clamp(24px, 6vw, 28px) !important;
        min-width: clamp(24px, 6vw, 28px) !important;
        font-size: clamp(1.2rem, 3.5vw, 1.3rem) !important;
    }

    /* ROOT CAUSE FIX: Mobile navigation text - better readability */
    .sidebar.show .nav-link span {
        font-size: clamp(1rem, 3.5vw, 1.1rem) !important;
    }

    /* ROOT CAUSE FIX: Mobile notification bell - optimized for all screen sizes to fit properly within viewport */
    .sidebar.show .mt-auto .notification-bell {
        padding: clamp(0.5rem, 1.5vw, 0.75rem) clamp(0.625rem, 2vw, 0.875rem) !important;
        min-height: clamp(44px, 8vw, 50px) !important;
        max-height: clamp(50px, 9vw, 56px) !important;
        height: clamp(44px, 8vw, 50px) !important;
        margin: 0 clamp(0.5rem, 1.5vw, 0.75rem) !important;
        width: calc(100% - clamp(1rem, 3vw, 1.5rem)) !important;
        max-width: calc(100% - clamp(1rem, 3vw, 1.5rem)) !important;
        font-size: clamp(0.85rem, 2.2vw, 0.95rem) !important;
        box-sizing: border-box !important;
    }

    /* ROOT CAUSE FIX: Mobile notification bell icon - optimized sizing */
    .sidebar.show .mt-auto .notification-bell i {
        font-size: clamp(1rem, 2.5vw, 1.2rem) !important;
        min-width: clamp(18px, 4vw, 22px) !important;
        width: clamp(18px, 4vw, 22px) !important;
        margin-right: clamp(0.375rem, 1.2vw, 0.625rem) !important;
        flex-shrink: 0 !important;
    }

    /* ROOT CAUSE FIX: Mobile notification bell text - optimized sizing */
    .sidebar.show .mt-auto .notification-bell span:not(.notification-badge) {
        font-size: clamp(0.85rem, 2.2vw, 0.95rem) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* ROOT CAUSE FIX: Mobile mt-auto container - minimal padding to ensure button fits within viewport */
    .sidebar.show .mt-auto {
        padding: clamp(0.375rem, 1vw, 0.5rem) clamp(0.5rem, 1.5vw, 0.75rem) !important;
        max-height: clamp(50px, 12vw, 65px) !important;
        min-height: clamp(50px, 12vw, 65px) !important;
    }

    /* ROOT CAUSE FIX: Mobile sidebar header - reduce height to give more space for notification button */
    .sidebar.show .sidebar-header {
        min-height: clamp(50px, 10vw, 60px) !important;
        max-height: clamp(60px, 12vw, 70px) !important;
        padding: clamp(0.75rem, 2vw, 1rem) clamp(0.75rem, 2vw, 1rem) !important;
        flex-shrink: 0 !important;
    }

    /* ROOT CAUSE FIX: Mobile nav section - ensure it doesn't push notification button below viewport */
    .sidebar.show .nav {
        max-height: calc(100vh - clamp(60px, 12vw, 70px) - clamp(50px, 12vw, 65px) - clamp(0.75rem, 2vw, 1rem)) !important;
        /* ROOT CAUSE FIX: Add padding-bottom to prevent content from being hidden behind notification button */
        padding-bottom: clamp(60px, 12vw, 70px) !important;
    }

    /* ROOT CAUSE FIX: Mobile - Force notification button to be visible and positioned correctly */
    @media (max-width: 767px) {
        .sidebar.show .mt-auto {
            position: absolute !important;
            bottom: 0 !important;
            left: 0 !important;
            right: 0 !important;
            z-index: 1000 !important;
            display: flex !important;
            visibility: visible !important;
            opacity: 1 !important;
            pointer-events: auto !important;
        }

        .sidebar.show .mt-auto .notification-bell {
            display: flex !important;
            visibility: visible !important;
            opacity: 1 !important;
            pointer-events: auto !important;
            position: relative !important;
        }
    }
}

/* ROOT CAUSE FIX: Prevent body scroll when sidebar is open on mobile/tablet */
@media (max-width: 1024px) {

    /* Lock body scroll when sidebar is open */
    body.sidebar-open,
    body:has(.sidebar.show) {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* Prevent main content from scrolling when sidebar is open */
    body.sidebar-open .main-content,
    body:has(.sidebar.show) .main-content {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
    }
}

/* Mobile and Tablet: Use overlay menu (max-width: 1024px) */
@media (max-width: 1024px) {
    /* ============================================
       SIDEBAR MOBILE MENU (Mobile & Tablet)
       ============================================ */

    .sidebar {
        position: fixed;
        left: -280px;
        width: 280px !important;
        /* FIXED: Ensure full width */
        min-width: 280px !important;
        /* FIXED: Prevent shrinking */
        max-width: 280px !important;
        /* FIXED: Prevent expanding */
        height: 100vh !important;
        max-height: 100vh !important;
        z-index: 1000;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
        top: 0 !important;
        bottom: 0 !important;
        overflow: hidden !important;
        /* ROOT CAUSE FIX: Prevent sidebar from scrolling, only nav scrolls */
        display: flex !important;
        flex-direction: column !important;
        -webkit-overflow-scrolling: touch;
        /* Smooth scrolling on iOS */
        box-sizing: border-box !important;
    }

    .sidebar.show {
        left: 0 !important;
        z-index: 1001;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
        width: 280px !important;
        /* FIXED: Ensure full width when shown */
        min-width: 280px !important;
        max-width: 280px !important;
        height: 100vh !important;
        max-height: 100vh !important;
        overflow: hidden !important;
        /* ROOT CAUSE FIX: Sidebar itself doesn't scroll, only nav does */
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
        /* ROOT CAUSE FIX: Ensure sidebar fits within viewport */
        top: 0 !important;
        bottom: 0 !important;
    }

    /* FIXED: Ensure sidebar content is fully visible and fits viewport */
    .sidebar.show .nav,
    .sidebar.show .sidebar-header,
    .sidebar.show .mt-auto {
        width: 100% !important;
        max-width: 100% !important;
        visibility: visible !important;
        opacity: 1 !important;
        display: flex !important;
        box-sizing: border-box !important;
    }

    /* ROOT CAUSE FIX: Ensure sidebar header doesn't take too much space on mobile/tablet */
    .sidebar.show .sidebar-header {
        flex-shrink: 0 !important;
        min-height: clamp(50px, 10vw, 60px) !important;
        max-height: clamp(60px, 12vw, 70px) !important;
        padding: clamp(0.75rem, 2vw, 1rem) clamp(0.75rem, 2vw, 1rem) !important;
    }

    /* ROOT CAUSE FIX: Ensure mt-auto container is visible, positioned at bottom, and always visible within viewport */
    .sidebar.show .mt-auto {
        pointer-events: auto !important;
        z-index: 1000 !important;
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-top: auto !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        /* ROOT CAUSE FIX: Minimal padding to ensure button fits within viewport */
        padding: clamp(0.375rem, 1vw, 0.5rem) clamp(0.5rem, 1.5vw, 0.75rem) !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        /* ROOT CAUSE FIX: Remove background to prevent outer box appearance */
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        /* ROOT CAUSE FIX: Ensure it fits within viewport - limit height */
        min-height: fit-content !important;
        max-height: clamp(50px, 12vw, 65px) !important;
        /* ROOT CAUSE FIX: Ensure it's always visible and not cut off */
        height: auto !important;
    }

    /* ROOT CAUSE FIX: Ensure notification bell is visible, properly sized, and fits all screen sizes - ALWAYS VISIBLE */
    .sidebar.show .mt-auto .notification-bell {
        pointer-events: auto !important;
        z-index: 1002 !important;
        position: relative !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        /* ROOT CAUSE FIX: Reduced padding to ensure button fits within viewport */
        padding: clamp(0.5rem, 1.5vw, 0.75rem) clamp(0.625rem, 2vw, 0.875rem) !important;
        border-radius: clamp(8px, 2vw, 12px) !important;
        font-size: clamp(0.85rem, 2.2vw, 0.95rem) !important;
        /* ROOT CAUSE FIX: Fixed height to ensure it fits within viewport */
        min-height: clamp(44px, 8vw, 50px) !important;
        max-height: clamp(50px, 9vw, 56px) !important;
        height: clamp(44px, 8vw, 50px) !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-direction: row !important;
        gap: clamp(0.375rem, 1.2vw, 0.625rem) !important;
        overflow: visible !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
        /* ROOT CAUSE FIX: Remove any unwanted background, border, or box-shadow that creates outer box */
        background: rgba(255, 255, 255, 0.05) !important;
        background-color: rgba(255, 255, 255, 0.05) !important;
        border: none !important;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
        /* ROOT CAUSE FIX: Force visibility - ensure button is never hidden */
        clip: auto !important;
        clip-path: none !important;
        transform: none !important;
    }

    /* ROOT CAUSE FIX: Ensure notification bell icon fits properly on all screen sizes */
    .sidebar.show .mt-auto .notification-bell i {
        font-size: clamp(1rem, 2.5vw, 1.2rem) !important;
        min-width: clamp(18px, 4vw, 22px) !important;
        max-width: clamp(22px, 5vw, 24px) !important;
        width: clamp(18px, 4vw, 22px) !important;
        margin-right: clamp(0.375rem, 1.2vw, 0.625rem) !important;
        flex-shrink: 0 !important;
    }

    /* ROOT CAUSE FIX: Ensure notification bell text fits properly on all screen sizes */
    .sidebar.show .mt-auto .notification-bell span:not(.notification-badge) {
        font-size: clamp(0.85rem, 2.2vw, 0.95rem) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    /* FIXED: Ensure sidebar closes when 'show' class is removed */
    .sidebar:not(.show) {
        left: -280px !important;
    }

    body.sidebar-collapsed .sidebar {
        width: 280px;
        left: -280px;
    }

    body.sidebar-collapsed .sidebar.show {
        left: 0;
        z-index: 1001;
    }

    /* Improved mobile sidebar styling - OPTIMIZED for mobile/tablet */
    .sidebar.show .sidebar-header {
        padding: clamp(0.75rem, 2vw, 1rem) clamp(1rem, 3vw, 1.25rem);
        border-bottom: 1px solid rgba(255, 255, 255, 0.25);
        background: rgba(255, 255, 255, 0.05);
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: clamp(50px, 8vw, 60px);
    }

    .sidebar.show .sidebar-header h5 {
        font-size: clamp(1.1rem, 3.5vw, 1.35rem) !important;
        margin: 0;
        white-space: nowrap;
        overflow: visible !important;
        /* FIXED: Allow SEM text to be visible */
        text-overflow: clip !important;
        /* FIXED: Don't clip text */
        display: flex !important;
        /* FIXED: Use flexbox for proper layout */
        align-items: center !important;
        flex: 1 !important;
        min-width: 0 !important;
        /* Allow flex shrinking */
    }

    /* FIXED: Ensure SEM span is visible in mobile view */
    .sidebar.show .sidebar-header h5 span {
        display: inline !important;
        visibility: visible !important;
        opacity: 1 !important;
        white-space: nowrap;
        overflow: visible;
    }

    /* FIXED: Ensure icon is visible and properly spaced */
    .sidebar.show .sidebar-header h5 i {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-right: clamp(0.5rem, 1.5vw, 0.75rem) !important;
        flex-shrink: 0;
    }

    /* Sidebar close button - OPTIMIZED for mobile/tablet */
    .sidebar-close-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.2);
        border: none;
        color: white;
        font-size: clamp(1rem, 3vw, 1.25rem);
        width: clamp(32px, 6vw, 36px);
        height: clamp(32px, 6vw, 36px);
        min-width: clamp(32px, 6vw, 36px);
        min-height: clamp(32px, 6vw, 36px);
        border-radius: clamp(6px, 1.5vw, 8px);
        cursor: pointer;
        transition: all 0.3s ease;
        flex-shrink: 0;
        margin-left: auto !important;
        margin-right: clamp(0.5rem, 2vw, 0.75rem) !important;
        position: relative;
        z-index: 10;
        touch-action: manipulation;
        /* Better touch handling */
    }

    .sidebar-close-btn:hover,
    .sidebar-close-btn:active {
        background: rgba(255, 255, 255, 0.3);
        transform: scale(1.05);
    }

    /* FIXED: Remove black tap highlight and dark artifacts on close button click */
    .sidebar-close-btn {
        -webkit-tap-highlight-color: transparent !important;
        outline: none !important;
        border: none !important;
    }

    .sidebar-close-btn:active,
    .sidebar-close-btn:focus,
    .sidebar-close-btn:focus-visible {
        background: rgba(255, 255, 255, 0.3) !important;
        /* Light background instead of black */
        outline: none !important;
        border: none !important;
        box-shadow: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    /* ROOT CAUSE FIX: Ensure sidebar uses flexbox layout properly and notification button is always visible */
    .sidebar.show {
        display: flex !important;
        flex-direction: column !important;
        overscroll-behavior: contain !important;
        /* Prevent scroll chaining to body */
        touch-action: pan-y !important;
        /* Allow vertical scrolling in sidebar only */
        height: 100vh !important;
        max-height: 100vh !important;
        overflow: hidden !important;
        /* Sidebar itself doesn't scroll */
        position: relative !important;
    }

    /* ROOT CAUSE FIX: Ensure nav section scrolls but doesn't push notification bell out */
    .sidebar.show .nav {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        min-height: 0 !important;
        /* ROOT CAUSE FIX: Calculate max-height more accurately - header (~60-70px) + notification button (~50-60px) + padding */
        max-height: calc(100vh - clamp(60px, 12vw, 70px) - clamp(50px, 12vw, 65px) - clamp(1rem, 3vw, 1.5rem)) !important;
        -webkit-overflow-scrolling: touch !important;
        /* Smooth scrolling on iOS */
        overscroll-behavior: contain !important;
        /* ROOT CAUSE FIX: Ensure nav takes available space but doesn't push mt-auto out */
        flex-shrink: 1 !important;
        /* ROOT CAUSE FIX: Add padding-bottom to prevent content from being hidden behind notification button */
        padding-bottom: clamp(60px, 12vw, 70px) !important;
    }

    /* ROOT CAUSE FIX: Ensure mt-auto container stays at bottom and is always visible within viewport - REMOVED DUPLICATE */

    /* ROOT CAUSE FIX: Navigation links - Fully optimized for mobile/tablet with proper positioning and spacing */
    .sidebar.show .nav-link {
        padding: clamp(1rem, 3vw, 1.125rem) clamp(1.25rem, 4vw, 1.5rem) !important;
        margin: 0 clamp(0.75rem, 2.5vw, 1rem) clamp(0.625rem, 2vw, 0.75rem) clamp(0.75rem, 2.5vw, 1rem) !important;
        margin-top: 0 !important;
        border-radius: clamp(12px, 3vw, 14px) !important;
        font-size: clamp(0.95rem, 2.8vw, 1.05rem) !important;
        min-height: clamp(48px, 10vw, 52px) !important;
        /* Minimum touch target size - increased for better mobile UX */
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: clamp(0.875rem, 2.5vw, 1rem) !important;
        touch-action: manipulation !important;
        width: calc(100% - clamp(1.5rem, 5vw, 2rem)) !important;
        /* Proper width with consistent margins */
        max-width: calc(100% - clamp(1.5rem, 5vw, 2rem)) !important;
        box-sizing: border-box !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: nowrap !important;
        position: relative !important;
        /* ROOT CAUSE FIX: Remove black tap highlight and dark artifacts on click */
        -webkit-tap-highlight-color: transparent !important;
        outline: none !important;
        border: none !important;
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
        transition: all 0.2s ease !important;
    }

    /* ROOT CAUSE FIX: Remove black background on active/focus states with smooth transitions */
    .sidebar.show .nav-link:active,
    .sidebar.show .nav-link:focus,
    .sidebar.show .nav-link:focus-visible {
        background: rgba(255, 255, 255, 0.2) !important;
        /* Light background instead of black */
        outline: none !important;
        border: none !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
        transform: scale(0.98) !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    /* ROOT CAUSE FIX: Ensure hover state doesn't show black artifacts */
    .sidebar.show .nav-link:hover {
        background: rgba(255, 255, 255, 0.15) !important;
        outline: none !important;
        border: none !important;
        transform: translateX(4px) !important;
    }

    /* ROOT CAUSE FIX: Remove any dark borders or artifacts that might appear */
    .sidebar.show .nav-link::before,
    .sidebar.show .nav-link::after {
        display: none !important;
        content: none !important;
    }

    /* ROOT CAUSE FIX: Ensure no dark background appears on touch - use transparent as base */
    .sidebar.show .nav-link:not(:hover):not(:active):not(.active) {
        background-color: rgba(255, 255, 255, 0.05) !important;
    }

    /* ROOT CAUSE FIX: Active state with better visibility */
    .sidebar.show .nav-link.active {
        background: rgba(255, 255, 255, 0.25) !important;
        /* Light background for active state */
        font-weight: 600 !important;
        box-shadow: 0 2px 8px rgba(255, 255, 255, 0.2) !important;
    }

    /* ROOT CAUSE FIX: Ensure nav links container has proper spacing and alignment */
    .sidebar.show .nav {
        padding: clamp(0.75rem, 2.5vw, 1rem) 0 clamp(0.5rem, 2vw, 0.75rem) 0 !important;
        gap: 0 !important;
        /* Remove gap - spacing handled by margin-bottom on nav-link */
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* ROOT CAUSE FIX: First navigation link - no top margin */
    .sidebar.show .nav>.nav-link:first-child {
        margin-top: 0 !important;
    }

    /* ROOT CAUSE FIX: Last navigation link - consistent bottom margin */
    .sidebar.show .nav>.nav-link:last-child {
        margin-bottom: clamp(0.625rem, 2vw, 0.75rem) !important;
    }

    /* ROOT CAUSE FIX: Navigation link icons - proper sizing and alignment */
    .sidebar.show .nav-link i {
        width: clamp(22px, 5.5vw, 26px) !important;
        min-width: clamp(22px, 5.5vw, 26px) !important;
        font-size: clamp(1.1rem, 3vw, 1.2rem) !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* ROOT CAUSE FIX: Navigation link text - proper sizing and truncation */
    .sidebar.show .nav-link span {
        font-size: clamp(0.95rem, 2.8vw, 1.05rem) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        flex: 1 !important;
        min-width: 0 !important;
        text-align: left !important;
    }

    /* ROOT CAUSE FIX: Mobile/tablet sidebar notification bell - Ensure visibility and proper positioning */
    .sidebar.show .notification-bell,
    .sidebar.show .mt-auto .notification-bell {
        padding: clamp(0.875rem, 2.5vw, 1rem) clamp(1rem, 3vw, 1.25rem) !important;
        margin: clamp(0.375rem, 1.5vw, 0.5rem) 0 !important;
        border-radius: clamp(10px, 2.5vw, 12px) !important;
        font-size: clamp(0.9rem, 2.5vw, 1rem) !important;
        min-height: clamp(44px, 8vw, 48px) !important;
        touch-action: manipulation !important;
        cursor: pointer !important;
        pointer-events: auto !important;
        z-index: 1002 !important;
        /* FIXED: Higher z-index to ensure button is clickable above sidebar */
        position: relative !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        /* FIXED: Remove black tap highlight and dark artifacts on click */
        -webkit-tap-highlight-color: transparent !important;
        outline: none !important;
        border: none !important;
        /* ROOT CAUSE FIX: Ensure visibility */
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-direction: row !important;
        overflow: visible !important;
    }

    /* FIXED: Remove black background on notification bell active/focus states */
    .sidebar.show .notification-bell:active,
    .sidebar.show .notification-bell:focus,
    .sidebar.show .notification-bell:focus-visible {
        background: rgba(255, 255, 255, 0.2) !important;
        /* Light background instead of black */
        outline: none !important;
        border: none !important;
        box-shadow: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    /* FIXED: Ensure hover state doesn't show black artifacts */
    .sidebar.show .notification-bell:hover {
        background: rgba(255, 255, 255, 0.15) !important;
        outline: none !important;
        border: none !important;
    }

    /* FIXED: Ensure notification bell is clickable on mobile */
    .sidebar.show .notification-bell * {
        pointer-events: none !important;
        /* Prevent child elements from blocking clicks */
    }

    .sidebar.show .notification-bell,
    .notification-bell {
        pointer-events: auto !important;
        /* But allow the bell itself to be clicked */
        cursor: pointer !important;
        z-index: 1002 !important;
        position: relative !important;
    }

    /* FIXED: Ensure notification bell works on desktop too */
    .sidebar .notification-bell,
    .sidebar:not(.show) .notification-bell,
    .sidebar.collapsed .notification-bell,
    .sidebar:not(.collapsed) .notification-bell {
        pointer-events: auto !important;
        cursor: pointer !important;
        z-index: 1002 !important;
        position: relative !important;
    }

    /* FIXED: Override any nav-link styles that might block notification bell */
    /* ROOT CAUSE FIX: Override nav-link styles for notification bell to prevent outer box */
    .notification-bell.nav-link,
    .sidebar.show .mt-auto .notification-bell.nav-link,
    .sidebar.show .notification-bell.nav-link {
        /* Remove any nav-link background that creates outer box - only show background on the bell itself */
        background: rgba(255, 255, 255, 0.05) !important;
        background-color: rgba(255, 255, 255, 0.05) !important;
        border: none !important;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        z-index: 1002 !important;
        position: relative !important;
        /* ROOT CAUSE FIX: Ensure no outer container background */
        margin: 0 !important;
    }

    /* ROOT CAUSE FIX: Remove any background from mt-auto when it contains notification bell - prevents outer box */
    .sidebar.show .mt-auto:has(.notification-bell) {
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: clamp(0.5rem, 1.5vw, 0.75rem) clamp(0.5rem, 1.5vw, 0.75rem) !important;
    }

    /* ROOT CAUSE FIX: Fallback for browsers without :has() support */
    @supports not selector(:has(*)) {
        .sidebar.show .mt-auto {
            background: transparent !important;
            background-color: transparent !important;
            border: none !important;
            box-shadow: none !important;
        }
    }

    /* ROOT CAUSE FIX: Ensure notification bell button doesn't inherit unwanted nav-link background that creates outer box */
    .sidebar.show .mt-auto .notification-bell.nav-link {
        /* Override nav-link base background - only show background on the button itself, not outer container */
        background: rgba(255, 255, 255, 0.05) !important;
        background-color: rgba(255, 255, 255, 0.05) !important;
        /* Ensure no margin creates space for outer box */
        margin: 0 !important;
    }

    /* ROOT CAUSE FIX: Ensure notification bell icon and text are visible on mobile/tablet */
    .sidebar.show .notification-bell i,
    .sidebar.show .mt-auto .notification-bell i {
        font-size: clamp(1rem, 2.5vw, 1.1rem) !important;
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: white !important;
        margin-right: clamp(0.5rem, 1.5vw, 0.75rem) !important;
        flex-shrink: 0 !important;
    }

    /* ROOT CAUSE FIX: Ensure notification bell text span is visible on mobile/tablet */
    .sidebar.show .notification-bell span:not(.notification-badge),
    .sidebar.show .mt-auto .notification-bell span:not(.notification-badge) {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: white !important;
        font-weight: 600 !important;
        font-size: clamp(0.9rem, 2.5vw, 1rem) !important;
        white-space: nowrap !important;
        overflow: visible !important;
        flex: 1 !important;
    }

    /* ROOT CAUSE FIX: Ensure notification badge is visible on mobile/tablet only when count > 0 */
    .sidebar.show .notification-bell .badge:not([style*="display: none"]):not(:empty),
    .sidebar.show .notification-bell .notification-badge:not([style*="display: none"]):not(:empty),
    .sidebar.show .mt-auto .notification-bell .badge:not([style*="display: none"]):not(:empty),
    .sidebar.show .mt-auto .notification-bell .notification-badge:not([style*="display: none"]):not(:empty) {
        font-size: clamp(0.7rem, 2vw, 0.75rem) !important;
        min-width: clamp(18px, 4vw, 20px) !important;
        height: clamp(18px, 4vw, 20px) !important;
        padding: clamp(2px, 0.5vw, 4px) clamp(4px, 1vw, 6px) !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center !important;
        justify-content: center !important;
        margin-left: auto !important;
        flex-shrink: 0 !important;
    }

    /* ROOT CAUSE FIX: Hide notification badge when count is 0 on mobile/tablet */
    .sidebar.show .notification-bell .badge[style*="display: none"],
    .sidebar.show .notification-bell .notification-badge[style*="display: none"],
    .sidebar.show .notification-bell .badge:empty,
    .sidebar.show .notification-bell .notification-badge:empty,
    .sidebar.show .mt-auto .notification-bell .badge[style*="display: none"],
    .sidebar.show .mt-auto .notification-bell .notification-badge[style*="display: none"],
    .sidebar.show .mt-auto .notification-bell .badge:empty,
    .sidebar.show .mt-auto .notification-bell .notification-badge:empty {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Mobile overlay when sidebar is open */
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        transition: opacity 0.3s ease;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }

    .sidebar-overlay.show {
        display: block;
        opacity: 1;
    }

    /* Main content full width on mobile - FIXED: Reduced gap between header and first tile to match tile gap */
    .main-content {
        margin-left: 0 !important;
        padding-top: calc(clamp(0.75rem, 2vw, 1rem) + clamp(56px, 10vw, 64px)) !important;
        /* Header height + tile gap spacing */
        padding-bottom: clamp(0.5rem, 2vw, 1rem) !important;
        padding-left: 5% !important;
        /* ROOT CAUSE FIX: 90% width content area on mobile */
        padding-right: 5% !important;
        /* ROOT CAUSE FIX: 90% width content area on mobile */
        width: 100%;
    }

    /* FIXED: When header-actions-mobile is first child, position it right after header with minimal gap */
    .main-content>.header-actions-mobile:first-child {
        margin-top: calc(clamp(56px, 10vw, 64px) - clamp(0.5rem, 2vw, 1rem)) !important;
        /* Position right after header, accounting for main-content padding */
    }

    /* FIXED: Reduce main-content padding when header-actions-mobile exists as first child (for browsers supporting :has) */
    .main-content:has(> .header-actions-mobile:first-child) {
        padding-top: clamp(56px, 10vw, 64px) !important;
        /* Only header height, no extra padding */
    }

    /* FIXED: Fallback for browsers without :has() support */
    @supports not selector(:has(*)) {
        .main-content>.header-actions-mobile:first-child {
            margin-top: 0 !important;
            /* No margin when padding is adjusted */
        }
    }

    /* FIXED: Reduce top padding/margin for container-fluid on mobile to match tile gap */
    .main-content .container-fluid {
        padding-top: 0 !important;
        /* No top padding - gap handled by main-content */
        margin-top: 0 !important;
    }

    /* FIXED: First row/quickStats margin-top matches tile gap spacing */
    .main-content .container-fluid>.row:first-child,
    .main-content .container-fluid>#quickStats:first-child,
    .main-content .container-fluid>.row.mb-4:first-child {
        margin-top: 0 !important;
        /* No margin-top - gap handled by main-content padding */
        padding-top: 0 !important;
    }

    /* FIXED: When header-actions-mobile exists on mobile, reduce container-fluid top spacing to match tile gap */
    .main-content .header-actions-mobile+.container-fluid {
        padding-top: 0 !important;
        /* No top padding - gap handled by header-actions-mobile margin-bottom */
        margin-top: 0 !important;
    }

    .main-content .header-actions-mobile+.container-fluid>.row:first-child,
    .main-content .header-actions-mobile+.container-fluid>#quickStats:first-child {
        margin-top: 0 !important;
        /* No margin-top - gap handled by header-actions-mobile margin-bottom */
    }

    /* FIXED: Reduce header-actions-mobile spacing on mobile to match tile gap */
    .main-content .header-actions-mobile {
        margin-bottom: clamp(0.75rem, 2vw, 1rem) !important;
        /* Match tile gap spacing */
        padding-top: clamp(0.5rem, 1.5vw, 0.75rem) !important;
        /* Minimal top padding */
        padding-bottom: clamp(0.5rem, 1.5vw, 0.75rem) !important;
        /* Minimal bottom padding */
        padding-left: 0 !important;
        /* ROOT CAUSE FIX: No left padding - main-content already has 5% */
        padding-right: 0 !important;
        /* ROOT CAUSE FIX: No right padding - main-content already has 5% */
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* FIXED: When header-actions-mobile is first child, ensure it's positioned correctly */
    .main-content>.header-actions-mobile:first-child {
        margin-top: calc(-1 * clamp(0.5rem, 2vw, 1rem)) !important;
        /* Negative margin to offset main-content padding */
    }

    /* FIXED: Alternative approach - use adjacent sibling selector for better browser support */
    .main-content>.header-actions-mobile:first-child+.container-fluid {
        margin-top: 0 !important;
        padding-top: clamp(0.25rem, 1vw, 0.5rem) !important;
    }

    /* Mobile header adjustments */
    .navbar {
        padding: 0.75rem 1rem;
    }

    .navbar-brand {
        font-size: 1.1rem;
    }

    /* Mobile menu button - visible on mobile */
    .mobile-menu-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
        color: white;
        font-size: 1.5rem;
        padding: 0;
        cursor: pointer;
        margin-right: 0.75rem;
        z-index: 1001;
        position: relative;
        width: 44px;
        height: 44px;
        border-radius: 10px;
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
        flex-shrink: 0;
    }

    .mobile-menu-btn:hover {
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    }

    .mobile-menu-btn:active {
        transform: scale(0.95);
    }

    .desktop-nav-toggle {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }

    /* Sidebar overlay for mobile */
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        z-index: 998;
        transition: opacity 0.3s ease;
        pointer-events: auto;
        cursor: pointer;
    }

    .sidebar-overlay.show {
        display: block !important;
        opacity: 1;
        pointer-events: auto !important;
        cursor: pointer !important;
    }

    /* ============================================
       STAT CARDS - MOBILE STACK
       ============================================ */

    .row.mb-4,
    #quickStats {
        margin-bottom: clamp(0.75rem, 2vw, 1rem) !important;
    }

    /* Stat cards and tiles - FIXED: Proper wrapping and spacing */
    .row.mb-4 .col-md-3,
    .row.mb-4 .col-md-4,
    .row.mb-4 .col-md-6,
    #quickStats .col-md-3,
    #quickStats .col-md-4,
    #quickStats .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: clamp(0.75rem, 2vw, 1rem);
        padding-left: clamp(0.5rem, 2vw, 0.75rem);
        padding-right: clamp(0.5rem, 2vw, 0.75rem);
    }

    /* Ensure tiles don't get too close */
    .stat-card,
    .stats-card,
    .card {
        margin-bottom: clamp(0.75rem, 2vw, 1rem) !important;
        padding: clamp(1rem, 3vw, 1.25rem);
    }

    /* Group cards - FIXED: Proper wrapping */
    .group-card {
        margin-bottom: clamp(0.75rem, 2vw, 1rem) !important;
    }

    #groupsContainer .col-md-6,
    #groupsContainer .col-lg-4 {
        margin-bottom: clamp(0.75rem, 2vw, 1rem);
        padding-left: clamp(0.5rem, 2vw, 0.75rem);
        padding-right: clamp(0.5rem, 2vw, 0.75rem);
    }

    .stat-icon {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
        margin-bottom: 0.75rem;
    }

    .stat-card h2,
    .stat-card h3,
    .stats-card h2,
    .stats-card h3 {
        font-size: 1.25rem !important;
    }

    .stat-card h6,
    .stats-card h6 {
        font-size: 0.875rem;
    }

    /* ============================================
       FILTER BAR - MOBILE STACK
       ============================================ */

    .d-flex.gap-2.mb-4.align-items-center {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.75rem !important;
    }

    /* Button groups - FIXED: Proper wrapping and spacing */
    .btn-group {
        width: 100%;
        display: flex;
        flex-wrap: wrap !important;
        /* Allow buttons to wrap */
        gap: clamp(0.5rem, 2vw, 0.75rem) !important;
        /* Consistent gap */
    }

    .btn-group label.btn,
    .btn-group .btn {
        flex: 1 1 auto;
        /* Allow buttons to shrink and wrap */
        min-width: clamp(80px, 20vw, 120px);
        /* Minimum width before wrapping */
        font-size: clamp(0.75rem, 2vw, 0.875rem);
        padding: clamp(0.5rem, 2vw, 0.6rem) clamp(0.5rem, 2vw, 0.75rem);
        margin: 0 !important;
        /* Remove default margins */
        white-space: nowrap;
    }

    /* Action button rows - FIXED: Full width on mobile like search box */
    .d-flex.gap-2.mb-4.align-items-center,
    .d-flex.gap-2.align-items-center,
    .d-flex.justify-content-between.align-items-center {
        flex-wrap: wrap !important;
        gap: clamp(0.5rem, 2vw, 0.75rem) !important;
        flex-direction: column !important;
        /* FIXED: Stack vertically on mobile */
    }

    /* FIXED: Button groups - wrap when congested on mobile/tablet */
    .d-flex.gap-2.mb-4,
    .d-flex.gap-2,
    .d-flex.justify-content-between.align-items-center,
    .d-flex.align-items-center {
        flex-wrap: wrap !important;
        /* FIXED: Allow wrapping when congested */
        gap: clamp(0.5rem, 2vw, 0.75rem) !important;
        /* Consistent gap */
    }

    .d-flex.gap-2.mb-4.align-items-center .btn,
    .d-flex.gap-2.align-items-center .btn,
    .d-flex.justify-content-between.align-items-center .btn,
    .d-flex.gap-2 .btn {
        width: 100% !important;
        /* FIXED: Full width on mobile/tablet */
        flex: 1 1 100% !important;
        min-width: 100% !important;
        margin: 0 !important;
        margin-bottom: clamp(0.5rem, 2vw, 0.75rem) !important;
        /* Spacing between wrapped buttons */
    }

    /* FIXED: Last button in wrapped group - remove bottom margin */
    .d-flex.gap-2.mb-4.align-items-center .btn:last-child,
    .d-flex.gap-2.align-items-center .btn:last-child,
    .d-flex.gap-2 .btn:last-child {
        margin-bottom: 0 !important;
    }

    /* FIXED: Search bar in button groups - full width on mobile/tablet */
    .d-flex.gap-2 .input-group,
    .d-flex.gap-2.mb-4 .input-group,
    .d-flex.gap-2 .sw-search-bar,
    .d-flex.gap-2.mb-4 .sw-search-bar {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: clamp(0.5rem, 2vw, 0.75rem) !important;
        /* Spacing when wrapped */
        order: 999;
        /* Move to end when wrapping */
    }

    /* FIXED: Make action buttons full width on mobile */
    .d-flex.gap-2.mb-4.align-items-center>div:first-child,
    .d-flex.justify-content-between.align-items-center>div:first-child {
        width: 100% !important;
    }

    /* FIXED: Delete All Previous Groups button - prevent text overflow */
    #deleteAllPreviousGroups {
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        text-align: center !important;
        padding: clamp(0.5rem, 2vw, 0.6rem) clamp(0.75rem, 2vw, 1rem) !important;
        font-size: clamp(0.75rem, 2vw, 0.875rem) !important;
        line-height: 1.4 !important;
    }

    .input-group {
        width: 100% !important;
        max-width: 100% !important;
    }

    .input-group .form-control {
        font-size: 0.875rem;
    }

    /* ============================================
       TABLES - MOBILE SCROLLABLE
       ============================================ */

    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 15px;
    }

    .table {
        min-width: 600px;
        font-size: 0.875rem;
    }

    .table thead th {
        padding: 0.75rem 0.5rem;
        font-size: 0.75rem;
    }

    .table tbody td {
        padding: 0.75rem 0.5rem;
        white-space: nowrap;
    }

    /* Category badges in table */
    .table .category-badge {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }

    /* Action buttons in table */
    .table .btn {
        padding: 0.4rem 0.6rem;
        font-size: 0.75rem;
    }

    /* ============================================
       CARDS - MOBILE PADDING
       ============================================ */

    .card {
        padding: 1.25rem;
        margin-bottom: 1rem;
        border-radius: 15px;
    }

    .card h5 {
        font-size: 1.1rem;
    }

    /* ============================================
       CHARTS - MOBILE ADJUSTMENTS
       ============================================ */

    /* ROOT CAUSE FIX: Chart containers - proper sizing and positioning on mobile */
    .chart-container {
        padding: clamp(1rem, 3vw, 1.5rem) !important;
        margin-top: clamp(1rem, 2vw, 1.5rem) !important;
        margin-bottom: clamp(1rem, 2vw, 1.5rem) !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        /* ROOT CAUSE FIX: Allow chart to be visible */
        position: relative !important;
        display: block !important;
    }

    /* ROOT CAUSE FIX: Chart wrapper divs with position relative - explicit height */
    .chart-container>div[style*="position: relative"] {
        position: relative !important;
        width: 100% !important;
        height: 350px !important;
        min-height: 350px !important;
        max-height: 350px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    /* ROOT CAUSE FIX: Chart canvas - ensure visibility and proper sizing */
    .chart-container canvas {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        max-width: 100% !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        position: relative !important;
    }

    /* FIXED: Chart titles - better sizing on mobile */
    .chart-container h5,
    .chart-container .chart-title {
        font-size: clamp(1rem, 4vw, 1.25rem) !important;
        margin-bottom: clamp(1rem, 3vw, 1.5rem) !important;
    }

    /* Chart filter buttons - FIXED: Keep in one line */
    .chart-container .btn-group {
        flex-wrap: nowrap !important;
        /* FIXED: Keep buttons in one line */
        gap: 0 !important;
        /* FIXED: Remove gap to keep buttons connected */
        justify-content: stretch;
        width: 100% !important;
    }

    .chart-container .btn-group label.btn {
        font-size: clamp(0.7rem, 2vw, 0.75rem);
        padding: clamp(0.5rem, 2vw, 0.6rem) clamp(0.5rem, 2vw, 0.75rem);
        flex: 1 1 0 !important;
        /* FIXED: Equal width distribution */
        min-width: 0 !important;
        /* FIXED: Allow shrinking */
        white-space: nowrap !important;
        /* FIXED: Prevent text wrapping */
        margin: 0 !important;
    }

    /* ============================================
       QUICK ACTIONS - MOBILE GRID
       ============================================ */

    .quick-actions {
        grid-template-columns: 1fr;
        gap: clamp(0.75rem, 2vw, 1rem);
        margin-top: clamp(1rem, 3vw, 1.5rem);
    }

    .action-card {
        padding: clamp(1rem, 3vw, 1.5rem);
        margin-bottom: clamp(0.75rem, 2vw, 1rem);
    }

    .action-card i {
        font-size: clamp(1.5rem, 4vw, 2rem);
        margin-bottom: clamp(0.75rem, 2vw, 1rem);
    }

    .action-card h5 {
        font-size: clamp(0.9rem, 2.5vw, 1rem);
    }

    /* ============================================
       BUTTONS - TOUCH FRIENDLY - FIXED: Proper wrapping and spacing
       ============================================ */

    .btn {
        padding: clamp(0.6rem, 2vw, 0.75rem) clamp(1rem, 3vw, 1.5rem);
        font-size: clamp(0.8rem, 2vw, 0.875rem);
        min-height: clamp(40px, 8vw, 44px);
        /* Touch target size */
        min-width: clamp(40px, 8vw, 44px);
        white-space: nowrap;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .btn-sm {
        padding: clamp(0.4rem, 1.5vw, 0.5rem) clamp(0.75rem, 2vw, 1rem);
        font-size: clamp(0.75rem, 2vw, 0.8rem);
        min-height: clamp(36px, 7vw, 38px);
    }

    /* Button containers - FIXED: Allow wrapping */
    .d-flex.gap-2,
    .d-flex.gap-3,
    .btn-toolbar {
        flex-wrap: wrap !important;
        gap: clamp(0.5rem, 2vw, 0.75rem) !important;
    }

    /* Page header buttons - FIXED: Wrap properly */
    .page-header-fixed .btn,
    .page-header-fixed .d-flex .btn {
        flex: 1 1 auto;
        min-width: clamp(80px, 20vw, 120px);
        margin: clamp(0.25rem, 1vw, 0.5rem) 0;
    }

    /* ============================================
       FORMS - MOBILE OPTIMIZED
       ============================================ */

    .form-control,
    .form-select {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
        min-height: 44px;
        /* Touch target size */
    }

    .form-label {
        font-size: 0.875rem;
        margin-bottom: 0.5rem;
    }

    /* ============================================
       MODALS - MOBILE FULL SCREEN
       ============================================ */

    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }

    .modal-content {
        border-radius: 15px;
    }

    .modal-header {
        padding: 1rem;
    }

    .modal-body {
        padding: 1rem;
    }

    .modal-footer {
        padding: 1rem;
        flex-direction: column;
        gap: 0.5rem;
    }

    .modal-footer .btn {
        width: 100%;
        margin: 0;
    }

    /* ============================================
       GROUP CARDS - MOBILE STACK
       ============================================ */

    .group-card {
        margin-bottom: 1rem;
    }

    .col-md-4,
    .col-md-6,
    .col-lg-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* ============================================
       FOOTER - MOBILE
       ============================================ */

    /* Footer - FIXED: Responsive layout for mobile/tablet - Full width when nav closed */
    footer {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: clamp(1rem, 3vw, 1.5rem) clamp(0.75rem, 2vw, 1rem);
        font-size: clamp(0.8rem, 2vw, 0.875rem);
        text-align: center;
        position: relative;
        left: 0 !important;
        right: 0 !important;
        box-sizing: border-box;
    }

    footer .container {
        padding: 0 clamp(0.75rem, 2vw, 1rem);
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto;
    }

    footer .row {
        flex-direction: column;
        gap: clamp(0.75rem, 2vw, 1rem);
        text-align: center !important;
    }

    footer .col-md-6,
    footer .col-lg-3,
    footer .col-lg-6 {
        flex: 0 0 100%;
        max-width: 100%;
        text-align: center !important;
        margin-bottom: clamp(0.75rem, 2vw, 1rem);
    }

    footer .text-md-end {
        text-align: center !important;
    }

    footer hr {
        margin: clamp(1rem, 3vw, 1.5rem) 0;
    }

    footer ul {
        padding-left: 0;
        list-style: none;
    }

    footer ul li {
        margin-bottom: clamp(0.5rem, 1.5vw, 0.75rem);
    }

    footer a {
        font-size: clamp(0.8rem, 2vw, 0.875rem);
        padding: clamp(0.25rem, 1vw, 0.5rem) 0;
        display: inline-block;
    }

    /* Social media icons in footer - FIXED: Wrap properly */
    footer .d-flex.justify-content-center {
        flex-wrap: wrap;
        gap: clamp(0.5rem, 2vw, 0.75rem);
        justify-content: center;
    }

    footer .d-flex.justify-content-center a,
    footer .d-flex.justify-content-center button {
        flex: 0 0 auto;
        min-width: clamp(40px, 10vw, 50px);
        min-height: clamp(40px, 10vw, 50px);
        margin: 0;
    }

    /* Social links in landing page footer - FIXED: Wrap properly */
    .social-links {
        display: flex;
        flex-direction: column;
        gap: clamp(0.75rem, 2vw, 1rem);
    }

    .social-row {
        display: flex;
        flex-wrap: wrap !important;
        /* Allow icons to wrap */
        gap: clamp(0.5rem, 2vw, 0.75rem);
        justify-content: center;
    }

    .social-links a {
        flex: 0 0 auto;
        min-width: clamp(40px, 10vw, 50px);
        min-height: clamp(40px, 10vw, 50px);
        width: clamp(40px, 10vw, 50px);
        height: clamp(40px, 10vw, 50px);
    }

    /* ============================================
       NOTIFICATIONS - MOBILE
       ============================================ */

    /* ROOT CAUSE FIX: Notifications should appear on right side on mobile/tablet like desktop */
    .notification-container {
        top: 10px !important;
        right: 10px !important;
        left: auto !important;
        /* ROOT CAUSE FIX: Remove left positioning to allow right alignment */
        max-width: calc(100% - 20px);
        width: auto;
        /* Allow container to size based on content */
        min-width: 280px;
        /* Ensure minimum width for readability */
    }

    .notification {
        padding: 1rem;
        font-size: 0.875rem;
    }

    /* ============================================
       SEARCH AND FILTER - MOBILE
       ============================================ */

    .input-group {
        width: 100%;
    }

    /* Filter modal adjustments */
    .modal-body .row {
        margin: 0;
    }

    .modal-body .col-6 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 1rem;
    }

    

    /* Spacing adjustments */
    .mb-4 {
        margin-bottom: 1.5rem !important;
    }

    .mb-3 {
        margin-bottom: 1rem !important;
    }

    .mt-4 {
        margin-top: 1.5rem !important;
    }

    .mt-3 {
        margin-top: 1rem !important;
    }

    /* ============================================
       ACTION BUTTONS ROW - MOBILE
       ============================================ */

    .d-flex.gap-2.mb-4.align-items-center {
        flex-wrap: wrap;
    }

    .d-flex.gap-2.mb-4.align-items-center .btn {
        flex: 1;
        min-width: 120px;
    }

    /* ============================================
       MONTH SUMMARY CARD - MOBILE
       ============================================ */

    #monthSummaryCard .row {
        margin: 0;
    }

    #monthSummaryCard .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
        margin-bottom: 1rem;
        padding: 0.5rem;
    }

    #monthSummaryCard h2 {
        font-size: 1.25rem;
    }

    #monthSummaryCard h6 {
        font-size: 0.875rem;
    }
}

/* ============================================
   SMALL MOBILE STYLES (max-width: 480px)
   ============================================ */

@media (max-width: 480px) {
    .main-content {
        padding: 0.75rem;
    }

    .card,
    .stat-card,
    .stats-card {
        padding: 1rem;
    }

    .stat-card h2,
    .stat-card h3,
    .stats-card h2,
    .stats-card h3 {
        font-size: 1.1rem !important;
    }

    .btn {
        padding: 0.6rem 1.25rem;
        font-size: 0.8rem;
    }

    .table {
        font-size: 0.8rem;
        min-width: 550px;
    }

    .table thead th {
        padding: 0.5rem 0.4rem;
        font-size: 0.7rem;
    }

    .table tbody td {
        padding: 0.5rem 0.4rem;
    }

    .chart-container {
        padding: 1rem;
    }

    /* ROOT CAUSE FIX: Chart containers for landscape mobile */
    .chart-container {
        padding: 1rem !important;
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }

    .chart-container>div {
        height: 300px !important;
        min-height: 300px !important;
        max-height: 300px !important;
    }

    .chart-container canvas {
        height: 100% !important;
        max-height: 100% !important;
    }

    #monthSummaryCard .col-md-3 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ============================================
   MOBILE LANDSCAPE OPTIMIZATIONS (max-width: 767px and landscape)
   ============================================ */

@media (max-width: 767px) and (orientation: landscape) {

    /* Sidebar - slightly narrower for landscape */
    .sidebar {
        width: 240px !important;
        min-width: 240px !important;
        max-width: 240px !important;
    }

    .sidebar.show {
        width: 240px !important;
        min-width: 240px !important;
        max-width: 240px !important;
    }

    /* Main content - optimize horizontal space */
    .main-content {
        padding: clamp(0.75rem, 2vw, 1rem) !important;
        padding-top: calc(clamp(0.75rem, 2vw, 1rem) + clamp(56px, 8vw, 64px)) !important;
        padding-left: 4% !important;
        padding-right: 4% !important;
    }

    /* Stat cards - 2 columns for better space usage */
    .main-content .row>.col-md-3,
    .main-content .row>.col-md-4,
    .main-content .row>.col-md-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding-left: clamp(0.375rem, 1.5vw, 0.5rem) !important;
        padding-right: clamp(0.375rem, 1.5vw, 0.5rem) !important;
    }

    /* Stat card padding - compact for landscape */
    .stat-card,
    .stats-card,
    .card {
        padding: clamp(0.875rem, 2.5vw, 1rem) !important;
    }

    /* Quick actions - 3 columns in landscape */
    .quick-actions {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: clamp(0.75rem, 2vw, 1rem) !important;
    }

    /* Chart containers - shorter for landscape to fit viewport */
    .chart-container {
        padding: clamp(0.875rem, 2.5vw, 1rem) !important;
        margin-top: clamp(0.75rem, 2vw, 1rem) !important;
        margin-bottom: clamp(0.75rem, 2vw, 1rem) !important;
    }

    .chart-container>div[style*="position: relative"] {
        height: 280px !important;
        min-height: 280px !important;
        max-height: 280px !important;
    }

    /* Page header - compact for landscape */
    .page-header-fixed {
        padding-top: clamp(0.5rem, 1.5vw, 0.75rem) !important;
        padding-bottom: clamp(0.5rem, 1.5vw, 0.75rem) !important;
        min-height: clamp(50px, 8vw, 56px) !important;
        height: auto !important;
    }

    .page-header-fixed h2 {
        font-size: clamp(0.95rem, 2.8vw, 1.1rem) !important;
    }

    /* Typography - slightly smaller for landscape */
    .stats-card h3,
    .stat-card h3 {
        font-size: clamp(1.1rem, 3vw, 1.25rem) !important;
    }

    .stats-card h6,
    .stat-card h6 {
        font-size: clamp(0.8rem, 2vw, 0.875rem) !important;
    }

    /* Buttons - compact but still tappable */
    .btn {
        padding: clamp(0.5rem, 1.8vw, 0.65rem) clamp(0.875rem, 2.5vw, 1.25rem) !important;
        font-size: clamp(0.75rem, 2vw, 0.85rem) !important;
        min-height: 40px !important;
    }

    /* Footer - compact */
    footer {
        padding: clamp(0.75rem, 2vw, 1rem) clamp(0.5rem, 1.5vw, 0.75rem) !important;
        font-size: clamp(0.75rem, 2vw, 0.825rem) !important;
    }
}

/* ============================================
   ADDITIONAL MOBILE FIXES - Prevent Overlapping
   ============================================ */

@media (max-width: 767px) {

    /* Prevent horizontal scroll - overflow-x:hidden on body removed (breaks scroll); html-level rule in touch-fix.css covers this */
    body {
        max-width: 100%;
    }

    /* Page header fixes - FIXED: Allow wrapping and proper spacing, start from left edge */
    .page-header-fixed {
        position: fixed;
        top: 0;
        left: 0 !important;
        right: 0;
        padding-top: clamp(0.75rem, 2vw, 1rem) !important;
        padding-bottom: clamp(0.75rem, 2vw, 1rem) !important;
        padding-left: 5% !important;
        /* ROOT CAUSE FIX: Match 90% width with main-content on mobile */
        padding-right: 5% !important;
        /* ROOT CAUSE FIX: Match 90% width with main-content on mobile */
        z-index: 1000 !important;
        /* FIXED: Higher z-index to stay above buttons */
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        /* FIXED: No left margin */
        display: flex;
        align-items: center;
        gap: clamp(0.5rem, 2vw, 0.75rem);
        justify-content: flex-start;
        flex-wrap: wrap;
        /* Allow header content to wrap */
        box-sizing: border-box;
    }

    /* FIXED: Hide header actions in header on mobile - but allow JavaScript to control */
    .page-header-fixed .header-actions {
        display: none !important;
    }

    /* FIXED: Ensure header actions are visible on desktop */
    @media (min-width: 1025px) {
        .page-header-fixed .header-actions {
            display: flex !important;
        }
    }

    /* FIXED: Mobile container for header actions below header - only show on mobile */
    .header-actions-mobile {
        display: flex !important;
        flex-direction: column;
        gap: clamp(0.5rem, 2vw, 0.75rem);
        padding-top: clamp(0.5rem, 1.5vw, 0.75rem) !important;
        /* FIXED: Reduced top padding to minimize gap from header */
        padding-bottom: clamp(0.5rem, 1.5vw, 0.75rem) !important;
        /* FIXED: Reduced bottom padding to minimize gap */
        padding-left: 0 !important;
        /* ROOT CAUSE FIX: No left padding - main-content already has 5% */
        padding-right: 0 !important;
        /* ROOT CAUSE FIX: No right padding - main-content already has 5% */
        background: white;
        border-bottom: 1px solid #e0e0e0;
        margin-top: clamp(56px, 10vw, 64px);
        /* Match header height - will be overridden in mobile section */
        margin-bottom: clamp(0.75rem, 2vw, 1rem) !important;
        /* FIXED: Match tile gap spacing */
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        position: relative;
        /* Ensure proper positioning */
        z-index: 998 !important;
        /* FIXED: Lower than header but above content to prevent going behind header */
    }


    /* FIXED: Ensure buttons inside mobile container have proper spacing */
    .header-actions-mobile .btn:last-child {
        margin-bottom: 0 !important;
        /* Remove bottom margin from last button */
    }

    /* FIXED: Hide mobile container on desktop */
    @media (min-width: 1025px) {
        .header-actions-mobile {
            display: none !important;
        }
    }

    /* FIXED: Buttons break to separate lines and cover full width - match tile width */
    .header-actions-mobile .btn,
    .header-actions-mobile .d-flex .btn,
    .header-actions-mobile .export-buttons-container .btn {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        flex: 1 1 100% !important;
        display: block !important;
        box-sizing: border-box !important;
    }

    /* FIXED: Export buttons container - stack vertically */
    .header-actions-mobile .d-flex,
    .header-actions-mobile .export-buttons-container,
    .header-actions-mobile .d-flex.flex-row {
        flex-direction: column !important;
        gap: clamp(0.5rem, 2vw, 0.75rem) !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* FIXED: Match button width to tile width - ensure same as container-fluid */
    .header-actions-mobile {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* FIXED: Ensure buttons match container-fluid padding (same as tiles) - 90% width */
    .main-content .header-actions-mobile {
        padding-left: 0 !important;
        /* ROOT CAUSE FIX: No left padding - main-content already has 5% */
        padding-right: 0 !important;
        /* ROOT CAUSE FIX: No right padding - main-content already has 5% */
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* FIXED: Minimal spacing between mobile container and tiles - already handled above in mobile/tablet sections */

    .page-header-fixed h2 {
        font-size: clamp(1rem, 3vw, 1.1rem);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1 1 auto;
        min-width: 0;
        /* Allow shrinking */
        margin: 0;
        margin-left: 0 !important;
        display: flex;
        align-items: center;
        gap: clamp(0.25rem, 1vw, 0.5rem);
    }

    /* Page header buttons - FIXED: Wrap and space properly */
    .page-header-fixed .btn-group,
    .page-header-fixed .d-flex {
        flex-wrap: wrap;
        gap: clamp(0.5rem, 2vw, 0.75rem);
    }

    .page-header-fixed .btn {
        flex: 1 1 auto;
        min-width: clamp(80px, 20vw, 120px);
        margin: clamp(0.25rem, 1vw, 0.5rem) 0;
    }

    /* Navigation buttons in header - mobile */
    .page-header-fixed .mobile-menu-btn {
        flex-shrink: 0;
        order: -1;
        display: flex !important;
        visibility: visible;
        opacity: 1;
    }

    .page-header-fixed .desktop-nav-toggle {
        display: none !important;
        visibility: hidden;
    }

    /* Gap handled by dashboard-v2.css padding-top */
    .main-content {
        margin-top: 0;
    }

    /* Fix container overflow */
    .container-fluid {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Badge adjustments */
    .badge {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }

    /* Action buttons in cards */
    .card .btn-group {
        flex-direction: column;
        width: 100%;
    }

    .card .btn-group .btn {
        width: 100%;
        margin-bottom: 0.5rem;
        border-radius: 10px !important;
    }

    /* Group card buttons */
    .group-card .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .group-card .d-flex.gap-2 {
        flex-direction: column;
        gap: 0.5rem !important;
    }

    /* Month selector adjustments */
    #monthSelector,
    #yearSelector {
        width: 100%;
        max-width: 100%;
        margin-bottom: 0.5rem;
    }

    /* Filter modal adjustments */
    .modal-dialog {
        max-width: calc(100% - 1rem);
        margin: 0.5rem auto;
    }

    /* Ensure no text overflow */
    .card-title,
    .card h5,
    .card h6 {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Fix table responsive wrapper */
    .table-responsive {
        margin: 0 -0.75rem;
        padding: 0 0.75rem;
    }

    /* Chart responsive fixes */
    .chart-container {
        overflow-x: auto;
    }

    .chart-container canvas {
        max-width: 100%;
        height: auto;
    }

    /* Profile avatar mobile */
    .profile-avatar {
        width: 100px;
        height: 100px;
        font-size: 2.5rem;
    }

    /* Settings form adjustments */
    .form-row {
        flex-direction: column;
    }

    .form-row .col-md-6,
    .form-row .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 1rem;
    }

    /* Notification panel styles → see notifications.css */

    

    /* ============================================
       BUTTON WRAPPING - MOBILE & TABLET
       ============================================ */

    /* FIXED: All button groups wrap when congested */
    .d-flex.gap-2,
    .d-flex.gap-2.mb-4,
    .d-flex.justify-content-between,
    .d-flex.align-items-center,
    .btn-group,
    .modal-footer,
    #viewGroupFooter {
        flex-wrap: wrap !important;
        gap: clamp(0.5rem, 2vw, 0.75rem) !important;
    }

    /* FIXED: Buttons in groups - full width on mobile when wrapping */
    .d-flex.gap-2 .btn,
    .d-flex.gap-2.mb-4 .btn,
    .d-flex.justify-content-between .btn,
    .d-flex.align-items-center .btn {
        flex: 1 1 100% !important;
        min-width: 100% !important;
        width: 100% !important;
        margin-bottom: clamp(0.5rem, 2vw, 0.75rem) !important;
    }

    .d-flex.gap-2 .btn:last-child,
    .d-flex.gap-2.mb-4 .btn:last-child {
        margin-bottom: 0 !important;
    }

    /* FIXED: Search bar in button groups */
    .d-flex.gap-2 .input-group,
    .d-flex.gap-2.mb-4 .input-group,
    .d-flex.gap-2 .sw-search-bar,
    .d-flex.gap-2.mb-4 .sw-search-bar {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: clamp(0.5rem, 2vw, 0.75rem) !important;
        order: 999;
    }

    /* FIXED: Modal footer buttons */
    .modal-footer .btn,
    .modal-footer .d-flex .btn {
        width: 100% !important;
        margin-bottom: 0.5rem !important;
    }

    .modal-footer .btn:last-child {
        margin-bottom: 0 !important;
    }

    /* FIXED: View group modal footer */
    #viewGroupFooter {
        flex-direction: column !important;
        flex-wrap: wrap !important;
    }

    #viewGroupFooter .btn {
        width: 100% !important;
        margin-bottom: 0.5rem !important;
    }

    #viewGroupFooter .btn:last-child {
        margin-bottom: 0 !important;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {

    .sidebar,
    .navbar,
    .btn,
    .notification-container,
    .modal {
        display: none !important;
    }

    .main-content {
        margin-left: 0 !important;
        padding: 0 !important;
    }

    .card {
        page-break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }
}

/* ============================================
   ROOT CAUSE FIX: 90% Width for Tiles and Boxes on Mobile/Tablet
   Excludes: landing page, signup page, login page
   ============================================ */

@media (max-width: 1024px) {

    /* ROOT CAUSE FIX: Apply 90% width to container-fluid on tablet - only on pages with .main-content (excludes landing/signup/login) */
    .main-content {
        padding-left: 5% !important;
        padding-right: 5% !important;
    }

    .main-content .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* ROOT CAUSE FIX: Ensure all cards, tiles, boxes fill container on tablet */
    .main-content .card,
    .main-content .stats-card,
    .main-content .stat-card,
    .main-content .tile,
    .main-content .box,
    .main-content .expense-table-card,
    .main-content #expenseTableCard {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* ROOT CAUSE FIX: Ensure stat cards and cards have matching padding for alignment */
    .main-content .stat-card,
    .main-content .stats-card,
    .main-content .card {
        padding: clamp(1rem, 3vw, 1.25rem) !important;
    }

    /* ROOT CAUSE FIX: Ensure table-responsive containers align with stat card content on tablet */
    /* Cards have padding: clamp(1rem, 3vw, 1.25rem), so table-responsive should have negative margins to align with stat card content */
    .main-content .card .table-responsive {
        margin-left: calc(-1 * clamp(1rem, 3vw, 1.25rem)) !important;
        margin-right: calc(-1 * clamp(1rem, 3vw, 1.25rem)) !important;
        width: calc(100% + clamp(2rem, 6vw, 2.5rem)) !important;
        max-width: calc(100% + clamp(2rem, 6vw, 2.5rem)) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* ROOT CAUSE FIX: Ensure tables inside cards align with stat card content on tablet */
    .main-content .card .table,
    .main-content .table-responsive .table {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* ROOT CAUSE FIX: Ensure table headers align with stat card content on tablet */
    /* Stat cards have padding: clamp(1rem, 3vw, 1.25rem), so table headers should match */
    .main-content .card .table thead th {
        padding-left: clamp(1rem, 3vw, 1.25rem) !important;
        padding-right: clamp(1rem, 3vw, 1.25rem) !important;
    }

    /* ROOT CAUSE FIX: Ensure table body cells align with stat card content on tablet */
    /* Match stat card padding so content aligns */
    .main-content .card .table tbody td {
        padding-left: clamp(1rem, 3vw, 1.25rem) !important;
        padding-right: clamp(1rem, 3vw, 1.25rem) !important;
    }

    /* ROOT CAUSE FIX: Ensure rows respect 90% container width on tablet */
    .main-content .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* ROOT CAUSE FIX: Ensure columns have proper padding on tablet */
    .main-content .row>[class*="col-"] {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* ROOT CAUSE FIX: Ensure quickStats and other containers are 90% width on tablet */
    .main-content #quickStats,
    .main-content .quick-stats,
    .main-content .stats-container {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 767px) {

    /* ROOT CAUSE FIX: Apply 90% width to main-content and container-fluid on mobile - only on pages with .main-content (excludes landing/signup/login) */
    .main-content {
        padding-left: 5% !important;
        padding-right: 5% !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .main-content .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* ROOT CAUSE FIX: Ensure all cards, tiles, boxes fill container on mobile */
    .main-content .card,
    .main-content .stats-card,
    .main-content .stat-card,
    .main-content .tile,
    .main-content .box,
    .main-content .expense-table-card,
    .main-content #expenseTableCard {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* ROOT CAUSE FIX: Ensure rows respect 90% container width on mobile */
    .main-content .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* ROOT CAUSE FIX: Ensure columns have proper padding on mobile */
    .main-content .row>[class*="col-"] {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    /* ROOT CAUSE FIX: Ensure quickStats and other containers are 90% width on mobile */
    .main-content #quickStats,
    .main-content .quick-stats,
    .main-content .stats-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* ROOT CAUSE FIX: Ensure chart containers are 90% width on mobile */
    .main-content .chart-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* ROOT CAUSE FIX: Ensure expense table card is 90% width on mobile */
    .main-content .expense-table-card,
    .main-content #expenseTableCard {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* ROOT CAUSE FIX: Ensure stat cards and cards have matching padding for alignment on mobile */
    .main-content .stat-card,
    .main-content .stats-card,
    .main-content .card {
        padding: 1.25rem !important;
    }

    /* ROOT CAUSE FIX: Ensure table-responsive containers align with stat card content on mobile */
    /* Cards have padding: 1.25rem, so table-responsive should have negative margins to align with stat card content */
    .main-content .card .table-responsive {
        margin-left: -1.25rem !important;
        margin-right: -1.25rem !important;
        width: calc(100% + 2.5rem) !important;
        max-width: calc(100% + 2.5rem) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* ROOT CAUSE FIX: Ensure tables inside cards align with stat card content on mobile */
    .main-content .card .table,
    .main-content .table-responsive .table {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* ROOT CAUSE FIX: Ensure table headers align with stat card content on mobile */
    /* Stat cards have padding: 1.25rem, so table headers should match */
    .main-content .card .table thead th {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }

    /* ROOT CAUSE FIX: Ensure table body cells align with stat card content on mobile */
    /* Match stat card padding so content aligns */
    .main-content .card .table tbody td {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }

    /* ROOT CAUSE FIX: Ensure group cards are 90% width on mobile */
    .main-content .group-card {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ============================================
   SETTINGS PAGE RESPONSIVE OPTIMIZATIONS
   ============================================ */

/* Settings page - Tablet view (768px - 1024px) */
@media (max-width: 1024px) {

    /* Settings cards - better sizing for tablets */
    .settings-section .card {
        padding: clamp(1.5rem, 3vw, 2rem) !important;
        margin-bottom: clamp(1.25rem, 2.5vw, 1.5rem) !important;
    }

    .settings-section .card-body {
        padding: clamp(1.25rem, 2.5vw, 1.75rem) !important;
    }

    /* Form elements - bigger touch targets */
    .settings-section .form-control,
    .settings-section .form-select {
        min-height: 48px !important;
        font-size: clamp(1rem, 2vw, 1.1rem) !important;
        padding: clamp(0.75rem, 1.5vw, 1rem) !important;
    }

    /* Labels - better readability */
    .settings-section .form-label {
        font-size: clamp(0.95rem, 1.8vw, 1.05rem) !important;
        margin-bottom: clamp(0.5rem, 1vw, 0.75rem) !important;
    }

    /* Buttons - bigger for easier tapping */
    .settings-section .btn {
        min-height: 48px !important;
        font-size: clamp(1rem, 2vw, 1.1rem) !important;
        padding: clamp(0.75rem, 1.5vw, 1rem) clamp(1.25rem, 2.5vw, 1.75rem) !important;
    }
}

/* Settings page - Mobile view (max-width: 767px) */
@media (max-width: 767px) {

    /* Main content - reduce padding for more space */
    body:has(.settings-section) .main-content {
        padding: clamp(1.25rem, 3vw, 1.5rem) clamp(0.75rem, 2vw, 1rem) !important;
        padding-top: calc(clamp(1.25rem, 3vw, 1.5rem) + 64px) !important;
    }

    /* Settings cards - maximize screen space */
    .settings-section .card {
        padding: clamp(1.25rem, 3vw, 1.5rem) !important;
        margin-bottom: clamp(1rem, 2.5vw, 1.25rem) !important;
        border-radius: clamp(12px, 2.5vw, 16px) !important;
    }

    .settings-section .card-body {
        padding: clamp(1rem, 2.5vw, 1.25rem) !important;
    }

    /* Section headings - better hierarchy */
    .settings-section h3,
    .settings-section h4 {
        font-size: clamp(1.25rem, 4vw, 1.5rem) !important;
        margin-bottom: clamp(1rem, 2.5vw, 1.25rem) !important;
    }

    .settings-section h5 {
        font-size: clamp(1.1rem, 3.5vw, 1.3rem) !important;
        margin-bottom: clamp(0.75rem, 2vw, 1rem) !important;
    }

    /* Form elements - mobile optimized */
    .settings-section .form-control,
    .settings-section .form-select {
        width: 100% !important;
        min-height: 50px !important;
        font-size: clamp(1rem, 3.5vw, 1.125rem) !important;
        padding: clamp(0.75rem, 2vw, 1rem) clamp(1rem, 2.5vw, 1.25rem) !important;
        border-radius: clamp(8px, 2vw, 12px) !important;
    }

    /* Textarea - bigger for easier typing */
    .settings-section textarea.form-control {
        min-height: 120px !important;
    }

    /* Labels - clear and readable */
    .settings-section .form-label {
        font-size: clamp(1rem, 3vw, 1.125rem) !important;
        font-weight: 600 !important;
        margin-bottom: clamp(0.5rem, 1.5vw, 0.75rem) !important;
        display: block !important;
    }

    /* Buttons - large touch targets */
    .settings-section .btn {
        width: 100% !important;
        min-height: 50px !important;
        font-size: clamp(1rem, 3.5vw, 1.125rem) !important;
        padding: clamp(0.875rem, 2.5vw, 1.125rem) clamp(1.25rem, 3vw, 1.5rem) !important;
        border-radius: clamp(10px, 2.5vw, 14px) !important;
        margin-bottom: clamp(0.75rem, 2vw, 1rem) !important;
    }

    /* Profile avatar section - better spacing */
    .settings-section .profile-avatar-section {
        padding: clamp(1.25rem, 3vw, 1.5rem) !important;
        margin-bottom: clamp(1.25rem, 3vw, 1.5rem) !important;
    }

    /* Avatar upload area - bigger */
    .settings-section #profileAvatar {
        width: clamp(100px, 25vw, 140px) !important;
        height: clamp(100px, 25vw, 140px) !important;
        font-size: clamp(2.5rem, 8vw, 3.5rem) !important;
    }

    /* Info text - readable */
    .settings-section .text-muted,
    .settings-section small {
        font-size: clamp(0.875rem, 2.5vw, 1rem) !important;
    }

    /* Alert boxes - better visibility */
    .settings-section .alert {
        padding: clamp(1rem, 2.5vw, 1.25rem) !important;
        font-size: clamp(0.95rem, 2.8vw, 1.05rem) !important;
        margin-bottom: clamp(1rem, 2.5vw, 1.25rem) !important;
        border-radius: clamp(8px, 2vw, 12px) !important;
    }

    /* Input groups - stack on mobile */
    .settings-section .input-group {
        flex-wrap: wrap !important;
    }

    .settings-section .input-group .btn {
        width: 100% !important;
        margin-top: clamp(0.5rem, 1.5vw, 0.75rem) !important;
    }

    /* Row spacing */
    .settings-section .row {
        margin-bottom: clamp(0.75rem, 2vw, 1rem) !important;
    }

    /* Column spacing - full width on mobile */
    .settings-section .col-md-6,
    .settings-section .col-md-4,
    .settings-section .col-md-8 {
        width: 100% !important;
        margin-bottom: clamp(0.75rem, 2vw, 1rem) !important;
    }
}

/* Settings page - Mobile portrait specific */
@media (max-width: 767px) and (orientation: portrait) {

    /* Maximize vertical space */
    .settings-section .card {
        padding: clamp(1rem, 2.5vw, 1.25rem) clamp(0.875rem, 2vw, 1rem) !important;
    }

    /* Avatar smaller in portrait for more content space */
    .settings-section #profileAvatar {
        width: clamp(90px, 22vw, 120px) !important;
        height: clamp(90px, 22vw, 120px) !important;
    }
}

/* Settings page - Mobile landscape specific */
@media (max-width: 767px) and (orientation: landscape) {

    /* Reduce vertical spacing in landscape */
    .settings-section .card {
        padding: clamp(1rem, 2vh, 1.25rem) clamp(1.25rem, 3vw, 1.5rem) !important;
        margin-bottom: clamp(0.75rem, 2vh, 1rem) !important;
    }

    .settings-section .form-control,
    .settings-section .form-select {
        min-height: 44px !important;
    }

    .settings-section .btn {
        min-height: 44px !important;
        padding: clamp(0.65rem, 1.5vh, 0.85rem) clamp(1.25rem, 3vw, 1.5rem) !important;
    }

    /* Avatar smaller in landscape */
    .settings-section #profileAvatar {
        width: clamp(80px, 15vh, 100px) !important;
        height: clamp(80px, 15vh, 100px) !important;
    }
}

/* ============================================
   LOGIN/SIGNUP PAGE - TABLET PORTRAIT OPTIMIZATIONS
   ============================================ */

@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {

    /* Auth container - better sizing */
    .auth-container,
    .login-container,
    .signup-container {
        max-width: 85% !important;
        padding: clamp(2rem, 4vw, 2.5rem) !important;
        margin: clamp(2rem, 4vw, 3rem) auto !important;
    }

    /* Auth headings */
    .auth-container h1,
    .login-container h1,
    .signup-container h1 {
        font-size: clamp(2rem, 4vw, 2.5rem) !important;
    }

    /* Form inputs - large touch targets */
    .auth-container .form-control,
    .login-container .form-control,
    .signup-container .form-control {
        min-height: 56px !important;
        font-size: clamp(1.05rem, 2.1vw, 1.2rem) !important;
        padding: clamp(1rem, 2vw, 1.25rem) !important;
    }

    /* Buttons - prominent */
    .auth-container .btn,
    .login-container .btn,
    .signup-container .btn {
        min-height: 56px !important;
        font-size: clamp(1.125rem, 2.25vw, 1.3rem) !important;
        padding: clamp(1rem, 2vw, 1.25rem) clamp(1.5rem, 3vw, 2rem) !important;
    }

    /* Labels - readable */
    .auth-container .form-label,
    .login-container .form-label,
    .signup-container .form-label {
        font-size: clamp(1.05rem, 2.1vw, 1.2rem) !important;
        font-weight: 600 !important;
    }
}