:root {
    /* Layout & Header */
    --header-bg: #f8f9fa;
    --header-border: #dee2e6;

    /* Gantt Global Colors */
    --gantt-link-color: #333;
    --gantt-link-hover: #000;
    --weekend-bg: #f4f7f4;
    --holiday-bg: #f4f7f4;

    /* UI Components & Picker */
    --ui-panel-bg: #ffffff;
    --ui-element-border-strong: #000000;
    --ui-element-border-light: #ddd;
    --ui-element-border-medium: #ccc;
    --ui-element-border-hover: #999;
    --ui-border-subtle: rgba(var(--black-rgb), 0.2);
    --ui-shadow-subtle: rgba(var(--black-rgb), 0.4);

    /* Task Balken Standard */
    --dhx-gantt-task-progress-color: rgba(var(--black-rgb), 0.2) !important;
    --dhx-timeline-border: #111;

    /* Task Farben (10 Auswahlmöglichkeiten) */
    --task-color-1: #3db9d3; /* Blue */
    --task-color-2: #6ab04c; /* Green */
    --task-color-3: #eb4d4b; /* Red */
    --task-color-4: #f0932b; /* Orange */
    --task-color-5: #686de0; /* Purple */
    --task-color-6: #22a6b3; /* Teal */
    --task-color-7: #ff7979; /* Pink */
    --task-color-8: #535c68; /* Grey */
    --task-color-9: #f9ca24; /* Gold */
    --task-color-10: #be2edd; /* Brown */

    /* Milestones */
    --milestone-bg: #333;
    --milestone-hover-bg: #000;
    --milestone-text: #333;

    /* Undo/Redo Buttons */
    --undo-redo-bg: #ffc107;
    --undo-redo-hover: #e0a800;

    /* Tooltips */
    --tooltip-bg: #333;
    --tooltip-color: #fff;
    --tooltip-shadow: rgba(var(--black-rgb), 0.3);

    /* Loading Overlay */
    --overlay-bg: rgba(var(--white-rgb), 0.7);
    --overlay-text-color: #333;

    /* Highlights */
    --parent-highlight-alpha: 0.65;
    --task-outside-color: #999;
    --today-marker-color: #ff0000;

    /* Common Colors */
    --white: #ffffff;
    --white-rgb: 255, 255, 255;
    --black: #000000;
    --black-rgb: 0, 0, 0;
    --text-color: #333;
    --text-muted: #6c757d;
    --debug-bg: lightcoral;

    /* MOCO Absences Styling Variables */
    --moco-vacation-bg: #3db9d3;
    --moco-vacation-border: #2c8ca0;
    --moco-unplannable-bg: #999;
    --moco-unplannable-border: #666;
    --moco-absence-bg: #eb4d4b;
    --moco-absence-border: #b13a38;
    --moco-group-row-bg: rgba(0, 0, 0, 0.05);
}

