/* css/timeline.css */

#timelineArea {
    /* Styles for the main timeline area */
}

#timelineContainer {
    display: flex; /* Arrange Y-Axis and Grid side-by-side */
    margin-top: 15px;
    overflow-x: auto; /* Allow horizontal scrolling for the grid */
    border: 1px solid #eee;
    position: relative; /* For positioning task bars */
}

/* --- Y-Axis (Task List) --- */
#timelineYAxis {
    min-width: 250px; /* Fixed width for task/project names */
    max-width: 300px;
    border-right: 1px solid #ccc;
    background-color: #f8f9fa;
    flex-shrink: 0; /* Don't shrink */
    position: sticky; /* Make Y-Axis sticky? Requires container height */
    left: 0;
    z-index: 10;
}

.y-axis-header {
    font-weight: bold;
    padding: 10px 15px;
    border-bottom: 1px solid #ccc;
    background-color: #f1f3f5;
    position: sticky; /* Keep header visible when scrolling Y axis */
    top: 0;
}

#yAxisListContainer {
    padding: 5px 0;
     max-height: 600px; /* Example height - adjust */
     overflow-y: auto;
}

#yAxisListContainer .project-group {
    font-weight: bold;
    padding: 8px 15px;
    background-color: #e9ecef;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
    position: sticky; /* Keep project header visible */
    top: 0; /* Below main Y-axis header */
    z-index: 5;
}
 #yAxisListContainer .project-group i {
     margin-right: 5px;
     font-size: 0.8em;
     transition: transform 0.2s ease-in-out;
}
 #yAxisListContainer .project-group.collapsed i {
     transform: rotate(-90deg);
 }


#yAxisListContainer .task-item {
    padding: 6px 15px 6px 30px; /* Indent tasks under projects */
    font-size: 0.9em;
    border-bottom: 1px solid #f1f1f1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 30px; /* Example fixed height - match grid rows */
    line-height: 18px; /* Adjust for vertical centering */
}

/* --- X-Axis Grid --- */
#timelineGrid {
    flex-grow: 1; /* Take remaining width */
    position: relative; /* Needed for absolute positioning task bars */
    background-color: #fff;
     overflow: hidden; /* Hide overflow while calculating */
}

#timelineDateHeader {
    display: flex;
    flex-direction: column; /* Stack header rows vertically */
    position: sticky;
    top: 0;
    background-color: #f1f3f5; /* Background for the whole header area */
    z-index: 9;
}

.timeline-super-header { /* Common style for month/week rows */
    border-bottom: 1px solid #ccc;
    background-color: #f1f3f5; 
}

.month-header-row, .week-header-row, .day-header-row {
    display: flex; /* Arrange cells horizontally */
    width: max-content; /* Allow row to expand based on content */
}

.month-header {
    border-right: 1px solid #bbb; /* Stronger border for months */
    text-align: center;
    padding: 5px; /* Less padding maybe */
    font-size: 0.9em;
    font-weight: bold;
    flex-shrink: 0;
    box-sizing: border-box;
    background-color: #e9ecef; /* Slightly different BG */
}

.week-header {
    border-right: 1px solid #ccc;
    text-align: center;
    padding: 5px;
    font-size: 0.8em; /* Smaller */
    font-weight: 600;
    flex-shrink: 0;
    box-sizing: border-box;
    /* background-color: #f1f3f5; */ /* Same as parent? */
}

.day-header {
    /* Keep previous styles: width = DAY_CELL_WIDTH, border-right, text-align, etc */
    width: 40px; /* Example */
    min-width: 40px;
    border-right: 1px solid #ddd; /* Lighter border */
    text-align: center;
    padding: 3px 0;
    font-size: 0.7em; /* Smallest */
    box-sizing: border-box;
    display: flex; flex-direction: column; justify-content: center;
    line-height: 1.2;
}
.day-header .day-name { font-weight: normal; color: #666; }
.day-header .day-number { font-size: 1.1em; font-weight: 500; }
.day-header.weekend { background-color: #fdfdfd; } /* Example weekend style */

.grid-line.day-line {
     /* Keep previous styles: width = DAY_CELL_WIDTH, border-right */
     width: 40px; /* Example */
     min-width: 40px;
     border-right: 1px dotted #eee;
     box-sizing: border-box;
}
.grid-line.day-line.weekend { background-color: #fdfdfd11; } /* Subtle weekend BG */


.day-header .day-name { font-weight: bold; }
.day-header .day-number { font-size: 1.1em; }

.day-header.weekend, .grid-line.day-line.weekend {
    background-color: #f9f9f9; /* Slightly different BG for weekends */
}

/* Widths for different zoom levels (adjust as needed) */
.zoom-week #timelineDateHeader .day-header,
.zoom-week #timelineGridLines .grid-line.day-line {
     width: 40px; /* Example width for a day */
}

.zoom-6weeks #timelineDateHeader .week-header,
.zoom-6weeks #timelineGridLines .grid-line.week-line {
     width: 120px; /* Example width for a week */
}

.zoom-6months #timelineDateHeader .month-header,
.zoom-6months #timelineGridLines .grid-line.month-line {
     width: 160px; /* Example width for a month */
}

#timelineGridLines {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    display: flex;
    z-index: 1; /* Behind task bars */
}
#timelineGridLines .grid-line {
    border-right: 1px dashed #eee;
    height: 100%;
    flex-shrink: 0;
    box-sizing: border-box;
}
 /* Set grid line width same as header width */
 #timelineGridLines .grid-line.week-line { width: 140px; }


#timelineTaskBars {
    position: relative; /* Task bars will be absolute inside this */
    z-index: 2; /* Above grid lines */
}

.task-bar {
    position: absolute; /* Position relative to #timelineTaskBars */
    height: 20px; /* Height of the bar */
    background-color: #007bff; /* Default color */
    border-radius: 4px;
    border: 1px solid #0056b3;
    font-size: 0.75em;
    color: white;
    padding: 0 5px;
    line-height: 18px; /* Vertically center text */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
 .task-bar:hover { background-color: #0056b3; }
 .task-bar.status-upcoming { /* Different style? Maybe just marker? */
     background-color: #adb5bd; border-color: #6c757d;
     width: 10px !important; /* Example: Just a marker */
     height: 10px !important;
     top: calc(var(--row-index) * 30px + 10px); /* Center marker */
     border-radius: 50%;
     padding: 0;
 }
 .task-bar.status-inprogress { background-color: #ffc107; border-color: #d39e00; color: #333; }
 .task-bar.status-done { background-color: #28a745; border-color: #1e7e34; opacity: 0.7; }

/* Ensure the chevron rotates (Add transition if you like) */
 .project-group i.fa-chevron-down {
     transition: transform 0.2s ease-in-out;
     display: inline-block; /* Needed for transform */
 }
 .project-group.collapsed i.fa-chevron-down {
     transform: rotate(-90deg);
 }

.timeline-zoom-controls {
    display: flex;
    gap: 5px;
}
.timeline-zoom-controls .zoom-btn {
    padding: 4px 10px; /* Adjust padding for small buttons */
    font-size: 0.85em;
}
.timeline-zoom-controls .zoom-btn.active {
    background-color: #6c757d; /* Darker background for active */
    color: white;
    border-color: #6c757d;
}