/* ------------------------------------------------------------------ *
 *  Estilos próprios do APP CENTRAL.
 *  A identidade (azul-marinho na lateral + cyan de destaque) é a
 *  mesma nos dois temas; o dark-mode.css só mexe nas superfícies do
 *  conteúdo. Este arquivo cuida do que NÃO deve mudar entre temas.
 * ------------------------------------------------------------------ */

:root {
  --sidebar-w: 256px;
}

body {
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
}

/* ---------------- Menu lateral (fixo nos dois temas) --------------- */
.sidebar {
  background-image: linear-gradient(135deg, #1e3a8a 0%, #164e63 100%);
  border-right: 1px solid rgba(14, 116, 144, 0.5); /* cyan-700 / 50% */
  width: var(--sidebar-w);
}
.sidebar-title {
  color: #ffffff;
}
.sidebar-section {
  color: #22d3ee; /* cyan-400 */
  letter-spacing: 0.08em;
}
.sidebar-link {
  color: #cbd5e1; /* slate-300 */
  transition: background-color 0.15s ease, color 0.15s ease;
}
.sidebar-link:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.06);
}
.sidebar-link.is-active {
  background-color: rgba(14, 116, 144, 0.3); /* cyan-700 / 30% */
  color: #ffffff;
}
.sidebar-link.is-active-primary {
  background-color: rgba(6, 182, 212, 0.15); /* cyan-500 / 15% */
  color: #22d3ee; /* cyan-400 */
}
.sidebar-link.is-active .sidebar-ico,
.sidebar-link.is-active-primary .sidebar-ico {
  opacity: 1;
}
.sidebar-ico {
  opacity: 0.75;
}

/* ---------------- Botões de destaque (cores vivas fixas) ---------- */
.btn-primary {
  background-image: linear-gradient(to right, #0891b2, #2563eb); /* cyan-600 -> blue-600 */
  color: #fff;
}
.btn-primary:hover {
  filter: brightness(1.06);
}

/* ---------------- KPI cards: borda de hover por card -------------- */
.kpi-card {
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -12px rgba(2, 6, 23, 0.25);
}

/* ---------------- Modal --------------------------------------------- */
.modal-overlay {
  background: rgba(2, 6, 23, 0.55);
}

/* ---------------- Scrollbar discreta ------------------------------- */
* {
  scrollbar-width: thin;
}