html,
body {
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.debug-output {
    position: absolute;
    bottom: 0px;
    height: 200px;
    background-color: var(--debug-bg);
    overflow-y: scroll;
}
.main-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.header-area {
    padding: 0 20px;
    background-color: var(--header-bg);
    border-bottom: 1px solid var(--header-border);
    flex-shrink: 0;
}

.header-row-1 {
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-row-2 {
    height: 30px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Spezielle Formatierung für Buildagil-Meilensteine */
/* Unterstreicht den Aufgabentitel im Grid (Index 0) und den Text im Chart (Span) */
.buildagil-milestone .gantt_cell[data-column-index="0"] .gantt_tree_content,
.buildagil-meeting .gantt_cell[data-column-index="0"] .gantt_tree_content,
span.buildagil-milestone,
span.buildagil-meeting {
    text-decoration: underline !important;
}

/* Verhindert die Unterstreichung für alle anderen Spalten (Datum, Farbe etc.) */
.buildagil-milestone .gantt_cell:not([data-column-index="0"]),
.buildagil-meeting .gantt_cell:not([data-column-index="0"]) {
    text-decoration: none !important;
}

/* --- Datepicker Customization --- */
.datepicker {
    z-index: 10001 !important; /* Über dhtmlx Lightbox (10000) */
}

/* Fix für Datepicker im Grid-Editor */
.gantt_grid_editor_container .datepicker {
    margin-top: 5px;
}

.gantt_datepicker_container .form-control {
    background-color: #fff !important;
}

/* Sidebar Datepicker Styling */
#ganttDateRange .form-control[readonly] {
    background-color: #fff !important;
    cursor: pointer;
}

/* dhtmlx Message Area (Benachrichtigungen oben rechts) unter die Topbar schieben */
.gantt_message_area {
    z-index: 10050 !important; /* Über Lightbox und Datepicker */
    top: 10px !important; /* Fallback */
    margin-top: var(--navbar-height, 60px) !important; /* Platz für das OOS Top-Menu lassen */
}

/* Sicherstellen, dass das Einstellungsfenster und sein Backdrop über allen Chart-Elementen liegen */
.gantt_cal_light {
    z-index: 10001 !important;
}
.gantt_cal_cover {
    z-index: 10000 !important;
}

/* Bestätigungs-Dialoge (z.B. beim Löschen) vor das Einstellungsfenster (Lightbox) holen */
.gantt_modal_box,
.dhtmlx_modal_box {
    z-index: 10010 !important;
}
.gantt_modal_cover,
.dhtmlx_modal_cover {
    z-index: 10009 !important;
}

.virtual-group-task .gantt_task_content {
    overflow: visible !important;
}

/* Verstecke den eigentlichen Balken für virtuelle Gruppen-Tasks */
.virtual-group-task {
    background: transparent !important;
    border: none !important;
}

.virtual-group-task .gantt_task_progress_wrapper {
    display: none !important;
}

/* Pointer-Deaktivierung für Meetings */
.gantt_row.buildagil-meeting .gantt_cell {
    cursor: default !important;
}

/* Pointer für virtuelle Gruppen (Sitzungs-Gruppen) im Grid */
.gantt_row.virtual-group-row .gantt_cell[data-column-name="text"] {
    cursor: pointer !important;
}

/* Cursor-Steuerung im Grid */
/* Pointer für editierbare Felder bei normalen Tasks und manuellen Meilensteinen */
.gantt_cell[data-column-id="text"],
.gantt_cell[data-column-name="text"],
.gantt_cell[data-column-id="start_date"],
.gantt_cell[data-column-name="start_date"],
.gantt_cell[data-column-id="end_date"],
.gantt_cell[data-column-name="end_date"],
.gantt_cell[data-column-id="color_class"],
.gantt_cell[data-column-name="color_class"],
.gantt_cell[data-column-id="color_class"] .grid-color-preview,
.gantt_cell[data-column-name="color_class"] .grid-color-preview {
    cursor: pointer !important;
}

/* Schreibgeschützte Buildagil-Meilensteine erhalten Standard-Cursor (auch für Unterelemente) */
.gantt_row.buildagil-milestone .gantt_cell,
.gantt_row.buildagil-milestone .gantt_cell .grid-color-preview,
.gantt_row.buildagil-milestone .gantt_cell .gantt_tree_content,
.gantt_row.buildagil-milestone .gantt_cell .gantt_tree_icon,
.gantt_row.buildagil-meeting .gantt_cell,
.gantt_row.buildagil-meeting .gantt_cell .gantt_tree_content,
.gantt_row.buildagil-meeting .gantt_cell .gantt_tree_icon {
    cursor: default !important;
}

/* Fixierte Beschriftung für Sitzungen in der Timeline */
.timeline-fixed-label {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 22px;
    z-index: 101;
    pointer-events: none;
    white-space: nowrap;
    font-size: var(--dhx-gantt-task-font-size) !important;
    color: var(--text-color);
    font-weight: bold;
    text-shadow: 1px 1px 0 var(--white), -1px -1px 0 var(--white), 1px -1px 0 var(--white), -1px 1px 0 var(--white);
}

/* Grau-Färbung für Tasks außerhalb des Zeitraums */
.task-outside-timescale .gantt_cell,
.task-outside-timescale .gantt_tree_content,
.task-outside-timescale .gantt_tree_icon {
    color: var(--task-outside-color) !important;
    opacity: 0.7;
}

#gantt_here {
    flex-grow: 1;
    width: 100%;
    height: 100%;
    position: relative; /* Wichtig für das absolute Overlay der Labels */
}

/* MOCO Loading Indicator */
#moco_loader {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.9);
    padding: 8px 15px;
    border-radius: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 1000;
    pointer-events: none;
    border: 1px solid rgba(13, 110, 253, 0.2);
}

