/* ============================================================================
   S6 — Reporting & day close.
   Served as _content/ClientSharedLibrary/css/reports.css.
   Depends on tokens.css; expects bootstrap-bridge.css to load before it.

   Covers /Report (and every view it hosts: BillReportView, SummaryView,
   TotalSummaryView, StockConsumption, OnlineSalesReport, MonthlyTaxView,
   DictionaryView, QuickBillSummary, CategoryWiseOnlineOrder, CancelledBills,
   RoundingAmountComp), /Summary (day close) and /webstore-consumption.

   SPECIFICITY — same strategy as S2/S3. Every rule is prefixed .mp-report,
   added to each page's root, which takes it to (0,2,0) and beats a component
   <style> block at equal weight without a blanket !important.

   WHAT THIS SEGMENT IS FOR
   Nothing here is operated at speed. The operator picks a period and a report
   type, presses Get Data, and then *reads numbers* — often to reconcile them
   against cash in a drawer. So the work is information design, not chrome:

     · figures are set in the tabular face and right-aligned, so a column of
       amounts can be compared and summed by eye;
     · a total row is unmistakably a total, at every level of nesting;
     · the header row survives scrolling, because a bill list is long and a
       column is worthless once its heading is off-screen;
     · a wide report scrolls sideways inside its own box instead of shrinking
       its own text — see the note on .report-table below.

   DENSITY: default (44px). This is desk reading, not counter work.

   PRINT IS NOT TOUCHED. Printing a day's report is a real workflow here, and
   several components build print HTML as strings with their own inline <style>
   (BillReportView ~line 1536, MonthlyTaxView, PrintOnlineOrderReport). Those
   strings and BillReportView's @media print block are left exactly as they
   were: paper is always white, so their literal colours are correct there and
   tokens would be wrong.
   ========================================================================= */

/* ============================================================================
   1. Page frame
   ========================================================================= */
.mp-report {
  font-family: var(--mp-font);
  font-size: var(--mp-text-ui);
  color: var(--mp-ink);
}

.mp-report h3,
.mp-report h4,
.mp-report h5 {
  color: var(--mp-ink);
  font-weight: var(--mp-weight-bold);
  line-height: var(--mp-leading-tight);
}
.mp-report h3 { font-size: var(--mp-text-xl); }
.mp-report h4 { font-size: var(--mp-text-lg); }
.mp-report h5 { font-size: var(--mp-text-md); }

/* A report section: the box a single view draws itself inside. */
.mp-report .report-panel,
.mp-report .summary-container,
.mp-report .quick-bill-summary {
  background: var(--mp-surface);
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius);
  box-shadow: var(--mp-shadow-sm);
  padding: var(--mp-pad-card);
  margin-bottom: var(--mp-gap);
}

/* ============================================================================
   2. The filter toolbar (Reviewtypecomp)

   This is the one control surface in the segment and every report depends on
   it. What it was: a flex column of full-width selects whose own style block
   set `.review-component, .review-component * { font-size: var(--base-font-size)
   !important }` — a universal selector with !important, which meant no
   descendant could ever set its own size, and the whole toolbar keyed off a
   single number that defaulted to 1.4rem. On a phone that is a stack of
   oversized controls filling the screen before any data appears.

   Now: a wrapping grid of labelled fields at control height, so the toolbar is
   one or two rows on a phone and a single row on a desktop.
   ========================================================================= */
/* --mp-report-font carries the business's own UI-size preference
   (_home.fontsize -> 12/16/20/24px) that Reviewtypecomp used to stamp inline on
   eight separate elements. It is set once on the toolbar root and everything
   inside inherits it, so the preference still works and the sizes stay in one
   place. Labels are set in em so they scale with the choice instead of
   pinning themselves back to 12px at the x-large setting. */
.mp-report .review-component {
  font-size: var(--mp-report-font, var(--mp-text-ui));
  background: var(--mp-surface);
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius);
  padding: var(--mp-space-3);
  margin-bottom: var(--mp-gap);
}

.mp-report .review-container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--mp-space-3);
  max-width: none;
  margin: 0;
}

.mp-report .date-input-group {
  display: flex;
  flex-direction: column;
  gap: var(--mp-space-1);
  flex: 1 1 140px;
  min-width: 130px;
}

