/* Dashboard-specific components */

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.report-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.report-card:hover {
  border-color: var(--color-accent-strong);
  box-shadow: var(--shadow-md);
}
.report-card-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-2) var(--space-3);
}
.report-card-title { font-weight: 600; font-size: var(--font-size-base); margin: 0; flex: 1 1 160px; min-width: 0; overflow-wrap: break-word; }
.report-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.report-card-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: var(--space-3);
}

.project-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.project-card:hover {
  border-color: var(--color-accent-strong);
  box-shadow: var(--shadow-md);
}

.account-menu {
  position: relative;
}
.account-menu-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: 1px solid var(--color-border-strong);
  color: var(--color-text);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  cursor: pointer;
  font-size: var(--font-size-sm);
}
.account-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  min-width: 200px;
  padding: var(--space-2);
  z-index: 60;
}
.account-menu-panel[hidden] { display: none; }
.account-menu-panel a, .account-menu-panel button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--font-size-sm);
  cursor: pointer;
}
.account-menu-panel a:hover, .account-menu-panel button:hover { background: var(--color-surface-hover); }

.wizard-shell {
  max-width: 760px;
}

.review-summary dl {
  display: grid;
  grid-template-columns: minmax(160px, 240px) 1fr;
  gap: var(--space-2) var(--space-4);
  margin: 0;
}
.review-summary dt { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.review-summary dd { margin: 0; }

.risk-badge-Low { background: var(--color-success-bg); color: var(--color-success); }
.risk-badge-Moderate { background: var(--color-warning-bg); color: var(--color-warning); }
.risk-badge-High { background: var(--color-error-bg); color: var(--color-error); }
.risk-badge-Insufficient { background: var(--color-info-bg); color: var(--color-info); }

/* ------------------------------------------------------------------ */
/* Dashboard v2: work summary strip, tables, rail                     */
/* ------------------------------------------------------------------ */

.dash-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-6);
  align-items: start;
}
.dash-grid > * { min-width: 0; }
@media (max-width: 1100px) {
  .dash-grid { grid-template-columns: 1fr; }
}

.work-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.work-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  text-decoration: none;
  color: var(--color-text);
  min-height: 72px;
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}
.work-card:hover {
  border-color: var(--color-accent-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
  .work-card:hover { transform: none; }
}
.work-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--color-accent-soft, var(--color-surface-hover));
  color: var(--color-accent-strong);
}
.work-icon svg { width: 20px; height: 20px; }
.work-copy { display: flex; flex-direction: column; line-height: 1.25; }
.work-copy strong { font-size: var(--font-size-xl); font-weight: 700; }
.work-copy span:last-child { font-size: var(--font-size-xs); color: var(--color-text-muted); }

/* Dashboard tables */
.dash-table { width: 100%; border-collapse: collapse; }
.dash-table th {
  text-align: left;
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
}
.dash-table td {
  padding: var(--space-4) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
.dash-table tbody tr:last-child td { border-bottom: none; }
.dash-table tbody tr { transition: background var(--transition-base); }
.dash-table tbody tr:hover { background: var(--color-surface-hover); }
.dash-project-link {
  display: block;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
}
.dash-project-link:hover { color: var(--color-accent-strong); }
.dash-sub { display: block; font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: 2px; }

/* Stage badges - semantic colour per pipeline stage (draft/assessment/statement/final) */
.stage-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
  white-space: nowrap;
}
.stage-draft      { background: var(--color-surface-hover); color: var(--color-text-muted); }
.stage-assessment { background: var(--color-info-bg); color: var(--color-info); }
.stage-statement  { background: var(--color-warning-bg); color: var(--color-warning); }
.stage-final      { background: var(--color-success-bg); color: var(--color-success); }

