.dashboard {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Header chrome lives in `PanelHeader.module.css`. The classes below are
   the *content* slotted into PanelHeader's left side: the global
   "Dashboard" label and the project-scoped repo breadcrumb. */

/* Match the workspace + project-scoped header typography (mixed-case
   monospace, primary text color) so the three views share a consistent
   header voice. The previous uppercase chip treatment ("DASHBOARD")
   read as a separate visual language and made nav transitions feel
   unsettled. */
.dashboardTitle {
  font-size: 13px;
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text-primary);
}

/* Project-scoped header matches the chat workspace header's typography
   (monospace, mixed case, repo name bold) so swapping between the two
   views doesn't shuffle font metrics. The dashboard label uses the
   same monospace 13px treatment via .dashboardTitle above — keep both
   in sync if either changes. */
.scopedHeader {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0; /* let .headerPath ellipsize when the toolbar is tight */
  font-size: 13px;
  font-family: var(--font-mono);
}

.scopedRepoName {
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}

.headerPath {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.repoIcon {
  color: var(--text-muted);
  flex-shrink: 0;
}


.headerCount {
  color: var(--accent-primary);
  font-variant-numeric: tabular-nums;
}

.scrollBody {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* CSS-level help against WKWebView's elastic overscroll. The
     `BoundedScrollPane` wrapper that owns this class also runs the
     `usePreventScrollBounce` hook for the case where macOS ignores the
     CSS property (overlay scrollbars, trackpad inertia past the edge).
     Mirrors `.messages` in `ChatPanel.module.css`. */
  overscroll-behavior-y: none;
}

/* Active-workspaces section — mirrors the Analytics section treatment so
   both collapsible areas read as peer children of the Dashboard. */
.workspacesSection {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 20px 8px;
  border-top: 1px solid var(--divider);
}

.workspacesHeader {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  background: transparent;
  border: none;
  padding: 0;
  color: var(--text-faint);
  font-family: inherit;
}

.workspacesHeader:hover {
  color: var(--text-muted);
}

.workspacesTitle {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  align-content: start;
  gap: 12px;
  padding: 0;
}

/* Workspace card */
.card {
  background: var(--hover-bg-subtle);
  border: 1px solid var(--divider);
  border-radius: 8px;
  padding: 14px 16px;
  cursor: pointer;
  text-align: left;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal),
    border-color var(--transition-normal),
    background var(--transition-normal);
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  position: relative;
}

.card:hover {
  background: var(--hover-bg);
  border-color: var(--text-faint);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}

.cardRunning {
  border-color: var(--status-running);
}

.cardStopped {
  border-color: var(--status-stopped);
}

.cardHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.repoName {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 14px;
}

.repoIcon {
  flex-shrink: 0;
  color: var(--text-muted);
}

.remoteBadge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 500;
  color: var(--accent-primary);
  background: rgba(var(--accent-primary-rgb), 0.1);
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
}

.statusIndicator {
  display: flex;
  align-items: center;
  gap: 6px;
}


.statusLabel {
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
}

.branchLine {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}

.branch {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.arrow {
  color: var(--text-faint);
  flex-shrink: 0;
}

.baseBranch {
  color: var(--text-dim);
  white-space: nowrap;
}

.lastMessage {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-dim);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.msgRole {
  color: var(--text-muted);
  font-weight: 500;
}

.msgContent {
  color: var(--text-dim);
}

.noMessages {
  font-size: 12px;
  color: var(--text-faint);
  font-style: italic;
}

/* Empty-state styling moved to WelcomeEmptyState.module.css; toolbar
   chrome (drag-region, mac tint, traffic-light shift) moved to the
   shared `PanelHeader.module.css`. Nothing toolbar-related lives here
   anymore — kept the comment so future readers don't re-add styles
   that already exist in the shared module. */

/* Archived workspaces section on the project-scoped view. Renders below
   the active workspace grid (or below the welcome card when there are
   no active workspaces) so the project view is a complete summary of
   work-in-the-fridge for the repo, not just live work. */

.archivedHeaderRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.archivedCleanupBtn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--divider);
  border-radius: 5px;
  cursor: pointer;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
}

.archivedCleanupBtn:hover {
  background: var(--hover-bg);
  border-color: var(--text-faint);
  color: var(--text-primary);
}

.archivedIcon {
  color: var(--text-faint);
  flex-shrink: 0;
}

.archivedList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.archivedRow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--hover-bg-subtle);
  border: 1px solid var(--divider);
  border-radius: 6px;
}

.archivedBody {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.archivedName {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.archivedBranch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  flex-shrink: 0;
}

.archivedRestore {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--divider);
  border-radius: 5px;
  cursor: pointer;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
}

.archivedRestore:hover:not(:disabled) {
  background: var(--hover-bg);
  border-color: var(--text-faint);
  color: var(--text-primary);
}

.archivedRestore:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