.moco-loader-content {
    display: flex;
    align-items: center;
}

#userFilterContainer.filter-disabled {
    opacity: 0.4;
    pointer-events: none;
    background-color: rgba(0,0,0,0.2) !important;
}

/* Customizing Gantt scrollbar to fit Bootstrap style if needed */
.gantt_container {
    border-radius: 0;
}

/* Custom Gantt Colors */
:root,
:root[data-gantt-theme="broadway"] {
    --dhx-gantt-link-background: var(--gantt-link-color) !important;
    --dhx-gantt-link-background-hover: var(--gantt-link-hover) !important;
    --dhx-gantt-grid-scale-border-vertical: 1px solid var(--dhx-timeline-border) !important;
}

/* Offener Pfeil (Chevron) via SVG */
.gantt_task_link .gantt_link_arrow {
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    background-color: transparent !important;
    border: none !important;
    width: 10px !important;
    height: 10px !important;
}

/* Loading Overlay */
#gantt_save_overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--overlay-bg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    backdrop-filter: blur(2px);
}

.loading-container {
    text-align: center;
}

.loading-spinner {
    width: 165px;
    height: 165px;
    /* 90 Grad gedreht wie gewünscht, keine Animation da SVG selbst animiert ist */
    transform: rotate(90deg);
}

.loading-text {
    margin-top: 15px;
    font-weight: bold;
    color: var(--overlay-text-color);
    font-family: sans-serif;
}

.gantt_task_link .gantt_link_arrow:before {
    content: none !important; /* Entfernt das Standard-Icon-Symbol */
}

/* Eigene Klasse für Undo/Redo Buttons */
.btn-undo-redo {
    background-color: var(--undo-redo-bg) !important;
    border-color: var(--ui-element-border-strong) !important;
    color: var(--black) !important;
}

#userMenuDropdown:hover {
    opacity: 0.7;
}

.dropdown-header {
    font-size: 0.9rem;
    padding: 0.8rem 1.2rem;
    min-width: 220px;
}

.btn-undo-redo:hover:not(:disabled) {
    background-color: var(--undo-redo-hover) !important;
}

.btn-undo-redo:disabled {
    background-color: color-mix(in srgb, var(--undo-redo-bg), white 70%) !important;
    border-color: var(--ui-element-border-strong) !important;
    color: var(--text-muted) !important;
    cursor: not-allowed;
}

/* Pfeil nach rechts */
.gantt_link_arrow_right {
    /* Hinweis: Hex-Codes in Data-URIs müssen als %23 kodiert sein */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 1l4 4-4 4' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    margin-left: -2px !important;
	margin-top: -1px !important;
}

/* --- Grid Color Picker & Preview --- */
.grid-color-preview {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin: 7px auto; /* Leicht erhöht für bessere vertikale Zentrierung */
    border: 1px solid var(--ui-border-subtle);
    background-color: var(--dhx-gantt-task-background, var(--task-color-1));
    cursor: pointer;
    transition: transform 0.1s;
}

.grid-color-preview:hover {
    transform: scale(1.1);
}

/* Deaktivierung der Hover-Animation für schreibgeschützte Meilensteine */
.buildagil-milestone .grid-color-preview:hover {
    transform: none !important;
}

.grid-color-preview.task-color-1 { background-color: var(--task-color-1); }
/* ... (existing colors) */
.grid-color-preview.task-color-2 { background-color: var(--task-color-2); }
.grid-color-preview.task-color-3 { background-color: var(--task-color-3); }
.grid-color-preview.task-color-4 { background-color: var(--task-color-4); }
.grid-color-preview.task-color-5 { background-color: var(--task-color-5); }
.grid-color-preview.task-color-6 { background-color: var(--task-color-6); }
.grid-color-preview.task-color-7 { background-color: var(--task-color-7); }
.grid-color-preview.task-color-8 { background-color: var(--task-color-8); }
.grid-color-preview.task-color-9 { background-color: var(--task-color-9); }
.grid-color-preview.task-color-10 { background-color: var(--task-color-10); }

