/* ============================================================================
   Dashboard Page
   BEM block: .dashboard
   Replaces: .dashboard-grid, .command-center-grid,
             .widget, .widget-header, .widget-icon, .widget-title,
             .widget-body, .widget-stat-primary, .widget-stat-row,
             .widget-stat-small, .widget-revenue, .widget-calendar,
             .widget-inbox, .widget-crm, .widget-orchestrator,
             .event, .event-time, .event-type, .event-source,
             .approval-item, .approval-info, .approval-state,
             .approval-action, .approval-time, .approval-buttons,
             .instance-item, .instance-info, .instance-name,
             .instance-state, .instance-actions,
             .storage-warning, .warning-icon, .warning-text, .warning-files,
             .orch-phase-header, .orch-phase-name, .orch-phase-mode,
             .orch-progress, .orch-progress-bar,
             .orch-task-row, .orch-task-name, .orch-task-elapsed,
             .orch-task-tokens, .orch-task-output,
             .orch-footer, .orch-footer-cost
   ============================================================================ */

@scope (beam-dashboard) {
/* -- Block ---------------------------------------------------------------- */

.dashboard {
  /* No additional block-level styles needed; page container is .page */
}

/* -- Grid ----------------------------------------------------------------- */

.dashboard__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  max-width: 1800px;
  margin: 0 auto;
}

/* -- Command Center ------------------------------------------------------- */

.dashboard__command-center {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

/* -- Widget --------------------------------------------------------------- */

.dashboard__widget {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.dashboard__widget:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

.dashboard__widget.loading .dashboard__stat-value {
  opacity: 0.3;
  animation: dashboardPulse 1.5s ease-in-out infinite;
}

@keyframes dashboardPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}

.dashboard__widget-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}

.dashboard__widget-icon {
  font-size: var(--text-lg);
  opacity: 0.8;
}

.dashboard__widget-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex: 1;
}

