/* ============================================================
   PROJECTS — two-column layout: table + slide panel
   ============================================================ */

.projects-search {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.projects-search .form-control { max-width: 280px; }

.projects-layout {
  display: flex;
  gap: 0;
  height: calc(100vh - var(--header-h) - 97px);
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.projects-table-wrap {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--card);
}

/* Scoped panel width for projects */
.projects-layout .slide-panel.open {
  width: 420px;
  min-width: 420px;
}
.projects-layout .slide-panel-inner { width: 420px; }

/* ---- Progress bar --------------------------------------- */
.progress-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 100px;
}
.progress-track {
  flex: 1;
  height: 6px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 999px;
  transition: width 300ms ease;
}
.progress-pct {
  font-size: 11.5px;
  color: var(--text-2);
  white-space: nowrap;
  min-width: 32px;
  text-align: right;
}

/* Panel progress bar (larger) */
.progress-wrap-lg .progress-track { height: 10px; }
.progress-wrap-lg .progress-fill  { height: 10px; }
.progress-wrap-lg .progress-pct   { font-size: 13px; font-weight: 600; color: var(--text-1); }

/* ---- Project task list in panel ------------------------- */
.proj-task-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.proj-task-row:last-child { border-bottom: none; }
.proj-task-title { flex: 1; color: var(--text-1); }
.proj-task-assignee { font-size: 11.5px; color: var(--text-2); }

/* ---- Project members list in panel ----------------------- */
.proj-member-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.proj-member-row:last-child { border-bottom: none; }
.proj-member-name { color: var(--text-1); font-weight: 600; }
.proj-member-meta { flex: 1; font-size: 11.5px; color: var(--text-2); }
.proj-member-actions { display: flex; gap: 4px; flex-shrink: 0; }
/* Ended memberships are kept on the record (D-018 Q6) and have to read as
   history rather than as part of the team. */
.proj-member-row.is-removed .proj-member-name { color: var(--text-2); font-weight: 500; }
.proj-member-row.is-removed { opacity: 0.72; }

/* ---- Project milestones list in panel -------------------- */
.proj-milestone-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.proj-milestone-row:last-child { border-bottom: none; }
.proj-milestone-name { color: var(--text-1); font-weight: 600; }
.proj-milestone-meta {
  flex: 1 1 100%;
  font-size: 11.5px;
  color: var(--text-2);
}
.proj-milestone-actions { display: flex; gap: 4px; flex-shrink: 0; margin-left: auto; }
/* A billed stage is frozen by 0062, so the row says so instead of offering
   controls that would always be refused. */
.proj-milestone-locked {
  font-size: 11.5px;
  color: var(--text-2);
  font-style: italic;
}
.proj-milestone-row.is-delivered .proj-milestone-name { color: var(--success); }

/* ---- Profitability (3.4) -----------------------------------
   The margin is the one figure somebody scans for, so it carries weight and a
   semantic colour. Everything else in the section stays a plain key/value. */

.project-margin {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.project-margin-positive { color: var(--success); }
.project-margin-negative { color: var(--danger); }