/* ═══════════════════════════════════════════════════════════════
   gantt.css · Gantt Chart (RTL)
   ═══════════════════════════════════════════════════════════════ */

.gantt-wrap{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:18px 22px;
  overflow-x:auto;
}

.gantt-header{
  display:grid;
  grid-template-columns:140px 1fr;
  gap:14px;
  align-items:center;
  margin-bottom:10px;
}
.gantt-title{
  font-size:11px; font-weight:500;
  color:var(--ink-3);
  letter-spacing:0.14em;
  text-transform:uppercase;
}

/* Time axis (months) — RTL: months flow right→left */
.gantt-axis{
  display:grid;
  grid-template-columns:repeat(var(--months, 6), 1fr);
  text-align:center;
  position:relative;
  font-size:10px;
  color:var(--ink-3);
  font-weight:500;
  font-feature-settings:"tnum";
}
.gantt-axis .month{
  padding:4px 0;
  border-right:1px dashed var(--line);
}
.gantt-axis .month:last-child{ border-right:none; }

/* Phase rows */
.gantt-row{
  display:grid;
  grid-template-columns:140px 1fr;
  gap:14px;
  align-items:center;
  margin-bottom:6px;
}
.gantt-row .row-label{
  font-size:12px; font-weight:500;
  color:var(--ink-1);
  text-align:left;
  padding:5px 0;
}
.gantt-row .row-label .row-meta{
  display:block;
  font-size:10px; color:var(--ink-3);
  font-weight:400;
  margin-top:1px;
}
.gantt-row .row-track{
  position:relative;
  height:24px;
  background:rgba(0,0,0,0.025);
  border-radius:4px;
  overflow:hidden;
}
/* Month gridlines inside each track — one line per month boundary */
.gantt-row .row-track{
  background-image:repeating-linear-gradient(
    to left,
    rgba(0,0,0,0.05) 0 1px,
    transparent 1px calc(100% / var(--months, 6))
  );
}
.gantt-row .row-bar{
  position:absolute;
  top:3px; bottom:3px;
  border-radius:3px;
  display:flex; align-items:center; justify-content:center;
  font-size:9px; font-weight:700;
  color:#fff;
  transition:all var(--motion-fast);
  cursor:pointer;
  min-width:6px;
}
.gantt-row .row-bar:hover{
  transform:scaleY(1.06);
  box-shadow:0 2px 6px rgba(0,0,0,0.18);
}
.gantt-row .row-bar[data-s="completed"]  { background:var(--good); }
.gantt-row .row-bar[data-s="in_progress"]{ background:rgba(186,117,23,0.22); }
.gantt-row .row-bar .progress-fill{
  position:absolute; top:0; bottom:0; right:0;
  background:var(--warn); border-radius:3px;
}
.gantt-row .row-bar[data-s="not_started"]{
  background:rgba(0,0,0,0.06);
  border:1px dashed rgba(0,0,0,0.25);
}
.gantt-row .row-bar[data-s="blocked"]   { background:var(--danger); }

/* Today marker — vertical line crossing all rows */
.gantt-today{
  position:absolute;
  top:20px; bottom:2px;
  width:1.5px;
  background:var(--danger);
  pointer-events:none;
  z-index:10;
}
.gantt-today::before{
  content:"اليوم";
  position:absolute;
  top:-18px;
  right:-21px;
  font-size:9px;
  color:var(--danger);
  background:#fff;
  padding:1px 7px;
  border-radius:var(--r-pill);
  border:1px solid var(--danger);
  font-weight:500;
  white-space:nowrap;
}

/* Chart area — relative context for the today marker */
.gantt-chart{
  position:relative;
  padding-top:20px;
}

/* Legend */
.gantt-legend{
  display:flex; gap:14px; flex-wrap:wrap;
  margin-top:14px;
  padding-top:10px;
  border-top:1px dashed var(--line);
  font-size:10.5px;
  color:var(--ink-2);
}
.gantt-legend-item{
  display:inline-flex; align-items:center; gap:5px;
}
.gantt-legend-item .sw{
  width:10px; height:10px;
  border-radius:2px;
}
.gantt-legend-item .sw.completed  { background:var(--good); }
.gantt-legend-item .sw.in_progress{ background:var(--warn); }
.gantt-legend-item .sw.not_started{ background:rgba(0,0,0,0.06); border:1px dashed rgba(0,0,0,0.3); }
.gantt-legend-item .sw.blocked    { background:var(--danger); }

/* Phase add row */
.gantt-add-phase{
  display:grid;
  grid-template-columns:140px 1fr;
  gap:14px;
  margin-top:8px;
}
.gantt-add-phase .placeholder{}
.gantt-add-phase .add-btn{
  font-size:11px; font-weight:500;
  padding:6px 12px;
  background:transparent;
  border:1px dashed var(--line-strong);
  border-radius:var(--r-md);
  color:var(--ink-3);
  cursor:pointer; font-family:inherit;
  transition:all var(--motion-fast);
}
.gantt-add-phase .add-btn:hover{
  background:var(--soft); color:var(--ink-1); border-style:solid;
}

/* Empty state for projects without phases */
.gantt-empty{
  padding:32px 20px;
  text-align:center;
  color:var(--ink-3);
  background:var(--softer);
  border:1px dashed var(--line);
  border-radius:var(--r-md);
}
.gantt-empty .ttl{ font-size:13px; color:var(--ink-2); font-weight:500; margin-bottom:6px; }
.gantt-empty .dsc{ font-size:11px; }