/* PABX Console — CSS puro (transições, scrollbar, keyframes).
   Classes de componente com @apply ficam no <style type="text/tailwindcss"> do index.html
   (Tailwind CDN não processa @apply em arquivos externos). */

::selection { background: rgb(79 70 229 / .15); }

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: rgb(0 0 0 / .12); border: 3px solid transparent; border-radius: 8px; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: rgb(0 0 0 / .22); border: 3px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

.fade-enter-active, .fade-leave-active { transition: opacity .18s cubic-bezier(.32,.72,0,1); }
.fade-enter-from, .fade-leave-to { opacity: 0; }

.pop-enter-active { transition: opacity .2s cubic-bezier(.32,.72,0,1), transform .2s cubic-bezier(.32,.72,0,1); }
.pop-leave-active { transition: opacity .15s ease-in, transform .15s ease-in; }
.pop-enter-from, .pop-leave-to { opacity: 0; transform: translateY(10px) scale(.985); }

.toast-enter-active { transition: all .25s cubic-bezier(.32,.72,0,1); }
.toast-leave-active { transition: all .2s ease-in; }
.toast-enter-from { opacity: 0; transform: translateY(-8px) scale(.97); }
.toast-leave-to { opacity: 0; transform: translateY(-6px); }
.toast-move { transition: transform .25s cubic-bezier(.32,.72,0,1); }

.slide-enter-active, .slide-leave-active { transition: transform .25s cubic-bezier(.32,.72,0,1), opacity .2s; }
.slide-enter-from, .slide-leave-to { transform: translateX(28px); opacity: 0; }

@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.skeleton {
  background: linear-gradient(90deg, rgb(0 0 0/.045) 25%, rgb(0 0 0/.08) 50%, rgb(0 0 0/.045) 75%);
  background-size: 800px 100%;
  animation: shimmer 1.4s infinite linear;
  border-radius: 6px;
}

@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.live-dot { animation: pulse-dot 1.6s ease-in-out infinite; }

/* ---------- transição de página entre rotas ---------- */
.page-enter-active { transition: opacity .22s cubic-bezier(.32,.72,0,1), transform .22s cubic-bezier(.32,.72,0,1); }
.page-enter-from { opacity: 0; transform: translateY(7px); }
.page-leave-active { transition: opacity .12s ease-in; }
.page-leave-to { opacity: 0; }

/* ---------- entrada escalonada das linhas ---------- */
@keyframes row-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.tbl tbody tr { animation: row-in .28s cubic-bezier(.32,.72,0,1) backwards; }
.tbl tbody tr:nth-child(1)  { animation-delay: 0ms; }
.tbl tbody tr:nth-child(2)  { animation-delay: 25ms; }
.tbl tbody tr:nth-child(3)  { animation-delay: 50ms; }
.tbl tbody tr:nth-child(4)  { animation-delay: 75ms; }
.tbl tbody tr:nth-child(5)  { animation-delay: 100ms; }
.tbl tbody tr:nth-child(6)  { animation-delay: 125ms; }
.tbl tbody tr:nth-child(7)  { animation-delay: 148ms; }
.tbl tbody tr:nth-child(8)  { animation-delay: 171ms; }
.tbl tbody tr:nth-child(9)  { animation-delay: 194ms; }
.tbl tbody tr:nth-child(10) { animation-delay: 217ms; }
.tbl tbody tr:nth-child(n+11) { animation-delay: 240ms; }

/* ---------- cards com entrada suave ---------- */
@keyframes card-in { from { opacity: 0; transform: translateY(8px) scale(.995); } to { opacity: 1; transform: none; } }
.card-in { animation: card-in .3s cubic-bezier(.32,.72,0,1) backwards; }
.card-in-1 { animation-delay: 40ms; }
.card-in-2 { animation-delay: 90ms; }
.card-in-3 { animation-delay: 140ms; }

