/* Console-specific styling for mgf-cloud-web — the layout glue that composes the
 * brand kit (tokens/base/components/instruments/console) into this particular
 * app. The app chrome itself is the kit's `.mgf-console` shell (M1 P4.2); this
 * file keeps only cloud-web's own compositions. NOT part of the kit.
 */

/* Section spacing between the page header, cards and tables (inside the
 * kit shell's readout). */
.mgf-console__main > .container > * + * {
  margin-top: var(--space-6);
}

/* Two-column split used on list pages: the data table beside / above an inline
 * "create" form card. Collapses to one column on narrow screens. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);
  gap: var(--space-6);
  align-items: start;
}

@media (max-width: 60rem) {
  .split {
    grid-template-columns: 1fr;
  }
}

/* Detail page: key/value table of a single resource. */
.kv {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.kv th {
  text-align: left;
  width: 12rem;
  padding: var(--space-2) var(--space-4) var(--space-2) 0;
  vertical-align: top;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.kv td {
  padding: var(--space-2) 0;
  vertical-align: top;
}

/* Footer — quiet, mono, single line (scrolls with the readout). */
.app-footer {
  margin-top: var(--space-12);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

.app-footer .container {
  padding-block: var(--space-6);
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
  flex-wrap: wrap;
}
