:root{
  --blue-1:#0ea5e9;
  --blue-2:#38bdf8;
  --bg-1:#0b1020;
  --bg-2:#141a2a;
  --text-1:#e5e7eb;
  --text-2:#9ca3af;
  --card:#101727;
  --border:#1f2a44;
}

html, body {
  background: radial-gradient(1000px 500px at 20% 0%, #0b1220 0%, #0b0f1a 40%, #0a0c16 100%) fixed;
  color: var(--text-1);
}

.bg-gradient-blue{
  background: linear-gradient(90deg, var(--bg-2), #0b1627 60%, #09243a);
  border-bottom: 1px solid var(--border);
}

.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
}

.kpi-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1rem 1.25rem;
  height: 100%;
}

.kpi-label{
  font-size: .9rem;
  color: var(--text-2);
}

.kpi-value{
  font-size: 1.8rem;
  font-weight: 700;
}

.kpi-sub{
  font-size: .85rem;
  color: var(--text-2);
}

.badge-mg-good {
  background: rgba(14, 165, 233, .15);
  color: #86efac;
  border: 1px solid rgba(134, 239, 172, .25);
}

.badge-mg-warn {
  background: rgba(250, 204, 21, .12);
  color: #fde68a;
  border: 1px solid rgba(253, 230, 138, .25);
}

.badge-mg-bad {
  background: rgba(244, 63, 94, .12);
  color: #fca5a5;
  border: 1px solid rgba(252, 165, 165, .25);
}

.help-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: .4rem;
  flex: 0 0 auto;
  font-size: .75rem;
  line-height: 1;
  color: #9db0bf;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  cursor: help;
}
.help-icon:hover{ color: #fff; border-color: #fff; }

.gp-table thead .gp-group th{
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-2);
  font-weight: 600;
  border-bottom: none;
  padding-bottom: .15rem;
}

.gp-table th, .gp-table td{ white-space: nowrap; }

.gp-table .gp-sep{ border-left: 1px solid var(--border); }

.gp-sub{
  font-size: .75rem;
  color: var(--text-2);
  font-weight: 400;
  white-space: normal;
}

.gp-est{
  display: inline-block;
  margin-left: .35rem;
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #fde68a;
  border: 1px solid rgba(253, 230, 138, .3);
  border-radius: .35rem;
  padding: 0 .3rem;
  cursor: help;
}

.gp-neg{ color: #fca5a5; }

.gp-table tfoot .gp-total td{
  border-top: 2px solid var(--border);
  background: rgba(14, 165, 233, .06);
}

.gp-row-toggle{ cursor: pointer; }
.gp-row-toggle:hover td{ background: rgba(14, 165, 233, .07); }
.gp-detail > td{ padding: 0 0 0 1.5rem; background: rgba(0, 0, 0, .25); }

.gp-commission td{ box-shadow: inset 3px 0 0 var(--blue-1); }

.gp-unassigned td{ color: var(--text-2); }