/*
  Workflows and Models: the operator side of the app. Shares the three-column
  workspace layout with generation, so only the parts unique to editing a
  workflow and chasing down model files are defined here.
*/

.pill.ok {
  background: rgba(52, 211, 153, .14);
  color: var(--ok);
}

.pill.bad {
  background: var(--danger-soft);
  color: var(--danger);
}

.pill.warn {
  background: rgba(251, 191, 36, .14);
  color: var(--warn);
}

/* ------------------------------------------------------ parameter table */

/* Dense on purpose: a graph can expose thirty inputs, and the point of this
   table is to see them at once. */
.table.ptable td {
  padding: 5px 7px;
}

.table.ptable input[type=text],
.table.ptable select {
  padding: 5px 8px;
  font-size: 12.5px;
}

/* An unticked row stays visible — it is how you see what the scan found and
   chose not to expose — but it should not compete with the live ones. */
.ptable tr.off td {
  opacity: .45;
}

.ptable .c-on,
.ptable .c-ord {
  width: 1%;
  white-space: nowrap;
}

.ptable .c-node {
  font-size: 11px;
  color: var(--fg-3);
  white-space: nowrap;
}

.node-cls {
  color: var(--accent-2);
}

.ord-btns {
  display: flex;
  gap: 2px;
}

.ord-btns button {
  width: 22px;
  height: 22px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--s2);
  color: var(--fg-2);
  cursor: pointer;
}

.ord-btns button:hover:not(:disabled) {
  background: var(--s3);
  color: var(--fg);
}

.ord-btns button:disabled {
  opacity: .3;
  cursor: default;
}

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--s1);
}

/* ---------------------------------------------------------------- import */

.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-4);
  border: 1px dashed var(--border-2);
  border-radius: var(--r-lg);
  background: var(--s1);
  color: var(--fg-3);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast),
    color var(--t-fast);
}

.dropzone:hover,
.dropzone.drag {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--fg-2);
}

.dropzone.busy {
  opacity: .6;
  pointer-events: none;
}

.dropzone svg {
  width: 26px;
  height: 26px;
}

.import-status {
  white-space: pre-wrap;
  font-size: 12.5px;
  color: var(--fg-2);
}

.import-status.good {
  color: var(--ok);
}

.import-status.bad {
  color: var(--danger);
}

/* -------------------------------------------------------- requirements */

.req-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.req-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-2);
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--s1);
  font-size: 12.5px;
}

.req-row.is-missing {
  border-color: rgba(248, 113, 113, .35);
}

.req-kind {
  color: var(--fg-3);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.req-name {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow-wrap: anywhere;
}

.req-alias {
  color: var(--fg-3);
  font-size: 11px;
  font-family: var(--sans);
}

/* Search results for one missing file, revealed under its row. */
.req-sub {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--border);
}

.req-hits {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.req-hit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 8px;
  border-radius: var(--r-sm);
  background: var(--s2);
}

.req-hit-name {
  min-width: 0;
  display: flex;
  flex-direction: column;
  font-size: 12.5px;
  overflow-wrap: anywhere;
}

.req-hit-meta {
  color: var(--fg-3);
  font-size: 11.5px;
  white-space: nowrap;
}

.req-token {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-2);
}

.req-token .field {
  flex: 1;
}

/* ------------------------------------------------------- compatibility */

/* The base picker is the widest thing in its row and the only control there,
   so it gets a size of its own rather than a full-width stretch. */
.table td > select {
  width: auto;
  min-width: 190px;
  max-width: 100%;
}

.table td > select + .pill,
.table td > .pill + select {
  margin-left: var(--sp-2);
}

/* The bulk action strip, in the flow of the section rather than pinned to the
   bottom of the window: it belongs to the list it is standing on. */
.sel-inline {
  align-items: center;
  padding: var(--sp-2);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-md);
  background: var(--s1);
}

/*
  Four columns of model status do not fit a phone. As a wrapping row instead,
  the status and kind sit together, the file name gets a line of its own, and
  the action lands under both — rather than a status pill stretched across the
  whole width because a grid column told it to.
*/
@media (max-width: 860px) {
  .req-row,
  .req-hit {
    display: flex;
    flex-wrap: wrap;
    gap: 6px var(--sp-2);
  }

  .req-name,
  .req-hit-name {
    flex: 1 1 100%;
  }

  .req-sub {
    flex: 1 1 100%;
  }

  /* Narrow enough that a 190px control would force the table to scroll
     sideways for every row. */
  .table td > select {
    min-width: 140px;
  }
}