/* Approved scope: the bill list only. Existing shell, tree and toolbar stay put. */
body[data-shell][data-skin][data-route="billing"] #viewHost .billing-summary-scroll {
  max-width:100%; overflow:auto; border:1px solid #b8cbdc; border-radius:6px;
}
@media(min-width:768px) and (min-height:650px) and (max-height:820px) {
  body[data-shell][data-skin][data-route="billing"] #viewHost .billing-query-board { gap:8px; }
  body[data-shell][data-skin][data-route="billing"] #viewHost .billing-zone-ledger-heading :is(small,p) { display:none; }
  body[data-shell][data-skin][data-route="billing"] #viewHost .billing-zone-ledger-heading h2 { font-size:18px; margin:0; }
  body[data-shell][data-skin][data-route="billing"] #viewHost .billing-zone-summary-card { min-height:70px; padding:8px 12px; }
  body[data-shell][data-skin][data-route="billing"] #viewHost .billing-zone-summary-card strong { font-size:20px; margin:4px 0; }
  body[data-shell][data-skin][data-route="billing"] #viewHost .billing-zone-ledger-context { padding:8px 12px; }
}
body[data-shell][data-skin][data-route="billing"] #viewHost table.billing-summary-table {
  width:100%; min-width:680px; table-layout:fixed; border-collapse:separate;
  border-spacing:0; font-variant-numeric:tabular-nums;
}
body[data-shell][data-skin][data-route="billing"] #viewHost table.billing-summary-table :is(th,td) {
  width:auto; height:auto; padding:14px 12px; border-right:1px solid #d9e3ed;
  border-bottom:1px solid #d9e3ed; text-align:center; overflow-wrap:anywhere;
}
body[data-shell][data-skin][data-route="billing"] #viewHost table.billing-summary-table th {
  padding:16px 10px; background:#203f59; color:#fff; border-color:#8198ab;
}
body[data-shell][data-skin][data-route="billing"] #viewHost table.billing-summary-table th small { display:block; color:inherit; font-size:12px; }
body[data-shell][data-skin][data-route="billing"] #viewHost table.billing-summary-table :is(th,td):nth-child(1) { width:11%; }
body[data-shell][data-skin][data-route="billing"] #viewHost table.billing-summary-table :is(th,td):nth-child(2) { width:18%; }
body[data-shell][data-skin][data-route="billing"] #viewHost table.billing-summary-table :is(th,td):nth-child(3) { width:26%; }
body[data-shell][data-skin][data-route="billing"] #viewHost table.billing-summary-table :is(th,td):nth-child(n+4) { width:15%; }
body[data-shell][data-skin][data-route="billing"] #viewHost table.billing-summary-table .billing-device-names { text-align:left; }
body[data-shell][data-skin][data-route="billing"] #viewHost table.billing-summary-table :is(.billing-runtime-value,.billing-energy-value,.billing-cost-value) {
  text-align:right; font-weight:700; font-size:14px; white-space:nowrap;
}
body[data-shell][data-skin][data-route="billing"] #viewHost table.billing-summary-table td.billing-runtime-value { background:#fff8e9; color:#a16512; }
body[data-shell][data-skin][data-route="billing"] #viewHost table.billing-summary-table td.billing-energy-value { background:#eef6ff; color:#116ab1; }
body[data-shell][data-skin][data-route="billing"] #viewHost table.billing-summary-table td.billing-cost-value { background:#edf8f2; color:#167453; }
body[data-shell][data-skin][data-route="billing"] #viewHost table.billing-summary-table td small { display:block; font-size:10px; font-weight:400; }
body[data-shell][data-skin][data-route="billing"] #viewHost table.billing-summary-table tfoot td { border-top:2px solid #819eb3; border-bottom:0; font-weight:700; }
body[data-shell][data-skin][data-route="billing"] #viewHost .billing-runtime-note { margin:10px 0; color:var(--text-soft); font-size:12px; }
body[data-shell][data-skin][data-route="billing"] #viewHost table.billing-summary-table tr.lk:focus-visible { outline:3px solid #4385c0; outline-offset:-3px; }
body[data-shell][data-skin][data-route="billing"] #viewHost table.billing-summary-table :is(th,td):nth-child(2) {
  position:sticky; left:0; z-index:1; background:#fff; box-shadow:2px 0 0 #8198ab;
}
body[data-shell][data-skin][data-route="billing"] #viewHost table.billing-summary-table th:nth-child(2) { background:#203f59; }
body[data-shell][data-skin][data-route="billing"] #viewHost table.billing-summary-table tfoot td:nth-child(2) { background:#e7f0f8; }
@media(max-width:700px) {
  body[data-shell][data-skin][data-route="billing"] #viewHost table.billing-summary-table :is(th,td) { padding:12px 10px; }
}

