:root {
    --g-arrow-color: #1f2937;
    --g-bar-color: #fff;
    --g-bar-border: #fff;
    --g-tick-color-thick: #ededed;
    --g-tick-color: #f3f3f3;
    --g-actions-background: #f3f3f3;
    --g-border-color: #ebeff2;
    --g-text-muted: #7c7c7c;
    --g-text-light: #fff;
    --g-text-dark: #171717;
    --g-progress-color: #dbdbdb;
    --g-handle-color: #37352f;
    --g-weekend-label-color: #dcdce4;
    --g-expected-progress: #c4c4e9;
    --g-header-background: #fff;
    --g-row-color: #fdfdfd;
    --g-row-border-color: #c7c7c7;
    --g-today-highlight: #681091;
    --g-popup-actions: #ebeff2;
    --g-weekend-highlight-color: #f7f7f7
}

.gantt-container {
    line-height: 14.5px;
    position: relative;
    overflow: auto;
    font-size: 12px;
    height: var(--gv-grid-height);
    width: 100%;
    border-radius: 8px
}

    .gantt-container .popup-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        background: #fff;
        box-shadow: 0 10px 24px -3px #0003;
        padding: 10px;
        border-radius: 5px;
        width: max-content;
        z-index: 1000
    }

        .gantt-container .popup-wrapper .title {
            margin-bottom: 2px;
            color: var(--g-text-dark);
            font-size: .85rem;
            font-weight: 650;
            line-height: 15px
        }

        .gantt-container .popup-wrapper .subtitle {
            color: var(--g-text-dark);
            font-size: .8rem;
            margin-bottom: 5px
        }

        .gantt-container .popup-wrapper .details {
            color: var(--g-text-muted);
            font-size: .7rem
        }

        .gantt-container .popup-wrapper .actions {
            margin-top: 10px;
            margin-left: 3px
        }

        .gantt-container .popup-wrapper .action-btn {
            border: none;
            padding: 5px 8px;
            background-color: var(--g-popup-actions);
            border-right: 1px solid var(--g-text-light)
        }

            .gantt-container .popup-wrapper .action-btn:hover {
                background-color: brightness(97%)
            }

            .gantt-container .popup-wrapper .action-btn:first-child {
                border-top-left-radius: 4px;
                border-bottom-left-radius: 4px
            }

            .gantt-container .popup-wrapper .action-btn:last-child {
                border-right: none;
                border-top-right-radius: 4px;
                border-bottom-right-radius: 4px
            }

    .gantt-container .grid-header {
        height: calc(var(--gv-lower-header-height) + var(--gv-upper-header-height) + 10px);
        background-color: var(--g-header-background);
        position: sticky;
        top: 0;
        left: 0;
        border-bottom: 1px solid var(--g-row-border-color);
        z-index: 1000
    }

    .gantt-container .lower-text,
    .gantt-container .upper-text {
        text-anchor: middle
    }

    .gantt-container .upper-header {
        height: var(--gv-upper-header-height)
    }

    .gantt-container .lower-header {
        height: var(--gv-lower-header-height)
    }

    .gantt-container .lower-text {
        font-size: 12px;
        position: absolute;
        width: calc(var(--gv-column-width) * .8);
        height: calc(var(--gv-lower-header-height) * .8);
        margin: 0 calc(var(--gv-column-width) * .1);
        align-content: center;
        text-align: center;
        color: var(--g-text-muted)
    }

    .gantt-container .upper-text {
        position: absolute;
        width: fit-content;
        font-weight: 500;
        font-size: 14px;
        color: var(--g-text-dark);
        height: calc(var(--gv-lower-header-height) * .66)
    }

    .gantt-container .current-upper {
        position: sticky;
        left: 0 !important;
        padding-left: 17px;
        background: #fff
    }

    .gantt-container .side-header {
        position: sticky;
        top: 0;
        right: 0;
        float: right;
        z-index: 1000;
        line-height: 20px;
        font-weight: 400;
        width: max-content;
        margin-left: auto;
        padding-right: 10px;
        padding-top: 10px;
        background: var(--g-header-background);
        display: flex
    }

        .gantt-container .side-header * {
            transition-property: background-color;
            transition-timing-function: cubic-bezier(.4, 0, .2, 1);
            transition-duration: .15s;
            background-color: var(--g-actions-background);
            text-align: -webkit-center;
            border-radius: .5rem;
            border: none;
            padding: 5px 8px;
            color: var(--g-text-dark);
            font-size: 14px;
            letter-spacing: .02em;
            font-weight: 420;
            box-sizing: content-box;
            margin-right: 5px
        }

            .gantt-container .side-header *:last-child {
                margin-right: 0
            }

            .gantt-container .side-header *:hover {
                filter: brightness(97.5%)
            }

        .gantt-container .side-header select {
            padding-right: 1.25rem;
            width: 50px
        }

    .gantt-container .date-range-highlight {
        background-color: var(--g-progress-color);
        border-radius: 12px;
        height: calc(var(--gv-lower-header-height) - 6px);
        top: calc(var(--gv-upper-header-height) + 5px);
        position: absolute
    }

    .gantt-container .current-highlight {
        position: absolute;
        background: var(--g-today-highlight);
        width: 1px;
        z-index: 999
    }

    .gantt-container .current-ball-highlight {
        position: absolute;
        background: var(--g-today-highlight);
        z-index: 1001;
        border-radius: 50%
    }

    .gantt-container .current-date-highlight {
        background: var(--g-today-highlight);
        color: var(--g-text-light);
        border-radius: 5px
    }

    .gantt-container .holiday-label {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        z-index: 1000;
        background: --g-weekend-label-color;
        border-radius: 5px;
        padding: 2px 5px
    }

        .gantt-container .holiday-label.show {
            opacity: 100
        }

    .gantt-container .extras {
        position: sticky;
        left: 0
    }

        .gantt-container .extras .adjust {
            position: absolute;
            left: 8px;
            top: calc(var(--gv-grid-height) - 60px);
            background-color: #000000b3;
            color: #fff;
            border: none;
            padding: 8px;
            border-radius: 3px
        }

    .gantt-container .hide {
        display: none
    }

