/* Gantt Chart Container Styles */
#gantt-chart-container {
    position: relative;
    /* max-width: 100%; Ensure this is handled by inline styles or parent */
    box-sizing: border-box;
    /* overflow-x: auto; is set inline on the Razor component */
}

/* Allow the library's main div to be sized by JS and scrolled by its parent */
#gantt-chart-container .gantt {
    display: inline-block; /* Important for shrink-to-fit behavior before JS resize and for respecting JS width */
    /* Remove max-width and overflow-x, let #gantt-chart-container handle scrolling */
    vertical-align: top; /* Align to top if it's inline-block */
}

/* Inner container, likely fine, or also let it be natural width */
#gantt-chart-container .gantt-container {
    /* display: inline-block; */ /* Probably not needed if .gantt handles it */
}

/* Style the Gantt chart table to be responsive */
#gantt-chart-container .gantt table {
    min-width: 100%;
    table-layout: auto;
}

/* Ensure proper scrolling behavior */
#gantt-chart-container .gantt .grid-body {
    overflow-x: auto;
    max-width: 100%;
}

/* Compact view for smaller screens */
@media (max-width: 768px) {
    #gantt-chart-container {
        min-height: 300px !important;
        max-height: 500px !important;
        overflow-y: auto !important;
    }
    
    #gantt-chart-container .gantt .bar {
        height: 16px !important;
    }
}