/*
 * Accounting — the Main Courante audit surfaces, in the Ivory theme.
 *
 * accounting-shell.css carries the ground, the rail and the workspace; this
 * sheet restyles what the audit renders inside it. The two split the way the
 * CRM's shell and directory sheets do, and for the same reason: the ground is
 * one decision, the component vocabulary is many.
 *
 * Almost every surface here is a SHARED Portal component — `.panel`,
 * `.metric`, `.table-wrap`, `table`, `.status-badge`, `.meta-grid` — declared
 * once in web/public/styles.css and used by Administration as well. None of
 * those declarations is edited: the shell sheet re-points the tokens they read,
 * and this sheet restates only what the Portal pins to a raw value or says in a
 * voice the theme does not speak. Every rule is therefore scoped under
 * `.accounting-view`, which is the root of this module and of nothing else.
 *
 * Colours come from the `--accounting-ivory-*` and `--accounting-sem-*` sets in
 * accounting-shell.css, which are the CRM's ground and semantic pairs verbatim
 * (crm-guest-360-ivory.css). Nothing is re-declared here and there are no raw
 * hex values below.
 */

/* ------------------------------------------------------------ status line */

/* The audit's own status line, in the caption voice rather than the bold slab
   the Portal ships. A failure keeps the portal's error family — it is the one
   thing on the page that should not look like part of the theme. */
.accounting-view .status-panel {
  margin: 0;
  border-color: var(--accounting-ivory-hair);
  border-radius: 10px;
  background: var(--accounting-ivory-ground);
  color: var(--accounting-ivory-ink-soft);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.02rem;
  font-style: italic;
  font-weight: 400;
}

.accounting-view .status-panel.error {
  border-color: color-mix(in srgb, var(--error) 35%, var(--accounting-ivory-hair));
  background: var(--error-soft);
  color: var(--error);
  font-family: inherit;
  font-size: 0.82rem;
  font-style: normal;
  font-weight: 650;
}

/* ------------------------------------------------------------- stat tiles */

/* The eight summary figures become the analytics stat tile: a card floating on
   the ivory ground with a gold hairline along its top edge as its only
   ornament. min() caps the track floor at the container so a phone next to the
   rail never forces the workspace into horizontal overflow. */
.accounting-view .metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 12px;
  margin: 0;
}

.accounting-view .metric {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 6px;
  border: 1px solid var(--accounting-ivory-hair);
  border-top: 2px solid var(--brand-gold-light);
  border-radius: 10px;
  padding: 14px 16px;
  background: var(--accounting-ivory-card);
  box-shadow: none;
}