.mp-report .date-input-group.date-action-group {
  flex: 0 0 auto;
  min-width: auto;
}

/* Label above each input / select control */
.mp-report .date-label {
  background: none;
  color: var(--mp-muted);
  padding: 0;
  border-radius: 0;
  font-size: .78em;
  font-weight: var(--mp-weight-medium);
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
}

.mp-report .custom-select,
.mp-report .custom-date {
  background-color: var(--mp-surface);
  color: var(--mp-ink);
  border: 1px solid var(--mp-line-strong);
  border-radius: var(--mp-radius-sm);
  min-height: var(--mp-control-h);
  height: var(--mp-control-h);
  padding: 0 var(--mp-space-3);
  font-family: inherit;
  font-size: inherit;
  font-weight: var(--mp-weight-normal);
  transition: border-color .15s ease, box-shadow .15s ease;
  width: 100%;
}

.mp-report .custom-date {
  font-family: var(--mp-font-num);
}

.mp-report .custom-select:hover,
.mp-report .custom-date:hover { border-color: var(--mp-line-strong); box-shadow: none; }
.mp-report .custom-select:focus,
.mp-report .custom-date:focus {
  border-color: var(--mp-accent);
  box-shadow: var(--mp-focus);
  outline: none;
}

/* Get Data is the toolbar's primary action and the only filled control in it. */
.mp-report .submit-button {
  background-color: var(--mp-accent);
  color: var(--mp-accent-ink);
  border: 1px solid var(--mp-accent);
  border-radius: var(--mp-radius-sm);
  min-height: var(--mp-control-h);
  height: var(--mp-control-h);
  padding: 0 var(--mp-space-5);
  min-width: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: var(--mp-weight-medium);
  transition: background-color .15s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.mp-report .submit-button:hover {
  background-color: var(--mp-accent-hover);
  border-color: var(--mp-accent-hover);
  transform: none;
  box-shadow: none;
}
.mp-report .submit-button:focus-visible { outline: 2px solid var(--mp-accent); outline-offset: 2px; }

/* The shop picker sits above the toolbar in Report.razor. */
.mp-report .locked-unit { color: var(--mp-ink); font-weight: var(--mp-weight-medium); }

/* ============================================================================
   3. Report tables

   .report-table carries `table-responsive` in the markup but its own block set
   `display: table` on it — and overflow-x cannot scroll a table box, so the
   horizontal scroll never worked. The fallback was a media query that dropped
   cells to 12px with word-wrap: break-word under 600px, which turns a bill
   list into broken stacks of characters. .report-table is really just a
   wrapper div around a real <table>, so making it a block restores the scroll
   and the text can stay legible.
   ========================================================================= */
.mp-report .report-table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius);
  background: var(--mp-surface);
  margin: 0 0 var(--mp-gap);
  padding: 0;
}

.mp-report .report-table > table {
  width: 100%;
  min-width: max-content;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--mp-ink-2);
}

.mp-report .report-row { display: table-row; }

.mp-report .report-cell {
  display: table-cell;
  padding: var(--mp-space-2) var(--mp-space-3);
  font-size: var(--mp-text-ui);
  line-height: var(--mp-leading-tight);
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--mp-line);
  border-right: none;
  vertical-align: middle;
}

/* Header row. It sticks to the top of the scroll box: a bill list runs to
   hundreds of rows and a column heading that scrolls away takes the meaning of
   its column with it. */
.mp-report .header-row .report-cell,
.mp-report .report-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--mp-surface-2);
  color: var(--mp-muted);
  font-size: var(--mp-text-xs);
  font-weight: var(--mp-weight-bold);
  letter-spacing: var(--mp-track-label);
  text-transform: none;
  border-bottom: 1px solid var(--mp-line-strong);
}

/* Sortable headings say so. */
.mp-report .header-row .report-cell[style*="cursor"] { color: var(--mp-ink-2); }
.mp-report .header-row .report-cell[style*="cursor"]:hover { background: var(--mp-surface-sunk); color: var(--mp-ink); }

.mp-report .report-table tbody tr:hover > * { background: var(--mp-surface-2); color: var(--mp-ink); }
.mp-report .report-table tbody tr:last-child > * { border-bottom: none; }

