/* ============================================================
   File:        report.css
   Project:     StudioFlow (Grace Aerobics & Fitness Center)
   Developer:   Janvi Vakhariya — V Techno Labs
   Created:     2026-09-07  (updated 2026-09-10)
   Purpose:     Design system for the Batch Report — filters, summary tiles, and single-line breakdown rows.
   Copyright:   © 2026 V Techno Labs. All rights reserved.
                Proprietary software developed by V Techno Labs.
   ============================================================

   Prefix: sf-report-, and nothing else. Never sf-member- / sf-pay- / sf-batch-
   / sf-dash- / sf-idash- / sf-plan- / sf-user- / sf-dev- / sf-mdet-.

   THE SHAPE OF THE PAGE. Filters first, because a report is its filters;
   then the summary as tiles, because five numbers read faster side by side
   than as a list; then the breakdown as single-line rows, because a table with
   six columns does not fit in 360px and a row does.

   ROWS, NOT TABLES. Every breakdown row is one line: the name on the left and
   truncating, the figures on the right and never squeezed. A second line under
   it carries whatever is secondary. That is what keeps the page inside 360px
   with no horizontal scroll -- the one thing a wide table cannot promise.

   Tabular numerals everywhere a figure is printed, so figures in a column of
   rows line up and can be compared without being read.

   The page paints no background: site.css already paints one on .sf-frame for
   every signed-in screen.
   ============================================================ */

.sf-report {
  --sf-report-ink: #2b2a1f; --sf-report-muted: #615F4E;
  --sf-report-pink: #c2185b; --sf-report-pink-deep: #98123f;
  --sf-report-card: #ffffff; --sf-report-edge: rgba(43,42,31,.10);
  --sf-report-line: rgba(43,42,31,.12);
  --sf-report-good: #1d7a3f; --sf-report-good-tint: #e3f3e8;
  --sf-report-warn: #9a5b00; --sf-report-warn-tint: #fdf0d7;
  --sf-report-bad: #b3261e; --sf-report-bad-tint: #fdecea;
  --sf-report-ice: #46587e; --sf-report-ice-tint: #e7ecf5;
  --sf-report-aer: #0f766e; --sf-report-aer-tint: #dff1ef;
  --sf-report-yog: #c96a00; --sf-report-yog-tint: #fdeedd;
  --sf-report-dan: #6d28d9; --sf-report-dan-tint: #efe8fa;
  --sf-report-upi: #0f766e; --sf-report-upi-tint: #dff1ef;
  --sf-report-cash: #6d28d9; --sf-report-cash-tint: #efe8fa;
  --sf-report-wing: linear-gradient(90deg,#43a047,#d4b91e,#f57c00,#e53957,#c2185b,#7e57c2,#5c6f91);
  --sf-report-radius: 18px; --sf-report-tap: 44px;

  box-sizing: border-box; max-width: 640px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 14px;
  color: var(--sf-report-ink);
  font-family: "Archivo", system-ui, sans-serif; font-size: 15px; line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
}
.sf-report *, .sf-report *::before, .sf-report *::after { box-sizing: border-box; }
.sf-report a { color: inherit; text-decoration: none; }
.sf-report :focus-visible { outline: 2px solid var(--sf-report-pink); outline-offset: 2px; }

/* ---------- head ---------- */
.sf-report-head { display: flex; align-items: center; gap: 12px; }
.sf-report-head img { flex: none; display: block; }
.sf-report-title { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; }
.sf-report-sub { margin: 2px 0 0; font-size: 13px; color: var(--sf-report-muted); }

/* the card every section sits in */
.sf-report-card {
  background: var(--sf-report-card); border: 1px solid var(--sf-report-edge);
  border-radius: var(--sf-report-radius); padding: 14px;
  box-shadow: 0 10px 24px -18px rgba(43,42,31,.35);
}

/* ---------- filters ---------- */
.sf-report-filters { display: flex; flex-direction: column; gap: 10px; }
.sf-report-label { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--sf-report-muted); }
.sf-report-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sf-report-input {
  width: 100%; min-height: var(--sf-report-tap); padding: 8px 12px;
  border: 1.5px solid rgba(43,42,31,.2); border-radius: 12px; background: #fff;
  font: inherit; font-size: 15px; color: var(--sf-report-ink);
}
.sf-report-input:focus { border-color: var(--sf-report-pink); outline: none; box-shadow: 0 0 0 3px rgba(194,24,91,.15); }
.sf-report-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* one-tap periods */
.sf-report-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.sf-report-preset {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px;
  border-radius: 999px; border: 1.5px solid rgba(43,42,31,.18); background: #fff;
  font-size: 13px; font-weight: 700; color: var(--sf-report-ink);
}
.sf-report-preset:active { background: rgba(43,42,31,.06); }