/* Parent Task Styling (Fettgedruckter Text) */
.parent-task-row .gantt_tree_content,
.parent-task-bar .gantt_task_content {
    font-weight: bold !important;
}

/* Schwarze Open/Close Icons (Dreiecke) im Grid */
.gantt_tree_icon.gantt_close,
.gantt_tree_icon.gantt_open {
    filter: brightness(0);
}

/* Timeline Toggle Icon (+/-) */
.timeline-toggle-icon {
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.9rem;
    color: inherit;
    opacity: 0.8;
    transition: transform 0.1s, opacity 0.1s;
    cursor: pointer;
    z-index: 1;
}

.timeline-toggle-icon:hover {
    opacity: 1;
    transform: translateY(-50%) scale(1.2);
}

.grid-color-picker-inline {
    background: var(--ui-panel-bg) !important;
    border: 1px solid var(--ui-element-border-medium);
    padding: 8px;
    box-shadow: 0 4px 15px var(--ui-shadow-subtle);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 130px !important; /* Festschreiben gegen Spaltenbreite */
    height: auto !important;
    position: absolute;
    z-index: 10002;
    border-radius: 6px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Mittig über der Zelle aufpoppen */
}

.grid-color-picker-inline .color-item {
    width: 20px;
    height: 20px;
    margin: 3px;
    cursor: pointer;
    border-radius: 3px;
    border: 1px solid var(--ui-border-subtle);
    transition: transform 0.1s;
}

.grid-color-picker-inline .color-item.task-color-1 { background-color: var(--task-color-1); }
.grid-color-picker-inline .color-item.task-color-2 { background-color: var(--task-color-2); }
.grid-color-picker-inline .color-item.task-color-3 { background-color: var(--task-color-3); }
.grid-color-picker-inline .color-item.task-color-4 { background-color: var(--task-color-4); }
.grid-color-picker-inline .color-item.task-color-5 { background-color: var(--task-color-5); }
.grid-color-picker-inline .color-item.task-color-6 { background-color: var(--task-color-6); }
.grid-color-picker-inline .color-item.task-color-7 { background-color: var(--task-color-7); }
.grid-color-picker-inline .color-item.task-color-8 { background-color: var(--task-color-8); }
.grid-color-picker-inline .color-item.task-color-9 { background-color: var(--task-color-9); }
.grid-color-picker-inline .color-item.task-color-10 { background-color: var(--task-color-10); }

.grid-color-picker-inline .color-item:hover {
    transform: scale(1.2);
}

.grid-color-picker-inline .color-item.selected {
    border: 2px solid var(--ui-element-border-strong);
}

/* Pfeil nach links */
.gantt_link_arrow_left {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M8 1L4 5l4 4' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	margin-top: 0px !important;
	transform: rotate(0deg) !important;
}

