/* General body styling */
body {
    font-family: Arial, sans-serif;
    /* Define some CSS variables for consistency */
    --panel-padding: 20px;
    --grid-line-color: #ddd;
    --text-color-main: #333;
    --text-color-secondary: #555;
    --table-border-color: #ddd;

    margin: 0;
    padding: 0;
    background-color: #f4f7f6;
    color: #333;
    overflow: hidden; /* Prevent body scrollbars during resize */
}

/* Define custom properties for milestone label font sizing */
:root {
    --milestone-label-name-base-em-multiplier: 0.55; /* Reduced from 0.52 */
    --milestone-label-date-base-em-multiplier: 0.50; /* Reduced from 0.50 */
    --milestone-tilted-label-name-scale-from-base: 0.577;
    --milestone-tilted-label-date-scale-from-base: 0.533;
}

/* Main application container - using Flexbox for split screen */
.app-container {
    display: flex;
    height: 100vh; /* Full viewport height */
    width: 100vw;  /* Full viewport width */
}

/* Styling for both panels */
.panel {
    padding: var(--panel-padding);
    box-sizing: border-box;
    overflow: auto; /* Allows scrollbars in both directions if content overflows */
}

.right-panel { /* Apply to entire right panel */
    background-image: url('millarum_beta_centered_15opacity.png');
    background-repeat: repeat;
}

/* Left panel (table) */
#leftPanel {
    min-width: 250px; /* Increased min-width a bit */
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    height: 100%; /* Ensure it takes full height of its flex container parent */
    /* position: relative; /* Not strictly needed if children handle their own positioning */
}

#leftPanel {
    overflow: visible; /* Allow content to overflow */
    position: relative; /* Establish a stacking context for children */
}
/* This change keeps 'pt' as per current usage but adds this advisory. */
#milestonesTable,
#milestonesTable th, 
#roadmapTable th, /* Added #roadmapTable th for consistency */
#milestonesTable td {
    font-size: 8pt; /* Example: 2 points smaller than 12pt */
}

/* More specific styles for roadmap selection dropdown */
#leftPanelTopSection #roadmapSelect {
    overflow: visible; /* Allow options to be fully visible */
}
/* ID column (now 2nd child) */
#milestonesTable th:nth-child(2),
#milestonesTable tr > td:nth-child(2) {
    width: 60px; /* Narrow width for IDs */
    min-width: 30px;
    padding-left: 5px;
    padding-right: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

/* Roadmap/Milestone Name column (now 3rd child) */
#milestonesTable th:nth-child(3),
#milestonesTable tr > td:nth-child(3) {
    width: 230px; /* Adjusted width */
    min-width: 40px;          /* Minimum width for the column */
    padding-left: 5px;        /* Adjust padding for content visibility */
    padding-right: 5px;       /* Adjust padding for content visibility */
    padding-top: 1px;         /* Consistent with Start Date column padding */
    padding-bottom: 1px;      /* Consistent with Start Date column padding */
    white-space: nowrap;      /* Prevent text from wrapping */
    overflow: hidden;         /* Hide overflow if content is too long */
    text-overflow: ellipsis;  /* Show '...' if content is too long */
    box-sizing: border-box;   /* Ensure padding is included in the width */
}

/* Make the Start Date column (now 4th child) as narrow as possible */
#milestonesTable th:nth-child(4),
#milestonesTable tr > td:nth-child(4) {
    width: 70px;              /* A small fixed width, adjust as needed */
    min-width: 30px;          /* Smallest possible width */
    padding-left: 5px;        /* Adjust padding for content visibility */
    padding-right: 5px;       /* Adjust padding for content visibility */
    padding-top: 1px;         /* Adjust as needed */
    padding-bottom: 1px;      /* Adjust as needed */
    white-space: nowrap;      /* Prevent date text from wrapping */
    overflow: hidden;         /* Hide overflow if content is too long */
    text-overflow: ellipsis;  /* Show '...' if content is too long */
    box-sizing: border-box;   /* Ensure padding is included in the width */
    text-align: center;       /* Center the date text */
}
/* Config column (last child) */
#milestonesTable th:last-child,
#milestonesTable tr > td:last-child {
    width: 40px; /* Fixed width for the '...' button */
    min-width: 40px;
    padding: 2px;
    text-align: center;
    border-left: none; /* Make it look like it's outside the main table grid */
    border-top: 1px solid #ddd; /* Keep row lines */
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd; /* Keep right table border */
}

/* Resizer Handle Styling (for the middle divider) */
#resizer {
    width: 5px;
    background-color: #c1c1c1;
    cursor: col-resize;
    flex-shrink: 0;
    flex-grow: 0;
}

