/* ========================================
   主应用样式文件 (App.css)
   用途：定义全局主题变量、应用布局和响应式设计
   ======================================== */

/* CSS 自定义属性 (主题变量) */
:root {
  /* 颜色系统 - 定义整个应用的色彩主题 */
  --color-bg: #f5f7fb;                    /* 主背景色 - 浅蓝灰色 */
  --color-surface: #ffffff;               /* 表面背景色 - 纯白色 */
  --color-surface-alt: #f1f4fa;           /* 替代表面色 - 浅灰蓝色 */
  --color-border: #d8deed;                /* 边框颜色 - 浅灰色 */
  --color-text: #1f2a44;                  /* 主文本颜色 - 深蓝灰色 */
  --color-muted: #6f7b92;                 /* 次要文本颜色 - 中灰色 */
  --color-accent: #7da7f2;                /* 强调色 - 蓝色 */
  --color-accent-soft: rgba(125, 167, 242, 0.12); /* 柔和强调色 - 半透明蓝色 */
  --color-danger: #d6455d;                /* 危险/错误色 - 红色 */
  
  /* 布局尺寸 - 定义组件的尺寸规范 */
  --sidebar-width: clamp(250px, 20vw, 320px);        /* 桌面端侧边栏宽度 - 响应式 */
  --sidebar-width-mobile: clamp(250px, 35vw, 300px); /* 移动端侧边栏宽度 - 响应式 */
  
  /* 视觉效果 - 定义阴影和圆角等视觉元素 */
  --shadow-soft: 0 20px 45px rgba(86, 105, 141, 0.15); /* 柔和阴影效果 */
  --radius-lg: 22px;                      /* 大圆角半径 */
  
  /* 字体系统 - 定义字体族 */
  --font-family-base: 'Inter', 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* ========================================
   全局样式重置
   ======================================== */

/* 盒模型重置 - 确保所有元素使用 border-box */
* {
  box-sizing: border-box;
}

/* ========================================
   页面基础布局
   ======================================== */

/* HTML 和 Body 基础样式 */
html,
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  /* 渐变背景 - 多色彩渐变营造视觉层次 */
  background: linear-gradient(135deg, #dfe9f3 0%, #f2f0ff 25%, #fde6f4 50%, #e3f6ff 75%, #f4fff8 100%);
  color: var(--color-text);
  font-family: var(--font-family-base);
  overflow-x: hidden;                     /* 防止水平滚动 */
  width: 100%;
  max-width: 100vw;
  /* 全局隐藏滚动条 - 提供更清洁的视觉体验 */
  scrollbar-width: none;                  /* Firefox */
  -ms-overflow-style: none;               /* IE and Edge */
}

/* 全局隐藏 WebKit 浏览器的滚动条 */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

/* ========================================
   应用根容器布局
   ======================================== */

/* React 根容器 */
#root {
  min-height: 100vh;
  display: flex;
  padding: 0;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

/* 主应用容器 - 使用毛玻璃效果 */
.app {
  flex: 1;
  display: flex;
  min-height: 100vh;
  border-radius: 0;
  /* 毛玻璃效果 - 创建现代化的半透明背景 */
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 34px rgba(45, 60, 115, 0.22);
  overflow: hidden;
  position: relative;
  width: 100%;
  max-width: 100vw;
}

/* ========================================
   全局交互样式
   ======================================== */

/* 文本选择样式 - 自定义选中文本的外观 */
body ::selection {
  background-color: rgba(125, 167, 242, 0.18);
  color: var(--color-text);
}

/* 全局隐藏所有滚动条 - 统一的滚动条隐藏策略 */
::-webkit-scrollbar {
  display: none;
}

* {
  scrollbar-width: none;                  /* Firefox */
  -ms-overflow-style: none;               /* IE and Edge */
}

/* 焦点样式 - 提供清晰的键盘导航反馈 */
button:focus,
a:focus {
  outline: 2px solid rgba(125, 167, 242, 0.4);
  outline-offset: 2px;
}

/* ========================================
   响应式设计 - 移动端适配
   ======================================== */

/* 手机屏幕适配 (768px 以下) */
@media (max-width: 768px) {
  /* 手机端字体放大 - 提高移动端可读性 */
  html {
    font-size: 150%;                      /* 基础字体大小放大 1.5 倍 */
  }

  /* 移动端侧边栏宽度变量 */
  :root {
    --sidebar-width-mobile: 280px;
  }

  /* 移动端页面布局优化 */
  html, body {
    overflow-x: hidden;                   /* 严格防止水平滚动 */
    width: 100%;
    max-width: 100vw;
  }

  /* 移动端根容器 */
  #root {
    padding: 0;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* 移动端应用容器 */
  .app {
    min-height: 100vh;
    border-radius: 0;                     /* 移动端去除圆角 */
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    flex-direction: row;                  /* 保持水平布局 */
  }
}
