/* ============================================================
   Vandelay Companies — Gantt retokenization
   Active only inside .vc-design-context.

   Retokenizes the chrome of gantt_master.html and
   gantt_detail.html: timeline, sticky labels, row borders,
   today line, overdue tints, document badges, and the
   AI Q&A chat panel.

   Bar fill colors are data-driven (style="background:
   {{ milestone.color }}") and intentionally NOT touched here.
   Bar palette retokenization would require a model migration.
   ============================================================ */

/* ── Timeline + month labels ───────────────────────────────── */
.vc-design-context .gantt-timeline {
  border-bottom-color: var(--vc-rule);
  background: var(--vc-sunken);
}

.vc-design-context .gantt-timeline .gantt-label {
  background: var(--vc-sunken);
}

.vc-design-context .gantt-month {
  color: var(--vc-ink-3);
  border-left-color: var(--vc-rule);
  font-family: var(--vc-mono);
  letter-spacing: 0.02em;
}

/* ── Sticky header row + corner ────────────────────────────── */
.vc-design-context .gantt-header-row,
.vc-design-context .gantt-col-header {
  background: var(--vc-paper-2);
  border-bottom-color: var(--vc-rule-strong);
}

.vc-design-context .gantt-col-header::after,
.vc-design-context .gantt-milestone-label::after,
.vc-design-context .gantt-task-label::after {
  background: linear-gradient(to right, rgba(21, 17, 13, 0.06), transparent);
}

/* ── Milestone header row (group header) ───────────────────── */
.vc-design-context .gantt-milestone-header {
  border-bottom-color: var(--vc-rule);
  font-family: var(--vc-sans);
}

.vc-design-context .gantt-milestone-label {
  border-right-color: var(--vc-rule);
  background: var(--vc-sunken);
}

/* ── Task rows ─────────────────────────────────────────────── */
.vc-design-context .gantt-task-row {
  border-bottom-color: var(--vc-rule);
}

.vc-design-context .gantt-task-row:hover .gantt-task-label {
  background: var(--vc-paper-2);
}

.vc-design-context .gantt-task-label {
  border-right-color: var(--vc-rule);
  background: var(--vc-surface);
  font-family: var(--vc-sans);
}

.vc-design-context .task-name-col {
  color: var(--vc-ink);
}

.vc-design-context .task-owner-col,
.vc-design-context .task-dates-col,
.vc-design-context .task-pct-col {
  color: var(--vc-ink-3);
  font-family: var(--vc-mono);
}

/* ── Inline date inputs ────────────────────────────────────── */
.vc-design-context .inline-date {
  color: var(--vc-ink-2);
  font-family: var(--vc-mono);
}

.vc-design-context .inline-date:hover {
  border-color: var(--vc-rule-strong);
  background: var(--vc-surface);
}

.vc-design-context .inline-date:focus {
  border-color: var(--vc-navy);
  background: var(--vc-surface);
  box-shadow: 0 0 0 2px rgba(19, 26, 44, 0.12);
}

.vc-design-context .inline-date.has-manual {
  color: var(--vc-navy);
}

.vc-design-context .inline-date.is-calculated {
  color: var(--vc-ink-3);
}

.vc-design-context .date-separator {
  color: var(--vc-ink-4);
}

.vc-design-context .clear-date-btn {
  color: var(--vc-negative);
}

@keyframes vcDateFlash {
  0% { background: var(--vc-navy-tint); }
  100% { background: transparent; }
}

.vc-design-context .inline-date-flash {
  animation: vcDateFlash 0.6s ease-out;
}

/* ── Today line + dashed guide ─────────────────────────────── */
.vc-design-context .gantt-today {
  background: var(--vc-negative);
}

.vc-design-context .gantt-today-label {
  color: var(--vc-negative);
  font-family: var(--vc-mono);
}

.vc-design-context .gantt-today-guide {
  border-left-color: rgba(139, 32, 24, 0.3);
}

/* ── Overdue states ────────────────────────────────────────── */
.vc-design-context .gantt-task-overdue .gantt-task-label {
  background: var(--vc-negative-soft);
}

.vc-design-context .gantt-task-overdue:hover .gantt-task-label {
  background: var(--vc-negative-soft);
  filter: brightness(0.96);
}

