/* ============================================================
   animations.css — Animações globais FRPC Projetos
   ============================================================ */

/* ── Keyframes ──────────────────────────────────────────────── */

@keyframes frpc-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes frpc-fade-in-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes frpc-fade-in-down {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes frpc-slide-in-left {
  from { opacity: 0; transform: translateX(-100%); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes frpc-scale-in {
  from { opacity: 0; transform: scale(0.93); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes frpc-bounce-in {
  0%   { opacity: 0; transform: scale(0.82); }
  65%  { transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes frpc-ripple {
  to { transform: scale(5); opacity: 0; }
}

@keyframes frpc-pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45); }
  70%  { box-shadow: 0 0 0 7px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

@keyframes frpc-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}

@keyframes frpc-grow-height {
  from { height: 0 !important; min-height: 0 !important; }
}

@keyframes frpc-grow-width {
  from { width: 0 !important; max-width: 0 !important; }
}

@keyframes frpc-spin {
  to { transform: rotate(360deg); }
}


/* ── Sidebar ────────────────────────────────────────────────── */

.sidebar {
  animation: frpc-slide-in-left 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.sidebar-icon {
  transition: transform 0.16s ease, background 0.16s ease !important;
}
.sidebar-icon:hover  { transform: scale(1.14); }
.sidebar-icon:active { transform: scale(0.92); }


/* ── Main content ───────────────────────────────────────────── */

.main, main {
  animation: frpc-fade-in 0.28s ease both;
  animation-delay: 0.08s;
}


/* ── Stat cards ─────────────────────────────────────────────── */

.stat-card,
.promo-card {
  animation: frpc-fade-in-up 0.38s ease both;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.stat-card:hover  { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,0.10) !important; }
.stat-cards-row .stat-card:nth-child(1) { animation-delay: 0.05s; }
.stat-cards-row .stat-card:nth-child(2) { animation-delay: 0.12s; }
.stat-cards-row .promo-card             { animation-delay: 0.19s; }


/* ── Chart cards ────────────────────────────────────────────── */

.chart-card {
  animation: frpc-fade-in-up 0.38s ease both;
}
.content-left .chart-card:nth-of-type(1) { animation-delay: 0.22s; }
.content-left .chart-card:nth-of-type(2) { animation-delay: 0.32s; }


/* ── Chart bars grow on render ──────────────────────────────── */

.chart-bar {
  animation: frpc-grow-height 0.55s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}
.chart-bar-group:nth-child(1)  .chart-bar { animation-delay: 0.04s; }
.chart-bar-group:nth-child(2)  .chart-bar { animation-delay: 0.08s; }
.chart-bar-group:nth-child(3)  .chart-bar { animation-delay: 0.12s; }
.chart-bar-group:nth-child(4)  .chart-bar { animation-delay: 0.16s; }
.chart-bar-group:nth-child(5)  .chart-bar { animation-delay: 0.20s; }
.chart-bar-group:nth-child(6)  .chart-bar { animation-delay: 0.24s; }
.chart-bar-group:nth-child(7)  .chart-bar { animation-delay: 0.28s; }
.chart-bar-group:nth-child(8)  .chart-bar { animation-delay: 0.32s; }
.chart-bar-group:nth-child(9)  .chart-bar { animation-delay: 0.36s; }
.chart-bar-group:nth-child(10) .chart-bar { animation-delay: 0.40s; }
.chart-bar-group:nth-child(11) .chart-bar { animation-delay: 0.44s; }
.chart-bar-group:nth-child(12) .chart-bar { animation-delay: 0.48s; }


/* ── Progress bars grow ─────────────────────────────────────── */

.progress-fill {
  animation: frpc-grow-width 0.65s cubic-bezier(0.34, 1.4, 0.64, 1) both;
  animation-delay: 0.3s;
}
.carga-bar {
  animation: frpc-grow-width 0.6s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}
.carga-item:nth-child(1) .carga-bar { animation-delay: 0.08s; }
.carga-item:nth-child(2) .carga-bar { animation-delay: 0.14s; }
.carga-item:nth-child(3) .carga-bar { animation-delay: 0.20s; }
.carga-item:nth-child(4) .carga-bar { animation-delay: 0.26s; }
.carga-item:nth-child(5) .carga-bar { animation-delay: 0.32s; }
.carga-item:nth-child(6) .carga-bar { animation-delay: 0.38s; }


/* ── Sidebar right sections ─────────────────────────────────── */

.risk-section,
.quick-links {
  animation: frpc-fade-in-up 0.36s ease both;
}
.sidebar-right .quick-links         { animation-delay: 0.10s; }
.sidebar-right .risk-section:nth-of-type(1) { animation-delay: 0.18s; }
.sidebar-right .risk-section:nth-of-type(2) { animation-delay: 0.26s; }
.sidebar-right .risk-section:nth-of-type(3) { animation-delay: 0.34s; }
.sidebar-right .risk-section:nth-of-type(4) { animation-delay: 0.42s; }

.risk-item  { animation: frpc-fade-in-up 0.28s ease both; }
.carga-item { animation: frpc-fade-in-up 0.28s ease both; }

.risk-item:nth-child(1),  .carga-item:nth-child(1)  { animation-delay: 0.05s; }
.risk-item:nth-child(2),  .carga-item:nth-child(2)  { animation-delay: 0.10s; }
.risk-item:nth-child(3),  .carga-item:nth-child(3)  { animation-delay: 0.15s; }
.risk-item:nth-child(4),  .carga-item:nth-child(4)  { animation-delay: 0.20s; }
.risk-item:nth-child(5),  .carga-item:nth-child(5)  { animation-delay: 0.25s; }
.risk-item:nth-child(6),  .carga-item:nth-child(6)  { animation-delay: 0.30s; }


/* ── Table card ─────────────────────────────────────────────── */

.table-card {
  animation: frpc-fade-in-up 0.36s ease both;
  animation-delay: 0.12s;
}


/* ── Table rows (stagger aplicado via JS) ───────────────────── */

.frpc-row-anim {
  animation: frpc-fade-in-up 0.26s ease both;
}


/* ── Side panel open/close ──────────────────────────────────── */

.side-panel {
  transition: transform 0.30s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.overlay, .sidebar-overlay {
  transition: opacity 0.24s ease !important;
}


/* ── Panel tabs ─────────────────────────────────────────────── */

#tabTarefas, #tabHistorico, #tabFicheiros {
  transition: color 0.18s ease, border-bottom-color 0.18s ease !important;
}

.frpc-tab-show {
  animation: frpc-fade-in-up 0.22s ease both;
}


/* ── Buttons ────────────────────────────────────────────────── */

.btn-primary,
.primary-btn,
.promo-btn,
.action-btn,
.outline-btn,
.confirm-dist-btn,
.btn-estado-tarefa {
  transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease, color 0.14s ease !important;
  position: relative;
  overflow: hidden;
}

.btn-primary:hover,
.primary-btn:hover,
.promo-btn:hover,
.confirm-dist-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(0,0,0,0.14) !important;
}

.btn-primary:active,
.primary-btn:active,
.action-btn:active,
.outline-btn:active,
.btn-estado-tarefa:active {
  transform: scale(0.96);
}

.action-btn {
  transition: background 0.15s ease, color 0.15s ease, transform 0.14s ease !important;
}
.action-btn:hover { transform: translateY(-1px); }


/* ── Ripple span ─────────────────────────────────────────────── */

.frpc-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.30);
  width: 10px;
  height: 10px;
  margin-top: -5px;
  margin-left: -5px;
  animation: frpc-ripple 0.55s ease-out forwards;
  pointer-events: none;
  z-index: 0;
}


/* ── Filter tabs ─────────────────────────────────────────────── */

.filter-tab {
  transition: background 0.16s ease, color 0.16s ease, transform 0.14s ease !important;
}
.filter-tab:hover { transform: translateY(-1px); }


/* ── Pagination ─────────────────────────────────────────────── */

.page-btn {
  transition: background 0.14s ease, color 0.14s ease, transform 0.14s ease !important;
}
.page-btn:hover { transform: scale(1.10); }


/* ── Dropdown / search items ────────────────────────────────── */

.dropdown-item,
.codigo-result-item,
.tecnico-option {
  transition: background 0.13s ease, transform 0.13s ease !important;
}
.dropdown-item:hover,
.codigo-result-item:hover { transform: translateX(4px); }

.tecnico-option {
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease !important;
}
.tecnico-option:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,0.08); }


/* ── Estado badges ──────────────────────────────────────────── */

.estado-badge {
  animation: frpc-scale-in 0.18s ease both;
}


/* ── Notification badge ─────────────────────────────────────── */

.notif-count,
[class*="notif-badge"],
[class*="badge-count"] {
  animation: frpc-pulse-ring 2.2s ease infinite;
}


/* ── Login / forms ──────────────────────────────────────────── */

.login-card,
.login-box,
.card,
.form-card {
  animation: frpc-scale-in 0.38s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}


/* ── Loading shimmer ────────────────────────────────────────── */

.frpc-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 600px 100%;
  animation: frpc-shimmer 1.5s ease infinite;
  border-radius: 6px;
  color: transparent !important;
}


/* ── Toast / banner pop-up ──────────────────────────────────── */

.frpc-toast {
  animation: frpc-bounce-in 0.32s ease both;
}


/* ── Kanban cards ───────────────────────────────────────────── */

.frpc-kanban-col {
  animation: frpc-fade-in-up 0.35s ease both;
}
.frpc-kanban-col:nth-child(1) { animation-delay: 0.04s; }
.frpc-kanban-col:nth-child(2) { animation-delay: 0.10s; }
.frpc-kanban-col:nth-child(3) { animation-delay: 0.16s; }
.frpc-kanban-col:nth-child(4) { animation-delay: 0.22s; }


/* ── Reduced motion ─────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:   0.01ms !important;
    animation-delay:      0ms    !important;
    transition-duration:  0.01ms !important;
  }
}