/* -------------------------------------------------------------------
   Stage 105.0G CLEAN — UI v2 Billing / Reports Workbench Foundation
   Frontend-only CSS polish for Billing and Reports workbench/list pages.
   Styling only: no route changes, no API calls, no data writes, no invoice,
   SageOne, RADIUS, prepaid, product, customer package/speed, Asset Register,
   Job Card, Calendar, Android, or protected-module logic changes.
------------------------------------------------------------------- */

:root{
  --ui2-br-card: rgba(255,255,255,.985);
  --ui2-br-card-soft: rgba(248,250,252,.94);
  --ui2-br-border: rgba(148,163,184,.24);
  --ui2-br-text: #0f172a;
  --ui2-br-muted: #64748b;
  --ui2-br-accent: #0f766e;
  --ui2-br-accent-2: #2563eb;
  --ui2-br-accent-soft: rgba(15,118,110,.11);
  --ui2-br-blue-soft: rgba(37,99,235,.10);
  --ui2-br-green: #16a34a;
  --ui2-br-warn: #d97706;
  --ui2-br-danger: #dc2626;
  --ui2-br-shadow: 0 18px 48px rgba(15,23,42,.085);
  --ui2-br-shadow-soft: 0 10px 28px rgba(15,23,42,.060);
  --ui2-br-page-bg: linear-gradient(135deg, rgba(240,253,250,.54), rgba(239,246,255,.64));
}

html[data-theme="dark"], body.dark, body.theme-dark{
  --ui2-br-card: rgba(15,23,42,.94);
  --ui2-br-card-soft: rgba(30,41,59,.76);
  --ui2-br-border: rgba(148,163,184,.22);
  --ui2-br-text: #e5edf8;
  --ui2-br-muted: #9fb0c5;
  --ui2-br-accent: #2dd4bf;
  --ui2-br-accent-2: #60a5fa;
  --ui2-br-accent-soft: rgba(45,212,191,.13);
  --ui2-br-blue-soft: rgba(96,165,250,.13);
  --ui2-br-shadow: 0 20px 54px rgba(0,0,0,.30);
  --ui2-br-shadow-soft: 0 12px 34px rgba(0,0,0,.22);
  --ui2-br-page-bg: linear-gradient(135deg, rgba(15,23,42,.88), rgba(22,78,99,.30));
}

/* Route-scoped only: Billing and Reports pages. */
body.ispforge-ui-v2-billing-reports-active #page,
body.ispforge-ui-v2-billing-reports-active main,
body.ispforge-ui-v2-billing-reports-active .main-content,
body.ispforge-ui-v2-billing-reports-active .content,
body.ispforge-ui-v2-billing-reports-active .page{
  background: var(--ui2-br-page-bg) !important;
}

body.ispforge-ui-v2-billing-reports-active .page-title-row{
  position: relative !important;
  isolation: isolate !important;
  margin-bottom: 18px !important;
  padding: 20px 22px !important;
  border: 1px solid var(--ui2-br-border) !important;
  border-radius: 26px !important;
  background:
    radial-gradient(circle at top right, var(--ui2-br-accent-soft), transparent 32%),
    radial-gradient(circle at bottom left, var(--ui2-br-blue-soft), transparent 30%),
    var(--ui2-br-card) !important;
  box-shadow: var(--ui2-br-shadow) !important;
  overflow: hidden !important;
}

body.ispforge-ui-v2-billing-reports-active .page-title-row::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 5px !important;
  border-radius: 26px 0 0 26px !important;
  background: linear-gradient(180deg, #2dd4bf, #2563eb 54%, #7c3aed) !important;
  z-index: -1 !important;
}

body.ispforge-ui-v2-billing-reports-active .page-title-row h1{
  color: var(--ui2-br-text) !important;
  font-size: clamp(27px, 2.15vw, 38px) !important;
  font-weight: 950 !important;
  line-height: 1.02 !important;
  letter-spacing: -.052em !important;
  margin-bottom: 5px !important;
}

body.ispforge-ui-v2-billing-reports-active .page-title-row p,
body.ispforge-ui-v2-billing-reports-active .muted,
body.ispforge-ui-v2-billing-reports-active .text-muted,
body.ispforge-ui-v2-billing-reports-active .small-muted{
  color: var(--ui2-br-muted) !important;
}

body.ispforge-ui-v2-billing-reports-active .page-actions{
  display: flex !important;
  gap: 9px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

/* Billing/report KPI and summary cards. */
body.ispforge-ui-v2-billing-reports-active .kpi-row,
body.ispforge-ui-v2-billing-reports-active .stats-row,
body.ispforge-ui-v2-billing-reports-active .summary-row,
body.ispforge-ui-v2-billing-reports-active .metric-row{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)) !important;
  gap: 14px !important;
  margin-bottom: 18px !important;
}