/* A grouped report repeats one label down a rowspan cell; it reads as the
   group's spine, so it gets the sunk surface and a real separator. */
.mp-report .report-cell[rowspan] {
  background: var(--mp-surface-sunk);
  color: var(--mp-ink);
  font-weight: var(--mp-weight-medium);
  border-bottom: 2px solid var(--mp-line-strong);
  vertical-align: top;
}
.mp-report .report-row:last-child .report-cell[rowspan] { border-bottom: none; }

/* ---- Figures -------------------------------------------------------------
   Every cell holding a number is set in the tabular face and right-aligned, so
   a column of amounts lines up on its decimal point and can be scanned. The
   attribute selectors catch the cells the markup already marks as numeric via
   Bootstrap's alignment utilities; .text-end is !important so it wins the
   alignment either way and this only supplies the face.  */
.mp-report .report-cell.text-end,
.mp-report .report-cell.text-center,
.mp-report .amount-cell,
.mp-report td.text-end,
.mp-report th.text-end,
.mp-report .figure {
  font-family: var(--mp-font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.mp-report .amount-cell { text-align: right; }

/* ---- Totals --------------------------------------------------------------
   .totalrow was `background-color: wheat` — a named CSS colour that is
   invisible against a light page and glaring against a dark one. A total is
   structural, so it reads as a rule above a heavier row, which works in both
   themes and survives being photocopied.  */
.mp-report .total-row .report-cell,
.mp-report .total-row td,
.mp-report .totalrow,
.mp-report .totalrow td,
.mp-report .summary-table .total-row td {
  background: var(--mp-surface-2);
  color: var(--mp-ink);
  font-weight: var(--mp-weight-bold);
  border-top: 2px solid var(--mp-line-strong);
}

/* OnlineSalesReport builds a plain <table> inside a .report-table wrapper, so
   it gets the same scroll box, but its cells carry no .report-cell class and
   need the padding and rules spelled out. Deliberately the same horizontal-
   rules treatment, not the full gridlines it used to draw: two reports on the
   same page should not disagree about what a table looks like. */
.mp-report .report-table th:not(.report-cell),
.mp-report .report-table td:not(.report-cell) {
  padding: var(--mp-space-2) var(--mp-space-3);
  border: none;
  border-bottom: 1px solid var(--mp-line);
  color: var(--mp-ink-2);
}
.mp-report .report-table tfoot td {
  background: var(--mp-surface-2);
  color: var(--mp-ink);
  font-weight: var(--mp-weight-bold);
  border-top: 2px solid var(--mp-line-strong);
}

/* ---- Plain <table> reports ---------------------------------------------- */
.mp-report .summary-table,
.mp-report .inner-table {
  width: 100%;
  margin: 0 0 var(--mp-gap);
  border-collapse: collapse;
  color: var(--mp-ink-2);
}
.mp-report .summary-table th,
.mp-report .summary-table td {
  padding: var(--mp-space-2) var(--mp-space-3);
  border-bottom: 1px solid var(--mp-line);
  text-align: left;
}
.mp-report .summary-table th {
  background: var(--mp-surface-2);
  color: var(--mp-muted);
  font-size: var(--mp-text-xs);
  font-weight: var(--mp-weight-bold);
  letter-spacing: var(--mp-track-label);
}
.mp-report .text-right { text-align: right; }

/* SummaryView paints its inner table headers with the business's own colour,
   the way the till paints category tiles. That is intentional branding, so it
   stays — only the foreground is pinned, because a user-chosen dark brand
   colour must not take its text from --mp-ink. */
.mp-report .inner-header,
.mp-report .inner-header th,
.mp-report .inner-header td { color: var(--mp-on-brand); }

/* ============================================================================
   4. The figure strip above a report (BillReportView's sticky summary)

   It was a run of inline <span>s separated by <br/>, on .bg-light with a pill
   button floated beside them: the day's headline numbers rendered as prose.
   They are the first thing anyone opening a report looks at, so they are set
   as labelled figures on one line that wraps.
   ========================================================================= */
.mp-report .sticky-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--mp-gap);
  left: 0;
  right: 0;
  width: 100%;
  background: var(--mp-surface);
  border: 1px solid var(--mp-line);
  border-top: 3px solid var(--mp-accent);
  border-radius: var(--mp-radius);
  box-shadow: var(--mp-shadow-sm);
  margin-bottom: var(--mp-gap);
}

