/**
 * CHN-SD Ocean Plus FTIP - 全局配色系统
 * 蓝色主调·企业级标准
 * 符合WCAG 2.1 AA级对比度标准（≥4.5:1）
 */

/* ========== CSS变量定义 ========== */
:root {
    /* ========== FTIP 主题色体系（深海蓝·外贸专业） ========== */
    --ftip-primary: #1e3a5f;            /* 深海蓝 - Header/侧边栏 */
    --ftip-primary-light: #2563eb;      /* 亮蓝 - hover/激活 */
    --ftip-accent: #c9a227;             /* 金棕色 - 强调色 */
    --ftip-bg-page: #f0f3f7;            /* 微蓝灰页面背景 */
    --ftip-bg-card: #ffffff;            /* 纯白卡片 */
    --ftip-bg-sidebar: #2C5F7C;         /* 深海蓝侧边栏 */
    --ftip-bg-header: #0B4FBF;          /* Logo蓝Header */
    --ftip-text-on-dark: #ffffff;       /* 深色背景文字 */
    --ftip-text-on-dark-accent: #fbbf24;/* 金橙色标题强调 */
    --ftip-text-primary: #1e293b;       /* 深灰蓝主文字 */
    --ftip-text-secondary: #64748b;     /* 中灰次要文字 */
    --ftip-text-muted: #94a3b8;         /* 浅灰辅助文字 */
    --ftip-border: #e2e8f0;
    --ftip-divider: rgba(255,255,255,0.1);

    /* ========== 1. 主色体系（蓝色主调·5个层级） ========== */
    --color-primary: #165DFF;           /* 主色-标准蓝 */
    --color-primary-light: #4080FF;     /* 主色-浅蓝 */
    --color-primary-dark: #0E42D2;      /* 主色-深蓝 */
    --color-primary-bg: #E8F3FF;        /* 主色-极浅蓝 */
    --color-primary-disabled: #94BFFF;  /* 主色-淡蓝 */

    /* ========== 2. 功能状态色（高对比·一眼识别） ========== */
    --color-success: #10B981;           /* 成功绿 */
    --color-success-light: #D1FAE5;     /* 浅绿背景 */
    --color-error: #EF4444;            /* 错误红 */
    --color-error-light: #FEF2F2;       /* 浅红背景 */
    --color-warning: #F59E0B;          /* 警告橙 */
    --color-warning-light: #FEF3C7;      /* 浅橙背景 */
    --color-neutral: #6B7280;          /* 中性灰 */
    --color-neutral-light: #F3F4F6;      /* 浅灰背景 */
    --color-vip: #8B5CF6;              /* 会员紫 */
    --color-vip-light: #EDE9FE;        /* 浅紫背景 */

    /* ========== 3. 中性色体系（分层清晰） ========== */
    --color-white: #FFFFFF;
    --color-gray-50: #F9FAFB;          /* 极浅灰 */
    --color-gray-100: #F3F4F6;         /* 浅灰 */
    --color-gray-200: #E5E7EB;         /* 边框灰 */
    --color-gray-300: #D1D5DB;         /* 分割线 */
    --color-gray-400: #9CA3AF;         /* 辅助灰 */
    --color-gray-500: #6B7280;         /* 正文灰 */
    --color-gray-600: #4B5563;         /* 次要正文 */
    --color-gray-700: #374151;         /* 主文灰 */
    --color-gray-800: #1F2937;         /* 深文灰 */
    --color-gray-900: #111827;         /* 深黑灰 */
    --color-black: #000000;

    /* ========== 4. 文字颜色 ========== */
    --text-primary: #111827;           /* 一级标题 */
    --text-secondary: #374151;          /* 主要正文 */
    --text-tertiary: #6B7280;          /* 次要正文 */
    --text-helper: #9CA3AF;            /* 辅助文字 */
    --text-disabled: #D1D5DB;          /* 禁用文字 */
    --text-inverse: #FFFFFF;           /* 反色文字 */

    /* ========== 5. 背景颜色 ========== */
    --bg-page: #F9FAFB;                /* 页面底色 */
    --bg-card: #FFFFFF;               /* 卡片背景 */
    --bg-hover: #F3F4F6;              /* 悬停背景 */
    --bg-selected: #E8F3FF;           /* 选中背景 */

    /* ========== 6. 边框颜色 ========== */
    --border-default: #E5E7EB;
    --border-hover: #D1D5DB;
    --border-focus: #165DFF;

    /* ========== 7. 阴影 ========== */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

    /* ========== 8. 字体大小 ========== */
    --font-xs: 12px;
    --font-sm: 13px;
    --font-base: 14px;
    --font-lg: 16px;
    --font-xl: 18px;
    --font-2xl: 20px;
    --font-3xl: 24px;

    /* ========== 9. 间距 ========== */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --spacing-2xl: 24px;
    --spacing-3xl: 32px;

    /* ========== 10. 圆角 ========== */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-full: 9999px;

    /* ========== 11. 全站语义别名（UI-12 唯一视觉引用层） ========== */
    /* 新增页面只引用本组变量；旧变量保留为底层值，避免形成第三套颜色体系。 */
    --ftip-color-primary-action: var(--color-primary);
    --ftip-color-success: var(--color-success);
    --ftip-color-warning: var(--color-warning);
    --ftip-color-danger: var(--color-error);
    --ftip-color-info: var(--color-neutral);
    --ftip-surface-raised: var(--bg-card);
    --ftip-surface-muted: var(--color-gray-50);
    --ftip-text-strong: var(--text-primary);
    --ftip-text-body: var(--text-secondary);
    --ftip-text-muted: var(--text-tertiary);
    --ftip-border-subtle: var(--border-default);
    --ftip-border-strong: var(--border-hover);
    --ftip-space-1: var(--spacing-xs);
    --ftip-space-2: var(--spacing-sm);
    --ftip-space-3: var(--spacing-md);
    --ftip-space-4: var(--spacing-lg);
    --ftip-space-5: var(--spacing-xl);
    --ftip-space-6: var(--spacing-2xl);
    --ftip-control-height: 32px;
    --ftip-focus-ring: 0 0 0 3px rgba(37, 99, 235, .28);
}

