/* ══ LeadActivityLog - the lead action log + staff comments ══
   src/components/admin/LeadActivityLog.vue

   One component, three hosts: the lead card (.ld-page), the expanded open-day
   registration row (.reg-page) and the enrollment detail page. All are Hebrew
   RTL islands and the component never renders anywhere else, so RTL is the
   DEFAULT here - the vertical rail sits on the RIGHT and the timestamp is
   pushed with `margin-right: auto`. That is deliberately not an LTR base plus a
   per-island override: there is no LTR host to serve, and the override pair is
   exactly how the .ld-page copy of these rules ended up split across two places
   in admin-lead-detail.css.

   Visually identical to the .ld-* timeline it replaces - this was a move, not a
   redesign. Controls come from admin.css (.btn, .btn-primary, .btn-sm,
   .btn-icon, .btn-icon.danger, .form-textarea); nothing here restyles them.

   NO position: fixed anywhere. The dense host lives inside .reg-table-scroll,
   which is a container-query container (container-type: inline-size) - a fixed
   descendant would be trapped in that box instead of the viewport. */

/* ── Scope bar (.lal-scope) ────────────────────────────
   Rendered ONLY by a host that passed `enrollmentId` - today just the
   enrollment detail page. The lead-level hosts never see it, which is why none
   of these rules touch anything above.

   It is deliberately the quietest full-width block on the panel and still the
   first: it is not a control anybody hunts for, it is the sentence that tells
   you which rows you are reading and where the next note is about to land.
   The button is a plain .btn.btn-sm from admin.css; only its position is set
   here, so it cannot drift from every other small button in the panel. */

.lal-scope {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.6rem;
  margin-bottom: 0.75rem;
  padding: 0.5rem 0.7rem;
  background: #f6f7fb;
  border: 1px solid #e8e9f0;
  border-radius: 10px;
  font-size: 0.76rem;
  color: #5a5b6a;
}

/* Grows to eat the row, which pushes the button to the far (start-relative)
   end without a margin-auto that would have to be flipped for RTL. The basis
   is what makes it drop to its own line before the button gets crushed. */
.lal-scope-text {
  flex: 1 1 15rem;
  margin: 0;
  line-height: 1.45;
}

.lal-scope-toggle {
  flex: 0 0 auto;
}

/* The honesty line: while widened, the composer writes to the PERSON, not to
   the sale whose page this is. Amber rather than red - nothing is broken, but
   somebody about to type needs to know before they type, not after. Forced onto
   its own line so it reads as a caveat about the whole bar. */
.lal-scope-warn {
  flex: 1 1 100%;
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: #8a6a1c;
}

/* ── Row scope chips ──────────────────────────────────
   Blue is the sale open here, and it is the SAME blue as the live timeline
   icons above, so the eye reads it as "this thread". Violet is another sale of
   the same person. Deliberately not the amber of .lal-activity-edited: that one
   already means "the text changed", and two amber pills on one line would fuse
   into a single vague warning. */

.lal-scope-chip {
  font-size: 0.66rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 0 0.35rem;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: help;
}

.lal-scope-chip--own {
  background: #eef4ff;
  border-color: #dbe6fb;
  color: #2456c4;
}

.lal-scope-chip--foreign {
  background: #f1eafd;
  border-color: #ded0f8;
  color: #5b3fb5;
}

/* ── Composer ─────────────────────────────────────── */

.lal-composer {
  background: #fbfcfe;
  border: 1px solid #e8e9f0;
  border-radius: 12px;
  padding: 0.75rem;
  margin-bottom: 1rem;
}

.lal-type-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.6rem;
}

.lal-type-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #fff;
  border: 1px solid #e0e2ec;
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #5a5b6a;
  cursor: pointer;
  transition: all 0.15s;
}

.lal-type-btn:hover {
  border-color: #b9c6e8;
  color: #191a23;
}

.lal-type-btn--active,
.lal-type-btn--active:hover {
  background: #0071e3;
  border-color: #0071e3;
  color: #fff;
}

.lal-composer-input {
  width: 100%;
  resize: vertical;
}

.lal-composer-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.5rem;
}

/* ── Quick comment templates (.lct-) ──────────────────
   The recurring outcomes staff log by hand, one click each. The list lives in
   src/lib/leadCommentTemplates.ts; these rules dress it.

   Prefixed .lct- rather than .lal- because BOTH composers wear it: this
   component and the lead card's own inline composer in admin-lead-detail.css.
   It is styled once here so the two rows cannot drift apart the way the
   timelines did before the log was extracted.

   Deliberately quieter than .lal-type-btn above it. These chips FILL the form,
   they do not describe its state, so none of them is ever "active" - a click
   writes the textarea, moves the selection in the type picker, and the chip
   returns to rest. A chip that latched would read as a second type picker. */

