:root {
  --mmp-bg: #F4F5F8;
  --mmp-surface: #FFFFFF;
  --mmp-border: #E6E8EF;
  --mmp-sidebar: #0D1B33;
  --mmp-sidebar-hover: #16294A;
  --mmp-text: #10141F;
  --mmp-text-muted: #6B7280;
  --mmp-primary: #2F5DFB;
  --mmp-primary-dark: #1E42C7;
  --mmp-positive: #12875A;
  --mmp-warning: #B7791F;
  --mmp-danger: #D6423C;
}

* { box-sizing: border-box; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--mmp-bg);
  color: var(--mmp-text);
  -webkit-font-smoothing: antialiased;
}

.tabular { font-variant-numeric: tabular-nums; }

/* ---------- Sidebar ---------- */
.mmp-sidebar {
  width: 240px;
  background: var(--mmp-sidebar);
  color: #C7D0E0;
}

.mmp-sidebar .brand-mark {
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.mmp-sidebar a.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 13.5px;
  color: #A9B4CC;
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: background 0.12s ease, color 0.12s ease;
}

.mmp-sidebar a.nav-item:hover {
  background: var(--mmp-sidebar-hover);
  color: #fff;
}

.mmp-sidebar a.nav-item.active {
  background: rgba(47, 93, 251, 0.16);
  color: #fff;
  border-left-color: var(--mmp-primary);
  font-weight: 600;
}

/* ---------- Live pulse (assinatura visual: eco do "command-center LIVE" do site MMP) ---------- */
.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--mmp-positive);
  position: relative;
  display: inline-block;
}
.live-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  background: var(--mmp-positive);
  opacity: 0.35;
  animation: mmp-pulse 1.8s ease-out infinite;
}
@keyframes mmp-pulse {
  0% { transform: scale(0.6); opacity: 0.5; }
  100% { transform: scale(2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .live-dot::after { animation: none; }
}

/* ---------- Cards ---------- */
.mmp-card {
  background: var(--mmp-surface);
  border: 1px solid var(--mmp-border);
  border-radius: 10px;
}

.kpi-card {
  background: var(--mmp-surface);
  border: 1px solid var(--mmp-border);
  border-left: 3px solid var(--mmp-border);
  border-radius: 10px;
  padding: 16px 18px;
}
.kpi-card.trend-up { border-left-color: var(--mmp-positive); }
.kpi-card.trend-down { border-left-color: var(--mmp-danger); }

.kpi-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mmp-text-muted);
}

.kpi-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--mmp-text);
  margin-top: 4px;
}

.kpi-delta {
  font-size: 12.5px;
  font-weight: 600;
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.kpi-delta.up { color: var(--mmp-positive); }
.kpi-delta.down { color: var(--mmp-danger); }
.kpi-delta.flat { color: var(--mmp-text-muted); }

/* ---------- Badges de status ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
}
.badge-green { background: #E7F6EE; color: var(--mmp-positive); }
.badge-amber { background: #FBF1DF; color: var(--mmp-warning); }
.badge-red   { background: #FBE9E8; color: var(--mmp-danger); }
.badge-gray  { background: #EEF0F4; color: var(--mmp-text-muted); }
.badge-blue  { background: #E9EEFF; color: var(--mmp-primary-dark); }

/* ---------- Tabelas ---------- */
.mmp-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.mmp-table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mmp-text-muted);
  font-weight: 600;
  padding: 10px 14px;
  border-bottom: 1px solid var(--mmp-border);
}
.mmp-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--mmp-border);
  color: var(--mmp-text);
}
.mmp-table tbody tr:hover { background: #FAFBFD; }

/* ---------- Botões ---------- */
.btn-primary {
  background: var(--mmp-primary);
  color: #fff;
  font-weight: 600;
  font-size: 13.5px;
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: background 0.12s ease;
}
.btn-primary:hover { background: var(--mmp-primary-dark); }

.btn-ghost {
  background: transparent;
  border: 1px solid var(--mmp-border);
  color: var(--mmp-text);
  font-weight: 500;
  font-size: 13.5px;
  padding: 7px 14px;
  border-radius: 8px;
  cursor: pointer;
}
.btn-ghost:hover { background: #F3F4F7; }