/* ==========================================================================
   dashboard.css — Dashboard Page Styles
   Complements components.css with dashboard-specific layouts.
   All visual tokens reference CSS custom properties from base.html.
   Uses the 4px spacing system (--space-1 through --space-8).
   Loaded via {% block extra_head %} in dashboard/index.html.
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   Bento Grid — 4-column CSS grid for dashboard layout
   ══════════════════════════════════════════════════════════════════════════ */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

/* Span variants — used for cards that occupy multiple grid columns */
.bento > .card.span-2 {
  grid-column: span 2;
}

.bento > .card.span-3 {
  grid-column: span 3;
}

.bento > .card.span-4 {
  grid-column: span 4;
}

/* Responsive: tablet (≤1024px) — 2 columns, span-2 collapses to full width */
@media (max-width: 1024px) {
  .bento {
    grid-template-columns: repeat(2, 1fr);
  }

  .bento > .card.span-2,
  .bento > .card.span-3,
  .bento > .card.span-4 {
    grid-column: 1 / -1;
  }
}

/* Responsive: mobile (≤640px) — single column */
@media (max-width: 640px) {
  .bento {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Utility Classes
   ══════════════════════════════════════════════════════════════════════════ */
.mb-24 {
  margin-bottom: 24px;
}

.mt-16 {
  margin-top: 16px;
}

/* ── Run Task Link ── */
.run-task-link {
  color: var(--text-secondary);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 11px;
  transition: color var(--transition), text-decoration var(--transition);
}

.run-task-link:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

.run-task-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Dashboard Stat Cards — used within bento grid stat rows
   Each stat card uses .card for base styling (bg-surface, border, radius)
   plus .dash-stat for centered aligned number display.
   Stat values use the --text-display token (28px, per DESIGN-SYSTEM.md).
   ══════════════════════════════════════════════════════════════════════════ */
.dash-stat {
  text-align: center;
  padding: var(--space-5) var(--space-3);
}

.dash-stat .stat-value {
  font-size: var(--text-display);
  font-weight: var(--font-semibold);
  letter-spacing: -0.96px;
  color: var(--text-primary);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

/* Stat value — Semantic color variants */
.stat-value--accent {
  color: var(--accent);
}

.stat-value--danger {
  color: var(--danger);
}

.stat-value--info {
  color: var(--info);
}

.stat-value--warn {
  color: var(--warn);
}

.dash-stat .stat-label {
  font-size: var(--text-caption);
  color: var(--text-tertiary);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-top: var(--space-1);
  font-weight: var(--font-medium);
}

.dash-stat .stat-sub {
  font-size: var(--text-body-sm);
  color: var(--text-quaternary);
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Badge alignment inside stat-sub */
.dash-stat .stat-sub .badge {
  vertical-align: middle;
}

/* ── Cost stat card IDs (JS-populated, smaller stat values) ── */
#dash-cost-total .stat-value,
#dash-cost-tokens .stat-value,
#dash-cost-providers .stat-value,
#dash-cost-profiles .stat-value {
  font-size: 24px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Dashboard Section Headers — flex row with title + optional action
   ══════════════════════════════════════════════════════════════════════════ */
.dash-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.dash-section-header h2 {
  margin: 0;
}

.dash-section-header .dash-section-sub {
  font-size: var(--text-body-sm);
  color: var(--text-tertiary);
}

/* ══════════════════════════════════════════════════════════════════════════
   Dashboard Empty State — centered placeholder
   ══════════════════════════════════════════════════════════════════════════ */
.dash-empty {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--text-tertiary);
  font-size: var(--text-body);
}

/* ══════════════════════════════════════════════════════════════════════════
   Card Header — used within bento grid table cards
   Overrides base.html .card__header for dashboard context
   (not uppercase, smaller, uses card__title with h3)
   ══════════════════════════════════════════════════════════════════════════ */
.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.card__title {
  font-size: var(--text-h3);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
  line-height: 1.3;
}

/* ══════════════════════════════════════════════════════════════════════════
   Table — header and cell overrides for dashboard context
   ══════════════════════════════════════════════════════════════════════════ */
.table__header {
  font-size: var(--text-caption);
  font-weight: var(--font-semibold);
  color: var(--text-tertiary);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-standard);
  text-align: left;
  white-space: nowrap;
}

.table__header--right {
  text-align: right;
}

.table__header--center {
  text-align: center;
}

.table__cell {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: var(--text-body);
}

.table__cell--right {
  text-align: right;
}

.table__cell--center {
  text-align: center;
}

/* Row status colors — left border indicator */
.table__row--done {
  border-left: 3px solid var(--status-done);
}

.table__row--error {
  border-left: 3px solid var(--status-error);
  background: var(--danger-dim);
}

.table__row--blocked {
  border-left: 3px solid var(--status-blocked);
}

.table__row--running {
  border-left: 3px solid var(--status-running);
}

/* Mono cell variant */
.cell--mono {
  font-family: var(--font-mono);
  font-size: var(--text-mono-sm);
}

/* ══════════════════════════════════════════════════════════════════════════
   Responsive adjustments
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .dash-stat .stat-value {
    font-size: 26px;
  }

  #dash-cost-total .stat-value,
  #dash-cost-tokens .stat-value,
  #dash-cost-providers .stat-value,
  #dash-cost-profiles .stat-value {
    font-size: 20px;
  }
}

@media (max-width: 640px) {
  .dash-stat {
    padding: var(--space-4) var(--space-2);
  }

  .dash-stat .stat-value {
    font-size: 22px;
  }

  .dash-stat .stat-label {
    font-size: 10px;
  }

  #dash-cost-total .stat-value,
  #dash-cost-tokens .stat-value,
  #dash-cost-providers .stat-value,
  #dash-cost-profiles .stat-value {
    font-size: 18px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Portfolio Dashboard — Bento grid variant for board portfolio cards
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Filter Bar ── */
.portfolio-filter-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  flex-wrap: wrap;
}

.portfolio-filter-bar .portfolio-filter-input {
  flex: 1;
  min-width: 200px;
}

.portfolio-filter-bar .portfolio-filter-select {
  background: var(--bg-surface);
  border: 1px solid var(--border-standard);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  padding: 6px var(--space-3);
  height: 32px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%236b7a99' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.portfolio-filter-select:hover {
  border-color: var(--border-visible);
}

.portfolio-filter-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.portfolio-filter-select option {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

/* ── Portfolio Card — board status overview ── */
.portfolio-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  cursor: default;
}

.portfolio-card:hover {
  border-color: var(--border-visible);
}

.portfolio-card__header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--space-1);
}

