/* ── Tasks Recipe ─────────────────────────────────────────────────── */
/* Styles for the Tasks List recipe (shadcn-inspired).               */

.tasks-page {
  max-width: 64rem;
  margin: 0 auto;
}

.tasks-heading {
  margin: 0;
  font-size: var(--font-lg);
  font-weight: 700;
  letter-spacing: -0.025em;
}

/* ── Toolbar ─────────────────────────────────────────────────────── */

.tasks-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--size-3);
  margin-bottom: var(--size-4);
}

.tasks-toolbar-left {
  display: flex;
  align-items: center;
  gap: var(--size-2);
  flex: 1;
}

.tasks-toolbar-right {
  display: flex;
  align-items: center;
  gap: var(--size-2);
  flex-shrink: 0;
}

.tasks-search {
  max-width: 16rem;
}

/* ── Table overrides ─────────────────────────────────────────────── */

.tasks-table {
  font-size: var(--font-sm);
}

.tasks-cell-checkbox {
  width: var(--size-10);
  padding-left: var(--size-3);
  padding-right: 0;
}

.tasks-cell-id {
  width: 6rem;
  white-space: nowrap;
  font-size: var(--font-xs);
}

.tasks-cell-label {
  width: 8rem;
  white-space: nowrap;
}

.tasks-cell-title {
  white-space: nowrap;
}

.tasks-cell-status {
  width: 8rem;
}

.tasks-cell-priority {
  width: 6rem;
}

.tasks-cell-actions {
  width: var(--size-10);
  text-align: right;
  padding-right: var(--size-3);
}

/* ── Status & Priority display ───────────────────────────────────── */

.tasks-status,
.tasks-priority {
  display: inline-flex;
  align-items: center;
  gap: var(--size-2);
  font-size: var(--font-sm);
  color: var(--fg-1);
  white-space: nowrap;
}

/* ── Footer ──────────────────────────────────────────────────────── */

.tasks-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--size-4);
}

.tasks-footer-right {
  display: flex;
  align-items: center;
  gap: var(--size-4);
}

.tasks-pagination {
  display: flex;
  align-items: center;
  gap: var(--size-1);
}