.mp-report .sticky-summary span { color: var(--mp-ink-2); }
.mp-report .sticky-summary strong { color: var(--mp-muted); font-weight: var(--mp-weight-medium); }
.mp-report .sticky-summary .text-success,
.mp-report .sticky-summary .text-danger,
.mp-report .sticky-summary .text-warning {
  font-family: var(--mp-font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--mp-text-lg);
  font-weight: var(--mp-weight-bold);
}

/* The action buttons in the strip were 18px pills with a scale(1.05) hover, set
   by an *unscoped* `.btn` rule this component leaked to the whole page.

   Geometry only — deliberately no background here. Two of the three buttons
   carry .btn-primary / .btn-success, and a background on `.sticky-summary .btn`
   sits at (0,3,0), so it would out-rank both variants and paint Download Excel
   the same colour as Share/Download PDF, leaving the two actions
   indistinguishable. The third is a bare .btn painted with the business's own
   colour inline, which no stylesheet can beat anyway — so it gets the one
   thing it does need, a foreground that works on a dark brand colour. */
.mp-report .sticky-summary .btn {
  padding: 0 var(--mp-space-4);
  margin-left: var(--mp-space-2);
  font-size: var(--mp-text-ui);
  border-radius: var(--mp-radius-sm);
  box-shadow: none;
}
.mp-report .sticky-summary .btn:not([class*="btn-"]) { color: var(--mp-on-brand); }
.mp-report .sticky-summary .btn:hover { transform: none; box-shadow: none; }

.mp-report .report-header { margin-bottom: var(--mp-gap); }
.mp-report .report-header .shop-name span { color: var(--mp-ink); }
.mp-report .report-header .report-type span { color: var(--mp-ink-2); }
.mp-report .report-header .danger { color: var(--mp-muted); font-weight: var(--mp-weight-medium) !important; }

/* ============================================================================
   5. Small controls the reports define themselves
   ========================================================================= */
.mp-report .tax-toggle-container {
  background: var(--mp-surface);
  border: 1px solid var(--mp-line-strong);
  border-radius: var(--mp-radius-sm);
  padding: 0 var(--mp-space-3);
  min-height: var(--mp-control-h);
  margin: 0 var(--mp-space-2) 0 0;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
}
.mp-report .tax-toggle-label { color: var(--mp-ink-2); font-size: var(--mp-text-ui); }
.mp-report .tax-toggle-label i { color: var(--mp-muted); }
.mp-report .tax-toggle-checkbox { accent-color: var(--mp-accent); width: 16px; height: 16px; }

/* .form-select1 is a hand-copied clone of Bootstrap's .form-select, chevron
   data-URI and all, living in StockConsumption. Rather than delete it out of a
   1500-line component, it is pointed at the same tokens as the real one. */
.mp-report .form-select1 {
  background-color: var(--mp-surface);
  color: var(--mp-ink);
  border-color: var(--mp-line-strong);
  border-radius: var(--mp-radius-sm);
  min-height: var(--mp-control-h);
  font-family: inherit;
  font-size: var(--mp-text-ui);
}
.mp-report .form-select1:focus {
  border-color: var(--mp-accent);
  box-shadow: var(--mp-focus);
  outline: none;
}

/* QuickBillSummary's payment-type toggles were a second hand-copied clone,
   this one of .btn-outline-primary in Bootstrap's own blue. */
.mp-report .frontQuickbillsummary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--mp-control-h);
  padding: 0 var(--mp-space-4);
  background: transparent;
  color: var(--mp-accent);
  border: 1px solid var(--mp-accent);
  border-radius: var(--mp-radius-sm);
  font-family: inherit;
  font-size: var(--mp-text-ui);
  font-weight: var(--mp-weight-medium);
  transition: background-color .15s ease, color .15s ease;
}
.mp-report .frontQuickbillsummary:hover,
.mp-report .btn-check:checked + .frontQuickbillsummary {
  background: var(--mp-accent);
  border-color: var(--mp-accent);
  color: var(--mp-accent-ink);
}
.mp-report .btn-check:focus-visible + .frontQuickbillsummary {
  outline: 2px solid var(--mp-accent);
  outline-offset: 2px;
  box-shadow: none;
}
.mp-report .frontQuickbillsummary:disabled { opacity: .55; pointer-events: none; }

