/* -------------------------------------------------------------------
   Stage 105.2F CLEAN — Customer 360 Billing / Statistics Tabs Polish
   Frontend-only styling layer for confirmed tabbed Customer 360 shell.
   Scope is limited to Billing and Statistics tab internals.
   No routes, API calls, popup behaviour, save logic, app.js, backend,
   database, billing runtime, SageOne runtime, RADIUS, prepaid, products,
   Asset Register backend, Job Cards, Calendar, Android, workers, or
   protected-module logic changes.
------------------------------------------------------------------- */

:root{
  --stage1052f-gap: 14px;
  --stage1052f-card-radius: 15px;
  --stage1052f-line: rgba(148,163,184,.18);
  --stage1052f-surface: rgba(255,255,255,.78);
  --stage1052f-soft: rgba(248,250,252,.78);
  --stage1052f-soft-2: rgba(241,245,249,.74);
  --stage1052f-text: #0f172a;
  --stage1052f-muted: #64748b;
  --stage1052f-blue: #2563eb;
  --stage1052f-green: #0f766e;
  --stage1052f-shadow: 0 12px 26px rgba(15,23,42,.055);
}

html[data-theme="dark"], body.dark, body.theme-dark{
  --stage1052f-line: rgba(148,163,184,.24);
  --stage1052f-surface: rgba(15,23,42,.68);
  --stage1052f-soft: rgba(30,41,59,.62);
  --stage1052f-soft-2: rgba(15,23,42,.50);
  --stage1052f-text: #e5edf8;
  --stage1052f-muted: #9fb0c5;
  --stage1052f-blue: #60a5fa;
  --stage1052f-green: #5eead4;
  --stage1052f-shadow: 0 12px 26px rgba(0,0,0,.22);
}

.stage1052c-tabbed-profile.stage1052f-billing-statistics-ready [data-stage1052c-panel="billing"] .stage1052c-panel-grid,
.stage1052c-tabbed-profile.stage1052f-billing-statistics-ready [data-stage1052c-panel="statistics"] .stage1052c-panel-grid{
  grid-template-columns: repeat(12, minmax(0,1fr)) !important;
  gap: var(--stage1052f-gap) !important;
  align-items: start !important;
}

