/* Custom styles complementing Tailwind */

body { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }

.kpi {
  display: flex; gap: 1rem; align-items: center;
  background: #11182c;
  border: 1px solid #1f2a48;
  border-radius: 0.75rem;
  padding: 1rem 1.1rem;
}
.kpi-icon {
  width: 42px; height: 42px; border-radius: 10px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.kpi-icon svg { width: 20px; height: 20px; }
.kpi-label { font-size: 0.75rem; color: #8b93a7; text-transform: uppercase; letter-spacing: 0.04em; }
.kpi-value { font-size: 1.6rem; font-weight: 600; line-height: 1.1; margin-top: 2px; }
.kpi-sub { font-size: 0.72rem; color: #8b93a7; margin-top: 4px; }

.card {
  background: #11182c;
  border: 1px solid #1f2a48;
  border-radius: 0.75rem;
}
.card-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid #1f2a48;
}
.card-title { font-weight: 600; }
.card-sub { font-size: 0.72rem; color: #8b93a7; margin-top: 2px; }

/* Tabela */
tbody tr:hover { background: rgba(59, 130, 246, 0.06); }
tbody td { padding: 0.55rem 1rem; }

/* Status pill */
.pill {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 2px 8px; border-radius: 999px; font-size: 0.72rem;
  border: 1px solid transparent;
}
.pill-active   { background: rgba(34,197,94,.12); color: #4ade80; border-color: rgba(34,197,94,.25); }
.pill-starting { background: rgba(245,158,11,.12); color: #fbbf24; border-color: rgba(245,158,11,.25); }
.pill-stopping { background: rgba(239,68,68,.12);  color: #f87171; border-color: rgba(239,68,68,.25); }

/* Pulse */
#pulse { box-shadow: 0 0 0 0 rgba(34,197,94,.7); animation: pulse 1.8s infinite; }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,.6); }
  70%  { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

/* Scrollbar (webkit) */
::-webkit-scrollbar { height: 10px; width: 10px; }
::-webkit-scrollbar-thumb { background: #1f2a48; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #2b3a63; }
::-webkit-scrollbar-track { background: transparent; }