/*
  Apex Billion-Dollar Polish Pass
  Scope: icon system, container rhythm, calmer typography, and premium desktop tables.
  This file intentionally reuses the existing Apex variables only; theme + colors stay unchanged.
*/

:root {
  --ag-font-display: 690;
  --ag-font-strong: 640;
  --ag-font-medium: 520;
  --ag-font-regular: 420;
  --ag-text-xs: 11px;
  --ag-text-sm: 12px;
  --ag-text-md: 14px;
  --ag-text-lg: 16px;
  --ag-text-xl: 20px;
  --ag-text-2xl: 28px;
  --ag-text-3xl: 36px;
  --ag-text-4xl: 44px;
  --ag-icon-stroke: 1.75;
  --ag-row-h: 66px;
  --ag-th-h: 48px;
}

/* ══════════════════════════════════════
   1) Elite local SVG icon system
══════════════════════════════════════ */
.ui-icon,
.nav-svg,
.method-svg,
.utility-svg {
  width: 18px;
  height: 18px;
  display: block;
  color: currentColor;
  stroke-width: var(--ag-icon-stroke);
  flex: 0 0 auto;
}

.nav-svg { width: 19px; height: 19px; stroke-width: 1.8; }
.method-svg { width: 22px; height: 22px; stroke-width: 1.65; }
.utility-svg { width: 20px; height: 20px; stroke-width: 1.75; }

.nav-item .nav-icon {
  font-size: 0 !important;
  font-family: var(--apex-sans) !important;
  color: var(--apex-ink-soft) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
}
.nav-item .nav-icon::before { content: none !important; display: none !important; }
.nav-item.active .nav-icon {
  color: var(--apex-brand-strong) !important;
  background: var(--apex-brand-soft) !important;
  border-color: color-mix(in srgb, var(--apex-brand) 20%, transparent) !important;
  border-radius: 13px !important;
}

.method-icon,
.upload-icon,
.success-icon,
.empty-icon,
.risk-lock-icon,
.pb-lock-icon{
  font-size: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  line-height: 1 !important;
}
.method-icon,
.risk-lock-icon,
.pb-lock-icon{
  width: 38px !important;
  height: 38px !important;
  border-radius: 14px !important;
  background: var(--apex-brand-soft) !important;
  color: var(--apex-brand-strong) !important;
  border: 1px solid color-mix(in srgb, var(--apex-brand) 18%, transparent) !important;
}
.method-icon.jazzcash { color: var(--apex-danger) !important; background: var(--apex-danger-soft) !important; }
.method-icon.binance { color: var(--apex-gold) !important; background: var(--apex-gold-soft) !important; }
.method-icon.crypto { color: var(--apex-info) !important; background: var(--apex-info-soft) !important; }
.upload-icon,
.success-icon,
.empty-icon {
  margin-inline: auto;
  color: var(--apex-brand-strong) !important;
}
.success-icon { color: var(--apex-success) !important; }

