/* -------------------------------------------------------------------
   Stage 105.1C CLEAN — Billing Workbench Professional Layout v1
   Frontend-only CSS layout transformation for Billing pages.
   Styling/layout only: no route changes, no API calls, no data writes,
   no invoice generation, no SageOne push/sync runtime, no RADIUS,
   no prepaid/topups, no products/backend/customer package-speed changes,
   no Asset Register, Job Card, Calendar, Android, or protected logic.
------------------------------------------------------------------- */

:root{
  --ui2-billpro-bg:
    radial-gradient(circle at top left, rgba(20,184,166,.16), transparent 31%),
    radial-gradient(circle at top right, rgba(37,99,235,.12), transparent 30%),
    linear-gradient(135deg, rgba(240,253,250,.78), rgba(239,246,255,.78) 58%, rgba(245,243,255,.56));
  --ui2-billpro-hero: rgba(255,255,255,.965);
  --ui2-billpro-hero-strong: rgba(255,255,255,.995);
  --ui2-billpro-panel: rgba(255,255,255,.975);
  --ui2-billpro-panel-soft: rgba(248,250,252,.88);
  --ui2-billpro-border: rgba(148,163,184,.25);
  --ui2-billpro-border-strong: rgba(20,184,166,.28);
  --ui2-billpro-text: #0f172a;
  --ui2-billpro-muted: #64748b;
  --ui2-billpro-accent: #0f766e;
  --ui2-billpro-accent-2: #2563eb;
  --ui2-billpro-accent-3: #7c3aed;
  --ui2-billpro-success: #16a34a;
  --ui2-billpro-warning: #d97706;
  --ui2-billpro-danger: #dc2626;
  --ui2-billpro-shadow: 0 22px 62px rgba(15,23,42,.105);
  --ui2-billpro-shadow-soft: 0 12px 34px rgba(15,23,42,.070);
  --ui2-billpro-radius-xl: 30px;
  --ui2-billpro-radius-lg: 24px;
}

html[data-theme="dark"], body.dark, body.theme-dark{
  --ui2-billpro-bg:
    radial-gradient(circle at top left, rgba(45,212,191,.15), transparent 33%),
    radial-gradient(circle at top right, rgba(96,165,250,.14), transparent 30%),
    linear-gradient(135deg, rgba(2,6,23,.98), rgba(15,23,42,.92) 60%, rgba(22,78,99,.34));
  --ui2-billpro-hero: rgba(15,23,42,.92);
  --ui2-billpro-hero-strong: rgba(15,23,42,.98);
  --ui2-billpro-panel: rgba(15,23,42,.93);
  --ui2-billpro-panel-soft: rgba(30,41,59,.72);
  --ui2-billpro-border: rgba(148,163,184,.22);
  --ui2-billpro-border-strong: rgba(45,212,191,.26);
  --ui2-billpro-text: #e5edf8;
  --ui2-billpro-muted: #9fb0c5;
  --ui2-billpro-accent: #2dd4bf;
  --ui2-billpro-accent-2: #60a5fa;
  --ui2-billpro-accent-3: #a78bfa;
  --ui2-billpro-shadow: 0 24px 68px rgba(0,0,0,.34);
  --ui2-billpro-shadow-soft: 0 14px 38px rgba(0,0,0,.24);
}

/* Scope: Billing pages only. Reports get their own professional pass later. */
body.ispforge-ui-v2-billing-professional-active #page,
body.ispforge-ui-v2-billing-professional-active main,
body.ispforge-ui-v2-billing-professional-active .main-content,
body.ispforge-ui-v2-billing-professional-active .content,
body.ispforge-ui-v2-billing-professional-active .page{
  background: var(--ui2-billpro-bg) !important;
}

