/* Admin layout primitives — composable building blocks mirroring shop/layout.css.
   Each primitive does one layout job. Combine freely via CSS custom properties. */

@layer admin {
  /* Vertical stack with consistent gap */
  .admin-stack {
    display: flex;
    flex-direction: column;
    gap: var(--admin-stack-gap, 1rem);
  }

  /* Horizontal flex row, no wrap — toolbars, inline groups, header bars */
  .admin-row {
    display: flex;
    align-items: center;
    gap: var(--admin-row-gap, 0.5rem);
  }

  /* Horizontal flex-wrap cluster — tags, badges, button groups */
  .admin-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--admin-cluster-gap, 0.5rem);
    align-items: center;
  }

  /* Stack gap variants */
  .admin-stack-sm { --admin-stack-gap: 0.5rem; }
  .admin-stack-md { --admin-stack-gap: 0.75rem; }
  .admin-stack-lg { --admin-stack-gap: 1.5rem; }
  .admin-stack-xl { --admin-stack-gap: 2rem; }

  /* Row gap variants */
  .admin-row-lg { --admin-row-gap: 0.75rem; }

  /* Intrinsic responsive grid — cards, media thumbnails */
  .admin-grid {
    display: grid;
    grid-template-columns: repeat(
      auto-fill,
      minmax(min(var(--admin-grid-min, 16rem), 100%), 1fr)
    );
    gap: var(--admin-grid-gap, 1rem);
  }
}