/* PWA Responsive Enhancements for Kart Metrics */
/* Mobile-first optimizations - incremental and safe */

/* ===== GLOBAL FOUNDATION ===== */
/* Ensure box-sizing for all elements */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Ensure viewport meta tag is respected */
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

/* ===== MOBILE BASE (max-width: 768px) ===== */
@media (max-width: 768px) {
    /* Prevent horizontal scroll */
    body, html {
        overflow-x: hidden;
        max-width: 100vw;
        width: 100%;
    }
    
    /* Better spacing for mobile */
    body {
        padding: 0;
        margin: 0;
    }
    
    /* Main page containers - add padding */
    div[style*="maxWidth"] {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    /* Prevent fixed widths from causing overflow */
    * {
        max-width: 100%;
    }
    
    /* Make ALL grid layouts single column on mobile */
    [style*="gridTemplateColumns"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    /* Special case: 4-column grids become 2 columns on tablet, 1 on mobile */
    [style*="gridTemplateColumns"][style*="1fr 1fr 1fr 1fr"] {
        grid-template-columns: 1fr 1fr !important;
    }
    
    /* Special case: 2fr 1fr grids become 1 column */
    [style*="gridTemplateColumns"][style*="2fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    
    /* Ensure tables are scrollable horizontally */
    .dash-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        display: block;
    }
    
    /* Table wrapper for horizontal scroll */
    .dash-table-container .dash-spreadsheet-container {
        min-width: 100%;
    }
    
    /* Improve touch targets */
    button, a, input[type="button"], input[type="submit"], 
    .btn, [role="button"], .dash-table-container .row {
        min-height: 44px;
    }
    
    /* Button spacing - ensure buttons don't stick together */
    button + button, .btn + .btn {
        margin-left: 8px;
    }
    
    /* Inline button containers - better spacing on mobile */
    div[id*="api-bridge-inline"] {
        display: inline-block !important;
        margin-left: 8px;
        vertical-align: middle;
    }
    
    /* Button containers - allow wrapping */
    div[style*="marginBottom"] {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
    }
    
    /* Improve form inputs on mobile */
    input, textarea, select {
        font-size: 16px; /* Prevents zoom on iOS */
        width: 100%;
    }
    
    /* Dropdowns full width on mobile */
    .Select-control, .Select-menu-outer {
        width: 100%;
    }
    
    /* Flex containers with filters - stack on mobile (only when flexWrap is present) */
    div[style*="display"][style*="flex"][style*="flexWrap"] {
        flex-direction: column;
        gap: 12px;
    }
    
    /* Filter panel flex items - full width when stacked */
    div[style*="display"][style*="flex"][style*="flexWrap"] > div {
        width: 100% !important;
        margin-right: 0 !important;
        flex: 1 1 100% !important;
    }
    
    /* Graph containers - ensure they don't overflow */
    .js-plotly-plot, .plotly {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
    }
    
    /* Wrapper divs for graphs - prevent overflow */
    div[style*="overflow"][style*="hidden"] {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Adjust graph heights for mobile - increased for better readability */
    div[id^="graph-"], div[id^="heatmap-"] {
        height: 450px !important;
        min-height: 400px !important;
    }
    
    /* Heatmaps container - single column on mobile */
    #heatmaps-container {
        grid-template-columns: 1fr !important;
    }
    
    /* Upload areas - better touch targets */
    div[style*="borderStyle"][style*="dashed"] {
        min-height: 60px;
        padding: 12px;
    }
    
    /* Pre/code blocks - prevent overflow */
    pre, code {
        overflow-x: auto;
        word-wrap: break-word;
        white-space: pre-wrap;
    }
    
    /* Summary and filter panels - stack vertically */
    .card, .panel {
        margin-bottom: 12px;
    }
}

/* ===== SMALL MOBILE (max-width: 480px) ===== */
@media (max-width: 480px) {
    body {
        font-size: 14px;
    }
    
    /* Even smaller graph heights */
    div[id^="graph-"], div[id^="heatmap-"] {
        height: 250px !important;
    }
    
    /* Tighter spacing */
    h2 {
        font-size: 1.5rem;
        margin-top: 12px;
        margin-bottom: 8px;
    }
    
    h4 {
        font-size: 1.1rem;
        margin-top: 16px;
        margin-bottom: 8px;
    }
    
    /* Main containers - less padding */
    div[style*="maxWidth"] {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
    /* Buttons in flex containers - auto width, allow wrapping */
    div[style*="marginBottom"] button {
        width: auto;
        min-width: 120px;
        margin-bottom: 0;
    }
    
    /* Standalone buttons - full width on mobile */
    button[id="btn-dl-html"],
    div[style*="marginTop"] > button:only-child {
        width: 100% !important;
        margin-bottom: 8px;
    }
    
    /* 4-column grids become single column on very small screens */
    [style*="gridTemplateColumns"][style*="1fr 1fr 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    
    /* Table cells - smaller font */
    .dash-table-container .dash-cell {
        font-size: 12px;
        padding: 6px !important;
    }
}

/* ===== TABLET (481px - 768px) ===== */
@media (min-width: 481px) and (max-width: 768px) {
    /* 4-column grids become 2 columns on tablet */
    [style*="gridTemplateColumns"][style*="1fr 1fr 1fr 1fr"] {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    
    /* Graph heights for tablet */
    div[id^="graph-"], div[id^="heatmap-"] {
        height: 350px !important;
    }
}

/* ===== SAFE AREA INSETS (notched devices) ===== */
@supports (padding: max(0px)) {
    body {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }
    
    @media (max-width: 480px) {
        body {
            padding-left: max(8px, env(safe-area-inset-left));
            padding-right: max(8px, env(safe-area-inset-right));
        }
    }
}

/* ===== MOBILE NAVIGATION (Hamburger Menu / Drawer) ===== */
/* Top bar - visível apenas em mobile */
@media (max-width: 768px) {
    #mobile-topbar {
        display: flex !important;
    }
    
    /* Sidebar vira drawer em mobile */
    #app-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 260px !important;
        z-index: 1001 !important;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
    }
    
    /* Sidebar aberta */
    #app-sidebar.sidebar-open {
        transform: translateX(0);
    }
    
    /* Conteúdo principal ocupa 100% em mobile */
    #app-content {
        margin-left: 0 !important;
        width: 100% !important;
        padding-top: 56px !important; /* Espaço para top bar */
    }
    
    /* Backdrop - visível quando menu aberto */
    #mobile-backdrop {
        display: block !important;
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
        pointer-events: none;
    }
    
    /* Backdrop visível quando menu aberto */
    #mobile-backdrop.backdrop-visible {
        opacity: 1;
        pointer-events: all;
    }
}