#resizer:hover {
    background-color: #a1a1a1;
}

/* Right panel (Gantt chart) */
#rightPanel {
    background-color: #ffffff; /* Changed to white */
    flex-grow: 1;
    min-width: 200px;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* Gantt controls */
.gantt-controls {
    margin-bottom: 15px;
    /* text-align: right; /* Replaced by flexbox for better control */
    display: flex; /* Use flexbox for layout */
    justify-content: flex-end; /* Align items to the right */
    align-items: center; /* Vertically align items */
    gap: 15px; /* Space between slider and export icon */
}

.gantt-controls button#exportBtn { /* Made selector more specific */
    padding: 5px 10px; /* Adjust padding for icon */
    margin-left: 0px; /* Reset margin if any was previously set */
    border: none;
    background-color: transparent; /* No background */
    border-radius: 4px; /* Slightly rounded corners */
    cursor: pointer;
    font-size: 1.2em; /* Adjust icon size */
    line-height: 1; /* Ensure icon is centered well */
    transition: color 0.2s ease; /* Smooth color transition on hover */
}

/* Scrolling container for Gantt chart (the visible viewport) */
.gantt-chart-container {
    flex-grow: 1;
    overflow-x: hidden; /* Changed to hidden to prevent horizontal scroll */
    overflow-y: auto;   /* Allow vertical scroll if content (timeline + bars) is too tall */
    padding-bottom: 15px; /* Space for the scrollbar if it were active */
    position: relative; /* For Today line absolute positioning */
}

/* Wrapper for both timeline and bars to enable synchronized scrolling */
.gantt-scroll-content {
    display: block;
    position: relative; /* Needed for positioning the grid lines relative to this content */
}

/* Timeline Header Styling */
.gantt-timeline-header {
    display: flex;
    flex-direction: column; /* Stack title/year/months vertically */
    white-space: nowrap;
    height: 100px; 
    background-color: transparent; /* Make header transparent to show panel background */
    border-bottom: 1px solid #ddd;
    box-sizing: border-box;
    position: sticky;
    top: 0;
    z-index: 10;
    padding-top: 10px; /* Add some padding at the top */
    align-items: center; /* Center horizontally for the title */
    justify-content: flex-start; /* Align content to the top */
}

.gantt-timeline-header .gantt-title {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 5px;
    color: #333;
}

.gantt-timeline-header .gantt-year-subtitle {
    font-size: 0.9em;
    color: #777;
    margin-bottom: 15px;
}

.gantt-timeline-header .gantt-subheader-container {
    display: flex;
    width: 100%; /* Take full width for month/quarter headers */
    height: 30px; /* Height for the month/quarter labels */
    /* border-top: 1px solid #eee; */ /* Removed top border from subheader container */
    box-sizing: border-box;
}

#roadmapSelect {
    position: relative;
    width: 230px; /* Set dropdown width to match name column */
}

#roadmapSelect option {
  background-color: rgb(255, 255, 255); /* Explicit background */
  color: rgb(0, 0, 0);            /* Text color */
  padding: 5px;             /* Some padding for visibility */
}

.gantt-timeline-header .gantt-month-header,
.gantt-timeline-header .gantt-quarter-header {
    flex-shrink: 0;
    box-sizing: border-box;
    /* border-right: 1px solid #eee; */ /* Removed right border, rely on main grid lines */
    text-align: center;
    line-height: 24px; /* Vertically center text */
    font-size: 0.8em;
    color: #555;
    user-select: none;    
    background-color: transparent; /* Removed background for subheaders */
}

/* Container for the actual Gantt bars */
.gantt-bars-container {
    padding-top: 35px; /* Increased padding to make space for labels on the first bar */
    position: relative; /* Needed for positioning roadmap bars and grid lines */
    min-height: 200px; /* Ensure some height even with no bars for grid lines/today line */
}


/* Conditional padding when tilted labels are active to prevent clipping */
.gantt-chart-container.tilted-labels-active .gantt-bars-container {
    padding-top: 85px; /* Original 35px + 50px additional to move bars down */
}


/* Vertical Grid Lines */
.gantt-grid-line {
    position: absolute;    
    top: -30px; /* Extend 30px upwards into the subheader area */
    bottom: 0; /* Extends from top to bottom of the container */
    width: 1px;
    background-color: #ddd; /* Light grey for the grid lines */
    z-index: 1; /* Below bars */
}

/* Table styling */
#milestonesTable {
    width: 100%;
    border-collapse: collapse; /* Removed width: 100% */
    margin-top: 15px;
    table-layout: fixed; /* Column widths are set by first row/col elements or table width */
}

