/*
 * The system catalogue screens (F3.3): /systems and /systems/:system_key.
 *
 * Everything else on these screens is an existing component -- the page
 * header, the config tabs, Glacier cards (.page__panel), the data grid
 * (.dashboard__table) and the key/value list (.detail__meta). This file adds
 * only the panel grid and the one cell shape the endpoint table needs.
 */

/* The three summary cards on a system's page, on the dashboard tile grid the
   spec gives for card rows (section 5, `auto-fill, minmax(320px, 1fr)`). */
.catalogue__panels {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}

/* `.page__panel + .page__panel` stacks panels with a top margin; inside the
   grid the gap does that job, and the margin would misalign the row. */
.catalogue__panels .page__panel + .page__panel {
  margin-top: 0;
}

/* A system's auth schemes: the name (and "primary" pill) on one line, what
   it is for beneath it. */
.catalogue__schemes {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.catalogue__scheme + .catalogue__scheme {
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

.catalogue__scheme-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-body-sm);
  font-weight: 600;
  color: var(--text-heading);
}

.catalogue__scheme-text {
  margin: var(--space-1) 0 0;
  font-size: var(--text-caption);
  color: var(--text-tertiary);
}

/* The verb, set apart from the path it applies to: a GET and a POST on the
   same template are two catalogue entries, and must not read as one. */
.catalogue__method {
  display: inline-block;
  min-width: 3.5rem;
  margin-right: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--ptag-blue);
}

/* Templates are long and unbroken (`/data/v1/projects/{project_id}/...`).
   Wrapping at any character keeps the column from forcing the table wider
   than the content area on a laptop. */
.catalogue__path {
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
  overflow-wrap: anywhere;
}

/* Column widths for the two tables. The data grid is fixed-layout (see
   dashboard.css), so without these every column gets an equal share: the
   path templates -- the longest thing on the screen -- wrapped at every
   other character while "counted" sat in a column a quarter of the table
   wide. Scoped to each table's modifier, since `.col-*` names are per-screen. */
.dashboard__table--catalogue .col-call    { width: 30%; }
.dashboard__table--catalogue .col-does    { width: 27%; }
.dashboard__table--catalogue .col-auth    { width: 15%; }
.dashboard__table--catalogue .col-limit   { width: 10%; }
.dashboard__table--catalogue .col-used-by { width: 18%; }

.dashboard__table--systems .col-system      { width: 16%; }
.dashboard__table--systems .col-types       { width: 13%; }
.dashboard__table--systems .col-auth        { width: 17%; }
.dashboard__table--systems .col-limit       { width: 15%; }
.dashboard__table--systems .col-count       { width: 9%; }
.dashboard__table--systems .col-connections { width: 13%; }
.dashboard__table--systems .col-actions     { width: 8%; }

/* The connections table: each connection and its latest health check. Its
   settings sit in a full-width row beneath it (.catalogue__settings-row); the
   action column holds up to three buttons (Edit, Enable or Disable, Check now). */
.dashboard__table--health .col-connection { width: 19%; }
.dashboard__table--health .col-health     { width: 11%; }
.dashboard__table--health .col-checks     { width: 26%; }
.dashboard__table--health .col-checked    { width: 10%; }
.dashboard__table--health .col-runs       { width: 14%; }
.dashboard__table--health .col-actions    { width: 20%; }

/* A connection and its settings read as one row: no rule between them. */
.dashboard__table .catalogue__connection-row > td {
  border-bottom: 0;
}

.catalogue__settings-row td {
  padding: 0 var(--space-4) var(--space-4);
}

/* Label above value, as many columns as fit -- a URL or a fingerprint gets
   the width to read on one line, and the grid folds to one column on a phone. */
.catalogue__settings {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-2) var(--space-5);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
}

.catalogue__setting {
  min-width: 0;
}

.catalogue__setting dt {
  font-size: var(--text-caption);
  color: var(--text-tertiary);
}

.catalogue__setting dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

/* A required setting with no value -- the reason a connection will not work.
   Never colour alone: the value itself says "missing". */
.catalogue__setting--missing dd {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--status-danger-fg);
}

/* --- Windmill: where the recipe's credentials stand ---------------------- */

.catalogue__variables {
  margin-bottom: var(--space-8);
}

.catalogue__variables-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.catalogue__variables-client {
  font-weight: 400;
  color: var(--text-tertiary);
}

.catalogue__variables-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
}

.catalogue__variables-at,
.catalogue__variables-label {
  font-size: var(--text-caption);
  color: var(--text-tertiary);
}