.vc-design-context .overdue-banner {
  background: var(--vc-negative-soft);
  border-color: var(--vc-negative);
  color: var(--vc-negative);
  font-family: var(--vc-sans);
  border-radius: var(--vc-r-md);
}

.vc-design-context .overdue-indicator {
  color: var(--vc-negative);
}

/* ── Document badge on milestones ──────────────────────────── */
.vc-design-context .doc-badge {
  color: var(--vc-ink-3);
  background: var(--vc-paper-2);
  font-family: var(--vc-mono);
}

.vc-design-context .doc-badge:hover {
  background: var(--vc-navy-tint);
  color: var(--vc-navy);
}

/* ── Document panel (offcanvas) ────────────────────────────── */
.vc-design-context .doc-panel-item {
  border-bottom-color: var(--vc-rule);
}

.vc-design-context .doc-icon {
  color: var(--vc-negative);
}

.vc-design-context .doc-icon.img-icon {
  color: var(--vc-positive);
}

.vc-design-context .doc-icon.file-icon {
  color: var(--vc-ink-3);
}

.vc-design-context .doc-title {
  color: var(--vc-ink);
  font-family: var(--vc-sans);
}

.vc-design-context .doc-meta {
  color: var(--vc-ink-3);
  font-family: var(--vc-mono);
}

.vc-design-context .doc-viewer-frame {
  background: var(--vc-paper-2);
}

/* ── gantt_master: project rows + labels ───────────────────── */
.vc-design-context .gantt-row {
  border-bottom-color: var(--vc-rule);
}

.vc-design-context .gantt-row:hover {
  background: var(--vc-paper-2);
}

.vc-design-context .gantt-label {
  border-right-color: var(--vc-rule);
  background: var(--vc-surface);
  font-family: var(--vc-sans);
}

.vc-design-context .gantt-row:hover .gantt-label {
  background: var(--vc-paper-2);
}

.vc-design-context .date-range {
  color: var(--vc-ink-3);
  font-family: var(--vc-mono);
}

/* ── AI Q&A chat panel (gantt_master) ──────────────────────── */
.vc-design-context .qa-avatar-user {
  background: var(--vc-navy);
  color: var(--vc-surface);
}

.vc-design-context .qa-avatar-ai {
  background: var(--vc-navy-hover);
  color: var(--vc-surface);
}

.vc-design-context .qa-bubble {
  font-family: var(--vc-sans);
}

.vc-design-context .qa-bubble-user {
  background: var(--vc-navy);
  color: var(--vc-surface);
}

.vc-design-context .qa-bubble-ai {
  background: var(--vc-paper-2);
  color: var(--vc-ink);
}

.vc-design-context .qa-bubble-error {
  background: var(--vc-negative-soft);
  color: var(--vc-negative);
}

.vc-design-context .qa-input-area {
  border-top-color: var(--vc-rule);
}

.vc-design-context .qa-doc-summary {
  color: var(--vc-ink-3);
  border-bottom-color: var(--vc-rule);
  font-family: var(--vc-mono);
}

.vc-design-context .qa-timestamp {
  color: var(--vc-ink-4);
  font-family: var(--vc-mono);
}

.vc-design-context .qa-thinking {
  background: var(--vc-paper-2);
  color: var(--vc-ink-3);
  font-family: var(--vc-sans);
}

/* ── Mobile project cards (gantt_master) ───────────────────── */
.vc-design-context .mobile-project-card {
  border-left-color: var(--vc-navy);
}

.vc-design-context .mobile-project-card.status-on-hold {
  border-left-color: var(--vc-warning);
}

.vc-design-context .mobile-project-card.status-placeholder {
  border-left-color: var(--vc-ink-4);
}

.vc-design-context .mobile-project-card.status-completed {
  border-left-color: var(--vc-ink-3);
}

.vc-design-context .mobile-progress-bar {
  background: var(--vc-rule);
}

.vc-design-context .mobile-progress-fill {
  background: var(--vc-navy);
}

/* ── Section headings used inside Gantt cards ──────────────── */
.vc-design-context .gantt-container,
.vc-design-context .gantt-rows,
.vc-design-context .gantt-body {
  font-family: var(--vc-sans);
}