/* ═══════════════════════════════════════════════════════════════════════════
   Admin money - the ex-VAT parenthetical
   ═══════════════════════════════════════════════════════════════════════════

   ONE class for the "(₪12,288 ללא מע״מ)" that now follows every amount in the
   panel, and one for the once-per-screen legend that explains the short form.

   Loaded immediately after admin.css and before every per-view file, because
   these two classes appear on ELEVEN different screens - the enrollments list,
   course cohorts, the person page's sale panel and payments ledger, card
   payments, contracts, the contract modal, enrollment pages, the WhatsApp lead
   panel, open-day stats and affiliate codes. Each of those has its own
   stylesheet, and a per-view copy of a shared class is how eleven screens end
   up with eleven slightly different greys. A per-view file may still tune the
   size on its own surface - it loads later, so a bare `.exvat` there wins at
   equal specificity, which is exactly the escape hatch the load order exists
   to provide.

   ── Why muted, and why never the gradient ────────────────────────────────

   The ex-VAT figure is a QUALIFIER on the amount, not a second amount. It sits
   one rank below in size and two in contrast (--adm-ink-3 against the figure's
   --adm-ink at weight 600), so an eye scanning a column of money reads the
   real figures and finds the parentheses only when it looks for them. Weight
   stays at 400: the repo forbids the brand gradient at 500 and above, numerals
   included, and a bolded qualifier would compete with the number it qualifies.

   ── Bidi, and why the gap is where it is ─────────────────────────────────

   These screens are Hebrew RTL islands. The markup contract lives in the header
   of src/components/admin/ExVat.vue, which is the only thing that should be
   emitting these classes. One part of it is a STYLE decision and belongs here:

   The inline form takes its gap from `margin-inline-start` rather than a literal
   space in the text, so the gap cannot survive as a stray space when the
   parenthetical renders nothing, and cannot collapse inside a flex parent.

   THE PRICE OF THAT CHOICE, and the reason ExVat.vue sets no `dir` on its root:
   a logical margin resolves against the ELEMENT'S OWN direction, not its
   parent's. The first pass of this change put `dir="rtl"` on the span, so
   inside an LTR money cell the gap landed on the trailing side and the figure
   rendered flush against the amount - "₪5,000(₪4,237)", in three places. The
   root inherits the flow direction now; only the figure inside is isolated. */

.exvat {
  font-size: 0.82em;
  font-weight: 400;
  /* Literal fallback on purpose: --adm-ink-3 is declared on `.admin-layout`, not
     on :root, so any surface that renders outside the shell (a future Teleport
     to body, a component mounted bare in a spec) would otherwise fall back to
     `inherit` and take the FULL-CONTRAST ink of the figure it is qualifying -
     turning the muted parenthetical into a second amount of equal weight. */
  color: var(--adm-ink-3, #6E7180);
  white-space: nowrap;
  unicode-bidi: isolate;
}

/* Inline, on the same line as the figure it qualifies: KPI tile values that
   have the room, pricing rows, modal body rows, list subtitles.

   NO MARGIN HERE, deliberately. The gap is a real leading space emitted inside
   ExVat.vue - see the long comment there. A logical margin resolved against the
   element's own direction and landed on the far side inside RTL islands; a
   physical one has to guess the direction; and either one stacked on top of a
   flex parent's `gap` where the parenthetical became a flex item of its own. A
   space is none of those things, and it is stripped automatically in exactly
   the two cases where it would double up. */
.exvat--inline {
  /* Intentionally empty of geometry - the modifier survives as the hook views
     use to target the inline form (and to tell it from --block at a glance). */
  display: inline;
}

/* Its own line, under the figure: the tight surfaces. `display: block` rather
   than a <br>, so the parenthetical can be hidden per-breakpoint by a view that
   runs out of vertical room without the line break surviving as a gap.

   Line-height is tightened because these stack inside KPI tiles that already
   set their own vertical rhythm with a `gap`, and a default 1.5 there pushes
   the tile's label out of alignment with its neighbours. */
.exvat--block {
  display: block;
  margin-block-start: 0.1em;
  line-height: 1.25;
}

/* A touch smaller again where the host is already small print - table cells at
   0.85rem, the WhatsApp lead panel's stat rows, chips. Applied by the view, not
   inferred, so a cell that DOES have room keeps the readable size. */
.exvat--sm {
  font-size: 0.78em;
}

/* ── The legend ──────────────────────────────────────────────────────────

   Printed ONCE per screen, near the money, wherever that screen prints the
   short unlabelled `(₪12,288)` form. Without it a bare second figure reads as a
   discount or a deposit; with it, every parenthesis on the screen is explained
   and the tight surfaces get to stay tight.

   Deliberately not `position: sticky` and not a tooltip: it is one line of
   small print that belongs in the document flow, and a legend that scrolls away
   from the numbers it explains is a legend that stops working exactly when the
   table gets long enough to need it. */
.exvat-legend {
  display: block;
  margin: 0.15rem 0 0;
  font-size: 0.72rem;
  font-weight: 400;
  /* Literal fallback on purpose: --adm-ink-3 is declared on `.admin-layout`, not
     on :root, so any surface that renders outside the shell (a future Teleport
     to body, a component mounted bare in a spec) would otherwise fall back to
     `inherit` and take the FULL-CONTRAST ink of the figure it is qualifying -
     turning the muted parenthetical into a second amount of equal weight. */
  color: var(--adm-ink-3, #6E7180);
}

/* In a card/table header row that is already a flex line, the legend should not
   claim its own row - it trails the title as small print. */
.exvat-legend--inline {
  display: inline;
  margin-inline-start: 0.5rem;
}