@layer components {
  /* ======================
   * FACILITY-SPECIFIC STYLES
   * ======================
   * Page-specific styles for facilities and locations.
   * Uses generic components: .card, .card--link, .card-grid, .data-table
   */

  /* ======================
   * FACILITY META (address + description on show page)
   * ====================== */
  .facility-meta {
    margin-block-end: var(--block-space-lg);
  }

  @media (max-width: 640px) {
    .facility-meta {
      display: none;
    }
  }

  .facility-meta__address {
    display: flex;
    align-items: baseline;
    gap: var(--inline-space-sm);
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    margin: 0;
    margin-block-end: var(--block-space-sm);
  }

  .facility-meta__address i {
    color: var(--color-ink-faint);
    font-size: var(--text-xs);
  }

  .facility-meta__description {
    color: var(--color-ink-muted);
  }

  .facility-meta__description p {
    margin: 0;
  }

  /* When both address and description are present, add separator */
  .facility-meta__address + .facility-meta__description {
    padding-block-start: var(--block-space-sm);
  }

  /* ======================
   * LOCATION TABLE COLUMN WIDTHS
   * ====================== */
  .location-table__th--name {
    width: 50%;
  }

  .location-table__th--active {
    width: 6rem;
  }

  .location-table__th--actions {
    width: 4rem;
  }

  /* ======================
   * LOCATION TABLE RESPONSIVE
   * ====================== */
  @media (max-width: 640px) {
    .location-table {
      table-layout: auto;
    }

    .location-table__th--name {
      width: auto;
    }

    .location-table__th--active {
      width: 4rem;
    }

    .location-table__th--actions {
      width: 3rem;
    }

    .location-table .data-table__td--hide-mobile,
    .location-table .data-table__th--hide-mobile {
      display: none;
    }

    /* Reduce tree indentation on mobile */
    .location-table .data-table__td--truncate {
      padding-inline-start: var(--inline-space-sm) !important;
    }

    .location-table .tree-table__toggle,
    .location-table .tree-table__toggle-spacer {
      width: 1.25rem;
      margin-inline-end: var(--inline-space-xs);
    }
  }
}