/* ========================================
   全局基础样式文件 (Global Base Styles)
   
   此文件包含所有区域共享的基础样式：
   - CSS变量定义（颜色、间距、字体等）
   - CSS Reset & 基础样式
   - 主题系统（明暗主题）
   - 基础组件（按钮、表单、卡片）
   - 工具类
   - 响应式断点
   - 通用动画
   
   引用顺序：
   1. global.css（本文件）
   2. frontend.css / admin.css / user.css
   3. 页面专用CSS
======================================== */

/* ========================================
   CSS Reset & Base Styles
======================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ========================================
   CSS变量定义 - 明亮主题
======================================== */

:root {
    /* ========== 颜色系统 ========== */

    /* 主色调 - Google Material Design 3 inspired */
    --primary: #1976d2;
    /* 主色调 - 蓝色 */
    --primary-variant: #1565c0;
    /* 主色调变体 - 深蓝 */
    --primary-dark: #0d47a1;
    /* 主色调深色 */
    --primary-light: #42a5f5;
    /* 主色调浅色 */
    --primary-container: #e3f2fd;
    /* 主色容器背景 */
    --on-primary-container: #0d47a1;
    /* 主色容器文字 */

    /* 次要色调 */
    --secondary: #03dac6;
    /* 次要色调 - 青色 */
    --secondary-variant: #018786;
    /* 次要色调变体 */
    --secondary-container: #b2dfdb;
    /* 次要色容器 */
    --on-secondary-container: #004d40;
    /* 次要色容器文字 */

    /* 表面与背景色 */
    --surface: #ffffff;
    /* 表面色 - 白色 */
    --surface-variant: #f8f9fa;
    /* 表面变体 - 浅灰 */
    --surface-container: #f5f5f5;
    /* 表面容器 */
    --background: #fafafa;
    /* 背景色 */
    --on-primary: #ffffff;
    /* 主色上的文字 */
    --on-surface: #1a1a1a;
    /* 表面上的文字 */
    --on-surface-variant: #5f6368;
    /* 表面变体上的文字 */
    --on-background: #1a1a1a;
    /* 背景上的文字 */

    /* 边框色 */
    --outline: #e8eaed;
    /* 边框色 */
    --outline-variant: #dadce0;
    /* 边框变体 */

    /* 状态颜色 */
    --color-success: #22c55e;
    /* 成功 - 绿色 */
    --color-error: #ef4444;
    /* 错误 - 红色 */
    --error-dark: #dc2626;
    /* 错误深色 - 深红 */
    --color-warning: #f59e0b;
    /* 警告 - 黄色 */
    --color-info: #3b82f6;
    /* 信息 - 蓝色 */

    /* 状态颜色背景（浅色） */
    --color-success-bg: rgba(34, 197, 94, 0.1);
    --color-error-bg: rgba(239, 68, 68, 0.1);
    --color-warning-bg: rgba(245, 158, 11, 0.1);
    --color-info-bg: rgba(59, 130, 246, 0.1);

    /* 成功状态容器 */
    --success-container: #d1f4e0;
    --on-success-container: #1e7e34;

    /* 反转色（用于深色背景） */
    --inverse-surface: #2c2c2c;
    --inverse-on-surface: #ffffff;

    /* ========== 渐变系统 ========== */
    --gradient-primary: linear-gradient(135deg, #1976d2 0%, #42a5f5 100%);
    --gradient-hero: linear-gradient(135deg, #1976d2 0%, #1e88e5 50%, #42a5f5 100%);

    /* ========== 阴影系统 ========== */
    --elevation-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    --elevation-2: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    --elevation-3: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    --elevation-4: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
    --elevation-5: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);

    /* 3D阴影效果 */
    --shadow-3d-1: 0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    --shadow-3d-2: 0 8px 16px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    --shadow-3d-3: 0 12px 24px rgba(0, 0, 0, 0.18), 0 6px 12px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.25);

    /* ========== 字体系统 ========== */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 800;

    /* ========== 间距系统 ========== */
    --space-1: 0.25rem;
    /* 4px */
    --space-2: 0.5rem;
    /* 8px */
    --space-3: 0.75rem;
    /* 12px */
    --space-4: 1rem;
    /* 16px */
    --space-5: 1.25rem;
    /* 20px */
    --space-6: 1.5rem;
    /* 24px */
    --space-8: 2rem;
    /* 32px */
    --space-10: 2.5rem;
    /* 40px */
    --space-12: 3rem;
    /* 48px */
    --space-16: 4rem;
    /* 64px */
    --space-20: 5rem;
    /* 80px */

    /* ========== 组件尺寸 ========== */
    --header-height: 80px;
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 60px;

    /* ========== 圆角系统 ========== */
    --radius-sm: 0.375rem;
    /* 6px */
    --radius-md: 0.5rem;
    /* 8px */
    --radius-lg: 0.75rem;
    /* 12px */
    --radius-xl: 1rem;
    /* 16px */
    --radius-2xl: 1.5rem;
    /* 24px */
    --radius-full: 9999px;
    /* 完全圆角 */

    /* ========== 动画系统 ========== */
    --duration-fast: 150ms;
    --duration-normal: 300ms;
    --duration-slow: 500ms;
    --easing-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
    --easing-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1);
    --easing-accelerate: cubic-bezier(0.4, 0.0, 1, 1);

    /* ========== 特效 ========== */
    --glass-backdrop: blur(20px);
    --transition-all: all var(--duration-normal) var(--easing-standard);

    /* ========== 动态组件兼容层 (Compat for dynamic JS components) ========== */
    /* 将那些写死的 ts前缀变量 全部桥接到系统标准的自适应变量上 */
    --ts-bg-light: var(--surface-variant);
    --ts-border: var(--outline);
    --ts-text-main: var(--on-surface);
    --ts-text-muted: var(--on-surface-variant);
    --ts-primary: var(--primary);
}