#milestonesTable th, #milestonesTable td {
    border: 1px solid var(--table-border-color);
    padding: 2px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box; /* Add this to ensure consistent width calculations */
    text-overflow: ellipsis;
}

#milestonesTable th {
    background-color: #f2f2f2;
    font-weight: bold;
    position: relative;
    padding-right: 15px;
}

#milestonesTable tr:nth-child(even) {
    background-color: #f9f9f9;
}

#milestonesTable tr:hover {
    background-color: #e2eff8;
}

/* Column Resizer Handle */
.column-resizer-handle {
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 100%;
    cursor: col-resize;
    z-index: 1;
}

/* NEW: Styles for Roadmap and Milestone rows in the table */
.roadmap-row {
    font-weight: bold;
    background-color: #e6f7ff; /* Light blue background for roadmap rows */
    position: relative; /* Crucial for positioning the .config-item-btn */
    border-bottom: 2px solid #a8dadc;
}

.milestone-row {
    font-style: italic;
    color: #555;
    position: relative; /* Crucial for positioning the .config-item-btn */
}



/* Styles for Add/Remove buttons within the table */
#milestonesTable button.add-milestone-btn, /* Generalize for add button */
#milestonesTable button.remove-item-btn { /* Keep for remove button */
    /* General styles for these buttons if any were previously here for non-hover state */
    /* Most specific styling will be below for the hover state */
    /* padding: 2px 6px; */
    /* font-size: 0.8em;  */
    margin: 0;         /* Remove any default margins if they exist */
    /* line-height: 1.2;  */
    min-width: auto;   /* Allow button to be as small as its content */
}

/* Add a small margin if two buttons are next to each other in the same cell */
#milestonesTable button.remove-item-btn + button.add-milestone-btn,
#milestonesTable button.add-milestone-btn + button.remove-item-btn { /* For any order */
    margin-left: 4px;
}
/* Specific styling for the remove item button (the minus symbol) */
#milestonesTable button.remove-item-btn {
    background-color: #ffffff; /* Light red for destructive action */
    color: #000000;
    border: 1px solid #717171;
}

#milestonesTable button.remove-item-btn:hover {
    background-color: #787878;
}

/* Make the "Actions" column header (now first) visually blend in */
#milestonesTable th:first-child {
    color: transparent; /* Hide text like "Actions" */
    background-color: #ffffff; /* Match left panel background */
    border: none; /* Remove all borders to make it invisible */
    width: 25px; /* Make column very narrow, just enough for the button */
    min-width: 20px; /* Absolute minimum */
    padding: 2px;    /* Minimal padding */
    user-select: none; /* Prevent selection of transparent text */
}


/* Make the actions cell in each row (now first) visually blend in */
#milestonesTable tr > td:first-child {
    background-color: #ffffff; /* Match left panel background */
    border: none; /* Remove all borders to make it invisible */
    overflow: visible !important; /* Allow hover button to be visible outside cell bounds */
    padding: 2px; /* Minimal padding, consistent with header */
}

/* Ensure the first TD of a roadmap row has a white bottom border to hide the TR's blue border */
#milestonesTable tr.roadmap-row > td:first-child {
    border-bottom: 2px solid #ffffff; /* Match roadmap-row border thickness, but white */
}

/* Style for the config button (used for both roadmap and milestone) */
.config-item-btn {
    position: absolute; /* From previous modification */
    right: -20px; /* Adjust as needed, from previous modification */
    top: 50%; /* From previous modification */
    transform: translateY(-50%); /* From previous modification */
    background-color: #f0f0f0; /* Light grey background */
    border: 1px solid #e4e4e4; /* Add a subtle border */
    border-radius: 4px; /* Rounded corners */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    padding: 1px 2px; /* Reduced padding for smaller size */
    cursor: pointer;
    z-index: 5; /* Ensure it's above other row content */
    line-height: 1; /* Consistent vertical alignment */
    color: #333; /* Darker color for the '...' text for contrast */
    font-size: 9px; /* Smaller font size for the "..." */
}

/* Config Menu Popup Styles */
#configMenuPopup { /* Renamed from colorPickerPopup */
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    padding: 8px;
    /* display is set by JS, typically to 'flex' */
    flex-direction: column; /* Default layout for items within the menu */
    gap: 8px; /* Space between items like swatch container and delete button */
    min-width: 150px; /* Ensure it's not too narrow */
}

/* Container for color swatches within the config menu */
.config-menu-swatches-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px; /* Space between swatches */
    /* width: 120px; /* Or let it be natural, adjust if needed */
}