/* Desktop - comportamento normal */
@media (min-width: 769px) {
    #mobile-topbar {
        display: none !important;
    }
    
    #app-sidebar {
        transform: translateX(0) !important;
    }
    
    #app-content {
        margin-left: 260px !important;
        padding-top: 0 !important;
    }
    
    #mobile-backdrop {
        display: none !important;
    }
}

/* ===== UNIVERSAL LANDSCAPE MOBILE - Hide Sidebar ===== */
/* Force sidebar hidden on ALL mobile devices in landscape */
@media (max-width: 768px) and (orientation: landscape) {
    /* Sidebar always hidden by default in landscape */
    #app-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 260px !important;
        z-index: 1001 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease-in-out;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
    }
    
    /* Sidebar only appears when hamburger menu is clicked */
    #app-sidebar.sidebar-open {
        transform: translateX(0) !important;
    }
    
    /* Content always takes full width in landscape */
    #app-content {
        margin-left: 0 !important;
        width: 100% !important;
        padding-top: 56px !important;
    }
    
    /* Top bar (with hamburger) always visible in landscape */
    #mobile-topbar {
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 56px !important;
        z-index: 1000 !important;
        background-color: rgba(0, 0, 0, 0.9);
        backdrop-filter: blur(10px);
    }
    
    /* Backdrop for sidebar overlay in landscape */
    #mobile-backdrop {
        display: block !important;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
        pointer-events: none;
        z-index: 1000;
    }
    
    #mobile-backdrop.backdrop-visible {
        opacity: 1;
        pointer-events: all;
    }
}

