@layer components {
  .admin-layout {
    --fp-content-max: var(--fp-admin-content-max);
  }

  .admin-main,
  .fp-page--admin {
    font-size: var(--fp-text-sm);
  }

  .admin-main .fp-panel,
  .admin-main .fp-card {
    padding: var(--fp-space-4);
  }

  .admin-main .fp-data-grid td,
  .admin-main .fp-data-grid th {
    padding: .55rem .65rem;
  }

  .admin-sidebar .admin-menu a[aria-current="page"],
  .admin-sidebar .admin-menu summary[aria-current="page"] {
    background: var(--fp-color-brand-primary);
    color: var(--fp-color-text-inverse);
  }

  .fp-admin-card-row {
    display: grid;
    gap: var(--fp-space-3);
    padding: var(--fp-space-3);
    border-bottom: 1px solid var(--fp-color-border-subtle);
  }

  @media (max-width: 768px) {
    .admin-main .fp-data-grid {
      min-width: 680px;
    }
  }
}