/* ---------- sidebar colapsável ---------- */
.nav-label, .nav-eyebrow .eyebrow-txt, .brand-txt { transition: opacity .15s ease, max-width .22s cubic-bezier(.32,.72,0,1); white-space: nowrap; overflow: hidden; }
.sidebar-mini .nav-label, .sidebar-mini .brand-txt { opacity: 0; max-width: 0; }
.sidebar-mini .nav-eyebrow .eyebrow-txt { display: none; }
.sidebar-mini .nav-eyebrow { padding: 14px 0 6px; text-align: center; }
.sidebar-mini .nav-eyebrow::after { content: '·'; color: rgb(0 0 0/.25); font-size: 14px; }
.sidebar-mini .nav-item { justify-content: center; padding-left: 0; padding-right: 0; }
aside { transition: width .24s cubic-bezier(.32,.72,0,1), transform .2s cubic-bezier(.32,.72,0,1); }

/* ---------- botão/icon micro-interações ---------- */
.btn { transition: background-color .15s ease, color .15s ease, transform .1s ease, box-shadow .15s ease; }
.nav-item { position: relative; }
.nav-item.active::before { content: ''; position: absolute; left: -10px; top: 20%; bottom: 20%; width: 3px; border-radius: 2px; background: #18181b; }
.sidebar-mini .nav-item.active::before { left: -8px; }

/* ---------- barras finas (progresso) ---------- */
.bar-thin { transition: width .5s cubic-bezier(.32,.72,0,1); }

/* ---------- tela de conexão: aurora + campos grandes ---------- */
.aurora { position: absolute; border-radius: 9999px; filter: blur(90px); pointer-events: none; }
.aurora-1 { width: 55vw; height: 55vw; top: -22%; left: -18%; opacity: .55;
  background: radial-gradient(circle at 30% 30%, rgb(99 102 241 / .5), transparent 65%);
  animation: drift-1 22s ease-in-out infinite alternate; }
.aurora-2 { width: 40vw; height: 40vw; bottom: -18%; right: -12%; opacity: .45;
  background: radial-gradient(circle at 60% 60%, rgb(14 165 233 / .4), transparent 65%);
  animation: drift-2 26s ease-in-out infinite alternate; }
.aurora-3 { width: 26vw; height: 26vw; top: 38%; left: 30%; opacity: .3;
  background: radial-gradient(circle at 50% 50%, rgb(52 211 153 / .35), transparent 60%);
  animation: drift-3 18s ease-in-out infinite alternate; }
@keyframes drift-1 { to { transform: translate(9vw, 6vh) scale(1.12); } }
@keyframes drift-2 { to { transform: translate(-7vw, -5vh) scale(1.08); } }
@keyframes drift-3 { to { transform: translate(-5vw, 8vh) scale(1.15); } }

.input-lg {
  width: 100%; border-radius: 14px; border: 1px solid rgb(0 0 0 / .09);
  background: rgb(250 250 250); padding: 13px 16px; font-size: 15px; color: #18181b;
  outline: none; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.input-lg::placeholder { color: #a1a1aa; }
.input-lg:hover { border-color: rgb(0 0 0 / .16); }
.input-lg:focus { background: #fff; border-color: #818cf8; box-shadow: 0 0 0 4px rgb(99 102 241 / .12); }
.input-lg:disabled { background: #f4f4f5; color: #a1a1aa; }

.btn-lg-primary {
  display: flex; width: 100%; align-items: center; justify-content: center;
  border-radius: 14px; background: #18181b; padding: 14px 16px; font-size: 15px;
  font-weight: 600; color: #fff; cursor: pointer;
  transition: background-color .15s ease, transform .1s ease;
}
.btn-lg-primary:hover { background: #3f3f46; }
.btn-lg-primary:active { transform: scale(.985); }
.btn-lg-primary:disabled { opacity: .45; pointer-events: none; }

.btn-lg-ghost {
  display: flex; width: 100%; align-items: center; justify-content: center; gap: 6px;
  margin-top: 10px; border-radius: 14px; padding: 12px 16px; font-size: 14px;
  font-weight: 500; color: #52525b; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.btn-lg-ghost:hover { background: rgb(0 0 0 / .05); color: #18181b; }
.btn-lg-ghost:disabled { opacity: .45; pointer-events: none; }

/* ---------- pulsar suave no ponto "ao vivo" do wallboard ---------- */
@keyframes halo { 0% { box-shadow: 0 0 0 0 rgb(16 185 129 / .45); } 70% { box-shadow: 0 0 0 7px rgb(16 185 129 / 0); } 100% { box-shadow: 0 0 0 0 rgb(16 185 129 / 0); } }
.live-halo { animation: halo 2s cubic-bezier(.4,0,.6,1) infinite; }