
/* ------------------------------------------------------- */
/* Standard Time Gantt chart styles                        */
/* ------------------------------------------------------- */

/* IG grid sets padding:4px and vertical-align:middle on all <td> cells.
   For gantt cells that combination offsets bars ~8px down (4px padding +
   4px centering when row height > ganttcelldiv height). Override both. */
td:has(.ganttcelldiv) {
    padding: 2px 0 0 0 !important;
    vertical-align: top !important;
}

.ganttitem {
    /*Used to find all gantt items on the entire page used*/
    /*Put actual styles in other classes*/
}

/* ------------------------------------------------------- */
/* Plain Gantt bar                                         */
/* ------------------------------------------------------- */
.ganttbar {
    background-color: var(--st-gantt-bar-bg);
    height: 10px;
    border-radius: 3px;
    cursor: ew-resize;
    transform: translateY(50%);
    -webkit-print-color-adjust: exact;
    color: var(--st-text-body);
    font-size: 8pt;
    font-weight: 700;
    vertical-align: top;
    text-align: center;
    white-space: nowrap;
}

/* Enlarge button image slightly during hover*/
.ganttbar:hover {
    border-width:1px;
    border-style:dotted;
    border-color: var(--st-text-body);
    /*background-color: #ebebff !important;*/
    /*transform: translateY(50%) scale(1.1);*/
}


/* ------------------------------------------------------- */
/* Critical path bar classes                               */
/* ------------------------------------------------------- */
.ganttbar-critical {
    background: linear-gradient(to right,
        var(--st-gantt-critical-bar-start),
        var(--st-gantt-critical-bar-end)) !important;
    color: #ffffff;
}

.ganttbar-noncritical {
    background: linear-gradient(to right,
        var(--st-gantt-noncritical-bar-start),
        var(--st-gantt-noncritical-bar-end)) !important;
    color: #ffffff;
}

.ganttsummarybar.ganttbar-noncritical {
    background: var(--st-gantt-summary-bg) !important;
}


