/* ── Gantt Chart ──────────────────────────────────────────────────────────────
   Layout:
     .gantt-page-wrap          full-page wrapper (flex column)
     .gantt-wrap               inner card (toolbar + chart)
     .gantt-toolbar            header bar with title + controls
     .gantt-chart              the chart itself
     .gantt-header-row         fixed header with task-label col + date cells
     .gantt-rows-wrap          scrollable rows area
     .gantt-rows               collection of task rows
     .gantt-row                one task row (label + bars area)
     .gantt-row-label          fixed 200px task name column
     .gantt-row-bars           flex fill: holds background stripes + the bar
     .gantt-bg-cell            background stripe per day column
     .gantt-bar                positioned bar (left/width in %)
     .gantt-bar-progress       progress fill overlay inside bar
     .gantt-bar-text           label inside the bar
────────────────────────────────────────────────────────────────────────────── */

/* ── Page wrapper ─────────────────────────────────────────────────────────── */
.gantt-page-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  padding: 0 1rem 1rem;
}

.gantt-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  background: var(--lysis-surface, #fff);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--lysis-border, #e0e0e0);
  min-height: 0;
}

/* ── Loading / error placeholders ────────────────────────────────────────── */
.gantt-page-loading,
.gantt-page-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 4rem;
  color: var(--lysis-text-muted, #888);
}
.gantt-page-loading .material-symbols-outlined,
.gantt-page-error  .material-symbols-outlined {
  font-size: 3rem;
}
.gantt-page-error {
  color: var(--lysis-danger, #d32f2f);
}

/* ── Toolbar ──────────────────────────────────────────────────────────────── */
.gantt-toolbar {
  display:     flex;
  align-items: center;
  padding:     0.75rem 1rem;
  border-bottom: 1px solid var(--lysis-border, #e0e0e0);
  gap: 1rem;
  flex-shrink: 0;
}

.gantt-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gantt-toolbar-right {
  display:     flex;
  align-items: center;
  gap:         0.75rem;
}

/* view-mode toggle */
.gantt-view-toggle {
  display: flex;
  border: 1px solid var(--lysis-border, #e0e0e0);
  border-radius: 4px;
  overflow: hidden;
}

.gantt-view-btn {
  padding: 0.25rem 0.75rem;
  background: transparent;
  border: none;
  border-right: 1px solid var(--lysis-border, #e0e0e0);
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--lysis-text, #333);
  transition: background 0.15s;
}
.gantt-view-btn:last-child { border-right: none; }
.gantt-view-btn:hover { background: var(--lysis-surface-hover, #f5f5f5); }
.gantt-view-btn.active {
  background: var(--lysis-accent, #4f7bff);
  color: #fff;
}

/* nav controls */
.gantt-nav {
  display:     flex;
  align-items: center;
  gap:         0.25rem;
}

.gantt-nav-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           2rem;
  height:          2rem;
  border:          1px solid var(--lysis-border, #e0e0e0);
  border-radius:   4px;
  background:      transparent;
  cursor:          pointer;
  color:           var(--lysis-text, #333);
  transition:      background 0.15s;
}
.gantt-nav-btn:hover { background: var(--lysis-surface-hover, #f5f5f5); }
.gantt-nav-btn .material-symbols-outlined { font-size: 1.1rem; }

.gantt-today-btn {
  padding:       0.25rem 0.75rem;
  border:        1px solid var(--lysis-border, #e0e0e0);
  border-radius: 4px;
  background:    transparent;
  cursor:        pointer;
  font-size:     0.8rem;
  color:         var(--lysis-text, #333);
  transition:    background 0.15s;
}
.gantt-today-btn:hover { background: var(--lysis-surface-hover, #f5f5f5); }

/* ── Chart body ───────────────────────────────────────────────────────────── */
.gantt-chart {
  display:   flex;
  flex-direction: column;
  flex:      1;
  overflow:  auto;
  min-height: 0;
}

/* ── Header row ───────────────────────────────────────────────────────────── */
.gantt-header-row {
  display:     flex;
  position:    sticky;
  top:         0;
  z-index:     10;
  background:  var(--lysis-surface, #fff);
  border-bottom: 2px solid var(--lysis-border, #e0e0e0);
  flex-shrink: 0;
}

.gantt-header-label {
  font-weight:  600;
  font-size:    0.75rem;
  color:        var(--lysis-text-muted, #888);
  display:      flex;
  align-items:  center;
  padding-left: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.gantt-header-dates { display: flex; overflow: hidden; }

.gantt-date-cell {
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         0.4rem 0;
  border-right:    1px solid var(--lysis-border, #e0e0e0);
  min-width:       0;
  font-size:       0.7rem;
  color:           var(--lysis-text-muted, #888);
}
.gantt-date-cell:last-child { border-right: none; }
.gantt-date-cell.today .gantt-date-label {
  color: var(--lysis-accent, #4f7bff);
  font-weight: 700;
}
.gantt-date-cell.weekend { background: var(--lysis-surface-alt, #fafafa); }
.gantt-date-label { white-space: pre-line; text-align: center; line-height: 1.2; }

/* ── Rows ─────────────────────────────────────────────────────────────────── */
.gantt-rows-wrap { flex: 1; overflow: auto; min-height: 0; }
.gantt-rows { display: flex; flex-direction: column; }

.gantt-row {
  display:       flex;
  border-bottom: 1px solid var(--lysis-border, #e0e0e0);
  min-height:    2.5rem;
}
.gantt-row:last-child { border-bottom: none; }
.gantt-row:hover .gantt-row-label { background: var(--lysis-surface-hover, #f5f5f5); }

/* ── Label column ─────────────────────────────────────────────────────────── */
.gantt-row-label {
  flex:          0 0 200px;
  min-width:     200px;
  max-width:     200px;
  padding:       0 0.75rem;
  font-size:     0.8rem;
  color:         var(--lysis-text, #333);
  display:       flex;
  align-items:   center;
  overflow:      hidden;
  white-space:   nowrap;
  text-overflow: ellipsis;
  border-right:  1px solid var(--lysis-border, #e0e0e0);
  background:    var(--lysis-surface, #fff);
  position:      sticky;
  left:          0;
  z-index:       5;
  transition:    background 0.1s;
}

/* ── Bars area ────────────────────────────────────────────────────────────── */
.gantt-row-bars {
  flex:       1;
  display:    flex;
  position:   relative;
  overflow:   hidden;
  min-height: 2.5rem;
}

.gantt-bg-cell {
  flex-shrink:  0;
  height:       100%;
  border-right: 1px solid var(--lysis-border-subtle, #f0f0f0);
}
.gantt-bg-cell:last-child { border-right: none; }
.gantt-bg-cell.weekend { background: var(--lysis-surface-alt, #fafafa); }
.gantt-bg-cell.today {
  background: color-mix(in srgb, var(--lysis-accent, #4f7bff) 8%, transparent);
}

/* ── Task bar ─────────────────────────────────────────────────────────────── */
.gantt-bar {
  position:      absolute;
  top:           25%;
  height:        50%;
  border-radius: 3px;
  display:       flex;
  align-items:   center;
  overflow:      hidden;
  cursor:        pointer;
  text-decoration: none;
  color:         #fff;
  min-width:     4px;
  transition:    filter 0.15s, box-shadow 0.15s;
  box-shadow:    0 1px 3px rgba(0,0,0,0.15);
}
.gantt-bar:hover { filter: brightness(1.1); box-shadow: 0 2px 6px rgba(0,0,0,0.2); }

.gantt-bar-progress {
  position:       absolute;
  left:           0;
  top:            0;
  height:         100%;
  background:     rgba(0,0,0,0.2);
  pointer-events: none;
}

.gantt-bar-text {
  position:      relative;
  z-index:       1;
  padding:       0 0.4rem;
  font-size:     0.7rem;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

/* ── Empty state ──────────────────────────────────────────────────────────── */
.gantt-empty {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  padding:         3rem;
  gap:             0.75rem;
  color:           var(--lysis-text-muted, #999);
}
.gantt-empty .material-symbols-outlined { font-size: 2.5rem; }
.gantt-empty p { margin: 0; font-size: 0.9rem; }