/* The gap between PILLS, and it is deliberately wider than the gap inside one
   (`.lct-pill`, 0.2rem). Each pill is now two targets - a play button and the
   chip it belongs to - so the row has to say which play belongs to which chip
   before anything is pressed. 0.3rem on both would have made every second gap
   ambiguous. Widened from 0.3rem on 2026-08-09 with owner item 7. */
.lct-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.6rem;
}

/* ── WS-D, 2026-08-09: one-click logging (owner item 7) ────────────────────
   Two controls per template, grouped: the play button LOGS the note straight
   away, the chip beside it FILLS the composer and saves nothing.

   The play button is FIRST in the DOM and therefore on the leading edge, which
   is the physical RIGHT - this component renders inside `direction: rtl` on
   every one of its four hosts and is deliberately never mirrored (see the RTL
   note in admin-person.css section 2).

   Its own colour family, not the chip's: the chip is a dashed, quiet,
   fills-a-form control, and a control that writes to a shared audit trail on one
   press must not look like the one that does not. Solid edge, green ink, filled
   rest state. */
.lct-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  min-inline-size: 0;
}

.lct-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  inline-size: 1.6rem;
  block-size: 1.6rem;
  padding: 0;
  border: 1px solid #bfe3cd;
  border-radius: 999px;
  background: #f1faf4;
  color: #1f7a4d;
  font-size: 0.58rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.lct-play:hover:not(:disabled) {
  background: #dcf3e5;
  border-color: #86ceaa;
}

.lct-play:focus-visible {
  outline: 2px solid #0071e3;
  outline-offset: 1px;
}

/* The panel's de-facto disabled convention - `.reg-action:disabled` in
   admin.css, `opacity: .45; cursor: not-allowed`. There is no shared
   `.btn:disabled` in this design system, so every control declares its own pair
   and this is the majority form. It is on while a save is in flight, so a second
   press cannot file the same note twice. */
.lct-play:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.lct-label {
  font-size: 0.72rem;
  color: #8e8f9e;
}

.lct-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: #f6f7fb;
  border: 1px dashed #d3d7e6;
  border-radius: 999px;
  padding: 0.24rem 0.62rem;
  font-size: 0.73rem;
  font-weight: 500;
  color: #5a5b6a;
  cursor: pointer;
  transition: all 0.15s;
}

.lct-chip:hover {
  background: #eef4ff;
  border-color: #b9c6e8;
  border-style: solid;
  color: #2456c4;
}

.lct-chip:focus-visible {
  outline: 2px solid #0071e3;
  outline-offset: 1px;
}

.lct-chip-icon {
  font-size: 0.68rem;
  opacity: 0.7;
}

/* ── Empty state ──────────────────────────────────── */

.lal-empty {
  color: #8e8f9e;
  font-size: 0.85rem;
}

/* ── Timeline ─────────────────────────────────────── */

.lal-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

/* The rail. RTL default: it runs down the RIGHT edge, behind the icons. */
.lal-timeline::before {
  content: '';
  position: absolute;
  right: 15px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: #eef0f6;
}

.lal-activity {
  position: relative;
  display: flex;
  gap: 0.75rem;
  padding: 0.55rem 0;
}

.lal-activity-icon {
  position: relative;
  z-index: 1;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eef4ff;
  color: #2456c4;
  border: 1px solid #dbe6fb;
  font-size: 0.8rem;
}

/* Two different things used to share one class.
   --audit = the server wrote this line ABOUT a change (assignment, follow-up,
   status, attendance). Its text is secondary next to a note somebody typed.
   --system = and nobody pressed a button for it either. Only that second case
   is grey-on-grey: a staff action keeps the live icon and the full-strength
   name, because who did it is the point of the line. */
.lal-activity--system .lal-activity-icon {
  background: #f3f4f7;
  color: #8e8f9e;
  border-color: #e6e7ee;
}

/* --foreign = the widened view is showing a row from a DIFFERENT sale of the
   same person. The chip says so in words; this says so before anybody reads.

   The negative margin cancels the padding exactly, so the tint spreads past the
   text on both sides while the icon stays on the rail - a row that shifted
   sideways would be the more confusing of the two mistakes. The tint also
   paints over the rail behind it (the rail is the list's ::before, which sits
   below the positioned rows), and that break is wanted: this row is not part of
   the thread you opened. */
.lal-activity--foreign {
  background: #faf7fe;
  border-radius: 8px;
  padding-inline: 0.5rem;
  margin-inline: -0.5rem;
}

.lal-activity--foreign .lal-activity-icon {
  background: #f1eafd;
  color: #5b3fb5;
  border-color: #ded0f8;
}

.lal-activity-content {
  flex: 1;
  min-width: 0;
}

.lal-activity-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.5rem;
  font-size: 0.76rem;
  color: #8e8f9e;
}

.lal-activity-author {
  font-weight: 700;
  color: #191a23;
}

.lal-activity--system .lal-activity-author {
  font-weight: 600;
  color: #8e8f9e;
}

