/*
  Stage 105.3L CLEAN — Billing / Reports Surface Consistency Cleanup
  Built cleanly from confirmed Stage 105.3K CLEAN.

  Scope:
  - Visual consistency only for Billing and Reports pages.
  - Cleans filter/tool rows, KPI/summary surfaces, report/billing cards,
    table wrappers, empty/loading states, and dense action rows.

  Safety:
  - CSS-only visual layer plus marker script.
  - No backend, database, API, route, popup behaviour, app.js, invoice,
    SageOne, billing runtime, report-query, RADIUS, prepaid, products,
    Asset Register, Job Card, Calendar, Android, worker, or protected logic.
  - Protects Customer 360, menus/dropdowns, sidebar shell, customer pickers,
    popups/modals, table readability, and safe button uniformity.
*/

:root{
  --ui1053l-text: #0f172a;
  --ui1053l-muted: #526173;
  --ui1053l-muted-2: #64748b;
  --ui1053l-panel: rgba(255,255,255,.975);
  --ui1053l-panel-soft: rgba(248,250,252,.92);
  --ui1053l-panel-softer: rgba(241,245,249,.80);
  --ui1053l-border: rgba(148,163,184,.24);
  --ui1053l-border-strong: rgba(37,99,235,.17);
  --ui1053l-shadow: 0 10px 26px rgba(15,23,42,.055);
  --ui1053l-shadow-soft: 0 6px 18px rgba(15,23,42,.04);
  --ui1053l-radius-xl: 22px;
  --ui1053l-radius-lg: 18px;
  --ui1053l-radius-md: 14px;
  --ui1053l-blue: #2563eb;
  --ui1053l-teal: #0f766e;
  --ui1053l-green: #16a34a;
  --ui1053l-amber: #d97706;
  --ui1053l-red: #dc2626;
}

html[data-theme="dark"],
body.dark,
body.theme-dark{
  --ui1053l-text: #e5edf8;
  --ui1053l-muted: #a7b6ca;
  --ui1053l-muted-2: #94a3b8;
  --ui1053l-panel: rgba(15,23,42,.93);
  --ui1053l-panel-soft: rgba(30,41,59,.78);
  --ui1053l-panel-softer: rgba(30,41,59,.62);
  --ui1053l-border: rgba(148,163,184,.22);
  --ui1053l-border-strong: rgba(96,165,250,.23);
  --ui1053l-shadow: 0 16px 38px rgba(0,0,0,.28);
  --ui1053l-shadow-soft: 0 10px 26px rgba(0,0,0,.20);
  --ui1053l-blue: #60a5fa;
  --ui1053l-teal: #2dd4bf;
  --ui1053l-green: #22c55e;
  --ui1053l-amber: #f59e0b;
  --ui1053l-red: #f87171;
}

/* Scope only to Billing and Reports routes using the existing safe route classes. */
html.stage1053l-billing-reports-consistency body:is(
  .ispforge-ui-v2-billing-professional-active,
  .ispforge-ui-v2-reports-professional-active
) #app-screen > main#page.page{
  color: var(--ui1053l-text);
}

/* Billing/Reports should use the same content rhythm as the recovered page shell. */
html.stage1053l-billing-reports-consistency body:is(
  .ispforge-ui-v2-billing-professional-active,
  .ispforge-ui-v2-reports-professional-active
) #app-screen > main#page.page > :not(script):not(style){
  max-width: 100%;
  box-sizing: border-box;
}

/* Toolbars and report filters. Keeps the existing controls, only improves the surface and wrapping. */
html.stage1053l-billing-reports-consistency body:is(
  .ispforge-ui-v2-billing-professional-active,
  .ispforge-ui-v2-reports-professional-active
) #app-screen > main#page.page :is(
  .filters,
  .filter-bar,
  .filter-row,
  .filter-grid,
  .search-row,
  .toolbar,
  .table-toolbar,
  .report-toolbar,
  .billing-toolbar,
  .action-row,
  .actions-row,
  .controls-row,
  .s1048b-filters,
  .s1048c-filters,
  .s1048d-filters,
  .s1048e-filters,
  .s1048f-filters,
  .s1048fp-filters,
  .s923b-filters,
  .s924-filters,
  .s925-filters,
  .s926-filters,
  .s927-filters,
  .s928-filters,
  .s9212-filters
):not(.stage831-dropdown):not(.submenu-bar):not(.stage1052c-tab-list):not(.modal *):not(.popup *){
  box-sizing: border-box;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px 12px;
  margin: 0 0 16px;
  padding: 12px;
  border: 1px solid var(--ui1053l-border);
  border-radius: var(--ui1053l-radius-lg);
  background: linear-gradient(135deg, var(--ui1053l-panel-soft), rgba(255,255,255,.88));
  box-shadow: var(--ui1053l-shadow-soft);
}

