/* ============================================================
   Évora Pipe CRM — MOTION LAYER (admin)
   Camada aditiva: animações, micro-interações, responsividade
   e polish. Não altera lógica nem layout estrutural.
   ============================================================ */

/* ── Ease tokens ── */
:root{
  --ease-out:   cubic-bezier(.22,.61,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
}

/* ============================================================
   ENTRADA DE PÁGINA — refinamento do stagger existente
   ============================================================ */
@keyframes epEnter{
  from{ opacity:0; transform: translateY(16px) scale(.985); }
  to  { opacity:1; transform: translateY(0) scale(1); }
}
.main-content .page-header,
.main-content .card,
.main-content .stat-card,
.main-content .table-wrapper,
.main-content .alert,
.main-content .empty-state,
.main-content .kanban-col{
  animation: epEnter .55s var(--ease-out) both;
}

/* ============================================================
   STAT CARDS — vida ao passar o mouse
   ============================================================ */
.stat-card{
  transition: transform .3s var(--ease-out), box-shadow .3s ease,
              border-color .3s ease;
  will-change: transform;
}
.stat-card:hover{
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}
.stat-card .stat-icon{
  transition: transform .35s var(--ease-spring);
}
.stat-card:hover .stat-icon{
  transform: translateY(-3px) scale(1.12) rotate(-4deg);
}
.stat-value{
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   CARDS — elevação suave
   ============================================================ */
.main-content .card{
  transition: transform .3s var(--ease-out), box-shadow .3s ease;
}
.main-content .card:hover{
  box-shadow: var(--shadow-md);
}

/* ============================================================
   BOTÕES — ripple + feedback tátil
   ============================================================ */
.btn{
  position: relative;
  overflow: hidden;
  transition: transform .2s var(--ease-out), box-shadow .2s ease,
              background-color .2s ease, border-color .2s ease,
              color .2s ease;
}
.btn:not(:disabled):hover{ transform: translateY(-1px); }
.btn:not(:disabled):active{ transform: translateY(0) scale(.97); }

.ep-ripple{
  position:absolute; border-radius:50%;
  background: currentColor; opacity:.22;
  transform: scale(0); pointer-events:none;
  animation: epRipple .55s ease-out forwards;
}
@keyframes epRipple{
  to{ transform: scale(2.6); opacity:0; }
}

/* ============================================================
   TABELAS — linhas com surgimento e hover deslizante
   ============================================================ */
.main-content table tbody tr{
  transition: background-color .18s ease, box-shadow .18s ease,
              transform .18s ease;
}
.main-content table tbody tr:hover{
  background-color: var(--primary-light);
  box-shadow: inset 3px 0 0 var(--primary);
}
.main-content table tbody tr.ep-row-in{
  animation: epRowIn .4s var(--ease-out) both;
}
@keyframes epRowIn{
  from{ opacity:0; transform: translateY(8px); }
  to  { opacity:1; transform: translateY(0); }
}

/* Tabelas roláveis com toque suave no mobile */
.table-responsive,
.table-wrapper{
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* ============================================================
   SIDEBAR — micro-interações
   ============================================================ */
.sidebar-link{
  transition: background-color .22s ease, color .22s ease,
              padding-left .22s var(--ease-out), transform .22s ease;
}
.sidebar-link i{
  transition: transform .25s var(--ease-spring);
}
.sidebar-link:hover i{ transform: translateX(2px) scale(1.12); }
.sidebar-link.active{ position: relative; }
.sidebar-link.active::before{
  content:""; position:absolute; left:0; top:18%; bottom:18%;
  width:3px; border-radius:3px;
  background: var(--accent-lime);
  animation: epPillIn .35s var(--ease-out) both;
}
@keyframes epPillIn{
  from{ transform: scaleY(0); }
  to  { transform: scaleY(1); }
}
.sidebar{
  transition: transform .4s var(--ease-out), width .3s var(--ease-out);
}
.sidebar-overlay{
  transition: opacity .3s ease;
}

/* ============================================================
   TOPBAR — busca expansiva
   ============================================================ */
.topbar-search input{
  transition: box-shadow .25s ease, background-color .25s ease;
}
.topbar-search:focus-within{
  box-shadow: 0 0 0 3px var(--primary-light);
  border-radius: var(--radius-pill);
}

/* ============================================================
   KANBAN — polish sem interferir no drag nativo
   ============================================================ */
.kanban-card{
  transition: transform .22s var(--ease-out), box-shadow .22s ease,
              opacity .22s ease;
  animation: epEnter .5s var(--ease-out) both;
}
.kanban-card.dragging{
  box-shadow: var(--shadow-md);
}
.kanban-cards.drag-over,
.kanban-col.drag-over .kanban-cards{
  outline: 2px dashed var(--primary);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
  background: var(--primary-light);
  transition: background .2s ease;
}
@keyframes epDropPulse{
  0%  { transform: scale(.96); box-shadow: 0 0 0 0 rgba(45,91,227,.45); }
  100%{ transform: scale(1);   box-shadow: 0 0 0 14px rgba(45,91,227,0); }
}
.kanban-card.ep-dropped{ animation: epDropPulse .5s var(--ease-out); }

/* ============================================================
   MODAIS (Bootstrap) — entrada com escala e mola
   ============================================================ */
.modal.fade .modal-dialog{
  transform: translateY(24px) scale(.96);
  transition: transform .35s var(--ease-spring), opacity .35s ease;
}
.modal.show .modal-dialog{
  transform: translateY(0) scale(1);
}
.modal-backdrop.fade{ transition: opacity .3s ease; }
.modal-content{
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}

/* ============================================================
   FORMULÁRIOS — foco vivo
   ============================================================ */
.form-control,
.form-select,
.custom-select-trigger{
  transition: border-color .22s ease, box-shadow .22s ease,
              background-color .22s ease;
}
.form-control:focus,
.form-select:focus,
.custom-select-trigger:focus{
  box-shadow: 0 0 0 3px var(--primary-light);
  border-color: var(--primary);
}
.custom-select-panel{
  transition: opacity .2s ease, transform .2s var(--ease-out);
}
.custom-select-panel.open{
  animation: epEnter .25s var(--ease-out) both;
}
.custom-select-option{
  transition: background-color .15s ease, padding-left .15s var(--ease-out);
}
.custom-select-option:hover{ padding-left: 18px; }

/* ============================================================
   TOASTS — entrada/saída melhoradas
   ============================================================ */
#toastContainer > div{
  animation: epToastIn .4s var(--ease-spring) both !important;
}
@keyframes epToastIn{
  from{ opacity:0; transform: translateX(24px) scale(.95); }
  to  { opacity:1; transform: translateX(0) scale(1); }
}

/* ============================================================
   BADGES / ALERTS
   ============================================================ */
.badge{ transition: transform .2s var(--ease-spring); }
tr:hover .badge,
.card:hover > .card-header .badge{ transform: scale(1.06); }
.alert{ animation: epEnter .45s var(--ease-out) both; }

/* ============================================================
   SKELETON — utilitário de carregamento
   ============================================================ */
.ep-skeleton{
  position: relative; overflow: hidden;
  background: var(--border);
  border-radius: 8px; color: transparent !important;
}
.ep-skeleton::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent,
              rgba(255,255,255,.45), transparent);
  animation: epShimmer 1.3s ease infinite;
}
[data-theme="dark"] .ep-skeleton::after{
  background: linear-gradient(90deg, transparent,
              rgba(255,255,255,.08), transparent);
}
@keyframes epShimmer{
  from{ transform: translateX(-100%); }
  to  { transform: translateX(100%); }
}

