/* 自定义样式补充 */

/* 平滑滚动 */
html {
  scroll-behavior: smooth;
}

/* 代码块样式 */
code {
  @apply px-2 py-1 bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded text-sm font-mono;
}

/* 详情元素样式 */
details summary {
  @apply select-none;
}

details[open] summary {
  @apply mb-2;
}

/* 加载动画 */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* Toast 进入动画 */
@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.toast-enter {
  animation: slideIn 0.3s ease-out;
}

/* Toast 退出动画 */
@keyframes slideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

.toast-exit {
  animation: slideOut 0.3s ease-in;
}

/* 卡片 hover 效果 */
.data-card {
  @apply transition-all duration-200;
}

.data-card:hover {
  @apply transform scale-[1.02] shadow-xl;
}

/* 复制按钮样式 */
.copy-btn {
  @apply opacity-0 group-hover:opacity-100 transition-opacity duration-200;
}

/* 过期状态徽章 */
.badge-expired {
  @apply bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200;
}

.badge-expiring {
  @apply bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200;
}

.badge-active {
  @apply bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200;
}

/* 模态框背景模糊 */
#config-modal {
  backdrop-filter: blur(4px);
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  @apply bg-gray-100 dark:bg-gray-800;
}

::-webkit-scrollbar-thumb {
  @apply bg-gray-300 dark:bg-gray-600 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-gray-400 dark:bg-gray-500;
}

/* 聚焦环样式 */
*:focus-visible {
  @apply outline-none ring-2 ring-primary ring-offset-2 dark:ring-offset-gray-900;
}

/* 禁用状态 */
button:disabled {
  @apply cursor-not-allowed opacity-50;
}

/* 表格响应式 */
@media (max-width: 640px) {
  table {
    font-size: 0.875rem;
  }

  th, td {
    padding: 0.5rem;
  }
}

/* 打印样式 */
@media print {
  nav, #config-btn, #export-json-btn, #copy-all-btn, .copy-btn {
    display: none !important;
  }

  body {
    @apply bg-white text-black;
  }
}

/* 文档内容样式优化 */
.prose {
  @apply max-w-none;
}

.prose h2 {
  @apply text-2xl font-semibold mt-8 mb-4;
}

.prose h3 {
  @apply text-xl font-medium mt-6 mb-3;
}

.prose h4 {
  @apply text-lg font-medium mt-4 mb-2;
}

.prose p {
  @apply mb-4 leading-relaxed;
}

.prose ul, .prose ol {
  @apply mb-4;
}

.prose li {
  @apply mb-2;
}

.prose table {
  @apply w-full border-collapse;
}

.prose th {
  @apply bg-gray-100 dark:bg-gray-900 font-semibold;
}

.prose td, .prose th {
  @apply border border-gray-200 dark:border-gray-700 px-4 py-2;
}

/* 链接样式 */
a {
  @apply transition-colors duration-200;
}

/* 按钮加载状态 */
.btn-loading {
  @apply relative text-transparent pointer-events-none;
}

.btn-loading::after {
  content: "";
  @apply absolute inset-0 m-auto w-5 h-5 border-2 border-white border-t-transparent rounded-full;
  animation: spin 0.6s linear infinite;
}

/* 滚动横幅动画 */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.scroll-banner {
  animation: scroll 20s linear infinite;
}

.scroll-banner:hover {
  animation-play-state: paused;
}

/* 移动端侧边栏 */
.mobile-menu {
  transition: transform 0.3s ease-in-out;
}

.mobile-menu.closed {
  transform: translateX(100%);
}

.mobile-menu.open {
  transform: translateX(0);
}

.mobile-menu-overlay {
  transition: opacity 0.3s ease-in-out;
}

.mobile-menu-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.mobile-menu-overlay.visible {
  opacity: 1;
}