/* Tracking commissions - design SaaS */
/* ────────────────────────────────────────────────────────────────────────────── */

.cm-paymentTrackingNotice{
  border:1px solid #dbeafe;
  border-radius:14px;
  background:linear-gradient(180deg,#f8fbff 0%, #ffffff 100%);
  padding:12px 14px;
  font-size:11px;
  line-height:1.5;
  color:var(--cm-text-soft);
}

.cm-paymentTrackingNotice strong{
  color:var(--cm-text);
}

.cm-paymentTrackingHeroCard{
  border:1px solid var(--cm-border);
  border-radius:20px;
  background:linear-gradient(180deg,#ffffff 0%, #f8fbff 100%);
  padding:16px;
  box-shadow:var(--cm-shadow-soft);
  display:flex;
  flex-direction:column;
  gap:14px;
}

.cm-paymentTrackingHeroTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}

.cm-paymentTrackingHeroEyebrow{
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#1d4ed8;
  margin-bottom:6px;
}

.cm-paymentTrackingHeroTitle{
  font-size:20px;
  font-weight:800;
  line-height:1.1;
  color:var(--cm-text);
}

.cm-paymentTrackingHeroText{
  margin-top:6px;
  font-size:12px;
  line-height:1.5;
  color:var(--cm-text-soft);
  max-width:680px;
}

.cm-paymentTrackingHeroKPIs{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  min-width:340px;
}

.cm-paymentTrackingHeroKPI{
  border:1px solid var(--cm-border);
  border-radius:16px;
  background:#fff;
  padding:12px;
}

.cm-paymentTrackingHeroKPI span{
  display:block;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--cm-text-soft);
  margin-bottom:6px;
}

.cm-paymentTrackingHeroKPI strong{
  display:block;
  font-size:18px;
  line-height:1.1;
  font-weight:800;
  color:var(--cm-text);
}

.cm-paymentTrendCard{
  border:1px solid var(--cm-border);
  border-radius:18px;
  background:#fff;
  padding:14px;
}

.cm-paymentTrendHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.cm-paymentTrendTitle{
  font-size:14px;
  font-weight:800;
  line-height:1.2;
  color:var(--cm-text);
}

.cm-paymentTrendSub{
  font-size:11px;
  line-height:1.45;
  color:var(--cm-text-soft);
}

.cm-paymentTrendBars{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:10px;
  align-items:end;
  min-height:210px;
}

.cm-paymentTrendBarCol{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  min-width:0;
}

.cm-paymentTrendBarValue{
  font-size:10px;
  line-height:1.3;
  color:var(--cm-text-soft);
  text-align:center;
  min-height:28px;
}