/* the class-type buttons: the same control Members and Batches carry */
.sf-report-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.sf-report-act {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px;
  border-radius: 999px; border: 1.5px solid rgba(43,42,31,.18); background: #fff;
  font-size: 13.5px; font-weight: 800; color: var(--sf-report-ink);
}
.sf-report-act img { flex: none; display: block; border-radius: 4px; }
.sf-report-act.is-on { border-color: transparent; color: #fff; background: linear-gradient(155deg, #e0447a, var(--sf-report-pink-deep)); }
.sf-report-act--aer.is-on { background: var(--sf-report-aer); }
.sf-report-act--yog.is-on { background: var(--sf-report-yog); }
.sf-report-act--dan.is-on { background: var(--sf-report-dan); }

.sf-report-go {
  min-height: var(--sf-report-tap); padding: 0 18px; border: 0; border-radius: 12px;
  background: linear-gradient(155deg, #e0447a, var(--sf-report-pink-deep)); color: #fff;
  font: inherit; font-size: 15px; font-weight: 800; cursor: pointer;
}
.sf-report-note { margin: 0; font-size: 12.5px; color: var(--sf-report-muted); text-wrap: pretty; }
.sf-report-note strong { color: var(--sf-report-ink); }
.sf-report-alert {
  margin: 0; padding: 10px 12px; border-radius: 12px;
  background: var(--sf-report-bad-tint); color: var(--sf-report-bad);
  font-size: 13px; font-weight: 700;
}

/* what is on screen, restated in the studio's own date format */
.sf-report-showing { margin: 0; font-size: 13px; font-weight: 700; color: var(--sf-report-muted); text-wrap: pretty; }
.sf-report-showing strong { color: var(--sf-report-ink); }

/* the download: one solid action, full width on a phone */
.sf-report-pdf {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--sf-report-tap); padding: 0 16px; border-radius: 12px;
  border: 1.5px solid var(--sf-report-pink); background: #fff;
  font-size: 15px; font-weight: 800; color: var(--sf-report-pink);
}
.sf-report-pdf img { flex: none; display: block; }
.sf-report-pdf:active { background: #fce8f0; }

/* ---------- summary tiles ---------- */
.sf-report-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 420px) { .sf-report-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sf-report-tile {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  padding: 10px 12px; border-radius: 12px; background: rgba(43,42,31,.04);
  border-left: 4px solid var(--sf-report-pink);
}
.sf-report-tile-value { font-size: 22px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sf-report-tile-label { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--sf-report-muted); }
.sf-report-tile--good { border-left-color: var(--sf-report-good); background: var(--sf-report-good-tint); }
.sf-report-tile--good .sf-report-tile-value { color: var(--sf-report-good); }
.sf-report-tile--bad { border-left-color: var(--sf-report-bad); background: var(--sf-report-bad-tint); }
.sf-report-tile--bad .sf-report-tile-value { color: var(--sf-report-bad); }
.sf-report-tile--ice { border-left-color: var(--sf-report-ice); background: var(--sf-report-ice-tint); }
.sf-report-tile--ice .sf-report-tile-value { color: var(--sf-report-ice); }

.sf-report-compare { display: flex; flex-direction: column; gap: 4px; margin: 10px 0 0; font-size: 13px; }
.sf-report-compare span { color: var(--sf-report-muted); }
.sf-report-compare strong { font-variant-numeric: tabular-nums; }

/* ---------- section heading ---------- */
.sf-report-sechead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 6px; }
.sf-report-sechead h2 { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--sf-report-muted); }
.sf-report-sechead span { font-size: 12.5px; font-weight: 700; color: var(--sf-report-muted); font-variant-numeric: tabular-nums; }