.config-menu-delete-btn {
    display: block;
    width: 100%;
    padding: 8px 12px;
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 3px;
    text-align: left;
    cursor: pointer;
    font-size: 0.9em;
}
.config-menu-delete-btn:hover {
    background-color: #e9ecef;
    border-color: #ccc;
}

/* Scoped color swatch style */
#configMenuPopup .color-swatch {
    width: 25px;
    height: 25px;
    border: 1px solid #eee;
    cursor: pointer;
    border-radius: 4px;
}
.color-swatch:hover {
    border-color: #333;
    transform: scale(1.1);
}

.config-item-btn:hover {
    background-color: #e0e0e0; /* Slightly darker grey on hover */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

/* Style for the config button when it's directly on a Gantt bar (e.g., summary bar) */
.roadmap-bar-placeholder .gantt-bar-config-btn { /* More specific selector */
    position: absolute;
    right: 5px; /* Position from the right edge of the bar */
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(240, 240, 240, 0.8); /* Semi-transparent background */
    border: 1px solid rgba(204, 204, 204, 0.8);
    padding: 1px 3px; /* Small padding */
    font-size: 9px;   /* Small font */
    line-height: 1;
    border-radius: 3px;
    z-index: 15; /* Ensure it's above milestones if they are near the end */
}

/* Styles for the hover-activated "Add Milestone" buttons (for projects and roadmap groups) */
#milestonesTable button.add-milestone-btn,
#milestonesTable button.add-roadmap-group-milestone-btn {
    display: none; /* Hidden by default */
    position: absolute;
    top: 50%; /* Position the top edge at the middle of the parent cell */
    left: 50%;
    transform: translate(-50%, -50%); /* Center horizontally and vertically */
    width: 16px; /* Smaller width */
    height: 16px; /* Smaller height */
    padding: 0;
    font-size: 14px; /* Smaller font for '+' */
    line-height: 14px; /* Adjusted for new height to center '+' */
    text-align: center;
    background-color: #d3d3d3; /* Light grey */
    color: white;
    border: 1px solid #b0b0b0; /* Slightly darker grey border */
    border-radius: 50%; /* Circular button */
    cursor: pointer;
    z-index: 5; /* Ensure it's above row content */
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}



/* New styles for the "Move Roadmap" button/icon */
#milestonesTable button.move-roadmap-btn {
    display: none; /* Hidden by default */
    position: absolute;
    top: 50%;
    left: 50%; /* Will be centered in the first cell */
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    padding: 0;
    font-size: 18px; /* Adjust for icon size */
    line-height: 20px;
    text-align: center;
    background: none;
    border: none;
    cursor: move;
    color: #555;
}
/* Show hover-activated add buttons on hover of designated rows */
#milestonesTable tr.can-add-milestone-on-hover:hover td:first-child .add-milestone-btn,
#milestonesTable tr.can-add-milestone-on-hover:hover td:first-child .add-roadmap-group-milestone-btn {
    display: block; /* Show on hover of the designated rows */
}


/* Styles for rows being dragged */
.is-dragging {
    opacity: 0.6;
    background-color: #d0e0f0 !important; /* Light blue to indicate dragging */
    pointer-events: none !important; /* Make dragged rows non-interactive to mouse */
}

/* Style for the drop indicator line */
.drop-indicator-before {
    border-top: 2px dashed #007bff !important;
}

.drop-indicator-after {
    border-bottom: 2px dashed #007bff !important;
}

/* Show move icon on roadmap row hover (specifically its first TD) */
#milestonesTable tr.roadmap-row:hover > td:first-child .move-roadmap-btn {
    display: block;
}

/* NEW: Hide hover-activated buttons during roadmap drag */
body.roadmap-drag-active #milestonesTable button.add-milestone-btn,
body.roadmap-drag-active #milestonesTable button.move-roadmap-btn {
    display: none !important; /* Force hide during drag */
}


/* NEW: Styles for Roadmap Bars in Gantt Chart */
.roadmap-bar-placeholder {
    height: 10px; /* Make bars narrower */
    line-height: 10px; /* Match new height */
    /* color: white;  Removed as text inside bar is no longer primary */
    /* font-size: 13px; Removed as text inside bar is no longer primary */
    /* padding-left: 10px; Removed as text inside bar is no longer primary */
    border-radius: 4px;
    margin-bottom: 15px; /* Reduced space between roadmap bars */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    /* white-space: nowrap; Not needed if no text inside */
    overflow: visible; /* Important: allow milestones to overflow if needed */
    text-overflow: ellipsis;
    position: relative; /* Crucial for absolute positioning of milestones inside */
    z-index: 5; /* Ensure bars are above grid lines */    
}