body.ispforge-ui-v2-billing-reports-active .kpi,
body.ispforge-ui-v2-billing-reports-active .stat-card,
body.ispforge-ui-v2-billing-reports-active .summary-card,
body.ispforge-ui-v2-billing-reports-active .metric-card{
  position: relative !important;
  overflow: hidden !important;
  min-height: 102px !important;
  padding: 17px 18px 15px !important;
  border-radius: 24px !important;
  border: 1px solid var(--ui2-br-border) !important;
  background: var(--ui2-br-card) !important;
  box-shadow: var(--ui2-br-shadow-soft) !important;
}

body.ispforge-ui-v2-billing-reports-active .kpi::after,
body.ispforge-ui-v2-billing-reports-active .stat-card::after,
body.ispforge-ui-v2-billing-reports-active .summary-card::after,
body.ispforge-ui-v2-billing-reports-active .metric-card::after{
  content: "" !important;
  position: absolute !important;
  width: 88px !important;
  height: 88px !important;
  right: -30px !important;
  top: -30px !important;
  border-radius: 999px !important;
  background: var(--ui2-br-accent-soft) !important;
}

body.ispforge-ui-v2-billing-reports-active .kpi span,
body.ispforge-ui-v2-billing-reports-active .stat-card span,
body.ispforge-ui-v2-billing-reports-active .summary-card span,
body.ispforge-ui-v2-billing-reports-active .metric-card span{
  color: var(--ui2-br-muted) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

body.ispforge-ui-v2-billing-reports-active .kpi strong,
body.ispforge-ui-v2-billing-reports-active .stat-card strong,
body.ispforge-ui-v2-billing-reports-active .summary-card strong,
body.ispforge-ui-v2-billing-reports-active .metric-card strong{
  color: var(--ui2-br-text) !important;
  font-size: clamp(22px, 1.9vw, 31px) !important;
  font-weight: 950 !important;
  letter-spacing: -.045em !important;
  line-height: 1.1 !important;
}

/* Filter/report control panels. */
body.ispforge-ui-v2-billing-reports-active .panel,
body.ispforge-ui-v2-billing-reports-active .card,
body.ispforge-ui-v2-billing-reports-active .section-card,
body.ispforge-ui-v2-billing-reports-active .report-card,
body.ispforge-ui-v2-billing-reports-active .billing-card,
body.ispforge-ui-v2-billing-reports-active .age-card{
  border-radius: 24px !important;
  border: 1px solid var(--ui2-br-border) !important;
  background: var(--ui2-br-card) !important;
  box-shadow: var(--ui2-br-shadow) !important;
}

body.ispforge-ui-v2-billing-reports-active .panel-header,
body.ispforge-ui-v2-billing-reports-active .card-header,
body.ispforge-ui-v2-billing-reports-active .section-header,
body.ispforge-ui-v2-billing-reports-active .report-header,
body.ispforge-ui-v2-billing-reports-active .billing-header{
  min-height: 62px !important;
  padding: 15px 18px !important;
  border-bottom: 1px solid var(--ui2-br-border) !important;
  background: linear-gradient(180deg, rgba(248,250,252,.98), rgba(241,245,249,.72)) !important;
  gap: 12px !important;
}

html[data-theme="dark"] body.ispforge-ui-v2-billing-reports-active .panel-header,
body.dark.ispforge-ui-v2-billing-reports-active .panel-header,
body.theme-dark.ispforge-ui-v2-billing-reports-active .panel-header,
html[data-theme="dark"] body.ispforge-ui-v2-billing-reports-active .card-header,
body.dark.ispforge-ui-v2-billing-reports-active .card-header,
body.theme-dark.ispforge-ui-v2-billing-reports-active .card-header{
  background: linear-gradient(180deg, rgba(30,41,59,.92), rgba(15,23,42,.72)) !important;
}

body.ispforge-ui-v2-billing-reports-active .panel-header h2,
body.ispforge-ui-v2-billing-reports-active .card-header h2,
body.ispforge-ui-v2-billing-reports-active .section-header h2,
body.ispforge-ui-v2-billing-reports-active .report-header h2,
body.ispforge-ui-v2-billing-reports-active .billing-header h2,
body.ispforge-ui-v2-billing-reports-active h2{
  color: var(--ui2-br-text) !important;
  font-weight: 950 !important;
  letter-spacing: -.025em !important;
}

body.ispforge-ui-v2-billing-reports-active .filters,
body.ispforge-ui-v2-billing-reports-active .filter-row,
body.ispforge-ui-v2-billing-reports-active .toolbar,
body.ispforge-ui-v2-billing-reports-active .actions-row,
body.ispforge-ui-v2-billing-reports-active .search-row,
body.ispforge-ui-v2-billing-reports-active .report-filters,
body.ispforge-ui-v2-billing-reports-active .billing-filters{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: end !important;
  gap: 12px !important;
  padding: 14px !important;
  border: 1px solid var(--ui2-br-border) !important;
  border-radius: 22px !important;
  background: var(--ui2-br-card-soft) !important;
  box-shadow: 0 8px 22px rgba(15,23,42,.045) !important;
}

body.ispforge-ui-v2-billing-reports-active label{
  color: var(--ui2-br-muted) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
}

body.ispforge-ui-v2-billing-reports-active input,
body.ispforge-ui-v2-billing-reports-active select,
body.ispforge-ui-v2-billing-reports-active textarea{
  border-radius: 14px !important;
  border: 1px solid var(--ui2-br-border) !important;
  background: var(--ui2-br-card) !important;
  color: var(--ui2-br-text) !important;
  min-height: 40px !important;
}

body.ispforge-ui-v2-billing-reports-active input:focus,
body.ispforge-ui-v2-billing-reports-active select:focus,
body.ispforge-ui-v2-billing-reports-active textarea:focus{
  outline: none !important;
  border-color: rgba(15,118,110,.48) !important;
  box-shadow: 0 0 0 4px var(--ui2-br-accent-soft) !important;
}

/* Tables on Age Analysis, Adjustments, and report pages. */
body.ispforge-ui-v2-billing-reports-active .table-wrap,
body.ispforge-ui-v2-billing-reports-active .table-container,
body.ispforge-ui-v2-billing-reports-active .data-table-wrap,
body.ispforge-ui-v2-billing-reports-active .report-table-wrap{
  border-radius: 24px !important;
  border: 1px solid var(--ui2-br-border) !important;
  background: var(--ui2-br-card) !important;
  box-shadow: var(--ui2-br-shadow) !important;
  overflow: auto !important;
}

body.ispforge-ui-v2-billing-reports-active table{
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
}

body.ispforge-ui-v2-billing-reports-active table thead th{
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  padding: 13px 12px !important;
  border-bottom: 1px solid var(--ui2-br-border) !important;
  background: var(--ui2-br-card-soft) !important;
  color: var(--ui2-br-muted) !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

body.ispforge-ui-v2-billing-reports-active table tbody td{
  padding: 12px !important;
  border-bottom: 1px solid rgba(148,163,184,.16) !important;
  color: var(--ui2-br-text) !important;
  vertical-align: middle !important;
}

body.ispforge-ui-v2-billing-reports-active table tbody tr:hover td{
  background: rgba(15,118,110,.055) !important;
}

/* Make money/ageing/status values easier to scan during demos. */
body.ispforge-ui-v2-billing-reports-active .amount,
body.ispforge-ui-v2-billing-reports-active .money,
body.ispforge-ui-v2-billing-reports-active .currency,
body.ispforge-ui-v2-billing-reports-active .balance,
body.ispforge-ui-v2-billing-reports-active .age-bucket,
body.ispforge-ui-v2-billing-reports-active td[data-label*="Balance"],
body.ispforge-ui-v2-billing-reports-active td[data-label*="Amount"],
body.ispforge-ui-v2-billing-reports-active td[data-label*="Total"]{
  font-variant-numeric: tabular-nums !important;
  font-weight: 850 !important;
}

body.ispforge-ui-v2-billing-reports-active .badge,
body.ispforge-ui-v2-billing-reports-active .chip,
body.ispforge-ui-v2-billing-reports-active .status,
body.ispforge-ui-v2-billing-reports-active .pill{
  border-radius: 999px !important;
  padding: 5px 10px !important;
  border: 1px solid var(--ui2-br-border) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .035em !important;
  text-transform: uppercase !important;
}

body.ispforge-ui-v2-billing-reports-active button,
body.ispforge-ui-v2-billing-reports-active .btn,
body.ispforge-ui-v2-billing-reports-active .button{
  border-radius: 14px !important;
  font-weight: 900 !important;
  letter-spacing: -.01em !important;
}

body.ispforge-ui-v2-billing-reports-active .btn-primary,
body.ispforge-ui-v2-billing-reports-active button.primary,
body.ispforge-ui-v2-billing-reports-active .primary-btn{
  background: linear-gradient(135deg, var(--ui2-br-accent), var(--ui2-br-accent-2)) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 12px 24px rgba(15,118,110,.20) !important;
}

body.ispforge-ui-v2-billing-reports-active .empty-state,
body.ispforge-ui-v2-billing-reports-active .no-data,
body.ispforge-ui-v2-billing-reports-active .loading,
body.ispforge-ui-v2-billing-reports-active .placeholder{
  border-radius: 22px !important;
  border: 1px dashed rgba(148,163,184,.36) !important;
  background: var(--ui2-br-card-soft) !important;
  color: var(--ui2-br-muted) !important;
  padding: 22px !important;
}

@media (max-width: 980px){
  body.ispforge-ui-v2-billing-reports-active .page-title-row{
    padding: 18px !important;
  }
  body.ispforge-ui-v2-billing-reports-active .filters,
  body.ispforge-ui-v2-billing-reports-active .filter-row,
  body.ispforge-ui-v2-billing-reports-active .toolbar,
  body.ispforge-ui-v2-billing-reports-active .report-filters,
  body.ispforge-ui-v2-billing-reports-active .billing-filters{
    align-items: stretch !important;
  }
  body.ispforge-ui-v2-billing-reports-active input,
  body.ispforge-ui-v2-billing-reports-active select,
  body.ispforge-ui-v2-billing-reports-active textarea,
  body.ispforge-ui-v2-billing-reports-active button,
  body.ispforge-ui-v2-billing-reports-active .btn{
    width: 100% !important;
  }
}