/**
 * 浅色主题样式 - 青色主题
 * 覆盖全局主题的深色配置
 */

:root {
    /* 主色调 - 青色（保持不变） */
    --primary-color: #008d94;
    --primary-hover: #00a3ab;
    --primary-active: #006b70;
    --primary-light: #ccf5f7;
    --primary-gradient: linear-gradient(135deg, #008d94 0%, #006b70 100%);
    
    /* 背景色 - 浅色 */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F5F7FA;
    --bg-tertiary: #E5E7EB;
    --bg-card: #FFFFFF;
    --bg-hover: rgba(0, 141, 148, 0.05);
    
    /* 文字颜色 - 深色 */
    --text-primary: #1F2937;
    --text-secondary: #4B5563;
    --text-tertiary: #6B7280;
    --text-disabled: #9CA3AF;
    
    /* 边框颜色 */
    --border-color: #E5E7EB;
    --border-hover: #008d94;
    --border-focus: #00a3ab;
    
    /* 状态颜色 */
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --error-color: #ef4444;
    --info-color: #3b82f6;
    
    /* 阴影 - 浅色主题阴影 */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
    --shadow-primary: 0 4px 12px rgba(0, 141, 148, 0.2);
}

/* 全局背景 */
body {
    background: linear-gradient(135deg, #F5F7FA 0%, #FFFFFF 100%) !important;
    color: var(--text-primary) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
}

/* 确保所有文本元素都使用正确的字体 */
* {
    font-family: inherit;
}

select, option, input, textarea, button {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
}

/* 页面头部 */
.page-header {
    background: var(--bg-card) !important;
    border-bottom: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-sm) !important;
}

/* 卡片 */
.card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-sm) !important;
}

.card:hover {
    box-shadow: var(--shadow-md) !important;
}

.card-header {
    border-bottom: 1px solid var(--border-color) !important;
}

/* 按钮 */
.btn-secondary {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

.btn-secondary:hover {
    background: var(--bg-tertiary) !important;
}

/* 输入框 */
.input,
.textarea,
.select {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.input:focus,
.textarea:focus,
.select:focus {
    border-color: var(--border-focus) !important;
    box-shadow: 0 0 0 3px rgba(0, 141, 148, 0.1) !important;
}

.input::placeholder,
.textarea::placeholder {
    color: var(--text-disabled) !important;
}

/* 上传区域 */
.upload-area {
    border: 2px dashed var(--border-color) !important;
    background: var(--bg-secondary) !important;
}

.upload-area:hover {
    border-color: var(--primary-color) !important;
    background: var(--bg-hover) !important;
}

/* 预览区域 */
.preview-container {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
}

/* 加载状态 */
.spinner {
    border: 2px solid var(--border-color);
    border-top-color: var(--primary-color);
}

/* 进度条 */
.progress-bar {
    background: var(--bg-tertiary);
}

/* 提示框 */
.alert-info {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.alert-success {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.alert-warning {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.alert-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* 分隔线 */
.divider {
    background: var(--border-color);
}

/* 滚动条样式 */
::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}

/* 特定组件覆盖 */

/* 导航栏 */
.navbar,
.header {
    background: var(--bg-card) !important;
    border-bottom: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-sm) !important;
}

/* 侧边栏 */
.sidebar {
    background: var(--bg-card) !important;
    border-right: 1px solid var(--border-color) !important;
}

/* 模块卡片 */
.feature-card,
.module-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-sm) !important;
}

.feature-card:hover,
.module-card:hover {
    box-shadow: var(--shadow-md) !important;
    border-color: var(--primary-color) !important;
}

/* 搜索框 */
.search-box,
.search-input {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.search-box:focus,
.search-input:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(0, 141, 148, 0.1) !important;
}

/* 下拉菜单 */
.dropdown-menu,
.select-menu {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-lg) !important;
}

.dropdown-item:hover,
.select-option:hover {
    background: var(--bg-hover) !important;
}

/* 模态框 */
.modal-content,
.dialog {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-xl) !important;
}

.modal-header,
.dialog-header {
    border-bottom: 1px solid var(--border-color) !important;
}

.modal-footer,
.dialog-footer {
    border-top: 1px solid var(--border-color) !important;
}

/* 表格 */
table {
    background: var(--bg-card) !important;
}

thead {
    background: var(--bg-secondary) !important;
}

th {
    color: var(--text-primary) !important;
    border-bottom: 2px solid var(--border-color) !important;
}

td {
    color: var(--text-secondary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

tr:hover {
    background: var(--bg-hover) !important;
}

/* 标签页 */
.tabs {
    background: var(--bg-card) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.tab {
    color: var(--text-secondary) !important;
    border: 1px solid transparent !important;
}

.tab:hover {
    color: var(--primary-color) !important;
    background: var(--bg-hover) !important;
}

.tab.active {
    color: var(--primary-color) !important;
    border-bottom-color: var(--primary-color) !important;
    background: var(--bg-card) !important;
}

/* 面包屑 */
.breadcrumb {
    background: var(--bg-secondary) !important;
    color: var(--text-secondary) !important;
}

.breadcrumb-item {
    color: var(--text-secondary) !important;
}

.breadcrumb-item.active {
    color: var(--text-primary) !important;
}

/* 工具提示 */
.tooltip {
    background: var(--text-primary) !important;
    color: var(--bg-card) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* 加载骨架屏 */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-secondary) 25%,
        var(--bg-tertiary) 50%,
        var(--bg-secondary) 75%
    ) !important;
}

/* 图片对比查看器 */
.image-compare-viewer {
    background: rgba(255, 255, 255, 0.95) !important;
}

.viewer-header {
    background: var(--bg-card) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.viewer-btn {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.viewer-btn:hover {
    background: var(--primary-color) !important;
    color: white !important;
}

/* 通知 */
.notification {
    box-shadow: var(--shadow-xl) !important;
}

/* 徽章 */
.badge-primary {
    background: var(--primary-light) !important;
    color: var(--primary-active) !important;
}

/* 响应式调整 */
@media (max-width: 768px) {
    body {
        background: var(--bg-card);
    }
}

/* 打印样式 */
@media print {
    body {
        background: white !important;
        color: black !important;
    }
    
    .card {
        border: 1px solid #ddd !important;
        box-shadow: none !important;
    }
}