/*
 * Approval workflows — the plain (slice 55) policy builder form and the settings index. Rows of
 * condition / approver controls that the approval-workflow-form controller clones from a
 * <template>, toggles, and reorders; the drag-drop canvas (slice 56) will bring its own styles.
 * Built on the design tokens + the shared .form-field controls.
 */

@layer components {
  .workflow-form__heading {
    font-size: var(--text-15);
    font-weight: 600;
    color: var(--color-text-heading);
    margin: 0 0 var(--space-2);
  }

  .workflow-form__hint {
    color: var(--color-text-body);
    font-size: var(--text-13);
    margin: 0 0 var(--space-4);
  }

  /*
   * Block-based rule builder (slice 62) — an approval rule is a stack of blocks (tiers), each its
   * OWN card so you can tell the stages apart. The "then require approval from" button sits outside
   * the cards and appends the next tier.
   */
  .workflow-form__trigger,
  .workflow-form__approval {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .workflow-form__blocks {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .workflow-block {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  /* "then require approval from" — the connector at the top of every block except the first, so the
     sequence reads between the cards. */
  .workflow-block__lead {
    margin: 0;
    font-size: var(--text-13);
    font-weight: 500;
    color: var(--color-text-body);
  }

  .workflow-block:first-child .workflow-block__lead { display: none; }

  /* Row 1: quantifier + N + type on one line; the picker sits on its own row below. */
  .workflow-block__rule {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  /* The dropdowns grow to fill the row (so it spans the card like the picker below), sharing the
     space equally; `min-width: 0` lets them shrink when the N field appears. The extra
     `.workflow-block__rule` beats `.form-field__input { width: 100% }` (later source, same specificity). */
  .workflow-block__rule .form-field__input {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }

  /* N is a fixed, small nominator (72px). */
  .workflow-block__rule .workflow-block__threshold {
    flex: 0 0 4.5rem;
  }

  /* The type ("Coworkers / Roles") dropdown holds a constant half-row width; only the quantifier
     flexes, shrinking to make room for the N field. */
  .workflow-block__rule .workflow-block__type {
    flex: 0 0 50%;
  }

  .workflow-block__threshold[hidden] { display: none; }

  /* The pill picker — looks like a field; picked people/roles sit inside as coloured pills with the
     search input trailing. Focus-within gives it the same indigo halo as the other fields. */
  .tag-select {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1-5);
    min-height: var(--space-10);
    padding: var(--space-1-5);
    border: 1px solid var(--color-slate-400);
    border-radius: var(--radius-md);
    background: var(--color-white);
  }

  .tag-select:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary) 20%, transparent);
  }

  .tag-select__search {
    flex: 1 1 8rem;
    min-width: 6rem;
    border: 0;
    outline: none;
    padding: var(--space-1) var(--space-1-5);
    font: inherit;
    color: var(--color-slate-900);
    background: transparent;
  }

  /* A pill — coloured by its token (tag--c0..c7, assigned in JS): light fill, saturated text +
     border, and a × to remove it. */
  .tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--text-13);
    font-weight: 500;
    line-height: 1.4;
    color: var(--tag-color, var(--color-slate-700));
    background: color-mix(in oklab, var(--tag-color, var(--color-slate-500)) 14%, white);
    border: 1px solid color-mix(in oklab, var(--tag-color, var(--color-slate-500)) 32%, white);
  }

  .tag__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: inherit;
    font-size: var(--text-15);
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
  }

  .tag__remove:hover {
    opacity: 1;
    background: color-mix(in oklab, var(--tag-color, var(--color-slate-500)) 22%, white);
  }

  .tag--c0 { --tag-color: var(--color-indigo-600); }
  .tag--c1 { --tag-color: var(--color-green-600); }
  .tag--c2 { --tag-color: var(--color-amber-600); }
  .tag--c3 { --tag-color: var(--color-pink-600); }
  .tag--c4 { --tag-color: var(--color-blue-600); }
  .tag--c5 { --tag-color: var(--color-violet-600); }
  .tag--c6 { --tag-color: var(--color-cyan-600); }
  .tag--c7 { --tag-color: var(--color-orange-600); }

  .workflow-block__remove {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-slate-500);
    cursor: pointer;
  }

  .workflow-block__remove:hover {
    color: var(--color-danger);
    background: var(--color-slate-100);
  }

  .workflow-block__remove svg { width: 1.125rem; height: 1.125rem; }

  .workflow-form__add-block { align-self: flex-start; }

  /* The stacked condition / approver rows. */
  .workflow-form__rows {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
  }

  /* One row — its controls and a remove button on a line. The shared .form-field__input is
     width:100% (built for stacked forms); in a horizontal row we size the controls explicitly
     instead so field / operator / value line up cleanly across rows. */
  .workflow-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
  }

  .workflow-row .form-field__input {
    width: auto;
  }

  .workflow-row__field    { min-width: 12rem; }
  .workflow-row__op       { min-width: 11rem; }
  .workflow-row__value    { min-width: 9rem; flex: 1 1 9rem; }
  .workflow-row__principal { min-width: 16rem; flex: 1 1 16rem; }

  /* A condition's operator + value inputs; only the selected field's block is shown (the
     controller toggles [hidden] + disables the inactive blocks' inputs). */
  .workflow-row__block {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    flex: 1 1 auto;
  }

  .workflow-row__block[hidden] { display: none; }

  /* The step badge (1, 2, 3…) + reorder arrows on an approver row — shown only when the workflow
     is sequential and order matters (the controller adds .workflow-form__rows--ordered). In a
     flat/parallel set they're hidden, since any order is equivalent. */
  /* Scoped under the container so the hide beats `.btn`'s own display (loaded later). */
  .workflow-form__rows .workflow-approver__step,
  .workflow-form__rows .workflow-approver__move {
    display: none;
  }

  .workflow-form__rows--ordered .workflow-approver__step {
    flex: 0 0 auto;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 var(--space-1-5);
    border-radius: var(--radius-full);
    background: var(--color-slate-100);
    color: var(--color-text-body);
    font-size: var(--text-xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .workflow-form__rows--ordered .workflow-approver__move {
    display: inline-flex;
  }

  .workflow-form__rule {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--space-4) 0;
  }

  /* Quantifier + threshold — hidden wholesale when the workflow is sequential. */
  .workflow-form__quantifier {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-4);
  }

  .workflow-form__quantifier[hidden] { display: none; }

  .workflow-form__actions {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-5);
  }
}