/* Mobile hamburger menu styling */
@media screen and (max-width: 768px) {
    /* Hamburger button in mobile-site-info */
    .mobile-hamburger {
        background: none !important;
        border: none !important;
        color: white !important;
        font-size: 18px !important;
        padding: 8px !important;
        cursor: pointer !important;
        margin-right: 10px !important;
        border-radius: 4px !important;
        transition: background-color 0.2s ease !important;
    }
    
    .mobile-hamburger:hover {
        background-color: rgba(255, 255, 255, 0.1) !important;
    }
    
    /* Mobile slide-out menu */
    .mobile-slide-menu {
        position: fixed !important;
        top: 0 !important;
        left: -300px !important; /* Hidden by default */
        width: 280px !important;
        height: 100vh !important;
        background-color: #2c3e50 !important;
        z-index: 9999 !important;
        transition: left 0.3s ease !important;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3) !important;
    }
    
    /* Menu open state */
    .mobile-slide-menu.open {
        left: 0 !important;
    }
    
    /* Menu header */
    .mobile-slide-header {
        background-color: #34495e !important;
        padding: 15px 20px !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    .mobile-slide-header h3 {
        color: white !important;
        margin: 0 !important;
        font-size: 18px !important;
        font-weight: bold !important;
    }
    
    .mobile-slide-close {
        background: none !important;
        border: none !important;
        color: white !important;
        font-size: 18px !important;
        cursor: pointer !important;
        padding: 5px !important;
        border-radius: 3px !important;
        transition: background-color 0.2s ease !important;
    }
    
    .mobile-slide-close:hover {
        background-color: rgba(255, 255, 255, 0.1) !important;
    }
    
    /* Menu content */
    .mobile-slide-content {
        padding: 10px 0 !important;
    }
    
    .mobile-slide-nav-btn {
        width: 100% !important;
        background: none !important;
        border: none !important;
        color: white !important;
        text-align: left !important;
        padding: 15px 20px !important;
        font-size: 16px !important;
        cursor: pointer !important;
        transition: background-color 0.2s ease !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
    }
    
    .mobile-slide-nav-btn:hover {
        background-color: rgba(255, 255, 255, 0.1) !important;
    }
    
    .mobile-slide-nav-btn.active {
        background-color: #3498db !important;
    }
    
    .mobile-slide-nav-btn i {
        width: 20px !important;
        text-align: center !important;
    }
    
    /* Overlay when menu is open */
    .mobile-slide-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background-color: rgba(0, 0, 0, 0.5) !important;
        z-index: 9998 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.3s ease, visibility 0.3s ease !important;
    }
    
    .mobile-slide-overlay.open {
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* Mobile vessel tiles - ensure visibility */
@media screen and (max-width: 768px) {
    #vessel-tiles {
        display: block;
        padding: 1rem !important;
        overflow: visible !important;
        max-height: none !important;
        min-height: 200px !important;
        position: relative;
        z-index: 2; /* Above buttons to cover them partially */
    }
    
    .vessel-card {
        display: block !important;
        width: calc(100% - 2rem) !important;
        max-width: none !important;
        min-width: none !important;
        margin: 0 auto 1rem auto !important;
        flex: none !important;
        position: relative;
        z-index: 2; /* Same as vessel-tiles */
    }
    
    /* Mobile carousel area with relative positioning for button containers */
    .vessel-display {
        position: relative !important; /* Create positioning context */
        min-height: 300px !important;
        padding: 1rem !important;
        overflow: visible !important;
    }
    
    /* Navigation button containers - these become the full clickable areas */
    #mobile-carousel-prev,
    #mobile-carousel-next {
        position: absolute !important;
        top: 0 !important;
        bottom: 0 !important; /* Full height clickable area */
        width: 70px !important; /* Wider clickable zone */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 3 !important;
        pointer-events: auto !important;
        background-color: rgba(0, 0, 0, 0.05) !important; /* Very subtle background */
        cursor: pointer !important; /* Show it's clickable */
        transition: background-color 0.2s ease !important;
    }
    
    /* Hover effect for the entire clickable area */
    #mobile-carousel-prev:hover,
    #mobile-carousel-next:hover {
        background-color: rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Position left and right navigation areas */
    #mobile-carousel-prev {
        left: 0 !important; /* Full left edge */
    }
    
    #mobile-carousel-next {
        right: 0 !important; /* Full right edge */
    }
    
    /* Vessel tiles with margins to avoid overlap with wider navigation areas */
    #vessel-tiles {
        margin: 0 75px !important; /* Leave space for 70px navigation areas + 5px margin */
        padding: 1rem !important;
    }
    
    /* Style the actual button elements - now just for visual arrow display */
    #carousel-prev,
    #carousel-next {
        pointer-events: none !important; /* Parent container handles clicks */
        user-select: none !important;
        background: none !important; /* Remove background - parent handles it */
        color: rgba(0, 0, 0, 0.6) !important; /* Dark gray arrows */
        border: none !important; /* Remove border */
        border-radius: 0 !important; /* Remove any circular styling */
        width: 100% !important; /* Full width of container */
        height: 100% !important; /* Full height of container */
        display: flex !important;
        align-items: center !important; /* Center vertically */
        justify-content: center !important; /* Center horizontally */
        font-size: 8rem !important; /* Much larger - close to card height */
        font-weight: bold !important;
        line-height: 1 !important;
        text-shadow: 0 2px 4px rgba(255, 255, 255, 0.8) !important; /* White shadow for contrast */
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Make arrows more visible on hover of parent container */
    #mobile-carousel-prev:hover #carousel-prev,
    #mobile-carousel-next:hover #carousel-next {
        color: rgba(0, 0, 0, 0.8) !important;
        text-shadow: 0 3px 6px rgba(255, 255, 255, 0.9) !important;
    }
    
    

    
    /* Hide carousel controls when not needed */
    .mobile-carousel-controls {
        display: none !important;
    }
    
    /* Show carousel controls when active */
    .mobile-carousel-controls.active {
        display: block !important;
    }
    
    /* Ensure vessel tiles are visible in list view */
    .vessel-list-view {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        overflow-y: auto !important;
        max-height: calc(60vh - 70px) !important;
        padding: 1rem !important;
        background: white !important;
    }

   /* ===== LIST VIEW HANDLING ===== */

   /* Force hide vessel tiles when list view is explicitly shown */
   .vessel-list-view[style*="display: block"] {
      display: block !important;
      width: 100% !important;
      height: auto !important;
      overflow-y: auto !important;
      max-height: calc(60vh - 70px) !important;
      padding: 1rem !important;
      background: white !important;
   }

   /* Force hide vessel list when tiles are explicitly shown */
   .vessel-list-view[style*="display: none"] {
      display: none !important;
   }

   /* Ensure proper container behavior */
   #vessel-tiles[style*="display: none"] {
      display: none !important;
   }

   #vessel-tiles[style*="display: block"],
   #vessel-tiles:not([style*="display: none"]) {
      display: block !important;
      padding: 1rem !important;
      min-height: 200px !important;
   }

   /*======== MOBILE MENU HANDLING ======= */
       /* Ensure mobile menu toggle is visible */
    .nav-item.mobile-only {
        display: block !important;
    }
    

    .mobile-menu-toggle {
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }
    
    
    .mobile-menu-toggle i {
        font-size: 1.2rem !important;
    }
    
    /* Hide other nav items on mobile initially */
    .nav-item:not(.mobile-only) {
        display: none !important;
    }
    
    /* Show nav items when mobile menu is active */
    .nav-menu.mobile-open .nav-item:not(.mobile-only) {
        display: block !important;
    }
}


