/* ─── Custom CSS for Zelett Bot Portal ─── */

/* ナビリンク */
.nav-link {
  @apply text-discord-muted hover:text-white text-sm font-medium px-3 py-2 rounded-lg hover:bg-white/10 transition-all duration-200;
}

.mobile-nav-link {
  @apply block text-discord-muted hover:text-white text-sm font-medium px-3 py-2 rounded-lg hover:bg-white/10 transition-all duration-200;
}

/* フッターリンク */
.footer-link {
  @apply text-discord-muted hover:text-white text-sm transition-colors duration-200;
}

/* プライマリボタン */
.btn-primary {
  @apply inline-flex items-center justify-center gap-2 bg-discord-blurple hover:bg-indigo-500 text-white font-semibold px-6 py-3 rounded-xl transition-all duration-200 hover:shadow-lg hover:shadow-discord-blurple/25;
}

/* セカンダリボタン */
.btn-secondary {
  @apply inline-flex items-center justify-center gap-2 bg-discord-card hover:bg-discord-card/80 border border-white/10 text-white font-semibold px-6 py-3 rounded-xl transition-all duration-200;
}

/* prose-discord (ドキュメント用) */
.prose-discord h1,
.prose-discord h2,
.prose-discord h3 {
  @apply text-white font-bold;
}

.prose-discord p {
  @apply text-discord-muted leading-relaxed;
}

.prose-discord ul li {
  @apply text-discord-muted;
}

.prose-discord strong {
  @apply text-white font-semibold;
}

.prose-discord a {
  @apply text-discord-blurple hover:underline;
}

/* スクロールバーのカスタマイズ */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #111214;
}

::-webkit-scrollbar-thumb {
  background: #3c3f45;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #5865F2;
}

/* selection */
::selection {
  background: rgba(88, 101, 242, 0.3);
  color: white;
}

/* details/summary のリストマーカーを非表示 */
details summary::-webkit-details-marker {
  display: none;
}

/* アニメーション: フェードイン */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out forwards;
}

/* グラデーションテキスト */
.gradient-text {
  background: linear-gradient(135deg, #5865F2, #7983fa, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* カードホバー効果 */
.card-hover {
  @apply transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-black/20;
}

/* ステータスドット */
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.status-dot.online {
  background: #23a55a;
  box-shadow: 0 0 6px rgba(35, 165, 90, 0.6);
  animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
  0%, 100% { box-shadow: 0 0 6px rgba(35, 165, 90, 0.6); }
  50% { box-shadow: 0 0 12px rgba(35, 165, 90, 0.9); }
}

/* フォーカスリング */
a:focus-visible,
button:focus-visible {
  outline: 2px solid #5865F2;
  outline-offset: 2px;
}

/* テーブル */
table {
  border-collapse: collapse;
}

/* code ブロック */
code {
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
}