/* pipeline tab styles — owned by the pipeline builder. Selectors are prefixed
   .pipeline-, except where they extend the shared .kanban and .kcard shapes
   already defined in components.css. Colours come from tokens.css only. */

.pipeline-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s3);
  margin-bottom: var(--s4);
}

.pipeline-filters {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-bottom: var(--s3);
}

.pipeline-count {
  margin-left: auto;
  color: var(--muted);
  font-size: var(--fs-caption);
}

/* ------------------------------------------------------------------ board */

.pipeline-board {
  align-items: start;
}

.pipeline-col {
  min-width: 0;
}

.pipeline-card {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  padding: var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  text-align: left;
}

.pipeline-card:hover {
  border-color: var(--primary);
}

.pipeline-card.is-selected {
  border-color: var(--primary);
  background: var(--selected-fill);
}

.pipeline-card.is-highlighted {
  animation: pipeline-card-highlight 2.5s ease-out;
}

@keyframes pipeline-card-highlight {
  from { border-color: var(--primary); box-shadow: 0 0 0 4px var(--blue-tint), var(--shadow-card); }
  to { border-color: var(--border); box-shadow: var(--shadow-card); }
}

.pipeline-card-date {
  font-size: var(--fs-caption);
  color: var(--muted);
}

.pipeline-card-date.is-overdue {
  color: var(--red);
  font-weight: var(--fw-semibold);
}

.pipeline-card.is-overdue {
  border-left: 3px solid var(--red);
}

.pipeline-card-step {
  font-size: var(--fs-caption);
  color: var(--body);
}

.pipeline-card-email {
  font-size: var(--fs-caption);
  color: var(--muted);
}

.pipeline-card-email[data-email-state="failed"] {
  color: var(--red);
}

.pipeline-card-email[data-email-state="draft"] {
  color: var(--amber);
}

.pipeline-card-email[data-email-state="ready"] {
  color: var(--body);
}

/* The one live number on the board. Tabular figures so a ticking countdown
   does not make the card twitch once a second. */