.catalogue__variables-error {
  margin: var(--space-2) 0 0;
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.catalogue__variables-label {
  margin: 0 0 var(--space-1);
  font-weight: 600;
}

.catalogue__variables-missing {
  margin: 0;
  padding-left: var(--space-5);
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
}

.catalogue__variables-note {
  margin: var(--space-3) 0 0;
  font-size: var(--text-caption);
  color: var(--text-tertiary);
}

/* Up to four actions per connection (Edit, Enable or Disable, History, Check
   now). They sit on one line where the column allows and wrap, right-aligned,
   where it does not -- never past the table's edge. `button_to` wraps each
   button in a form, which becomes a flex item like the links beside it. */
.catalogue__row-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-1);
}

.dashboard__table--health .dashboard__actions {
  white-space: normal;
}

/* "Add connection", or the command that creates this system's connection. */
.catalogue__connection-actions {
  margin-bottom: var(--space-4);
}

/* Space between the connections table and the catalogue heading below it. */
.catalogue__section {
  margin-bottom: var(--space-8);
}

/* The sub-checks under a result's summary, one per line. */
.catalogue__health-lines {
  margin: var(--space-1) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-caption);
  color: var(--text-tertiary);
  overflow-wrap: anywhere;
}

/* Adapter class names, one per line. Never broken mid-name: `Windmill::Recipe`
   / `Target` reads as two classes. At caption size the longest one fits the
   column; `::` is where one may still break if it must. */
.catalogue__classes {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
}

.catalogue__classes code {
  font-family: inherit;
  overflow-wrap: normal;
}

@media (max-width: 767px) {
  .catalogue__panels {
    grid-template-columns: 1fr;
  }
}

/* On a phone the connections table scrolls sideways, and a grid as wide as the
   table would scroll with it -- half the settings off-screen. Pinned to the
   visible width instead, so it reads in place while the columns above scroll. */
@media (max-width: 767px) {
  .catalogue__settings {
    position: sticky;
    left: 0;
    max-width: calc(100vw - 2 * var(--space-4) - 2px);
    grid-template-columns: 1fr;
  }
}

/* --- Systems, record types and modules set up on these screens --------- */

/* A record type's Edit / Remove, under its description. */
.catalogue__type-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.catalogue__type-actions form {
  margin: 0;
}

.catalogue__lead {
  max-width: 72ch;
}

/* A fieldset defaults to `min-width: min-content`, so a wide row table
   inside one (extra fields, record type fields) would stretch the card -- and
   the page -- instead of scrolling in its own wrapper. */
.form--system .form__group,
.form--record-type .form__group,
.form--module .form__group,
.form--mapping .form__choices {
  min-width: 0;
}

/* Side-by-side small fields (method + path, the three limits). Stacks on a
   phone, where three number inputs in a row would not fit. */
.form--mapping .form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--space-4);
}

.form--mapping .form__row .form__field--wide {
  grid-column: span 2;
}

/* "Add fields from the API reference": Show fields sits level with the
   Object select beside it, which has a label above it and the button none. */
.form--mapping .form__row .form__field--button {
  align-self: end;
}

/* The record type form runs the full content width -- a deliberate departure
   from Glacier's 720px form cap (Layout Grid; see CLAUDE.md, Known gaps). It
   holds two data grids, the API reference picker and the Fields table, and
   Glacier gives a data grid the full content area; the field rules form is
   uncapped for the same reason (form.css). Two classes, so it beats
   `.form--mapping`'s cap in mapping.css whichever sheet loads last. */
.form--mapping.form--record-type {
  max-width: none;
}

/* Only the grids use that width. A single input, a method-and-path row or a
   hint keeps Glacier's 720px: a name box 1,200px wide is a worse target, and
   a hint past 75ch is hard to read back to the next line. The table cells'
   inputs are not `.form__field`, so the grids are untouched. */
.form--record-type .form__field,
.form--record-type .form__row,
.form--record-type .form__hint {
  max-width: 720px;
}

/* The data grid's 1040px floor is wider than the content area on a 1280px
   screen, which would scroll both tables sideways and hide the picker's
   descriptions and the Fields table's hints. Here they fit the form and wrap
   instead; a phone still scrolls them (below). */
.form--record-type .dashboard__table--picker,
.form--record-type .rules__form-table {
  min-width: 0;
}

@media (max-width: 767px) {
  .form--record-type .dashboard__table--picker,
  .form--record-type .rules__form-table {
    min-width: 40rem;
  }
}

