/*
 * Section headings and in-grid form inputs, shared by the configuration
 * screens (field mappings, applications, record types, scripts). It held the
 * configuration tab strip too, until every configuration screen became a
 * direct link in the rail.
 *
 * The tables are the same data grid the rest of the app uses -- dashboard.css
 * owns `.dashboard__table`. What is here is only the section headings and
 * the inputs that sit inside a grid cell.
 *
 * Every colour comes from the tokens in application.css. No hex values below.
 */

/* --- a section of rules -------------------------------------------------- */

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

.rules__heading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-2);
  font-size: var(--text-h4);
  font-weight: 600;
  color: var(--text-primary);
}

.rules__note {
  margin: 0 0 var(--space-4);
  color: var(--text-secondary);
  font-size: var(--text-body-sm);
}

/* The canonical field name under its human label. Monospace because it is an
   identifier an operator will retype into a recipe, not prose. */
.rules__field-name {
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
}

.rules__hint {
  margin: var(--space-1) 0 0;
  color: var(--text-tertiary);
  font-size: var(--text-caption);
  /* The one column that is allowed to wrap: it is a sentence, and the grid's
     default nowrap would truncate it to uselessness. */
  white-space: normal;
}

/* --- the editable grid --------------------------------------------------- */

/* Rows here are two lines tall by design -- the label, the identifier and a
   hint stack in the first cell -- so the compact row height the read-only
   grids use does not apply. */
.rules__form-table td {
  vertical-align: top;
  white-space: normal;
}

/* Control treatment shared from form.css; a cell's field fills its column, and
   so does the note field below the grid. */
.rules__form-table input[type="text"],
.rules__form-table select,
.form--rules > .form__field input[type="text"] {
  width: 100%;
}

/* A source field is an identifier the operator is copying out of a payload, so
   it reads in the monospace face -- the same treatment the ledger gives urns
   and correlation ids. */
.rules__form-table input[type="text"] {
  font-family: var(--font-mono);
}

@media (max-width: 767px) {
  /* The grid scrolls horizontally on a phone rather than compressing four
     columns of inputs into unusable widths. `.dashboard__table-wrap` already
     provides the scroll container. */
  .rules__form-table { min-width: 44rem; }
}

/* --- banners (F8.2) ------------------------------------------------------ */

/* A statement about the whole screen rather than about one row: "three
   schedules missed a window", "nothing is registered to run these yet".
   Glacier's toast treatment applied inline -- a 3px accent bar in the semantic
   colour rather than a box outlined on all four sides, which is what
   `.error-text` already does on the transfers screen. */
.banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--border-secondary);
  border-radius: var(--radius-sm);
  background: var(--surface-tertiary);
  color: var(--text-secondary);
  font-size: var(--text-body-sm);
}

/* The icon is the only thing in the row that must not shrink -- a long message
   would otherwise squeeze it into an ellipse. */
.banner svg {
  flex: none;
  margin-top: 2px;
}

.banner code {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
}

.banner--warning {
  border-left-color: var(--status-warning);
  background: var(--status-warning-bg);
  color: var(--status-warning-fg);
}

.banner--info {
  border-left-color: var(--status-info);
  background: var(--status-info-bg);
  color: var(--status-info-fg);
}

/* --- the schedule form --------------------------------------------------- */

/* Glacier constrains a form to 720px. Without it the cadence box runs the full
   width of a 1440px window -- a nine-character expression in a 1100px input. */
.form--schedule,
.form--connection {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 720px;
}

/* `.form--connection` (Configure -> Systems -> a connection) shares this
   width by selector. The checkbox grid and the footer row are `.form--page`
   in form.css. */

/* A cron expression is read character by character -- "0 2 * * *" against
   "0 2 * * 1" is one glyph -- so it takes the monospace face, like every other
   identifier in this app. */
.form__input--mono {
  font-family: var(--font-mono);
}

/* Removing a schedule sits with Save and Cancel but is not one of them. Pushed
   to the far end so it cannot be hit while reaching for the primary. */
.form--schedule .form__actions .button--danger {
  margin-left: auto;
}

/* --- scheduled Windmill scripts (Configure -> Schedules) ------------------ */

/* The section heading with its "Schedule a script" action at the right. */
.schedules__section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* The action column fits Run now, Edit and Remove on one line. */
.dashboard__table--scripts .col-name     { width: 27%; }
.dashboard__table--scripts .col-cadence  { width: 12%; }
.dashboard__table--scripts .col-next     { width: 13%; }
.dashboard__table--scripts .col-last     { width: 25%; }
.dashboard__table--scripts .col-actions  { width: 23%; }

/* The × column of an editable fields table (shared/_remove_row_button): just
   the 40px button and its cell padding. The tables are fixed-layout, which
   would otherwise give it an equal share of the width. */
.rules__form-table .rules__remove-col {
  width: 64px;
}

/* Field rule history. Without widths the fixed layout shares the seven
   columns equally, which clipped the publish time to "07:57:2". */
.dashboard__table--rule-history .col-version   { width: 11%; }
.dashboard__table--rule-history .col-published { width: 18%; }
.dashboard__table--rule-history .col-by        { width: 20%; }
.dashboard__table--rule-history .col-note      { width: 19%; }
.dashboard__table--rule-history .col-rules     { width: 7%; }
.dashboard__table--rule-history .col-unmapped  { width: 12%; }
.dashboard__table--rule-history .col-actions   { width: 13%; }

/* A script path can be one long word; it wraps rather than being clipped. */
.dashboard__table--scripts code {
  overflow-wrap: anywhere;
}

/* Run now, Edit and Remove side by side; `button_to` wraps each in a form. */
.dashboard__table--scripts .dashboard__row-actions {
  text-align: right;
  white-space: nowrap;
}

.dashboard__table--scripts .dashboard__row-actions form {
  display: inline-block;
}

/* A run note can carry Windmill's own words, which are long. */
.schedules__note {
  overflow-wrap: anywhere;
}

/* The chosen script's inputs: one card, like the mapping form's groups, so
   they read as belonging to the script picked above them. */
.form--schedule .script-inputs {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  padding: var(--space-5);
  background: var(--surface-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
}

.form--schedule .script-inputs legend {
  padding: 0 var(--space-2);
  font-size: var(--text-overline);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.form--schedule .script-inputs .form__input {
  width: 100%;
}

/* A JSON input is several lines; the shared field height would crush it. */
.form--schedule .script-inputs__json {
  height: auto;
  min-height: 6rem;
  resize: vertical;
}

/* A Turbo frame is inline by default; the inputs card is a block in the form. */
.form--schedule turbo-frame {
  display: block;
}