/* ==========================================================================
   Report chrome — shared across every report page (Peter, 24 Jul 2026).
   Reproduces the legacy report layout in the current design system: a controls
   row (date range / dropdowns + Reset/Update), a divider, the report itself
   (title + fullscreen toggle + subtitle + a real <table>), then a footer
   (Export + Back). Profit & Loss is the reference; every report links this file.
   John wires the real backend data + the recompute + the Excel export.
   ========================================================================== */

/* --- controls row -------------------------------------------------------- */
.rep-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 24px; }
.rep-field { display: flex; flex-direction: column; gap: 8px; }
.rep-field__label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text); }
.rep-field .icon-field, .rep-field .input, .rep-field .tx-dd { width: 200px; }
.rep-field--wide .icon-field, .rep-field--wide .input, .rep-field--wide .tx-dd { width: 240px; }
.rep-controls__actions { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.rep-reset { background: none; border: none; font: inherit; color: var(--color-text-muted); cursor: pointer; padding: 10px 4px; }
.rep-reset:hover { color: var(--color-text); }

.rep-divider { border: none; border-top: var(--border-width) solid var(--color-border); margin: 28px 0 32px; }

/* --- report head --------------------------------------------------------- */
.rep-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.rep-title { font-size: var(--text-title); font-weight: var(--weight-bold); margin: 0; }
.rep-expand { flex: none; width: 36px; height: 36px; border: none; background: none; border-radius: var(--radius-sm); color: var(--color-text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.rep-expand:hover { background: var(--color-bg-subtle); color: var(--color-text); }
.rep-expand svg { width: 20px; height: 20px; }
.rep-sub { color: var(--color-text-muted); margin: 6px 0 0; }

/* --- the table ----------------------------------------------------------- */
.rep-scroll { overflow-x: auto; margin-top: 28px; }
.rep-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.rep-table th, .rep-table td { padding: 9px 12px; white-space: nowrap; }
.rep-table thead th { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text); text-align: right; border-bottom: var(--border-width) solid var(--color-border); }
.rep-table thead th:first-child { text-align: left; }
.rep-table td.num, .rep-table th.num { text-align: right; }
/* account-name cell — muted, reads as a drill-in link (→ Account Transactions) */
.rep-name { color: var(--color-text-muted); }
a.rep-name { text-decoration: none; }
a.rep-name:hover { color: var(--color-text); text-decoration: underline; }
/* section heading row (Income, Fixed Assets, …) */
.rep-section td { font-weight: var(--weight-bold); color: var(--color-text); padding-top: 22px; }
/* subtotal / total rows */
.rep-total td { font-weight: var(--weight-bold); border-top: var(--border-width) solid var(--color-border); }
/* a headline line (Gross Profit, Net Profit, Total Assets, Net Assets, grand totals) */
.rep-headline td { font-weight: var(--weight-bold); border-top: 1px solid var(--color-text); border-bottom: 3px double var(--color-text); }
/* a quiet secondary line under a total (e.g. aging percentages) */
.rep-subline td { color: var(--color-text-muted); font-size: var(--text-sm); }
.rep-table tbody tr td:first-child { padding-left: 0; }
.rep-table tbody tr td:last-child, .rep-table thead th:last-child { padding-right: 0; }

/* --- list-report extras (Chart of Accounts / Manual Journals / Fixed Assets):
   these are management-style lists — a Create button in the head, sortable columns,
   underline tabs, and strong (dark, underlined) name links. --- */
.rep-tabs { display: flex; gap: 26px; border-bottom: var(--border-width) solid var(--color-border); margin: 24px 0 4px; }
.rep-tab { position: relative; background: none; border: none; font: inherit; font-size: var(--text-base); color: var(--color-text-muted); cursor: pointer; padding: 8px 2px 12px; }
.rep-tab:hover { color: var(--color-text); }
.rep-tab.is-on { color: var(--color-text); font-weight: var(--weight-medium); }
.rep-tab.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--color-text); border-radius: 2px; }
.rep-tab:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; }

/* strong name link (the legacy list style: dark, medium, underlined) */
a.rep-name--strong { color: var(--color-text); font-weight: var(--weight-medium); text-decoration: underline; }
a.rep-name--strong:hover { color: var(--color-text-muted); }

/* sortable header caret */
.rep-table thead th .rep-sort { display: inline-block; width: 12px; height: 12px; margin-left: 5px; vertical-align: -1px; color: var(--color-text-muted); }

/* --- footer -------------------------------------------------------------- */
.rep-footer { display: flex; align-items: center; justify-content: flex-end; gap: 24px; margin-top: 40px; padding-top: 24px; }
.rep-export { background: none; border: none; font: inherit; color: var(--color-text-muted); cursor: pointer; padding: 12px 4px; }
.rep-export:hover { color: var(--color-text); }

/* --- pagination (Account Transactions) ----------------------------------- */
.rep-pager { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 24px; font-size: var(--text-sm); color: var(--color-text-muted); }
.rep-pager__show { display: inline-flex; align-items: center; gap: 8px; }
.rep-pager__nav { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.rep-pager__btn { min-width: 34px; height: 34px; padding: 0 10px; border: var(--border-width) solid var(--color-border); background: var(--color-surface); border-radius: var(--radius-sm); color: var(--color-text); cursor: pointer; font: inherit; }
.rep-pager__btn:hover { background: var(--color-bg-subtle); }
.rep-pager__btn.is-on { background: var(--color-text); color: var(--color-surface); border-color: var(--color-text); }
.rep-pager__btn[disabled] { color: var(--color-text-muted); cursor: default; background: var(--color-surface); }

@media (max-width: 640px) {
  .rep-field .icon-field, .rep-field .input, .rep-field .tx-dd,
  .rep-field--wide .icon-field, .rep-field--wide .input, .rep-field--wide .tx-dd { width: 100%; }
  .rep-field { flex: 1 1 45%; }
  .rep-controls__actions { margin-left: 0; width: 100%; justify-content: flex-end; }
}