:root {
    --left-col: 630px;
    --row-height: 32px;
    --footer-height: 320px;
}

/* Prevent the entire page from scrolling horizontally (optional) */
html, body {
    overflow-x: hidden;
}

/* Container: use viewport width so right pane can be constrained to viewport */
.gantt-container {
    display: flex;
    align-items: flex-start;
    width: 100vw;
    box-sizing: border-box;
}

/* Left column - sticky so it never scrolls horizontally out of view */
.gantt-left {
    flex: 0 0 var(--left-col);
    display: flex;
    flex-direction: column;
    border-right: 1px solid #ccc;
    background: #fff;

    position: sticky;
    left: 0;
    top: 0;
    z-index: 1002; /* raised so in-column dialogs render above the overlay */

    overflow-x: auto; /* ensure horizontal scrollbar appears when needed */
    overflow-y: hidden; /* remove vertical scrollbar from the columns section */
}

/* Right column - fixed viewport area (available width) that gets the horizontal scrollbar */
.gantt-right {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: calc(100vw - var(--left-col) - 205px);
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
    padding-bottom: 0;
}

/* Inner canvas: will be sized by inline style to CanvasWidthPxpx from the Razor component.
   Use block layout so it expands and forces the .gantt-right scrollbar when wider than the pane. */
.gantt-right-inner {
    display: block;
    box-sizing: border-box;
}

/* Timeline, chart and aggregates inside the inner canvas should use 100% of the canvas inner width */
.gantt-timeline,
.gantt-chart,
.gantt-aggregates,
.gantt-cumulative {
    box-sizing: border-box;
    width: 100%;
}

/* Zoom controls */
.gantt-zoom-controls {
    margin-bottom: 12px;
    display: flex;
    gap: 6px;
    justify-content:space-between;
}

.gantt-zoom-controls button {
    padding: 6px 12px;
    font-size: 14px;
    background: #eee;
    border: 1px solid #ccc;
    cursor: pointer;
    border-radius: 4px;
}

.gantt-zoom-controls .active {
    background: #337ab7;
    color: #fff;
    border-color: #2e6da4;
}

/* Left table rows */
.gantt-header-row,
.gantt-row {
    display: grid;
    grid-template-columns: 150px 100px 100px 80px 80px 120px; /* tune widths */
    align-items: center;
    border-bottom: 1px solid #eee;
    height:27px;
    font-weight:bold;
}

.gantt-row {
    height: var(--row-height);
    font-size: 14px;
    font-weight:normal;
}

.gantt-col {
    padding: 4px 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-right:1px solid #eee;
}

.gantt-col-value {
    padding: 4px 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
    padding-right: 8px;
}

/* Timeline */
.gantt-header {
    background: #fafafa;
    border-bottom: 1px solid #ddd;
    overflow-y: hidden;
}

.gantt-timeline {
    display: flex;
    box-sizing: border-box;
}

.gantt-tick {
    flex: 0 0 auto;
    text-align: center;
    border-right: 1px solid #ddd;
    font-size: 12px;
    padding: 4px 0;
}

/* Bars */
.gantt-chart {
    margin-left: 0;
    padding-left: 0;
    overflow-y: hidden;
}

.gantt-chart svg {
    display: block;
}

.gantt-bar {
    fill: steelblue;
    
}

.gantt-bar-label {
    font-size: 12px;
    fill: gray;
    pointer-events: none;
}

/* Parent bar styling (override .gantt-bar defaults) */
.gantt-bar-parent {
    fill: #4b70d6;            /* distinct fill for parent bars */
    stroke: #2f4fb3;
    stroke-width: 1px;
    opacity: 0.95;
}

/* Optional: make labels on parent bars bolder */
.gantt-bar-parent + .gantt-bar-label,
.gantt-bar-label.parent {
    font-weight: 700;
}

/* Aggregates */
.gantt-aggregates-row {
    display: flex;
    align-items: flex-start;
}

.gantt-left-aggregates {
    width: var(--left-col);
    flex-shrink: 0;
    background: #fff;
    border-right: 1px solid #ccc;
}

.gantt-right-aggregates {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-x: visible; /* allow horizontal overflow for scrolling */
    overflow-y: hidden;
}

.gantt-aggregates {
    display: flex;
    border-bottom: 1px solid #eee;
    background: #fcfcfc;
    font-size: 12px;
    line-height: 24px;
    height: 24px;
    box-sizing: border-box;
}

.gantt-aggregate {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #f0f0f0;
    box-sizing: border-box;
}

.gantt-aggregate:last-child {
    border-right: none;
}

/* Footer chart */
.gantt-footer {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
}

.gantt-left-footer {
    width: var(--left-col);
    background: #fff;
    border-top: 1px solid #ddd;
    height: var(--footer-height);
}

.gantt-cumulative {
    flex: 0 0 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    background: #fafafa;
    border-top: 1px solid #ddd;
    height: var(--footer-height, 320px); /* or use the inline height from Razor */
    padding-top: 4px;
    margin-left: 0;
    padding-left: 0;
    box-sizing: border-box;
}

.gantt-cumulative svg {
    display: block;
}

/* Legend & colors */
.gantt-legend {
    margin-top: 6px;
    font-size: 12px;
    display: flex;
    gap: 12px;
    padding-left: 12px;

    position: relative;
    z-index: 6;
    background: white; /* matches left column background */
    padding: 6px 12px;
    height: auto; /* legend height is set inline from razor via LegendHeightPx */
    box-shadow: 0 -1px 0 rgba(0,0,0,0.04) inset; /* subtle top divider */
}