/* ---------- rows: one line each, name left and truncating, figures right ---------- */
.sf-report-rows { list-style: none; margin: 0; padding: 0; }
.sf-report-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline; column-gap: 10px;
  padding: 10px 0; border-top: 1px solid var(--sf-report-line);
}
.sf-report-rows > li:first-child .sf-report-row { border-top: 0; }
.sf-report-row-name { min-width: 0; font-size: 14.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-report-row-right { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sf-report-row-fig { font-size: 15px; font-weight: 800; }
.sf-report-row-sub { font-size: 12px; font-weight: 700; color: var(--sf-report-muted); }

/* the second line under a row */
.sf-report-row-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
  margin: 1px 0 0; font-size: 12px; color: var(--sf-report-muted);
}
.sf-report-row-meta img { flex: none; display: block; border-radius: 4px; }

/* a cancelled day: marked, never counted */
.sf-report-row--off .sf-report-row-name { color: var(--sf-report-bad); }
.sf-report-chip {
  display: inline-flex; align-items: center; min-height: 20px; padding: 0 7px;
  border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  background: rgba(43,42,31,.07); color: var(--sf-report-muted);
}
.sf-report-chip--off { background: var(--sf-report-bad-tint); color: var(--sf-report-bad); }
.sf-report-chip--visitor { background: var(--sf-report-ice-tint); color: var(--sf-report-ice); }
.sf-report-chip--aer { background: var(--sf-report-aer-tint); color: var(--sf-report-aer); }
.sf-report-chip--yog { background: var(--sf-report-yog-tint); color: var(--sf-report-yog); }
.sf-report-chip--dan { background: var(--sf-report-dan-tint); color: var(--sf-report-dan); }

/* the row that links out to the member */
a.sf-report-row:active { background: rgba(43,42,31,.04); }

/* the "does it add up" warning, printed rather than hidden */
.sf-report-mismatch {
  margin: 8px 0 0; padding: 7px 10px; border-radius: 10px;
  background: var(--sf-report-bad-tint); color: var(--sf-report-bad);
  font-size: 12px; font-weight: 700;
}

/* ---------- the Member Report's own additions ----------

   The same prefix and the same row shape as the Batch Report above: this file
   serves both, so a report screen never looks like a different app depending on
   which one is open. Only what the Member Report needs beyond that is here. */

/* A note that sits with the cards rather than against the page edge. */
.sf-report-note--inset { padding: 0 4px; }

/* The figure on a row, coloured only where the colour means something: red for
   money still owed, green for a weight that came down. Everything else is ink. */
.sf-report-row-fig--due { color: var(--sf-report-bad); }
.sf-report-row-fig--down { color: var(--sf-report-good); }

/* Status chips. The same five states the Members list uses, in the same
   colours, so a chip means one thing across the app. */
.sf-report-chip--good { background: var(--sf-report-good-tint); color: var(--sf-report-good); }
.sf-report-chip--warn { background: var(--sf-report-warn-tint); color: var(--sf-report-warn); }
.sf-report-chip--bad  { background: var(--sf-report-bad-tint);  color: var(--sf-report-bad); }
.sf-report-chip--ice  { background: var(--sf-report-ice-tint);  color: var(--sf-report-ice); }

/* Summary tiles in the class-type colours, so the activity split reads at a
   glance without a legend. */
.sf-report-tile--aer { border-left-color: var(--sf-report-aer); background: var(--sf-report-aer-tint); }
.sf-report-tile--aer .sf-report-tile-value { color: var(--sf-report-aer); }
.sf-report-tile--yog { border-left-color: var(--sf-report-yog); background: var(--sf-report-yog-tint); }
.sf-report-tile--yog .sf-report-tile-value { color: var(--sf-report-yog); }
.sf-report-tile--dan { border-left-color: var(--sf-report-dan); background: var(--sf-report-dan-tint); }
.sf-report-tile--dan .sf-report-tile-value { color: var(--sf-report-dan); }
.sf-report-tile--warn { border-left-color: var(--sf-report-warn); background: var(--sf-report-warn-tint); }
.sf-report-tile--warn .sf-report-tile-value { color: var(--sf-report-warn); }

/* A money figure in a tile is longer than a count, so it steps down a size
   rather than overflowing its box at 360px. */
/* A LONG WORD MAY BREAK; A NUMBER MAY NOT. overflow-wrap:anywhere is here so a
   long activity name cannot push a tile wider than its column -- but applied to
   a figure it broke "₹39,700" across two lines as "₹39,70" and "0", which is
   not a smaller number, it is a wrong one.

   Money tiles opt out and shrink their type instead. They are the two widest
   values on the summary and the only ones where a break changes the meaning. */
.sf-report-tile-value { overflow-wrap: anywhere; }
/* EVERY MONEY TONE, not just two. The Payment Report's tiles are toned by
   payment method as well as by good and bad -- upi, cash and warn all carry
   figures -- and a rule naming only two of them left "₹58,199.99" breaking
   across lines in the middle of the row while the tile beside it was fine. */
.sf-report-tile--good .sf-report-tile-value,
.sf-report-tile--bad .sf-report-tile-value,
.sf-report-tile--upi .sf-report-tile-value,
.sf-report-tile--cash .sf-report-tile-value,
.sf-report-tile--warn .sf-report-tile-value {
  /* Small enough that the studio's largest figure fits the narrowest tile.
     "₹58,199.99" needs about 80px at this size; a money tile is ~140px across
     at 360px where the grid is two columns, and ~90px once it becomes three.
     Both hold it, which is the point -- neither breaking a number across lines
     nor clipping it to "₹1,0…" tells the reader what was collected. */
  font-size: 15px;
  overflow-wrap: normal;
  word-break: keep-all;
  white-space: nowrap;
}

/* "View all", under a list that is showing only its first twenty. */
.sf-report-more {
  display: flex; align-items: center; justify-content: center;
  min-height: var(--sf-report-tap); margin-top: 8px;
  border-radius: 12px; border: 1.5px solid rgba(43,42,31,.18); background: #fff;
  font-size: 14px; font-weight: 800; color: var(--sf-report-pink);
}
.sf-report-more:active { background: rgba(43,42,31,.05); }

/* ---------- the Payment Report's own additions ----------

   Same prefix, same row shape, same tiles as the two reports above: this file
   serves all three, so a report screen never looks like a different app
   depending on which one is open. Only what the Payment Report needs beyond
   that is here. */

/* THE RULE. Everything under it is money that did not arrive, and the layout
   never lets it look like part of the takings above. Same idea, and the same
   dashed rule, that the Payments screen's period cards use. */
.sf-report-notcollected {
  display: block; margin: 12px 0 8px; padding-top: 9px;
  border-top: 1.5px dashed var(--sf-report-line);
  font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--sf-report-muted);
}