/* ========================================
   CSS变量定义 - 深色主题
======================================== */

[data-theme="dark"] {
    /* 颜色系统 - 深色主题 */
    --primary: #64b5f6;
    /* 主色调 - 亮蓝色 */
    --primary-variant: #42a5f5;
    /* 主色调变体 */
    --primary-dark: #1976d2;
    /* 主色调深色 */
    --primary-light: #90caf9;
    /* 主色调浅色 */
    --primary-container: #1e3a5f;
    /* 主色容器背景 */
    --on-primary-container: #90caf9;
    /* 主色容器文字 */

    --secondary: #4db6ac;
    /* 次要色调 - 青色 */
    --secondary-variant: #26a69a;
    /* 次要色调变体 */
    --secondary-container: #00695c;
    /* 次要色容器 */
    --on-secondary-container: #80cbc4;
    /* 次要色容器文字 */

    --surface: #1f1f1f;
    /* 表面色 - 深灰 */
    --surface-variant: #2a2a2a;
    /* 表面变体 */
    --surface-container: #252525;
    /* 表面容器 */
    --background: #0d1117;
    /* 背景色 - 深色 */
    --on-primary: #ffffff;
    /* 主色上的文字 - 白色，确保在主色按钮上可读 */
    --on-surface: #ffffff;
    /* 表面上的文字 - 白色 */
    --on-surface-variant: #c9d1d9;
    /* 表面变体上的文字 */
    --on-background: #ffffff;
    /* 背景上的文字 */

    --outline: #30363d;
    /* 边框色 */
    --outline-variant: #484f58;
    /* 边框变体 */

    /* 状态颜色保持不变（深色主题也用鲜艳色） */
    --color-success: #22c55e;
    --color-error: #ef4444;
    --error-dark: #dc2626;
    --color-warning: #f59e0b;
    --color-info: #3b82f6;

    --color-success-bg: rgba(34, 197, 94, 0.15);
    --color-error-bg: rgba(239, 68, 68, 0.15);
    --color-warning-bg: rgba(245, 158, 11, 0.15);
    --color-info-bg: rgba(59, 130, 246, 0.15);

    --success-container: #1e3a24;
    --on-success-container: #69f0ae;

    --inverse-surface: #f5f5f5;
    --inverse-on-surface: #1a1a1a;

    /* 渐变系统 - 深色主题 */
    --gradient-primary: linear-gradient(135deg, #64b5f6 0%, #42a5f5 50%, #2196f3 100%);
    --gradient-hero: linear-gradient(135deg, #0d1117 0%, #161b22 20%, #21262d 40%, #30363d 60%, #42a5f5 100%);

    /* 阴影系统 - 深色主题（更强烈） */
    --elevation-1: 0 2px 4px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.4);
    --elevation-2: 0 4px 8px rgba(0, 0, 0, 0.7), 0 2px 4px rgba(0, 0, 0, 0.5);
    --elevation-3: 0 8px 16px rgba(0, 0, 0, 0.8), 0 4px 8px rgba(0, 0, 0, 0.6);
    --elevation-4: 0 12px 24px rgba(0, 0, 0, 0.85), 0 8px 16px rgba(0, 0, 0, 0.65);
    --elevation-5: 0 16px 32px rgba(0, 0, 0, 0.9), 0 12px 24px rgba(0, 0, 0, 0.7);

    --shadow-3d-1: 0 4px 8px rgba(0, 0, 0, 0.8), 0 2px 4px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --shadow-3d-2: 0 8px 16px rgba(0, 0, 0, 0.85), 0 4px 8px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ========================================
   基础HTML标签样式
======================================== */

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height);
}