.mp-report .total-amount-section {
  background: var(--mp-surface-2);
  border-radius: var(--mp-radius-sm);
  padding: var(--mp-space-3);
  margin-bottom: var(--mp-gap);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--mp-space-3);
}
.mp-report .total-value {
  font-family: var(--mp-font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--mp-text-xl);
  font-weight: var(--mp-weight-bold);
  color: var(--mp-ink);
}

/* StockConsumption's stat tiles. */
.mp-report .detail-item {
  background: var(--mp-surface-2);
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius-sm);
  padding: var(--mp-space-4);
  height: 100%;
}
.mp-report .detail-item h6 {
  color: var(--mp-muted);
  font-size: var(--mp-text-xs);
  font-weight: var(--mp-weight-medium);
  letter-spacing: var(--mp-track-label);
  margin-bottom: var(--mp-space-2);
}
.mp-report .detail-item p {
  font-family: var(--mp-font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--mp-text-xl);
  font-weight: var(--mp-weight-bold);
  color: var(--mp-ink);
  margin-bottom: 0;
}

.mp-report .class-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--mp-gap);
}
.mp-report .dictionary-view-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--mp-gap);
  margin-top: var(--mp-gap);
}
.mp-report .dictionary-view-container > div { margin-bottom: 0; }

/* ============================================================================
   6. Charts

   Radzen renders its charts into .rz-* elements. StockConsumption tried to
   restyle those from a component <style> block using ::deep — but ::deep is a
   Blazor CSS-isolation construct that only the .razor.css build rewrites. In a
   plain <style> block it reaches the browser verbatim, is not a valid
   selector, and the whole rule is dropped. Every ::deep rule in that block has
   therefore never applied, which is why five stacked, mutually contradictory
   attempts at the tick-label problem accumulated there.

   Written here without ::deep, they apply. Kept to one definition each: labels
   wrap rather than rotate, because rotated labels are unreadable in Tamil and
   Devanagari, and the plot area reserves the space that wrapping needs.
   ========================================================================= */
.mp-report .chart-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 720px;
  margin: 0 auto var(--mp-gap);
  padding: var(--mp-space-4);
  background: var(--mp-surface);
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius);
  box-shadow: var(--mp-shadow-sm);
}

/* The time chart carries more x-axis points than the others, so it is allowed
   the full column width. (This was the one live rule among the chart variants —
   every other .time-chart / .category-chart rule used ::deep and was inert.) */
.mp-report .chart-wrapper.time-chart { max-width: 100%; }

.mp-report .chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: var(--mp-space-3);
  padding: 0 0 var(--mp-space-3);
  background: none;
  border-bottom: 1px solid var(--mp-line);
  border-radius: 0;
  margin-bottom: var(--mp-space-4);
}
.mp-report .chart-header label {
  color: var(--mp-ink);
  font-size: var(--mp-text-md);
  font-weight: var(--mp-weight-bold);
}

.mp-report .chart-select {
  background: var(--mp-surface);
  color: var(--mp-ink);
  border: 1px solid var(--mp-line-strong);
  border-radius: var(--mp-radius-sm);
  min-height: var(--mp-control-h);
  padding: 0 var(--mp-space-3);
  font-family: inherit;
  font-size: var(--mp-text-ui);
}
.mp-report .chart-select { min-width: 8rem; }
.mp-report .chart-select:hover { border-color: var(--mp-line-strong); }
.mp-report .chart-select:focus { border-color: var(--mp-accent); box-shadow: var(--mp-focus); outline: none; }

.mp-report .chart-container,
.mp-report .charts-container { width: 100%; margin: 0 0 var(--mp-gap); padding: 0; }

/* The "show top N" control on the category and item charts. It was a 45px
   translucent-blue circle opening a rgba(255,255,255,.85) panel, all of it
   written inline on the elements — so in dark mode it was a white card, and
   inline styles cannot be themed from a stylesheet at all. Now a class. */