/* The two payment methods, in the colours the Payments screen already gives
   them, so a UPI figure is the same colour wherever it is read. */
.sf-report-tile--upi { border-left-color: var(--sf-report-upi); background: var(--sf-report-upi-tint); }
.sf-report-tile--upi .sf-report-tile-value { color: var(--sf-report-upi); }
.sf-report-tile--cash { border-left-color: var(--sf-report-cash); background: var(--sf-report-cash-tint); }
.sf-report-tile--cash .sf-report-tile-value { color: var(--sf-report-cash); }
.sf-report-chip--upi { background: var(--sf-report-upi-tint); color: var(--sf-report-upi); }
.sf-report-chip--cash { background: var(--sf-report-cash-tint); color: var(--sf-report-cash); }

/* A write-off, under the row it belongs to and never beside the amount: it is
   not more money, and putting the two figures on one line would read as if it
   were. */
.sf-report-waived {
  margin: 2px 0 0; font-size: 11.5px; font-weight: 700; color: var(--sf-report-warn);
  text-wrap: pretty;
}

/* The sort toggle in a section heading. */
.sf-report-sechead-link { font-size: 12.5px; font-weight: 800; color: var(--sf-report-pink); }

/* ---------- empty ---------- */
.sf-report-empty {
  background: rgba(255,255,255,.6);
  border: 2px dashed rgba(43,42,31,.22); border-radius: var(--sf-report-radius);
  padding: 24px 18px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.sf-report-empty-title { margin: 0; font-size: 15px; font-weight: 800; }
.sf-report-empty-sub { margin: 0; max-width: 34ch; font-size: 13px; color: var(--sf-report-muted); text-wrap: pretty; }

/* ---------- footer ---------- */
.sf-report-foot { text-align: center; padding: 4px 2px 0; }
.sf-report-wingbar { height: 4px; border: 0; width: 132px; margin: 0 auto 12px; border-radius: 999px; background: var(--sf-report-wing); }

/* ---------- an openable summary tile ----------

   LAST IN THE FILE ON PURPOSE. The tone rules above colour a tile by what it
   counts -- good, bad, ice, aer, yog, dan -- at the same specificity as these.
   A muted tile has to beat its own tone, and source order is what decides that,
   so these must stay below them.

   A tile with rows behind it is an <a> and behaves like one: the whole box is
   the target, it is at least the app's 44px tap height, and it says so with a
   chevron rather than by hoping the colour reads as a button. A tile showing a
   nought is a <span> instead -- see _MemberReportTile -- and is faded here so
   the difference is visible before anybody tries it. */
.sf-report-tile--link {
  min-height: var(--sf-report-tap);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow .12s ease, transform .06s ease;
}
.sf-report-tile--link:hover { box-shadow: 0 6px 16px -10px rgba(43,42,31,.5); }
.sf-report-tile--link:active { transform: translateY(1px); }
.sf-report-tile--link:focus-visible { outline: 2px solid var(--sf-report-pink); outline-offset: 2px; }

/* The one mark that says a tile opens something. Quiet enough to stay out of
   the way of the figure, which is what the tile is actually for. */
.sf-report-tile--link .sf-report-tile-label::after {
  content: " \203A";
  font-weight: 900;
}

/* ---------- a tile with nothing behind it ----------
   Not a link, not focusable, and visibly unavailable. Its title says why, so
   nobody has to tap a nought to discover there was nothing there. */
.sf-report-tile--empty {
  background: rgba(43,42,31,.03);
  border-left-color: rgba(43,42,31,.18);
}
.sf-report-tile--empty .sf-report-tile-value,
.sf-report-tile--empty .sf-report-tile-label {
  color: var(--sf-report-muted);
  opacity: .65;
}

/* ---------- the panel a tile opens into ----------
   It REPLACES the section rather than opening a screen of its own, so every
   filter stays where it was and there is nothing to restore on the way back. */
/* A real box, not display:contents. The page is a flex column with a 14px gap
   and this wrapper repeats it, so the parts inside sit exactly as they did
   before they were wrapped -- and unlike display:contents it can carry the
   anchor offset and the busy state below. */
.sf-report-body { display: flex; flex-direction: column; gap: 14px; }

/* Sits under the fixed app bar when a no-script browser jumps to the anchor.
   Without this the section heading lands behind the bar and the reader is
   looking at the wrong row. */
#report-body { scroll-margin-top: calc(var(--appbar-h, 56px) + 12px); }

.sf-report-focus { border-left: 4px solid var(--sf-report-pink); }

.sf-report-focus-close {
  display: inline-flex; align-items: center;
  min-height: var(--sf-report-tap); margin: 2px 0 8px;
  font-size: 13px; font-weight: 800; color: var(--sf-report-pink);
  text-decoration: none;
}
.sf-report-focus-close:active { color: var(--sf-report-pink-deep); }

/* What the rows in an opened money tile add up to, printed under them so the
   figure on the tile can be checked against the list without adding it up. */
.sf-report-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin: 10px 0 0; padding-top: 8px;
  border-top: 1.5px solid var(--sf-report-edge);
  font-size: 13px; color: var(--sf-report-muted);
}
.sf-report-total strong { font-size: 16px; color: var(--sf-report-ink); font-variant-numeric: tabular-nums; }

