/**
 * 主样式入口文件
 * 
 * @file main.css
 * @description 统一管理所有CSS文件的导入顺序，确保样式的正确层叠和优先级
 * @author CodeBuddy
 * @created 2025-01-12
 * @version 2.0.0
 * 
 * 导入顺序说明：
 * 1. 基础样式层 - 重置、变量、字体等基础设置
 * 2. 布局样式层 - 网格、侧边栏、页面布局
 * 3. 组件样式层 - 按钮、表单、模态框等可复用组件
 * 4. 页面样式层 - 特定页面的样式
 * 5. 主题样式层 - 颜色主题和第三方组件主题
 * 6. 响应式样式层 - 移动端、平板端适配
 */

/* ========================================
   基础样式层 (Base Layer)
   ======================================== */

/* CSS变量和主题色彩系统 */
/* @import 'base/variables.css'; */

/* 浏览器样式重置 */
/* @import 'base/reset.css'; */

/* 字体和排版系统 */
/* @import 'base/typography.css'; */

/* 工具类样式 */
/* @import 'base/utilities.css'; */

/* ========================================
   布局样式层 (Layout Layer)
   ======================================== */

/* 响应式网格系统 */
/* @import 'layout/grid.css'; */

/* 侧边栏布局 */
@import 'layout/sidebar.css';

/* 页面头部布局 */
@import 'layout/header.css';

/* 仪表板布局 */
/* @import 'layout/dashboard.css'; */

/* ========================================
   组件样式层 (Components Layer)
   ======================================== */

/* 按钮组件 */
@import 'components/buttons.css';

/* 表单组件 - 新增 */
@import 'components/forms.css';

/* 模态框组件 */
@import 'components/modals.css';

/* 表格组件 - 新增 */
@import 'components/tables.css';

/* 分页组件 */
@import 'components/pagination.css';

/* 通知组件 */
@import 'components/notifications.css';

/* 加载动画组件 */
@import 'components/loading.css';

/* ========================================
   页面样式层 (Pages Layer)
   ======================================== */

/* 登录注册页面 */
@import 'pages/auth.css';

/* 预约管理页面 */
@import 'pages/appointment.css';

/* 账户管理页面 */
@import 'pages/account.css';

/* ========================================
   主题样式层 (Themes Layer)
   ======================================== */

/* 浅色主题 */
/* @import 'themes/light.css'; */

/* 深色主题 */
/* @import 'themes/dark.css'; */

/* 第三方组件主题 */
@import 'themes/flatpickr.css';

/* ========================================
   响应式样式层 (Responsive Layer)
   ======================================== */

/* 移动端样式 */
@import 'responsive/mobile.css';

/* 平板端样式 */
/* @import 'responsive/tablet.css'; */

/* 桌面端样式 */
/* @import 'responsive/desktop.css'; */

/* ========================================
   遗留样式文件 (Legacy Files)
   ======================================== */

/* 主样式文件 - 包含核心全局样式 */
@import 'style.css';

/* ========================================
   重构进度说明
   ======================================== */

/*
重构完成的组件：
✅ 表单组件 (components/forms.css) - 已完成
✅ 表格组件 (components/tables.css) - 已完成
✅ 按钮组件 (components/buttons.css) - 已完成
✅ 模态框组件 (components/modals.css) - 已完成
✅ 加载动画组件 (components/loading.css) - 已完成
✅ 通知组件 (components/notifications.css) - 已完成
✅ 分页组件 (pagination.css) - 已存在

重构完成的页面：
✅ 登录注册页面 (pages/auth.css) - 已完成
✅ 预约管理页面 (pages/appointment.css) - 已完成

重构完成的主题：
✅ Flatpickr日期选择器主题 (themes/flatpickr.css) - 已完成

待创建的基础样式：
📋 CSS变量系统 (base/variables.css) - 计划中
📋 样式重置 (base/reset.css) - 计划中
📋 字体系统 (base/typography.css) - 计划中
📋 工具类 (base/utilities.css) - 计划中

待创建的布局样式：
📋 网格系统 (layout/grid.css) - 计划中
📋 侧边栏布局 (layout/sidebar.css) - 计划中
📋 仪表板布局 (layout/dashboard.css) - 计划中

待创建的页面样式：
📋 登录页面 (pages/auth.css) - 计划中
📋 预约页面 (pages/appointment.css) - 计划中
📋 账户页面 (pages/account.css) - 计划中

待创建的主题样式：
📋 浅色主题 (themes/light.css) - 计划中
📋 深色主题 (themes/dark.css) - 计划中

待创建的响应式样式：
📋 平板端样式 (responsive/tablet.css) - 计划中
📋 桌面端样式 (responsive/desktop.css) - 计划中
*/

/* ========================================
   性能优化说明
   ======================================== */

/*
CSS加载优化：
1. 关键路径CSS内联 - 考虑将基础样式内联到HTML中
2. 非关键CSS异步加载 - 使用media="print"然后切换为all
3. CSS压缩 - 生产环境使用压缩版本
4. 文件合并 - 减少HTTP请求数量

浏览器兼容性：
- 支持现代浏览器 (Chrome 60+, Firefox 60+, Safari 12+, Edge 79+)
- 使用CSS变量和现代特性
- 提供必要的浏览器前缀
- 渐进增强策略

缓存策略：
- 使用版本号或哈希值进行缓存控制
- 分离稳定和变化频繁的样式文件
- 利用浏览器缓存机制
*/