/*
 * Products venue controller layout (ui/catalogue-venue.js).
 *
 * The screens are built from the shared design system: gk-button, gk-tabs,
 * gk-data-table, gk-modal, gk-card, gk-alert, gk-badge, gk-collapse,
 * gk-detail-grid, gk-timeline and gk-empty-state, with the `gk-admin-native`
 * base styling the bare form controls. This file only places them: grid and
 * flex layout, and the space between blocks. Every value is a token from
 * tokens-shared.css or admin-foundation.css.
 */
.catalogue-venue {
  min-width: 0;
  max-width: 96rem;
  margin: 0 auto;
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
}

.catalogue-venue [hidden] { display: none !important; }

.catalogue-venue h4 {
  margin: var(--space-lg) 0 var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--fs-14);
  line-height: var(--lh-snug);
}
.catalogue-venue p { margin: 0 0 var(--space-lg); }
.catalogue-venue .catalogue-note { color: var(--text-muted); }
.catalogue-venue code,
.catalogue-venue pre { font-family: var(--mono); font-size: var(--fs-12); overflow-wrap: anywhere; white-space: pre-wrap; }
.catalogue-venue pre { margin: 0; }
.catalogue-venue ul { margin: 0 0 var(--space-lg); padding-inline-start: var(--space-4xl); }

/* Blocks stack with one gap between them. */
.catalogue-venue gk-alert,
.catalogue-venue gk-page-header,
.catalogue-venue gk-empty-state,
.catalogue-venue gk-data-table,
.catalogue-venue gk-detail-grid,
.catalogue-venue gk-timeline,
.catalogue-venue gk-collapse,
.catalogue-venue .catalogue-boundary { display: block; margin-bottom: var(--space-lg); }
.catalogue-venue .catalogue-boundary { margin-top: var(--space-lg); }
.catalogue-venue .catalogue-service { margin: 0 0 var(--space-lg); text-align: end; }
.catalogue-venue #catalogue-retry:not([hidden]) { display: inline-block; margin-bottom: var(--space-lg); }
.catalogue-venue .catalogue-loading { margin: 0; padding: var(--space-lg) 0; color: var(--text-muted); }

/* Layout */
.catalogue-products {
  display: grid;
  grid-template-columns: minmax(18rem, 2fr) minmax(0, 3fr);
  gap: var(--space-2xl);
  align-items: start;
}
.catalogue-panel { min-width: 0; }
.catalogue-view > .catalogue-panel + .catalogue-panel { margin-top: var(--space-2xl); }
.catalogue-tab-panel { min-width: 0; }

.catalogue-venue .catalogue-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.catalogue-venue gk-section-header .catalogue-actions { margin-bottom: 0; justify-content: flex-end; }

.catalogue-venue .catalogue-grid {
  display: grid;
  align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-lg);
  margin: 0 0 var(--space-lg);
}
.catalogue-venue .catalogue-row { align-items: end; }
/* The Product list sits in a narrow column, so its filters pack tighter. */
.catalogue-venue .catalogue-inventory .catalogue-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); }

.catalogue-venue fieldset { margin: 0 0 var(--space-lg); }
.catalogue-venue gk-tabs { margin-top: var(--space-lg); }

.catalogue-venue .catalogue-live {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1100px) {
  .catalogue-products { grid-template-columns: minmax(0, 1fr); }
}

/* Phones: a 16px gutter and one column. */
@media (max-width: 640px) {
  .catalogue-venue { padding: var(--space-2xl); }
  .catalogue-venue .catalogue-service { text-align: start; }
}

@media print {
  .catalogue-venue .catalogue-inventory,
  .catalogue-venue gk-button,
  .catalogue-venue gk-modal,
  .catalogue-venue gk-alert { display: none !important; }
  .catalogue-products { display: block; }
}