body {
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    line-height: 1.6;
    color: var(--on-surface);
    background-color: var(--background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
}

/* ========================================
   基础布局容器
======================================== */

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: var(--space-6);
    padding-right: var(--space-6);
}

.container-fluid {
    width: 100%;
    padding-left: var(--space-6);
    padding-right: var(--space-6);
}

/* ========================================
   按钮系统 - 全局统一样式
   
   按钮尺寸规范：
   - btn-xs: 超小按钮 (高度28px) - 用于表格内操作、标签等紧凑场景
   - btn-sm: 小按钮 (高度32px) - 用于筛选器、次要操作
   - btn (默认): 标准按钮 (高度36px) - 用于常规操作
   - btn-md: 中等按钮 (高度40px) - 用于重要操作
   - btn-lg: 大按钮 (高度44px) - 用于主要CTA、表单提交
======================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0 var(--space-4);
    height: 36px;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    font-family: var(--font-family);
    line-height: 1;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: var(--transition-all);
    user-select: none;
    white-space: nowrap;
    outline: none;
}

.btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* 按钮尺寸变体 */
.btn-xs {
    height: 28px;
    padding: 0 var(--space-3);
    font-size: 0.75rem;
    gap: var(--space-1);
}

.btn-xs svg {
    width: 14px;
    height: 14px;
}

.btn-sm {
    height: 32px;
    padding: 0 var(--space-3);
    font-size: 0.8125rem;
}

.btn-sm svg {
    width: 14px;
    height: 14px;
}

.btn-md {
    height: 40px;
    padding: 0 var(--space-5);
    font-size: 0.9375rem;
}

.btn-md svg {
    width: 18px;
    height: 18px;
}

.btn-lg {
    height: 44px;
    padding: 0 var(--space-6);
    font-size: 1rem;
    gap: var(--space-3);
}

.btn-lg svg {
    width: 20px;
    height: 20px;
}

/* 图标按钮（正方形） */
.btn-icon {
    width: 36px;
    padding: 0;
}

.btn-icon.btn-xs {
    width: 28px;
}

.btn-icon.btn-sm {
    width: 32px;
}

.btn-icon.btn-md {
    width: 40px;
}

.btn-icon.btn-lg {
    width: 44px;
}

/* 块级按钮 */
.btn-block {
    width: 100%;
    display: flex;
}

/* 主要按钮 */
.btn-primary {
    background: var(--gradient-primary);
    color: var(--on-primary);
    box-shadow: var(--elevation-2);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--elevation-3);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: var(--elevation-1);
}

/* 次要按钮 */
.btn-secondary {
    background: var(--secondary);
    color: var(--on-primary);
    box-shadow: var(--elevation-1);
}

.btn-secondary:hover {
    background: var(--secondary-variant);
    transform: translateY(-2px);
    box-shadow: var(--elevation-2);
}

