/* ─── Typography ──────────────────────────────────────────── */
/* Inter carregado via <link> no HTML */
body { font-family: 'Inter', system-ui, sans-serif; }

/* Números tabulares alinhados por dígito + zero barrado */
.nums {
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: "tnum", "ss01";
}

/* ─── KPI cards — barra lateral colorida ─────────────────── */
.kpi-bar-positive { border-left-color: #10b981 !important; }
.kpi-bar-negative { border-left-color: #ef4444 !important; }
.kpi-bar-warning  { border-left-color: #f59e0b !important; }
.kpi-bar-neutral  { border-left-color: #3b82f6 !important; }

.kpi-value-positive { color: #059669; }
.kpi-value-negative { color: #dc2626; }
.kpi-value-warning  { color: #d97706; }

/* ─── Pills de margem % em tabelas ───────────────────────── */
.pill {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pill-green  { background: #d1fae5; color: #065f46; }
.pill-yellow { background: #fef3c7; color: #92400e; }
.pill-red    { background: #fee2e2; color: #991b1b; }

/* ─── Linhas pendentes em tabelas ────────────────────────── */
tr.row-pendente { background: #fffbeb !important; }
tr.row-pendente > td:first-child { box-shadow: inset 3px 0 0 #f59e0b; }

/* ─── Bling status dot ───────────────────────────────────── */
.dot-bling {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  transition: background 0.3s;
}
.dot-bling.online  { background: #10b981; animation: dot-pulse 2s ease-in-out infinite; }
.dot-bling.offline { background: #475569; }
.dot-bling.warning { background: #f59e0b; animation: dot-pulse 1s ease-in-out infinite; }

@keyframes dot-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.25; }
}

/* ─── Drawer (mobile) ────────────────────────────────────── */
#drawer { transition: transform 0.2s ease; }

/* ─── Desktop sidebar ────────────────────────────────────── */
#sidebar {
  width: 14rem;
  transition: width 0.2s ease;
}
body.sidebar-collapsed #sidebar {
  width: 3.5rem;
}

/* Labels that hide when collapsed */
.sidebar-label {
  overflow: hidden;
  max-width: 10rem;
  white-space: nowrap;
  transition: max-width 0.2s ease, opacity 0.15s ease;
  opacity: 1;
}
body.sidebar-collapsed .sidebar-label {
  max-width: 0;
  opacity: 0;
}

/* Nav links: center icons when collapsed */
#sidebar .nav-link {
  transition: gap 0.2s ease;
}
body.sidebar-collapsed #sidebar .nav-link {
  justify-content: center;
  gap: 0;
}

/* Toggle icon rotates when collapsed */
body.sidebar-collapsed #sidebar-toggle-icon {
  transform: rotate(180deg);
}

/* Page wrapper offset from sidebar on desktop */
#page-wrapper {
  transition: margin-left 0.2s ease;
}
@media (min-width: 1024px) {
  #page-wrapper { margin-left: 14rem; }
  body.sidebar-collapsed #page-wrapper { margin-left: 3.5rem; }
}

/* ─── Focus ring consistente ─────────────────────────────── */
input:focus, select:focus, textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2);
  border-color: #dc2626 !important;
}