/* ============================================================
   VIA — Brand Design System Override
   Aplica a identidade visual VIA sobre o Tailwind CDN base.
   ============================================================ */

/* Poppins font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

/* Base */
body {
  font-family: 'Poppins', system-ui, sans-serif !important;
  background-color: #0B132B !important;
}

/* ── Backgrounds ───────────────────────────────────────────── */
.bg-gray-950                { background-color: #0B132B !important; }
.bg-gray-900                { background-color: #14213D !important; }
.bg-gray-800                { background-color: #1a2744 !important; }
.bg-gray-950\/95            { background-color: rgba(11,19,43,0.95) !important; }

/* ── Borders ───────────────────────────────────────────────── */
.border-gray-800            { border-color: rgba(248,250,252,0.10) !important; }
.border-gray-800\/50        { border-color: rgba(248,250,252,0.06) !important; }
.border-gray-700            { border-color: rgba(248,250,252,0.14) !important; }

/* ── Brand accent — substituindo blue por VIA ciano/teal ───── */
.bg-blue-600                { background-color: #00B894 !important; }
.bg-blue-500                { background-color: #00D1C1 !important; }
.hover\:bg-blue-500:hover   { background-color: #00D1C1 !important; }
.hover\:bg-blue-600:hover   { background-color: #009980 !important; }

.text-blue-400              { color: #00D1C1 !important; }
.text-blue-300              { color: #67e8e0 !important; }
.hover\:text-blue-300:hover { color: #67e8e0 !important; }

.border-blue-500            { border-color: #00D1C1 !important; }
.focus\:border-blue-500:focus { border-color: #00D1C1 !important; }

/* Transparências de accent */
.bg-blue-500\/20            { background-color: rgba(0,209,193,0.20) !important; }
.bg-blue-500\/10            { background-color: rgba(0,209,193,0.10) !important; }
.border-blue-500\/40        { border-color: rgba(0,209,193,0.40) !important; }
.border-blue-500\/30        { border-color: rgba(0,209,193,0.30) !important; }
.bg-blue-900\/40            { background-color: rgba(0,184,148,0.12) !important; }
.border-blue-900\/40        { border-color: rgba(0,184,148,0.30) !important; }
.hover\:bg-blue-500\/20:hover { background-color: rgba(0,209,193,0.20) !important; }

/* Filtro de card hover ativo */
.filtro-btn.active          { background-color: #00B894 !important; color: #0B132B !important; }

/* ── Cards e modais ────────────────────────────────────────── */
.card {
  transition: transform 0.15s, box-shadow 0.15s;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,209,193,0.08);
}

/* ── Scrollbar discreta ────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,209,193,0.25); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,209,193,0.45); }

/* ── Transições ────────────────────────────────────────────── */
a { transition: color 0.15s; }

/* ── Fallback display ──────────────────────────────────────── */
.hidden { display: none !important; }

/* ── Inputs date/time no dark mode ───────────────────────────*/
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(0.7);
  cursor: pointer;
}

/* ── Animações ─────────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

#rotinas-lista > *, #alertas-lista > *, #focos-lista > *,
#tarefas-abertas > *, #tarefas-concluidas > * {
  animation: fadeIn 0.2s ease-out;
}

/* Skeleton */
.skeleton { animation: pulse 1.5s infinite; background: #1e2d47 !important; border-radius: 6px; }
@keyframes pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }