/*
 * ADAPTIVE DESKTOP-MOBILE CSS - KAKATA ANALYSIS
 * =============================================
 * 
 * Desktop: Normal responsive behavior
 * Mobile: Force desktop layout with zoom capability
 */

/* =============================================================================
   MOBILE DETECTION AND DESKTOP FORCING
   ============================================================================= */

/* Apply desktop-on-mobile for small screens */
@media (max-width: 991px) {
    
    /* Force desktop layout on mobile */
    body {
        min-width: 1400px !important;
        overflow-x: auto !important;
        width: 1400px !important;
    }

    /* Prevent mobile-responsive behaviors */
    * {
        -webkit-text-size-adjust: none !important;
        -moz-text-size-adjust: none !important;
        -ms-text-size-adjust: none !important;
        text-size-adjust: none !important;
    }

    /* Force desktop container widths */
    .container,
    .container-fluid {
        min-width: 1400px !important;
        max-width: none !important;
    }

    /* =============================================================================
       SIDEBAR DESKTOP BEHAVIOR ON MOBILE ONLY
       ============================================================================= */

    /* Ensure sidebar stays visible like desktop */
    #td-sidebar {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        width: 280px !important;
        height: 100vh !important;
        z-index: 1040 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
    }

    /* Content area maintains desktop layout */
    .content-area {
        margin-left: 280px !important;
        width: calc(100% - 280px) !important;
        min-width: 1120px !important;
    }

    /* =============================================================================
       CHARTS DESKTOP BEHAVIOR ON MOBILE ONLY
       ============================================================================= */

    /* Charts maintain desktop grid layout */
    .charts-container {
        width: 100% !important;
        min-width: 1120px !important;
        overflow-x: auto !important;
    }

    .charts-container .row {
        min-width: 1120px !important;
        flex-wrap: nowrap !important;
    }

    .charts-container .col-md-6,
    .charts-container .col-lg-4,
    .charts-container .col-xl-3 {
        flex: 0 0 auto !important;
        min-width: 460px !important;
    }

    /* Chart descriptions maintain desktop size */
    .chart-description {
        min-width: 440px !important;
        min-height: 400px !important;
    }

    /* Plotly charts maintain desktop dimensions */
    .js-plotly-plot {
        min-width: 440px !important;
        min-height: 400px !important;
    }

    /* =============================================================================
       NAVIGATION DESKTOP BEHAVIOR ON MOBILE ONLY
       ============================================================================= */

    /* Nav tabs maintain desktop appearance */
    .nav-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow: visible !important;
        white-space: normal !important;
    }

    .nav-tabs .nav-item {
        flex-shrink: 0 !important;
    }

    .nav-tabs .nav-link {
        min-width: auto !important;
        white-space: nowrap !important;
    }

    /* =============================================================================
       HEADERS AND LAYOUT ON MOBILE ONLY
       ============================================================================= */

    .page-header {
        min-width: 1120px !important;
        padding: 40px 0 !important;
    }

    .page-header h1 {
        font-size: 2.5rem !important;
    }

    .breadcrumb-container {
        min-width: 1120px !important;
    }

    /* =============================================================================
       SCROLLING OPTIMIZATIONS FOR MOBILE
       ============================================================================= */

    /* Smooth scrolling */
    html {
        scroll-behavior: smooth !important;
    }

    /* Custom scroll bars for mobile */
    ::-webkit-scrollbar {
        width: 12px;
        height: 12px;
    }

    ::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 6px;
    }

    ::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 6px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: #a1a1a1;
    }

    /* =============================================================================
       TOUCH OPTIMIZATIONS FOR MOBILE
       ============================================================================= */

    /* Allow zoom and pan */
    * {
        touch-action: manipulation !important;
        -webkit-touch-callout: default !important;
        -webkit-user-select: text !important;
        user-select: text !important;
    }

    /* GPU acceleration for smooth performance */
    .charts-container,
    #td-sidebar,
    .content-area {
        -webkit-transform: translateZ(0) !important;
        transform: translateZ(0) !important;
        will-change: scroll-position !important;
    }

    /* =============================================================================
       DISABLE BOOTSTRAP RESPONSIVE ON MOBILE
       ============================================================================= */

    /* Force desktop grid even on mobile */
    .col-lg-4,
    .col-md-6,
    .col-sm-12 {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
    }

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

    /* Ensure all desktop elements remain visible */
    .d-none.d-md-block,
    .d-none.d-lg-block,
    .d-none.d-xl-block {
        display: block !important;
    }

    .d-block.d-md-none,
    .d-block.d-lg-none {
        display: none !important;
    }
}

/* =============================================================================
   DESKTOP NORMAL BEHAVIOR (992px and above)
   ============================================================================= */

@media (min-width: 992px) {
    /* Let desktop behave normally - no overrides */
    html {
        overflow-x: hidden !important;
    }

    body {
        min-width: auto !important;
    }

    .container,
    .container-fluid {
        min-width: auto !important;
        max-width: 1320px !important; /* Bootstrap default */
    }

    /* Desktop responsive sidebar behavior - let existing CSS handle it */

    /* Desktop responsive charts */
    .charts-container {
        width: auto !important;
        min-width: auto !important;
        overflow-x: visible !important;
    }

    .charts-container .row {
        min-width: auto !important;
        flex-wrap: wrap !important;
    }

    .charts-container .col-md-6,
    .charts-container .col-lg-4,
    .charts-container .col-xl-3 {
        flex: initial !important;
        min-width: auto !important;
    }

    .chart-description {
        min-width: auto !important;
        min-height: auto !important;
    }

    .js-plotly-plot {
        min-width: auto !important;
        min-height: auto !important;
    }

    /* Desktop navigation behavior */
    .nav-tabs {
        display: flex !important;
        flex-wrap: wrap !important;
        overflow: visible !important;
    }

    /* Desktop headers */
    .page-header {
        min-width: auto !important;
        padding: 40px 0 !important;
    }

    .breadcrumb-container {
        min-width: auto !important;
    }
}

/* =============================================================================
   TABLET INTERMEDIATE BEHAVIOR
   ============================================================================= */

@media (min-width: 768px) and (max-width: 991px) {
    /* Tablet gets desktop layout too if screen is wide enough */
    body.force-desktop {
        min-width: 1400px !important;
    }
    
    /* Otherwise normal tablet responsive */
}

/* =============================================================================
   UTILITY CLASSES
   ============================================================================= */

/* GLOBAL FORCE DESKTOP CLASS - Works on any screen size */
body.force-desktop-layout {
    min-width: 1400px !important;
    overflow-x: auto !important;
    width: 1400px !important;
}

body.force-desktop-layout .container,
body.force-desktop-layout .container-fluid {
    min-width: 1400px !important;
    max-width: none !important;
}

body.force-desktop-layout #td-sidebar {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 280px !important;
    height: 100vh !important;
    z-index: 1040 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
}

body.force-desktop-layout .content-area {
    margin-left: 280px !important;
    width: calc(100% - 280px) !important;
    min-width: 1120px !important;
}

body.force-desktop-layout .charts-container {
    width: 100% !important;
    min-width: 1120px !important;
    overflow-x: auto !important;
}

body.force-desktop-layout .charts-container .row {
    min-width: 1120px !important;
    flex-wrap: nowrap !important;
}

body.force-desktop-layout .chart-description {
    min-width: 440px !important;
    min-height: 400px !important;
}

/* Normal responsive class */
body.responsive-layout {
    min-width: auto !important;
    width: auto !important;
}

body.responsive-layout .container {
    min-width: auto !important;
    max-width: 1320px !important;
}