/*
 * Sales Pipeline Settings panel (ISH-428/ISH-435/ISH-432/ISH-448/ISH-499, moved here in ISH-555).
 *
 * Styling for `js/sales-pipeline-settings-panel.js`'s own markup: the tab strip, section cards,
 * recipient/stage-target tables, template editor cards (rich-text body editor + merge-field chips +
 * preview pane), and the initiation packet's attachments block. Moved verbatim out of
 * `sales-pipeline-settings.html`'s inline `<style>` block, where these rules used to sit alongside
 * that page's own chrome (`:root` tokens, `.top-nav`, `.page`, `.page-header`) — those stayed behind
 * in the page, unchanged, per this app's per-page convention for that boilerplate.
 *
 * Every rule here resolves its custom properties (`--red`, `--border`, `--card-bg`, …) against
 * whichever host page links this file, exactly as before the move: `sales-pipeline-settings.html`
 * still declares them all in its own `:root`. No fallback values are added — every `has-portal-rail`
 * page (the only kind of page that can host this panel, today or once ISH-557 wires it into the
 * Settings modal) already defines this same token set for itself per that convention, so a fallback
 * would be dead weight rather than a real safety net.
 *
 * ## Every rule here is scoped to `.sp-settings-panel` (ISH-572)
 *
 * ISH-555 moved these rules out of the page verbatim, which was safe only while
 * `sales-pipeline-settings.html` was the single page linking them. ISH-557 then added the `<link>`
 * to all 22 portal pages so the Settings modal could host this panel — and the bare class names
 * this sheet inherited from that page went global. They are not panel-specific names: `.status-pill`
 * means an Active/Inactive recipient here but a *pipeline stage indicator* on five other pages, and
 * `.btn-primary`, `.btn-secondary`, `.status-banner`, `.tab-btn`, `.form-group`, `.empty-state`,
 * `.tab-pane`, `.tabs-nav`, `.section-header` and `.form-control` are all already in use elsewhere
 * for something else. A host page's inline `<style>` loads after this file and so wins on source
 * order — but only for the properties it happens to declare, and none of them declared
 * `background`, so every stage indicator in the app turned into a green uppercase pill.
 *
 * So: **every selector below is written as `.sp-settings-panel <selector>` and there are no
 * exceptions.** Both hosts put that class on the element they mount the panel into — the `.page`
 * wrapper in `sales-pipeline-settings.html`, and `sharedContainer` in
 * `js/settings-modal-sales-pipeline.js`. Adding an unscoped rule here re-opens the leak on all 22
 * pages at once, and it will not be obvious which page broke.
 *
 * Renaming the classes themselves was the alternative and is worse: `js/sales-pipeline-settings-
 * panel.js` and that modal host's `PANEL_MARKUP` both look these names up by string, and the tab
 * classes are a deliberate shared markup contract with `sales-pipeline-approvals.html` and
 * `sales-pipeline-detail.html` (see the next comment). Scoping keeps the contract and closes the
 * leak.
 */

/* Tabs (mirrors sales-pipeline-approvals.html's .tabs-nav/.tab-btn/.tab-content/.tab-pane,
   which in turn mirrors sales-pipeline-detail.html — same markup contract, so the classes are
   interchangeable across the three pages) */
.sp-settings-panel .tabs-nav {
  display: flex;
  border-bottom: 2px solid var(--border-light);
  margin-bottom: 1.5rem;
  gap: 1.5rem;
}

.sp-settings-panel .tab-btn {
  background: none;
  border: none;
  padding: 0.75rem 0.5rem;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  position: relative;
  transition: color 0.15s ease;
}

.sp-settings-panel .tab-btn:hover {
  color: var(--red);
}

.sp-settings-panel .tab-btn.is-active {
  color: var(--red);
}

.sp-settings-panel .tab-btn.is-active::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--red);
}

.sp-settings-panel .tab-pane {
  display: none;
}

.sp-settings-panel .tab-pane.is-active {
  display: block;
}

/* Section cards */
.sp-settings-panel .settings-section {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  margin-bottom: 1.75rem;
  overflow: hidden;
}

.sp-settings-panel .section-header {
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--border-light);
  background: var(--info-bg);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

/* The heading + description block owns the whole header width. Without the
   flex-grow the block only sizes to its text, which left the description
   wrapping a third of the way across the section (ISH-488). */
.sp-settings-panel .section-header > div {
  flex: 1;
  min-width: 0;
}

.sp-settings-panel .section-header h2 {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.sp-settings-panel .section-header p {
  color: var(--text-secondary);
  font-size: 0.825rem;
  margin-top: 0.2rem;
}

.sp-settings-panel .section-body {
  padding: 1.25rem;
}

.sp-settings-panel .section-body.is-flush {
  padding: 0;
}

/* Recipient table */
.sp-settings-panel .settings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.sp-settings-panel .settings-table th,
.sp-settings-panel .settings-table td {
  text-align: left;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
}

.sp-settings-panel .settings-table th {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-label);
  font-weight: 600;
  background: var(--info-bg);
}

