/* ── Estilos globais ──────────────────────────────────────────────────────── */
body {
  background-color: #0f0f14;
  font-family: 'Inter', sans-serif;
  color: #e2e8f0;
}

/* Scrollbar personalizada */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #16161f; }
::-webkit-scrollbar-thumb { background: #353552; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #4f46e5; }

/* ── Glassmorphism ───────────────────────────────────────────────────────── */
.glass-card {
  background: rgba(22, 22, 31, 0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(99, 102, 241, 0.15);
}

/* ── Fundo do ecrã de login ──────────────────────────────────────────────── */
.login-bg {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(99, 102, 241, 0.15) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
    #0f0f14;
}

/* ── Inputs ──────────────────────────────────────────────────────────────── */
.crm-input {
  width: 100%;
  background: rgba(35, 35, 51, 0.8);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 0.5rem;
  padding: 0.625rem 0.875rem;
  color: #e2e8f0;
  font-size: 0.875rem;
  transition: all 0.2s;
}
.crm-input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.crm-input option { background: #1c1c28; }

.input-glow:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

/* ── Badge "Atrasada" ────────────────────────────────────────────────────── */
@keyframes alertPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
  50%       { opacity: 0.8; box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}
.badge-atrasada { animation: alertPulse 1.5s ease-in-out infinite; }

/* ── Tabelas ─────────────────────────────────────────────────────────────── */
.table-row-hover:hover { background: rgba(99, 102, 241, 0.06); }

/* ── Spinner de loading ──────────────────────────────────────────────────── */
.spinner {
  border: 2px solid rgba(99, 102, 241, 0.3);
  border-top-color: #6366f1;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Gradientes KPI Cards ────────────────────────────────────────────────── */
.kpi-gradient-blue    { background: linear-gradient(135deg, rgba(99,102,241,0.2), rgba(139,92,246,0.1)); border-color: rgba(99,102,241,0.3); }
.kpi-gradient-cyan    { background: linear-gradient(135deg, rgba(6,182,212,0.2), rgba(14,165,233,0.1)); border-color: rgba(6,182,212,0.3); }
.kpi-gradient-amber   { background: linear-gradient(135deg, rgba(245,158,11,0.2), rgba(251,191,36,0.1)); border-color: rgba(245,158,11,0.3); }
.kpi-gradient-violet  { background: linear-gradient(135deg, rgba(139,92,246,0.2), rgba(167,139,250,0.1)); border-color: rgba(139,92,246,0.3); }
.kpi-gradient-emerald { background: linear-gradient(135deg, rgba(16,185,129,0.2), rgba(52,211,153,0.1)); border-color: rgba(16,185,129,0.3); }
.kpi-gradient-green   { background: linear-gradient(135deg, rgba(34,197,94,0.2), rgba(74,222,128,0.1)); border-color: rgba(34,197,94,0.3); }
.kpi-gradient-red     { background: linear-gradient(135deg, rgba(239,68,68,0.2), rgba(248,113,113,0.1)); border-color: rgba(239,68,68,0.3); }
.kpi-gradient-gold    { background: linear-gradient(135deg, rgba(234,179,8,0.2), rgba(250,204,21,0.1)); border-color: rgba(234,179,8,0.3); }

/* ── Animações de entrada ────────────────────────────────────────────────── */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-slide-up { animation: slideUp 0.5s ease-out both; }

/* ── Tabs ────────────────────────────────────────────────────────────────── */
.tab-btn { transition: all 0.2s; border-bottom: 2px solid transparent; }
.tab-btn.active { border-bottom-color: #6366f1; color: #818cf8; }
.tab-btn:not(.active):hover { color: #a5b8fc; border-bottom-color: rgba(99,102,241,0.3); }

/* ── Tooltip ─────────────────────────────────────────────────────────────── */
[data-tooltip] { position: relative; }
[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #232333;
  color: #e2e8f0;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  white-space: nowrap;
  border: 1px solid rgba(99,102,241,0.3);
  z-index: 100;
  pointer-events: none;
}