.pipeline-countdown {
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

.pipeline-email-tag {
  display: inline-block;
  padding: 0 var(--s2);
  border-radius: var(--r-pill, 999px);
  background: var(--green-fill, var(--selected-fill));
  color: var(--green, var(--body));
  font-weight: var(--fw-semibold);
}

.pipeline-email-sent-at {
  color: var(--muted);
}

.pipeline-card-amount {
  font-weight: var(--fw-semibold);
  color: var(--heading);
}

.pipeline-card-foot {
  display: flex;
  gap: var(--s3);
  font-size: var(--fs-caption);
  color: var(--muted);
}

/* The rail shows a dash when the temperature column is unavailable. */
.pipeline-temp-unknown {
  color: var(--muted);
}

.pipeline-add {
  width: 100%;
  border: 1px dashed var(--border);
  border-radius: var(--r-control);
  background: transparent;
  color: var(--muted);
  padding: var(--s2);
  cursor: pointer;
  font: inherit;
}

.pipeline-add:hover {
  color: var(--primary);
  border-color: var(--primary);
}

/* --------------------------------------------------------------- deal modal */

.pipeline-modal {
  max-width: 880px;
}

.pipeline-modal .modal-head {
  align-items: flex-start;
}

.pipeline-modal-head {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  min-width: 0;
  flex: 1 1 auto;
}

.pipeline-modal-head-main {
  min-width: 0;
  flex: 1 1 auto;
}

.pipeline-modal-head-actions {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex: 0 0 auto;
}

.pipeline-help-btn {
  margin-top: var(--s1);
}

.pipeline-modal-company {
  color: var(--heading);
  font-size: var(--fs-section);
  font-weight: var(--fw-semibold);
}

.pipeline-modal-company-meta,
.pipeline-modal-contact,
.pipeline-modal-why,
.pipeline-modal-caption {
  color: var(--muted);
  font-size: var(--fs-caption);
}

.pipeline-modal-company-meta,
.pipeline-modal-contact {
  overflow-wrap: anywhere;
}

.pipeline-modal-company-meta a {
  color: inherit;
}

.pipeline-modal-stage {
  flex: 0 0 auto;
  margin-top: var(--s1);
}

.pipeline-modal-why {
  margin-top: var(--s2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pipeline-modal-body {
  padding: var(--s6);
}

.pipeline-modal .modal-body {
  padding: 0;
}

.pipeline-deal {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s3);
}

.pipeline-deal-field {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  min-width: 0;
}

.pipeline-deal-next-action {
  grid-column: 1 / -1;
}

.pipeline-deal .advisory {
  grid-column: 1 / -1;
}

.pipeline-modal-caption {
  margin-top: var(--s3);
}

.pipeline-email {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.pipeline-email-state {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2);
}

.pipeline-email-time {
  color: var(--body);
  cursor: help;
  font-size: var(--fs-caption);
}

.pipeline-email-reason,
.pipeline-email-error {
  font-size: var(--fs-caption);
}

.pipeline-email-countdown,
.pipeline-email-msgid,
.pipeline-email-next {
  font-size: var(--fs-caption);
  color: var(--body);
}

.pipeline-email-msgid code {
  overflow-wrap: anywhere;
}

.pipeline-email-next {
  color: var(--muted);
}

.pipeline-email-preview {
  box-sizing: border-box;
  width: 100%;
  max-width: 640px;
  padding: var(--s3);
  border: 1px solid var(--mail-border);
  border-radius: var(--r-control);
  background: var(--mail-surface);
  color: var(--mail-text);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

.pipeline-email-preview-title {
  margin-bottom: var(--s2);
  color: var(--mail-muted);
  font-weight: var(--fw-semibold);
}

.pipeline-email-header {
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--mail-divider);
}

.pipeline-email-header-row {
  display: flex;
  gap: var(--s2);
  min-width: 0;
}

.pipeline-email-header-label {
  flex: 0 0 48px;
  color: var(--mail-muted);
}

.pipeline-email-subject {
  overflow-wrap: anywhere;
}

.pipeline-email-body {
  margin-top: var(--s3);
  color: var(--mail-text);
  background: var(--mail-surface);
  font: 14px/1.5 Arial, Helvetica, sans-serif;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.pipeline-email-review {
  padding: var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  background: var(--selected-fill);
  color: var(--body);
  font-size: var(--fs-caption);
}

.pipeline-email-provenance {
  padding-top: var(--s2);
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: var(--fs-caption);
}

.pipeline-email-provenance ul {
  margin: var(--s1) 0 0;
  padding-left: var(--s4);
}

.pipeline-email-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.pipeline-send-now {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--fs-caption);
}

.pipeline-send-now-confirm {
  flex-wrap: wrap;
  color: var(--body);
}

.pipeline-card-send-now {
  margin-top: var(--s1);
}

.pipeline-email-send-now-status {
  color: var(--body);
  font-weight: var(--fw-semibold);
}

/* ------------------------------------------------- message corrections */

/* « Correction à approuver » / « Corrigé »: the shared pill, beside the email
   line on the board and beside the state pill in the card. */
.pipeline-correction-badge {
  margin-left: var(--s1);
  white-space: nowrap;
}

.pipeline-email-state .pipeline-correction-badge {
  margin-left: 0;
}

/* Which version leaves, said once, above the preview. */
.pipeline-email-version {
  color: var(--body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
}

.pipeline-email-version[data-email-version="pending"] {
  color: var(--amber);
}

/* What « Approuver tous » releases, said above the button. */
.pipeline-email-approval-scope {
  color: var(--body);
  font-size: var(--fs-caption);
}

/* A taken, sent or failed email whose delivery snapshot could not be read:
   the label and this line, never a stand-in text. */
.pipeline-email-delivery-unavailable {
  color: var(--mail-muted);
  font-style: italic;
}

.pipeline-send-now-reason {
  color: var(--muted);
  font-size: var(--fs-caption);
}

.pipeline-correction-modal {
  max-width: 1040px;
}

.pipeline-correction {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.pipeline-correction-hold {
  padding: var(--s2) var(--s3);
  border-radius: var(--r-control);
  background: var(--amber-tint);
  color: var(--amber);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
}

.pipeline-correction-busy,
.pipeline-correction-notice {
  font-size: var(--fs-caption);
}

.pipeline-correction-notice {
  color: var(--green);
  font-weight: var(--fw-semibold);
}

.pipeline-correction-error {
  margin-top: 0;
}

.pipeline-correction-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4);
}

.pipeline-correction-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pipeline-correction-heading {
  margin: 0 0 var(--s2);
  color: var(--heading);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
}

.pipeline-correction-body-label {
  margin-top: var(--s3);
}

/* The generated text keeps the mail face and line breaks of the preview, on
   the page's own tint and with no field border, so it never reads as a field. */
.pipeline-correction-readonly {
  box-sizing: border-box;
  min-height: 40px;
  padding: var(--s3);
  border: 1px dashed var(--border);
  border-radius: var(--r-control);
  background: var(--canvas);
  color: var(--body);
  font: 14px/1.5 Arial, Helvetica, sans-serif;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.pipeline-correction-readonly-body {
  flex: 1 1 auto;
  min-height: 280px;
}

.pipeline-correction-body {
  flex: 1 1 auto;
  min-height: 280px;
  font: 14px/1.5 Arial, Helvetica, sans-serif;
}

.pipeline-correction-note .textarea {
  min-height: 56px;
}

.pipeline-correction-hint {
  margin-top: var(--s1);
  font-size: var(--fs-caption);
}

.pipeline-correction-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  justify-content: flex-end;
}

.pipeline-correction-actions .btn-danger {
  margin-right: auto;
}

.pipeline-correction-ask {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--selected-fill);
}

.pipeline-correction-ask-text {
  margin: 0;
  color: var(--body);
}

.pipeline-touch-counter {
  cursor: help;
}

.pipeline-help-panel {
  margin: 0 0 var(--s4);
}

.pipeline-help-ladders {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s5);
}

