/* Shared styles for projects.html + project-bancora.html — Figma frames 51:1325 / 148:2497 */

/* Sort control (toolbar, right side) */
.sort-control { display: flex; align-items: center; gap: 4px; font: 400 13px/1 var(--font-sans); color: var(--muted-foreground); cursor: pointer; margin-left: auto; }
.sort-control svg { width: 16px; height: 16px; }

/* Project table — shared .table-head/.table-row grid */
.cols-projects { grid-template-columns: 1fr 110px 100px 100px; }
.project-list { display: flex; flex-direction: column; }
.cell-project { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.project-name-row { display: flex; align-items: center; gap: 6px; }
.project-name-row svg { width: 13px; height: 13px; color: var(--muted-foreground); flex-shrink: 0; }

/* Health pill dot (shared .pill + colored dot) */
.pill .dot { width: 6px; height: 6px; border-radius: 999px; flex-shrink: 0; }
.pill-amber .dot { background: var(--amber-9); }
.pill-green .dot { background: var(--green-11); }
.pill-red .dot { background: var(--red-9); }

/* Text-initial avatars (no image) */
.avatar-20 { background: var(--muted); font: 500 9px/1 var(--font-sans); color: #000; }
/* .avatar-stack.lg moved to components.css (shared with meetings) */

/* Detail header (breadcrumb is shared .crumb; title is shared .t-page-title) */
.detail-header { display: flex; flex-direction: column; gap: 6px; }
.detail-title-row { display: flex; align-items: center; justify-content: space-between; }
.detail-title-cluster { display: flex; align-items: center; gap: 12px; }
.shared-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 8px;
  font: 500 11px/1 var(--font-sans);
  color: var(--muted-foreground);
}
.shared-badge svg { width: 12px; height: 12px; }

/* Status brief block */
.status-block { background: var(--iris-3); border: 1px solid var(--accent-border); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.status-title-row { display: flex; align-items: center; justify-content: space-between; }
.status-title-left { display: flex; align-items: center; gap: 8px; }
.status-title-left svg { width: 16px; height: 16px; color: var(--iris-11); flex-shrink: 0; }
.status-title { font: 600 14px/1.2 var(--font-sans); color: var(--iris-11); }
.status-refresh {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--iris-11);
  cursor: pointer;
}
.status-refresh:hover { background: rgba(23,23,23,.05); }
.status-refresh svg { width: 14px; height: 14px; }
.status-body { font: 400 13px/1.55 var(--font-sans); color: var(--iris-11); margin: 0; }
.suggestion-chips { display: flex; gap: 8px; }
.suggestion-chip {
  height: 20px;
  border: 1px solid var(--accent-border);
  border-radius: 999px;
  padding: 3px 8px;
  font: 500 11px/1 var(--font-sans);
  color: var(--iris-11);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
}

/* Main two-column row */
.main-row { display: flex; gap: 32px; align-items: flex-start; }
.left-column { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.right-rail { width: 340px; flex-shrink: 0; display: flex; flex-direction: column; gap: 28px; }

/* Tasks section */
.tasks-section { display: flex; flex-direction: column; gap: 4px; }
.tasks-header { display: flex; align-items: center; justify-content: space-between; }
.tasks-header-left { display: flex; align-items: baseline; gap: 8px; }
.tasks-title { font: 600 14px/1.2 var(--font-sans); color: #000; }
.tasks-count { font: 400 13px/1.2 var(--font-sans); color: var(--muted-foreground); }
.view-link { display: inline-flex; align-items: center; gap: 4px; font: 500 13px/1 var(--font-sans); color: var(--muted-foreground); text-decoration: none; }
.view-link svg { width: 14px; height: 14px; }
.task-rows { display: flex; flex-direction: column; gap: 20px; padding-top: 4px; }
.task-group { display: flex; flex-direction: column; gap: 8px; }
.group-head { cursor: pointer; }
.group-head svg { width: 14px; height: 14px; color: var(--muted-foreground); flex-shrink: 0; }
.group-head.collapsed svg { transform: rotate(-90deg); }
.group-label { font: 500 12px/1 var(--font-sans); color: var(--muted-foreground); }
.group-count { font: 400 12px/1 var(--font-sans); color: var(--muted-foreground); }

/* Needs-you is shared .attention-card; this task-row keeps its own bordered-card
   treatment (distinct from the full-bleed record table on tasks.html) */
.task-row {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.task-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.task-title { font: 500 13px/1.2 var(--font-sans); color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-right { display: flex; align-items: center; gap: 12px; }
.context-text { font: 400 13px/1.2 var(--font-sans); color: var(--muted-foreground); white-space: nowrap; }
.context-text.red { color: #ca244d; }
.row-actions { display: flex; align-items: center; gap: 4px; }
.row-actions .icon-btn { width: 24px; height: 24px; }
.row-actions .icon-btn svg { width: 14px; height: 14px; }
.btn-iris { background: var(--iris-9); color: #fff; }
.btn-iris-outline { background: transparent; border: 1px solid var(--border); color: var(--foreground); }

/* Right rail sections */
.rail-section { display: flex; flex-direction: column; gap: 12px; }
.rail-label { font: 500 11px/1.2 var(--font-sans); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-foreground); }
.rail-label-row { display: flex; align-items: center; gap: 6px; }
.rail-label-row svg { width: 12px; height: 12px; color: var(--muted-foreground); }
.rail-label-note { font: 400 11px/1.2 var(--font-sans); color: var(--muted-foreground); }

.meeting-row, .decision-row, .note-row-rail { display: flex; align-items: baseline; gap: 12px; }
/* D36, option A — decision rows became real links to decision-detail.html;
   reset default link styling, everything else (color, layout) is unchanged. */
a.decision-row { text-decoration: none; color: inherit; }
a.decision-row:hover .decision-text { text-decoration: underline; }
.rail-date { font: 400 12px/1.2 var(--font-sans); color: var(--muted-foreground); width: 44px; flex-shrink: 0; }
.rail-date.em { font-weight: 500; }
.meeting-title-row { display: flex; align-items: baseline; gap: 6px; }
.rail-title { font: 400 13px/1.3 var(--font-sans); color: #000; }
.rail-tag { font: 400 11px/1.2 var(--font-sans); color: var(--muted-foreground); }
.decision-text { font: 400 13px/1.4 var(--font-sans); color: #000; }
.decision-text .source { color: var(--muted-foreground); }
/* .view-all / .people-row moved to components.css (shared with meetings) */
.company-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 20px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 8px;
  font: 500 11px/1 var(--font-sans);
  color: #000;
}
.company-chip svg { width: 14px; height: 14px; color: var(--muted-foreground); }
.company-row { display: flex; align-items: center; gap: 10px; }

.file-row { display: flex; align-items: center; gap: 10px; }
.file-row svg { width: 16px; height: 16px; color: var(--muted-foreground); flex-shrink: 0; }
.file-row-title { font: 400 13px/1.3 var(--font-sans); color: #000; }