body.ispforge-ui-v2-billing-professional-active #page,
body.ispforge-ui-v2-billing-professional-active .page,
body.ispforge-ui-v2-billing-professional-active .main-content{
  max-width: 1660px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Professional Billing hero/header. */
body.ispforge-ui-v2-billing-professional-active .page-title-row{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 18px !important;
  align-items: center !important;
  position: relative !important;
  isolation: isolate !important;
  margin: 2px 0 22px !important;
  padding: clamp(22px, 2.15vw, 34px) clamp(22px, 2.35vw, 38px) !important;
  border: 1px solid var(--ui2-billpro-border-strong) !important;
  border-radius: var(--ui2-billpro-radius-xl) !important;
  background:
    radial-gradient(circle at 88% 14%, rgba(20,184,166,.20), transparent 24%),
    radial-gradient(circle at 3% 88%, rgba(37,99,235,.13), transparent 31%),
    linear-gradient(135deg, var(--ui2-billpro-hero-strong), var(--ui2-billpro-hero)) !important;
  box-shadow: var(--ui2-billpro-shadow) !important;
  overflow: hidden !important;
}

body.ispforge-ui-v2-billing-professional-active .page-title-row::before{
  content: "" !important;
  position: absolute !important;
  inset: auto 28px 0 28px !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, var(--ui2-billpro-accent), var(--ui2-billpro-accent-2), var(--ui2-billpro-accent-3)) !important;
  opacity: .92 !important;
  z-index: 0 !important;
}

body.ispforge-ui-v2-billing-professional-active .page-title-row::after{
  content: "Billing Workbench" !important;
  position: absolute !important;
  right: 24px !important;
  top: 18px !important;
  padding: 7px 12px !important;
  border: 1px solid rgba(20,184,166,.24) !important;
  border-radius: 999px !important;
  background: rgba(20,184,166,.095) !important;
  color: var(--ui2-billpro-accent) !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .085em !important;
  text-transform: uppercase !important;
}

body.ispforge-ui-v2-billing-professional-active .page-title-row > *{
  position: relative !important;
  z-index: 1 !important;
}

body.ispforge-ui-v2-billing-professional-active .page-title-row h1{
  margin: 0 0 8px !important;
  color: var(--ui2-billpro-text) !important;
  font-size: clamp(32px, 2.85vw, 46px) !important;
  font-weight: 950 !important;
  letter-spacing: -.060em !important;
  line-height: .99 !important;
}

body.ispforge-ui-v2-billing-professional-active .page-title-row p{
  max-width: 860px !important;
  margin: 0 !important;
  color: var(--ui2-billpro-muted) !important;
  font-size: 14.5px !important;
  line-height: 1.62 !important;
}

body.ispforge-ui-v2-billing-professional-active .page-actions{
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  max-width: 520px !important;
  padding-top: 18px !important;
}

body.ispforge-ui-v2-billing-professional-active .page-actions button,
body.ispforge-ui-v2-billing-professional-active .page-actions .button,
body.ispforge-ui-v2-billing-professional-active .page-actions a.button{
  min-height: 42px !important;
  padding: 10px 15px !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
  box-shadow: 0 10px 22px rgba(15,23,42,.08) !important;
}

/* Executive billing KPI cards. */
body.ispforge-ui-v2-billing-professional-active .kpi-row,
body.ispforge-ui-v2-billing-professional-active .stats-row,
body.ispforge-ui-v2-billing-professional-active .summary-row,
body.ispforge-ui-v2-billing-professional-active .metric-row{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(180px, 1fr)) !important;
  gap: 16px !important;
  margin: 0 0 22px !important;
}

body.ispforge-ui-v2-billing-professional-active .kpi,
body.ispforge-ui-v2-billing-professional-active .stat-card,
body.ispforge-ui-v2-billing-professional-active .summary-card,
body.ispforge-ui-v2-billing-professional-active .metric-card{
  position: relative !important;
  min-height: 118px !important;
  padding: 20px 20px 18px !important;
  border-radius: 26px !important;
  border: 1px solid var(--ui2-billpro-border) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.72), transparent),
    var(--ui2-billpro-panel) !important;
  box-shadow: var(--ui2-billpro-shadow-soft) !important;
  overflow: hidden !important;
}

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