/* Mobile responsiveness */
@media screen and (max-width: 768px) {
    /* MOBILE LAYOUT STRUCTURE */
    
    /* Mobile header - only logo visible */
    .nav-container {
        justify-content: center !important;
    }
    
    /* Hide page header and backgrounds on mobile */
    .page-header {
        display: none !important;
    }
    
    .content-area {
        background: none !important;
    }
    
    .maps-layout {
        background: none !important;
    }
    
    /* Mobile Maps page layout - compensate for mobile browser address bar */
    .maps-layout {
        flex-direction: column !important;
        height: calc(100vh - 70px) !important; /* Account for mobile header and browser address bar */
        min-height: calc(100vh - 70px) !important;
        padding-top: 0 !important;
        position: relative !important;
    }
    
    .map-container {
        width: 100% !important;
        height: 40vh !important;
        min-height: 40vh !important;
        order: 1;
        flex: none !important;
    }
    
    .vessel-sidebar {
        width: 100% !important;
        height: calc(60vh - 70px) !important; /* Reduced to compensate for mobile controls */
        min-height: calc(60vh - 70px) !important;
        order: 2;
        flex: none !important;
        overflow-y: auto;
        padding-top: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        position: relative !important;
    }
    
    /* Hide sidebar header with vessel count on mobile */
    .sidebar-header {
        display: none !important;
    }
    
    /* Mobile vessel display - single carousel tile */
    .vessel-tiles {
        display: block;
    }
    
    .vessel-grid {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: hidden !important;
        scroll-behavior: smooth;
        gap: 0 !important;
        align-items: stretch !important;
    }
    

    h4.map-label {
        font-size: 0.7rem;
        padding: 0.2rem 0.4rem;
        margin: 0.1vh -2.9vh;
    }
    /* Vessel Title shift for button width  */
    .list-wrap .title-title {
      font-size: 1rem;
      padding-left: 1rem;
    }

    #data-table {
      width: 17rem;  
    }
    .th {
      font-size: 0.8rem !important; /* Force smaller size for mobile */
      padding: 0.1rem 0 !important; /* Reduced padding for mobile */
    }    
    .td {
        font-size: 0.8rem !important; /* Force smaller size for mobile */
    }

    /* Mobile vessel cards - full width carousel tiles */
    .vessel-card {
        position: relative !important;
        flex: 0 0 80% !important; /* Reduced from 100% */
        width: 80% !important;
        max-width: 80% !important;
        min-width: 80% !important;
        margin: 0 auto !important; /* Center the tile */
        display: none; /* Hide all by default */
    }
    
    /* Show only the active carousel tile */
    .vessel-card.mobile-active {
        display: block !important;
    }
    
    /* Carousel navigation buttons positioned within vessel area */
    .mobile-carousel-controls {
        position: absolute;
        top: 45%;
        transform: translateY(-2rem);
        z-index: 0;
    }
    

    
    /* Ensure vessel display has relative positioning for absolute children */
    .vessel-display {
        padding: 1rem 0 90px 0 !important; /* Add bottom padding for mobile controls */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        position: relative !important;
        min-height: calc(60vh - 160px) !important; /* Account for mobile controls height */
    }
    
    .carousel-btn {
        background: rgba(52, 73, 94, 0.9) !important;
        border: 2px solid white !important;
        color: white !important;
        padding: 0.8rem 1rem !important;
        border-radius: 50% !important;
        cursor: pointer !important;
        font-size: 6.5rem !important;
        width: 5rem !important;
        height: 5rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    }
    
    .carousel-btn:hover {
        background: rgba(74, 103, 65, 0.9) !important;
    }
    
    .carousel-btn:disabled {
        opacity: 0.3 !important;
        cursor: not-allowed !important;
    }
    
    /* Hide carousel indicator on mobile */
    .mobile-carousel-indicator {
        display: none !important;
    }
    
    /* Mobile control buttons - fixed at bottom with padding and always visible */
    .mobile-controls {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 100 !important;
        display: flex !important;
        justify-content: space-around !important;
        align-items: flex-end !important;
        padding: 1rem !important;
        background: #ecf0f1 !important;
        border-top: 1px solid #bdc3c7 !important;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1) !important;
        gap: 0.5rem !important;
        min-height: 70px !important;
    }
    
    .mobile-controls fieldset {
        border: 1px solid #bdc3c7 !important;
        border-radius: 8px !important;
        padding: 0.25rem !important;
        margin: 0 !important;
        background: transparent !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        min-width: 60px !important;
    }
    
    .mobile-controls legend {
        font-size: 0.65rem !important;
        font-weight: 600 !important;
        color: #7f8c8d !important;
        padding: 0 0.25rem !important;
        margin: 0 !important;
        text-align: center !important;
    }
    
    .mobile-control-btn {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0.4rem 0.5rem !important;
        background: #3498db !important;
        border: none !important;
        border-radius: 6px !important;
        color: white !important;
        font-size: 0.7rem !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        min-width: 50px !important;
        min-height: 40px !important;
        transition: all 0.2s ease !important;
        text-align: center !important;
    }
    
    /* View button states - List (blue) vs Tile (green) */
    #mobile-list-btn.active {
        background: #2ecc71 !important;
    }
    
    /* Scroll button states - Off (gray), Auto (green), Manual (blue) */
    #mobile-auto-btn.off {
        background: #95a5a6 !important;
        cursor: not-allowed !important;
    }
    
    #mobile-auto-btn.auto {
        background: #2ecc71 !important;
    }
    
    #mobile-auto-btn.manual {
        background: #3498db !important;
    }
    
    #mobile-auto-btn:disabled {
        cursor: not-allowed !important;
        opacity: 0.6 !important;
    }
    
    /* Satellite button active state */
    #mobile-satellite-btn.active {
        background: #2ecc71 !important;
    }
    
    .mobile-delay-control {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        padding: 0.4rem !important;
        border-radius: 8px !important;
        color: white !important;
        font-size: 0.65rem !important;
        min-width: 70px !important;
        border: 1px solid #bdc3c7 !important;
    }
    
    .mobile-delay-control > div {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        background: #95a5a6 !important;
        padding: 0.3rem 0.4rem !important;
        border-radius: 6px !important;
        transition: background-color 0.2s ease !important;
        min-width: 60px !important;
    }
    
    /* Delay control states based on scroll mode - target the inner div */
    .mobile-delay-control.off > div {
        background: #95a5a6 !important; /* Gray when disabled */
    }
    
    .mobile-delay-control.auto > div {
        background: #3498db !important; /* Blue when auto scroll is active */
    }
    
    .mobile-delay-control.manual > div {
        background: #95a5a6 !important; /* Gray when manual */
    }
    
    .mobile-delay-control legend {
        font-weight: 600 !important;
        margin-bottom: 0.2rem !important;
    }
    
    .mobile-delay-control input[type="range"] {
        width: 60px !important;
        margin: 0.25rem 0 !important;
        accent-color: white !important;
    }
    
    .mobile-delay-control span {
        font-size: 0.65rem !important;
        font-weight: bold !important;
    }
    
}

    /* Touch feedback for vessel tiles on mobile */
    #vessel-tiles {
        touch-action: pan-y pinch-zoom !important; /* Allow vertical scrolling but enable horizontal swipe detection */
        user-select: none !important; /* Prevent text selection during swipes */
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
    }
    
    /* Touch feedback disabled to prevent visual twitching during carousel navigation */
    /* #vessel-tiles:active {
        opacity: 0.95 !important;
        transform: scale(0.999) !important;
        transition: opacity 0.1s ease, transform 0.1s ease !important;
    } */
    
    /* Mobile views */
@media screen and (max-width: 768px) {
    /* Hide map buttons ONLY in mobile tile view (carousel) */
    .vessel-tiles .vessel-card .map-btn {
        display: none !important;
    }
    
    /* Show map buttons in mobile list view */
    .vessel-list-view .map-btn {
        display: inline-block !important;
        font-size: 0.6rem;
        padding: 0.1rem 0.3rem;
    }
    
    /* Ensure list view map buttons are visible when list is active */
    .list-view-unit .map-btn {
        display: inline-block !important;
        font-size: 0.6rem;
        padding: 0.1rem 0.3rem;
    }
}

/* Hide mobile-only items on desktop */
@media screen and (min-width: 769px) {
    .nav-item.mobile-only {
        display: none !important;
    }
}