/* Keep the query controls and totals adjacent to the independently scrolling data. */
body[data-shell][data-skin][data-route="billing"] #viewHost .billing-zone-summary-card { min-width:0; }
body[data-shell][data-skin][data-route="billing"] #viewHost .billing-zone-summary-card :is(strong,small) { max-width:100%; overflow-wrap:anywhere; }
body[data-shell][data-skin][data-route="billing"] #viewHost .billing-table-card { min-height:0; }
body[data-shell][data-skin][data-route="billing"] #viewHost .billing-summary-scroll { max-height:60dvh; overscroll-behavior:contain; }
body[data-shell][data-skin][data-route="billing"] #viewHost .billing-summary-table thead th { position:sticky; top:0; z-index:2; }
body[data-shell][data-skin][data-route="billing"] #viewHost .billing-summary-table thead th:nth-child(2) { z-index:3; }
body[data-shell][data-skin][data-route="billing"] #viewHost .billing-table-pagination { margin-top:12px; padding-top:0; flex-shrink:0; }
@media(min-width:768px) and (min-height:650px) {
  body[data-shell][data-skin][data-route="billing"] #viewHost .billing-query-board { height:calc(100dvh - 155px); min-height:0; display:flex; flex-direction:column; gap:12px; }
  body[data-shell][data-skin][data-route="billing"] #viewHost .billing-zone-ledger-heading { margin:0; flex-shrink:0; }
  body[data-shell][data-skin][data-route="billing"] #viewHost .billing-zone-ledger-heading p { margin:4px 0 0; }
  body[data-shell][data-skin][data-route="billing"] #viewHost .billing-zone-summary { margin:0; flex-shrink:0; grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr)); }
  body[data-shell][data-skin][data-route="billing"] #viewHost .billing-zone-summary-card { padding:10px 14px; }
  body[data-shell][data-skin][data-route="billing"] #viewHost .billing-zone-ledger-layout { flex:1; min-height:0; align-items:stretch; }
  body[data-shell][data-skin][data-route="billing"] #viewHost :is(.billing-zone-ledger-tree,.billing-zone-ledger-main,.billing-building-tree,.billing-table-card) { min-height:0; display:flex; flex-direction:column; }
  body[data-shell][data-skin][data-route="billing"] #viewHost .billing-building-tree { height:100%; }
  body[data-shell][data-skin][data-route="billing"] #viewHost .billing-control-tree { min-height:0; flex:1; overflow:auto; overscroll-behavior:contain; }
  body[data-shell][data-skin][data-route="billing"] #viewHost .billing-table-card { flex:1; padding:12px; overflow:hidden; }
  body[data-shell][data-skin][data-route="billing"] #viewHost .billing-summary-scroll { flex:1; min-height:0; max-height:none; }
  body[data-shell][data-skin][data-route="billing"] #viewHost :is(.billing-zone-ledger-context,.billing-query-toolbar,.billing-runtime-note) { flex-shrink:0; }
  body[data-shell][data-skin][data-route="billing"] #viewHost .billing-query-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:10px 12px; }
  body[data-shell][data-skin][data-route="billing"] #viewHost .billing-query-toolbar .btn { width:auto !important; flex:0 0 auto; }
  body[data-shell][data-skin][data-route="billing"] #viewHost .billing-query-toolbar input[type="date"] { width:142px !important; min-width:0; flex:0 0 142px; }
}