/* ============================================================
   GUGA TOOLS — Global Stylesheet
   Responsabilidade: tokens visuais, utilitários e animações
   ============================================================ */

/* Reset & base */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Inter', sans-serif;
  background: #0a0a0f;
  margin: 0;
}

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #111118; }
::-webkit-scrollbar-thumb { background: #2e2e3a; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #7c3aed; }

/* ── Sidebar navigation items ─────────────────────────────── */
.nav-item { transition: all .2s ease; }

.nav-item.active {
  background: rgba(124, 58, 237, 0.18);
  color: #a78bfa;
  border-left: 3px solid #7c3aed;
}

.nav-item:not(.active):hover {
  background: rgba(255, 255, 255, 0.04);
  color: #e2e8f0;
}

/* ── Tool panels (handled by Tailwind 'hidden' class now) ───────────────────────────────────────────── */

/* ── Buttons ───────────────────────────────────────────────── */
.btn-primary {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  box-shadow: 0 0 18px rgba(124, 58, 237, 0.4);
  transition: all .2s ease;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  box-shadow: 0 0 28px rgba(124, 58, 237, 0.6);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  background: #22222c;
  border: 1px solid #2e2e3a;
  transition: all .2s ease;
}
.btn-secondary:hover {
  background: #2e2e3a;
  border-color: #7c3aed;
  color: #a78bfa;
}

/* ── Input focus glow ──────────────────────────────────────── */
.input-glow:focus {
  outline: none;
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2);
}

/* ── Scoreboard pop animation ──────────────────────────────── */
@keyframes scorePop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.score-pop { animation: scorePop .25s ease; }

/* ── Animated gradient text ────────────────────────────────── */
@keyframes gradShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.animated-gradient {
  background: linear-gradient(270deg, #7c3aed, #a78bfa, #6d28d9, #8b5cf6);
  background-size: 600% 600%;
  animation: gradShift 6s ease infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Toast ─────────────────────────────────────────────────── */
#toast {
  transition: opacity .3s ease, transform .3s ease;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}
#toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* ── Sidebar Toggle & Transitions ─────────────────────────────── */
#sidebar {
  transition: all 0.3s ease;
  overflow: hidden;
}

@media (min-width: 768px) {
  #sidebar.closed {
    width: 0 !important;
    opacity: 0;
    transform: translateX(-20px);
    pointer-events: none;
    margin-right: 0 !important;
  }
}

@media (max-width: 767px) {
  #sidebar.closed {
    height: 0 !important;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    margin-bottom: 0 !important;
    padding: 0 !important;
  }
}

/* ── Editable team name ────────────────────────────────────── */
.team-name:focus {
  outline: none;
  border-bottom: 2px solid #7c3aed;
}

/* ── Favorites Animation ───────────────────────────────────── */
.star-btn {
  transition: all 0.2s ease;
  opacity: 0;
}
.tool-link:hover .star-btn {
  opacity: 1;
}
.star-btn.active {
  opacity: 1;
  color: #fbbf24; /* yellow-400 */
}
.star-btn:hover {
  transform: scale(1.2);
}

/* ── Email Body Content Reset ──────────────────────────────── */
.email-body h1, .email-body h2, .email-body h3 { font-weight: bold; margin-bottom: 0.5em; margin-top: 1em; }
.email-body p { margin-bottom: 1em; line-height: 1.6; }
.email-body a { color: #3b82f6; text-decoration: underline; }
.email-body ul { list-style: disc; padding-left: 1.5em; margin-bottom: 1em; }
.email-body ol { list-style: decimal; padding-left: 1.5em; margin-bottom: 1em; }
.email-body img { max-width: 100%; height: auto; border-radius: 4px; }
.email-body blockquote { border-left: 4px solid #e2e8f0; padding-left: 1em; color: #64748b; margin-bottom: 1em; }