.portfolio-card-title {
  margin: 0;
  line-height: 1.3;
}

.portfolio-card-title a {
  font-size: var(--text-h3);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  text-decoration: none;
  transition: color var(--transition);
}

.portfolio-card-title a:hover {
  color: var(--accent-hover);
}

.portfolio-card-slug {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--text-tertiary);
}

/* ── Portfolio Card — Error State ── */
.portfolio-card-error {
  font-size: var(--text-body-sm);
  color: var(--danger);
  padding: var(--space-1) 0;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* ── Portfolio Metrics — 4-column stat grid ── */
.portfolio-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-1);
}

.metric {
  text-align: center;
  padding: var(--space-1) 0;
}

.metric-value {
  display: block;
  font-size: var(--text-h1);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.3px;
}

.metric-value--accent {
  color: var(--info);
}

.metric-value--danger {
  color: var(--danger);
}

.metric-value--success {
  color: var(--success);
}

.metric-label {
  display: block;
  font-size: var(--text-caption);
  font-weight: var(--font-medium);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

/* ── Portfolio Sub-Metrics — badge row ── */
.portfolio-sub-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

/* ── Portfolio Blocked Tasks ── */
.portfolio-blocked-label {
  font-size: var(--text-caption);
  font-weight: var(--font-medium);
  color: var(--text-tertiary);
  margin-bottom: var(--space-1);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.portfolio-blocked-link {
  display: block;
  font-size: var(--text-body-sm);
  color: var(--status-blocked);
  text-decoration: none;
  padding: 2px 0;
  transition: color var(--transition);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portfolio-blocked-link:hover {
  color: var(--accent-hover);
}

/* ── Portfolio Empty State ── */
.portfolio-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-8) var(--space-4);
}

.portfolio-empty-icon {
  font-size: 36px;
  margin-bottom: var(--space-3);
  line-height: 1;
}

.portfolio-empty h3 {
  font-size: var(--text-h2);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--space-2) 0;
}

.portfolio-empty p {
  font-size: var(--text-body);
  color: var(--text-tertiary);
  margin: 0;
}

/* ── Portfolio Skeleton Loading ── */
.portfolio-skeleton {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

.skeleton-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.skeleton-line {
  background: var(--bg-hover);
  border-radius: var(--radius-sm);
  height: 12px;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.skeleton-line--w60 { width: 60%; }
.skeleton-line--w40 { width: 40%; }
.skeleton-line--w80 { width: 80%; }
.skeleton-line--h5 { height: 20px; }

@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}

/* ── Portfolio Responsive ── */
@media (max-width: 1024px) {
  .portfolio-skeleton {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .portfolio-filter-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .portfolio-filter-bar .portfolio-filter-input {
    min-width: 0;
  }

  .portfolio-skeleton {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}

@media (max-width: 480px) {
  .portfolio-metrics {
    grid-template-columns: repeat(2, 1fr);
  }
}