.accounting-view .metric span {
  color: var(--accounting-ivory-ink-soft);
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* The CRM's headline figure is 2.05rem because it is one number. Half of these
   tiles carry a pair — "POS Net / Gross", "Soft1 myDATA / AADE Comp." — so the
   figure is set at the CRM card-total size instead, which is the largest that
   keeps a pair on one line at the narrowest track above. Proportional figures:
   tabular-nums makes a headline number look gappy. */
.accounting-view .metric strong {
  margin-top: 0;
  color: var(--accounting-ivory-ink);
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* ------------------------------------------------------------------ cards */

/* Every panel is a card on the ivory ground: hairline, 10px corner, no shadow.
   `overflow: hidden` stays with the Portal rule — the tables inside scroll
   against the corner and would otherwise square it off. */
.accounting-view .panel {
  border-color: var(--accounting-ivory-hair);
  border-radius: 10px;
  background: var(--accounting-ivory-card);
  box-shadow: none;
}

.accounting-view .panel-heading {
  border-bottom-color: var(--accounting-ivory-hair);
  background: var(--accounting-ivory-card);
}

.accounting-view .panel-heading h2 {
  color: var(--accounting-ivory-ink);
  font-family: Marcellus, Georgia, "Times New Roman", serif;
  font-size: 1.02rem;
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* The layout columns keep their proportions; only the gutters come to the
   theme's 12px, so a card sits the same distance from its neighbour here as a
   tile does above. */
.accounting-view .layout-grid,
.accounting-view .side-stack,
.accounting-view .detail-grid,
.accounting-view .period-audit-view {
  gap: 12px;
}

/* The day view stacks the comparison, the match panel and the drill-down. It
   is one item of the workspace grid, so it carries the same gutter rather than
   the per-section top margins the shared sheet gives them. minmax(0, 1fr) for
   the same reason the page column takes it. */
.accounting-view .accounting-audit-day {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-content: start;
}

.accounting-view .detail-grid,
.accounting-view .document-match-panel {
  margin-top: 0;
}

/* ----------------------------------------------------------------- tables */

/* The header row takes the ivory ground and the tracked caption voice every
   table in the CRM speaks in — the Portal pins it to a cool near-white, which
   was invisible on white and reads as a cold column on ivory. */
.accounting-view th {
  background: var(--accounting-ivory-ground);
  color: var(--accounting-ivory-ink-soft);
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.64rem;
  font-weight: 400;
  letter-spacing: 0.1em;
}

.accounting-view th,
.accounting-view td {
  border-bottom-color: var(--accounting-ivory-hair-soft);
}

.accounting-view td span {
  color: var(--accounting-ivory-ink-faint);
}

/* The Phase-0 warm hover, re-mixed against the card the rows sit on. A
   selected row is the same warmth held rather than lit, so the two never read
   as the same state. */
.accounting-view tr.clickable:hover {
  background: color-mix(in srgb, var(--brand-gold) 7%, var(--accounting-ivory-card));
}

.accounting-view tr.selected {
  background: color-mix(in srgb, var(--brand-gold) 14%, var(--accounting-ivory-card));
}

.accounting-view .sub-table {
  border-top-color: var(--accounting-ivory-hair);
}

/* An empty table says so in the italic the theme annotates with, the way the
   CRM's empty directories do. */
.accounting-view .empty-row td {
  color: var(--accounting-ivory-ink-soft);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.02rem;
  font-style: italic;
}

.accounting-view .hint-text {
  color: var(--accounting-ivory-ink-soft);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1rem;
  font-style: italic;
  font-weight: 400;
}

/* ----------------------------------------------------- badges and buttons */

/* The count keeps its gold identity — it is a quantity, not a judgement — with
   the surface it is mixed against moved from white to the card. */
.accounting-view .count-pill {
  background: color-mix(in srgb, var(--brand-gold) 12%, var(--accounting-ivory-card));
  color: var(--ok);
}

/* The four audit verdicts take the shared semantic pairs. Colour never carries
   the meaning on its own: the word inside the badge does, and each ink clears
   4.5:1 on its own tint, on the card and on the pane. */
.accounting-view .status-badge.ok {
  background: var(--accounting-sem-good-soft);
  color: var(--accounting-sem-good);
}

.accounting-view .status-badge.warn {
  background: var(--accounting-sem-warn-soft);
  color: var(--accounting-sem-warn);
}

.accounting-view .status-badge.error {
  background: var(--accounting-sem-bad-soft);
  color: var(--accounting-sem-bad);
}

.accounting-view .status-badge.muted {
  background: var(--accounting-sem-neutral-soft);
  color: var(--accounting-sem-neutral);
}

/* The difference amounts are the table's own version of the same vocabulary:
   an amount is annotated, not re-coloured, so the inks are the semantic ones
   and the weight is what makes them findable in a column of figures. */
.accounting-view .amount-warn {
  color: var(--accounting-sem-warn);
}

.accounting-view .amount-error {
  color: var(--accounting-sem-bad);
}

.accounting-view .amount-info {
  color: var(--accounting-sem-info);
}

/* render() marks four of the summary figures — the Protel difference, the
   Soft1 difference, the after-midnight total and the review count — with the
   same amount classes the table cells use. On a table cell they win, because
   nothing else colours a `td`; on a tile they never did, because the Portal's
   `.metric strong` is one class more specific than a bare `.amount-*` and
   silently took the figure back to plain ink. Restated at the tile's own
   specificity so a flagged total finally reads as flagged. */
.accounting-view .metric strong.amount-warn {
  color: var(--accounting-sem-warn);
}

.accounting-view .metric strong.amount-error {
  color: var(--accounting-sem-bad);
}

.accounting-view .metric strong.amount-info {
  color: var(--accounting-sem-info);
}

.accounting-view .export-button,
.accounting-view .period-open-day-button {
  border: 1px solid var(--accounting-ivory-hair);
  border-radius: 7px;
  background: var(--accounting-ivory-ground);
  color: var(--accounting-ivory-ink-soft);
}

.accounting-view .export-button:hover:not(:disabled),
.accounting-view .period-open-day-button:hover:not(:disabled),
.accounting-view .export-button:focus-visible:not(:disabled),
.accounting-view .period-open-day-button:focus-visible:not(:disabled) {
  border-color: var(--brand-gold);
  background: var(--accent-soft);
  color: var(--accounting-ivory-ink);
}

/* The document-match filter strip: the analytics chip row, on the ground the
   rest of the card's chrome sits on. */
.accounting-view .action-row {
  border-bottom-color: var(--accounting-ivory-hair);
  background: var(--accounting-ivory-ground);
}

.accounting-view .chip-button {
  min-height: 34px;
  border: 1px solid var(--accounting-ivory-hair);
  border-radius: 999px;
  padding: 0 13px;
  background: var(--accounting-ivory-card);
  color: var(--accounting-ivory-ink);
  font-size: 0.79rem;
  font-weight: 650;
}

.accounting-view .chip-button:hover,
.accounting-view .chip-button:focus-visible {
  border-color: color-mix(in srgb, var(--brand-gold) 45%, var(--accounting-ivory-hair));
  background: var(--accounting-ivory-card);
  color: var(--accounting-ivory-ink);
}

/* The selected chip is marked as well as tinted, exactly as the analytics
   chips are: the tick is the reading, the tint is the second one. */
.accounting-view .chip-button.active {
  border-color: var(--brand-gold);
  background: var(--accent-soft);
  color: var(--accounting-ivory-ink);
  font-weight: 750;
}

.accounting-view .chip-button.active::before {
  content: "✓";
  margin-right: 6px;
  color: var(--brand-gold);
  font-size: 0.8rem;
  font-weight: 850;
}

/* --------------------------------------------- ruled figure lists in cards */

/* The payment totals, the coverage summary and the selected outlet's meta row
   are all the same shape: a caption over a figure, ruled off from the next.
   They take the caption voice the stat tiles above them speak in, so the card
   reads as one surface rather than three. */
.accounting-view .method-row,
.accounting-view .meta-item,
.accounting-view .match-summary-item {
  border-color: var(--accounting-ivory-hair-soft);
}

.accounting-view .meta-grid,
.accounting-view .match-summary {
  border-bottom-color: var(--accounting-ivory-hair);
}

.accounting-view .method-row span,
.accounting-view .meta-item span,
.accounting-view .match-summary-item span,
.accounting-view .match-detail-heading span,
.accounting-view .match-source-detail > span {
  color: var(--accounting-ivory-ink-soft);
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.accounting-view .method-row strong,
.accounting-view .meta-item strong,
.accounting-view .match-summary-item strong {
  color: var(--accounting-ivory-ink);
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.accounting-view .meta-item strong,
.accounting-view .match-summary-item strong {
  font-size: 1.12rem;
}

.accounting-view .method-row strong {
  font-size: 1rem;
}

/* The two toned summary figures keep the semantic pair rather than the gold
   `--ok` the Portal gives them: on this row the tone is a verdict. */
.accounting-view .match-summary-item.ok strong {
  color: var(--accounting-sem-good);
}

.accounting-view .match-summary-item.error strong {
  color: var(--accounting-sem-bad);
}

/* --------------------------------------------------- the match drill-down */

.accounting-view .match-detail {
  border-top-color: var(--accounting-ivory-hair);
  background: var(--accounting-ivory-card);
}

.accounting-view .match-detail-heading {
  border-bottom-color: var(--accounting-ivory-hair);
}

.accounting-view .match-detail-heading strong {
  color: var(--accounting-ivory-ink);
  font-family: Marcellus, Georgia, "Times New Roman", serif;
  font-size: 1rem;
  font-weight: 400;
}

.accounting-view .match-detail-heading p {
  color: var(--accounting-ivory-ink-soft);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1rem;
  font-style: italic;
  font-weight: 400;
}

.accounting-view .match-source-detail {
  border-right-color: var(--accounting-ivory-hair);
}

.accounting-view .match-source-detail > strong {
  color: var(--accounting-ivory-ink);
  font-family: Marcellus, Georgia, "Times New Roman", serif;
  font-weight: 400;
}

/* A source the match never found is stated as absent rather than drawn as a
   heading that happens to be grey. */
.accounting-view .match-source-detail.missing > strong {
  color: var(--accounting-ivory-ink-faint);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.02rem;
  font-style: italic;
  font-weight: 400;
}

.accounting-view .match-source-detail dt {
  color: var(--accounting-ivory-ink-soft);
}

.accounting-view .match-source-detail dd {
  color: var(--accounting-ivory-ink);
}

/* ---------------------------------------------------------------- narrow */

@media (max-width: 1180px) {
  /* The Portal's own 1180px rule folds `.metric-grid` to two fixed columns.
     The tiles here are already auto-fit, so the track definition is restored
     and the grid keeps flowing rather than jumping to a two-column step. */
  .accounting-view .metric-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  }
}