/* ══════════════════════════════════════════════════════════════════════════
   Bulk approved-template send - the sheet and the progress card that AdminLeads
   and AdminOpenDayRegistrations mount.

   Two components, one shared preview: WaTemplatePicker is lifted straight out
   of the inbox's own template sheet and keeps every `.wai-tpl__*` class, so
   admin-whatsapp.css needed no edit and the two previews cannot drift. Only the
   controls that exist ONLY in bulk - the per-variable role switch, the fallback
   field, the summary line and the progress card - are named here, under a `wab-`
   prefix.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── The token bridge ──────────────────────────────────────────────────────

   admin-whatsapp.css defines the `--wa-*` palette on `.admin-layout:has(.wai-page)`
   - i.e. only while the INBOX is on screen. The leads and registrations pages
   have no `.wai-page`, so every `.wai-tpl__*` rule would resolve its colours to
   nothing there and the preview card would render as unstyled text on white.

   `.wab-scope` re-declares exactly the tokens that block consumes, and no more.
   Values are copied from the light skin verbatim; if that palette is ever
   retuned, this list is the second place to change. It is a deliberate, small
   duplication rather than widening the inbox's own selector: `:has()` on the
   layout root is already load-bearing there, and hanging a second surface off
   it would make one screen's colours depend on another screen being mounted. */

.wab-scope {
  --wa-chip: #ffffff;
  --wa-header: #f0f2f5;
  --wa-out: #d9fdd3;
  --wa-ink: #191a23;
  --wa-ink-2: #54656f;
  --wa-line: rgba(134, 150, 160, 0.15);
  --wa-green: #25d366;
  --wa-green-ink: #117335;
  --wa-green-wash: rgba(37, 211, 102, 0.12);
  --wa-green-line: rgba(37, 211, 102, 0.55);
  --wa-link: #026e9e;
  --wa-danger-ink: #d10032;
  --wa-danger-wash: rgba(234, 0, 56, 0.07);
  --wa-warn: #8a5c00;
  --wa-warn-wash: rgba(255, 171, 0, 0.12);
  --wa-warn-line: rgba(255, 171, 0, 0.45);
  --wa-shadow-sm: 0 1px 0.5px rgba(11, 20, 26, 0.13);

  direction: rtl;
  text-align: right;
  font-family: var(--font-body);
  color: var(--text-primary, #191a23);
}

/* ── The preflight verdict, above the picker ──────────────────────────────

   The server's answer, not the table's. It sits FIRST because "who is actually
   getting this" is the question staff need settled before they start choosing
   wording - and on the registrations screen the selection outlives a filter
   change, so the number on screen and the number in the batch are genuinely
   different facts. */

.wab-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs, 4px) var(--space-sm, 8px);
  padding: 10px 12px;
  border-radius: var(--radius-md, 12px);
  background: var(--wa-green-wash);
  font-size: 0.82rem;
  line-height: 1.5;
}

.wab-summary--quiet {
  margin: 0;
  background: var(--wa-header);
  color: var(--text-secondary, #5a5b6a);
}

.wab-summary__main {
  font-weight: 600;
  color: var(--wa-green-ink);
}

/* Every skip is PRINTED, never silently dropped: a recipient who quietly
   received nothing is how a campaign is discovered to be half-sent three days
   later. Amber, because none of these is an error - they are decisions. */
.wab-summary__skip {
  padding: 1px 8px;
  border-radius: var(--radius-full, 980px);
  background: var(--wa-warn-wash);
  color: var(--wa-warn);
  font-size: 0.74rem;
}

/* ── Who, by name ─────────────────────────────────────────────────────────

   The roster under the counts. It SCROLLS rather than growing: a batch is
   capped at 400 people, and a sheet that tall would push the send button off
   the screen - which is worse than a scroll, because the button is the thing
   staff need to find after they have finished reading.

   Capped at 15rem so roughly seven rows are visible: enough to recognise the
   set at a glance and to make it obvious the box continues, without the list
   dominating a sheet whose actual job is composing the message. */

.wab-people {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 15rem;
  overflow-y: auto;
  border: 1px solid var(--wa-line);
  border-radius: var(--radius-md, 12px);
}

.wab-people__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm, 8px);
  padding: 6px 10px;
  font-size: 0.8rem;
  line-height: 1.5;
  border-block-end: 1px solid var(--wa-line);
}

.wab-people__row:last-child {
  border-block-end: none;
}

/* Position in the send queue. Tabular so the column stays straight past nine,
   and fixed-width so a 3-digit batch does not ripple the names sideways. */
.wab-people__n {
  flex: 0 0 auto;
  min-width: 1.6em;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  text-align: start;
  color: var(--text-tertiary, #8e8f9e);
}

.wab-people__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--wa-ink);
}

.wab-people__phone {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-tertiary, #8e8f9e);
}

/* A skipped row is muted, never struck through or reddened: nothing has gone
   wrong: these are decisions (an opt-out, a missing number, the same person
   twice), and painting them as errors is how staff learn to ignore them. */
