/* 自定义样式，用于增强Tailwind CSS框架 */

/* 暗黑模式样式 */
.dark-mode {
    --bg-color: #121212;
    --text-color: #ffffff;
    --card-bg: #1e1e1e;
    --border-color: #444;
    --hover-color: #2d2d2d;
    --sidebar-bg: #1a1a1a;
    --sidebar-hover: #252525;
    --sidebar-border: #444;
    --button-text: #ffffff;
    --tag-bg: #2a2a2a;
    --tag-text: #ffffff;
    --tag-border: #555;
}

body.dark-mode {
    background-color: var(--bg-color);
    color: var(--text-color);
}

.dark-mode nav,
.dark-mode footer,
.dark-mode .bg-white {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

.dark-mode .border,
.dark-mode .border-t,
.dark-mode .border-b {
    border-color: var(--border-color) !important;
}

.dark-mode .text-gray-900 {
    color: var(--text-color) !important;
}

.dark-mode .text-gray-600,
.dark-mode .text-gray-500,
.dark-mode .text-gray-700 {
    color: #d0d0d0 !important;
}

.dark-mode input,
.dark-mode select {
    background-color: #252525;
    border-color: var(--border-color);
    color: var(--text-color);
}

.dark-mode input::placeholder {
    color: #9ca3af;
}

.dark-mode .hover\:bg-gray-200:hover {
    background-color: var(--hover-color) !important;
}

.dark-mode .bg-gray-100 {
    background-color: #252525 !important;
}

.dark-mode .hover\:bg-gray-200:hover {
    background-color: #3a3a3a !important;
}

.dark-mode .bg-gray-50 {
    background-color: #1a1a1a !important;
}

/* 侧边栏暗黑模式 */
.dark-mode #sidebar {
    background-color: var(--sidebar-bg);
    border-right-color: var(--sidebar-border);
}

.dark-mode #sidebar .border-b,
.dark-mode #sidebar .border-t {
    border-color: var(--sidebar-border);
}

.dark-mode #sidebar .hover\:bg-gray-100:hover {
    background-color: var(--sidebar-hover) !important;
}

.dark-mode #sidebar .active-nav-item {
    background-color: var(--sidebar-hover);
}

.dark-mode #sidebar .bg-gray-50 {
    background-color: #151515 !important;
}

.dark-mode #sidebar .bg-gray-200 {
    background-color: #444 !important;
}

/* 工具标签样式增强 - 暗黑模式 */
.dark-mode button.px-3.py-1\.5:not(.bg-gray-800),
.dark-mode .px-3.py-1\.5.bg-gray-100 {
    background-color: var(--tag-bg) !important;
    color: var(--tag-text) !important;
    border: 1px solid var(--tag-border) !important;
}

.dark-mode button.px-3.py-1\.5:hover:not(.bg-gray-800),
.dark-mode .px-3.py-1\.5.bg-gray-100:hover {
    background-color: #3d3d3d !important;
}

/* 全部按钮特殊样式 */
.dark-mode button.px-3.py-1\.5.bg-gray-800 {
    background-color: #4a4a4a !important;
    color: #ffffff !important;
}

/* 统计卡片文字增强 */
.dark-mode .text-gray-500.text-sm {
    color: #c0c0c0 !important;
}

.dark-mode .text-2xl.font-bold {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* 质量滑块样式 */
input[type=range] {
    -webkit-appearance: none;
    height: 5px;
    border-radius: 5px;
    background: #e2e8f0;
    outline: none;
}

.dark-mode input[type=range] {
    background: #4b5563;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #1f2937;
    cursor: pointer;
}

.dark-mode input[type=range]::-webkit-slider-thumb {
    background: #d1d5db;
}

/* 切换开关样式 */
input:checked ~ div.w-5 {
    transform: translateX(100%);
}

input:checked ~ div.bg-gray-300 {
    background-color: #6b7280;
}

.dark-mode input:checked ~ div.w-5 {
    transform: translateX(100%);
}

.dark-mode input:checked ~ div.bg-gray-300 {
    background-color: #6b7280;
}

/* 文件拖放区域 */
#upload-container.drag-over {
    border-color: #4b5563;
    background-color: rgba(243, 244, 246, 0.1);
}