.mp-report .chart-gear {
  width: var(--mp-control-h);
  height: var(--mp-control-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--mp-surface-2);
  color: var(--mp-ink-2);
  border: 1px solid var(--mp-line-strong);
  border-radius: var(--mp-radius-pill);
  cursor: pointer;
  box-shadow: var(--mp-shadow-sm);
  transition: background-color .15s ease, color .15s ease;
}
.mp-report .chart-gear:hover { background: var(--mp-surface-sunk); color: var(--mp-ink); }
.mp-report .chart-gear:focus-visible { outline: 2px solid var(--mp-accent); outline-offset: 2px; }
.mp-report .chart-gear i { font-size: var(--mp-text-md); }

.mp-report .chart-gear-menu {
  position: absolute;
  top: calc(var(--mp-control-h) + var(--mp-space-2));
  right: 0;
  z-index: 3;
  width: 160px;
  padding: var(--mp-space-2);
  background: var(--mp-surface);
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius);
  box-shadow: var(--mp-shadow-lg);
}
.mp-report .chart-gear-title {
  margin: 0 0 var(--mp-space-2);
  color: var(--mp-muted);
  font-size: var(--mp-text-xs);
  font-weight: var(--mp-weight-bold);
  letter-spacing: var(--mp-track-label);
  text-align: center;
}
.mp-report .chart-gear-option {
  display: block;
  width: 100%;
  padding: var(--mp-space-2);
  background: none;
  border: none;
  border-radius: var(--mp-radius-sm);
  color: var(--mp-ink-2);
  font-family: inherit;
  font-size: var(--mp-text-ui);
  text-align: center;
  cursor: pointer;
}
.mp-report .chart-gear-option:hover { background: var(--mp-accent-soft); color: var(--mp-accent); }
.mp-report .chart-gear-option:focus-visible { outline: 2px solid var(--mp-accent); outline-offset: -2px; }

/* Radzen internals. Not scoped by .mp-report alone on the axis text because
   Radzen writes its own inline font attributes on the <text> nodes; the
   !important here is answering those, not another stylesheet. */
.mp-report .rz-tick-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 110px;
  font-family: var(--mp-font) !important;
  font-size: 11px !important;
  fill: var(--mp-muted) !important;
  transform: none !important;
  text-anchor: middle !important;
}
.mp-report .rz-plot-area { padding-bottom: 96px; }
.mp-report .rz-legend {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-height: 320px;
  overflow: auto;
  margin: var(--mp-space-3) 0 0 var(--mp-space-3);
  padding: 0;
}
.mp-report .rz-legend-item { margin: var(--mp-space-1) 0; font-size: var(--mp-text-xs); color: var(--mp-ink-2); }
.mp-report .rz-grid-line { stroke: var(--mp-line); }

@media (max-width: 768px) {
  .mp-report .rz-tick-text { max-width: 72px; font-size: 10px !important; }
  .mp-report .rz-legend { max-height: 180px; }
}

/* ============================================================================
   7. Loading, empty and error states
   ========================================================================= */
/* .loading-spinner means two different things in this segment — a 40px
   rotating ring in BillReportView, a flex column wrapper in TotalSummaryView —
   so it is only ever recoloured here, never given a display or a size. Each
   component keeps its own geometry and its own @keyframes. */
.mp-report .loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--mp-space-3);
  padding: var(--mp-space-6) var(--mp-space-4);
  background: none;
  border-radius: var(--mp-radius);
}
.mp-report .loading-text { color: var(--mp-muted); font-size: var(--mp-text-ui); margin: 0; }
.mp-report .pulse-circle { background-color: var(--mp-accent); }
.mp-report .loading-spinner,
.mp-report .spinner { border-color: var(--mp-line); border-top-color: var(--mp-accent); }

.mp-report .no-data,
.mp-report .no-data-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--mp-space-2);
  padding: var(--mp-space-6) var(--mp-space-4);
  background: var(--mp-surface);
  border: 1px dashed var(--mp-line-strong);
  border-radius: var(--mp-radius);
  color: var(--mp-muted);
  text-align: center;
}
.mp-report .no-data-container svg { color: var(--mp-line-strong); margin-bottom: var(--mp-space-2); }
.mp-report .no-data-title { color: var(--mp-ink-2); font-weight: var(--mp-weight-medium); margin-bottom: 0; }
.mp-report .no-data-message { font-size: var(--mp-text-sm); max-width: 42ch; margin: 0 auto; }