.wab-people__row--skip .wab-people__name,
.wab-people__row--skip .wab-people__n {
  color: var(--text-tertiary, #8e8f9e);
}

.wab-people__why {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 1px 8px;
  border-radius: var(--radius-full, 980px);
  background: var(--wa-warn-wash);
  color: var(--wa-warn);
  font-size: 0.72rem;
}

/* ── Per-variable controls ────────────────────────────────────────────────

   One block per `{{n}}`: the labelled input, then the two-way switch that says
   where its value comes from. The switch only renders in bulk mode, so the
   1-on-1 sheet's markup is unchanged. */

.wab-param {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* What a per-recipient slot shows in place of an input - there is nothing to
   type, and an empty disabled box would read as a field somebody forgot. */
.wab-param__auto {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 9px 12px;
  border: 1px dashed var(--wa-green-line);
  border-radius: var(--radius-md, 12px);
  background: var(--wa-green-wash);
  font-size: 0.84rem;
  color: var(--wa-green-ink);
}

/* The signature dropdown.

   It borrows `.wai-tpl__input` for its box so the chooser and the free-text
   field beneath it read as one control rather than two unrelated widgets. The
   NATIVE select is kept on purpose: `appearance: none` plus a hand-drawn
   chevron would have to be re-solved for RTL, and the native control is the one
   that opens the platform picker on a phone - which is where half this panel's
   use is since the mobile rebuild. */

.wab-signature {
  cursor: pointer;
  /* A select sizes its own text; without this it renders a step smaller than
     the input it sits above. */
  font-size: 0.88rem;
  line-height: 1.4;
}

.wab-signature:disabled {
  opacity: 0.5;
  cursor: default;
}

/* The free-text box the last row reveals. Indented from the start edge so it
   reads as belonging to the dropdown above rather than as a second variable -
   `inline-start` because this island is RTL. */
.wab-signature__custom {
  margin-inline-start: 12px;
}

.wab-modes {
  display: flex;
  gap: 6px;
}

.wab-mode {
  flex: 1 1 0;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--wa-line);
  border-radius: var(--radius-full, 980px);
  background: var(--wa-chip);
  font-family: var(--font-body);
  font-size: 0.74rem;
  color: var(--text-secondary, #5a5b6a);
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.wab-mode:hover:not(:disabled) {
  border-color: var(--wa-green-line);
  color: var(--wa-green-ink);
}

.wab-mode--on {
  border-color: var(--wa-green-line);
  background: var(--wa-green-wash);
  color: var(--wa-green-ink);
  font-weight: 600;
}

.wab-mode:focus-visible {
  outline: 2px solid var(--wa-green-ink);
  outline-offset: 2px;
}

.wab-mode:disabled {
  opacity: 0.5;
  cursor: default;
}

/* The nameless fallback. A REQUIRED field, and the reason nobody is ever
   skipped for a missing name - the value that goes out is
   `resolvedName ?? fallback`, and both sides are validated non-empty before a
   batch exists.

   Ruled off from the per-variable blocks above because it is a different KIND
   of input: those fill one slot, this one decides what a whole class of people
   sees. */
.wab-fallback {
  padding-block-start: var(--space-sm, 8px);
  border-block-start: 1px solid var(--wa-line);
}

.wab-fallback__hint {
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--wa-ink-2);
}

/* Who the preview is rendered against, plus the switch to the nameless case.
   Reading the actual sentence a nameless recipient receives is the only way to
   know the fallback reads as Hebrew rather than as a bug. */
.wab-previewfor {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.74rem;
  color: var(--wa-ink-2);
}

.wab-previewfor__who {
  margin: 0;
}

.wab-previewfor__toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

/* ══════════════════════════════════════════════════════════════════════════
   The progress card - WaBulkProgress.vue

   A CARD, under the bulk bar, not a modal. A 200-person batch runs for twenty
   minutes and nothing about it needs the page open, so the surface that watches
   it must be dismissible without any suggestion that dismissing stops it.
   ══════════════════════════════════════════════════════════════════════════ */

.wab-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm, 8px);
  margin-block-start: var(--space-sm, 8px);
  padding: 14px 16px;
  border: 1px solid var(--wa-line);
  border-radius: var(--radius-lg, 16px);
  background: #ffffff;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 60, 130, 0.08));
}

/* A batch that lost people is not a success, and must not look like one at a
   glance. Amber, never red: `unknown` and an opt-out are not failures, and the
   one state that IS red on this screen is a failed row inside the report.
   The accent is on the inline-start edge, which is the RIGHT edge here. */
.wab-card--warn {
  border-color: var(--wa-warn-line);
  border-inline-start: 3px solid var(--wa-warn);
}

.wab-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-sm, 8px);
}

.wab-card__title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary, #191a23);
}

.wab-card__tpl {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text-tertiary, #8e8f9e);
}

/* TWO segments, not one. A single green bar reached 100% on a batch where 8 of
   11 people received nothing, so the loudest element on the card said "success"
   under a sentence that said the opposite. Green is confirmed sent, amber is
   everybody else the sender has finished with, and the grey track showing
   through is what is still to go. Flex so the two sit side by side and start
   from the inline-start edge, which is the RIGHT one here. */