.dark-mode #upload-container.drag-over {
    border-color: #9ca3af;
    background-color: rgba(30, 30, 30, 0.5);
}

/* 动画效果 */
.fade-in {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 侧边栏动画 */
.active-nav-item {
    background-color: #f3f4f6;
    position: relative;
}

.active-nav-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: #1f2937;
}

.dark-mode .active-nav-item::before {
    background-color: #60a5fa;
}

/* 卡片悬停效果 */
.hover-card-shadow:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
}

.dark-mode .hover-card-shadow:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
}

/* 按钮渐变 */
.btn-gradient {
    background: linear-gradient(45deg, #1a202c, #2d3748);
    transition: all 0.3s ease;
}

.btn-gradient:hover {
    background: linear-gradient(45deg, #111827, #1f2937);
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.dark-mode .btn-gradient {
    background: linear-gradient(45deg, #2d3748, #4a5568);
}

.dark-mode .btn-gradient:hover {
    background: linear-gradient(45deg, #4a5568, #6b7280);
}

/* 顶部信息卡片渐变线 */
.gradient-line {
    height: 4px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
    border-radius: 0 0 4px 4px;
}

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

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

.dark-mode ::-webkit-scrollbar-track {
    background: #2d3748;
}

.dark-mode ::-webkit-scrollbar-thumb {
    background: #4a5568;
}

.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}

/* 卡片加载动画 */
.pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* 悬浮按钮 */
.fab-button {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #1f2937;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    z-index: 10;
}

.fab-button:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}

.dark-mode .fab-button {
    background-color: #3b82f6;
}

/* 菜单动画 */
.menu-dropdown {
    transform-origin: top;
    transition: transform 0.2s ease, opacity 0.2s ease;
    transform: scaleY(0);
    opacity: 0;
}

.menu-dropdown.open {
    transform: scaleY(1);
    opacity: 1;
}

/* 图标旋转动画 */
.icon-rotate {
    transition: transform 0.3s ease;
}

.icon-rotate.rotate {
    transform: rotate(180deg);
}

/* 响应式调整 */
@media (max-width: 640px) {
    h1 {
        font-size: 1.5rem;
    }
    
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .fab-button {
        width: 48px;
        height: 48px;
        bottom: 20px;
        right: 20px;
    }
}

/* 顶部信息卡片按钮样式 - 暗黑模式 */
/* 浏览工具按钮 */
.dark-mode a.inline-flex.items-center.bg-white.bg-opacity-20 {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.dark-mode a.inline-flex.items-center.bg-white.bg-opacity-20:hover {
    background-color: rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* 收藏工具按钮 */
.dark-mode button.inline-flex.items-center.bg-white.text-gray-800,
.dark-mode button.bg-white.text-gray-800 {
    background-color: #2d2d2d !important;
    color: #ffffff !important;
    border: 1px solid #555 !important;
}

.dark-mode button.inline-flex.items-center.bg-white.text-gray-800:hover,
.dark-mode button.bg-white.text-gray-800:hover {
    background-color: #3d3d3d !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* 收藏工具图标高亮 */
.dark-mode button.inline-flex.items-center.bg-white.text-gray-800 i.fas.fa-star,
.dark-mode button.bg-white.text-gray-800 i.fas.fa-star {
    color: #fbbf24 !important; /* 星星图标使用金黄色 */
}

/* 禁用按钮样式 - 暗黑模式 */
.dark-mode button.bg-gray-300.text-gray-500,
.dark-mode button.inline-flex.bg-gray-300.text-gray-500 {
    background-color: #3a3a3a !important;
    color: #a0a0a0 !important;
    border: 1px solid #555 !important;
}

/* 按钮旁的禁用图标按钮 */
.dark-mode button.text-gray-300.cursor-not-allowed {
    color: #666666 !important;
}

/* 开发中的标签 */
.dark-mode span.bg-purple-100.text-purple-600 {
    background-color: rgba(124, 58, 237, 0.2) !important;
    color: #c084fc !important;
}