/* --- Main Dashboard Layout --- */
.dashboard-container { 
    background-color: #4a5768;
    display: flex;
    gap: 20px; 
    padding: 20px;
    width: 100%;
    height: 100%; 
    box-sizing: border-box; /* Crucial for correct size calculation */
}
#spantext{
    color:#e0eeec;
    font-weight: bold;
}

/* --- Column 1: Map & Lanes --- */
.map-and-lanes-container {
    flex: 60%; /* Use a flexible but explicit width */
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0; /* Prevents content from breaking the flexbox layout */
}

/* --- Column 2: Info Panel --- */
#info-panel {
    flex: 40%; /* Use a flexible but explicit width */
    background-color: #5b828b;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 1rem;
    min-width: 0; /* Prevents its own content from breaking the layout */
}

/* --- Map and Traffic Lane Styles --- */
#live-map-nc { 
    width: 100%; 
    border-radius: 8px; 
    border: 1px solid #e5e7eb;
    flex-grow: 1; /* Tells the map to fill all available vertical space */
    min-height: 0; /* A crucial fix to prevent overflow issues */
}

.traffic-lane {
    background-color: #5b828b;
    border: 1px solid #a0a0a0;
    border-radius: 8px;
    overflow: hidden;
    padding: 10px 0;
    white-space: nowrap;
    flex-shrink: 0; /* Prevents the lanes from shrinking */
    height: 140px; /* Gives the lanes a fixed, predictable height */
}


/* This is the container for the image and its caption */
.info-panel-image {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin: 0 20px;
    width: 500px; /* This sets the container width */
    cursor: pointer;
}

/* This styles the actual image tag <img> */
.info-panel-image img {
    width: 100%; /* Makes the image fill the container's width (400px) */
    height: auto; /* The height will adjust automatically to keep the aspect ratio */
    object-fit: cover; /* Ensures the image covers the area, good for consistency */
    border-radius: 10px; /* A little more rounded */
    border: 3px solid white; /* A 3px solid white border */
}



/* --- Scrolling and Thumbnail Styles --- */
.scroller-content {
    display: inline-block;
    padding-left: 100%;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration: 90s;
}
.northbound .scroller-content { animation-name: scroll-left-to-right; }
.southbound .scroller-content { animation-name: scroll-right-to-left; }
.ship-thumbnail {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin: 0 20px;
    width: 150px;
    cursor: pointer;
}
.ship-thumbnail img {
    width: 150px;
    height: 100px;
    object-fit: cover;
    border-radius: 5px;
    border: 2px solid #d1d5db;
}
.ship-thumbnail span {
    font-size: 0.9em;
    color: #4b5563;
    margin-top: 5px;
    white-space: normal;
    text-align: center;
}


.ship-med {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin: 0 20px;
    width: 150px;
    cursor: pointer;
}
.ship-med img {
    width: 150px;
    height: 100px;
    object-fit: cover;
    border-radius: 5px;
    border: 2px solid #d1d5db;
}
.ship-med span {
    font-size: 0.9em;
    color: #4b5563;
    margin-top: 5px;
    white-space: normal;
    text-align: center;
}
@keyframes scroll-left-to-right { from { transform: translateX(0%); } to { transform: translateX(-100%); } }
@keyframes scroll-right-to-left { from { transform: translateX(-100%); } to { transform: translateX(0%); } }

/* --- Ship Icon Styles --- */
.ship-icon {
    display: block;
    width: 24px;
    height: 24px;
}