/* assets/css/global.css */

/* ── Scrollbar do menu lateral ─────────────────────────────────────────────── */
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(148, 163, 184, 0.12);
  border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.35);
  border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.5);
}

/* ── Bordas LED animadas para elementos de UI ───────────────────────────────── */

@keyframes led-flow-h {
  0%   { background-position: 0% 0%; }
  100% { background-position: 100% 0%; }
}

@keyframes led-flow-v {
  0%   { background-position: 0% 0%; }
  100% { background-position: 0% 100%; }
}

/* Borda direita — para o aside do menu (já tem position: fixed) */
.led-border-right::after {
  content: '';
  position: absolute;
  right: 0; top: 0;
  width: 2px; height: 100%;
  background: linear-gradient(
    to bottom,
    #bae6fd, #ede9fe, #e9d5ff, #ede9fe,
    #bae6fd, #ede9fe, #e9d5ff, #ede9fe, #bae6fd
  );
  background-size: 100% 300%;
  animation: led-flow-v 2.5s linear infinite;
  pointer-events: none;
}

/* Borda inferior — para divs estáticos (adiciona position: relative) */
.led-border-bottom {
  position: relative;
}
.led-border-bottom::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 2px;
  background: linear-gradient(
    to right,
    #bae6fd, #ede9fe, #e9d5ff, #ede9fe,
    #bae6fd, #ede9fe, #e9d5ff, #ede9fe, #bae6fd
  );
  background-size: 300% 100%;
  animation: led-flow-h 2.5s linear infinite;
  pointer-events: none;
}

/* ── Animação de background gradiente (Olá, bem-vindo!) ────────────────── */
@keyframes background-gradient-flow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

.animated-gradient-background {
  background: linear-gradient(to right,
    #2563eb 0%,
    #3b82f6 25%,
    #06b6d4 50%,
    #3b82f6 75%,
    #2563eb 100%
  );
  background-size: 400% auto;
  animation: background-gradient-flow 4s linear infinite;
}

/* ── Animação de slide-in para a faixa de boas-vindas ───────────────────────── */
@keyframes slide-in-from-right {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(0); }
}

.welcome-band-slide-in {
  animation: slide-in-from-right 1s ease-out forwards;
}

/* ── Controles do menu lateral (comprimir/expandir, desktop) ───────────────── */
@keyframes menu-aside-ctrl-fade {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

.anim-menu-aside-ctrl {
  animation: menu-aside-ctrl-fade 0.25s ease-out;
}

/* Cartões e blocos de dashboard (entradas suaves) */
@keyframes fade-in-surface {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.anim-fade-in-surface {
  animation: fade-in-surface 0.45s ease-out forwards;
  opacity: 0;
}