/* ------------------------------------------------------- */
/* Float (slack) indicator bar                             */
/* ------------------------------------------------------- */
.ganttfloatbar {
    background-color: var(--st-gantt-float-bar-bg);
    border: 1.5px dashed var(--st-gantt-float-bar-stroke);
    height: 10px;
    border-radius: 2px;
    position: relative;
    transform: translateY(50%);
    -webkit-print-color-adjust: exact;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ganttfloatbar-label {
    color: var(--st-gantt-float-bar-text);
    font-size: 9px;
    font-weight: 400;
    white-space: nowrap;
    pointer-events: none;
}


/* ------------------------------------------------------- */
/* Baseline comparison ghost bar                           */
/* ------------------------------------------------------- */
.ganttbar-baseline {
    height: 4px;
    background-color: var(--st-gantt-baseline-bar);
    border: 1px solid var(--st-gantt-baseline-bar);
    border-radius: 2px;
    pointer-events: none;
    opacity: 0.7;
    -webkit-print-color-adjust: exact;
}

/* Baseline milestone ghost diamond — outline only, no fill */
.ganttbarmilestone-baseline {
    height: 12px;
    width: 12px;
    border-radius: 2px;
    transform: translateY(50%) rotate(45deg);
    border: 2px solid var(--st-gantt-baseline-bar);
    background-color: transparent;
    pointer-events: none;
    opacity: 0.7;
}


/* ------------------------------------------------------- */
/* Weekend shading — scale header cells (Days scale only)  */
/* ------------------------------------------------------- */
/* Cell rows use a CSS repeating-linear-gradient set in JS (no extra DOM nodes).
   Scale header cells use a CSS class because they are individual divs. */
.ganttscalecell-weekend {
    background-color: var(--st-gantt-weekend-scale-bg);
}


/* ------------------------------------------------------- */
/* Today marker line                                       */
/* ------------------------------------------------------- */
.gantttoday {
    border-right: 2px solid var(--st-gantt-today-color);
    height: 100%;
    width: 0;
    pointer-events: none;
    -webkit-print-color-adjust: exact;
}

.ganttscalecell-today {
    background-color: var(--st-gantt-today-color);
    color: #ffffff;
    font-weight: bold;
}

.gantttoday-label {
    position: absolute;
    top: 1px;
    left: 3px;
    display: inline-flex;
    align-items: center;
    height: 11px;
    font-size: 7px;
    font-weight: bold;
    color: #ffffff;
    background-color: var(--st-gantt-today-color);
    padding: 0 3px;
    border-radius: 3px;
    white-space: nowrap;
    pointer-events: none;
    line-height: 1;
    -webkit-print-color-adjust: exact;
}


/* ------------------------------------------------------- */
/* Summary Gantt bar                                       */
/* ------------------------------------------------------- */
.ganttsummarybar {
    background-color: var(--st-gantt-summary-bg);
    height: 12px;
    cursor: ew-resize;
    transform: translateY(50%);
    -webkit-print-color-adjust: exact;
    color: var(--st-text-body);
    font-size: 8pt;
    font-weight: 700;
    vertical-align: top;
    text-align: center;
    white-space: nowrap;
}

.ganttsummarybar-sub {
    height: 10px;
}

/* Enlarge button image slightly during hover*/
.ganttsummarybar:hover {
    border-width:1px;
    border-style:dotted;
    border-color: var(--st-text-body);
    /*background-color: #FFD580 !important;*/
    /*transform: translateY(50%) scale(1.1);*/
}

.ganttpercentbar {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 3px;
    background-color: var(--st-gantt-percent-bg);
    border-radius: 3px;
    pointer-events: none;
    -webkit-print-color-adjust: exact;
}

.gantt-bar-resize-handle {
    position: absolute;
    top: 0;
    width: 6px;
    height: 100%;
    cursor: ew-resize;
    z-index: 1;
}



/* ------------------------------------------------------- */
/* Milestone Gantt diamond                                 */
/* ------------------------------------------------------- */
.ganttmilestonediamond {
    width: 0;
    height: 0;
    border: 7px solid transparent;
    border-bottom-color: var(--st-gantt-milestone-color);
    position: relative;
    top: -7px;
    transform: translateY(10%);
    -webkit-print-color-adjust: exact;
}
.ganttmilestonediamond:after {
    content: '';
    position: absolute;
    left: -7px;
    top: 7px;
    width: 0;
    height: 0;
    border: 7px solid transparent;
    border-top-color: var(--st-gantt-milestone-color);
}

.ganttbarmilestone {
    border-width: 1px;
    border-style: solid;
    border-color: var(--st-gantt-milestone-color);
    background-color: var(--st-gantt-milestone-bg);
    height: 12px;
    width: 12px;
    border-radius: 2px;
    cursor: ew-resize;
    transform: translateY(50%) rotate(45deg);
    -webkit-print-color-adjust: exact;
    color: var(--st-text-body);
    font-size: 8pt;
    font-weight: 700;
    vertical-align: top;
    text-align: center;
    white-space: nowrap;
}

.ganttbarmilestone:hover {
    border-width: 2px;
    border-style: dotted;
    border-color: var(--st-text-body);
    /*background-color: #FFD580 !important;*/
    /*transform: translateY(50%) scale(1.1);*/
}


/* ------------------------------------------------------- */
/* Gantt Scale                                             */
/* ------------------------------------------------------- */
.ganttscale {
}

.ganttscalecell {
    /*color: black;*/
    /*background-color: white;*/
    font-size: calc(4pt + 0.25vw);
    border-right: solid;
    border-width: 1px;
    border-collapse: collapse;
    border-color: var(--st-gantt-scale-border);
    text-align: center;
    overflow: hidden;
}

.ganttgridline {
    border-right: solid;
    border-width: 1px;
    border-collapse: collapse;
    border-color: var(--st-gantt-gridline);
    -webkit-print-color-adjust: exact;
}

.ganttscaleheadercell {
    font-size: calc(4pt + 0.25vw);
    border-right: solid;
    border-width: 1px;
    border-collapse: collapse;
    border-color: var(--st-gantt-scale-border);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    -webkit-print-color-adjust: exact;
}

.ganttscalerowcell {
    font-size: calc(4pt + 0.25vw);
    border-right: solid;
    border-width: 1px;
    border-collapse: collapse;
    border-color: var(--st-gantt-gridline);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    -webkit-print-color-adjust: exact;
}

.ganttsummarytriangle {
    position: fixed;
    width: 0;
    height: 0;
    padding: 0px;
    margin: 0px;
    top: 0px;
    border: 7px solid transparent;
    border-top: 15px solid var(--st-gantt-summary-triangle);
    border-bottom: 0;
    transform: translateY(20%);
    -webkit-print-color-adjust: exact;
}

/* ------------------------------------------------------- */
/* Summary bar child milestone diamond                     */
/* ------------------------------------------------------- */
.gantt-summary-milestone {
    background-color: #ffffff;
    border: 1.5px solid #000000;
    height: 8px;
    width: 8px;
    border-radius: 1px;
    transform: rotate(45deg);
    cursor: default;
    -webkit-print-color-adjust: exact;
}




/* ------------------------------------------------------- */
/* Plain Gantt bar while dragging                          */
/* ------------------------------------------------------- */
.ganttbardragging {
    background-color: var(--st-gantt-drag-bg);
    color: var(--st-accent-text);
    font-size: 8pt;
    font-weight: 700;
    vertical-align: top;
    text-align: center;
    white-space: nowrap;
    height: 10px;
    border-radius: 3px;
    cursor: ew-resize;
    -webkit-print-color-adjust: exact;
}

.ganttlinkline {
    stroke: var(--st-gantt-link-color);
    stroke-width: 4px;
    opacity: 50%;
    fill: none;
    animation: dash 1s linear forwards;
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
}

.ganttlinkline-critical {
    stroke: var(--st-gantt-critical-arrow);
    opacity: 0.75;
}

.ganttlinkline-noncritical {
    stroke: var(--st-gantt-noncritical-arrow);
    opacity: 0.5;
}

/* Applied to predecessor and successor bar divs while their connecting arrow is hovered. */
/* outline (not box-shadow) so the ring is not clipped by ganttcelldiv's overflow:hidden. */
.ganttbar-link-highlight {
    outline: 2px solid var(--st-accent);
    outline-offset: 1px;
    position: relative;
    z-index: 5;
}

/* Applied to the visible SVG path while its hit area is hovered. */
.ganttlinkline-highlight {
    opacity: 1 !important;
    stroke-width: 6px !important;
}

.fade-in {
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 2s;
}

@keyframes fadeInOpacity {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
}


/* ------------------------------------------------------- */
/* Gantt scale hover navigation buttons                    */
/* ------------------------------------------------------- */
.gantt-nav-left,
.gantt-nav-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 1px;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
}