/* ========== 全局样式重置 ========== */
* {
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: var(--font-base);
    color: var(--text-secondary);
    background-color: var(--bg-page);
    line-height: 1.5;
    margin: 0;
    padding: 0;
}

/* ========== 文字颜色类 ========== */
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-tertiary { color: var(--text-tertiary) !important; }
.text-helper { color: var(--text-helper) !important; }
.text-disabled { color: var(--text-disabled) !important; }
.text-inverse { color: var(--text-inverse) !important; }

.text-primary-blue { color: var(--color-primary) !important; }
.text-success { color: var(--color-success) !important; }
.text-error { color: var(--color-error) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-vip { color: var(--color-vip) !important; }

/* ========== 背景颜色类 ========== */
.bg-page { background-color: var(--bg-page) !important; }
.bg-card { background-color: var(--bg-card) !important; }
.bg-hover { background-color: var(--bg-hover) !important; }
.bg-selected { background-color: var(--bg-selected) !important; }

.bg-primary { background-color: var(--color-primary) !important; }
.bg-primary-light { background-color: var(--color-primary-light) !important; }
.bg-primary-dark { background-color: var(--color-primary-dark) !important; }
.bg-primary-bg { background-color: var(--color-primary-bg) !important; }

.bg-success { background-color: var(--color-success) !important; }
.bg-success-light { background-color: var(--color-success-light) !important; }
.bg-error { background-color: var(--color-error) !important; }
.bg-error-light { background-color: var(--color-error-light) !important; }
.bg-warning { background-color: var(--color-warning) !important; }
.bg-warning-light { background-color: var(--color-warning-light) !important; }
.bg-vip { background-color: var(--color-vip) !important; }
.bg-vip-light { background-color: var(--color-vip-light) !important; }

/* ========== 边框颜色类 ========== */
.border-default { border-color: var(--border-default) !important; }
.border-hover { border-color: var(--border-hover) !important; }
.border-focus { border-color: var(--border-focus) !important; }
.border-primary { border-color: var(--color-primary) !important; }
.border-success { border-color: var(--color-success) !important; }
.border-error { border-color: var(--color-error) !important; }
.border-warning { border-color: var(--color-warning) !important; }
.border-vip { border-color: var(--color-vip) !important; }

/* ========== 卡片样式 ========== */
.card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--spacing-xl);
    border: 1px solid var(--border-default);
    transition: all 0.2s ease;
}

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

