: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: #e8edf3;
--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: #010e52;
--g-popup-actions: #ebeff2;
--g-weekend-highlight-color: #f7f7f7;
}

html[data-theme=dark] {
--g-arrow-color: #e5e5e5;
--g-bar-color: #2a2a2a;
--g-bar-border: #3a3a3a;
--g-tick-color-thick: #1a1a1a;
--g-tick-color: #0a0a0a;
--g-actions-background: #1a1a1a;
--g-border-color: #2a2a2a;
--g-text-muted: #999999;
--g-text-light: #ffffff;
--g-text-dark: #f5f5f5;
--g-progress-color: #4a4a4a;
--g-handle-color: #d0d0d0;
--g-weekend-label-color: #3a3a3a;
--g-expected-progress: #5a5a5a;
--g-header-background: #0a0a0a;
--g-row-color: #141414;
--g-row-border-color: #2a2a2a;
--g-today-highlight: #999999;
--g-popup-actions: #1a1a1a;
--g-weekend-highlight-color: #0f0f0f;
}

/*Gantt Container Basics*/
.gantt-container {
line-height: 14.5px;
position: relative;
overflow-x: auto;
font-size: 12px;
height: var(--gv-grid-height);
width: 100%;
border-radius: 8px;
isolation: isolate;
}

/*Popup / Tooltip*/
.gantt-container .popup-wrapper {
position: absolute;
top: 0;
left: 0;
background: var(--g-header-background);
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-border-color);
}

.gantt-container .popup-wrapper .action-btn:hover {
filter: 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;
}

/*Grid Header & Texte*/
.gantt-container .grid-header {
height: calc(var(--gv-lower-header-height) + var(--gv-upper-header-height) + 10px);
background-color: var(--g-header-background);
position: relative; /*statt 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: var(--g-header-background);
}

/*Side Header & Actions*/
.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);
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 {
width: 60px;
padding-top: 2px;
padding-bottom: 2px;
}

.gantt-container .side-header select:focus {
outline: none;
}

/*Highlights & Today*/
.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;
}

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

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

/*Extras & Utilities*/
.gantt-container .extras {
position: sticky;
left: 0;
}

.gantt-container .extras .adjust {
position: absolute;
left: 8px;
top: calc(var(--gv-grid-height) - 60px);
background-color: var(--g-actions-background);
color: var(--g-text-light);
border: none;
padding: 8px;
border-radius: 3px;
}

.gantt-container .hide {
display: none;
}

/*Gantt SVG & Grid*/
.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;
}

/*Bars & Progress*/
.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;
}

/*Interaction Handles*/
.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);
}

Bar Wrappers & Hover
.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 .grid-column {
fill: transparent;
pointer-events: all;
}

.gantt .grid-column:hover {
fill: var(--g-weekend-highlight-color);
transition: fill .1s ease;
}