/* ===== sp_month_ledger_html (HTML form, scoped) =====
   Loaded eagerly from anvil.yaml native_deps.head_html.

   SCOPE. The private root class is .sp-ledger, the wrapping div that makes the
   card and the month modal one top-level node. .sp-ledger itself gets NO rule:
   it stands where Anvil's own wrapper would, and declarations on it would
   change the layout.

   Everything below is :where(.sp-ledger), which adds no specificity, EXCEPT the
   .sp-dim and .sp-row-nodata groups. A head <link> loads before every inline block and
   before the dependency's runtime-injected sheet, so it loses a specificity
   tie on document order.
   .sp-row-nodata td at (0,1,1) tied exactly with theme.css's
   .px-table td { color: var(--px-text-primary) }, and the quiet row for a month
   whose NHS payment files have not arrived would have come back in full ink,
   silently. The whole five-selector group is doubled to .px-table .sp-row-nodata
   and left BARE: the three tone arms must also stay above the shell's
   .sp-dashboard .sp-good (0,2,0), and .px-table .sp-row-nodata td .sp-good at
   (0,3,1) does that with room. Doubling all five keeps them from drifting apart.

   No other selector in this file has a competitor: no .sp-ledger-*, .sp-modal-*,
   .sp-batch-* or .sp-unlinked-* name is declared anywhere else in the app.

   No designer gate. .sp-modal { display: none } and
   .sp-unlinked-section { display: none } hide those blocks on the canvas as at
   runtime. Both are written as compounds with their
   reveal class (.sp-modal.sp-modal-on, .sp-unlinked-section.sp-unlinked-on), so
   neither reveal rests on which rule comes last in this file.

   No keyframes, no url(), no @font-face. */


:where(.sp-ledger) .sp-ledger-row { cursor: pointer; }
:where(.sp-ledger) .sp-ledger-row:hover td { background: var(--px-bg-elevated); }
:where(.sp-ledger) .sp-ledger-row:focus-visible td {
  outline: 2px solid var(--px-focus-ring);
  outline-offset: -2px;
}
/* Dimmed, never hidden: a month with no exception of the selected kind
   still belongs in the ledger, it just is not what you asked about.
   Muted ink, not opacity, so the figures stay readable. Bare like the
   no-data group below, to outrank .px-table td and the shell's tones. */
.px-table .sp-dim:not(.sp-row-nodata) td,
.px-table .sp-dim:not(.sp-row-nodata) td * { color: var(--px-text-muted); }
.px-table .sp-dim:not(.sp-row-nodata) td .sp-pill { background: var(--px-bg-elevated); }
.px-table .sp-dim:not(.sp-row-nodata):is(:hover, :focus-visible) td,
.px-table .sp-dim:not(.sp-row-nodata):is(:hover, :focus-visible) td * {
  color: var(--px-text-secondary);
}

/* A month whose payments have not arrived yet (the NHS files lag) has
   no performance to judge — the whole row goes quiet, including the
   dim filter and the totals ordinarily printed in full ink. */
.px-table .sp-row-nodata td,
.px-table .sp-row-nodata td b,
.px-table .sp-row-nodata td .sp-good,
.px-table .sp-row-nodata td .sp-bad,
.px-table .sp-row-nodata td .sp-warn {
  color: var(--px-text-muted);
}

/* Every ledger column stays visible. The shell turns the row into a
   card before the full-width table stops fitting. */

/* =============================================
   MONTH MODAL
   ============================================= */
:where(.sp-ledger) .sp-modal {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--px-backdrop);
  z-index: 900;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
:where(.sp-ledger) .sp-modal.sp-modal-on { display: flex; }

:where(.sp-ledger) .sp-modal-panel {
  background: var(--px-bg-card);
  border: 1px solid var(--px-border);
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
  width: 100%;
  max-width: 52rem;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
}

:where(.sp-ledger) .sp-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--px-border);
}
:where(.sp-ledger) .sp-modal-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--px-text-primary);
  margin: 0;
}
:where(.sp-ledger) .sp-modal-sub {
  font-size: 0.74rem;
  color: var(--px-text-muted);
  margin-top: 0.25rem;
  line-height: 1.5;
}
:where(.sp-ledger) .sp-modal-close {
  background: none;
  border: none;
  color: var(--px-text-muted);
  font-size: 1.2rem;
  line-height: 1;
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
  border-radius: 8px;
}
:where(.sp-ledger) .sp-modal-close:hover { color: var(--px-text-primary); }

:where(.sp-ledger) .sp-modal-body {
  padding: 0.5rem 1.1rem 1.1rem;
  overflow-y: auto;
}

:where(.sp-ledger) .sp-batch-chip {
  display: inline-block;
  border-radius: 999px;
  padding: 0.12rem 0.6rem;
  font-size: 0.7rem;
  font-weight: 700;
}
:where(.sp-ledger) .sp-batch-on-time { background: var(--px-spec-good-soft); color: var(--px-success-text); }
:where(.sp-ledger) .sp-batch-last-minute { background: var(--px-spec-warn-soft); color: var(--px-warning-text); }
:where(.sp-ledger) .sp-batch-late { background: var(--px-spec-bad-soft); color: var(--px-danger); }
:where(.sp-ledger) .sp-batch-none { background: var(--px-bg-elevated); color: var(--px-text-secondary); }

:where(.sp-ledger) .sp-unlinked-section {
  display: none;
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--px-border);
}
:where(.sp-ledger) .sp-unlinked-section.sp-unlinked-on { display: block; }
:where(.sp-ledger) .sp-unlinked-count {
  color: var(--px-text-secondary);
  font-size: 0.74rem;
  margin-bottom: 0.55rem;
}
:where(.sp-ledger) .sp-unlinked-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 0.8rem;
  align-items: center;
  padding: 0.55rem 0;
  border-top: 1px solid var(--px-border);
  font-size: 0.76rem;
}
:where(.sp-ledger) .sp-unlinked-quantity { color: var(--px-text-muted); }
:where(.sp-ledger) .sp-unlinked-amount { color: var(--px-success-ink); font-weight: 700; }

@media (max-width: 640px) {
  /* Full-screen sheet on a phone: anchored to the bottom, edge to edge,
     so the list is reachable with a thumb. */
  :where(.sp-ledger) .sp-modal { padding: 0; align-items: flex-end; }
  :where(.sp-ledger) .sp-modal-panel {
    max-width: 100%;
    max-height: 92vh;
    border-radius: 14px 14px 0 0;
  }
  :where(.sp-ledger) .sp-modal-body { padding: 0.4rem 0.7rem 1rem; }
  :where(.sp-ledger) .sp-unlinked-row { grid-template-columns: minmax(0, 1fr) auto; }
}