/* ══ 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. It was widened to 0.55rem on 2026-08-09 so the row
   could say which play button belonged to which chip, back when each template
   was drawn as two separate controls sitting near each other. Owner issue 14
   (2026-08-16) made them one bordered pill split by a hairline, so the pairing
   is now a BORDER and the row no longer has to buy it with whitespace. Back to
   0.4rem, which is what separates ten pills legibly. */
.lct-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}

/* ── ONE PILL, TWO HIT AREAS (owner issue 14, 2026-08-16) ──────────────────
   Each template is a single bordered container holding two segments: the play
   glyph LOGS the composer's whole content, the text beside it FILLS the
   composer and saves nothing.

   It shipped on 2026-08-09 (owner item 7) as two separate controls - a round
   green button next to a dashed chip - because the two do different things and
   one of them writes. That is still true and is still drawn, one level down:
   the CONTAINER is the quiet dashed chip it always was, and the play SEGMENT
   keeps its own green ink and filled rest state inside it. What changed is that
   the pair now reads as one object, which is what they always were.

   THE BORDER MOVED UP, from the two segments onto this box, and that is the
   whole mechanism. `overflow: hidden` is what clips both segments to the pill's
   999px radius, so neither needs a radius of its own and the two cannot
   disagree about the corner they share.

   The play segment 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). `align-items: stretch` is what makes the
   two segments the same height whatever either one's content is; nothing inside
   may state a `block-size`, or it opts out of the shared box and the pill goes
   back to looking like two controls. */
.lct-pill {
  display: inline-flex;
  align-items: stretch;
  min-inline-size: 0;
  background: #f6f7fb;
  border: 1px dashed #d3d7e6;
  border-radius: 999px;
  overflow: hidden;
  transition: border-color 0.15s, border-style 0.15s;
}

/* The whole pill answers the pointer, either half of it, because the thing
   under the cursor IS one control. Each segment then tints its own half below,
   which is what says where the boundary is. */
.lct-pill:hover {
  border-color: #b9c6e8;
  border-style: solid;
}

.lct-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  inline-size: 1.9rem;
  padding: 0;
  /* No border of its own except the hairline it shares with the segment beside
     it. `inline-end` and not `left`/`right`: this is the boundary BETWEEN the
     two segments, and in RTL that is the play's physical left. Solid where the
     pill's own edge is dashed - a divider that dashes too reads as a gap. */
  border: 0;
  border-inline-end: 1px solid #dfe3ef;
  border-radius: 0;
  background: #f1faf4;
  color: #1f7a4d;
  font-size: 0.58rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s;
}

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

/* `outline-offset` is NEGATIVE on both segments, and that is not a taste
   choice: the pill above clips its children (`overflow: hidden`), so a ring
   drawn outside a segment's border box is cut off on the three sides that meet
   the pill's edge. Inset by 2px it is drawn whole, on the segment that actually
   has focus. */
.lct-play:focus-visible {
  outline: 2px solid #0071e3;
  outline-offset: -2px;
}

/* 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;
}

/* The text segment. Its border, its radius and its fill are the PILL's now -
   what is left here is the type glyph, the caption and the padding around
   them. */
.lct-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0.24rem 0.62rem;
  font-size: 0.73rem;
  font-weight: 500;
  color: #5a5b6a;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.lct-chip:hover {
  background: #eef4ff;
  color: #2456c4;
}

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

.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;
}

/* The dense row's own gap. It used to be argued as "wider than the 0.2rem
   inside a pill, so the pairing survives" - the pairing is a border since owner
   issue 14 and survives any gap, so this is now simply the tighter spacing the
   dense variant wants. */
.lal--dense .lct-row {
  gap: 0.35rem;
  margin-bottom: 0.45rem;
}

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

/* INLINE SIZE ONLY. The play segment's height comes from the pill's
   `align-items: stretch`, so a `block-size` here would make it shorter than the
   text beside it and open a gap inside a box that is meant to read as one. */
.lal--dense .lct-play {
  inline-size: 1.7rem;
  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;
  }
}