/* Reports module. Uses the existing colors and type only. */
.rk-hub { display: grid; gap: 16px; }
.rk-group h2 { margin: 0 0 10px; font-size: 1rem; }
.rk-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; } /* 300px: a title with its New pill stays one line; a narrow tablet card shows one card a row (Oct 19, 2026) */
.rk-card { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); text-decoration: none; }
.rk-card:hover { border-color: var(--blue); }
.rk-card .ico { width: 20px; height: 20px; color: var(--blue); margin-top: 2px; }
.rk-card b { display: block; font-weight: 650; }
.rk-card span { display: block; color: var(--muted); font-size: .8rem; }
.rk-card.new b::after { content: "New"; margin-left: 8px; padding: 1px 6px; border-radius: 999px; background: var(--grass); color: var(--ink); font-size: .7rem; font-weight: 650; vertical-align: middle; }
.rk-tiles .stat { flex: 1 1 140px; }
.rk-chart h2 { margin: 0 0 10px; font-size: 1rem; }
.rk-bar-row { display: grid; grid-template-columns: minmax(90px, 220px) 1fr minmax(70px, auto); gap: 10px; align-items: center; padding: 4px 0; }
.rk-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-bar-track { height: 10px; background: var(--paper); border-radius: 999px; overflow: hidden; }
.rk-bar-fill { display: block; height: 100%; width: var(--w); background: var(--blue); border-radius: 999px; }
.rk-bar-value { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.rk-table { width: 100%; }
.rk-table td.num, .rk-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Phone cards: a number in the last cell lines up right like the rest (phone-sheet's last-child rule would left-align it). */
table.rk-table.phone-sheet td.num:last-child { text-align: right; }
.rk-table td:first-child { min-width: 180px; }
.rk-table tr.rk-total td { font-weight: 650; border-top: 2px solid var(--line); }
.rk-short { color: var(--red); font-weight: 650; }
.rk-ok { color: var(--muted); }
.rk-tabs { margin-bottom: 12px; }
.rk-scroll { overflow-x: auto; }
.rk-drill summary { cursor: pointer; }
.rk-drill table { margin-top: 8px; }
.rk-notes ul { margin: 6px 0 0; padding-left: 18px; }
.rk-notes li { margin: 2px 0; }
@media (max-width: 700px) {
  .rk-bar-row { grid-template-columns: 90px 1fr auto; }
  .rk-cards { grid-template-columns: 1fr; }
}
@media print {
  .side, .top-actions, .list-bar, .rk-tabs, .toast, nav.tabs { display: none !important; }
  main, .main, .content { margin: 0 !important; padding: 0 !important; }
  .card { border: 0; box-shadow: none; break-inside: avoid; }
  .rk-scroll { overflow: visible; }
  .rk-drill[open] summary ~ * { display: block; }
  body { background: #fff; }
}
/* Reports carry more filters than a list: let them wrap on the computer, cap select width. */
.list-bar.lb.rk-bar { flex-wrap: wrap; }
.rk-bar .lb-filters { flex: 1 1 auto; flex-wrap: wrap; min-width: 0; }
.rk-bar select { max-width: 220px; }
/* Slimmer pill padding so a full report bar (up to 7 filters) stays on one line at 1280. */
.rk-bar .lb-filters select { padding: 0 20px 0 10px; }
.rk-scroll { max-width: 100%; }
@media (max-width: 700px) {
  .list-bar.lb.rk-bar { flex-wrap: wrap; }
  .rk-bar .lb-filters { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; padding-left: 0; border-left: 0; }
  .rk-bar .lb-filters > *, .rk-bar select { flex: none; min-width: 120px; }
  .rk-bar .lb-tail { flex: 1 1 100%; }
}
/* Customers / Properties segmented control and Ranked / List switch. */
.rk-switch { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
.rk-seg { display: inline-flex; padding: 3px; gap: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); }
.rk-seg a { display: inline-flex; align-items: center; height: 32px; padding: 0 16px; border-radius: 999px; color: var(--ink); font-weight: 650; text-decoration: none; }
.rk-seg a:hover { color: var(--blue); }
.rk-seg a.on { background: var(--blue); color: #fff; }
@media (max-width: 700px) { .rk-switch { display: grid; grid-template-columns: 1fr; } .rk-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; } .rk-seg a { justify-content: center; } }
@media print { .rk-switch { display: none; } }
/* Rates & Costs */
.rc-intro p { margin: 0 0 6px; }
.rc-table td, .rc-table th { white-space: nowrap; }
.rc-good { color: var(--ink); }
b.rc-good, td.rc-good { color: #2E8B1E; }
.rc-bad, b.rc-bad, td.rc-bad { color: var(--red); font-weight: 650; }
.rc-bar { display: inline-block; width: 80px; height: 8px; background: var(--paper); border-radius: 999px; overflow: hidden; vertical-align: middle; }
.rc-fill { display: block; height: 100%; width: var(--w); background: var(--grass); border-radius: 999px; }
.rc-fill.rc-bad { background: var(--red); }
.rc-click { cursor: pointer; }
.rc-click:hover td { background: var(--paper); }
.rc-caret { display: inline-block; color: var(--muted); transition: transform .15s; }
.rc-click.open .rc-caret { transform: rotate(90deg); }
.rc-detail td { background: var(--paper); white-space: normal; }
.rc-math p { margin: 2px 0; font-size: .85rem; font-variant-numeric: tabular-nums; }
.rc-whatif { margin-top: 12px; }
.rc-whatif summary { cursor: pointer; color: var(--blue); }
.rc-whatif .row { flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 8px; }
.rc-whatif input { width: 110px; }
@media print { .rc-whatif { display: none; } .rc-detail[hidden] { display: table-row !important; } }
/* Tracker 928 (Oct 23 2026): report numbers read like the At A Glance cards: the name on top, the number under it, the
   boxes inside one card (gray boxes on the card, not loose tiles on the page). Numbers and math are unchanged. */
.rk-glance h2 { margin: 0 0 10px; font-size: 1rem; }
.rk-glance .stats, .card .rk-tiles { margin: 0 0 12px; }
.rk-glance .stats:last-child, .rk-glance .kpi-tiles:last-child { margin-bottom: 0; }
.rk-glance .stat, .rk-tiles .stat { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; }
.rk-glance .stat > span, .rk-tiles .stat > span { order: -1; font-size: .85rem; }
.rk-glance .stat > b, .rk-tiles .stat > b { font-size: 1.2rem; }
.rk-glance > p.muted { margin: 0; font-size: .85rem; }
@media (max-width: 600px) {
  .rk-glance .stats, .card .rk-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .rk-glance .stat, .rk-tiles .stat { min-width: 0; }
  .rk-glance .stat > b, .rk-tiles .stat > b { font-size: 1.05rem; overflow-wrap: anywhere; }
}