/* ══════════════════════════════════════════════════════════════════════════
   WhatsApp destination picker - src/components/admin/WaActionGroup.vue

   One bordered pill split into labelled segments, sharing borders, so a row of
   destinations reads as ONE control rather than three loose buttons. Every
   screen in the panel that can open a WhatsApp chat renders this exact object:
   the leads list, the lead card, the open-day registrations table and card,
   the inbox thread header and the inbox's blocked composer.

   Two things are load-bearing here.

   RTL. The panel's WhatsApp surfaces are Hebrew islands, so the segments run
   right to left: תיבת הפאנל, then וואטסאפ ווב, then אפליקציה. Nothing below
   names `left` or `right`. The outer corners come from `border-radius` on the
   GROUP plus `overflow: hidden`, which is direction-agnostic by construction -
   the usual "round the first child's left corners" recipe is the thing that
   renders a segmented control backwards in RTL. The dividers are
   `border-inline-start` on every segment after the first, which in RTL is the
   segment's right edge: exactly where it touches its predecessor.

   Tap targets. At 767px and below the group turns into a full-width column of
   44px rows (`stack: 'auto'`, the default). A three-segment row cannot carry
   three readable Hebrew labels across a 390px phone without either ellipsing
   the words or shrinking the targets under a thumb, and the labels are the
   whole point of the control. `stack="never"` keeps the row for the inbox
   thread header, which has no vertical room to give.

   Linked once from index.html. `scripts/bundle-css.mjs` folds every
   `/css/admin*` href into the admin-only bundle automatically; do not register
   it a second time.
   ══════════════════════════════════════════════════════════════════════════ */

.wa-actions {
  display: inline-flex;
  align-items: stretch;
  max-width: 100%;
  border: 1px solid #e6ebf2;
  border-radius: 9px;
  background: #fff;
  /* Clips the segments to the group's radius, which is what makes the outer
     corners round and the inner joins square without a single side-specific
     rule. It also clips a focus outline, so the segments draw theirs inset. */
  overflow: hidden;
  vertical-align: middle;
}

.wa-actions--block {
  display: flex;
  width: 100%;
}

.wa-seg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.32rem;
  /* Hug the labels when the group is shrink-to-fit, split the slack when a host
     stretches it (a full-width card row, the registrations action grid). One
     declaration covers both because `flex-basis: auto` starts from the label's
     own width - so a stretched group divides the EXTRA space proportionally
     instead of forcing three equal columns around three unequal words. */
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.3rem 0.6rem;
  border: 0;
  background: none;
  color: #47505c;
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

/* The shared hairline between neighbours. In RTL `inline-start` is the right
   edge, so this lands on the join with the previous segment either way. */
.wa-seg + .wa-seg {
  border-inline-start: 1px solid #e6ebf2;
}

.wa-seg:hover {
  background: #f4f7fb;
  color: #191A23;
}

/* Inset, because the group clips overflow - a normal outline would be cut off
   on the two outer segments. */