/* ===== LANDSCAPE MOBILE - Additional Height Optimization ===== */
/* Maximize vertical space in landscape */
@media (max-width: 768px) and (orientation: landscape) {
    /* Reduce vertical padding to maximize content area */
    body {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    
    /* Page content containers */
    div[style*="maxWidth"] {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    
    /* Cards and panels - tighter spacing */
    .card, .panel, div[style*="borderRadius"] {
        margin-bottom: 8px !important;
    }
}

/* ===== RACING MODE: TRUE FULLSCREEN — covers entire physical screen ===== */
/* Broad landscape selector: catches all phones up to tablet size */
@media (orientation: landscape) and (max-height: 500px),
       (orientation: landscape) and (max-width: 1024px) {

    /* --- Hide ALL chrome when racing-mode-active --- */
    body.racing-mode-active #app-sidebar,
    html.racing-mode-active #app-sidebar {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body.racing-mode-active #mobile-topbar,
    html.racing-mode-active #mobile-topbar {
        display: none !important;  /* HIDE topbar completely in racing mode */
    }

    body.racing-mode-active #mobile-backdrop,
    html.racing-mode-active #mobile-backdrop {
        display: none !important;
    }

    /* App content: no left margin, no top padding, full bleed */
    body.racing-mode-active #app-content,
    html.racing-mode-active #app-content {
        margin-left: 0 !important;
        width: 100vw !important;
        padding: 0 !important;  /* Remove all padding including the 56px topbar offset */
        box-sizing: border-box !important;
    }

    /* Hide all non-racing UI elements (Start/Save buttons kept visible via separate rule below) */
    body.racing-mode-active #tel-normal-kpi-grid,
    body.racing-mode-active #tel-speed-bins-text,
    body.racing-mode-active #tel-status,
    body.racing-mode-active .page-header-auth,
    body.racing-mode-active #tel-background-instructions,
    body.racing-mode-active #tel-racing-mode-toggle,
    html.racing-mode-active #tel-normal-kpi-grid,
    html.racing-mode-active #tel-speed-bins-text,
    html.racing-mode-active #tel-status,
    html.racing-mode-active .page-header-auth,
    html.racing-mode-active #tel-background-instructions,
    html.racing-mode-active #tel-racing-mode-toggle {
        display: none !important;
    }

    /* Start/Save buttons — flex wrapper anchored top-right */
    body.racing-mode-active #tel-racing-btns-wrapper,
    html.racing-mode-active #tel-racing-btns-wrapper {
        position: fixed !important;
        top: 8px !important;
        right: 8px !important;
        left: unset !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        align-items: center !important;
        z-index: 100001 !important;
        margin: 0 !important;
    }

    body.racing-mode-active #tel-btn-start,
    html.racing-mode-active #tel-btn-start,
    body.racing-mode-active #tel-btn-save,
    html.racing-mode-active #tel-btn-save {
        display: block !important;
        position: static !important;
        top: unset !important;
        right: unset !important;
        left: unset !important;
        margin: 0 !important;
        padding: 6px 12px !important;
        font-size: 12px !important;
        height: 32px !important;
        line-height: 1 !important;
        min-width: 0 !important;
        width: auto !important;
        white-space: nowrap !important;
        border-radius: 6px !important;
        opacity: 0.85 !important;
    }

    /* Racing layout: fixed overlay covering 100% of the screen */
    body.racing-mode-active #tel-racing-layout,
    html.racing-mode-active #tel-racing-layout {
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;  /* Progressive enhancement */
        z-index: 99999 !important;
        flex-direction: row !important;
        align-items: stretch !important;
        padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px) !important;
        background-color: #0A0A0A !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* Show exit button in racing mode */
    body.racing-mode-active #tel-racing-exit-btn,
    html.racing-mode-active #tel-racing-exit-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Lap times section — left column */
    body.racing-mode-active #tel-racing-layout > div:nth-child(1),
    html.racing-mode-active #tel-racing-layout > div:nth-child(1) {
        flex-direction: column !important;
        width: 35% !important;
        margin-right: 12px !important;
        margin-bottom: 0 !important;
        display: flex !important;
    }

    body.racing-mode-active #tel-racing-layout > div:nth-child(1) > div,
    html.racing-mode-active #tel-racing-layout > div:nth-child(1) > div {
        margin-right: 0 !important;
        margin-bottom: 8px !important;
        width: 100% !important;
    }

    /* Speed display — right column */
    body.racing-mode-active #tel-racing-layout > div:nth-child(2),
    html.racing-mode-active #tel-racing-layout > div:nth-child(2) {
        flex: 1 !important;
        width: 65% !important;
        padding: 12px !important;
    }

    /* Larger speed text */
    body.racing-mode-active #tel-racing-speed-display,
    html.racing-mode-active #tel-racing-speed-display {
        font-size: clamp(72px, 18vw, 180px) !important;
    }
}

/* Fullscreen API active: remove any remaining safe-area gaps */
:-webkit-full-screen body.racing-mode-active #tel-racing-layout,
:-webkit-full-screen html.racing-mode-active #tel-racing-layout,
:fullscreen body.racing-mode-active #tel-racing-layout,
:fullscreen html.racing-mode-active #tel-racing-layout {
    padding: 0 !important;
}

/* ===== NUCLEAR OPTION - Override all sidebar rules in landscape ===== */
/* Catches landscape phones where width exceeds 768px (e.g. iPhone 14 = 844px) */
@media (orientation: landscape) and (max-width: 768px),
       (orientation: landscape) and (max-width: 896px) and (max-height: 414px),
       (orientation: landscape) and (max-height: 430px) {
    /* Force hide sidebar with maximum specificity */
    body #app-sidebar,
    html body #app-sidebar,
    #react-entry-point #app-sidebar,
    div#app-sidebar {
        display: block !important; /* Keep display:block for animation */
        visibility: hidden !important;
        transform: translateX(-100%) !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 260px !important;
        z-index: 1001 !important;
    }
    
    /* Only show when menu button is clicked */
    body #app-sidebar.sidebar-open,
    html body #app-sidebar.sidebar-open,
    #react-entry-point #app-sidebar.sidebar-open,
    div#app-sidebar.sidebar-open {
        visibility: visible !important;
        transform: translateX(0) !important;
        opacity: 1 !important;
        pointer-events: all !important;
    }
    
    /* Ensure content uses full width */
    body #app-content,
    html body #app-content,
    #react-entry-point #app-content,
    div#app-content {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
    }
}