/* 边框按钮 */
.btn-outline {
    background: transparent;
    color: var(--on-surface);
    border: 1px solid var(--outline);
}

.btn-outline:hover {
    background: var(--surface-variant);
    border-color: var(--primary);
    color: var(--primary);
}

/* 文字按钮 */
.btn-text {
    background: transparent;
    color: var(--primary);
}

.btn-text:hover {
    background: var(--primary-container);
}

/* 危险/删除按钮 - 红色警示样式 */
.bulk-delete-btn,
.btn-danger {
    color: var(--color-error) !important;
    border-color: var(--color-error) !important;
}

.bulk-delete-btn:hover,
.btn-danger:hover {
    background: var(--color-error) !important;
    color: white !important;
    border-color: var(--color-error) !important;
}

.bulk-delete-btn:active,
.btn-danger:active {
    background: var(--error-dark) !important;
    transform: translateY(0);
}

/* ========================================
   表单组件系统
======================================== */

.form-group {
    margin-bottom: var(--space-6);
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    color: var(--on-surface);
    margin-bottom: var(--space-3);
}

.form-input,
.form-textarea,
.form-select {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--outline);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--on-surface);
    font-size: 0.9375rem;
    font-family: var(--font-family);
    line-height: 1.5;
    transition: all var(--duration-normal) var(--easing-standard);
    outline: none;
}

/* Select 下拉框特殊样式 */
.form-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235f6368' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    background-size: 16px;
    padding-right: var(--space-10);
    cursor: pointer;
}

.form-select:hover {
    border-color: var(--primary);
}

/* 深色主题下的下拉箭头 */
[data-theme="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23c9d1d9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-container);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--on-surface-variant);
    opacity: 0.6;
}

.form-input.error,
.form-textarea.error,
.form-select.error {
    border-color: var(--color-error);
}

.form-input.error:focus,
.form-textarea.error:focus,
.form-select.error:focus {
    box-shadow: 0 0 0 3px var(--color-error-bg);
}

.form-textarea {
    min-height: 100px;
    resize: vertical;
}

/* Select option 样式 */
.form-select option {
    padding: var(--space-2);
    background: var(--surface);
    color: var(--on-surface);
}

.form-select option:hover,
.form-select option:focus,
.form-select option:checked {
    background: var(--primary-container);
    color: var(--on-primary-container);
}

.form-select option:disabled {
    color: var(--on-surface-variant);
    opacity: 0.5;
}

.form-help-text {
    display: block;
    margin-top: var(--space-2);
    font-size: 0.8125rem;
    color: var(--on-surface-variant);
}

.form-error-text {
    display: block;
    margin-top: var(--space-2);
    font-size: 0.8125rem;
    color: var(--color-error);
}

/* ========================================
   下拉列表组件 (Dropdown List)
   用于导航菜单、操作菜单等场景
======================================== */

/* 下拉列表容器 */
.dropdown {
    position: relative;
    display: inline-block;
}

/* 下拉列表触发按钮 */
.dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--surface);
    border: 1px solid var(--outline);
    border-radius: var(--radius-md);
    color: var(--on-surface);
    font-size: 0.9375rem;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--duration-fast) var(--easing-standard);
    user-select: none;
}

.dropdown-toggle:hover {
    background: var(--surface-variant);
    border-color: var(--primary);
}

.dropdown-toggle.active {
    background: var(--primary-container);
    border-color: var(--primary);
    color: var(--primary);
}

/* 下拉箭头图标 */
.dropdown-toggle-icon {
    width: 16px;
    height: 16px;
    transition: transform var(--duration-fast) var(--easing-standard);
}

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

/* 下拉列表菜单 */
.dropdown-menu {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    min-width: 200px;
    background: var(--surface);
    border: 1px solid var(--outline);
    border-radius: var(--radius-lg);
    box-shadow: var(--elevation-3);
    padding: var(--space-2) 0;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(0.95);
    transform-origin: top left;
    transition: all var(--duration-normal) var(--easing-standard);
    max-height: 400px;
    overflow-y: auto;
}

.dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* 右对齐菜单 */
.dropdown-menu.dropdown-menu-right {
    left: auto;
    right: 0;
    transform-origin: top right;
}

/* 向上展开菜单 */
.dropdown-menu.dropdown-menu-up {
    top: auto;
    bottom: calc(100% + var(--space-2));
    transform-origin: bottom left;
}

.dropdown-menu.dropdown-menu-up.show {
    transform: translateY(0) scale(1);
}

/* 下拉列表项 */
.dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    color: var(--on-surface);
    font-size: 0.9375rem;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--duration-fast) var(--easing-standard);
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

.dropdown-item:hover {
    background: var(--primary-container);
    color: var(--on-primary-container);
}

.dropdown-item:active {
    background: var(--primary);
    color: var(--on-primary);
}

/* 激活状态 */
.dropdown-item.active {
    background: var(--primary-container);
    color: var(--primary);
    font-weight: var(--font-weight-medium);
}

/* 禁用状态 */
.dropdown-item.disabled,
.dropdown-item:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* 危险操作项 */
.dropdown-item.danger {
    color: var(--color-error);
}

.dropdown-item.danger:hover {
    background: var(--color-error-bg);
    color: var(--color-error);
}

/* 下拉项图标 */
.dropdown-item-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* 下拉项文本 */
.dropdown-item-text {
    flex: 1;
    min-width: 0;
}

.dropdown-item-label {
    display: block;
    line-height: 1.4;
}

.dropdown-item-description {
    display: block;
    font-size: 0.8125rem;
    color: var(--on-surface-variant);
    margin-top: var(--space-1);
    line-height: 1.3;
}

.dropdown-item:hover .dropdown-item-description {
    color: inherit;
    opacity: 0.8;
}

/* 下拉项快捷键提示 */
.dropdown-item-shortcut {
    margin-left: auto;
    font-size: 0.8125rem;
    color: var(--on-surface-variant);
    opacity: 0.7;
}

/* 下拉项徽章 */
.dropdown-item-badge {
    margin-left: auto;
    padding: var(--space-1) var(--space-2);
    background: var(--primary);
    color: var(--on-primary);
    font-size: 0.75rem;
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-full);
    line-height: 1;
}

/* 分割线 */
.dropdown-divider {
    height: 1px;
    margin: var(--space-2) 0;
    background: var(--outline);
    border: none;
}