/* ══════════════════════════════════════
   2) More visual rhythm: hero, metrics, data panels, strips, segments
══════════════════════════════════════ */
#panel-payments .hero,
#panel-monitor .guardian-monitor-stat-card.fill-danger,
#panel-monitor .guardian-monitor-stat-card.fill-positive{
  border-radius: 28px !important;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--apex-brand) 20%, transparent), transparent 38%),
    linear-gradient(135deg, color-mix(in srgb, var(--apex-surface) 94%, var(--apex-brand-soft)), var(--apex-surface-soft)) !important;
  border: 1px solid color-mix(in srgb, var(--apex-brand) 19%, var(--apex-line)) !important;
  box-shadow: var(--apex-shadow-lg) !important;
}
html[data-theme="dark"] #panel-payments .hero,
html[data-theme="dark"] #panel-monitor .guardian-monitor-stat-card.fill-danger,
html[data-theme="dark"] #panel-monitor .guardian-monitor-stat-card.fill-positive{
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--apex-brand) 20%, transparent), transparent 40%),
    linear-gradient(135deg, color-mix(in srgb, var(--apex-surface) 90%, #000), var(--apex-surface-soft)) !important;
}

.overview-metric-card{
  border-radius: 22px !important;
  border: 1px solid color-mix(in srgb, var(--apex-line) 86%, transparent) !important;
  box-shadow: 0 14px 34px color-mix(in srgb, #000 8%, transparent) !important;
}

.overview-metric-card:nth-child(1),
.overview-metric-card:nth-child(2){
  background:
    radial-gradient(circle at 92% 18%, color-mix(in srgb, var(--apex-brand) 16%, transparent), transparent 34%),
    var(--apex-surface) !important;
  border-color: color-mix(in srgb, var(--apex-brand) 22%, var(--apex-line)) !important;
}

.card,
#panel-monitor .guardian-monitor-section{
  border-radius: 24px !important;
  background: color-mix(in srgb, var(--apex-surface) 90%, transparent) !important;
  border: 1px solid var(--apex-line) !important;
  box-shadow: 0 16px 44px color-mix(in srgb, #000 9%, transparent) !important;
}

.alert-banner{
  border-radius: 18px !important;
  border: 1px solid color-mix(in srgb, var(--apex-brand) 17%, var(--apex-line)) !important;
  background: color-mix(in srgb, var(--apex-brand-soft) 72%, transparent) !important;
}

.table-wrap{
  border-radius: 22px !important;
}

/* ══════════════════════════════════════
   3) Calmer typography: one loud element per block
══════════════════════════════════════ */
.page-title,
.topbar-title,
.card-title,
.section-heading,
.guardian-monitor-section-title{
  font-weight: var(--ag-font-strong) !important;
  letter-spacing: -.018em !important;
}

.topbar-title,
.card-title { font-size: var(--ag-text-lg) !important; }

.ov-label,
.guardian-monitor-stat-label,
th{
  font-size: var(--ag-text-xs) !important;
  font-weight: 650 !important;
  letter-spacing: .075em !important;
  text-transform: uppercase !important;
  color: var(--apex-muted) !important;
}

.ov-value,
.days-num,
.money-value,
.percent-value,
.numeric-value{
  font-weight: 680 !important;
  letter-spacing: -.052em !important;
  line-height: .98 !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" 1, "lnum" 1 !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

.ov-meta,
.card-subtitle,
.secondary-cell,
.tertiary-cell{
  font-weight: var(--ag-font-regular) !important;
  color: var(--apex-muted) !important;
  line-height: 1.45 !important;
}

.badge{
  font-weight: 640 !important;
}

/* ══════════════════════════════════════
   4) Premium financial table system
══════════════════════════════════════ */
.table-wrap{
  border-radius: 24px !important;
  overflow: hidden !important;
  background: color-mix(in srgb, var(--apex-surface) 86%, transparent) !important;
  border: 1px solid var(--apex-line) !important;
  box-shadow: 0 16px 44px color-mix(in srgb, #000 8%, transparent) !important;
}

.table-wrap table{
  width: 100% !important;
  min-width: 760px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  font-size: 14px !important;
}

.table-wrap table thead th{
  height: var(--ag-th-h) !important;
  padding: 0 18px !important;
  text-align: left !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--apex-muted) !important;
  background: color-mix(in srgb, var(--apex-surface-muted) 72%, transparent) !important;
  border-bottom: 1px solid var(--apex-line) !important;
}

.table-wrap table tbody td{
  height: var(--ag-row-h) !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid color-mix(in srgb, var(--apex-line) 75%, transparent) !important;
  color: var(--apex-ink-soft) !important;
  vertical-align: middle !important;
}
.table-wrap table tbody tr:last-child td{ border-bottom: 0 !important; }
.table-wrap table tbody tr:hover{ background: color-mix(in srgb, var(--apex-brand-soft) 42%, transparent) !important; }

.numeric,
.table-wrap .numeric{
  text-align: right !important;
  font-variant-numeric: tabular-nums !important;
}

.primary-cell {
  display: block;
  font-weight: 650 !important;
  color: var(--apex-ink) !important;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.secondary-cell {
  display: block;
  margin-top: 4px;
  font-size: 12px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: normal;
}
.tertiary-cell {
  display: block;
  margin-top: 4px;
  font-size: 11px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  opacity: .9;
}
.premium-cell-stack { min-width: 0; }
.premium-pnl-cell { justify-content: flex-end; gap: 10px; }
.premium-switch-row { justify-content: flex-start; gap: 10px; }
.premium-actions { justify-content: flex-start; }

.badge-green,
.badge-red{
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 26px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
}
.positive { color: var(--apex-success) !important; }
.negative { color: var(--apex-danger) !important; }

/* Desktop column sizing: fewer columns, stronger grouping. */

/* Toolbars are toolbars, not more cards. */

/* ══════════════════════════════════════
   Mobile: preserve v9 fixes while new table grouping remains usable
══════════════════════════════════════ */
@media (max-width: 900px) {
  .nav-svg { width: 20px; height: 20px; }

  #panel-payments .hero{ border-radius: 22px !important; }

  .table-wrap{
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  

  

  

  .primary-cell,
  .money-value,
  .numeric-value {
    white-space: nowrap !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }
}

/* Final fit guards after screenshot QA. */
.overview-metric-card:nth-child(1) .ov-value,
.overview-metric-card:nth-child(2) .ov-value {
  font-size: clamp(30px, 2.8vw, 42px) !important;
}