/* Specific class for the overall roadmap milestones summary bar */
.roadmap-milestones-summary-bar {
    /* Height is set by JS (e.g., 14px) */
    /* Background color is set by JS from BRIGHT_COLORS */
    height: 14px; /* Default height if JS fails or before it applies style */
}

.gantt-roadmap-name-label {
    position: absolute;
    right: 100%; /* Position its right edge exactly at the left edge of its parent (.roadmap-bar-placeholder) */
    margin-right: 8px; /* Add some space between the label and the bar */
    top: 50%; /* Position its top edge at the vertical middle of the bar */
    transform: translateY(-50%); /* Adjust vertically by half its own height to truly center */
    white-space: nowrap; /* Prevent the name from wrapping to the next line */
    font-size: 0.9em; /* Adjust font size as desired */
    color: #333; /* Adjust color as desired */
    text-align: right; /* Align the text to the right within its own content box */
    font-weight: bold; /* Make the name prominent */
    z-index: 5; /* Ensure it's above other elements if needed, but below milestones if they overlap */
}

.gantt-chart-container { /* This rule's padding-left will be effective */
    padding-left: 20px; /* REDUCED: Adjust this value for desired space for roadmap name labels */
    /* ... other existing styles ... */
}

/* NEW: Styles for Milestone Markers (Diamonds) */
.milestone-diamond {
    position: absolute;
    font-size: 20px; /* Default size for Unicode diamond (e.g., for project bars) */
    line-height: 1;  /* Keep line-height tight to font-size for predictable box height */
    top: 50%; /* New: Center relative to the middle of the bar */
    text-shadow: 2px 0px 1px rgba(0, 0, 0, 0.3); /* Add shadow to the symbol itself */
    z-index: 7; /* Ensure it's above the roadmap bar */
    display: flex; /* For centering text if needed */
    /* Change the milestone symbol to a rotated square. */
    width: 7px; /* Adjust size based on desired appearance */
    height: 7px;
    background-color: white;
    border: 1px solid black;
    transform: translate(-50%, -50%) rotate(45deg); /* Center the diamond with translate, then rotate */
    align-items: center;
    justify-content: center;
}


/* Styles for Milestone Markers on the Roadmap Summary Bar */
/* Specific styles for milestone diamonds on the main roadmap summary bar */


.roadmap-milestones-summary-bar .milestone-diamond {
    width: 11px; /* Increase size proportionally */
    height: 11px;
}