html.stage1053l-billing-reports-consistency body.theme-dark:is(
  .ispforge-ui-v2-billing-professional-active,
  .ispforge-ui-v2-reports-professional-active
) #app-screen > main#page.page :is(
  .filters,
  .filter-bar,
  .filter-row,
  .filter-grid,
  .search-row,
  .toolbar,
  .table-toolbar,
  .report-toolbar,
  .billing-toolbar,
  .action-row,
  .actions-row,
  .controls-row,
  .s1048b-filters,
  .s1048c-filters,
  .s1048d-filters,
  .s1048e-filters,
  .s1048f-filters,
  .s1048fp-filters,
  .s923b-filters,
  .s924-filters,
  .s925-filters,
  .s926-filters,
  .s927-filters,
  .s928-filters,
  .s9212-filters
):not(.stage831-dropdown):not(.submenu-bar):not(.stage1052c-tab-list):not(.modal *):not(.popup *){
  background: linear-gradient(135deg, var(--ui1053l-panel-soft), rgba(15,23,42,.82));
}

/* Controls inside Billing/Reports filter rows must breathe and not crush labels. */
html.stage1053l-billing-reports-consistency body:is(
  .ispforge-ui-v2-billing-professional-active,
  .ispforge-ui-v2-reports-professional-active
) #app-screen > main#page.page :is(.filters,.filter-bar,.filter-row,.filter-grid,.search-row,.toolbar,.table-toolbar,.report-toolbar,.billing-toolbar,.controls-row) :is(label,.field-label,.form-label){
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: min(210px, 100%);
  color: var(--ui1053l-muted) !important;
  font-weight: 850;
  line-height: 1.25;
}

html.stage1053l-billing-reports-consistency body:is(
  .ispforge-ui-v2-billing-professional-active,
  .ispforge-ui-v2-reports-professional-active
) #app-screen > main#page.page :is(.filters,.filter-bar,.filter-row,.filter-grid,.search-row,.toolbar,.table-toolbar,.report-toolbar,.billing-toolbar,.controls-row) :is(input,select,textarea){
  min-height: 38px;
  max-width: 100%;
}

/* KPI/summary rows: same size language across Billing and Reports, without masonry. */
html.stage1053l-billing-reports-consistency body:is(
  .ispforge-ui-v2-billing-professional-active,
  .ispforge-ui-v2-reports-professional-active
) #app-screen > main#page.page :is(
  .kpis,
  .kpi-row,
  .kpi-grid,
  .stats-grid,
  .summary-grid,
  .summary-row,
  .metrics-grid,
  .s1048b-kpis,
  .s1048c-kpis,
  .s1048d-kpis,
  .s1048e-kpis,
  .s1048f-kpis,
  .s1048fp-kpis,
  .s923b-kpis,
  .s924-kpis,
  .s925-kpis,
  .s926-kpis,
  .s927-kpis,
  .s928-kpis,
  .s9212-kpis
):not(.stage1052c-panel-grid){
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 14px;
  align-items: stretch;
  margin: 0 0 16px;
  max-width: 100%;
}

html.stage1053l-billing-reports-consistency body:is(
  .ispforge-ui-v2-billing-professional-active,
  .ispforge-ui-v2-reports-professional-active
) #app-screen > main#page.page :is(
  .kpi-card,
  .stat-card,
  .summary-card,
  .metric-card,
  .s1048b-kpi,
  .s1048c-kpi,
  .s1048d-kpi,
  .s1048e-kpi,
  .s1048f-kpi,
  .s1048fp-kpi,
  .s923b-kpi,
  .s924-kpi,
  .s925-kpi,
  .s926-kpi,
  .s927-kpi,
  .s928-kpi,
  .s9212-kpi
):not(.stage1052c-panel):not(.modal *):not(.popup *){
  box-sizing: border-box;
  min-width: 0;
  border: 1px solid var(--ui1053l-border);
  border-radius: var(--ui1053l-radius-lg);
  background: linear-gradient(135deg, var(--ui1053l-panel), var(--ui1053l-panel-soft));
  color: var(--ui1053l-text);
  box-shadow: var(--ui1053l-shadow-soft);
}

/* Cards/panels inside Billing and Reports: consistent spacing and no edge-to-edge old surfaces. */
html.stage1053l-billing-reports-consistency body:is(
  .ispforge-ui-v2-billing-professional-active,
  .ispforge-ui-v2-reports-professional-active
) #app-screen > main#page.page :is(
  .card,
  .panel,
  .box,
  .billing-card,
  .report-card,
  .stage-card,
  .content-card,
  .section-card,
  .table-panel,
  .list-panel,
  .detail-panel,
  .sage-card,
  .invoice-card,
  .age-card,
  .credit-note-card
):not(.modal):not(.modal-content):not(.popup):not(.stage1052c-panel):not(.stage831-dropdown):not(.stage833-result){
  min-width: 0;
  max-width: 100%;
}

