/*
 * Gantt view stylesheet (DOM-rendered gantt rows + dependency arrows).
 *
 * Spec: .claude/specs/workflow-domain-redesign/ FR-01.
 * Originally extracted from inline <style> at pwa/views/gantt.js with
 * unsubstituted template-literal placeholders (labelWidth, ROW_HEIGHT,
 * BAR_HEIGHT, timelineWidth) that did not survive the move into a static
 * .css file — those rules were silently invalid. Repaired 2026-05-03 to
 * read CSS custom properties set by gantt.js on `.gantt-wrap`.
 *
 * Custom properties owned by gantt.js (see initRender):
 *   --gantt-label-width      (px) — user-resizable, persisted in localStorage
 *   --gantt-row-height       (px) — constant 28
 *   --gantt-bar-height       (px) — constant 18
 *   --gantt-timeline-width   (px) — derived from totalDays * cellWidth
 *   --gantt-spacer-h         (px) — month + day header height (42)
 *   --gantt-cell-width       (px) — varies by scale (day=40, week=20)
 */

.gantt-wrap {
  position: relative; overflow: hidden;
  --gantt-label-width: 240px;
  --gantt-row-height: 28px;
  --gantt-bar-height: 18px;
  --gantt-timeline-width: 100%;
  --gantt-spacer-h: 42px;
  --gantt-cell-width: 40px;
}
.gantt-toolbar { display:flex; align-items:center; gap:var(--space-snug); padding:8px 16px; }
.gantt-toolbar-meta { font-size:12px; color:var(--color-on-surface-variant, var(--hint)); margin-left:auto; }
.gantt-scale-btn { padding:4px 12px; border-radius:var(--radius-default); font-size:12px; font-weight:600; border:none; cursor:pointer; background:var(--bg2); color:var(--hint); }
.gantt-scale-btn.active { background:var(--link); color:var(--color-on-primary); }
.gantt-body { display:flex; overflow-x:auto; overflow-y:auto; max-height:calc(100vh - 180px); }
.gantt-body::-webkit-scrollbar { height:6px; width:6px; }
.gantt-body::-webkit-scrollbar-thumb { background:var(--hint); border-radius:3px; opacity:0.3; }
.gantt-labels { flex-shrink:0; width:var(--gantt-label-width); position:sticky; left:0; z-index:5; background:var(--bg); }
.gantt-label { height:var(--gantt-row-height); display:flex; align-items:center; padding:0 12px; gap:var(--space-base); font-size:13px; font-weight:500; border-bottom:1px solid color-mix(in srgb, var(--color-on-primary) 5%, transparent); cursor:pointer; overflow:hidden; }
.gantt-label:hover { background:var(--bg2); }
.gantt-label .dot { width:8px; height:8px; border-radius:var(--radius-full); flex-shrink:0; }
.gantt-label-text { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.gantt-resize-handle { position:absolute; top:0; right:0; width:5px; bottom:0; cursor:col-resize; z-index:6; background:transparent; }
.gantt-resize-handle:hover, .gantt-resize-handle.dragging { background:var(--link); opacity:0.5; }
.gantt-timeline { position:relative; min-width:var(--gantt-timeline-width); }
.gantt-header-months { display:flex; height:20px; border-bottom:1px solid color-mix(in srgb, var(--color-on-primary) 8%, transparent); position:sticky; top:0; z-index:4; background:var(--bg); }
.gantt-header-month { font-size:10px; font-weight:700; color:var(--fg); display:flex; align-items:center; padding:0 6px; border-right:1px solid color-mix(in srgb, var(--color-on-primary) 10%, transparent); flex-shrink:0; }
.gantt-header-row { display:flex; height:22px; border-bottom:1px solid color-mix(in srgb, var(--color-on-primary) 10%, transparent); position:sticky; top:var(--space-wide); z-index:4; background:var(--bg); }
.gantt-header-cell { font-size:10px; color:var(--hint); display:flex; align-items:center; justify-content:center; border-right:1px solid color-mix(in srgb, var(--color-on-primary) 5%, transparent); flex-shrink:0; width:var(--gantt-cell-width); }
.gantt-header-cell.weekend { background:color-mix(in srgb, var(--color-on-primary) 2%, transparent); }
.gantt-header-cell.today { color:var(--color-error); font-weight:700; background:color-mix(in srgb, var(--color-error) 8%, transparent); }
.gantt-rows { position:relative; }
.gantt-row-bg { height:var(--gantt-row-height); border-bottom:1px solid color-mix(in srgb, var(--color-on-primary) 5%, transparent); }
.gantt-row-bg.alt { background:color-mix(in srgb, var(--color-on-primary) 1%, transparent); }
.gantt-bar { position:absolute; height:var(--gantt-bar-height); border-radius:var(--radius-tight); cursor:pointer; display:flex; align-items:center; padding:0 6px; font-size:11px; font-weight:500; color:var(--color-on-primary); overflow:hidden; white-space:nowrap; min-width:8px; transition:opacity 0.15s; }
.gantt-bar:hover { opacity:0.85; }
.gantt-bar.backlog { background:var(--color-on-surface-variant); }
.gantt-bar.scheduled { background:var(--color-warning); }
.gantt-bar.in-progress { background:var(--color-primary); }
.gantt-bar.todo { background:var(--color-on-surface-variant); }
.gantt-bar.critical { box-shadow:0 0 0 2px var(--color-warning), 0 0 8px color-mix(in srgb, var(--color-warning) 40%, transparent); }
.gantt-bar.blocked { border-left:3px solid var(--color-error); }
.gantt-bar.human-blocked { border-left:3px solid var(--color-warning); }
.gantt-bar.next-action { box-shadow:0 0 0 2px var(--color-success), 0 0 8px color-mix(in srgb, var(--color-success) 40%, transparent); }
.next-action-badge { background:var(--color-success); color:var(--color-on-primary); font-size:8px; font-weight:700; padding:1px 4px; border-radius:var(--radius-sm); margin-left:var(--space-xs); vertical-align:middle; }
.next-action-label { background:color-mix(in srgb, var(--color-success) 10%, transparent); }
.gantt-bar-deliverable { position:absolute; bottom:0; left:0; height:3px; background:var(--color-success); border-radius:0 0 4px 4px; opacity:0.8; }
.gantt-today-line { position:absolute; top:0; bottom:0; width:2px; background:var(--color-error); z-index:3; pointer-events:none; }
.gantt-today-label { position:absolute; top:-24px; font-size:9px; color:var(--color-error); font-weight:700; transform:translateX(-50%); white-space:nowrap; }
/* Section dividers ("Unscheduled", spacer) — typography aligned with
   uxSectionHeader; layout (32px, border, alt bg) is gantt-specific. */
.gantt-section-label { height:32px; display:flex; align-items:center; padding:0 12px; border-bottom:1px solid color-mix(in srgb, var(--color-on-primary) 8%, transparent); background:var(--bg2); }
.gantt-section-label.gantt-section-label-spacer { background:transparent; }
.gantt-section-label .ux-section-header { padding:0; }
.gantt-unsched-item { height:var(--gantt-row-height); display:flex; align-items:center; padding:0 12px; gap:var(--space-base); font-size:13px; cursor:pointer; border-bottom:1px solid color-mix(in srgb, var(--color-on-primary) 5%, transparent); overflow:hidden; }
.gantt-unsched-item:hover { background:var(--bg2); }
.gantt-unsched-bar { height:var(--gantt-bar-height); border:2px dashed var(--hint); border-radius:var(--radius-tight); display:flex; align-items:center; padding:0 8px; font-size:11px; color:var(--hint); width:120px; }
.gantt-unsched-row {
  height: var(--gantt-row-height);
  display: flex; align-items: center;
  padding: 0 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-on-surface) 5%, transparent);
}
.gantt-spacer-rows { height: var(--gantt-spacer-h); }
.gantt-empty {
  padding: var(--space-lg);
  text-align: center;
  color: var(--color-on-surface-variant, var(--hint));
}
/* Legend swatch state colors — extracted from inline `style="background:..."`. */
.gantt-legend-swatch.gantt-legend-swatch-in-progress { background: var(--color-primary); }
.gantt-legend-swatch.gantt-legend-swatch-scheduled   { background: var(--color-warning); }
.gantt-legend-swatch.gantt-legend-swatch-backlog     { background: var(--color-on-surface-variant, var(--hint)); }
.gantt-legend-swatch.gantt-legend-swatch-critical    {
  box-shadow: 0 0 0 2px var(--color-tertiary), 0 0 6px color-mix(in srgb, var(--color-tertiary) 40%, transparent);
}
.gantt-legend-swatch.gantt-legend-swatch-dep-blocked {
  border-left: 3px solid var(--color-error);
}
.gantt-legend-swatch.gantt-legend-swatch-human-blocked {
  border-left: 3px solid var(--color-warning);
}
.gantt-legend-swatch.gantt-legend-swatch-next-action {
  box-shadow: 0 0 0 2px var(--color-success), 0 0 8px color-mix(in srgb, var(--color-success) 40%, transparent);
}
.gantt-legend-swatch-today {
  width: 2px; height: 12px;
  background: var(--color-error);
}
/* Bar position is dynamic per-row — owns inline custom properties (CSS-var carve-out). */
.gantt-bar { left: var(--gantt-bar-left, 0); top: var(--gantt-bar-top, 0); width: var(--gantt-bar-width, 0); }
.gantt-bar-progress { width: var(--gantt-progress, 0); }
.gantt-bar-deliverable { width: var(--gantt-deliverable, 0); }
.gantt-today-line { left: var(--gantt-today-x, 0); }
.gantt-header-month { width: var(--gantt-month-w, auto); }
.gantt-dep-svg { position:absolute; top:0; left:0; pointer-events:none; z-index:2; }
.gantt-bar-progress { position:absolute; bottom:0; left:0; height:3px; border-radius:0 0 6px 6px; background:color-mix(in srgb, var(--color-on-primary) 50%, transparent); }
.gantt-legend { display:flex; flex-wrap:wrap; gap:var(--space-sm); padding:4px 16px 8px; font-size:11px; color:var(--hint); }
.gantt-legend-item { display:flex; align-items:center; gap:var(--space-xs); }
.gantt-legend-swatch { width:12px; height:12px; border-radius:3px; flex-shrink:0; }