.card-header {
    font-size: var(--font-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-default);
}

/* ========== 按钮样式 ========== */

/* 主按钮 */
.btn-primary {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--text-inverse) !important;
    font-size: var(--font-base);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

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

.btn-primary:active {
    background-color: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
}

.btn-primary:disabled {
    background-color: var(--color-primary-disabled) !important;
    border-color: var(--color-primary-disabled) !important;
    color: var(--text-inverse) !important;
}

/* 次要按钮 */
.btn-secondary {
    background-color: var(--bg-card) !important;
    border-color: var(--border-default) !important;
    color: var(--text-secondary) !important;
    font-size: var(--font-base);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

.btn-secondary:hover {
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
}

.btn-secondary:active {
    background-color: var(--bg-selected) !important;
}

/* 危险按钮 */
.btn-danger {
    background-color: var(--color-error) !important;
    border-color: var(--color-error) !important;
    color: var(--text-inverse) !important;
    font-size: var(--font-base);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

.btn-danger:hover {
    background-color: #F87171 !important;
    border-color: #F87171 !important;
}

.btn-danger:active {
    background-color: #DC2626 !important;
    border-color: #DC2626 !important;
}

/* 成功按钮 */
.btn-success {
    background-color: var(--color-success) !important;
    border-color: var(--color-success) !important;
    color: var(--text-inverse) !important;
    font-size: var(--font-base);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

.btn-success:hover {
    background-color: #34D399 !important;
    border-color: #34D399 !important;
}

.btn-success:active {
    background-color: #059669 !important;
    border-color: #059669 !important;
}

/* ========== 标签样式 ========== */
.tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: var(--font-xs);
    font-weight: 500;
}

.tag-primary {
    background-color: var(--color-primary-bg);
    color: var(--color-primary);
}

.tag-success {
    background-color: var(--color-success-light);
    color: var(--color-success);
}

.tag-error {
    background-color: var(--color-error-light);
    color: var(--color-error);
}

.tag-warning {
    background-color: var(--color-warning-light);
    color: var(--color-warning);
}

.tag-vip {
    background-color: var(--color-vip-light);
    color: var(--color-vip);
}

/* ========== 表格样式 ========== */
.table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.table th {
    background-color: var(--bg-page);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: var(--font-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    text-align: left;
    border-bottom: 1px solid var(--border-default);
}

.table td {
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--border-default);
    font-size: var(--font-base);
    color: var(--text-secondary);
}

.table tr:hover {
    background-color: var(--bg-hover);
}

.table tr:last-child td {
    border-bottom: none;
}

/* 跟进状态特殊行样式已移至 modules/module-followup.css */

/* 选中行 */
.selected-row {
    background-color: var(--bg-selected) !important;
    box-shadow: inset 0 0 0 1px var(--color-primary);
}

/* 阶段标签通用样式 */
.stage-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: var(--font-xs);
    font-weight: 600;
}

/* 状态标签通用样式 */
.status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--radius-md);
    font-size: var(--font-xs);
    font-weight: 600;
}

/* ========== 导航样式 ========== */

/* 顶部导航 */
.navbar {
    background-color: var(--bg-card);
    border-bottom: 1px solid var(--border-default);
    height: 60px;
}

.navbar .nav-item {
    color: var(--text-secondary);
}

.navbar .nav-item:hover {
    color: var(--color-primary);
}

.navbar .nav-item.active {
    color: var(--color-primary);
    border-bottom: 3px solid var(--color-primary);
}

/* 侧边栏 */
.sidebar {
    background-color: var(--bg-page);
}

.sidebar .menu-item {
    color: var(--text-tertiary);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

.sidebar .menu-item:hover {
    background-color: var(--bg-hover);
    color: var(--text-secondary);
}

.sidebar .menu-item.active {
    background-color: var(--bg-selected);
    color: var(--color-primary);
}

.sidebar .menu-item.admin-only {
    color: var(--color-vip);
}

/* ========== 表单样式 ========== */
input, select, textarea {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-base);
    color: var(--text-secondary);
    background-color: var(--bg-card);
    transition: all 0.2s ease;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(22, 93, 255, 0.1);
}