/* New rules to override font size specifically for roadmap labels */
.roadmap-milestones-summary-bar .milestone-diamond .milestone-name-label {
  margin-left: -21px;
  margin-bottom: 3px;
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* New rules to override font size specifically for roadmap labels */
.roadmap-milestones-summary-bar .milestone-diamond .milestone-date-label {
  margin-left: -12px;
  margin-bottom: 1px;
  transform: translateX(-50%) rotate(-45deg);
}

/* Similar rule for Project Milestone Name Labels */
.milestone-diamond .milestone-name-label {
  margin-left: -17px;
  margin-bottom: 7px;
  transform: translateX(-50%) rotate(-45deg); /* Remove rotation from project labels */
}

/* Similar rule for Project Milestone date Labels */
.milestone-diamond .milestone-date-label {
  margin-left: -10px;
  margin-bottom: 0px;
  transform: translateX(-50%) rotate(-45deg); /* Remove rotation from project labels */
}

/* Tilted Label Styles for Roadmap Summary Bar Milestones */
.roadmap-milestones-summary-bar .milestone-diamond .milestone-date-label.tilted-label {
    transform: rotate(-90deg); /* Keep the -45 degree tilt */
    transform-origin: 0% 100%; /* Rotate around the label's own bottom-left corner */
    left: 50%; /* Start positioning from the diamond's center */
    margin-left: -15px;  /* Nudge pivot (label's bottom-left) to be 4px right of diamond's center (14px - 10px) */
    bottom: 50%; /* Align pivot (label's bottom-left) vertically with diamond's center */
    margin-bottom: 10px; /* Increased by 2px from 9px to move it further up */
    
}

.roadmap-milestones-summary-bar .milestone-diamond .milestone-name-label.tilted-label {
    transform: rotate(-90deg); /* Keep the -45 degree tilt */
    transform-origin: 0% 100%; /* Rotate around the label's own bottom-left corner */
    left: 50%; /* Start positioning from the diamond's center */
    margin-left: -15px;  /* Nudge pivot (label's bottom-left) to be right of diamond's right edge, reduced offset */
    bottom: 50%; /* Align pivot (label's bottom-left) vertically with diamond's center */    
    margin-bottom: 35px; /* Position name label's baseline further above date label's baseline. (was 6px, increased by 3px) */
    
}

.milestone-diamond-tooltip {
    position: absolute;
    left: 100%; /* Position tooltip to the right of the diamond */
    top: 50%;
    transform: translateY(-50%) translateX(5px);
    background-color: #333;
    color: white;
    padding: 3px 6px;
    border-radius: 3px;
    font-size: 0.7em;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.milestone-diamond:hover .milestone-diamond-tooltip {
    opacity: 1;
}

/* Styles for completed milestones */
.milestone-diamond.completed {
    /* background-color: #6c757d; /* Optional: change div background for completed */
    color: #6c757d; /* Change character color for completed */
}

/* Change cursor on hover of diamonds if drag and drop is enabled */
.milestone-diamond.draggable:hover {
    cursor: grab;
}
.milestone-diamond.dragging {
    opacity: 0.7; /* Visual feedback while dragging */
    cursor: grabbing;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10+ and Edge */
    user-select: none; /* Standard syntax */
}

/* Repositioned Milestone Name Label */
.milestone-name-label {
    position: absolute;
    bottom: 100%; /* Position the bottom of the label at the top of the diamond */
    /* This margin will push it above the date label. Adjust as needed. */
    margin-bottom: 10px; /* Increased by 2px for more space: prev 18px */
    left: 50%;
    transform: translateX(-50%); /* Center horizontally, no un-rotation needed */
    white-space: nowrap;
    font-size: calc(var(--milestone-label-name-base-em-multiplier) * 1em); /* e.g., 0.52em */
    font-weight: bold;
    color: #333;
    text-shadow: none; /* Remove shadow from the name label */
    z-index: 10;
}

.milestone-date-label {
    position: absolute;
    bottom: 100%; /* Position the bottom of the label at the top of the diamond */
    margin-bottom: 0px; /* Space between the diamond and this date label */
    left: 50%;
    transform: translateX(-50%); /* Center horizontally, no un-rotation needed */
    white-space: nowrap; /* Prevent date from wrapping */
    font-size: calc(var(--milestone-label-date-base-em-multiplier) * 1em); /* e.g., 0.50em */
    color: #333;
    text-shadow: none; /* Remove shadow from the date label */
    z-index: 10; /* Ensure it's above other elements if needed */
    pointer-events: none; /* Allows clicks/interactions to pass through to diamond if needed */
}

/* NEW: Today Line and Marker */
.gantt-today-line {
    position: absolute;
    top: -30px; /* Extend 30px upwards to match grid lines */
    width: 1px; /* Set width to match border width */
    /* background-color: orange; Removed to let the dotted border show */
    border-left: 1px dotted orange; /* Dotted line */
    z-index: 8; /* Ensure it's on top of bars and grid lines */
    pointer-events: none; /* Make it unclickable */
    height: 100%; /* Will be set dynamically by JS */
}

.gantt-today-marker {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 15px solid green; /* Green triangle pointing up */
    z-index: 9; /* Above the line */
    pointer-events: none;
    transform: translateX(-50%) rotate(180deg); /* Center the triangle on the line */
    /* Positioned relative to ganttBarsContainer bottom, adjusted by JS */
}

.gantt-today-marker::after {
    content: 'Today';
    position: absolute;
    top: 15px; /* Position below the triangle */
    left: 50%;
    transform: translateX(-50%) rotate(180deg) translateY(45px);
    white-space: nowrap;
    font-size: 0.7em;
    color: green;
    font-weight: bold;
}

.gantt-today-date-label {
    position: absolute;
    top: 30px; /* Adjust as needed for spacing below "Today" label */
    left: 50%;
    transform: translateX(-50%) rotate(180deg) translateY(70px) ;
    white-space: nowrap;
    font-size: 0.6em; /* Smaller than the "Today" label */
    color: #333;
    font-weight: normal; /* Or medium, if you prefer */
}

/* --- Timeframe Slider Styles --- */

.timeframe-slider-container {
    position: relative;
    margin-bottom: 2px;
    width: 110px; /* Made shorter by half */
    height: 12px; /* Height of the track, make it slimmer */
    margin-left: 10px;
    cursor: pointer;
    -webkit-user-select: none; /* Prevent text selection */
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.timeframe-slider-track {
    width: 100%;
    height: 100%;
    background-color: #e0e0e0; /* Light gray track */
    border-radius: 6px; /* Rounded track */
    position: relative;
    overflow: hidden;
}

.timeframe-slider-thumb {
    position: absolute;
    top: 0;
    left: 0; /* Will be set by JavaScript */
    height: 100%;
    width: 25%; /* Since there are 4 positions (100% / 4) */
    background-color: #a0a0a0; /* Darker gray thumb */
    border-radius: 6px; /* Rounded thumb */
    transition: left 0.3s ease, background-color 0.2s ease;
}

/* Changed: Blue thumb on hover of the thumb itself, not the container */
.timeframe-slider-thumb:hover {
    background-color: #007bff; /* Blue thumb on hover of container */
}

.timeframe-slider-labels {
    position: absolute;
    bottom: 100%; /* Position labels above the slider */
    margin-bottom: 8px; /* Space between labels and slider */
    left: 0; /* Initial left, will be dynamically set by JS */
    width: auto; /* Allow container to size to its content (the single visible label) */
    display: none; /* Initially hidden */
    justify-content: center; /* Center the single visible label span */
    align-items: center;
    pointer-events: none; /* Labels container doesn't intercept clicks meant for slider toggle */
    transform: translateX(-50%); /* Center the label container relative to its dynamic 'left' position */
}
.gantt-scroll-buttons {
    display: flex;
    gap: 5px;
    margin-right: 5px;
}

.gantt-scroll-buttons button {
    width: 15px;
    overflow: hidden; /* Clip content to the button's specified width */
}
/* Show label container on hover of the slider */
.timeframe-slider-container:hover .timeframe-slider-labels {
    display: flex;
}

.timeframe-slider-labels span {
    font-size: 11px;
    color: #333;
    padding: 3px 6px;
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    /* cursor: pointer; /* Labels are not meant to be clicked to change view anymore */
    /* pointer-events: auto; /* Labels are not meant to be clicked to change view anymore */
    display: none; /* Individual labels are hidden by default, JS shows the active one */
    transition: background-color 0.2s ease, color 0.2s ease;
}

.timeframe-slider-labels span:hover {
    background-color: #007bff;
    color: white;
    font-weight: normal; /* Keep font weight consistent or bold if preferred */
}
/* --- End Timeframe Slider Styles --- */

/* Styles for the new sections within leftPanel */
#leftPanelTopSection {
    flex-grow: 1; /* Takes up available space */
    overflow: auto; /* Scrollbars if content exceeds space */
    padding-right: 50px; /* Add space for the absolutely positioned config buttons */
    /* Default height will be calc(100% - buttonHeight) when bottom panel is hidden */
}

#bottomPanelResizer {
    height: 5px;
    background-color: #c1c1c1;
    cursor: row-resize;
    flex-shrink: 0; /* Prevent shrinking */
}

#bottomPanelResizer:hover {
    background-color: #a1a1a1;
}

