/**
 * BTID Explorer - 主样式入口文件
 * 
 * CSS模块化架构说明：
 * 1. 设计令牌 - 所有设计变量（颜色、字体、间距、圆角、阴影等）
 * 2. 工具类 - 通用工具样式
 * 3. 统一组件 - 可复用的UI组件库
 * 4. 功能模块 - 特定功能的样式
 * 5. 页面样式 - 各页面专用样式
 * 6. 响应式 - 移动端优化
 * 7. 无障碍 - 可访问性样式
 * 8. 暗黑模式 - 所有暗黑模式样式（必须最后加载）
 */

/* ============================================================
   1. 核心基础 - 设计令牌和变量
   ============================================================ */

@import url('./modules/variables.css');

/* ============================================================
   2. 动画定义
   ============================================================ */

@import url('./modules/animations.css');

/* ============================================================
   3. 工具类
   ============================================================ */

@import url('./modules/utilities.css');

/* ============================================================
   4. 统一组件库
   ============================================================ */

/* 统一的UI组件（卡片、按钮、输入框、表格等） */
@import url('./modules/unified-components.css');

/* 核心组件样式 */
@import url('./modules/components.css');

/* 排名徽章 */
@import url('./modules/rank-badge.css');

/* ============================================================
   5. 功能模块
   ============================================================ */

/* 搜索功能 */
@import url('./modules/search.css');

/* 分页组件 */
@import url('./modules/pagination.css');

/* 导航栏 */
@import url('./modules/navigation.css');

/* 玻璃态效果 */
@import url('./modules/glass-effects.css');

/* ============================================================
   6. 响应式设计
   ============================================================ */

@import url('./modules/responsive.css');

/* 移动端优化 */
@import url('./modules/mobile-home-optimized.css');
@import url('./modules/mobile-tokens-optimized.css');
@import url('./modules/mobile-holders-optimized.css');
@import url('./modules/mobile-transactions-optimized.css');
@import url('./modules/mobile-address-details-optimized.css');
@import url('./modules/mobile-unified-spacing.css');

/* ============================================================
   7. 页面专用样式
   ============================================================ */

@import url('./modules/page-token-details.css');
@import url('./modules/page-address-details.css');

/* ============================================================
   7.5. Footer 组件样式
   ============================================================ */

@import url('./modules/footer.css');

/* ============================================================
   8. 无障碍样式
   ============================================================ */

@import url('./modules/accessibility.css');

/* ============================================================
   9. 暗黑模式（必须最后加载以确保优先级）
   ============================================================ */

@import url('./modules/dark-mode.css');

/* ============================================================
   10. 搜索增强样式
   ============================================================ */

@import url('./modules/search-enhanced.css');

/* ============================================================
   11. Z-Index层级修复
   ============================================================ */

@import url('./modules/z-index-fix.css');

/* ============================================================
   12. UI统一修复（最高优先级）
   ============================================================ */

@import url('./modules/ui-unified-fix.css');

/* ============================================================
   13. 全局覆盖样式 (需要在所有模块之后加载)
   ============================================================ */

/* 分页激活按钮样式已在 pagination.css 中定义 */

/* 分页跳转输入框数字微调箭头移除 */
.pagination-goto-input::-webkit-outer-spin-button,
.pagination-goto-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.pagination-goto-input {
    -moz-appearance: textfield;
    appearance: textfield;
    -webkit-appearance: none;
}

/* 搜索结果滚动条隐藏 */
#search-results {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

#search-results::-webkit-scrollbar {
    display: none;
}

/* 暗黑模式搜索结果图标 */
.dark #search-results .search-result-item .flex.items-center.min-w-0 > .w-8.h-8 {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)) !important;
    color: var(--color-text-inverse) !important;
    box-shadow: 0 2px 8px var(--color-primary-alpha-30);
}

/* ============================================================
   导航栏玻璃效果
   ============================================================ */