/* Right rail */
.dash-rail { display: flex; flex-direction: column; gap: var(--space-5); position: sticky; top: calc(var(--topbar-height) + var(--space-5)); }
@media (max-width: 1100px) {
  .dash-rail { position: static; }
}
.activity-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.activity-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}
.activity-list li:last-child { border-bottom: none; }
.activity-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  margin-top: 6px;
  flex-shrink: 0;
}
.activity-body { flex: 1; min-width: 0; font-size: var(--font-size-sm); }
.activity-body a { color: var(--color-text); text-decoration: none; font-weight: 500; }
.activity-body a:hover { color: var(--color-accent-strong); }
.activity-time { font-size: var(--font-size-xs); color: var(--color-text-faint); white-space: nowrap; }

.plan-card .plan-number {
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-accent-strong);
  margin: var(--space-3) 0 0;
  font-variant-numeric: tabular-nums;
}

/* Long report/project titles must never force the table wider than its
   card - clip with ellipsis instead (the full title is on the open page). */
.dash-table .dash-project-link,
.dash-table .dash-sub {
  max-width: clamp(170px, 22vw, 300px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-table th, .dash-table td { white-space: nowrap; }
.dash-table th:first-child, .dash-table td:first-child { white-space: normal; }

/* ------------------------------------------------------------------ */
/* Entity page header (project.php / report.php) - richer variant of   */
/* .dashboard-header: eyebrow kicker, title, icon+text meta row.       */
/* ------------------------------------------------------------------ */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.page-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent-text);
  margin: 0 0 var(--space-2);
}
.page-header h1 { margin: 0 0 var(--space-3); }
.page-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
}
.page-meta span { display: inline-flex; align-items: center; gap: var(--space-2); }
.page-meta svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--color-text-faint); }
.page-header-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; max-width: 100%; }

/* Field list - label/value pairs (Property Summary), replaces a plain dl */
.field-list {
  display: grid;
  grid-template-columns: minmax(160px, 220px) 1fr;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--color-border);
}
.field-list dt, .field-list dd {
  padding: var(--space-3) 0;
  margin: 0;
  border-bottom: 1px solid var(--color-border);
}
.field-list dt {
  color: var(--color-text-faint);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-right: var(--space-4);
}
.field-list dd { color: var(--color-text); }
@media (max-width: 560px) {
  .field-list { grid-template-columns: 1fr; }
  .field-list dt { padding-bottom: 0; border-bottom: none; }
  .field-list dd { padding-top: var(--space-1); }
}

/* Icon tile - small circular accent icon, same visual language as the   */
/* marketing pages' .card-icon and the dashboard's .work-icon.           */
.icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
}
.icon-tile svg { width: 18px; height: 18px; }
.icon-tile.is-neutral { background: var(--color-bg-elevated); color: var(--color-text-muted); }
.icon-tile.is-danger { background: var(--color-error-bg); color: var(--color-error); }

/* Action list - icon + title + copy + control, one row per item, used   */
/* for "Start an Assessment", "Downloads", "Need professional input?"    */
.action-list { display: flex; flex-direction: column; }
.action-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}
.action-item:first-child { padding-top: 0; }
.action-item:last-child { border-bottom: none; padding-bottom: 0; }
.action-item-body { flex: 1; min-width: 0; }
.action-item-body strong { display: block; margin-bottom: 2px; }
.action-item-body p { margin: 0 0 var(--space-3); font-size: var(--font-size-sm); }
.action-item-body .btn { width: 100%; }

/* File row - drawings/decisions upload list, with a filetype tile */
.file-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}
.file-row:last-child { border-bottom: none; }
.file-row-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--color-bg-elevated);
  color: var(--color-text-faint);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.file-row-body { flex: 1; min-width: 220px; }
.file-row-actions { display: flex; gap: var(--space-2); flex-shrink: 0; margin-left: auto; }

/* Technical Review item cards - status-tinted left rule so severity      */
/* reads at a glance without re-reading the badge text. */
.review-item { border-left: 3px solid var(--color-border-strong); padding-left: var(--space-4); }
.review-item-Failed, .review-item-Conflicting { border-left-color: var(--color-error); }
.review-item-Pending { border-left-color: var(--color-warning); }

/* Report body rhythm - a visible divider between numbered sections so   */
/* long statements/assessments scan as distinct chapters. */
.report-module + .report-module {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-6);
}