.roadmap-milestones-panel { /* This is the #roadmapMilestonesContainer */
    overflow: auto; /* Scrollbars if content exceeds space */
    padding: 10px;
    box-sizing: border-box;
    background-color: #f9f9f9; /* Slightly different background */
    border-top: 1px solid #ddd;
    flex-shrink: 0; /* Prevent shrinking beyond its set height */
}

/* Style for the toggle button */
#togglePMPanelBtn {
    padding: 8px 10px;
    border: 1px solid #ccc;
    background-color: #f0f0f0;
    cursor: pointer;
    width: 100%; /* Full width */
    box-sizing: border-box;
    text-align: center;
    flex-shrink: 0; /* Prevent shrinking */
    margin-top: auto; /* Pushes to the bottom if leftPanel is flex column */
}
#togglePMPanelBtn:hover {
    background-color: #e0e0e0;
}

/* Styles for date cells and calendar icon */
.date-cell {
    position: relative; /* For positioning the icon */
}

/* Span wrapping the actual date text to allow contenteditable and icon as sibling */
.date-text {
    display: inline-block; /* Or block, depending on desired layout */
    min-width: 60px; /* Ensure some space for editing */
    padding-right: 18px; /* Space for the icon */
}

.calendar-icon {
    display: none; /* Hidden by default */
    position: absolute;
    right: 3px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 0.9em;
    padding: 0 2px;
    user-select: none; /* Prevent text selection of the icon */
    color: #555;
}

.date-cell:hover .calendar-icon {
    display: inline; /* Show on hover of the parent TD */
}
.calendar-icon:hover {
    color: #007bff;
}

