/* ============================
   Gantt Chart — Scope Timeline
   ============================ */

/* Main container */
.gantt-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    border: 1px solid var(--border-docs, rgba(255, 255, 255, 0.06));
    border-radius: var(--card-radius);
    /* Spacing comes from the tab panel's standard padding. */
    margin: 0;
    overflow: hidden;
    min-height: 0;
}

/* Header */
.gantt-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px var(--card-pad);
    /* Standard card-header band (matches the Tree tab cards). */
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.06));
    flex-shrink: 0;
}

.gantt-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.gantt-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Body: sidebar + timeline */
.gantt-body {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* Left sidebar (task labels, sticky) */
.gantt-sidebar {
    width: 220px;
    min-width: 220px;
    border-right: 2px solid var(--border-color, rgba(255, 255, 255, 0.06));
    overflow-y: hidden;
    flex-shrink: 0;
    background: var(--bg-primary);
    z-index: 2;
}

.gantt-sidebar-header {
    height: 52px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--border-color, rgba(255, 255, 255, 0.06));
    background: var(--bg-secondary, #1a1a2e);
    /* Mirror the timeline's sticky date header. */
    position: sticky;
    top: 0;
    z-index: 5;
}

.gantt-project-group {
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.06));
}

.gantt-project-label {
    height: 32px;
    line-height: 32px;
    padding: 0 16px;
    font-weight: 600;
    font-size: 12px;
    color: var(--text-primary);
    background: var(--bg-secondary, #1a1a2e);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Pin the scope title below the sidebar header while its group is in
       view (the next group pushes it out), so it stays reachable for the
       right-click "Nova task" even deep into a long scope. */
    position: sticky;
    top: 52px;
    z-index: 4;
}

.gantt-task-label {
    display: flex;
    align-items: center;
    height: 36px;
    line-height: 36px;
    padding: 0 16px 0 12px;
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.gantt-task-label.milestone-label {
    font-style: italic;
}

/* Right scrollable timeline */
.gantt-timeline-scroll {
    flex: 1;
    overflow-x: auto;
    overflow-y: auto;
    position: relative;
    min-width: 0;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.gantt-timeline-scroll:active {
    cursor: grabbing;
}

/* Timeline header (date columns) */
.gantt-timeline-header {
    position: sticky;
    top: 0;
    z-index: 999;
    background: var(--bg-secondary, #1a1a2e);
    border-bottom: 2px solid var(--border-color, rgba(255, 255, 255, 0.06));
    min-width: fit-content;
    height: 52px;
    overflow: hidden;
}

.gantt-header-months {
    display: flex;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.gantt-month-cell {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
    padding: 6px 0;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.04);
    white-space: nowrap;
    overflow: hidden;
}

.gantt-header-days {
    display: flex;
}

.gantt-date-cell {
    flex-shrink: 0;
    text-align: center;
    font-size: 10px;
    color: var(--text-secondary);
    padding: 4px 0;
    border-right: 1px solid rgba(255, 255, 255, 0.03);
    box-sizing: border-box;
}

.gantt-date-cell.weekend {
    background: rgba(255, 255, 255, 0.015);
    color: var(--text-disabled, #555);
}

.gantt-date-cell.today {
    color: var(--accent, #6366f1);
    font-weight: 700;
    background: rgba(99, 102, 241, 0.08);
}

/* Timeline body */
.gantt-timeline-body {
    position: relative;
    min-width: fit-content;
}

/* Grid lines (vertical, behind bars) */
.gantt-grid-lines {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
}

.gantt-grid-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(255, 255, 255, 0.025);
}

.gantt-grid-line.weekend {
    background: rgba(255, 255, 255, 0.01);
    width: 2px;
}

/* Project rows section in timeline */
.gantt-project-rows {
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.06));
}

.gantt-project-row-header {
    height: 32px;
    background: var(--bg-secondary, #1a1a2e);
    position: relative;
}

/* Task row */
.gantt-row {
    height: 36px;
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    z-index: 1;
}

/* Bar (task with start + end) */
.gantt-bar {
    position: absolute;
    top: 6px;
    height: 24px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 0 8px;
    cursor: pointer;
    transition: opacity 0.15s, box-shadow 0.15s;
    min-width: 6px;
    opacity: 0.85;
    z-index: 1;
}

.gantt-bar:hover {
    opacity: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    z-index: 2;
}

.gantt-bar-label {
    font-size: 11px;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    line-height: 1;
}

/* Milestone (single date) */
.gantt-milestone {
    position: absolute;
    top: 11px;
    width: 14px;
    height: 14px;
    transform: rotate(45deg);
    border: 2.5px solid;
    background: var(--bg-primary);
    cursor: pointer;
    margin-left: -7px;
    z-index: 1;
    transition: transform 0.15s, box-shadow 0.3s ease-out;
}

/* Reveal highlight: glow the bar/diamond of a task scrolled into view. */
.gantt-row-highlight .gantt-bar,
.gantt-row-highlight .gantt-milestone {
    box-shadow: 0 0 0 3px var(--accent, #6366f1), 0 0 16px 3px var(--accent, #6366f1);
    z-index: 6;
}

.gantt-milestone:hover {
    transform: rotate(45deg) scale(1.2);
}

/* Dateless task: ghost pill pinned just after the today line. */
.gantt-unscheduled {
    position: absolute;
    top: 8px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-style: italic;
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--text-primary) 4%, transparent);
    border: 1px dashed color-mix(in srgb, var(--text-secondary) 55%, transparent);
    border-radius: 4px; /* matches .gantt-bar */
    cursor: pointer;
    z-index: 1;
    transition: border-color 0.15s, color 0.15s, box-shadow 0.3s ease-out;
}

.gantt-unscheduled:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* The white-overlay handle hover is invisible on the light pill — use an
   accent tint there instead. */
.gantt-unscheduled .gantt-bar-handle:hover,
.gantt-unscheduled .gantt-bar-handle:active {
    background: color-mix(in srgb, var(--accent) 22%, transparent);
}

/* Quick date popover (pill click / context-menu "Ajustar datas"). */
.popover-panel.gantt-dates-popover {
    width: 230px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
}

.gantt-dates-popover .gantt-dates-field label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}

.gantt-row-highlight .gantt-unscheduled {
    box-shadow: 0 0 0 3px var(--accent, #6366f1), 0 0 16px 3px var(--accent, #6366f1);
    z-index: 6;
}

/* Sidebar label of a dateless task: dimmed, like its ghost pill. */
.gantt-task-label.unscheduled-label .gantt-task-name {
    opacity: 0.55;
    font-style: italic;
}

/* Hover guide: dotted vertical line at the start boundary of the day under
   the mouse in the date header, with the full date pinned at its top (right
   below the sticky header, where the hover necessarily is). */
.gantt-hover-guide {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 2px dotted var(--accent, #6366f1);
    opacity: 0.75;
    z-index: 3;
    pointer-events: none;
}

/* Lives inside the sticky .gantt-timeline-header, at the guide's x. */
.gantt-hover-guide-label {
    position: absolute;
    bottom: 2px;
    background: var(--accent, #6366f1);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 2;
}

/* Near the right edge of the timeline: open to the LEFT of the guide so the
   header's overflow:hidden doesn't clip it. */
.gantt-hover-guide-label.flip {
    transform: translateX(-100%);
}

/* Today marker line */
.gantt-today-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--accent, #6366f1);
    z-index: 3;
    opacity: 0.7;
    pointer-events: none;
}

.gantt-today-label {
    position: absolute;
    top: -20px;
    left: -14px;
    font-size: 9px;
    font-weight: 700;
    color: var(--accent, #6366f1);
    white-space: nowrap;
}

/* Empty state */
.gantt-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 40px;
    color: var(--text-secondary);
    text-align: center;
    flex: 1;
}

.gantt-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.gantt-empty-text {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 8px;
}

.gantt-empty-sub {
    font-size: 13px;
    color: var(--text-disabled, #6b7280);
}

/* Undated tasks section */
.gantt-footer {
    border-top: 2px solid var(--border-color, rgba(255, 255, 255, 0.06));
    padding: 16px 24px;
    flex-shrink: 0;
}

.gantt-footer-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.gantt-footer-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gantt-footer-count {
    font-size: 11px;
    color: var(--text-disabled, #6b7280);
    background: var(--bg-tertiary, #1f2937);
    padding: 1px 8px;
    border-radius: 10px;
}

.gantt-footer-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-height: 160px;
    overflow-y: auto;
}

.gantt-footer-card {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: var(--bg-secondary, #1a1a2e);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.06));
    border-radius: 6px;
    font-size: 12px;
    cursor: default;
    transition: border-color 0.15s;
}

.gantt-footer-card:hover {
    border-color: var(--text-secondary);
}

.gantt-footer-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.gantt-footer-name {
    color: var(--text-primary);
    white-space: nowrap;
}

.gantt-footer-project {
    color: var(--text-disabled, #6b7280);
    font-size: 11px;
    white-space: nowrap;
}

/* Collapsible project toggle */
.gantt-project-toggle-label {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}

.gantt-project-toggle-label:hover {
    color: var(--accent, #6366f1);
}

.gantt-project-chevron {
    font-size: 10px;
    transition: transform 0.2s;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.gantt-project-chevron.collapsed {
    transform: rotate(-90deg);
}

/* Clickable task labels & undated cards */
.gantt-task-clickable {
    cursor: pointer;
}

.gantt-task-label.gantt-task-clickable:hover {
    color: var(--text-primary);
    background: var(--bg-secondary, #1a1a2e);
}

.gantt-footer-card.gantt-task-clickable {
    cursor: pointer;
}

.gantt-project-row-header {
    cursor: pointer;
}

.gantt-project-row-header:hover {
    opacity: 0.6;
}

/* ── Drag handles on gantt bars ── */
.gantt-bar-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: col-resize;
    z-index: 3;
    border-radius: 4px;
    transition: background 0.15s;
}

.gantt-bar-handle:hover,
.gantt-bar-handle:active {
    background: rgba(255, 255, 255, 0.25);
}

.gantt-bar-handle-left {
    left: 0;
    border-radius: 4px 0 0 4px;
}

.gantt-bar-handle-right {
    right: 0;
    border-radius: 0 4px 4px 0;
}

/* Drag tooltip (date preview) */
.gantt-drag-tooltip {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-primary, #0f0f23);
    color: var(--text-primary);
    border: 1px solid var(--accent, #6366f1);
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* While dragging, disable bar transitions and add outline */
.gantt-bar:active {
    transition: none;
}

/* ── Tag expand/collapse buttons on project header ── */
.gantt-tag-toggle-btns {
    margin-left: auto;
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.gantt-tag-toggle-btn {
    background: none;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0 4px;
    border-radius: 3px;
    font-size: 11px;
    line-height: 18px;
    transition: background 0.15s, color 0.15s;
}

.gantt-tag-toggle-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* ── Tag sub-groups ── */
.gantt-tag-group {
    border-left: 2px solid var(--text-disabled, #555);
    margin-left: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.gantt-tag-label {
    height: 28px;
    line-height: 28px;
    padding: 0 10px;
    font-weight: 600;
    font-size: 11px;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.02);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 6px;
}

.gantt-tag-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.gantt-tag-row-header {
    height: 28px;
    position: relative;
    background: rgba(255, 255, 255, 0.02);
    cursor: pointer;
}

.gantt-tag-row-header:hover {
    background: rgba(255, 255, 255, 0.04);
}

.gantt-tag-rows {
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

/* ── Progress bars (on project + tag headers) ── */
.gantt-progress-bar {
    background-color: #dfdfdf;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 14px;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.gantt-progress-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 7px;
    transition: width 0.3s ease;
}

.gantt-progress-label {
    position: relative;
    z-index: 1;
    font-size: 9px;
    font-weight: 700;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    width: 100%;
    text-align: center;
    line-height: 14px;
}

/* Collapsed state — hide task rows in both sidebar and timeline */
.gantt-project-group.gantt-collapsed .gantt-task-label,
.gantt-project-group.gantt-collapsed .gantt-tag-group,
.gantt-project-rows.gantt-collapsed .gantt-row,
.gantt-project-rows.gantt-collapsed .gantt-tag-rows {
    display: none;
}

/* Tag collapsed state — hide tasks within tag group */
.gantt-tag-group.gantt-tag-collapsed .gantt-task-label {
    display: none;
}

.gantt-tag-rows.gantt-tag-collapsed .gantt-row {
    display: none;
}

/* Task name truncation inside flex label */
.gantt-task-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Comment button on gantt task labels */
.gantt-comment-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-right: 2px;
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.15s;
    border-radius: 3px;
}

.gantt-comment-btn.has-comments {
    opacity: 1;
}

.gantt-task-label:hover .gantt-comment-btn {
    opacity: 1;
}

.gantt-comment-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

.gantt-comment-icon {
    font-size: 14px;
    line-height: 1;
}

.gantt-comment-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 15px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--accent);
    color: white;
    font-size: 9px;
    font-weight: 600;
}

.gantt-resize-handle {
    width: 5px;
    flex-shrink: 0;
    cursor: col-resize;
    background: transparent;
    z-index: 3;
    transition: background 0.15s;
    border-left: 2px dashed var(--bg-secondary);
}
.gantt-resize-handle:hover,
.gantt-resize-handle:active {
    background: var(--accent-color, #6366f1);
}