.pipeline-help-ladder {
  min-width: 0;
}

.pipeline-help-ladder-row {
  display: flex;
  gap: var(--s2);
  padding: var(--s1) 0;
  color: var(--body);
  font-size: var(--fs-caption);
  line-height: var(--lh-base);
}

.pipeline-help-ladder-day {
  flex: 0 0 52px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.pipeline-disclosure {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--s3) 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--heading);
  font: inherit;
  font-weight: var(--fw-semibold);
  text-align: left;
  cursor: pointer;
}

.pipeline-disclosure::after {
  content: '▾';
  color: var(--muted);
}

.pipeline-history-more {
  margin-top: var(--s2);
}

.pipeline-modal-footer {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  align-items: center;
  margin: var(--s5) calc(var(--s6) * -1) calc(var(--s6) * -1);
  padding: var(--s4) var(--s6);
  border-top: 1px solid var(--border);
  background: var(--surface);
  z-index: 1;
}

.pipeline-modal-footer .pipeline-remove {
  margin-right: auto;
}

.pipeline-touch-actions,
.pipeline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s2);
}

.pipeline-actions .btn[disabled],
.pipeline-touch-actions .btn[disabled] {
  background: var(--disabled-fill);
  color: var(--disabled-text);
  border-color: var(--border);
  cursor: not-allowed;
}

.pipeline-log,
.pipeline-contact {
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--border);
}

.pipeline-log:last-of-type,
.pipeline-contact:last-of-type {
  border-bottom: 0;
}

/* ---------------------------------------------------------------- calllog */

.calllog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s2);
}

.calllog-field {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  min-width: 0;
}

.calllog-title {
  font-size: var(--fs-section);
  font-weight: var(--fw-semibold);
  color: var(--heading);
  margin-bottom: var(--s2);
}

.calllog-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--s2);
  margin-top: var(--s2);
}

.add-company-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--s3);
  margin: var(--s3) 0;
  padding: var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--selected-fill);
}

.add-company-facts .login-field { margin-bottom: 0; }

.add-facts-hint {
  grid-column: 1 / -1;
  margin: var(--s2) 0 0;
  color: var(--muted);
  font-size: var(--fs-caption);
}

.pipeline-email-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s2);
  margin-top: var(--s3);
  padding: var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--selected-fill);
}

.pipeline-email-facts .login-field { margin: 0; }
.pipeline-email-fact-error { grid-column: 1 / -1; }

@media (max-width: 640px) {
  .add-company-facts,
  .pipeline-email-facts {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The date field the operator left blank is marked on the field itself, not
   only in a message further down the form. */
input.field-error {
  border-color: var(--red);
}

@media (max-width: 900px) {
  .pipeline-deal,
  .calllog-grid,
  .pipeline-correction-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pipeline-correction-readonly-body {
    min-height: 0;
  }

  .pipeline-help-ladders {
    grid-template-columns: minmax(0, 1fr);
  }
}