/*
 * dashboard.css — styles for the dashboard feature.
 *
 * Builds on the shared design system in application.css (.card, .btn, .badge,
 * .page-header, .empty-state, .avatar, etc.) and reuses .todo-check /
 * .todo-check-form from todos.css for the check-off button — see those
 * files' top comments for the full component list and --fh-* design tokens.
 */

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

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fh-space-4);
  align-items: start;
}

.dash-card {
  display: flex;
  flex-direction: column;
}

.dash-card-title {
  font-size: 1.1rem;
  margin: 0 0 var(--fh-space-4);
}

/* -------------------------------------------------------------------------- */
/* Rows                                                                       */
/* -------------------------------------------------------------------------- */

.dash-list {
  display: flex;
  flex-direction: column;
}

.dash-row {
  display: flex;
  align-items: flex-start;
  gap: var(--fh-space-3);
  padding: var(--fh-space-3) 0;
  border-bottom: 1px solid var(--fh-border);
}
.dash-list .dash-row:last-child { border-bottom: none; }

.dash-row-main { flex: 1; min-width: 0; }

.dash-row-title {
  font-weight: 600;
  color: var(--fh-text);
}
.dash-row-title:hover { color: var(--fh-accent-dark); }

.dash-row-sub {
  margin: 2px 0 0;
  font-size: 0.85rem;
}

.dash-row-overdue .dash-row-title { color: var(--fh-danger-dark); }
.dash-row-overdue .dash-row-sub { color: var(--fh-danger-dark); }

/* -------------------------------------------------------------------------- */
/* Date chip                                                                  */
/* -------------------------------------------------------------------------- */

.date-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  padding: var(--fh-space-1) var(--fh-space-2);
  border-radius: var(--fh-radius-sm);
  background: var(--fh-surface-muted);
  color: var(--fh-text-muted);
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
}
.date-chip-accent {
  background: var(--fh-accent-soft);
  color: var(--fh-accent-dark);
}

/* -------------------------------------------------------------------------- */
/* Footer link + empty state                                                 */
/* -------------------------------------------------------------------------- */

.dash-card-link {
  display: inline-block;
  margin-top: var(--fh-space-4);
  font-weight: 600;
  font-size: 0.9rem;
}

/* Two tallies, yours and the family's, kept on separate rows so the scope of
   each number is read off its own label rather than inferred from a clause. */
.dash-tally {
  margin: var(--fh-space-3) 0 0;
  padding-top: var(--fh-space-3);
  border-top: 1px solid var(--fh-border);
  font-size: 0.85rem;
}

.dash-tally-row {
  display: flex;
  gap: var(--fh-space-3);
  align-items: baseline;
}

.dash-tally-row + .dash-tally-row {
  margin-top: var(--fh-space-1);
}

.dash-tally-label {
  flex: 0 0 4.5rem;
  font-weight: 600;
}

.dash-tally-value {
  margin: 0;
}

.dash-empty {
  padding: var(--fh-space-3) 0;
}

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

@media (max-width: 800px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}