/* Follow-up sequences: the Start dialog (loaded on every tab that offers it)
 * and the Sequences tab itself. Built on the console's tokens in app.css.
 * Channel colours: navy = text, gold = email, green = call reminder. Red keeps
 * its one meaning on this console: something is waiting on you. */

:root { --gold: #9A7428; --gold-bg: #F7F0E2; }

/* ---------- Card badge ---------- */
.seqbadge { border-style: dashed !important; color: var(--navy) !important; background: #EEF3FB !important; }
.seqbadge--paused, .seqbadge--problem { color: var(--warn) !important; background: var(--warn-bg) !important; border-color: var(--warn) !important; }

/* ---------- Channel chip ---------- */
.seqch {
  display: inline-block; min-width: 46px; text-align: center;
  font: 700 10.5px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 7px; border-radius: 5px;
}
.seqch--sms   { background: #E7EEF9; color: var(--navy); }
.seqch--email { background: var(--gold-bg); color: var(--gold); }
.seqch--call  { background: var(--go-bg); color: var(--go); }

/* ---------- Dialog ---------- */
.seqdlg {
  width: min(760px, calc(100vw - 24px)); max-height: calc(100dvh - 24px);
  padding: 0; border: 0; border-radius: 12px; background: var(--card); color: var(--ink);
  box-shadow: 0 24px 60px rgba(11, 25, 41, .28);
}
.seqdlg::backdrop { background: rgba(11, 25, 41, .5); }
.seqdlg__body { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px 0; }
.seqdlg__loading { color: var(--ink-faint); padding: 30px 0; text-align: center; }
.seqdlg__head { display: flex; align-items: flex-start; gap: 12px; }
.seqdlg__head > div { flex: 1; min-width: 0; }
.seqdlg__eyebrow { margin: 0; font: 700 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--signal); }
.seqdlg__title { margin: 6px 0 2px; font: 600 20px/1.2 var(--sans); }
.seqdlg__contact { margin: 0; font: 400 13px/1.4 var(--mono); color: var(--ink-soft); }
.seqdlg__foot {
  position: sticky; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 4px -20px 0; padding: 12px 20px; background: var(--field); border-top: 1px solid var(--rule);
}
.seqdlg__stops { flex: 1 1 260px; font: 400 12px/1.4 var(--sans); color: var(--ink-soft); }

.seqicon {
  width: 30px; height: 30px; display: inline-grid; place-items: center; border-radius: 6px;
  border: 1px solid var(--rule); background: var(--card); color: var(--ink-soft); font-size: 15px; line-height: 1;
}
.seqicon:disabled { opacity: .35; cursor: default; }
.seqicon--x { border: 0; font-size: 22px; }

.seqnote { margin: 0; padding: 10px 12px; border-radius: 8px; font: 400 13px/1.5 var(--sans); }
.seqnote--test { background: #EEF3FB; border: 1px solid rgba(0, 40, 104, .18); color: var(--navy); }
.seqnote--warn { display: flex; gap: 8px; align-items: flex-start; background: var(--warn-bg); border: 1px solid rgba(180, 83, 9, .25); cursor: pointer; }
.seqerr { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--signal-bg); color: var(--signal); font: 500 13px/1.5 var(--sans); }
.seqwarn { color: var(--signal); font-family: var(--sans); }

.seqfield { display: flex; flex-direction: column; gap: 5px; }
.seqfield > span, .seqblank label {
  font: 600 11px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint);
}
.seqfield select, .seqblank input, .seqstep__subject, .seqtpl input, .seqtpl select {
  width: 100%; padding: 9px 10px; border-radius: 7px; border: 1px solid var(--rule);
  background: var(--field); color: var(--ink); font: 400 14px/1.3 var(--sans);
}

.seqblanks { padding: 12px 13px; border-radius: 8px; background: var(--signal-bg); border: 1px dashed rgba(178, 34, 52, .45); display: flex; flex-direction: column; gap: 10px; }
.seqblanks__head { margin: 0; font: 700 12.5px/1 var(--sans); color: var(--signal); }
.seqblank { display: grid; grid-template-columns: 150px 1fr auto; gap: 8px; align-items: center; }
.seqblank input { background: var(--card); }
@media (max-width: 560px) { .seqblank { grid-template-columns: 1fr; } }

.seqsteps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.seqstep { border: 1px solid var(--rule); border-radius: 9px; padding: 11px 12px; display: flex; flex-direction: column; gap: 8px; position: relative; }
.seqstep--sms { border-left: 3px solid var(--navy); }
.seqstep--email { border-left: 3px solid var(--gold); }
.seqstep--call { border-left: 3px solid var(--go); background: #FAFDFB; }
.seqstep__head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.seqstep__head b { font: 600 14px/1 var(--sans); }
.seqstep__date { font: 500 12.5px/1.2 var(--mono); color: var(--ink-soft); }
.seqstep__tools { margin-left: auto; display: flex; gap: 4px; }
.seqstep__when { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font: 400 13px/1.3 var(--sans); color: var(--ink-soft); }
.seqstep__when label { display: inline-flex; gap: 5px; align-items: center; cursor: pointer; }
.seqstep__when input[type="datetime-local"], .seqstep__when input[type="time"] {
  padding: 5px 7px; border-radius: 6px; border: 1px solid var(--rule); font: 400 13px/1 var(--mono); background: var(--card); color: var(--ink);
}
.seqstep__days { width: 58px; padding: 5px 7px; border-radius: 6px; border: 1px solid var(--rule); font: 500 13px/1 var(--mono); }
.seqstep__et { font: 600 11px/1 var(--mono); color: var(--ink-faint); }
.seqstep__hint { font: 400 11.5px/1 var(--sans); color: var(--ink-faint); }
.seqstep__body {
  width: 100%; padding: 10px 11px; border-radius: 8px; border: 1px solid var(--rule); resize: vertical;
  background: var(--field); color: var(--ink); font: 400 14px/1.5 var(--sans);
}
.seqstep__body:focus, .seqstep__subject:focus { background: var(--card); outline: 2px solid var(--royal); outline-offset: -1px; }
.seqstep__count { align-self: flex-end; font: 400 11px/1 var(--mono); color: var(--ink-faint); }
.seqstep__count--bad { color: var(--signal); font-weight: 600; }

.seqadd { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font: 400 12.5px/1 var(--sans); color: var(--ink-soft); }

/* ---------- Sequences tab ---------- */
.seqtop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.seqtop__spacer { flex: 1; }
.seqbanner { margin: 12px var(--pad) 0; max-width: 900px; }
@media (min-width: 932px) { .seqbanner { margin-left: auto; margin-right: auto; } }
.seqbanner--off { background: var(--signal-bg) !important; border-color: rgba(178,34,52,.3) !important; color: var(--signal) !important; }

.seqsec { display: flex; flex-direction: column; gap: 0; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.seqsec__head { display: flex; align-items: baseline; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--rule); background: var(--field); }
.seqsec__head h2 { margin: 0; font: 700 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.seqsec__head small { font: 400 12px/1 var(--mono); color: var(--ink-faint); }
.seqsec--needs .seqsec__head h2 { color: var(--signal); }
.seqsec__empty { padding: 14px 16px; margin: 0; font: 400 13.5px/1.5 var(--sans); color: var(--ink-faint); }

.seqrow { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; padding: 11px 16px; border-top: 1px solid var(--rule); }
.seqrow:first-of-type { border-top: 0; }
.seqrow__t { font: 500 13px/1.2 var(--mono); color: var(--ink-soft); }
.seqrow__t--late { color: var(--warn); }
.seqrow__who { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.seqrow__line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.seqrow__name { font: 600 15px/1.25 var(--sans); color: var(--ink); background: none; border: 0; padding: 0; text-align: left; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.seqrow__name:hover { text-decoration-color: var(--ink-faint); }
.seqrow__meta { font: 400 12px/1.4 var(--mono); color: var(--ink-faint); }
.seqrow__said { font: 400 13px/1.45 var(--sans); color: var(--ink); background: var(--field); border-left: 3px solid var(--royal); padding: 5px 9px; border-radius: 0 6px 6px 0; margin-top: 3px; overflow-wrap: anywhere; }
.seqrow__acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.seqrow__acts .bbtn { padding: 6px 11px; font-size: 13px; }
@media (max-width: 640px) {
  .seqrow { grid-template-columns: 1fr; }
  .seqrow__acts { justify-content: flex-start; }
}

.seqpill { display: inline-block; font: 700 10.5px/1 var(--sans); letter-spacing: .05em; text-transform: uppercase; padding: 5px 8px; border-radius: 5px; white-space: nowrap; }
.seqpill--replied, .seqpill--called, .seqpill--talked, .seqpill--human { background: var(--warn-bg); color: var(--warn); }
.seqpill--no_reply { background: var(--gold-bg); color: var(--gold); }
.seqpill--problem, .seqpill--opted_out, .seqpill--send_failed { background: var(--signal-bg); color: var(--signal); }
.seqpill--goal_met, .seqpill--finished { background: var(--go-bg); color: var(--go); }
.seqpill--manual, .seqpill--cancelled, .seqpill--replaced { background: var(--field); color: var(--ink-soft); }
.seqpill--running { background: #E7EEF9; color: var(--navy); }

/* Run detail, opened in place under its row. */
.seqrun { grid-column: 1 / -1; margin: 6px 0 4px; padding: 12px; border-radius: 9px; background: var(--field); border: 1px solid var(--rule); display: flex; flex-direction: column; gap: 10px; }
.seqrun__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.seqrun__step { background: var(--card); border: 1px solid var(--rule); border-radius: 8px; padding: 9px 11px; display: flex; flex-direction: column; gap: 6px; }
.seqrun__step--sent, .seqrun__step--done { opacity: .78; }
.seqrun__step--cancelled, .seqrun__step--skipped { opacity: .5; }
.seqrun__step header { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font: 400 12.5px/1.3 var(--mono); color: var(--ink-soft); }
.seqrun__step header b { font: 600 13px/1 var(--sans); color: var(--ink); }
.seqrun__step p { margin: 0; font: 400 13.5px/1.5 var(--sans); white-space: pre-wrap; overflow-wrap: anywhere; }
.seqrun__edit { display: flex; flex-direction: column; gap: 6px; }
.seqrun__edit textarea { width: 100%; padding: 8px 10px; border-radius: 7px; border: 1px solid var(--rule); font: 400 13.5px/1.5 var(--sans); background: var(--card); resize: vertical; }
.seqrun__edit .row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font: 400 12.5px/1 var(--sans); color: var(--ink-soft); }
.seqrun__edit input[type="datetime-local"] { padding: 5px 7px; border-radius: 6px; border: 1px solid var(--rule); font: 400 13px/1 var(--mono); }
.seqrun__log { margin: 0; padding: 0; list-style: none; font: 400 12px/1.6 var(--mono); color: var(--ink-faint); }
.seqrun__acts { display: flex; flex-wrap: wrap; gap: 6px; }

/* People search for "+ Start sequence" on this tab. */
.seqfind { display: flex; flex-direction: column; gap: 8px; }
.seqfind input { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--rule); font: 400 15px/1.3 var(--sans); background: var(--field); }
.seqfind__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 50dvh; overflow: auto; }
.seqfind__list button { width: 100%; text-align: left; padding: 9px 11px; border-radius: 7px; border: 1px solid var(--rule); background: var(--card); display: flex; flex-direction: column; gap: 2px; }
.seqfind__list button:hover { border-color: var(--ink-faint); background: var(--field); }
.seqfind__list b { font: 600 14px/1.2 var(--sans); }
.seqfind__list span { font: 400 12px/1.3 var(--mono); color: var(--ink-faint); }

/* Templates */
.seqtpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.seqtplcard { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.seqtplcard h3 { margin: 0; font: 600 15px/1.3 var(--sans); }
.seqtplcard p { margin: 0; font: 400 12.5px/1.45 var(--sans); color: var(--ink-soft); }
.seqtplcard__steps { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font: 400 11px/1 var(--mono); color: var(--ink-faint); }
.seqtplcard__acts { display: flex; gap: 6px; margin-top: auto; }
.seqtplcard--off { opacity: .6; }

.seqtpl { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.seqtpl__row { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; }
@media (max-width: 560px) { .seqtpl__row { grid-template-columns: 1fr; } }
.seqtpl label > span { display: block; font: 600 11px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 5px; }
.seqchips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; font: 400 11.5px/1 var(--sans); color: var(--ink-faint); }
.seqchips button { font: 500 11.5px/1 var(--mono); padding: 4px 7px; border-radius: 5px; border: 1px solid rgba(0,40,104,.2); background: #EEF3FB; color: var(--navy); }
.seqtpl__step select { width: auto; padding: 5px 7px; font-size: 13px; }
/* `.seqtpl input` is full-width; the day count must stay a small box. */
.seqtpl .seqstep__days { width: 58px; padding: 5px 7px; font: 500 13px/1 var(--mono); background: var(--card); }

/* Template picker and the AI button share a row. */
.seqtplrow { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.seqtplrow .seqfield--tpl { flex: 1 1 320px; }
.seqnote--ai { background: #F4F0FB; border: 1px solid rgba(91, 61, 160, .22); color: #3F2A78; }

/* Template numbers */
.seqstats { display: flex; flex-wrap: wrap; gap: 4px 12px; font: 400 11.5px/1.4 var(--mono); color: var(--ink-soft); }
.seqstats b { color: var(--ink); font-weight: 600; }
.seqstats--none { color: var(--ink-faint); font-style: italic; font-family: var(--sans); }