.mp-report .error-message {
  background: var(--mp-danger-soft);
  color: var(--mp-danger);
  border: 1px solid var(--mp-danger);
  border-radius: var(--mp-radius-sm);
  padding: var(--mp-space-3);
  margin: var(--mp-space-3) 0;
}

/* ============================================================================
   8. Day close — /Summary

   The one page in this segment that is written to, not just read: the operator
   reconciles the drawer and closes the day. Its own block redefined
   .spinner-border and .text-success *globally*, and marked the drawer
   variance with `outline: 2px solid green|red` — a browser-default green on a
   field, with no label, no tint and nothing for a red-green colour-blind
   operator to go on. Those become a proper validation state.
   ========================================================================= */
.mp-report .summary-nav { margin-bottom: var(--mp-gap); }
.mp-report .settings-nav-scroll {
  gap: var(--mp-space-2);
  padding-bottom: var(--mp-space-1);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.mp-report .settings-nav-scroll .btn {
  border: 1px solid var(--mp-line-strong);
  background: var(--mp-surface);
  color: var(--mp-ink-2);
  box-shadow: none !important;      /* .shadow-sm is a utility */
  white-space: nowrap;
}
.mp-report .settings-nav-scroll .btn:hover { background: var(--mp-surface-2); color: var(--mp-ink); }
/* .active-nav is painted with the business's own colour inline, so its
   foreground comes from --mp-on-brand, never from --mp-ink. */
.mp-report .settings-nav-scroll .active-nav { border-color: transparent; color: var(--mp-on-brand); }

.mp-report .label-green,
.mp-report .label-red {
  outline: none;
  border-width: 1px;
  border-style: solid;
  border-radius: var(--mp-radius-sm);
}
/* Tallied and short/over do not differ by hue alone — the tallied field is
   quiet and the mismatched one carries weight and a tint, so it still reads
   as the exception in greyscale or with a red-green deficiency. */
.mp-report .label-green {
  border-color: var(--mp-good);
  background: var(--mp-good-soft);
  color: var(--mp-ink);
}
.mp-report .label-red {
  border-color: var(--mp-danger);
  background: var(--mp-danger-soft);
  color: var(--mp-ink);
  font-weight: var(--mp-weight-bold);
  box-shadow: inset 3px 0 0 var(--mp-danger);
}

.mp-report .input-group-text i { font-size: var(--mp-text-md); color: var(--mp-muted); }

/* ============================================================================
   9. Responsive

   The old rules shrank type to reach a fit. These reflow instead: the toolbar
   stacks, panels lose their outer padding at the page edge, and wide tables
   scroll inside the box that section 3 gave them.
   ========================================================================= */
@media (max-width: 767.98px) {
  .mp-report .review-container { gap: var(--mp-space-2); }
  .mp-report .review-type-selector,
  .mp-report .date-controls,
  .mp-report .report-controls,
  .mp-report .date-input-group,
  .mp-report .ingredient-selector { flex: 1 1 100%; }
  .mp-report .submit-button { flex: 1 1 100%; }

  .mp-report .report-panel,
  .mp-report .summary-container,
  .mp-report .quick-bill-summary { padding: var(--mp-space-3); }

  .mp-report .report-cell { padding: var(--mp-space-2); }

  .mp-report .sticky-summary { flex-direction: column; align-items: flex-start; }
  .mp-report .sticky-summary .btn { margin-left: 0; }

  .mp-report .chart-wrapper { padding: var(--mp-space-3); }
}

/* ============================================================================
   10. Print reset

   BillReportView keeps its own @media print block (it needs `body *`, which
   cannot be scoped to a page class). But every rule in this file is at
   (0,2,0), and a media query adds no specificity — so the screen treatment
   above would out-rank that block's (0,1,0) rules on paper and print a table
   inside a fixed-height scroll box with a sticky header floating over it.
   These undo the screen-only parts at matching specificity.
   ========================================================================= */
@media print {
  .mp-report .report-table {
    display: block;
    overflow: visible;
    border: 1px solid #000;
    border-radius: 0;
    background: #FFFFFF;
    box-shadow: none;
  }
  .mp-report .report-table > table { min-width: 0; width: 100%; border-collapse: collapse; }

  .mp-report .report-cell,
  .mp-report .header-row .report-cell,
  .mp-report .report-table thead th {
    position: static;
    white-space: normal;
    color: #000;
    background: transparent;
    border-color: #000;
  }

  /* Controls and chrome are not part of a printed report. */
  .mp-report .review-component,
  .mp-report .sticky-summary .btn,
  .mp-report .tax-toggle-container { display: none; }

  .mp-report .sticky-summary,
  .mp-report .report-panel,
  .mp-report .summary-container,
  .mp-report .chart-wrapper {
    background: #FFFFFF;
    color: #000;
    border-color: #000;
    box-shadow: none;
  }
}

/* ============================================================================
   11. Day close — online payment reconciliation

   Seven columns of figures (billed, brought forward, expected, actual,
   accounted, outstanding) inside a card inside the day-close column. In a
   .table-responsive that meant sideways scrolling to reach the one cell the
   operator has to fill — the Actual Total Received input — while the label
   telling them what the number means scrolled out of view in the other
   direction. This is a form, not a report, so below the point where seven
   columns fit it becomes one card per payment type with the figures named.
   ========================================================================= */
.mp-report .payment-recon { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mp-report .payment-recon .recon-actual { min-width: 8rem; }

@media (max-width: 991.98px) {
  /* No scroll box at all here — the rows are stacked, so nothing overflows. */
  .mp-report .payment-recon { overflow-x: visible; }
  .mp-report .payment-recon table,
  .mp-report .payment-recon tbody,
  .mp-report .payment-recon tr,
  .mp-report .payment-recon td { display: block; width: auto; }
  .mp-report .payment-recon thead { display: none; }

  .mp-report .payment-recon tr {
    margin-bottom: var(--mp-space-3);
    padding: var(--mp-space-3);
    border: 1px solid var(--mp-line);
    border-radius: var(--mp-radius);
    background: var(--mp-surface);
  }
  .mp-report .payment-recon tr:last-child { margin-bottom: 0; }

  .mp-report .payment-recon td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--mp-space-4);
    padding: var(--mp-space-2) 0;
    border: none;
    text-align: right;
  }
  .mp-report .payment-recon td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    text-align: left;
    color: var(--mp-ink-2);
    font-size: var(--mp-text-sm);
    font-weight: var(--mp-weight-normal);
  }

  /* The payment type is the card's heading, not another labelled figure. */
  .mp-report .payment-recon td.recon-name {
    display: block;
    margin-bottom: var(--mp-space-2);
    padding-bottom: var(--mp-space-2);
    border-bottom: 1px solid var(--mp-line);
    text-align: left;
    font-weight: var(--mp-weight-bold);
    font-size: var(--mp-text-md);
  }
  .mp-report .payment-recon td.recon-name::before { content: none; }

  /* The one cell the operator actually fills. */
  .mp-report .payment-recon td.recon-actual { min-width: 0; }
  .mp-report .payment-recon td.recon-actual .form-control { max-width: 10rem; }
}

/* ============================================================================
   12. Day close — arrears

   Dates with sales that nothing has accounted for yet. The panel is a to-do
   list, not a table: one line per date, the date on the left and the action on
   the right, so it reads the same at any width.
   ========================================================================= */
.mp-report .arrears-card { border-left: 3px solid var(--mp-warn); }

.mp-report .arrears-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mp-space-2);
}
.mp-report .arrears-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mp-space-4);
  padding: var(--mp-space-2) var(--mp-space-3);
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius-sm);
  background: var(--mp-surface);
}
.mp-report .arrears-date {
  font-family: var(--mp-font-num);
  font-variant-numeric: tabular-nums;
  font-weight: var(--mp-weight-medium);
  color: var(--mp-ink);
}

/* Two actions per row now — account it, or stop asking. They stay side by side
   on a phone rather than stacking, because each is a short verb and a wrapped
   pair reads as belonging to two different dates. */
.mp-report .arrears-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mp-space-2);
  flex: 0 0 auto;
}

@media (max-width: 479.98px) {
  .mp-report .arrears-list li {
    flex-direction: column;
    align-items: stretch;
    gap: var(--mp-space-2);
  }
  .mp-report .arrears-actions .btn { flex: 1 1 0; }
}