/* ============================================================
   SCROLLBARS — discretos e temáticos
   ============================================================ */
.main-content ::-webkit-scrollbar,
.kanban-board::-webkit-scrollbar{
  width: 8px; height: 8px;
}
.main-content ::-webkit-scrollbar-thumb,
.kanban-board::-webkit-scrollbar-thumb{
  background: var(--border);
  border-radius: 8px;
}
.main-content ::-webkit-scrollbar-thumb:hover,
.kanban-board::-webkit-scrollbar-thumb:hover{
  background: var(--text-muted);
}
.main-content ::-webkit-scrollbar-track{ background: transparent; }

/* ============================================================
   THEME TOGGLE — respiro sutil
   ============================================================ */
.theme-toggle{
  transition: transform .25s var(--ease-spring), box-shadow .25s ease;
}
.theme-toggle:hover{ transform: translateY(-2px) scale(1.03); }

/* ============================================================
   TRANSIÇÃO ENTRE PÁGINAS — fade-out suave
   ============================================================ */
body.ep-leaving .main-content{
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .18s ease, transform .18s ease;
}

/* ============================================================
   ACESSIBILIDADE — foco visível
   ============================================================ */
.main-content :focus-visible,
.sidebar :focus-visible,
.topbar :focus-visible{
  outline: 3px solid var(--primary-light);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ============================================================
   RESPONSIVIDADE EXTRA
   ============================================================ */
@media (max-width: 991px){
  .kanban-board{
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 16px;
  }
  .kanban-col{
    scroll-snap-align: start;
    min-width: 240px;
    flex: 0 0 240px;
  }
}
@media (max-width: 576px){
  .page-header{ flex-wrap: wrap; gap: 10px; }
  .stat-card:hover,
  .main-content .card:hover,
  .btn:not(:disabled):hover{ transform: none; }
  .modal-dialog{ margin: 12px; }
  .table-actions{ display: flex; gap: 4px; flex-wrap: wrap; }
}

/* ============================================================
   REDUCED MOTION — desativa tudo
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .main-content .page-header,
  .main-content .card,
  .main-content .stat-card,
  .main-content .table-wrapper,
  .main-content .alert,
  .main-content .empty-state,
  .main-content .kanban-col,
  .kanban-card,
  .fade-in,
  .alert,
  #toastContainer > div{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .stat-card, .btn, .sidebar-link, .kanban-card,
  .modal.fade .modal-dialog, .theme-toggle,
  .main-content .card{
    transition: none !important;
  }
  .ep-ripple{ display: none; }
  body.ep-leaving .main-content{ opacity:1; transform:none; }
}