.stage1052c-tabbed-profile.stage1052f-billing-statistics-ready [data-stage1052c-panel="billing"] .stage822-card,
.stage1052c-tabbed-profile.stage1052f-billing-statistics-ready [data-stage1052c-panel="statistics"] .stage822-card{
  border-radius: var(--stage1052f-card-radius) !important;
  box-shadow: var(--stage1052f-shadow) !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.stage1052c-tabbed-profile.stage1052f-billing-statistics-ready [data-stage1052c-panel="billing"] .stage822-card-head,
.stage1052c-tabbed-profile.stage1052f-billing-statistics-ready [data-stage1052c-panel="statistics"] .stage822-card-head{
  min-height: 48px !important;
  padding: 12px 14px !important;
  gap: 10px !important;
}

.stage1052c-tabbed-profile.stage1052f-billing-statistics-ready [data-stage1052c-panel="billing"] .stage822-card-body,
.stage1052c-tabbed-profile.stage1052f-billing-statistics-ready [data-stage1052c-panel="statistics"] .stage822-card-body{
  padding: 12px 14px !important;
  max-height: none !important;
  overflow-x: auto !important;
}

/* Billing tab: make table-heavy finance areas wide enough to read. */
.stage1052c-tabbed-profile.stage1052f-billing-statistics-ready [data-stage1052c-panel="billing"] .stage822-card{
  grid-column: span 6 !important;
}

.stage1052c-tabbed-profile.stage1052f-billing-statistics-ready [data-stage1052c-panel="billing"] .stage822-card[data-stage1052f-title="billing details"],
.stage1052c-tabbed-profile.stage1052f-billing-statistics-ready [data-stage1052c-panel="billing"] .stage822-card[data-stage1052f-title="recurring billing"]{
  grid-column: 1 / -1 !important;
}

.stage1052c-tabbed-profile.stage1052f-billing-statistics-ready [data-stage1052c-panel="billing"] .stage822-card[data-stage1052f-title="age analysis"],
.stage1052c-tabbed-profile.stage1052f-billing-statistics-ready [data-stage1052c-panel="billing"] .stage822-card[data-stage1052f-title="payment receipts"],
.stage1052c-tabbed-profile.stage1052f-billing-statistics-ready [data-stage1052c-panel="billing"] .stage822-card[data-stage1052f-title="debtor notes"],
.stage1052c-tabbed-profile.stage1052f-billing-statistics-ready [data-stage1052c-panel="billing"] .stage822-card[data-stage1052f-title="suspension details"]{
  grid-column: span 6 !important;
}

.stage1052c-tabbed-profile.stage1052f-billing-statistics-ready [data-stage1052c-panel="billing"] table{
  width: 100% !important;
  min-width: 620px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.stage1052c-tabbed-profile.stage1052f-billing-statistics-ready [data-stage1052c-panel="billing"] .stage822-card[data-stage1052f-title="billing details"] table,
.stage1052c-tabbed-profile.stage1052f-billing-statistics-ready [data-stage1052c-panel="billing"] .stage822-card[data-stage1052f-title="suspension details"] table{
  min-width: 0 !important;
}

.stage1052c-tabbed-profile.stage1052f-billing-statistics-ready [data-stage1052c-panel="billing"] .stage822-info-table th,
.stage1052c-tabbed-profile.stage1052f-billing-statistics-ready [data-stage1052c-panel="billing"] .stage822-info-table td{
  padding: 8px 10px !important;
  border-bottom: 1px solid var(--stage1052f-line) !important;
  vertical-align: top !important;
}

.stage1052c-tabbed-profile.stage1052f-billing-statistics-ready [data-stage1052c-panel="billing"] .stage822-info-table th{
  width: 34% !important;
  max-width: 320px !important;
  background: rgba(248,250,252,.66) !important;
  color: #334155 !important;
  letter-spacing: .055em !important;
}

.stage1052c-tabbed-profile.stage1052f-billing-statistics-ready [data-stage1052c-panel="billing"] .stage822-info-table td{
  background: rgba(255,255,255,.55) !important;
  color: var(--stage1052f-text) !important;
  font-weight: 750 !important;
}

html[data-theme="dark"] .stage1052c-tabbed-profile.stage1052f-billing-statistics-ready [data-stage1052c-panel="billing"] .stage822-info-table th,
body.dark .stage1052c-tabbed-profile.stage1052f-billing-statistics-ready [data-stage1052c-panel="billing"] .stage822-info-table th,
body.theme-dark .stage1052c-tabbed-profile.stage1052f-billing-statistics-ready [data-stage1052c-panel="billing"] .stage822-info-table th{
  color: #cbd5e1 !important;
  background: rgba(30,41,59,.58) !important;
}

html[data-theme="dark"] .stage1052c-tabbed-profile.stage1052f-billing-statistics-ready [data-stage1052c-panel="billing"] .stage822-info-table td,
body.dark .stage1052c-tabbed-profile.stage1052f-billing-statistics-ready [data-stage1052c-panel="billing"] .stage822-info-table td,
body.theme-dark .stage1052c-tabbed-profile.stage1052f-billing-statistics-ready [data-stage1052c-panel="billing"] .stage822-info-table td{
  background: rgba(15,23,42,.34) !important;
}

.stage1052c-tabbed-profile.stage1052f-billing-statistics-ready [data-stage1052c-panel="billing"] .stage822-card[data-stage1052f-title="age analysis"] .stage822-card-body,
.stage1052c-tabbed-profile.stage1052f-billing-statistics-ready [data-stage1052c-panel="billing"] .stage822-card[data-stage1052f-title="payment receipts"] .stage822-card-body,
.stage1052c-tabbed-profile.stage1052f-billing-statistics-ready [data-stage1052c-panel="billing"] .stage822-card[data-stage1052f-title="debtor notes"] .stage822-card-body{
  min-height: 118px !important;
}

/* Statistics tab: keep usage/topup widgets balanced and readable. */
.stage1052c-tabbed-profile.stage1052f-billing-statistics-ready [data-stage1052c-panel="statistics"] .stage822-card{
  grid-column: span 6 !important;
}

.stage1052c-tabbed-profile.stage1052f-billing-statistics-ready [data-stage1052c-panel="statistics"] .stage822-card[data-stage1052f-title="data usage"]{
  grid-column: span 6 !important;
}

.stage1052c-tabbed-profile.stage1052f-billing-statistics-ready [data-stage1052c-panel="statistics"] .stage822-card-body{
  min-height: 104px !important;
}

.stage1052c-tabbed-profile.stage1052f-billing-statistics-ready [data-stage1052c-panel="statistics"] .stage822-empty,
.stage1052c-tabbed-profile.stage1052f-billing-statistics-ready [data-stage1052c-panel="statistics"] .stage822-empty-box,
.stage1052c-tabbed-profile.stage1052f-billing-statistics-ready [data-stage1052c-panel="billing"] .stage822-empty,
.stage1052c-tabbed-profile.stage1052f-billing-statistics-ready [data-stage1052c-panel="billing"] .stage822-empty-box{
  border-radius: 12px !important;
  background: var(--stage1052f-soft) !important;
  border-color: var(--stage1052f-line) !important;
  min-height: 72px !important;
}

.stage1052c-tabbed-profile.stage1052f-billing-statistics-ready [data-stage1052c-panel="billing"] .stage822-card-head button,
.stage1052c-tabbed-profile.stage1052f-billing-statistics-ready [data-stage1052c-panel="statistics"] .stage822-card-head button,
.stage1052c-tabbed-profile.stage1052f-billing-statistics-ready [data-stage1052c-panel="billing"] .btn,
.stage1052c-tabbed-profile.stage1052f-billing-statistics-ready [data-stage1052c-panel="statistics"] .btn{
  max-width: 100% !important;
  white-space: nowrap !important;
}

/* Laptop / half-screen: avoid two-column clipping before it happens. */
@media(max-width: 1280px){
  .stage1052c-tabbed-profile.stage1052f-billing-statistics-ready [data-stage1052c-panel="billing"] .stage822-card,
  .stage1052c-tabbed-profile.stage1052f-billing-statistics-ready [data-stage1052c-panel="statistics"] .stage822-card{
    grid-column: 1 / -1 !important;
  }
}

@media(max-width: 860px){
  .stage1052c-tabbed-profile.stage1052f-billing-statistics-ready [data-stage1052c-panel="billing"] .stage822-info-table,
  .stage1052c-tabbed-profile.stage1052f-billing-statistics-ready [data-stage1052c-panel="billing"] .stage822-info-table tbody,
  .stage1052c-tabbed-profile.stage1052f-billing-statistics-ready [data-stage1052c-panel="billing"] .stage822-info-table tr,
  .stage1052c-tabbed-profile.stage1052f-billing-statistics-ready [data-stage1052c-panel="billing"] .stage822-info-table th,
  .stage1052c-tabbed-profile.stage1052f-billing-statistics-ready [data-stage1052c-panel="billing"] .stage822-info-table td{
    display: block !important;
    width: 100% !important;
    max-width: none !important;
  }
  .stage1052c-tabbed-profile.stage1052f-billing-statistics-ready [data-stage1052c-panel="billing"] .stage822-info-table tr{
    border-bottom: 1px solid var(--stage1052f-line) !important;
    padding: 7px 0 !important;
  }
  .stage1052c-tabbed-profile.stage1052f-billing-statistics-ready [data-stage1052c-panel="billing"] .stage822-info-table th,
  .stage1052c-tabbed-profile.stage1052f-billing-statistics-ready [data-stage1052c-panel="billing"] .stage822-info-table td{
    border-bottom: 0 !important;
    padding: 3px 8px !important;
    background: transparent !important;
  }
  .stage1052c-tabbed-profile.stage1052f-billing-statistics-ready [data-stage1052c-panel="billing"] .stage822-info-table th{
    color: var(--stage1052f-muted) !important;
  }
}

@media(max-width: 640px){
  .stage1052c-tabbed-profile.stage1052f-billing-statistics-ready [data-stage1052c-panel="billing"] .stage822-card-head,
  .stage1052c-tabbed-profile.stage1052f-billing-statistics-ready [data-stage1052c-panel="statistics"] .stage822-card-head{
    align-items: flex-start !important;
    gap: 8px !important;
  }
}