/* 下拉列表标题 */
.dropdown-header {
    padding: var(--space-3) var(--space-4) var(--space-2) var(--space-4);
    font-size: 0.8125rem;
    font-weight: var(--font-weight-semibold);
    color: var(--on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 下拉列表搜索框 */
.dropdown-search {
    padding: var(--space-3);
    border-bottom: 1px solid var(--outline);
    position: sticky;
    top: 0;
    background: var(--surface);
    z-index: 1;
}

.dropdown-search input {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--outline);
    border-radius: var(--radius-sm);
    background: var(--surface-variant);
    color: var(--on-surface);
    font-size: 0.875rem;
    outline: none;
    transition: all var(--duration-fast) var(--easing-standard);
}

.dropdown-search input:focus {
    border-color: var(--primary);
    background: var(--surface);
}

/* 空状态 */
.dropdown-empty {
    padding: var(--space-6) var(--space-4);
    text-align: center;
    color: var(--on-surface-variant);
    font-size: 0.875rem;
}

/* 下拉列表尺寸变体 */
.dropdown-menu-sm {
    min-width: 150px;
    font-size: 0.875rem;
}

.dropdown-menu-sm .dropdown-item {
    padding: var(--space-2) var(--space-3);
    font-size: 0.875rem;
}

.dropdown-menu-lg {
    min-width: 280px;
}

.dropdown-menu-lg .dropdown-item {
    padding: var(--space-4) var(--space-5);
}

/* 下拉列表宽度变体 */
.dropdown-menu-full {
    left: 0;
    right: 0;
    width: 100%;
}

/* 滚动条样式 */
.dropdown-menu::-webkit-scrollbar {
    width: 6px;
}

.dropdown-menu::-webkit-scrollbar-track {
    background: var(--surface-variant);
    border-radius: 3px;
}

.dropdown-menu::-webkit-scrollbar-thumb {
    background: var(--outline);
    border-radius: 3px;
}

.dropdown-menu::-webkit-scrollbar-thumb:hover {
    background: var(--on-surface-variant);
}

/* ========================================
   深色主题适配
======================================== */

[data-theme="dark"] .dropdown-menu {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .dropdown-item:hover .dropdown-item-description {
    color: inherit;
    opacity: 0.7;
}

/* Checkbox 和 Radio */
.form-checkbox,
.form-radio {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
}

.form-checkbox input[type="checkbox"],
.form-radio input[type="radio"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* ========================================
   卡片组件系统
======================================== */

.card {
    background: var(--surface);
    border: 1px solid var(--outline);
    border-radius: var(--radius-xl);
    box-shadow: var(--elevation-1);
    overflow: visible;
    transition: var(--transition-all);
}

.card:hover {
    box-shadow: var(--elevation-2);
    border-color: var(--outline-variant);
}

.card-header {
    padding: var(--space-6);
    border-bottom: 1px solid var(--outline);
    background: var(--surface-variant);
}

.card-title {
    font-size: 1.125rem;
    font-weight: var(--font-weight-semibold);
    color: var(--on-surface);
    margin: 0;
}

.card-subtitle {
    font-size: 0.875rem;
    color: var(--on-surface-variant);
    margin-top: var(--space-2);
}

.card-body {
    padding: var(--space-6);
    overflow: visible;
}

.card-footer {
    padding: var(--space-6);
    border-top: 1px solid var(--outline);
    background: var(--surface-variant);
}

/* ========================================
   工具类
======================================== */

/* 文本对齐 */
.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

/* 文本颜色 */
.text-primary {
    color: var(--primary);
}

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

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

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

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

.text-info {
    color: var(--color-info);
}

.text-muted {
    color: var(--on-surface-variant);
}

/* 文本大小 */
.text-sm {
    font-size: 0.875rem;
}

.text-base {
    font-size: 0.9375rem;
}

.text-lg {
    font-size: 1.125rem;
}

.text-xl {
    font-size: 1.25rem;
}

/* 文本粗细 */
.font-light {
    font-weight: var(--font-weight-light);
}

.font-regular {
    font-weight: var(--font-weight-regular);
}

.font-medium {
    font-weight: var(--font-weight-medium);
}

.font-semibold {
    font-weight: var(--font-weight-semibold);
}

.font-bold {
    font-weight: var(--font-weight-bold);
}

/* 显示/隐藏 */
.d-none {
    display: none !important;
}

.d-block {
    display: block !important;
}

.d-flex {
    display: flex !important;
}

.d-inline-flex {
    display: inline-flex !important;
}

/* 间距 */
.m-0 {
    margin: 0 !important;
}

.m-2 {
    margin: var(--space-2) !important;
}

.m-4 {
    margin: var(--space-4) !important;
}

.m-6 {
    margin: var(--space-6) !important;
}

.mt-0 {
    margin-top: 0 !important;
}

.mt-2 {
    margin-top: var(--space-2) !important;
}

.mt-4 {
    margin-top: var(--space-4) !important;
}

.mt-6 {
    margin-top: var(--space-6) !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mb-2 {
    margin-bottom: var(--space-2) !important;
}

.mb-4 {
    margin-bottom: var(--space-4) !important;
}

.mb-6 {
    margin-bottom: var(--space-6) !important;
}

.p-0 {
    padding: 0 !important;
}

.p-2 {
    padding: var(--space-2) !important;
}

.p-4 {
    padding: var(--space-4) !important;
}

.p-6 {
    padding: var(--space-6) !important;
}

/* ========================================
   响应式断点
======================================== */

@media (max-width: 1024px) {
    :root {
        --header-height: 70px;
    }

    .container {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }
}

@media (max-width: 768px) {
    :root {
        --header-height: 60px;
    }

    .container {
        padding-left: var(--space-3);
        padding-right: var(--space-3);
    }

    /* 移动端按钮调整 */
    .btn {
        padding: var(--space-2) var(--space-4);
        font-size: 0.875rem;
    }

    .btn-lg {
        padding: var(--space-3) var(--space-6);
        font-size: 0.9375rem;
    }
}

@media (max-width: 480px) {

    /* 表单输入框移动端优化 */
    .form-input,
    .form-textarea,
    .form-select {
        font-size: 16px;
        /* 防止iOS缩放 */
    }
}

/* ========================================
   通用动画关键帧
======================================== */

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* ========================================
   无障碍支持
======================================== */

/* 减少动画（用户偏好） */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* 焦点可见性 */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* 跳过导航链接（屏幕阅读器） */
.skip-to-content {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--primary);
    color: var(--on-primary);
    padding: var(--space-2) var(--space-4);
    z-index: 100;
}

.skip-to-content:focus {
    top: 0;
}

/* ========================================
   打印样式
======================================== */

@media print {

    *,
    *::before,
    *::after {
        background: white !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    .btn {
        border: 1px solid black;
    }
}


/* ========================================
   自定义下拉框组件（全局样式）
======================================== */

.custom-select-wrapper {
    position: relative;
}

.custom-select-wrapper.open {
    z-index: 1000;
}

.custom-select-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-3);
    background: var(--surface);
    border: 1px solid var(--outline);
    border-radius: var(--radius-md);
    color: var(--on-surface);
    font-size: 0.9375rem;
    cursor: pointer;
    transition: all var(--duration-normal) var(--easing-standard);
}

.custom-select-button:hover {
    border-color: var(--primary);
}

.custom-select-wrapper.open .custom-select-button {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-container);
}

.custom-select-text {
    flex: 1;
    text-align: left;
}

.custom-select-arrow {
    width: 16px;
    height: 16px;
    color: var(--on-surface-variant);
    transition: transform var(--duration-normal) var(--easing-standard);
}

.custom-select-wrapper.open .custom-select-arrow {
    transform: rotate(180deg);
}

.custom-select-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--surface);
    border: 1px solid var(--outline);
    border-radius: var(--radius-md);
    box-shadow: var(--elevation-3);
    max-height: 200px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all var(--duration-normal) var(--easing-standard);
    z-index: 1000;
}