.gantt-nav-left  { left: 2px; }
/* left:100% places the group's left edge at the <th> right boundary;
   translateX(-100%-2px) pulls it back by its own width + margin — no JS needed. */
.gantt-nav-right { left: 100%; transform: translate(calc(-100% - 2px), -50%); }

th:has(.ganttscale):hover .gantt-nav-left,
th:has(.ganttscale):hover .gantt-nav-right,
.gantt-nav-left:hover,
.gantt-nav-right:hover {
    opacity: 1;
    pointer-events: auto;
}

.gantt-nav-btn {
    background: rgba(255, 255, 255, 0.85);
    color: #333333;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 2px;
    padding: 0 4px;
    font-size: 10px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gantt-nav-btn-wide {
    width: 34px;
}

.gantt-nav-circle {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: currentColor;
    border-radius: 50%;
    flex-shrink: 0;
}

.gantt-nav-glyph {
    display: inline-block;
    transform: scale(0.55);
    line-height: 1;
}

.gantt-nav-glyph-lg {
    font-size: 18px;
    transform: none;
}

.gantt-nav-btn:hover {
    background: rgba(0, 0, 0, 0.55);
    color: #ffffff;
    border-color: rgba(0, 0, 0, 0.4);
}

.gantt-zoom-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 9px;
    background: rgba(255, 255, 255, 0.70);
    color: #666666;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 3px;
    padding: 1px 5px;
    pointer-events: none;
    white-space: nowrap;
    -webkit-print-color-adjust: exact;
}

