/* ============================================== */
/* --- 1. Main Dashboard Layout (Desktop Flex) --- */
/* ============================================== */
.dashboard-container { 
    background-color: #4a5768;
    /* We still use Flexbox here for the gap and padding */
    display: flex; 
    gap: 20px; 
    padding: 20px;
    width: 100%;
    height: 100%; 
    box-sizing: border-box;
}

/* --- Column 1: Map & Lanes (Desktop) --- */
.map-and-lanes-container {
    /* These flex properties recreate the 3/5 width */
    flex: 3 1 0%; 
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0; 
}

/* --- Column 2: Info Panel (Desktop) --- */
#info-panel {
    /* These flex properties recreate the 2/5 width */
    flex: 2 1 0%; 
    background-color: #5b828b;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    box-sizing: border-box;
    padding: 1rem;
    min-width: 0;
    
    /* CRITICAL Z-INDEX FIX: Must be high to appear over the map */
    z-index: 50;
    position: relative;
}

/* ============================================== */
/* --- 2. Map, Lanes, and Thumbnail Styles (Scrolling & Z-Index) --- */
/* ============================================== */

/* Z-Index fix for Map (must be lowest) */
#live-map-nc { 
    width: 100%; 
    border-radius: 8px; 
    border: 1px solid #e5e7eb;
    z-index: 10; 
    /* min-height is critical for mobile, but Tailwind handles flex-grow */
    min-height: 250px; 
}

/* Traffic Lanes: Scrolling and Layering Fix */
.traffic-lane {
    /* CRITICAL SCROLLING FIX */
    overflow-x: auto; 
    overflow-y: hidden;
    /* Other visual styles */
    background-color: #f0f0f0;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 5px 0;
    
    /* CRITICAL Z-INDEX FIX: Must be above the map */
    z-index: 20; 
    position: relative;
}

/* --- Scrollbar Style Fix for Traffic Lanes --- */

/* Target the scrollbar in the traffic lanes */
.traffic-lane::-webkit-scrollbar {
    height: 8px; /* Reduced height for the horizontal scrollbar */
}

/* Style the track (the area the scrollbar moves along) */
.traffic-lane::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Style the thumb (the draggable part) */
.traffic-lane::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.traffic-lane::-webkit-scrollbar-thumb:hover {
    background: #555;
}


.scroller-content {
    /* CRITICAL: Allows content to stretch horizontally for scrolling */
    white-space: nowrap; 
    display: flex;
    align-items: center;
    height: 100%;
    height: calc(100% + 16px); /* CRITICAL: Adds space for the 8px scrollbar */
    padding-bottom: 8px;     /* Optional: Adds padding so content isn't flush with the thumb */
}

/* Thumbnail Styles (based on your JS: class='ship-thumbnail') */
.ship-thumbnail {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin: 0 10px; 
    width: 120px;
    cursor: pointer;
    flex-shrink: 0; /* Prevents shrinking on mobile, enforcing scroll */
    height: 110px;
    
}
.ship-thumbnail img {
width: 120px;
    /* NEW: Reduced image height slightly to make vertical room for text */
    height: 70px; 
    object-fit: cover;
    border-radius: 5px;
    border: 2px solid #d1d5db;
}
.ship-thumbnail span {
    font-size: 0.7em; /* Made text slightly smaller for space */
    color: #4b5563;
    margin-top: 2px; /* Reduced vertical margin above text */
    white-space: normal;
    text-align: center;
    max-width: 120px;
}

/* Info Panel content (for text and images) */
.info-panel-image {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin: 0 20px;
    width: 100%; /* Default to full width of panel */
    cursor: pointer;
}
/* Ensure text in the panel is readable */
#info-panel span, #info-panel p {
    color: #fff;
}
.photo-credit-text {
    font-size: 0.75em;
    color: #ccc;
}


/* ============================================== */
/* --- 3. Mobile Overrides (Max-width: 1023px) --- */
/* ============================================== */
@media (max-width: 1023px) { 
    
    /* Stacking: Overrides desktop flex to ensure vertical stack */
    .dashboard-container { 
        flex-direction: column;
        gap: 10px;
        padding: 10px;
        height: auto; 
    }

    /* Lanes/Map and Info Panel must now take full width */
    .map-and-lanes-container, 
    #info-panel {
        flex: 100% 0 0; 
    }
}