.wab-bar {
  position: relative;
  display: flex;
  height: 6px;
  border-radius: var(--radius-full, 980px);
  background: var(--wa-header);
  overflow: hidden;
}

/* The one green in the card. It is the WhatsApp green because that is what this
   bar measures - not the panel's blue, which means "the admin shell". */
.wab-bar__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--wa-green);
  transition: width 0.4s ease;
}

/* Never red: `unknown` sits in this segment too, and the message may well be on
   the customer's phone. Amber is the same reading the per-person chips give. */
.wab-bar__lost {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--wa-warn);
  transition: width 0.4s ease;
}

.wab-card__counts {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--text-secondary, #5a5b6a);
}

/* The quiet line under the bar: the countdown, the closing sentence, and the
   "these numbers are not being refreshed" note. Muted on purpose - a sustained
   poll failure has to be VISIBLE, not alarming; the batch itself is unaffected
   by whether this tab can reach the server. */
.wab-card__eta {
  margin: 0;
  font-size: 0.76rem;
  color: var(--text-tertiary, #8e8f9e);
}

/* Same line, promoted, when the sentence is about people who got nothing or
   about a send that has stopped moving. */
.wab-card__eta--warn {
  color: var(--wa-warn);
  font-weight: 500;
}

/* A re-send could not be started. Red here is right: unlike a skipped or
   unknown recipient, this is an action that failed outright. */
.wab-card__error {
  margin: 0;
  padding: 8px 10px;
  border-radius: var(--radius-sm, 8px);
  background: var(--wa-danger-wash);
  color: var(--wa-danger-ink);
  font-size: 0.8rem;
  line-height: 1.5;
}

/* A pause is Meta refusing the number, or the template vanishing mid-run. It is
   the one state in this card that must be read, so it is the one that is
   coloured. */
.wab-card__paused {
  margin: 0;
  padding: 8px 10px;
  border-radius: var(--radius-sm, 8px);
  background: var(--wa-warn-wash);
  color: var(--wa-warn);
  font-size: 0.8rem;
  line-height: 1.5;
}

.wab-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm, 8px);
}

/* The one-click re-send to the people a batch never reached. It carries the
   card's warning colour rather than the panel's primary blue: it is the answer
   to a problem, and it costs money every time it is pressed. */
.wab-card__resend {
  border-color: var(--wa-warn-line);
  color: var(--wa-warn);
}

.wab-card__resend:disabled {
  opacity: 0.5;
  cursor: default;
}

/* What stands where the re-send button was, once one has been started. It is a
   statement, not a control: pressing again would be a second paid batch to the
   same people, so there is deliberately nothing here to press. */
.wab-card__resent {
  margin: 0;
  padding: 6px 10px;
  border-radius: var(--radius-sm, 8px);
  background: var(--wa-green-wash);
  color: var(--wa-green-ink);
  font-size: 0.78rem;
  line-height: 1.5;
}

/* When it happened. Mono and LTR: a date inside an RTL sentence reads backwards
   otherwise, and this one is often a colleague's press from hours ago. */
.wab-card__resent-when {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  opacity: 0.8;
}

.wab-report {
  font-size: 0.78rem;
  color: var(--text-secondary, #5a5b6a);
}

.wab-report > summary {
  cursor: pointer;
  padding: 4px 0;
  color: var(--primary-color, #0071e3);
}

.wab-report__list {
  margin: var(--space-xs, 4px) 0 0;
  padding: 0;
  list-style: none;
  max-height: 320px;
  overflow-y: auto;
}

.wab-report__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs, 4px) var(--space-sm, 8px);
  padding: 5px 0;
  border-block-end: 1px solid var(--wa-line);
}

.wab-report__name {
  font-weight: 500;
  color: var(--text-primary, #191a23);
}

.wab-report__status {
  padding: 1px 8px;
  border-radius: var(--radius-full, 980px);
  background: var(--wa-header);
  font-size: 0.72rem;
}

.wab-report__status--sent {
  background: var(--wa-green-wash);
  color: var(--wa-green-ink);
}

.wab-report__status--failed {
  background: var(--wa-danger-wash);
  color: var(--wa-danger-ink);
}

/* `unknown` is NOT a failure and must never be painted as one - the message may
   well be on the customer's phone, and a red row is what makes somebody send it
   a second time. Amber, the same reading the inbox gives it. */
.wab-report__status--unknown,
.wab-report__status--skipped {
  background: var(--wa-warn-wash);
  color: var(--wa-warn);
}

.wab-report__why {
  color: var(--text-tertiary, #8e8f9e);
  font-size: 0.72rem;
}

@media (max-width: 767px) {
  .wab-modes {
    flex-direction: column;
  }

  .wab-mode {
    min-height: 40px;
  }

  .wab-card {
    padding: 12px;
  }

  /* Two actions and a sentence-long label do not fit a phone side by side, and
     a wrapped half-width button is a smaller tap target than the panel's 44px
     floor. One per line. */
  .wab-card__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .wab-card__actions .btn {
    min-height: 44px;
  }
}