/* While a swap is in flight. Faint, and never a spinner: the fetch is one
   small fragment and a spinner would flash for longer than the wait. */
.sf-report-body[aria-busy="true"] { opacity: .6; }

/* ============================================================
   THE CHASE LIST — "Stopped coming"
   ============================================================

   A list of people to ring, read standing up. It was a stack of cards, four
   lines each, and nine members filled three screens; a chase list that has to
   be scrolled to be counted stops being read. Every row is now one line, and
   the whole page fits on one screen for a normal week's worth of names.

   THE ROW IS A FLEX LINE. The left side takes what is left and truncates; the
   right side keeps its own width and is never squeezed. min-width:0 on the
   growing side is what makes the truncation actually happen -- without it a
   long name refuses to shrink and pushes the chip off the edge. */

/* This page is a list first and a page second, so it packs tighter than the
   other reports: the shared 14px rhythm between blocks costs three gaps above
   the list, which is most of a row. Ten is still clearly separated. */
.sf-report:has(.sf-report-absent-list),
.sf-report:has(.sf-report-absent-empty) { gap: 10px; }

/* ---------- one-line header ---------- */
.sf-report-absent-head {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin: 0 0 2px;
}
.sf-report-absent-head img { flex: none; align-self: center; display: block; }
/* SHRINK TO THE WORDS, not to the space. With flex:1 the title took the whole
   line whatever it said, which pushed the count onto a second row on every
   width -- the header could not be one line even when the text would have fit.
   It now takes what it needs and the count sits beside it. */