.custom-select-wrapper.open .custom-select-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.custom-select-item {
    padding: var(--space-3);
    color: var(--on-surface);
    cursor: pointer;
    transition: background var(--duration-fast) var(--easing-standard);
}

.custom-select-item:hover {
    background: var(--surface-variant);
}

.custom-select-item.active {
    background: var(--primary-container);
    color: var(--primary);
    font-weight: var(--font-weight-medium);
}


/* ========================================
   深色主题增强样式
   Dark Theme Enhanced Styles
   
   Requirements: 9.1, 9.2, 9.3
   - 9.1: 所有组件正确应用深色主题配色
   - 9.2: 深色背景和浅色文字，保持足够对比度
   - 9.3: 深色主题下使用适当的边框和阴影效果
======================================== */

/* 深色主题 - 增强对比度 */
[data-theme="dark"] {
    /* 确保文字对比度符合WCAG AA标准 (4.5:1) */
    --text-contrast-high: #ffffff;
    --text-contrast-medium: #e6e6e6;
    --text-contrast-low: #b3b3b3;
}

/* 深色主题 - 卡片组件 */
[data-theme="dark"] .card {
    background: var(--surface);
    border-color: var(--outline);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    border-color: var(--outline-variant);
}

[data-theme="dark"] .card-header {
    background: var(--surface-variant);
    border-color: var(--outline);
}

[data-theme="dark"] .card-footer {
    background: var(--surface-variant);
    border-color: var(--outline);
}

/* 深色主题 - 按钮增强 */
[data-theme="dark"] a.btn-primary {
    color: var(--on-primary);
}

[data-theme="dark"] .btn-outline {
    border-color: var(--outline-variant);
    color: var(--on-surface);
}

[data-theme="dark"] .btn-outline:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--primary);
    color: var(--primary);
}

[data-theme="dark"] .btn-text:hover {
    background: rgba(100, 181, 246, 0.15);
}