.lal-activity-type {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* "נערך". Quiet on purpose - it is a footnote on the row, not a status - but it
   has to be there: the text on screen is not what was written at the time. */
.lal-activity-edited {
  font-size: 0.66rem;
  font-weight: 600;
  color: #a08b3f;
  background: #fdf8e7;
  border: 1px solid #f0e4bd;
  border-radius: 999px;
  padding: 0 0.35rem;
  cursor: help;
}

.lal-activity-time {
  margin-right: auto;
}

.lal-activity-actions {
  display: inline-flex;
  gap: 0.1rem;
  opacity: 0.45;
  transition: opacity 0.15s;
}

.lal-activity:hover .lal-activity-actions,
.lal-activity:focus-within .lal-activity-actions {
  opacity: 1;
}

.lal-activity-body {
  margin: 0.25rem 0 0;
  font-size: 0.88rem;
  color: #191a23;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.lal-activity--audit .lal-activity-body {
  font-size: 0.8rem;
  color: #8e8f9e;
}

.lal-activity-edit {
  width: 100%;
  margin-top: 0.35rem;
  resize: vertical;
}

.lal-activity-edit-foot {
  display: flex;
  justify-content: flex-end;
  gap: 0.4rem;
  margin-top: 0.4rem;
}

.lal-load-more {
  width: 100%;
  justify-content: center;
  margin-top: 0.5rem;
}

/* ── Dense: the expanded-row host ─────────────────────
   Same log, tighter rhythm. The registration row opens inside a table cell, so
   the whole timeline has to earn its vertical space against a card stack that
   is already tall. Nothing is hidden and no control is dropped - the two hosts
   must show the same thing. */

/* No dense host passes `enrollmentId` today, but the pair is legal by
   construction and a bar left at full size would tower over a 0.38rem row. */
.lal--dense .lal-scope {
  padding: 0.4rem 0.55rem;
  margin-bottom: 0.7rem;
  font-size: 0.72rem;
  border-radius: 8px;
}

.lal--dense .lal-composer {
  padding: 0.6rem;
  margin-bottom: 0.7rem;
  border-radius: 10px;
}

.lal--dense .lal-type-picker {
  gap: 0.3rem;
  margin-bottom: 0.45rem;
}

.lal--dense .lal-type-btn {
  padding: 0.22rem 0.6rem;
  font-size: 0.72rem;
  gap: 0.3rem;
}

/* Same reasoning as the base rule: the inter-pill gap stays visibly wider than
   the 0.2rem inside a pill, so the pairing survives the tighter spacing. */
.lal--dense .lct-row {
  gap: 0.45rem;
  margin-bottom: 0.45rem;
}

.lal--dense .lct-chip {
  padding: 0.18rem 0.5rem;
  font-size: 0.68rem;
}

.lal--dense .lct-play {
  inline-size: 1.4rem;
  block-size: 1.4rem;
  font-size: 0.52rem;
}

.lal--dense .lal-composer-foot {
  margin-top: 0.4rem;
}

.lal--dense .lal-activity {
  gap: 0.55rem;
  padding: 0.38rem 0;
}

/* The rule above sets the `padding` SHORTHAND, and it both outranks
   `.lal-activity--foreign` (two classes to one) and comes later, so it zeroes
   that rule's inline padding while leaving its negative inline margin standing.
   The result would be a foreign row whose content is dragged half a rem
   sideways with no tint around it - exactly the "row that shifted sideways"
   the tint was written to avoid. Restate the pair here, tighter to match. */
.lal--dense .lal-activity--foreign {
  padding-inline: 0.4rem;
  margin-inline: -0.4rem;
}

.lal--dense .lal-activity-icon {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  font-size: 0.7rem;
}

/* The rail follows the smaller icon to its new centre (26 / 2 - 1). */
.lal--dense .lal-timeline::before {
  right: 12px;
  top: 9px;
  bottom: 9px;
}

.lal--dense .lal-activity-head {
  font-size: 0.72rem;
  gap: 0.2rem 0.4rem;
}

.lal--dense .lal-activity-body {
  font-size: 0.82rem;
  margin-top: 0.2rem;
}

.lal--dense .lal-activity--audit .lal-activity-body {
  font-size: 0.76rem;
}

/* ── Responsive ───────────────────────────────────── */

@media (max-width: 1024px) {
  /* The lead card's grid collapses to one column here, which widens the log to
     the full page. Nothing in the timeline itself needs to change - the head is
     already a wrapping flex row. */
  .lal-timeline {
    width: 100%;
  }
}

@media (max-width: 767px) {
  /* No room to push the timestamp to the far edge of the same line - it gets
     its own full-width line under the author and the chips. */
  .lal-activity-time {
    margin-right: 0;
    width: 100%;
  }

  .lal-type-btn {
    padding: 0.28rem 0.6rem;
    font-size: 0.74rem;
  }

  /* The sentence and the button stop competing for one line: the button takes
     the full width under the text rather than shrinking to a two-word stub. */
  .lal-scope-toggle {
    flex: 1 1 100%;
    justify-content: center;
  }
}