.widget-link {
  font-size: var(--text-xs);
  color: var(--color-accent);
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.widget-link:hover { opacity: 1; }

.dashboard__widget-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* -- Widget stats --------------------------------------------------------- */

.dashboard__stat-primary {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.dashboard__stat-primary .dashboard__stat-value {
  font-size: 2rem;
  font-weight: var(--weight-bold);
  color: var(--color-text);
  line-height: 1.2;
}

.dashboard__stat-primary .dashboard__stat-label {
  font-size: var(--text-xs);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.dashboard__stat-row {
  display: flex;
  justify-content: space-around;
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
}

.dashboard__stat-small {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.dashboard__stat-small .dashboard__stat-value {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.dashboard__stat-small .dashboard__stat-label {
  font-size: var(--text-xs);
  color: var(--color-muted);
}

/* -- Widget color accents ------------------------------------------------- */

.dashboard__widget--revenue .dashboard__widget-icon { color: var(--color-success); }
.dashboard__widget--revenue .dashboard__stat-primary .dashboard__stat-value { color: var(--color-success); }

.dashboard__widget--calendar .dashboard__widget-icon { color: var(--color-accent); }
.dashboard__widget--calendar .dashboard__stat-primary .dashboard__stat-value { color: var(--color-accent); }

.dashboard__widget--inbox .dashboard__widget-icon { color: var(--color-warning); }
.dashboard__widget--inbox .dashboard__stat-primary .dashboard__stat-value { color: var(--color-warning); }

.dashboard__widget--crm .dashboard__widget-icon { color: var(--color-purple); }
.dashboard__widget--crm .dashboard__stat-primary .dashboard__stat-value { color: var(--color-purple); }

.dashboard__widget--orchestrator .dashboard__stat-primary .dashboard__stat-value { color: var(--color-cyan, #8be9fd); }

/* -- Event ---------------------------------------------------------------- */

.dashboard__event {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
  animation: fadeIn 0.3s ease;
}

.dashboard__event:last-child { border-bottom: none; }
.dashboard__event--new { background: rgba(74, 158, 255, 0.1); }

.dashboard__event-time {
  color: var(--color-muted);
  white-space: nowrap;
  min-width: 70px;
}

.dashboard__event-type {
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.65rem;
  text-transform: uppercase;
  min-width: 80px;
  text-align: center;
  background: transparent;
  border: 1px solid;
}

.dashboard__event-type--command { color: #6ba8e0; border-color: #3d6a99; }
.dashboard__event-type--session_start,
.dashboard__event-type--session_end { color: #a78bfa; border-color: #6b5a9e; }
.dashboard__event-type--tool_call,
.dashboard__event-type--tool_result { color: #d4a854; border-color: #8a6d37; }
.dashboard__event-type--file_read,
.dashboard__event-type--file_write { color: #6ec99a; border-color: #458566; }
.dashboard__event-type--workflow_start,
.dashboard__event-type--workflow_step,
.dashboard__event-type--workflow_end { color: #d98cb3; border-color: #8a5a73; }
.dashboard__event-type--skill_invoke,
.dashboard__event-type--skill_result { color: #7bbfd4; border-color: #4d7a8a; }
.dashboard__event-type--agent_start,
.dashboard__event-type--agent_action,
.dashboard__event-type--agent_end { color: #a99cd4; border-color: #6b6399; }
.dashboard__event-type--decision { color: #7ac98a; border-color: #4d8a5a; }
.dashboard__event-type--approval_request,
.dashboard__event-type--approval_response { color: #d4a070; border-color: #8a6845; }
.dashboard__event-type--error { color: #e07a7a; border-color: #993d3d; }

.dashboard__event-source {
  color: var(--color-text);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* -- Approval ------------------------------------------------------------- */

.dashboard__approval {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
  transition: opacity var(--transition-fast);
}

.dashboard__approval:last-child { border-bottom: none; }

.dashboard__approval--stale { opacity: 0.6; }

.dashboard__approval-info { flex: 1; min-width: 0; }

.dashboard__approval-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: 0.25rem;
}

.dashboard__approval-source {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.65rem;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-sm);
  border: 1px solid;
}

.dashboard__approval-source.automation {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.dashboard__approval-source.pm {
  color: var(--color-warning);
  border-color: var(--color-warning);
}

.dashboard__approval-source.workflow {
  color: var(--color-success);
  border-color: var(--color-success);
}

.dashboard__approval-age {
  font-size: 0.65rem;
  color: var(--color-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin-left: auto;
}

.dashboard__approval-age--stale {
  color: var(--color-danger);
  font-weight: var(--weight-bold);
}

.dashboard__approval-title {
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard__approval-action {
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.dashboard__approval-buttons {
  display: flex;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.dashboard__approval-bulk {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border);
  justify-content: flex-end;
}

/* -- Instance ------------------------------------------------------------- */

.dashboard__instance {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
}

.dashboard__instance:last-child { border-bottom: none; }

.dashboard__instance--clickable {
  cursor: pointer;
  transition: background var(--transition-fast);
}

.dashboard__instance--clickable:hover {
  background: var(--color-surface);
}

.dashboard__instance-info { flex: 1; }

.dashboard__instance-name {
  color: var(--color-accent);
  font-weight: var(--weight-semibold);
}

.dashboard__instance-state {
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.dashboard__instance-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* -- Storage warning ------------------------------------------------------ */

.dashboard__storage-warning {
  background: rgba(231, 76, 60, 0.15);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  color: var(--color-danger);
}

.dashboard__storage-warning-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--space-sm);
}

.dashboard__storage-warning-icon svg {
  width: 18px;
  height: 18px;
  color: var(--color-warning);
}

.dashboard__storage-warning-text {
  font-weight: var(--weight-semibold);
}

.dashboard__storage-warning-files {
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
  font-family: var(--font-mono);
  color: var(--color-text);
}

/* -- Database Health Card (BEM block: .dbh) ------------------------------- */

.dbh {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  margin-bottom: var(--space-md);
}

.dbh__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  list-style: none;
}

.dbh__header::-webkit-details-marker { display: none; }
.dbh__header::marker { display: none; content: none; }

.dbh__header:hover {
  background: color-mix(in srgb, var(--color-accent) 5%, var(--color-surface));
}

.dbh__icon { display: flex; }
.dbh__title {
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
}

.dbh__status {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
}

.dbh__status--ok { color: var(--color-success); }
.dbh__status--warn {
  color: var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) 15%, transparent);
}

.dbh__size {
  margin-left: auto;
  font-family: var(--font-mono, monospace);
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.dbh__body {
  padding: var(--space-sm) var(--space-md);
}

.dbh__metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.dbh__metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dbh__metric-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
}

.dbh__metric-value {
  font-size: var(--text-sm);
  font-family: var(--font-mono, monospace);
}

.dbh__metric-value--warn {
  color: var(--color-warning);
  font-weight: var(--weight-semibold);
}

.dbh__tables {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-xs);
}

.dbh__tables-header {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
  margin-bottom: var(--space-xs);
}

.dbh__table-row {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
  font-size: var(--text-xs);
}

.dbh__table-name {
  color: var(--color-text);
  text-transform: capitalize;
}

.dbh__table-count {
  font-family: var(--font-mono, monospace);
  color: var(--color-muted);
}

/* -- Orchestrator panel --------------------------------------------------- */

.dashboard__orch-phase-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--color-border);
}

.dashboard__orch-phase-name {
  font-weight: var(--weight-semibold);
}

.dashboard__orch-phase-mode {
  color: var(--color-muted);
  text-transform: uppercase;
  font-size: 0.65rem;
  letter-spacing: 0.03em;
}

.dashboard__orch-progress {
  height: 3px;
  background: var(--color-border);
}

.dashboard__orch-progress-bar {
  height: 100%;
  background: var(--color-success);
  transition: width 0.3s ease;
}

.dashboard__orch-task-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: var(--space-sm);
  align-items: center;
  padding: 0.4rem var(--space-md);
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--color-border);
}

.dashboard__orch-task-row:last-child { border-bottom: none; }

.dashboard__orch-task-name {
  font-weight: var(--weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard__orch-task-elapsed {
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.dashboard__orch-task-tokens {
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.dashboard__orch-task-output {
  color: var(--color-muted);
  font-size: 0.65rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard__orch-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-xs);
  color: var(--color-muted);
  border-top: 1px solid var(--color-border);
  font-variant-numeric: tabular-nums;
}

.dashboard__orch-footer-cost {
  color: var(--color-warning);
  font-weight: var(--weight-semibold);
}

/* -- Detail --------------------------------------------------------------- */

.dashboard__detail-section {
  margin-bottom: var(--space-md);
}

.dashboard__detail-label {
  font-size: var(--text-xs);
  color: var(--color-muted);
  text-transform: uppercase;
  margin-bottom: var(--space-xs);
}

.dashboard__detail-value {
  font-size: var(--text-sm);
  color: var(--color-text);
}

.dashboard__detail-value--highlight {
  color: var(--color-accent);
  font-weight: var(--weight-bold);
}

.dashboard__context-block {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  font-size: var(--text-sm);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 300px;
  overflow-y: auto;
}

/* -- Responsive ----------------------------------------------------------- */

@media (max-width: 1200px) {
  .dashboard__command-center {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .dashboard__grid {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  .dashboard__command-center {
    grid-template-columns: 1fr;
  }
}
}