@layer components {
  /* ======================
   * FACILITY ROLES TABLE
   * ======================
   * Compact table for assigning facility roles with radio buttons.
   * Used in team user forms.
   */
  .facility-roles-table {
    width: 100%;
    border-collapse: collapse;
    margin-block-end: var(--block-space-sm);
  }

  .facility-roles-table th,
  .facility-roles-table td {
    padding: var(--block-space-sm) var(--inline-space-sm);
    text-align: left;
    border-block-end: 1px solid var(--color-border);
  }

  .facility-roles-table thead th {
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
    border-block-end: 2px solid var(--color-border);
  }

  .facility-roles-table__facility {
    /* Flexible width for facility name */
  }

  .facility-roles-table__role {
    width: 3rem;
    text-align: center;
  }

  .facility-roles-table__role--clickable {
    cursor: pointer;
    user-select: none;
  }

  .facility-roles-table__role--clickable:hover {
    background-color: var(--color-canvas-alt);
  }

  .facility-roles-table__facility-name {
    font-weight: 500;
  }

  .facility-roles-table__checkbox {
    text-align: center;
    vertical-align: middle;
  }

  .facility-roles-table__checkbox input[type="radio"],
  .facility-roles-table__checkbox input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    accent-color: var(--color-blue);
    cursor: pointer;
  }

  .facility-roles-table__checkbox input[type="checkbox"]:disabled {
    cursor: not-allowed;
    opacity: 0.4;
  }

  /* Hover effect on rows */
  .facility-roles-table tbody tr:hover {
    background-color: var(--color-surface-alt);
  }

  /* Admin access message styling */
  .admin-access-message {
    padding: var(--block-space);
    background-color: var(--color-surface-alt);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
  }

  .admin-access-message p {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--inline-space-lg);
  }

  .admin-access-message i {
    font-size: var(--text-xl);
    color: var(--color-blue);
    flex-shrink: 0;
  }
}