.premium-navbar {
    background: rgba(255, 255, 255, 0.04) !important;
    backdrop-filter: blur(12px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
}

.premium-navbar.scrolled {
    background: rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(12px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
}

.dark .premium-navbar {
    background: rgba(13, 17, 23, 0.10) !important;
    backdrop-filter: blur(12px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
}

.dark .premium-navbar.scrolled {
    background: rgba(13, 17, 23, 0.12) !important;
    backdrop-filter: blur(12px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
}

/* ============================================================
   全局焦点样式（仅键盘导航时显示）
   ============================================================ */

/* 默认移除所有焦点样式 */
*:focus {
    outline: none !important;
}

/* 键盘导航焦点样式由 accessibility.css 处理 */

/* 移除 Tailwind 的 ring 效果 */
*:focus {
    --tw-ring-shadow: 0 0 transparent !important;
    --tw-ring-offset-shadow: 0 0 transparent !important;
    --tw-ring-color: transparent !important;
    --tw-ring-offset-color: transparent !important;
}

/* Firefox 按钮内边框移除 */
button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
    border-style: none !important;
    padding: 0 !important;
}

/* ============================================================
   14. 搜索框统一边框样式（最高优先级）
   电脑端和手机端统一边框 - 更清晰的设计
   ============================================================ */

/* 亮色模式 - 搜索框基础样式 */
.search-input,
#search-input,
#token-search-input,
input.search-input,
input[type="search"],
input[type="text"].search-input,
input[type="number"].search-input {
    background-color: #ffffff !important;
    border: 1.5px solid #d1d5db !important; /* gray-300 更清晰 */
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* 亮色模式 - 搜索框悬停状态 */
.search-input:hover,
#search-input:hover,
#token-search-input:hover,
input.search-input:hover,
input[type="search"]:hover,
input[type="text"].search-input:hover,
input[type="number"].search-input:hover {
    border-color: #9ca3af !important; /* gray-400 悬停加深 */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
}

/* 亮色模式 - 搜索框聚焦状态 */
.search-input:focus,
.search-input:focus-visible,
#search-input:focus,
#search-input:focus-visible,
#token-search-input:focus,
#token-search-input:focus-visible,
input.search-input:focus,
input.search-input:focus-visible,
input[type="search"]:focus,
input[type="search"]:focus-visible,
input[type="text"].search-input:focus,
input[type="text"].search-input:focus-visible,
input[type="number"].search-input:focus,
input[type="number"].search-input:focus-visible {
    border-color: #6b7280 !important; /* gray-500 聚焦最深 */
    box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.15) !important; /* 柔和的聚焦光环 */
    outline: none !important;
}

/* 暗黑模式 - 搜索框基础样式 */
.dark .search-input,
.dark #search-input,
.dark #token-search-input,
.dark input.search-input,
.dark input[type="search"],
.dark input[type="text"].search-input,
.dark input[type="number"].search-input {
    background-color: #161b22 !important;
    border: 1.5px solid rgba(240, 246, 252, 0.25) !important; /* 更清晰的边框 */
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    color: #f0f6fc !important;
}

/* 暗黑模式 - 搜索框悬停状态 */
.dark .search-input:hover,
.dark #search-input:hover,
.dark #token-search-input:hover,
.dark input.search-input:hover,
.dark input[type="search"]:hover,
.dark input[type="text"].search-input:hover,
.dark input[type="number"].search-input:hover {
    border-color: rgba(240, 246, 252, 0.4) !important; /* 悬停加深 */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
}

/* 暗黑模式 - 搜索框聚焦状态 */
.dark .search-input:focus,
.dark .search-input:focus-visible,
.dark #search-input:focus,
.dark #search-input:focus-visible,
.dark #token-search-input:focus,
.dark #token-search-input:focus-visible,
.dark input.search-input:focus,
.dark input.search-input:focus-visible,
.dark input[type="search"]:focus,
.dark input[type="search"]:focus-visible,
.dark input[type="text"].search-input:focus,
.dark input[type="text"].search-input:focus-visible,
.dark input[type="number"].search-input:focus,
.dark input[type="number"].search-input:focus-visible {
    border-color: rgba(240, 246, 252, 0.55) !important; /* 聚焦最亮 */
    box-shadow: 0 0 0 3px rgba(240, 246, 252, 0.12) !important; /* 柔和的聚焦光环 */
    outline: none !important;
}

/* 搜索框容器 - 移除任何背景效果 */
.search-container,
.search-wrapper {
    background: transparent !important;
    box-shadow: none !important;
}

/* 搜索图标颜色 */
.search-icon {
    color: #9ca3af !important;
}

.dark .search-icon {
    color: #6b7280 !important;
}

/* ============================================================
   15. 移动端搜索框统一样式（Token、Holders、Transactions 页面）
   确保所有页面搜索框大小和UI 100%一致
   ============================================================ */

@media (max-width: 768px) {
    /* 统一搜索框基础样式 - 移动端 */
    .search-input,
    #search-input,
    #token-search-input,
    main #search-input,
    main #token-search-input {
        height: 48px !important;
        font-size: 16px !important;
        padding: 0.75rem 2.75rem 0.75rem 1rem !important;
        border-radius: 12px !important;
        border: 1.5px solid #d1d5db !important; /* gray-300 更清晰 */
        background-color: #ffffff !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        -webkit-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
    }
    
    /* 统一搜索图标 */
    .search-icon,
    .search-container .search-icon,
    .search-wrapper .search-icon {
        width: 18px !important;
        height: 18px !important;
        right: 12px !important;
        color: #9ca3af !important;
    }
    
    /* 统一加载动画 */
    .search-loading .loading-spinner {
        --spinner-size: 16px !important;
        --spinner-border: 2px !important;
    }
    
    /* 暗黑模式统一样式 - 移动端 */
    .dark .search-input,
    .dark #search-input,
    .dark #token-search-input,
    .dark main #search-input,
    .dark main #token-search-input {
        background-color: #161b22 !important;
        border: 1.5px solid rgba(240, 246, 252, 0.25) !important; /* 更清晰的边框 */
        color: #f0f6fc !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    }
    
    .dark .search-icon,
    .dark .search-container .search-icon,
    .dark .search-wrapper .search-icon {
        color: #6b7280 !important;
    }
}

/* 小屏幕手机 (360px以下) */
@media (max-width: 360px) {
    .search-input,
    #search-input,
    #token-search-input,
    main #search-input,
    main #token-search-input {
        height: 44px !important;
        font-size: 15px !important;
    }
}

/* 大屏幕手机 (414px以上) */
@media (min-width: 414px) and (max-width: 768px) {
    .search-input,
    #search-input,
    #token-search-input,
    main #search-input,
    main #token-search-input {
        height: 52px !important;
        font-size: 16px !important;
    }
}