.gantt-cost {
    font-size: 11px;
    color: #d9534f;
   
    font-weight: 600;
    text-align:right;
}
.gantt-cost-cum {
    font-size: 11px;
    color: #d9104f;
    text-align: right;
    font-weight: 600;
}

.gantt-revenue {
    font-size: 11px;
    color: #68ed58;
    font-weight: 600;
    text-align: right;
}

.gantt-revenue-cum {
    font-size: 11px;
    color: #179d08;
    font-weight: 600;
    text-align: right;
}

.gantt-net {
    font-size: 11px;
    color: #337ab7;
    font-weight: 600;
    text-align: right;
}

.gantt-daily-net-bar {
    fill: #d9104f; /* red */
    opacity: 0.9;
}

.gantt-daily-net-line {
    stroke: #d9104f;
    stroke-linecap: round;
}

/* Daily cost bars (red) */
.gantt-daily-cost-bar {
    fill: #d9104f;
    opacity: 0.95;
}

/* Daily revenue bars (green) */
.gantt-daily-revenue-bar {
    fill: #5cb85c;
    opacity: 0.85;
}

/* Y axis labels inside cumulative SVG */
.gantt-y-label {
    font-family: Arial, Helvetica, sans-serif;
    pointer-events: none;
}

/* Small styles for expand/collapse control */
.gantt-toggle {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    cursor: pointer;
    font-size: 24px;
    color: #555;
}
.gantt-toggle:focus { outline: 1px solid #ccc; }

/* Resizer handle for column edges */
.gantt-header-row .gantt-col {
    position: relative;
}

.gantt-resizer {
    position: absolute;
    top: 0;
    bottom: 0;
    right: -6px;
    width: 12px;
    cursor: col-resize;
    z-index: 60; /* raise above adjacent content */
    background: transparent;
    touch-action: none; /* ensure pointer events delivered on touch */
}

/* Visual feedback for debugging / usability */
.gantt-resizer:hover,
.gantt-resizer:active {
    background: rgba(0,0,0,0.04);
    border-left: 1px solid rgba(0,0,0,0.06);
}

/* Allow header columns to show the resizer hit area (resizer extends slightly outside the cell) */
.gantt-header-row .gantt-col {
    overflow: visible; /* override general .gantt-col overflow:hidden for header row */
    position: relative; /* keep existing positioning for resizer */
}

/* Splitter styling (vertical bar between left and right) */
.gantt-splitter {
    width: 8px;
    cursor: col-resize;
    background: transparent;
    z-index: 50;

    /* make splitter stretch the height of the container; the parent is flex, align-items:stretch is default
       but ensure it visually covers the area */
    align-self: stretch;
    -webkit-touch-callout: none;
}

/* Visual feedback for splitter on hover */
.gantt-splitter:hover {
    background: rgba(0,0,0,0.04);
}

/*.bottom-anchor{
    position:absolute;
    bottom:10px;
    z-index:9999;
}*/

/* Print: prefer portrait orientation by default */
@page {
    size: A3 landscape;
    margin: 12mm;
}

@media print {
    /* ensure print uses portrait if supported */
    @page {
        size: landscape;
        scale:42;
    }
    /* hide interactive elements */
    .gantt-zoom-controls,
    .gantt-resizer,
    .gantt-splitter,
    .gantt-toggle,

    

    /* expand Gantt for printing */
    .gantt-container, .gantt-left, .gantt-right, .gantt-right-inner {
        position: static !important;
        overflow: visible !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }
}

/* Progress overlay on top of base bar */
.gantt-bar-progress {
    fill: #34a853; /* green progress */
    opacity: 0.7;
}

/* Optional variant for parent progress if you want different hue */
.gantt-bar-parent-progress {
    fill: #2b8cd6; /* bluish progress on parent bars */
    opacity: 0.95;
}

/* small helpers for sort UI */
.gantt-col-header {
    font-weight: 600;
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.sticky-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fafafa;
}

.gantt-header.sticky-header {
    flex: 0 0 auto;
    height: 27px; /* adjust as needed */
}

.gantt-rows-scrollable {
    overflow-y: auto;
}

.gantt-chart-scrollable {
    overflow-y: hidden;
    
}

.gantt-horizontal-splitter {
    flex: 0 0 8px;
    height: 8px;
    background: #eee;
    cursor: row-resize;
    width: 100%;
    z-index: 10;
}

    .gantt-horizontal-splitter:hover {
        background: #ccc;
    }

/* Fix for aggregates and chart horizontal scrolling and visibility */
.gantt-aggregates-scroll {
    flex: 0 0 120px; /* adjust as needed for your aggregates */
    overflow-x: auto;
    width: 100%;
}

#gantt-bars-scroll {
    /* Remove or comment out the flex property if present */
    /* flex: 0 0 var(--bars-height, 60vh); */
    min-height: 0;
    overflow-x: auto;
    overflow-y: auto;
    width: 100%;
    /* height will be set inline from Razor */
}

.bottom-anchor {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Prevent text selection in Gantt bars and rows */
#gantt-bars-scroll,
.gantt-row,
.gantt-bar,
.gantt-chart-scrollable {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
}

/* Hide horizontal scrollbar but allow scrolling in the timeline */
#gantt-timeline-scroll {
    overflow-x: auto;
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* IE and Edge */
}
#gantt-timeline-scroll::-webkit-scrollbar {
    display: none;              /* Chrome, Safari, Opera */
}