body.ispforge-ui-v2-billing-professional-active .kpi::before,
body.ispforge-ui-v2-billing-professional-active .stat-card::before,
body.ispforge-ui-v2-billing-professional-active .summary-card::before,
body.ispforge-ui-v2-billing-professional-active .metric-card::before{
  content: "" !important;
  position: absolute !important;
  right: 18px !important;
  top: 18px !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 13px !important;
  background: linear-gradient(135deg, rgba(20,184,166,.24), rgba(37,99,235,.15)) !important;
  border: 1px solid rgba(20,184,166,.18) !important;
}

body.ispforge-ui-v2-billing-professional-active .kpi::after,
body.ispforge-ui-v2-billing-professional-active .stat-card::after,
body.ispforge-ui-v2-billing-professional-active .summary-card::after,
body.ispforge-ui-v2-billing-professional-active .metric-card::after{
  content: "" !important;
  position: absolute !important;
  width: 138px !important;
  height: 138px !important;
  right: -58px !important;
  bottom: -68px !important;
  border-radius: 999px !important;
  background: radial-gradient(circle, rgba(20,184,166,.16), transparent 68%) !important;
}

body.ispforge-ui-v2-billing-professional-active .kpi span,
body.ispforge-ui-v2-billing-professional-active .stat-card span,
body.ispforge-ui-v2-billing-professional-active .summary-card span,
body.ispforge-ui-v2-billing-professional-active .metric-card span{
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  margin-bottom: 12px !important;
  color: var(--ui2-billpro-muted) !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
}

body.ispforge-ui-v2-billing-professional-active .kpi strong,
body.ispforge-ui-v2-billing-professional-active .stat-card strong,
body.ispforge-ui-v2-billing-professional-active .summary-card strong,
body.ispforge-ui-v2-billing-professional-active .metric-card strong{
  position: relative !important;
  z-index: 1 !important;
  color: var(--ui2-billpro-text) !important;
  font-size: clamp(24px, 2.15vw, 34px) !important;
  font-weight: 950 !important;
  letter-spacing: -.055em !important;
  line-height: 1.05 !important;
}

/* Billing cards/panels: cleaner workbench hierarchy. */
body.ispforge-ui-v2-billing-professional-active .panel,
body.ispforge-ui-v2-billing-professional-active .card,
body.ispforge-ui-v2-billing-professional-active .section-card,
body.ispforge-ui-v2-billing-professional-active .billing-card,
body.ispforge-ui-v2-billing-professional-active .age-card,
body.ispforge-ui-v2-billing-professional-active .sage-card,
body.ispforge-ui-v2-billing-professional-active .invoice-card,
body.ispforge-ui-v2-billing-professional-active .settings-card{
  border-radius: var(--ui2-billpro-radius-lg) !important;
  border: 1px solid var(--ui2-billpro-border) !important;
  background: var(--ui2-billpro-panel) !important;
  box-shadow: var(--ui2-billpro-shadow) !important;
  overflow: hidden !important;
}

body.ispforge-ui-v2-billing-professional-active .panel-header,
body.ispforge-ui-v2-billing-professional-active .card-header,
body.ispforge-ui-v2-billing-professional-active .section-header,
body.ispforge-ui-v2-billing-professional-active .billing-header,
body.ispforge-ui-v2-billing-professional-active .age-header{
  min-height: 64px !important;
  padding: 16px 20px !important;
  border-bottom: 1px solid var(--ui2-billpro-border) !important;
  background:
    linear-gradient(90deg, rgba(20,184,166,.10), rgba(37,99,235,.06), transparent),
    var(--ui2-billpro-panel-soft) !important;
  gap: 12px !important;
}

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

/* Filters and billing controls. */
body.ispforge-ui-v2-billing-professional-active .filters,
body.ispforge-ui-v2-billing-professional-active .filter-row,
body.ispforge-ui-v2-billing-professional-active .toolbar,
body.ispforge-ui-v2-billing-professional-active .actions-row,
body.ispforge-ui-v2-billing-professional-active .search-row,
body.ispforge-ui-v2-billing-professional-active .billing-filters,
body.ispforge-ui-v2-billing-professional-active .age-analysis-filters,
body.ispforge-ui-v2-billing-professional-active .invoice-toolbar,
body.ispforge-ui-v2-billing-professional-active .sync-toolbar{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: end !important;
  gap: 12px !important;
  padding: 15px !important;
  border: 1px solid var(--ui2-billpro-border) !important;
  border-radius: 22px !important;
  background: var(--ui2-billpro-panel-soft) !important;
  box-shadow: 0 8px 24px rgba(15,23,42,.050) !important;
}

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

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

