@layer components {
  /* ======================
   * SHEET - PAGE SPECIFIC STYLES
   * ======================
   * Only contains styles specific to sheet pages.
   * Generic components are in their own files:
   *   - filter-bar.css
   *   - collapsible.css
   *   - toggle-buttons.css
   *   - nested-fields.css
   *   - detail-card.css
   *   - form.css (form-section, form-row)
   *   - input.css (input-with-hotkey)
   *   - card.css (card--link, card-grid)
   */

  /* ======================
   * SHEET DETAIL (show page layout)
   * ====================== */
  .sheet-detail {
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
    padding-block-end: var(--block-space-lg);
  }

  /* ======================
   * FACILITY GROUP (index page grouping)
   * ====================== */
  .facility-group {
    margin-block-end: var(--block-space-lg);
  }

  .facility-group__header {
    display: flex;
    align-items: center;
    gap: var(--inline-space);
    padding: var(--block-space-sm) 0;
    border-block-end: 1px solid var(--color-border);
    margin-block-end: var(--block-space);
  }

  .facility-group__name {
    font-weight: 600;
    color: var(--color-ink-muted);
    margin: 0;
  }

  .facility-group__count {
    font-size: var(--text-sm);
    color: var(--color-ink-faint);
  }

  /* ======================
   * SHEET TYPE BADGE
   * ======================
   * Outlined style: colored border + icon + bold text, no fill.
   * Visually distinct from filled status-badge pills.
   */
  .sheet-type-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--inline-space-sm);
    font-size: var(--text-xs);
    font-weight: 600;
    padding: var(--block-space-xs) var(--inline-space-sm);
    border-radius: var(--radius-sm);
    background-color: transparent;
  }

  .sheet-type-badge--animal {
    border: 1px solid oklch(70% 0.12 145);
    color: oklch(42% 0.12 145);
  }

  .sheet-type-badge--facility {
    border: 1px solid oklch(70% 0.12 255);
    color: oklch(42% 0.12 255);
  }

  /* ======================
   * FREQUENCY BADGE
   * ====================== */
  .frequency-badge {
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
  }

  .frequency-badge__recurrence {
    text-transform: capitalize;
  }

  /* ======================
   * DUE INDICATOR (show page / index)
   * ====================== */
  .due-indicator {
    font-weight: 600;
    font-size: var(--text-sm);
  }

  .due-indicator--overdue {
    color: oklch(50% 0.18 25);
  }

  .due-indicator--due-today {
    color: oklch(50% 0.15 70);
  }

  .due-indicator--upcoming {
    color: var(--color-ink-muted);
    font-weight: 400;
  }

  .due-indicator--completed {
    color: oklch(50% 0.12 145);
    font-weight: 400;
  }

  /* Inline icon indicators for index page */
  .due-indicator-icon {
    font-size: var(--text-xs);
    margin-inline-start: var(--inline-space-xs);
  }

  .due-indicator-icon--overdue {
    color: oklch(50% 0.18 25);
  }

  .due-indicator-icon--due-today {
    color: oklch(50% 0.15 70);
  }

  /* ======================
   * DATA POINT OPTIONS (show page)
   * ====================== */
  .data-point-options {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-ink-faint);
    margin-block-start: var(--block-space-xs);
  }
}