.sp-settings-panel .settings-table tbody tr:last-child td {
  border-bottom: none;
}

.sp-settings-panel .settings-table tbody tr:hover td {
  background: #fafafa;
}

.sp-settings-panel .settings-table tbody tr.is-inactive td {
  opacity: 0.5;
}

.sp-settings-panel .row-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  align-items: center;
}

/* ISH-588. Sits beside the Save button of whichever region is being edited — a recipient or
 * stage-target edit row, the add-recipient form, or a template card — so the Settings modal's
 * unsaved-changes dialog is never the first the user hears of it. The amber matches the dot the
 * modal puts on that section's sidebar row (`.settings-dirty-dot` in css/settings-modal.css). */
.sp-settings-panel .unsaved-badge {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--amber);
}

.sp-settings-panel .unsaved-badge[hidden] {
  display: none;
}

.sp-settings-panel .status-pill {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(40, 167, 69, 0.12);
  color: var(--green);
}

.sp-settings-panel .status-pill.is-inactive {
  background: rgba(153, 153, 153, 0.16);
  color: var(--text-label);
}

/* Add-recipient row */
.sp-settings-panel .add-row {
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
  flex-wrap: wrap;
  padding: 1.25rem;
  border-bottom: 1px solid var(--border-light);
  background: #fcfcfc;
}

.sp-settings-panel .add-row .form-group {
  flex: 1 1 200px;
  min-width: 180px;
}

.sp-settings-panel .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.sp-settings-panel .form-group label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-label);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sp-settings-panel .form-control {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: inherit;
  font-size: 0.9rem;
  color: var(--text);
  background: #fff;
  outline: none;
}

.sp-settings-panel .form-control:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 2px rgba(166, 38, 38, 0.12);
}

.sp-settings-panel textarea.form-control {
  min-height: 200px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.825rem;
  line-height: 1.6;
}

.sp-settings-panel .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 0.55rem 1rem;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.15s ease,
    transform 0.1s ease;
  text-decoration: none;
}

.sp-settings-panel .btn-primary:hover:not(:disabled) {
  background: var(--red-hover);
}

.sp-settings-panel .btn-primary:active:not(:disabled) {
  transform: scale(0.98);
}

.sp-settings-panel .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: #fff;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.55rem 1rem;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.sp-settings-panel .btn-secondary:hover:not(:disabled) {
  background: var(--page-bg);
}

.sp-settings-panel .btn-primary:disabled,
.sp-settings-panel .btn-secondary:disabled {
  opacity: 0.55;
  cursor: default;
}

.sp-settings-panel .btn-sm {
  padding: 0.3rem 0.65rem;
  font-size: 0.8rem;
}

/* Template editors */
.sp-settings-panel .template-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

.sp-settings-panel .template-card:last-child {
  margin-bottom: 0;
}

.sp-settings-panel .template-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.sp-settings-panel .template-card-header h3 {
  font-size: 0.95rem;
  font-weight: 700;
}

/* The templateKey, shown read-only (ISH-435). Styled as a code chip rather than a form control
   precisely so it does not read as editable — it is the handle the tab and the send path
   resolve this row by, not copy. */
.sp-settings-panel .template-key {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.7rem;
  color: var(--text-label);
  background: var(--info-bg);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  white-space: nowrap;
}

/* Shown in a template tab whose row is missing — seed it, or claim an existing unkeyed row. */
.sp-settings-panel .tab-empty {
  text-align: center;
  padding: 2rem 1.25rem;
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.sp-settings-panel .tab-empty p {
  max-width: 60ch;
  margin: 0 auto 1rem;
}

.sp-settings-panel .tab-empty .row-actions {
  justify-content: center;
  flex-wrap: wrap;
}

.sp-settings-panel .template-fields {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sp-settings-panel .template-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
}

.sp-settings-panel .save-note {
  font-size: 0.8rem;
  color: var(--text-label);
}

.sp-settings-panel .save-note.is-error {
  color: var(--red);
}

.sp-settings-panel .save-note.is-success {
  color: var(--green);
}

/* Merge-field reference */
.sp-settings-panel .merge-fields {
  background: var(--info-bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  margin-bottom: 1.25rem;
  font-size: 0.825rem;
  color: var(--text-secondary);
}

.sp-settings-panel .merge-fields code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.05rem 0.35rem;
  font-size: 0.8rem;
  white-space: nowrap;
}

.sp-settings-panel .merge-fields .field-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

/* ISH-432: the merge-field chips are buttons now — they insert the token at the cursor rather
   than asking the author to retype it, which is how a token ends up split across elements. */
.sp-settings-panel .merge-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: none;
  padding: 0.1rem 0.2rem;
  border-radius: 4px;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.sp-settings-panel .merge-chip:hover {
  background: rgba(0, 0, 0, 0.04);
}

.sp-settings-panel .merge-chip:hover code {
  border-color: var(--red);
  color: var(--red);
}

.sp-settings-panel .field-help {
  font-size: 0.78rem;
  color: var(--text-label);
  margin: 0 0 0.4rem;
  max-width: 70ch;
}

/* Attachments on the initiation packet email (ISH-448) */
.sp-settings-panel .attachments-block {
  padding: 1rem 1.25rem 1.25rem;
  border-top: 1px solid var(--border-light);
}

.sp-settings-panel .attachments-block > label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-label);
  margin-bottom: 0.3rem;
}