body.ispforge-ui-v2-billing-professional-active input:focus,
body.ispforge-ui-v2-billing-professional-active select:focus,
body.ispforge-ui-v2-billing-professional-active textarea:focus{
  outline: none !important;
  border-color: rgba(20,184,166,.48) !important;
  box-shadow: 0 0 0 4px rgba(20,184,166,.12) !important;
}

/* Billing tables: still dense enough, but more demo-ready. */
body.ispforge-ui-v2-billing-professional-active .table-wrap,
body.ispforge-ui-v2-billing-professional-active .table-container,
body.ispforge-ui-v2-billing-professional-active .data-table-wrap,
body.ispforge-ui-v2-billing-professional-active .billing-table-wrap,
body.ispforge-ui-v2-billing-professional-active .age-table-wrap,
body.ispforge-ui-v2-billing-professional-active .sync-table-wrap{
  border-radius: 24px !important;
  border: 1px solid var(--ui2-billpro-border) !important;
  background: var(--ui2-billpro-panel) !important;
  box-shadow: var(--ui2-billpro-shadow) !important;
  overflow: auto !important;
}

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

body.ispforge-ui-v2-billing-professional-active thead th,
body.ispforge-ui-v2-billing-professional-active table th{
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  background:
    linear-gradient(180deg, rgba(240,253,250,.96), rgba(239,246,255,.94)) !important;
  color: var(--ui2-billpro-text) !important;
  border-bottom: 1px solid var(--ui2-billpro-border) !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .070em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

html[data-theme="dark"] body.ispforge-ui-v2-billing-professional-active thead th,
body.dark.ispforge-ui-v2-billing-professional-active thead th,
body.theme-dark.ispforge-ui-v2-billing-professional-active thead th,
html[data-theme="dark"] body.ispforge-ui-v2-billing-professional-active table th,
body.dark.ispforge-ui-v2-billing-professional-active table th,
body.theme-dark.ispforge-ui-v2-billing-professional-active table th{
  background: linear-gradient(180deg, rgba(30,41,59,.98), rgba(15,23,42,.94)) !important;
}

body.ispforge-ui-v2-billing-professional-active table td{
  color: var(--ui2-billpro-text) !important;
  border-bottom: 1px solid rgba(148,163,184,.15) !important;
  vertical-align: middle !important;
}

body.ispforge-ui-v2-billing-professional-active table tbody tr:hover td{
  background: rgba(20,184,166,.055) !important;
}

/* Monetary/readability emphasis without changing values. */
body.ispforge-ui-v2-billing-professional-active td.amount,
body.ispforge-ui-v2-billing-professional-active td.balance,
body.ispforge-ui-v2-billing-professional-active td.total,
body.ispforge-ui-v2-billing-professional-active .amount,
body.ispforge-ui-v2-billing-professional-active .balance,
body.ispforge-ui-v2-billing-professional-active .total,
body.ispforge-ui-v2-billing-professional-active .currency,
body.ispforge-ui-v2-billing-professional-active .money{
  font-variant-numeric: tabular-nums !important;
  font-weight: 850 !important;
  letter-spacing: -.015em !important;
}

body.ispforge-ui-v2-billing-professional-active .badge,
body.ispforge-ui-v2-billing-professional-active .chip,
body.ispforge-ui-v2-billing-professional-active .status,
body.ispforge-ui-v2-billing-professional-active .pill{
  border-radius: 999px !important;
  border: 1px solid rgba(148,163,184,.22) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .035em !important;
  text-transform: uppercase !important;
}

body.ispforge-ui-v2-billing-professional-active button,
body.ispforge-ui-v2-billing-professional-active .button,
body.ispforge-ui-v2-billing-professional-active a.button,
body.ispforge-ui-v2-billing-professional-active .btn{
  border-radius: 14px !important;
  font-weight: 850 !important;
}

/* Tabs in Billing Setup, SageOne, queue and billing sections. */
body.ispforge-ui-v2-billing-professional-active .tabs,
body.ispforge-ui-v2-billing-professional-active .tab-row,
body.ispforge-ui-v2-billing-professional-active .subtabs,
body.ispforge-ui-v2-billing-professional-active .pill-tabs{
  gap: 8px !important;
  padding: 8px !important;
  border: 1px solid var(--ui2-billpro-border) !important;
  border-radius: 18px !important;
  background: var(--ui2-billpro-panel-soft) !important;
}

body.ispforge-ui-v2-billing-professional-active .tab,
body.ispforge-ui-v2-billing-professional-active .tab-btn,
body.ispforge-ui-v2-billing-professional-active .pill-tab{
  border-radius: 999px !important;
  font-weight: 900 !important;
}

body.ispforge-ui-v2-billing-professional-active .tab.active,
body.ispforge-ui-v2-billing-professional-active .tab-btn.active,
body.ispforge-ui-v2-billing-professional-active .pill-tab.active,
body.ispforge-ui-v2-billing-professional-active .active.tab{
  background: linear-gradient(135deg, var(--ui2-billpro-accent), var(--ui2-billpro-accent-2)) !important;
  color: #fff !important;
  box-shadow: 0 12px 28px rgba(20,184,166,.18) !important;
}

/* Empty/loading states. */
body.ispforge-ui-v2-billing-professional-active .empty-state,
body.ispforge-ui-v2-billing-professional-active .loading-state,
body.ispforge-ui-v2-billing-professional-active .no-data,
body.ispforge-ui-v2-billing-professional-active .placeholder{
  border: 1px dashed rgba(20,184,166,.32) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at top right, rgba(20,184,166,.11), transparent 31%),
    var(--ui2-billpro-panel-soft) !important;
  color: var(--ui2-billpro-muted) !important;
  padding: 24px !important;
}