/* The picker's hint, banner, object row and checklist, spaced like a form. */
.form__group--picker > * + * {
  margin-top: var(--space-3);
}

/* Its checklist: a narrow tick column, the description the widest. */
.dashboard__table--picker .col-pick        { width: 6%; }
.dashboard__table--picker .col-field       { width: 28%; }
.dashboard__table--picker .col-type        { width: 12%; }
.dashboard__table--picker .col-required    { width: 16%; }
.dashboard__table--picker .col-description { width: 38%; }

.form--mapping .form__subhead {
  margin: var(--space-4) 0 var(--space-2);
  font-size: var(--text-body-sm);
  font-weight: 600;
  color: var(--text-primary);
}

/* A group of checkboxes or radios with one legend: sources, events,
   attributes. A fieldset inside a fieldset card, so it carries no card of its
   own (Glacier: never nest cards). */
.form--mapping .form__choices {
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form--mapping .form__choices legend {
  padding: 0;
  margin-bottom: var(--space-2);
}

.form--mapping .form__choices--columns {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
}

.form--mapping .form__choices--columns legend,
.form--mapping .form__choices--columns .form__hint {
  grid-column: 1 / -1;
}

.form--mapping .form__choices .form__choice {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-body-sm);
  color: var(--text-primary);
}

.form--mapping input[type="url"],
.form--mapping input[type="number"],
.form--mapping textarea {
  width: 100%;
}

/* A textarea grows with its text; the shared 40px is a single line. */
.form--mapping textarea {
  height: auto;
  min-height: 4.5rem;
}

/* The hint under a row of fields, then the next field: the row's own
   fields carry no bottom margin to separate them. */
.form--mapping .form__row + .form__hint {
  margin-bottom: var(--space-5);
}

@media (max-width: 767px) {
  .form--mapping .form__row .form__field--wide {
    grid-column: auto;
  }
}

/* The module picker panel, then the form it fills. */
.page__panel + .form--module {
  margin-top: var(--space-6);
}

/* A source's modules, one table per connection, under its own heading. */
.catalogue__modules-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-5) 0 var(--space-2);
}

.catalogue__modules-title {
  margin: 0;
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--text-primary);
}

.dashboard__table.dashboard__table--modules .col-module     { width: 26%; }
.dashboard__table.dashboard__table--modules .col-changes    { width: 20%; }
.dashboard__table.dashboard__table--modules .col-project    { width: 20%; }
.dashboard__table.dashboard__table--modules .col-attributes { width: 16%; }
.dashboard__table.dashboard__table--modules .col-actions    { width: 18%; }

/* Edit and Remove side by side in one cell: button_to wraps Remove in a form. */
.catalogue__inline-form {
  display: inline;
  margin: 0;
}

/* The system name opens its page: the Open button sits at the far end of a
   table that scrolls sideways on a laptop. */
.catalogue__system-link {
  color: var(--text-primary);
  font-weight: 500;
  text-decoration: none;
}

.catalogue__system-link:hover,
.catalogue__system-link:focus-visible {
  color: var(--ptag-blue);
  text-decoration: underline;
}

/* The modules table and the module picker hold five short columns, so they
   do not need the data grid's 1040px floor -- which pushed their Edit and
   Remove past the edge of a laptop screen. */
.dashboard__table.dashboard__table--modules,
.dashboard__table.dashboard__table--module-picker {
  min-width: 640px;
}

.dashboard__table.dashboard__table--module-picker .col-module   { width: 32%; }
.dashboard__table.dashboard__table--module-picker .col-changes  { width: 20%; }
.dashboard__table.dashboard__table--module-picker .col-project  { width: 22%; }
.dashboard__table.dashboard__table--module-picker .col-count    { width: 10%; }
.dashboard__table.dashboard__table--module-picker .col-actions  { width: 16%; }

/* "Add record type", under the list it adds to. */
.catalogue__add-type {
  margin-top: var(--space-4);
}

/* A record type's delivery path or script under its name. */
.catalogue__scheme .catalogue__path {
  display: block;
  margin-top: var(--space-1);
}

/* Add system: the system picker, then the form it fills. */
.system-picker {
  max-width: 720px;
}

.system-picker__form {
  gap: var(--space-2);
}

.system-picker + .form--system {
  margin-top: var(--space-6);
}

.detail__meta.system-form__identity {
  margin: 0 0 var(--space-5);
}

/* The picker's one field needs no gap below it inside its card. */
.system-picker .form--mapping .form__field {
  margin-bottom: 0;
}

.system-picker__errors {
  max-width: 720px;
  margin-bottom: var(--space-5);
}