.sp-settings-panel .attachment-list {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.sp-settings-panel .attachment-item,
.sp-settings-panel .attachment-empty {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.75rem;
  font-size: 0.85rem;
}

.sp-settings-panel .attachment-item + .attachment-item {
  border-top: 1px solid var(--border-light);
}

/* Truncates rather than wrapping: a long filename should not push the size and Remove button
   onto a second line, which is what turns a tidy list into a ragged one. Measured at 768px — the
   name ellipsises while size and Remove hold the same x as every other row.

   Deliberately no `title` tooltip for the trimmed name. The full filename appears in the Remove
   confirmation, which is this repo's convention for detail behind a trimmed label (ISH-441 and
   the click-popup decision that followed it) — a hover tooltip is the thing that convention
   replaced, not an addition to it. */
.sp-settings-panel .attachment-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.sp-settings-panel .attachment-size {
  flex: 0 0 auto;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.sp-settings-panel .attachment-empty {
  color: var(--text-secondary);
  font-style: italic;
}

/* ISH-516: "could not load" is not the same as "none", and must not read like it. */
.sp-settings-panel .attachment-empty.is-error {
  color: var(--red);
  font-style: normal;
}

.sp-settings-panel .btn-small {
  padding: 0.25rem 0.6rem;
  font-size: 0.75rem;
}

/* Driven by the Add attachment button — see buildAttachmentsBlock. A visible file input beside
   this page's styled buttons reads as an unfinished form. */
.sp-settings-panel .attachment-input {
  display: none;
}

.sp-settings-panel .attachment-status {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin: 0.5rem 0 0;
  min-height: 1rem;
}

/* Rich-text body editor (ISH-432) */
.sp-settings-panel .rich-editor {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.sp-settings-panel .rich-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.4rem;
  background: var(--info-bg);
  border-bottom: 1px solid var(--border-light);
}

.sp-settings-panel .toolbar-btn {
  min-width: 2rem;
  padding: 0.25rem 0.55rem;
  font-size: 0.8rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-secondary);
  cursor: pointer;
}

.sp-settings-panel .toolbar-btn:hover {
  border-color: var(--red);
  color: var(--red);
}

.sp-settings-panel .toolbar-btn.is-bold {
  font-weight: 700;
}

.sp-settings-panel .toolbar-btn.is-italic {
  font-style: italic;
}

/* The editing surface. Deliberately styled like the email body rather than like a form control:
   the author is writing prose that will be read at ~15px in a mail client, not filling a field. */
.sp-settings-panel .rich-editor-surface {
  min-height: 12rem;
  max-height: 26rem;
  overflow-y: auto;
  padding: 0.9rem 1rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text);
  background: #fff;
}

.sp-settings-panel .rich-editor-surface:focus {
  outline: 2px solid var(--red);
  outline-offset: -2px;
}

.sp-settings-panel .rich-editor-surface p {
  margin: 0 0 0.75rem;
}

.sp-settings-panel .rich-editor-surface ul,
.sp-settings-panel .rich-editor-surface ol {
  margin: 0 0 0.75rem;
  padding-left: 1.5rem;
}

.sp-settings-panel .rich-editor-surface a {
  color: var(--red);
}

/* Preview pane (ISH-432) */
.sp-settings-panel .template-preview {
  margin-top: 1.25rem;
  border-top: 1px solid var(--border-light);
  padding-top: 1rem;
}

.sp-settings-panel .template-preview-header {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 0.85rem;
}

.sp-settings-panel .preview-status {
  font-size: 0.78rem;
  color: var(--text-label);
}

.sp-settings-panel .preview-status.is-stale {
  color: var(--amber);
}

.sp-settings-panel .preview-status.is-error {
  color: var(--red);
}

.sp-settings-panel .preview-subject {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin: 0.4rem 0;
}

.sp-settings-panel .preview-warning {
  font-size: 0.8rem;
  color: var(--red);
  margin: 0.4rem 0;
}

/* Fixed height with its own scroll: the email is a 600px document and letting it size the page
   would push the Save button off screen for a long body. */
.sp-settings-panel .preview-frame {
  width: 100%;
  height: 30rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #f8f9fa;
}

.sp-settings-panel .status-banner {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-secondary);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.sp-settings-panel .status-banner.error {
  color: var(--red);
}

.sp-settings-panel .empty-state {
  text-align: center;
  padding: 2.5rem;
  color: var(--text-secondary);
}

/* ISH-499. Inline "no target set" marker inside a Stage Targets row — .empty-state above is
   sized for a whole empty table (centered, 2.5rem padding), not one cell's worth of text. */
.sp-settings-panel .stage-target-unset {
  color: var(--text-secondary);
  font-style: italic;
}