// =============================================================================
// Styles specific to HomePage — colocated next to HomePage.tsx since nothing
// else uses these classes.
// =============================================================================

// No `@use` of the theme partial needed here: every design token below is a
// CSS custom property (--color-*, --space-*...) declared once on :root in
// styles/global.scss and available globally at runtime — not a Sass-level
// variable/mixin that would require an explicit compile-time import.

// No outer centering wrapper here (unlike the old version of this file):
// AppLayout's `.app-content` already owns the page background/padding —
// this is just the page's own content.
.home-page {
  &__status {
    color: var(--color-text-muted);
    font-size: var(--font-size-md);
  }

  &__status--error {
    color: var(--color-error);
  }
}

// The current planning, one row per meal slot. Raised on its own surface,
// same card treatment used elsewhere in the app, so it reads as a distinct
// piece of content rather than bare text on the page background.
.planning-table {
  width: 100%;
  max-width: 40rem;
  margin-top: var(--space-md);
  border-collapse: collapse;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);

  th,
  td {
    padding: var(--space-sm) var(--space-md);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
  }

  th {
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  tr:last-child td {
    border-bottom: none;
  }
}