.cm-paymentTrendBarTrack{
  width:100%;
  height:120px;
  border-radius:14px;
  border:1px solid #dbeafe;
  background:linear-gradient(180deg,#f8fbff 0%, #eef4ff 100%);
  display:flex;
  align-items:flex-end;
  padding:6px;
}

.cm-paymentTrendBarFill{
  width:100%;
  border-radius:10px;
  background:linear-gradient(180deg,#3b82f6 0%, #1d4ed8 100%);
  box-shadow:0 10px 20px rgba(29,78,216,.18);
}

.cm-paymentTrendBarLabel{
  font-size:10px;
  font-weight:700;
  color:var(--cm-text-soft);
  text-transform:capitalize;
}

.cm-paymentTrackingStatsGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.cm-paymentTrackingStatCard{
  border:1px solid var(--cm-border);
  border-radius:18px;
  background:#fff;
  padding:14px;
  box-shadow:var(--cm-shadow-soft);
}

.cm-paymentTrackingStatCard.is-primary{
  background:linear-gradient(180deg,#f8fbff 0%, #ffffff 100%);
  border-color:#bfd4fb;
}

.cm-paymentTrackingStatCard span{
  display:block;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--cm-text-soft);
  margin-bottom:6px;
}

.cm-paymentTrackingStatCard strong{
  display:block;
  font-size:20px;
  line-height:1.1;
  font-weight:800;
  color:var(--cm-text);
  margin-bottom:6px;
}

.cm-paymentTrackingStatCard small{
  display:block;
  font-size:11px;
  line-height:1.45;
  color:var(--cm-text-soft);
}

.cm-paymentTrackingGrid{
  display:grid;
  gap:12px;
}

.cm-paymentTrackingGrid--2{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.cm-paymentTrackingPanel{
  border:1px solid var(--cm-border);
  border-radius:18px;
  background:#fff;
  padding:14px;
  box-shadow:var(--cm-shadow-soft);
}

.cm-paymentTrackingPanelHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.cm-paymentTrackingPanelTitle{
  font-size:14px;
  font-weight:800;
  line-height:1.2;
  color:var(--cm-text);
}

.cm-paymentTrackingPanelSub{
  font-size:11px;
  line-height:1.45;
  color:var(--cm-text-soft);
}

.cm-paymentTrackingBars{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.cm-paymentTrackingBarRow{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.cm-paymentTrackingBarTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.cm-paymentTrackingBarTop span{
  font-size:12px;
  font-weight:700;
  color:var(--cm-text);
}

.cm-paymentTrackingBarTop strong{
  font-size:12px;
  font-weight:800;
  color:#1d4ed8;
}

.cm-paymentTrackingBarTrack{
  position:relative;
  width:100%;
  height:10px;
  border-radius:999px;
  background:#edf3ff;
  overflow:hidden;
}

.cm-paymentTrackingBarFill{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#60a5fa 0%, #2563eb 100%);
}

.cm-paymentTrackingBarMeta{
  font-size:10px;
  line-height:1.4;
  color:var(--cm-text-soft);
}

.cm-paymentSourceGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.cm-paymentSourceCard{
  border:1px solid var(--cm-border);
  border-radius:18px;
  background:#fff;
  padding:14px;
  box-shadow:var(--cm-shadow-soft);
  display:flex;
  flex-direction:column;
  gap:6px;
}

.cm-paymentSourceCard strong{
  font-size:22px;
  line-height:1;
  font-weight:800;
  color:var(--cm-text);
}

.cm-paymentSourceCard span{
  font-size:11px;
  color:var(--cm-text-soft);
}

.cm-paymentSourceCard small{
  font-size:10px;
  line-height:1.5;
  color:var(--cm-text-soft);
}

.cm-paymentSourceBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  padding:5px 9px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  border:1px solid var(--cm-border);
  background:#f8fbff;
  color:var(--cm-text);
}

.cm-paymentSourceBadge.is-real{
  background:#ecfdf3;
  color:#15803d;
  border-color:#bbf7d0;
}

.cm-paymentSourceBadge.is-store{
  background:#eff6ff;
  color:#1d4ed8;
  border-color:#bfdbfe;
}

.cm-paymentSourceBadge.is-demo{
  background:#fff7ed;
  color:#c2410c;
  border-color:#fed7aa;
}

.cm-paymentTrackingTableWrap{
  width:100%;
  overflow:auto;
  border:1px solid var(--cm-border);
  border-radius:16px;
}

.cm-paymentTrackingTable{
  width:100%;
  min-width:980px;
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
}

.cm-paymentTrackingTable thead th{
  position:sticky;
  top:0;
  z-index:1;
  background:#f8fbff;
  border-bottom:1px solid var(--cm-border);
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--cm-text-soft);
  text-align:left;
  padding:12px 14px;
}

.cm-paymentTrackingTable tbody td{
  padding:13px 14px;
  border-bottom:1px solid #eef2f7;
  font-size:12px;
  line-height:1.45;
  color:var(--cm-text);
  vertical-align:middle;
  background:#fff;
}

.cm-paymentTrackingTable tbody tr:hover td{
  background:#fbfdff;
}

.cm-paymentTrackingCellMain{
  font-size:12px;
  font-weight:800;
  color:var(--cm-text);
}

.cm-paymentTrackingCellSub{
  margin-top:2px;
  font-size:10px;
  line-height:1.35;
  color:var(--cm-text-soft);
}

/* ────────────────────────────────────────────────────────────────────────────── */