/* Reports (ui/reports.js), laid out as Wave lays them out (survey section "Reports"): the index in cards, the grey filter panel, the report tables
   with a band, a totals row and the aged columns, the Customer Statements empty state, Checks and Exports. Page rules only: tokens and shared
   components (buttons, menu, seg, table, status, note) live in app.css. Sizes by token name, hover only on a fine pointer, press feedback on
   everything pressable (the same matrix as app.css), nothing moves for a keyboard, and app.css switches every transition off for reduced motion. */
/* Two colours of Wave that app.css has no token for yet (a shared request is with the shell owner): declared once, here, for the two places that use them. */
.rep-filters,.rep-body{--rep-grey:#eaeef2;--rep-col:#eef7ff}

/* ---- The first row of a report page: a way back, the title, the actions ---- */
.rep-title{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.rep-back{display:inline-flex;align-items:center;gap:2px;min-height:28px;margin-left:-4px;padding-right:6px;border-radius:var(--radius-xs);color:var(--accent);font-size:var(--type-s);font-weight:700;text-decoration:none;transition:background 120ms var(--ease),transform 140ms var(--ease)}
.rep-back svg{width:16px;height:16px;flex:none;transform:scaleX(-1)}   /* the shell's chevron points right: turned round it points back */
.rep-back:active{transform:matrix(.97,0,0,.97,0,0)}
@media (hover:hover) and (pointer:fine){.rep-back:hover{background:var(--accent-soft)}}
/* Export is an outline pill with a caret (the shell's popMenu, which also keeps the keyboard animation-free); the menu hangs from its right edge. */
.rep-export>.btn{display:inline-flex;align-items:center;gap:6px}
.rep-export>.menu{min-width:160px}
/* A button that is working stays enabled (a disabled one would drop the keyboard's focus) and is marked aria-busy instead. */
.btn[aria-busy=true],.rep-filters[aria-busy] .btn.primary{opacity:.6;cursor:default}

/* ---- The index: a card per group, the blurb at the left, the reports at the right ---- */
.rep-cards{display:flex;flex-direction:column;gap:16px}
.rep-card{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;padding:20px;background:var(--bg-panel);border:1px solid var(--divider);border-radius:var(--radius)}
.rep-card-head h2{font-size:var(--type-l);font-weight:700;line-height:1.2;color:var(--text-primary)}
.rep-card-head p{margin-top:6px;color:var(--text-secondary)}
.rep-links{list-style:none;display:flex;flex-direction:column;min-width:0}
.rep-link{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t i" "d i";column-gap:16px;row-gap:2px;align-items:center;padding:14px 0;border-top:1px solid var(--divider);text-decoration:none;transition:transform 140ms var(--ease)}
.rep-links li:first-child .rep-link{border-top:0;padding-top:0}
.rep-links li:last-child .rep-link{padding-bottom:0}
.rep-link:active{transform:matrix(.97,0,0,.97,0,0)}
.rep-link-t{grid-area:t;font-size:var(--type-l);font-weight:600;line-height:1.25;color:var(--accent)}
.rep-link-d{grid-area:d;color:var(--text-secondary);overflow-wrap:anywhere}
.rep-chev{grid-area:i;width:16px;height:16px;color:var(--text-secondary);transition:transform 140ms var(--ease)}
@media (hover:hover) and (pointer:fine){.rep-link:hover .rep-link-t{text-decoration:underline}.rep-link:hover .rep-chev{transform:translateX(2px)}}
@media (min-width:960px){
  .rep-card{grid-template-columns:minmax(220px,1fr) minmax(0,2fr);gap:32px;padding:28px}
  .rep-card-head h2{font-size:var(--type-xxl)}
}

/* ---- The grey filter panel: the controls at the left, Update Report at the right ---- */
.rep-filters{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;padding:16px 20px;background:var(--rep-grey);border-radius:var(--radius)}
.rep-controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px;min-width:0}
.rep-controls .field{flex:0 1 auto}
.rep-range-row{display:grid;grid-template-columns:minmax(150px,200px) 160px 160px;gap:8px}
.rep-dates-row{display:grid;grid-template-columns:160px 160px;gap:8px}
.rep-asof-row{grid-template-columns:minmax(150px,200px) 160px}
/* Account Transactions has two rows of controls (Account, Date Range, Report Type; then Contact, Tags) */
.rep-filters.rows{display:block}
.rep-controls.rows{flex-direction:column;align-items:stretch;gap:12px}
.rep-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px;min-width:0}
.rep-row>.btn.primary{margin-left:auto}
@media (min-width:960px){
  /* a panel of two rows has less room across than a panel of one: Account, Date Range and Report Type are one line at 1440 */
  .rep-row .rep-range-row{grid-template-columns:minmax(120px,150px) 150px 150px}
}
.rep-wide select{min-width:240px}
@media (max-width:959px){
  .rep-filters{flex-direction:column;align-items:stretch}
  .rep-controls{flex-direction:column;align-items:stretch;gap:12px}
  .rep-range-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rep-range-row select{grid-column:1 / -1}
  .rep-dates-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rep-asof-row{grid-template-columns:minmax(0,1fr)}
  .rep-row{flex-direction:column;align-items:stretch;gap:12px}
  .rep-row>.btn.primary{margin-left:0;width:100%}
  .rep-wide select{min-width:0}
  .rep-filters>.btn.primary{width:100%}
  /* the Export button is at the left of its row on a phone, so its list hangs from the left edge (from the right it would leave the screen) */
  .rep-export>.menu.pop.right{left:0;right:auto;transform-origin:top left}
}

/* ---- The report under the panel: tabs, one status line, the table ---- */
.rep-body{display:flex;flex-direction:column;gap:16px;min-width:0}
.rep-lead{display:flex;flex-direction:column;gap:16px;min-width:0}
.rep-lead:empty{display:none}
.rep-body>.seg{align-self:flex-start}
.rep-out{display:flex;flex-direction:column;gap:14px;min-width:0}
/* the table scrolls inside this box when the window is narrower than the table, so the page never scrolls sideways */
.rep-scroll{min-width:0;overflow-x:auto;overscroll-behavior-x:contain}
.rep-scroll:focus-visible{outline-offset:-2px}
.table.rep tr.total td{font-weight:700;color:var(--text-primary)}
.table.rep tr.total td a{font-weight:700}
.table.rep td .sub{margin-top:2px}
.table.rep td.band{height:40px;padding:0 12px;background:var(--rep-grey);color:var(--text-primary);font-weight:700;border-bottom:0}
.table.rep td .ext{width:14px;height:14px;margin:0 0 -2px 6px;flex:none}
.table.rep .status{vertical-align:middle}
/* On a desktop the columns are as narrow as their figures allow, so the six aged columns, and most of the other tables, fit beside the sidebar at 1024
   px instead of hiding their last columns in the box's scroll. A heading may wrap onto two lines (a figure never does); a name may too. */
@media (min-width:960px){
  .table.rep th{white-space:normal}
  .table.rep th.num,.table.rep td.num{padding-left:8px;padding-right:12px}
  .table.rep th.name,.table.rep td.name{min-width:140px;padding-left:12px}
  .table.rep td.wide{min-width:180px}
  .table.rep th.span{text-align:center;padding-bottom:6px;border-bottom:1px solid var(--divider)}
  .table.aged th.col-band,.table.aged td.col-band{background:var(--rep-col)}
  .table.aged thead tr:first-child th{vertical-align:bottom}
  .table.rep tr.total td{border-top:1px solid var(--text-tertiary)}
  .table.rep tr.total.dbl td{border-top:3px double var(--text-tertiary)}
}

/* ---- Customer Statements: the statement head and the empty state ---- */
.stmt-head{display:flex;flex-direction:column;gap:4px}
.stmt-head h2{font-size:var(--type-xxl);font-weight:700;line-height:1.2;color:var(--text-primary)}
.stmt-who{font-size:var(--type-l);font-weight:700;color:var(--text-primary);overflow-wrap:anywhere}
.stmt-period,.stmt-close{color:var(--text-secondary)}
.stmt-close{font-weight:700;color:var(--text-primary);font-variant-numeric:tabular-nums}
.rep-empty{display:flex;flex-direction:column;align-items:center;gap:12px;padding:48px 16px;text-align:center}
.rep-empty-icon{width:56px;height:56px;color:var(--line-strong)}
.rep-empty h2{font-size:var(--type-xxl);font-weight:700;line-height:1.2;color:var(--text-primary)}
.rep-empty p{max-width:520px;color:var(--text-secondary)}
@media (max-width:959px){.rep-empty{padding:32px 0}.rep-empty h2,.stmt-head h2{font-size:var(--type-l)}}

/* ---- Phone: a row is two lines, the name, then the figures with their labels. The aged table gives its six figures two rows of three. ---- */
@media (max-width:959px){
  .table.rep td.name{grid-column:1 / -1}
  .table.rep td:empty{display:none}
  .table.rep td.wide{grid-column:1 / -1}
  .table.rep td.band{grid-column:1 / -1;padding:0 12px;display:flex;align-items:center;height:40px}
  .table.rep tr.band{padding:0;border-bottom:0}
  .table.rep tr.total{border-top:1px solid var(--text-tertiary)}
  .table.rep tr.total.dbl{border-top:3px double var(--text-tertiary)}
  .rep-scroll{overflow-x:visible}
  .table.aged td.num{text-align:left}
  /* a name is the one thing on a phone with no width of its own: a long unbroken one breaks anywhere instead of pushing the page sideways */
  .table.rep td.name,.table.rep td.text,.table.rep td.wide{overflow-wrap:anywhere}
}

/* ---- Checks (the findings) and Exports ---- */
.find-list{list-style:none;display:flex;flex-direction:column}
.find{display:flex;flex-direction:column;gap:4px;padding:12px 0;border-top:1px solid var(--divider)}
.find-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.find-c{font-weight:700}
.find-m{color:var(--text-secondary);overflow-wrap:anywhere}
.find-t{display:flex;align-items:center;gap:8px}
.finds.info .find-c{font-weight:400;color:var(--text-secondary)}
.finds.info .find-m{color:var(--text-tertiary)}
.fact-v.sum{font-family:var(--font-num)}
.find-h a{position:relative}
.find-h a::after{content:"";position:absolute;inset:-14px -8px -14px -16px}
.rep-pair{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start}
.panel .rep-f{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,220px));gap:10px}
@media (max-width:959px){
  .panel .rep-f{grid-template-columns:minmax(0,1fr)}
  .table.files td.act{grid-column:3;justify-self:end;width:auto}
}
@media (min-width:960px){
  .rep-pair{grid-template-columns:repeat(2,minmax(0,1fr))}
  .table.files th.num,.table.files td.num{padding-right:18px}
}