/*
 * Project mapping screen: the editable half of the ops UI.
 *
 * The transfers dashboard owns the table, and the pills and stats counters
 * have files of their own; this file reuses all three rather than restating
 * them. What is here is only what the mapping screen adds: a real form with
 * grouped fieldsets, and the two annotations a mapping row can carry -- a
 * drift note and an error.
 *
 * Inputs are styled under `.form--mapping` rather than globally. The auth
 * screens have their own input treatment in form.css, and a bare `input` rule
 * here would reach into them.
 */

.form--mapping {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  /* Glacier constrains forms and detail panels to 720px. */
  max-width: 720px;
}

/* A fieldset is a Glacier card: one surface, one border, subtle lift. */
.form--mapping .form__group {
  margin: 0;
  padding: var(--space-5) var(--space-5) var(--space-2);
  background: var(--surface-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}

.form--mapping .form__group 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--mapping .form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-5);
}

.form--mapping .form__field label {
  font-size: var(--text-body-sm);
  font-weight: 500;
  color: var(--text-label);
}

/* The control treatment itself is in form.css, shared with every other form
   and filter bar in the app. A form field fills its row, which is the one
   thing that is local. */
.form--mapping input[type="text"],
.form--mapping input[type="email"],
.form--mapping select {
  width: 100%;
}

/* Refs are opaque identifiers read character by character when something is
   wrong, so they get the monospace face rather than the prose one. */
.form--mapping input[name*="_ref"] {
  font-family: var(--font-mono);
}

/* The checkbox row and the footer row are shared page-form treatment: see
   `.form--page` in form.css. */

.form--mapping .form__hint {
  margin: 0;
  font-size: var(--text-caption);
  line-height: 1.5;
  color: var(--text-tertiary);
}

.form--mapping .form__hint code {
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--surface-tertiary);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
}

/* --- table annotations -------------------------------------------------- */

/* The source id and system, under the project's human name. Secondary by
   design: an operator scans by name and only needs the ids when copying. */
.mapping__sub {
  margin-top: var(--space-1);
  font-size: var(--text-caption);
  color: var(--text-tertiary);
}

/* Which system a target or container ref belongs to, above the ref itself.
   One screen holds every direction, so the ref alone ("837") says nothing
   about whose it is. Caption size, like .mapping__sub, so the ref stays the
   thing the eye lands on. */
.mapping__system {
  margin-bottom: var(--space-1);
  font-size: var(--text-caption);
  color: var(--text-tertiary);
  white-space: nowrap;
}

/* A drift note or a provisioning error. Full text, never truncated -- both are
   written for a human to act on, and a clipped explanation is no explanation. */
.mapping__note {
  margin: 0 0 var(--space-3);
  max-width: 75ch;
  font-size: var(--text-body-sm);
  line-height: 1.5;
  color: var(--text-secondary);
}

.mapping__ack {
  display: inline-block;
}

@media (max-width: 767px) {
  .form--mapping { max-width: none; }
}

/* --- the mappings table -------------------------------------------------
   Shares the transfers table's block (dashboard.css) and adds only what is
   specific to its eight columns. */

/* Wider than the transfers table: eight columns, two of them 40-60 character
   urns and one a full timestamp that must not wrap.

   The floor is what the pills and the timestamp need, not what the urns
   would like -- those truncate (see .mapping__ref). At 1400px the Updated
   column and the row's Edit action sat off-screen on a 1440px laptop, whose
   content area is ~1136px; 1100px fits it. */
.dashboard__table--mappings { min-width: 1100px; }

/* Below that the table still scrolls, so the row's action is pinned to the
   right edge: reaching Edit must not depend on scrolling sideways first.
   Sticky needs an opaque cell, which would hide the row's hover tint -- so
   the tint is restated here -- and a hairline marks where rows pass under. */
.dashboard__table--mappings th:last-child,
.dashboard__table--mappings tbody tr:not(.dashboard__detail-row) > td.dashboard__actions {
  position: sticky;
  right: 0;
  box-shadow: -1px 0 0 var(--border-primary);
}

.dashboard__table--mappings tbody tr:not(.dashboard__detail-row) > td.dashboard__actions {
  background: var(--surface-primary);
}

.dashboard__table--mappings tbody tr:not(.dashboard__detail-row):hover > td.dashboard__actions {
  background: var(--ptag-blue-light);
}

/* The header cell is sticky on both axes; it sits above the pinned body
   cells it scrolls over. */
.dashboard__table--mappings th:last-child {
  z-index: calc(var(--z-sticky) + 1);
}

/* Scoped to this table -- see the note in dashboard.css.

   Two kinds of column. Client, the two pill columns, the timestamp and the
   action hold content of a known width that must not clip, so they are
   fixed in pixels -- as percentages they clipped "not routable" and the
   seconds off the timestamp at 1440px, and a longer client id at any width.
   Source wraps and the two ref columns truncate, so they share what is left. */
.dashboard__table--mappings .col-source   { width: 18%; }
.dashboard__table--mappings .col-client   { width: 130px; }
.dashboard__table--mappings .col-state    { width: 140px; }
.dashboard__table--mappings .col-target   { width: 13%; }
.dashboard__table--mappings .col-folder   { width: 11%; }
.dashboard__table--mappings .col-delivery { width: 140px; }
.dashboard__table--mappings .col-updated  { width: 200px; }
.dashboard__table--mappings .col-edit     { width: 64px; }

/* A target's project ids and folder urns can be 40-60 characters of opaque
   identifier.
   Glacier's table rule: clip rather than wrap, and keep the full value on the
   cell's title so it is still copyable. */
.mapping__ref {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
}

/* The ref cell is monospace because refs are ids. The system name above a ref,
   and the "not used" note, are words -- Glacier keeps monospace for ids. */
.mapping__ref .mapping__system,
.mapping__ref .dashboard__na {
  font-family: var(--font-sans);
}

.mapping__ref .dashboard__console-link {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}