/* dashboard.css */

.app-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
}
.app-header h1 { font-size: var(--text-3xl); }

.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.stat {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-align: center;
}
.stat__value {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--clr-primary);
}
.stat__label { font-size: var(--text-sm); color: var(--clr-text-3); }

.panel {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.panel__head h2 { font-size: var(--text-xl); }

.task-list,
.task-row { display: flex; }
.task-list { flex-direction: column; gap: var(--space-2); }

.task-row {
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
}
.task-row__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  border: 2px solid var(--clr-primary);
  color: var(--clr-primary);
  font-size: var(--text-xs);
  flex-shrink: 0;
}
.task-row--done { opacity: 0.6; }
.task-row--done span:nth-child(2) { text-decoration: line-through; }
.task-row--done .task-row__check { background: var(--clr-primary); color: #fff; }

@media (max-width: 560px) {
  .stats-row { grid-template-columns: 1fr; }
}