.projects-gantt {
    --g-arrow-color: var(--mud-palette-text-secondary);
    --g-actions-background: var(--mud-palette-action-default-hover);
    --g-bar-color: color-mix(in srgb, var(--mud-palette-primary) 14%, var(--mud-palette-surface) 86%);
    --g-bar-border: color-mix(in srgb, var(--mud-palette-primary) 42%, var(--mud-palette-lines-default) 58%);
    --g-border-color: var(--mud-palette-lines-default);
    --g-expected-progress: color-mix(in srgb, var(--mud-palette-warning) 28%, var(--mud-palette-surface) 72%);
    --g-handle-color: var(--mud-palette-primary);
    --g-header-background: var(--mud-palette-surface);
    --g-popup-actions: var(--mud-palette-action-default-hover);
    --g-progress-color: var(--mud-palette-primary);
    --g-row-border-color: var(--mud-palette-table-lines);
    --g-row-color: var(--mud-palette-surface);
    --g-text-dark: var(--mud-palette-text-primary);
    --g-text-light: var(--mud-palette-primary-text);
    --g-text-muted: var(--mud-palette-text-secondary);
    --g-tick-color: var(--mud-palette-table-lines);
    --g-tick-color-thick: var(--mud-palette-lines-default);
    --g-today-highlight: var(--mud-palette-primary);
    --g-weekend-highlight-color: color-mix(
        in srgb,
        var(--mud-palette-background-gray) 72%,
        var(--mud-palette-surface) 28%
    );
    --g-weekend-label-color: color-mix(
        in srgb,
        var(--mud-palette-background-gray) 78%,
        var(--mud-palette-surface) 22%
    );
}

.projects-gantt {
    --projects-gantt-height: 560px;
    min-width: 0;
}

.projects-gantt__viewport {
    position: relative;
    min-height: var(--projects-gantt-height);
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
}

.projects-gantt__chart,
.projects-gantt__chart .gantt-container {
    min-height: var(--projects-gantt-height);
}

.projects-gantt__chart .gantt-container {
    border-radius: 0;
    font-family: var(--mud-typography-default-family);
    font-size: var(--mud-typography-body2-size);
    line-height: var(--mud-typography-body2-lineheight);
    scrollbar-color: var(--mud-palette-action-disabled-background) transparent;
}

.projects-gantt__chart .gantt-container .grid-header {
    box-shadow: 0 1px 0 var(--mud-palette-lines-default);
}

.projects-gantt__chart .gantt-container .upper-text {
    font-family: var(--mud-typography-subtitle2-family);
    font-size: var(--mud-typography-subtitle2-size);
    font-weight: var(--mud-typography-subtitle2-weight);
    letter-spacing: 0;
}

.projects-gantt__chart .gantt-container .lower-text {
    font-family: var(--mud-typography-caption-family);
    font-size: var(--mud-typography-caption-size);
    letter-spacing: 0;
}

.projects-gantt__chart .gantt-container .side-header {
    gap: 0.35rem;
    padding: 8px 10px 0 8px;
}

.projects-gantt__chart .gantt-container .side-header button,
.projects-gantt__chart .gantt-container .side-header select {
    min-height: 32px;
    margin: 0;
    padding: 5px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    color: var(--mud-palette-text-primary);
    font-family: var(--mud-typography-button-family);
    font-size: var(--mud-typography-button-size);
    font-weight: var(--mud-typography-button-weight);
    line-height: var(--mud-typography-button-lineheight);
    letter-spacing: var(--mud-typography-button-letterspacing);
    text-transform: var(--mud-typography-button-text-transform);
    box-shadow: var(--mud-elevation-1);
}

.projects-gantt__chart .gantt-container .side-header button:hover,
.projects-gantt__chart .gantt-container .side-header select:hover {
    background: var(--mud-palette-action-default-hover);
    filter: none;
}

.projects-gantt__chart .gantt-container .side-header button:focus-visible,
.projects-gantt__chart .gantt-container .side-header select:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--mud-palette-primary) 64%, transparent);
    outline-offset: 2px;
}

.projects-gantt__chart .gantt-container .popup-wrapper {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    box-shadow: var(--mud-elevation-8);
}

.projects-gantt__chart .gantt .bar-wrapper .bar {
    outline: 1px solid var(--g-bar-border);
}

.projects-gantt__chart .gantt .bar-wrapper:hover .bar {
    stroke-width: 1px;
}

.projects-gantt__chart .gantt .bar-label {
    font-family: var(--mud-typography-body2-family);
    font-size: var(--mud-typography-body2-size);
    font-weight: var(--mud-typography-body2-weight);
    letter-spacing: 0;
}

.projects-gantt__chart .gantt .bar-wrapper.projects-gantt-task--success .bar {
    fill: color-mix(in srgb, var(--mud-palette-success) 18%, var(--mud-palette-surface) 82%);
    outline-color: color-mix(in srgb, var(--mud-palette-success) 44%, var(--mud-palette-lines-default) 56%);
}

.projects-gantt__chart .gantt .bar-wrapper.projects-gantt-task--success .bar-progress {
    fill: var(--mud-palette-success);
}

.projects-gantt__chart .gantt .bar-wrapper.projects-gantt-task--success .bar-label:not(.big) {
    fill: var(--mud-palette-success-text);
}

.projects-gantt__chart .gantt .bar-wrapper.projects-gantt-task--warning .bar {
    fill: color-mix(in srgb, var(--mud-palette-warning) 22%, var(--mud-palette-surface) 78%);
    outline-color: color-mix(in srgb, var(--mud-palette-warning) 52%, var(--mud-palette-lines-default) 48%);
}

.projects-gantt__chart .gantt .bar-wrapper.projects-gantt-task--warning .bar-progress {
    fill: var(--mud-palette-warning);
}

.projects-gantt__chart .gantt .bar-wrapper.projects-gantt-task--warning .bar-label:not(.big) {
    fill: var(--mud-palette-warning-text);
}

.projects-gantt__chart .gantt .bar-wrapper.projects-gantt-task--error .bar {
    fill: color-mix(in srgb, var(--mud-palette-error) 18%, var(--mud-palette-surface) 82%);
    outline-color: color-mix(in srgb, var(--mud-palette-error) 48%, var(--mud-palette-lines-default) 52%);
}

.projects-gantt__chart .gantt .bar-wrapper.projects-gantt-task--error .bar-progress {
    fill: var(--mud-palette-error);
}

.projects-gantt__chart .gantt .bar-wrapper.projects-gantt-task--error .bar-label:not(.big) {
    fill: var(--mud-palette-error-text);
}

.projects-gantt__empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--mud-palette-text-secondary);
    background: color-mix(
        in srgb,
        var(--mud-palette-surface) 92%,
        var(--mud-palette-background-gray) 8%
    );
}