input::placeholder {
    color: var(--text-helper);
}

input:disabled, select:disabled, textarea:disabled {
    background-color: var(--color-neutral-light);
    color: var(--text-disabled);
}

/* ========== 统计卡片 ========== */
.stat-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--spacing-xl);
    border: 1px solid var(--border-default);
}

.stat-card .stat-value {
    font-size: var(--font-3xl);
    font-weight: 700;
    color: var(--text-primary);
}

.stat-card .stat-label {
    font-size: var(--font-sm);
    color: var(--text-tertiary);
    margin-top: var(--spacing-xs);
}

/* ========== 进度条 ========== */
.progress-bar {
    height: 8px;
    background-color: var(--border-default);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.progress-bar .progress {
    height: 100%;
    background-color: var(--color-primary);
    border-radius: var(--radius-full);
    transition: width 0.3s ease;
}

/* ========== 徽章 ========== */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--radius-full);
    font-size: var(--font-xs);
    font-weight: 600;
}

.badge-primary {
    background-color: var(--color-primary);
    color: var(--text-inverse);
}

.badge-success {
    background-color: var(--color-success);
    color: var(--text-inverse);
}

.badge-error {
    background-color: var(--color-error);
    color: var(--text-inverse);
}

.badge-warning {
    background-color: var(--color-warning);
    color: var(--text-inverse);
}

/* ========== 阶段标签 ========== */
.stage-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: var(--font-sm);
    font-weight: 500;
}

.stage-initial { background-color: var(--color-primary-bg); color: var(--color-primary); }
.stage-contacted { background-color: #FEF3C7; color: #F59E0B; }
.stage-interested { background-color: #E0E7FF; color: #8B5CF6; }
.stage-negotiating { background-color: #FEE2E2; color: #EF4444; }
.stage-completed { background-color: #D1FAE5; color: #10B981; }

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

::-webkit-scrollbar-track {
    background: var(--bg-page);
}

::-webkit-scrollbar-thumb {
    background: var(--border-default);
    border-radius: var(--radius-full);
}

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

/* ========== 动画 ========== */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.3s ease;
}

.slide-in {
    animation: slideIn 0.3s ease;
}

/* ========== FTIP 统一卡片样式 ========== */
.ftip-card {
    background: var(--ftip-bg-card);
    border-radius: 12px;
    border: 1px solid var(--ftip-border);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    padding: 20px;
    transition: box-shadow 0.2s, transform 0.2s;
}
.ftip-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-1px);
}

/* 各模块通过额外类名自定义（不覆盖基础样式） */
.development-card { border-top: 3px solid #2563eb; }
.followup-card { border-top: 3px solid #f97316; }
.ai-card { border-top: 3px solid #8b5cf6; }
.template-card { border-top: 3px solid #c9a227; }
.knowledge-card { border-top: 3px solid #0ea5e9; }

/* ========== FTIP 统一页面标题样式 ========== */
.ftip-page-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #f0f4f8 0%, #e2e8f0 100%);
    border-radius: 10px;
    margin-bottom: 20px;
    border-left: 4px solid var(--ftip-primary);
}
.ftip-page-header .icon { font-size: 22px; }
.ftip-page-header .title-zh {
    font-size: 18px;
    font-weight: 700;
    color: var(--ftip-primary);
}
.ftip-page-header .title-en {
    font-size: 13px;
    font-weight: 500;
    color: var(--ftip-text-secondary);
    letter-spacing: 0.5px;
}
.ftip-page-header .actions {
    margin-left: auto;
    display: flex;
    gap: 8px;
}

/* ========== 预留页面空壳样式 ========== */
.reserved-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    text-align: center;
}
.reserved-page .reserved-icon {
    font-size: 64px;
    margin-bottom: 20px;
}
.reserved-page h2 {
    font-size: 24px;
    color: var(--ftip-text-primary);
    margin-bottom: 8px;
}
.reserved-page p {
    font-size: 16px;
    color: var(--ftip-text-secondary);
}