.gantt {
    user-select: none;
    -webkit-user-select: none;
    position: absolute
}

    .gantt .grid-background {
        fill: none
    }

    .gantt .grid-row {
        fill: var(--g-row-color)
    }

    .gantt .row-line {
        stroke: var(--g-border-color)
    }

    .gantt .tick {
        stroke: var(--g-tick-color);
        stroke-width: .4
    }

        .gantt .tick.thick {
            stroke: var(--g-tick-color-thick);
            stroke-width: .7
        }

    .gantt .arrow {
        fill: none;
        stroke: var(--g-arrow-color);
        stroke-width: 1.5
    }

    .gantt .bar-wrapper .bar {
        fill: var(--g-bar-color);
        stroke: var(--g-bar-border);
        stroke-width: 0;
        transition: stroke-width .3s ease
    }

    .gantt .bar-progress {
        fill: var(--g-progress-color);
        border-radius: 4px
    }

    .gantt .bar-expected-progress {
        fill: var(--g-expected-progress)
    }

    .gantt .bar-invalid {
        fill: transparent;
        stroke: var(--g-bar-border);
        stroke-width: 1;
        stroke-dasharray: 5
    }

:is(.gantt .bar-invalid) ~ .bar-label {
    fill: var(--g-text-light)
}

.gantt .bar-label {
    fill: var(--g-text-dark);
    dominant-baseline: central;
    font-family: Helvetica;
    font-size: 13px;
    font-weight: 400
}

    .gantt .bar-label.big {
        fill: var(--g-text-dark);
        text-anchor: start
    }

.gantt .handle {
    fill: var(--g-handle-color);
    opacity: 0;
    transition: opacity .3s ease
}

    .gantt .handle.active,
    .gantt .handle.visible {
        cursor: ew-resize;
        opacity: 1
    }

    .gantt .handle.progress {
        fill: var(--g-text-muted)
    }

.gantt .bar-wrapper {
    cursor: pointer
}

    .gantt .bar-wrapper .bar {
        outline: 1px solid var(--g-row-border-color);
        border-radius: 3px
    }

    .gantt .bar-wrapper:hover .bar {
        transition: transform .3s ease
    }

    .gantt .bar-wrapper:hover .date-range-highlight {
        display: block
    }

.gantt .today-highlight {
    fill: var(--g-today-highlight);
    opacity: 0.1; 
}

.gantt .today-highlight-header {
    fill: var(--g-today-highlight);
    opacity: 0.15;
}

.gantt .today-highlight-border {
    fill: none;
    stroke: var(--g-today-highlight);
    stroke-width: 2;
    stroke-opacity: 0.8;
}

.gantt .grid-row.empty-row {
    fill: var(--g-row-color);
    opacity: 0.5; 
}

.gantt .grid-row.empty-row {
    fill: #f9f9f9; 
}

.gantt .grid-row.empty-row {
    fill: url(#empty-row-pattern);
}

.gantt .grid-row:nth-child(even) {
    fill: #fafafa;
}

.gantt .grid-row:nth-child(odd) {
    fill: var(--g-row-color);
}

.gantt-container .popup-wrapper {
    /* existing styles... */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}