/* Billing/Reports table wrappers get the same scroll behaviour and clean shell. */
html.stage1053l-billing-reports-consistency body:is(
  .ispforge-ui-v2-billing-professional-active,
  .ispforge-ui-v2-reports-professional-active
) #app-screen > main#page.page :is(
  .table-wrap,
  .table-wrapper,
  .data-table-wrap,
  .list-table-wrap,
  .report-table-wrap,
  .billing-table-wrap,
  .s1048b-table,
  .s1048c-table,
  .s1048d-table,
  .s1048e-table,
  .s1048f-table,
  .s1048fp-table,
  .s923b-table,
  .s924-table,
  .s925-table,
  .s926-table,
  .s927-table,
  .s928-table,
  .s9212-table
):not(.modal *):not(.popup *){
  box-sizing: border-box;
  max-width: 100%;
  margin-top: 12px;
  border-radius: var(--ui1053l-radius-xl);
  border: 1px solid var(--ui1053l-border);
  background: var(--ui1053l-panel);
  box-shadow: var(--ui1053l-shadow-soft);
  overflow: auto;
}

html.stage1053l-billing-reports-consistency body:is(
  .ispforge-ui-v2-billing-professional-active,
  .ispforge-ui-v2-reports-professional-active
) #app-screen > main#page.page :is(.table-wrap,.table-wrapper,.data-table-wrap,.list-table-wrap,.report-table-wrap,.billing-table-wrap) table{
  min-width: max-content;
}

/* Reduce cramped report cells without fighting the 105.3D readability layer. */
html.stage1053l-billing-reports-consistency body:is(
  .ispforge-ui-v2-billing-professional-active,
  .ispforge-ui-v2-reports-professional-active
) #app-screen > main#page.page table :is(th,td){
  vertical-align: middle;
}

html.stage1053l-billing-reports-consistency body:is(
  .ispforge-ui-v2-billing-professional-active,
  .ispforge-ui-v2-reports-professional-active
) #app-screen > main#page.page table :is(td,th) :is(.muted,.small,.hint,.subtle,.secondary-text){
  color: var(--ui1053l-muted) !important;
  -webkit-text-fill-color: var(--ui1053l-muted) !important;
}

/* Empty/loading/result boxes on Billing and Reports pages. */
html.stage1053l-billing-reports-consistency body:is(
  .ispforge-ui-v2-billing-professional-active,
  .ispforge-ui-v2-reports-professional-active
) #app-screen > main#page.page :is(
  .empty,
  .empty-state,
  .loading,
  .notice,
  .info-box,
  .warning-box,
  .error-box,
  .success-box,
  .message,
  .callout,
  .recommendation,
  .result-box,
  .status-box
):not(.modal *):not(.popup *):not(.stage833-result){
  border-radius: var(--ui1053l-radius-lg);
  border: 1px solid var(--ui1053l-border);
  background: linear-gradient(135deg, var(--ui1053l-panel-soft), var(--ui1053l-panel));
  color: var(--ui1053l-text);
  box-shadow: 0 5px 14px rgba(15,23,42,.035);
}

/* Billing/Reports in-page tabs only. Customer 360 tabs and menu subbars remain protected. */
html.stage1053l-billing-reports-consistency body:is(
  .ispforge-ui-v2-billing-professional-active,
  .ispforge-ui-v2-reports-professional-active
) #app-screen > main#page.page :is(.tabs,.tab-bar,.tab-row,.nav-tabs):not(.stage1052c-tab-list):not(.submenu-bar):not(.stage831-dropdown):not(.modal *){
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
}

/* Keep dense action cells readable after button uniformity. */
html.stage1053l-billing-reports-consistency body:is(
  .ispforge-ui-v2-billing-professional-active,
  .ispforge-ui-v2-reports-professional-active
) #app-screen > main#page.page table td:last-child :is(.btn,button,a.button,.action-btn){
  margin-top: 2px;
  margin-bottom: 2px;
}

/* Narrow screens: stack Billing/Reports toolbar controls before they overflow. */
@media (max-width: 920px){
  html.stage1053l-billing-reports-consistency body:is(
    .ispforge-ui-v2-billing-professional-active,
    .ispforge-ui-v2-reports-professional-active
  ) #app-screen > main#page.page :is(.filters,.filter-bar,.filter-row,.filter-grid,.search-row,.toolbar,.table-toolbar,.report-toolbar,.billing-toolbar,.controls-row){
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  html.stage1053l-billing-reports-consistency body:is(
    .ispforge-ui-v2-billing-professional-active,
    .ispforge-ui-v2-reports-professional-active
  ) #app-screen > main#page.page :is(.filters,.filter-bar,.filter-row,.filter-grid,.search-row,.toolbar,.table-toolbar,.report-toolbar,.billing-toolbar,.controls-row) :is(label,input,select,textarea,button,.btn,a.button){
    width: 100%;
  }
}

/* Explicit protections. */
html.stage1053l-billing-reports-consistency :is(
  #sidebar,
  .sidebar,
  .side-nav,
  #top-menu,
  .top-menu,
  .stage831-dropdown,
  .submenu-bar,
  .stage1052c-tabbed-profile,
  .stage1052c-tab-list,
  .stage1052c-panel,
  .stage833-search-wrap,
  .stage833-results,
  .stage833-result,
  .modal,
  .modal-content,
  .popup,
  .dialog
){
  /* Marker-only protection block. No visual override here. */
}