.sf-report-absent-title {
  margin: 0; flex: 0 1 auto; min-width: 0;
  font-size: 20px; font-weight: 800; letter-spacing: -.01em; color: var(--sf-report-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sf-report-absent-count {
  flex: none;
  font-size: 11.5px; font-weight: 700; color: var(--sf-report-muted);
  font-variant-numeric: tabular-nums;
}

/* The single note that replaced a paragraph per card. */
.sf-report-absent-note {
  margin: 0 0 2px;
  font-size: 12px; color: var(--sf-report-muted); text-wrap: pretty;
}

/* ---------- the window, on one line ---------- */
.sf-report-absent-filter {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.sf-report-absent-filter .sf-report-label { flex: none; margin: 0; }
.sf-report-absent-filter .sf-report-input {
  flex: 0 1 92px; width: 92px; min-height: var(--sf-report-tap);
}
.sf-report-absent-go {
  flex: none; min-height: var(--sf-report-tap); padding: 0 16px;
  border: 0; border-radius: 12px;
  background: var(--sf-report-pink); color: #fff;
  font-size: 14px; font-weight: 800; cursor: pointer;
}
.sf-report-absent-go:active { background: var(--sf-report-pink-deep); }

/* ---------- the list ---------- */
/* The card holds the rows tight to its edges: the dividers are the rows' own,
   so the card's padding would otherwise leave them floating short of the sides. */
.sf-report-absent-card { padding: 2px 14px; }

.sf-report-absent-list { list-style: none; margin: 0; padding: 0; }

.sf-report-absent-row {
  display: flex; align-items: stretch; gap: 6px;
  border-top: 1px solid var(--sf-report-line);
}
.sf-report-absent-row:first-child { border-top: 0; }

/* The whole line is the link. 48px is the floor, not the height -- two lines of
   text set it taller than that on their own, and the floor is there for the
   member with no batch whose second line is short. */
.sf-report-absent-main {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  /* 48px is the floor and the content sits inside it, so the padding only has
     to keep the two lines off the dividers. Seven made every row 55px, which
     cost a whole member off the bottom of a small phone. */
  min-height: 48px; padding: 4px 0;
  color: inherit; text-decoration: none;
}
.sf-report-absent-main:active { background: rgba(43,42,31,.04); }

/* Takes the space that is left, and truncates rather than pushing. */
.sf-report-absent-who { flex: 1 1 auto; min-width: 0; display: block; }

.sf-report-absent-name {
  display: block;
  font-size: 14.5px; font-weight: 700; color: var(--sf-report-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sf-report-absent-meta {
  display: block; margin-top: 1px;
  font-size: 11.5px; color: var(--sf-report-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* The right-hand marks keep their own width whatever the name does. */
.sf-report-absent-marks { flex: none; display: flex; align-items: center; gap: 5px; }

/* ---------- how long they have been gone ----------
   THE RAMP IS THE POINT. Amber up to a fortnight, red past it, so the members
   closest to leaving stand out before a single word is read. The number is
   inside the chip, so colour is never carrying the meaning on its own. */
.sf-report-absent-chip {
  flex: none;
  padding: 3px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 800; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.sf-report-absent-chip--warn {
  background: var(--sf-report-warn-tint); color: var(--sf-report-warn);
}
.sf-report-absent-chip--bad {
  background: var(--sf-report-bad-tint); color: var(--sf-report-bad);
}

/* ---------- owes money ----------
   A mark, not a figure. What this list needs to say is that there IS a debt;
   how much is a question for Member Details, one tap away. */
.sf-report-absent-dues {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--sf-report-bad-tint); color: var(--sf-report-bad);
  font-size: 12px; font-weight: 800; line-height: 1;
}

/* ---------- call ----------
   A sibling of the row link, not a child. Word rather than a glyph: the icon
   set has no telephone in it, and one invented shape on one screen is worse
   than one short word. */
.sf-report-absent-call {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 46px; padding: 0 6px;
  border-left: 1px solid var(--sf-report-line);
  color: var(--sf-report-pink);
  font-size: 12px; font-weight: 800;
  text-decoration: none;
}
.sf-report-absent-call:active { background: rgba(43,42,31,.05); }

/* ---------- nobody to chase ---------- */
.sf-report-absent-empty { text-align: center; }
.sf-report-absent-empty-line {
  margin: 0 0 4px;
  font-size: 15px; font-weight: 800; color: var(--sf-report-good);
}

/* ---- where a member stands on money, in the meta line -------------------

   TWO STATES AND ONLY TWO. Owing something is red and carries the figure;
   owing nothing is green and carries no figure at all. The row used to print
   the pending amount and a status word beside it, so a member who owed nothing
   read "₹0 paid" -- which says they have paid nothing.

   Weightier than the plan and batch it sits beside, because it is the one thing
   on the line somebody is scanning for. */
.sf-report-money {
  font-weight: 800;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.sf-report-money--due { color: var(--sf-report-bad); }
.sf-report-money--paid { color: var(--sf-report-good); }

/* ---- a meta line that refuses to wrap ------------------------------------
   The member rows carry five things on their second line and are budgeted two
   lines in total. Allowed to wrap they took three, which is the whole reason
   the report read as endless. Nothing wraps; the plan name shrinks and
   ellipsises instead, because it is the longest of the five and the one a
   reader is least likely to be scanning for. */
.sf-report-row-meta--one { flex-wrap: nowrap; gap: 0 8px; min-width: 0; }

/* The expiry and the money keep their width: both are short, both are fixed,
   and both are what the line is being scanned for. */
.sf-report-row-meta--one > span { flex: none; white-space: nowrap; }

/* The plan and the batch give way instead, in that order. Either can run to
   sixteen characters and there is not room for both at 360px; truncating the
   describing half is better than pushing the deciding half off the edge, which
   is what happened when only the plan could shrink. */
.sf-report-meta-grow {
  flex: 1 1 auto !important;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- a fact that is missing, rather than a name -------------------------
   Thirty-seven of the studio's fifty-seven payments predate the audit columns,
   so most rows in the list carry this. Italic and lighter than the meta text
   around it, so the eye reads it as an absence and skims past, instead of
   reading a column of identical names. */
.sf-report-unknown {
  font-style: italic;
  opacity: .75;
}