/* Hover-Effekte für Pfeile */
.gantt_task_link:hover .gantt_link_arrow_right {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
.gantt_task_link:hover .gantt_link_arrow_left {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M8 1L4 5l4 4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* Wochenende Markierung */
.weekend {
    background: var(--weekend-bg) !important;
}

.holiday {
    background: var(--holiday-bg) !important;
}

/* Heute-Hervorhebung */
/* Die Spalteneinfärbung wird nun nicht mehr verwendet, 
   da eine vertikale Linie für alle Skalen eingesetzt wird.
.today-column {
    background-color: var(--today-column-bg) !important;
}
*/

.gantt_task {
    position: relative;
}

.gantt-today-line {
    position: absolute;
    width: 2px;
    height: 100%;
    top: 0;
    background-color: var(--today-marker-color);
    z-index: 5; /* Über den Balken (z-index 1-3), aber unter Popups und Menüs */
    pointer-events: none;
    display: none; /* Wird via JS eingeblendet */
}

.gantt-today-label {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--today-marker-color);
    color: #fff;
    font-size: 9px;
    line-height: 1;
    font-weight: bold;
    padding: 2px 4px;
    white-space: nowrap;
    border-radius: 0 0 3px 3px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Erlaubt extrem schmale Spalten ohne dass Text das Layout blockiert */
.gantt_scale_cell {
    overflow: hidden !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    padding: 0 2px !important;
}

/* Custom Milestone Styling (Raute) */
.custom_milestone {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.custom_milestone:before {
    content: "";
    position: absolute;
    top: calc(50% - 2px); /* 2px nach oben verschoben */
    left: 0;
    width: 12px;
    height: 12px;
    /* Nutzt die gewählte Task-Farbe oder den Milestone-Standard */
    background-color: var(--dhx-gantt-task-background, var(--milestone-bg)) !important;
    border: 1px solid var(--ui-element-border-strong) !important;
    transform: translate(-50%, -50%) rotate(45deg);
    z-index: 2;
    cursor: move !important;
}

.custom_milestone:hover:before {
    background-color: var(--milestone-hover-bg);
}

/* Verhindert Resize-Handles und Progress-Slider bei Meilensteinen */
.custom_milestone .gantt_task_drag,
.custom_milestone .gantt_task_progress_drag,
.custom_milestone .gantt_task_progress_wrapper {
    display: none !important;
}

.link_to_milestone .gantt_link_arrow_right {
    margin-left: -8px !important;
}
.link_to_milestone .gantt_link_arrow_left {
    margin-left: 3px !important;
}

/* Text neben der Raute - Vertikale Ausrichtung fixiert */
.gantt_side_content.gantt_right {
    padding-left: 22px !important;
    color: var(--milestone-text);
    font-weight: 500;
    display: flex;
    align-items: center;
    height: 100%;
    top: 0;
    font-size: var(--dhx-gantt-task-font-size) !important;
}

.gantt_side_content.gantt_link_crossing {
    margin-top: 0 !important;
}

/* Fix: Verhindert Flackern des Tooltips beim Ziehen und vereinheitlicht Look */
.gantt_tooltip, 
.custom_drag_tooltip {
    pointer-events: none !important;
    padding: 10px 15px !important;
    white-space: nowrap !important;
    box-shadow: 0 5px 15px var(--tooltip-shadow) !important;
    border-radius: 4px !important;
}

/* Parent Duration Background for Children - Multi-Layer Support (Standard Edition) */
.parent-highlight-cell {
    position: relative;
    /* Drei Gradienten-Ebenen: Oben (Parent), Mitte (Grandparent), Unten (G-Grandparent) */
    background-image: 
        linear-gradient(to right, 
            transparent var(--hl-s, 0%), var(--hl-c, transparent) var(--hl-s, 0%), 
            var(--hl-c, transparent) var(--hl-e, 100%), transparent var(--hl-e, 100%)
        ),
        linear-gradient(to right, 
            transparent var(--f1-s, 0%), var(--f1-c, transparent) var(--f1-s, 0%), 
            var(--f1-c, transparent) var(--f1-e, 100%), transparent var(--f1-e, 100%)
        ),
        linear-gradient(to right, 
            transparent var(--f2-s, 0%), var(--f2-c, transparent) var(--f2-s, 0%), 
            var(--f2-c, transparent) var(--f2-e, 100%), transparent var(--f2-e, 100%)
        ) !important;
    
    /* Globaler Weiß-Schleier zur Aufhellung aller Ebenen gleichzeitig */
    box-shadow: inset 0 0 0 1000px rgba(var(--white-rgb), var(--parent-highlight-alpha)) !important;
    background-color: transparent !important;
}

/* Tooltip Styling */
.gantt_tooltip, 
.custom_drag_tooltip {
    background-color: var(--tooltip-bg) !important;
    color: var(--tooltip-color) !important;
    border: none !important;
    font-size: 13px !important;
    font-family: var(--dhx-gantt-font-family), sans-serif !important;
    margin: 0 !important;
    
    /* Absolute Gleichheit durch Flex-Layout erzwingen, 
       aber nur wenn das Element nicht explizit ausgeblendet ist */
    flex-direction: column !important;
    gap: 4px !important; /* Vertikaler Abstand zwischen den Zeilen */
    line-height: 1 !important;
}

.gantt_tooltip:not([style*="display: none"]), 
.custom_drag_tooltip:not([style*="display: none"]) {
    display: flex !important;
}

/* Aggressiver Reset für alle Kinder der Tooltips */
.gantt_tooltip *, 
.custom_drag_tooltip * {
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: inline-block !important; /* Verhindert Zeilenumbrüche innerhalb der Zeile */
}

/* Einheitliche Zeilen */
.tooltip-row {
    display: flex !important;
    align-items: center !important;
    min-height: 18px !important;
}

/* Dynamische Task-Farben Klassen */
.task-color-1  { --dhx-gantt-task-background: var(--task-color-1) !important; }
.task-color-2  { --dhx-gantt-task-background: var(--task-color-2) !important; }
.task-color-3  { --dhx-gantt-task-background: var(--task-color-3) !important; }
.task-color-4  { --dhx-gantt-task-background: var(--task-color-4) !important; }
.task-color-5  { --dhx-gantt-task-background: var(--task-color-5) !important; }
.task-color-6  { --dhx-gantt-task-background: var(--task-color-6) !important; }
.task-color-7  { --dhx-gantt-task-background: var(--task-color-7) !important; }
.task-color-8  { --dhx-gantt-task-background: var(--task-color-8) !important; }
.task-color-9  { --dhx-gantt-task-background: var(--task-color-9) !important; }
.task-color-10 { --dhx-gantt-task-background: var(--task-color-10) !important; }

/* Unterstützung für Meilensteine (Raute Farbe anpassen) */
.custom_milestone.task-color-1:before  { background-color: var(--task-color-1) !important; }
.custom_milestone.task-color-2:before  { background-color: var(--task-color-2) !important; }
.custom_milestone.task-color-3:before  { background-color: var(--task-color-3) !important; }
.custom_milestone.task-color-4:before  { background-color: var(--task-color-4) !important; }
.custom_milestone.task-color-5:before  { background-color: var(--task-color-5) !important; }
.custom_milestone.task-color-6:before  { background-color: var(--task-color-6) !important; }
.custom_milestone.task-color-7:before  { background-color: var(--task-color-7) !important; }
.custom_milestone.task-color-8:before  { background-color: var(--task-color-8) !important; }
.custom_milestone.task-color-9:before  { background-color: var(--task-color-9) !important; }
.custom_milestone.task-color-10:before { background-color: var(--task-color-10) !important; }

/* Farbe im Lightbox Dropdown - Veraltet durch Color Picker */
.gantt_section_color select {
    display: none !important;
}

/* Neuer Color Picker Grid Look */
.color-picker-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 5px;
}

.color-item {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    cursor: pointer;
    border: 2px solid var(--ui-element-border-light);
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.color-item:hover {
    transform: scale(1.1);
    border-color: var(--ui-element-border-hover);
}

.color-item.selected {
    border-color: var(--ui-element-border-strong) !important;
    box-shadow: 0 0 4px var(--ui-shadow-subtle);
}

.color-item[data-color="task-color-1"] { background-color: var(--task-color-1); }
.color-item[data-color="task-color-2"] { background-color: var(--task-color-2); }
.color-item[data-color="task-color-3"] { background-color: var(--task-color-3); }
.color-item[data-color="task-color-4"] { background-color: var(--task-color-4); }
.color-item[data-color="task-color-5"] { background-color: var(--task-color-5); }
.color-item[data-color="task-color-6"] { background-color: var(--task-color-6); }
.color-item[data-color="task-color-7"] { background-color: var(--task-color-7); }
.color-item[data-color="task-color-8"] { background-color: var(--task-color-8); }
.color-item[data-color="task-color-9"] { background-color: var(--task-color-9); }
.color-item[data-color="task-color-10"] { background-color: var(--task-color-10); }

/* Dynamische Farben für Sitzungstypen (Explizite Zuweisung für die Kreise) */
.buildagil-meeting-task.mt-type-1:before  { background-color: var(--task-color-1) !important; }
.buildagil-meeting-task.mt-type-2:before  { background-color: var(--task-color-2) !important; }
.buildagil-meeting-task.mt-type-3:before  { background-color: var(--task-color-3) !important; }
.buildagil-meeting-task.mt-type-4:before  { background-color: var(--task-color-4) !important; }
.buildagil-meeting-task.mt-type-5:before  { background-color: var(--task-color-5) !important; }
.buildagil-meeting-task.mt-type-6:before  { background-color: var(--task-color-6) !important; }
.buildagil-meeting-task.mt-type-7:before  { background-color: var(--task-color-7) !important; }
.buildagil-meeting-task.mt-type-8:before  { background-color: var(--task-color-8) !important; }
.buildagil-meeting-task.mt-type-9:before  { background-color: var(--task-color-9) !important; }
.buildagil-meeting-task.mt-type-10:before { background-color: var(--task-color-10) !important; }

.gantt_tooltip_dragging {
    display: block !important;
    opacity: 1 !important;
    z-index: 10001 !important;
}



/* MOCO Absences Styling */
.moco-vacation {
    background-color: var(--moco-vacation-bg) !important;
    border-color: var(--moco-vacation-border) !important;
    opacity: 0.8;
}

.moco-unplannable {
    background-color: var(--moco-unplannable-bg) !important;
    border-color: var(--moco-unplannable-border) !important;
    opacity: 0.6;
}

.moco-absence {
    background-color: var(--moco-absence-bg) !important;
    border-color: var(--moco-absence-border) !important;
    opacity: 0.8;
}

.moco-root-group {
    background-color: #f1f1f1 !important;
    font-weight: bold !important;
}

.moco-user-group {
    background-color: #fafafa !important;
    font-style: italic !important;
}

.moco-absence-bar {
    position: absolute;
    top: 50%;
    height: 12px;
    margin-top: -6px;
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,0.2);
    z-index: 10;
    pointer-events: auto;
}

.virtual-child-element {
    cursor: pointer;
}

/* Virtual Group and Session Icon Styles */
.grouped-session-icon {
    content: '';
    border-radius: 50% !important;
    width: 15px;
    height: 15px;
    border: 1.5px solid var(--black) !important;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--icon-color, var(--text-color));
    z-index: 10;
    pointer-events: auto;
}

.virtual-group-task .gantt_task_content {
    overflow: visible !important;
}

.virtual-group-task {
    background: transparent !important;
    border: none !important;
}

/* Background for MOCO user groups */
.moco-user-group {
    background-color: var(--moco-group-row-bg) !important;
}

/* Hide expand/collapse triangle but preserve space for MOCO user groups in Grid */
.gantt_row.moco-user-group .gantt_tree_icon.gantt_close, 
.gantt_row.moco-user-group .gantt_tree_icon.gantt_open {
    visibility: hidden !important;
}

/* Set default cursor for MOCO user rows and bars (non-interactive) */
.gantt_row.moco-user-group,
.gantt_row.moco-user-group .gantt_cell,
.gantt_row.moco-user-group .gantt_tree_content,
.gantt_row.moco-user-group .gantt_tree_icon,
.gantt_task_row.moco-user-group,
.gantt_task_line.moco-user-group,
.gantt_task_line.moco-user-group .gantt_task_content,
.grouped-moco-bar {
    cursor: default !important;
}

/* Specific override for virtual group pointer in grid */
.gantt_row.moco-user-group.virtual-group-row .gantt_cell[data-column-name="text"] {
    cursor: default !important;
}

.virtual-group-task .gantt_task_progress_wrapper {
    display: none !important;
}

/* Styling for MOCO bars in collapsed user groups */
.grouped-moco-bar {
    position: absolute;
    top: 50%;
    height: 12px;
    margin-top: -6px;
    border-radius: 2px;
    border: 1px solid rgba(0,0,0,0.2);
    z-index: 10;
    pointer-events: auto;
}

/* Additional MOCO styles */
.moco-unplannable {
    background-color: #999 !important;
    border-color: #666 !important;
    opacity: 0.6;
}