/* Card report components; shared shell and palette live in style.css. */
:root {
  --card-bg:var(--bg);--card-ink:var(--ink);--card-muted:var(--muted);--card-link:var(--accent);
  --card-line:var(--line);--card-border:var(--border);--card-head:var(--head);--card-stripe:var(--stripe);
  --card-warn:var(--warn);--card-good:var(--good);
}
#queryForm { align-items:end;flex-wrap:wrap }
#queryForm label { flex:1;min-width:130px }
#report { overflow-wrap:anywhere;line-height:1.6 }
#report h2 { font-size:22px }

/* Summary boxes (overview) and fact grid (card detail). */
.card-summary { margin: 28px 0; display: flex; gap: 16px; flex-wrap: wrap }
.card-summary div { background: white; border: 1px solid var(--card-line); border-radius: 12px; padding: 16px 22px; min-width: 210px }
.card-summary small { display: block; font-size: 12px }
.card-summary strong { font-size: 25px; display: block }
#report .detail-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px }
#report .detail-summary p { margin: 0 }
#report .detail-summary strong { display: block; font-size: 20px }

/* Tables. Numbers are right-aligned with tabular digits; the first column is a label. */
#report .table-scroll { overflow-x: auto; max-width: 100%; margin: 16px 0; background: white; border: 1px solid var(--card-border); border-radius: 14px; box-shadow: 0 8px 28px #20355408 }
.card-table { width: 100%; border-collapse: collapse; background: white; min-width: 720px }
.card-table th, .card-table td { padding: 18px 16px; border-bottom: 1px solid var(--card-line); border-right: 1px solid var(--card-line); vertical-align: top; text-align: right; font-variant-numeric: tabular-nums }
.card-table thead { background: var(--card-head); color: white }
.card-table thead th { font-size: 14px; font-weight: 500 }
.card-table th:first-child, .card-table td:first-child { text-align: left }
.card-table tbody tr:nth-child(even) { background: var(--card-stripe) }
.card-table a { font-weight: 700; color: var(--card-link); display: block }
.card-table small { display: block; color: var(--card-muted); margin-top: 4px; font-size: 12px; white-space: normal; max-width: 250px }
.card-table .money { white-space: nowrap }
.card-table progress { display: block; width: 100%; height: 7px; margin-top: 12px; accent-color: #4273b5 }
.card-table .remaining { font-weight: 800; font-size: 18px; white-space: nowrap }
.card-table .warn { background: #fff1cc; color: var(--card-warn) }
.card-table .good { background: #e7f5eb; color: var(--card-good) }
.card-table .none { background: #eef2f7; color: var(--card-muted); font-size: 14px }
.card-table details { max-width: 240px; white-space: normal; font-size: 12px }
.card-table summary { color: #476b9d; cursor: pointer; margin-top: 9px }
#report .card-overview { min-width: 640px }
.card-overview .remaining { display: inline-block; font-size: 12px; padding: 3px 8px; border-radius: 5px; margin-top: 9px }

/* Financial amounts must never wrap in the middle of digits. */
.card-overview th, .card-overview td:nth-child(2), .card-overview td:nth-child(2) a { white-space: nowrap; overflow-wrap: normal; word-break: normal }
.card-summary strong { white-space: nowrap; overflow-wrap: normal }

/* Performance: shortfall in amber, achieved in green with the figures toned down. */
.performance-status { font-size: 18px; font-weight: 800 }
.performance-shortfall .performance-status { color: var(--card-warn) }
.performance-achieved .performance-status { color: var(--card-good) }
.performance-meta { font-size: 13px; font-weight: 400; color: #52657d }
.performance-achieved .performance-meta { color: #7b8796 }

/* Phones: the overview table turns into one card per row (name / amounts / performance),
   with each cell's data-label printed above its value. */
@media (max-width: 600px) {
  .card-summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px }
  .card-summary div { padding: 12px 16px; min-width: 0; flex: 1 }
  .card-summary div:first-child { grid-column: 1/-1 }
  .card-summary strong { font-size: 22px }
  #report .table-scroll { border-radius: 10px }
  #report .overview-scroll { border: 0; background: none; box-shadow: none; overflow: visible }
  #report .card-overview { display: block; min-width: 0; width: 100%; background: none }
  /* Header row stays available to screen readers only (like .sr-only). */
  .card-overview thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap }
  .card-overview tbody { display: grid; gap: 14px }
  .card-overview tbody tr, .card-overview tbody tr:nth-child(even) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: white; border: 1px solid var(--card-border); border-radius: 12px; padding: 14px 16px; gap: 14px }
  .card-overview td { display: block; border: 0; padding: 0; min-width: 0; text-align: left; font-size: 15px; position: static; overflow-wrap: normal; word-break: normal }
  .card-overview td:first-child, .card-overview tbody tr:nth-child(even) td:first-child { grid-column: 1/-1; position: static; min-width: 0; background: none; font-size: 18px }
  .card-overview td:nth-child(2) { grid-row: 2; grid-column: 1 }
  .card-overview td:nth-child(4) { grid-row: 2; grid-column: 2 }
  .card-overview td:nth-child(3) { grid-row: 3; grid-column: 1/-1 }
  .card-overview td:not(:first-child)::before { content: attr(data-label); display: block; color: var(--card-muted); font-size: 12px; margin-bottom: 4px }
  .card-overview .performance { font-size: 12px; white-space: nowrap }
  .card-overview progress { margin-top: 8px }
  .card-overview details { max-width: none }
  .card-overview details small { max-width: none; overflow-wrap: anywhere }
  .card-overview a { min-height: 24px }
  .card-overview td:first-child a { min-height: 32px }
  .performance-status { font-size: 15px }
  .performance-meta { font-size: 12px }
}
@media (max-width: 360px) {
  .card-overview tbody tr { padding: 12px }
  .card-overview .performance { font-size: 11px }
}