/* 深色主题 - 表单组件 */
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-textarea,
[data-theme="dark"] .form-select {
    background: var(--surface);
    border-color: var(--outline);
    color: var(--on-surface);
}

[data-theme="dark"] .form-input:focus,
[data-theme="dark"] .form-textarea:focus,
[data-theme="dark"] .form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(100, 181, 246, 0.2);
}

[data-theme="dark"] .form-input::placeholder,
[data-theme="dark"] .form-textarea::placeholder {
    color: var(--on-surface-variant);
    opacity: 0.7;
}

/* 深色主题 - 自定义下拉框 */
[data-theme="dark"] .custom-select-button {
    background: var(--surface);
    border-color: var(--outline);
}

[data-theme="dark"] .custom-select-menu {
    background: var(--surface);
    border-color: var(--outline);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .custom-select-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .custom-select-item.active {
    background: var(--primary-container);
}

/* 深色主题 - 下拉菜单 */
[data-theme="dark"] .dropdown-toggle {
    background: var(--surface);
    border-color: var(--outline);
}

[data-theme="dark"] .dropdown-toggle:hover {
    background: var(--surface-variant);
}

/* 深色主题 - 链接和交互元素 */
[data-theme="dark"] a {
    color: var(--primary);
}

[data-theme="dark"] a:hover {
    color: var(--primary-light);
}

/* 深色主题 - 代码块 */
[data-theme="dark"] code {
    background: rgba(255, 255, 255, 0.1);
    color: #f8b4b4;
}

[data-theme="dark"] pre {
    background: #0d1117;
    border: 1px solid var(--outline);
}

/* 深色主题 - 分割线 */
[data-theme="dark"] hr {
    border-color: var(--outline);
}

/* 深色主题 - 表格 */
[data-theme="dark"] table {
    border-color: var(--outline);
}

[data-theme="dark"] th {
    background: var(--surface-variant);
    border-color: var(--outline);
}

[data-theme="dark"] td {
    border-color: var(--outline);
}

[data-theme="dark"] tr:hover td {
    background: rgba(255, 255, 255, 0.03);
}

/* 深色主题 - 滚动条 */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--surface);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--outline);
    border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--outline-variant);
}

/* 深色主题 - 选中文本 */
[data-theme="dark"] ::selection {
    background: rgba(100, 181, 246, 0.3);
    color: var(--on-surface);
}

/* 深色主题 - 焦点状态 */
[data-theme="dark"] :focus-visible {
    outline-color: var(--primary);
}

/* 深色主题 - 禁用状态 */
[data-theme="dark"] .btn:disabled,
[data-theme="dark"] .form-input:disabled,
[data-theme="dark"] .form-select:disabled {
    opacity: 0.4;
    background: var(--surface-variant);
}

/* 深色主题 - 状态颜色背景增强 */
[data-theme="dark"] .text-success {
    color: #4ade80;
}

[data-theme="dark"] .text-error {
    color: #f87171;
}

[data-theme="dark"] .text-warning {
    color: #fbbf24;
}

[data-theme="dark"] .text-info {
    color: #60a5fa;
}

/* 深色主题 - 空状态 */
[data-theme="dark"] .empty-state {
    background: var(--surface);
    border-color: var(--outline);
}

[data-theme="dark"] .empty-state svg {
    color: var(--on-surface-variant);
}

/* ========================================
   返回顶部按钮（全局统一）
   风格与主题切换按钮保持一致
======================================== */

.scroll-to-top {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 40px;
    height: 40px;
    border: 1px solid var(--outline);
    background: var(--surface);
    border-radius: var(--radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--on-surface-variant);
    z-index: 1000;
    box-shadow: var(--elevation-1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all var(--duration-normal) var(--easing-standard);
}

.scroll-to-top svg {
    width: 18px;
    height: 18px;
}

.scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-to-top:hover {
    color: var(--primary);
    border-color: var(--primary);
    background: var(--primary-container);
    transform: translateY(-2px);
    box-shadow: var(--elevation-2);
}

.scroll-to-top:active {
    transform: translateY(0);
    box-shadow: var(--elevation-1);
}