/* ============================================================
   16. 电脑端搜索框统一样式（Holders、Transactions 页面）
   确保这两个页面搜索框大小和UI 100%一致
   ============================================================ */

@media (min-width: 769px) {
    /* 统一搜索框基础样式 - 电脑端 */
    .search-input,
    #search-input,
    #token-search-input,
    main #search-input,
    main #token-search-input {
        height: 56px !important;
        font-size: 18px !important;
        padding: 1rem 3rem 1rem 1.25rem !important;
        border-radius: 12px !important;
        border: 1.5px solid #d1d5db !important; /* gray-300 更清晰 */
        background-color: #ffffff !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    }
    
    /* 悬停状态 - 电脑端 */
    .search-input:hover,
    #search-input:hover,
    #token-search-input:hover,
    main #search-input:hover,
    main #token-search-input:hover {
        border-color: #9ca3af !important; /* gray-400 悬停加深 */
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* 聚焦状态 - 电脑端 */
    .search-input:focus,
    #search-input:focus,
    #token-search-input:focus,
    main #search-input:focus,
    main #token-search-input:focus {
        border-color: #6b7280 !important; /* gray-500 聚焦最深 */
        box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.15) !important; /* 柔和的聚焦光环 */
        outline: none !important;
    }
    
    /* 统一搜索图标 - 电脑端 */
    .search-icon,
    .search-container .search-icon,
    .search-wrapper .search-icon {
        width: 20px !important;
        height: 20px !important;
        right: 16px !important;
        color: #9ca3af !important;
    }
    
    /* 暗黑模式统一样式 - 电脑端 */
    .dark .search-input,
    .dark #search-input,
    .dark #token-search-input,
    .dark main #search-input,
    .dark main #token-search-input {
        background-color: #161b22 !important;
        border: 1.5px solid rgba(240, 246, 252, 0.25) !important; /* 更清晰的边框 */
        color: #f0f6fc !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    }
    
    .dark .search-input:hover,
    .dark #search-input:hover,
    .dark #token-search-input:hover,
    .dark main #search-input:hover,
    .dark main #token-search-input:hover {
        border-color: rgba(240, 246, 252, 0.4) !important; /* 悬停加深 */
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
    }
    
    .dark .search-input:focus,
    .dark #search-input:focus,
    .dark #token-search-input:focus,
    .dark main #search-input:focus,
    .dark main #token-search-input:focus {
        border-color: rgba(240, 246, 252, 0.55) !important; /* 聚焦最亮 */
        box-shadow: 0 0 0 3px rgba(240, 246, 252, 0.12) !important; /* 柔和的聚焦光环 */
        outline: none !important;
    }
    
    .dark .search-icon,
    .dark .search-container .search-icon,
    .dark .search-wrapper .search-icon {
        color: #6b7280 !important;
    }
}