@media (max-width: 1100px){
  body.ispforge-ui-v2-billing-professional-active .page-title-row{
    grid-template-columns: 1fr !important;
  }
  body.ispforge-ui-v2-billing-professional-active .page-actions{
    justify-content: flex-start !important;
    max-width: none !important;
    padding-top: 0 !important;
  }
  body.ispforge-ui-v2-billing-professional-active .kpi-row,
  body.ispforge-ui-v2-billing-professional-active .stats-row,
  body.ispforge-ui-v2-billing-professional-active .summary-row,
  body.ispforge-ui-v2-billing-professional-active .metric-row{
    grid-template-columns: repeat(2, minmax(180px, 1fr)) !important;
  }
}

@media (max-width: 720px){
  body.ispforge-ui-v2-billing-professional-active .page-title-row{
    padding: 20px !important;
    border-radius: 24px !important;
  }
  body.ispforge-ui-v2-billing-professional-active .page-title-row::after{
    display: none !important;
  }
  body.ispforge-ui-v2-billing-professional-active .kpi-row,
  body.ispforge-ui-v2-billing-professional-active .stats-row,
  body.ispforge-ui-v2-billing-professional-active .summary-row,
  body.ispforge-ui-v2-billing-professional-active .metric-row{
    grid-template-columns: 1fr !important;
  }
  body.ispforge-ui-v2-billing-professional-active .filters,
  body.ispforge-ui-v2-billing-professional-active .filter-row,
  body.ispforge-ui-v2-billing-professional-active .toolbar,
  body.ispforge-ui-v2-billing-professional-active .actions-row,
  body.ispforge-ui-v2-billing-professional-active .search-row,
  body.ispforge-ui-v2-billing-professional-active .billing-filters{
    align-items: stretch !important;
  }
}


/* Stage 106.1X CLEAN — Month-end Processing keeps the Billing UI v2 shell but removes the right-side "Billing Workbench" badge on this page only. */
body.ispforge-ui-v2-billing-professional-active:has(.stage1061x-month-end-page) .page-title-row::after,
body.ispforge-ui-v2-billing-professional-active .stage1061x-month-end-page .page-title-row::after{
  content: none !important;
  display: none !important;
}