/* Mini Calendar Popup Styles */
#miniCalendarPopup {
    position: absolute;
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    z-index: 1001;
    padding: 10px;
    border-radius: 4px;
    width: 220px; /* Adjust as needed */
}
#miniCalendarPopup table {
    width: 100%;
    border-collapse: collapse;
}
#miniCalendarPopup th,
#miniCalendarPopup td {
    text-align: center;
    padding: 4px; /* Reduced padding */
    font-size: 0.85em;
}
#miniCalendarPopup .calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
#miniCalendarPopup .calendar-header button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2em;
    padding: 0 5px;
}
#miniCalendarPopup .calendar-day {
    cursor: pointer;
    border-radius: 3px;
}
#miniCalendarPopup .calendar-day:hover {
    background-color: #e9ecef;
}
#miniCalendarPopup .calendar-day.selected {
    background-color: #007bff;
    color: white;
}
#miniCalendarPopup .calendar-day.other-month,
#miniCalendarPopup td.other-month /* For empty cells styled as other-month */ {
    color: #adb5bd;
    cursor: default;
    background-color: transparent !important;
}

/* Styles for the new sections within leftPanel */
#leftPanelTopSection {
    flex-grow: 1; /* Takes up available space */
    overflow: auto; /* Scrollbars if content exceeds space */
    padding-right: 25px; /* Add space for the absolutely positioned config buttons on milestonesTable rows */
    /* Default height will be calc(100% - panelHeight - resizerHeight - toggleBtnHeight) */
    display: flex; /* Allow child (roadmapNameContainer + milestonesTable) to be column */
    flex-direction: column;
}

#bottomPanelResizer {
    height: 5px;
    background-color: #c1c1c1;
    cursor: row-resize;
    flex-shrink: 0; /* Prevent shrinking */
}

#bottomPanelResizer:hover {
    background-color: #a1a1a1;
}

.roadmap-milestones-panel { /* This is the #roadmapPanel */
    flex-basis: 150px; /* Initial height, will be adjustable */
    flex-shrink: 0; /* Prevent shrinking beyond its set height initially */
    overflow: auto; /* Scrollbars if content exceeds space */
    padding: 10px;
    box-sizing: border-box;
    background-color: #f9f9f9; /* Slightly different background */
    /* border-top: 1px solid #ddd; /* Resizer provides visual separation */
}

#roadmapTable {
    width: 100%;
    border-collapse: collapse;
    margin-top: 5px;
    font-size: 8pt; /* Consistent font size */
}

#roadmapTable th,
#roadmapTable td {
    border: 1px solid #ddd;
    padding: 4px; /* Slightly more padding than main table for readability */
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#roadmapTable th {
    background-color: #f2f2f2;
}

/* Style for the toggle button */
#togglePMPanelBtn {
    padding: 6px 10px; /* Slightly smaller padding */
    border: none;
    border-top: 1px solid #ccc;
    background-color: #e9e9e9;
    cursor: pointer;
    width: 100%; 
    box-sizing: border-box;
    text-align: center;
    flex-shrink: 0; 
    font-size: 0.8em;
}
#togglePMPanelBtn:hover {
    background-color: #dcdcdc;
}

/* Export Options Menu Popup Styles */
#exportOptionsMenuPopup {
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    padding: 5px;
    display: flex; 
    flex-direction: column;
    gap: 5px; /* Space between buttons */
    width: max-content; /* Allow popup to size to its widest content */
    align-items: flex-end; /* Align buttons to the right */
}

#exportOptionsMenuPopup button {
    display: block;
    width: auto; /* Allow button to size to its content */
    padding: 8px 12px;
    background-color: #f8f9fa;
    border: none; /* Remove button border */
    outline: none; /* Remove button outline */
    border-radius: 3px;
    text-align: right; /* Align text inside button to the right */
    cursor: pointer;
    font-size: 0.9em;
    white-space: nowrap; /* Ensure text stays on a single line */
}
#exportOptionsMenuPopup button:hover {
    background-color: #e9ecef;
    /* border-color: #ccc; Removed as border is none */
}
#exportOptionsMenuPopup button:focus {
  outline: none;
}

/* New style for the always-present logo */
.fixed-logo {
    position: fixed;
    right: 13px;
    bottom: 5px; /* Adjust as needed */
    height: 15px; /* Match the height from your script */
    z-index: 1005; /* Ensure it stays on top */
    pointer-events: none; /* Prevent interaction */
    /* Optional: Add a subtle shadow for better visibility */
    /* box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); */
}

.week-span-label {
  position: absolute;
  transform: translateX(-50%) translateY(-130%);
  font-size: 0.6em;
  color: rgb(255, 255, 255);
  z-index: 7;
  pointer-events: none;
}