/******************************************************************************/
/* Signature block composer (Admin side) — see BrandAssetsTab.js /          */
/* signatureComposer.js. Rows of blocks (logo/text/field), each block bound */
/* to a known field or literal text — nothing here is an invisible marker.  */
/*                                                                            */
/* Visual hierarchy is 3 deliberately distinct layers, not shades of the    */
/* same grey: a tinted outer frame -> white row cards with a tinted header  */
/* strip -> color-coded block chips (color keyed to block type) inside.     */
/******************************************************************************/

.sig-composer {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 12px;
  background: var(--brand-verylight);
}

.sig-composer__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 4px;
  padding: 2px 4px 8px;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  text-align: left;
}
.sig-composer__toggle:hover { background: transparent; color: var(--brand); }
.sig-composer__toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.sig-composer__toggle i {
  font-size: 11px;
  width: 11px;
  color: var(--ink-muted);
  transition: transform 0.15s ease;
}

.sig-composer__section {
  padding: 10px 0;
  border-top: 1px dashed var(--border);
}
.sig-composer__section:first-child { padding-top: 0; border-top: none; }
.sig-composer__section--preview { padding-bottom: 0; }

.sig-composer__label {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 8px;
}

/* Preset picker — pill/chip buttons with a clear filled "selected" state,   */
/* so this reads as a distinct choice control, not more form fields.        */
.sig-composer__presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sig-composer__preset-btn {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--brand);
  background: #fff;
  color: var(--brand);
  font-size: 12px;
  font-weight: 600;
}
.sig-composer__preset-btn:hover { background: var(--brand-verylight); }
.sig-composer__preset-btn--active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.sig-composer__preset-btn--active:hover { background: var(--brand-dark); }

.sig-composer__rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sig-composer__empty {
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 14px;
  text-align: center;
  font-size: 12px;
  color: var(--ink-muted);
  background: #fff;
}

.sig-composer__add-row {
  width: 100%;
  margin-top: 10px;
}

/* One row = one white card with its own tinted header strip (toolbar) so   */
/* the "row chrome" is visually separate from the row's content at a       */
/* glance, without relying on a barely-different shade of grey.            */
.sig-row {
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

.sig-row__toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 8px;
  background: var(--brand-light);
}
.sig-row__label {
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-dark);
  margin-right: auto;
}
.sig-row__toolbar select { padding: 4px 6px; font-size: 12px; }

.sig-row__body {
  padding: 8px;
}

.sig-row__blocks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

/* Blocks are color-coded by type (a left accent bar + a matching tint) —   */
/* both a clear visual boundary against the row's white background and a   */
/* quick semantic cue: field = bound data, text = literal, logo = image.   */
.sig-block {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  background: #f7f8fa;
}
.sig-block--field { border-left-color: var(--success); background: #eef8f1; }
.sig-block--text { border-left-color: #b7791f; background: #faf3e6; }
.sig-block--logo { border-left-color: var(--brand); background: var(--brand-verylight); }

.sig-block select { padding: 4px 6px; font-size: 12px; }

.sig-block__editor {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 120px;
  min-width: 0;
}
.sig-block__editor input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 4px 6px;
  font-size: 12px;
}
.sig-block__counter {
  font-size: 10px;
  color: var(--ink-muted);
  flex: 0 0 auto;
  white-space: nowrap;
}

.sig-block__style {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  flex: 0 0 auto;
}
.sig-block__style .checkbox-row { font-size: 11px; gap: 4px; }

.sig-block__move {
  display: flex;
  gap: 2px;
  margin-left: auto;
}

.sig-composer__icon-btn {
  padding: 2px 6px;
  min-width: 24px;
  font-size: 11px;
  line-height: 1.4;
  font-weight: 400;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--border);
}
.sig-composer__icon-btn:hover { background: #f3f4f6; }

/******************************************************************************/
/* Shared rendered-signature preview — the SAME renderSignatureLayoutHtml()  */
/* output is dropped into this container for the composer's own preview,    */
/* the reporter's live preview, and nowhere else (the real insert goes      */
/* straight into the Word document) — see signatureLayout.js.               */
/******************************************************************************/

.sig-preview-render {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
  margin: 4px 0 12px;
  overflow-x: auto;
}
.sig-preview-render--empty {
  color: var(--ink-muted);
  font-size: 12px;
  text-align: center;
  font-style: italic;
}

/******************************************************************************/
/* Signature live preview (Reporter side)                                    */
/******************************************************************************/

.sig-preview-host { margin-top: 4px; }

.sig-preview-wrap {
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 14px;
  background: #fafafa;
}

/* With more than one published signature, several of these wraps stack one
   after another — the name (+ version) is what actually tells a reporter
   which block belongs to which template, so it leads, styled like a real
   heading rather than blending in with the muted hint line below it. */
.sig-preview-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
}
.sig-preview-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.sig-preview-version {
  font-size: 11px;
  color: var(--ink-muted);
}

.sig-preview-title-row {
  font-size: 11.5px;
  color: var(--ink-muted);
  margin-bottom: 10px;
}

.sig-edit-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.sig-edit-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  color: var(--ink-muted);
}
.sig-edit-field input {
  padding: 6px 8px;
  font-size: 12.5px;
}