.wa-seg:focus-visible {
  outline: 2px solid var(--adm-accent, #0071E3);
  outline-offset: -3px;
}

.wa-seg__icon {
  flex: 0 0 auto;
  font-size: 0.8rem;
  color: #9aa4b2;
}

.wa-seg__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Long form vs short form ──────────────────────────
   Both wordings are in the markup and CSS picks one, because the same instance
   has to say "פאנל" in a dense desktop table cell and "תיבת הפאנל" once that
   cell reflows into a full-width card row - and the alternative is a component
   that watches the viewport, which is the device detection this control does
   not do. `display: none` keeps the unused wording out of the accessibility
   tree too, and the segment's own aria-label always carries the long form. */

.wa-seg__short {
  display: none;
}

.wa-actions--short .wa-seg__long {
  display: none;
}

.wa-actions--short .wa-seg__short {
  display: inline;
}

/* The default destination, and the only one that records anything. Green fill
   plus green ink, against the muted pair beside it - the weight difference is
   what says "reply here first". */
.wa-seg--inbox {
  background: #f2fbf5;
  color: #117335;
}

.wa-seg--inbox .wa-seg__icon {
  color: #1fa855;
  font-size: 0.92rem;
}

.wa-seg--inbox:hover {
  background: #e6f7ec;
  color: #0d5c29;
}

/* ── Sizes ────────────────────────────────────────────
   `sm` for a dense table cell, `md` for a detail view or a card. Both clear
   the panel's own 30px/34px control rhythm; the phone override below lifts
   whichever is in use to 44px. */

.wa-actions--sm .wa-seg {
  min-height: 30px;
  padding: 0.25rem 0.5rem;
  font-size: 0.72rem;
}

.wa-actions--sm .wa-seg__icon {
  font-size: 0.74rem;
}

.wa-actions--sm .wa-seg--inbox .wa-seg__icon {
  font-size: 0.86rem;
}

.wa-actions--md .wa-seg {
  min-height: 34px;
  padding: 0.35rem 0.72rem;
  font-size: 0.78rem;
}

/* ── Inside the WhatsApp inbox ────────────────────────
   `.wai-page` re-points the --adm-* tokens at WhatsApp's own light palette, so
   the group has to read against grey chrome rather than the admin shell's
   white cards. Only the two external segments ever render here (the inbox
   segment would be a button back to the page the agent is already on), so
   there is no green to reconcile. */

.wai-page .wa-actions {
  border-color: var(--wa-line-strong, rgba(134, 150, 160, 0.35));
  background: var(--wa-raised, #fff);
}

.wai-page .wa-seg {
  color: var(--wa-ink-2, #54656f);
}

.wai-page .wa-seg + .wa-seg {
  border-inline-start-color: var(--wa-line-strong, rgba(134, 150, 160, 0.35));
}

.wai-page .wa-seg:hover {
  background: var(--wa-hover, #f5f6f6);
  color: var(--wa-ink, #111b21);
}

.wai-page .wa-seg__icon {
  color: var(--wa-ink-3, #667781);
}

.wai-page .wa-seg:focus-visible {
  outline-color: var(--wa-green-ink, #117335);
}

/* ── Phone ────────────────────────────────────────────
   The column. Full width, one destination per 44px row, dividers turned to
   block edges. The group keeps its border and radius, so it still reads as a
   single control - it is the same object, rotated. */

@media (max-width: 767px) {
  .wa-actions:not(.wa-actions--nostack) {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: 11px;
  }

  .wa-actions:not(.wa-actions--nostack) .wa-seg {
    justify-content: flex-start;
    min-height: 44px;
    padding-inline: 0.85rem;
    font-size: 0.85rem;
  }

  .wa-actions:not(.wa-actions--nostack) .wa-seg + .wa-seg {
    border-inline-start: 0;
    border-block-start: 1px solid #e6ebf2;
  }

  .wai-page .wa-actions:not(.wa-actions--nostack) .wa-seg + .wa-seg {
    border-block-start-color: var(--wa-line-strong, rgba(134, 150, 160, 0.35));
  }

  .wa-actions:not(.wa-actions--nostack) .wa-seg__icon {
    width: 1.1rem;
    font-size: 0.9rem;
    text-align: center;
  }

  .wa-actions:not(.wa-actions--nostack) .wa-seg--inbox .wa-seg__icon {
    font-size: 1.02rem;
  }

  /* A stacked row is the full width of its host, so the reason the label was
     trimmed is gone - spell the destination out. Owner's rule: short only where
     a table cell forces it, long wherever there is room. */
  .wa-actions--short:not(.wa-actions--nostack) .wa-seg__long {
    display: inline;
  }

  .wa-actions--short:not(.wa-actions--nostack) .wa-seg__short {
    display: none;
  }

  /* The row that stays a row still owes a thumb a real target. */
  .wa-actions--nostack .wa-seg {
    min-height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wa-seg {
    transition: none;
  }
}