/* ============================================================
   公共样式库 common.css
   主色 #409EFF，浅蓝 + 白色基调
   说明：基础样式集中于此；组件样式已拆分到 styles/components/ 下
   独立文件（Message.css / Modal.css / Preview.css / Pagination.css / Upload.css），
   各页面按需引入。
   ============================================================ */

/* CSS 变量 */
:root {
  --primary: #409EFF;
  /* 主色 */
  --primary-hover: #66b1ff;
  /* 主色悬浮 */
  --primary-active: #3a8ee6;
  /* 主色按下 */
  --selected-bg: #E6F7FF;
  /* 选中背景 */
  --hover-bg: #ECF5FF;
  /* 悬浮背景 */
  --page-bg: #F0F3FC;
  /* 页面背景 */
  --white: #ffffff;
  /* 白色 */
  --text-main: #303133;
  /* 主文字 */
  --text-regular: #606266;
  /* 常规文字 */
  --text-secondary: #909399;
  /* 次要文字 */
  --border: #dcdfe6;
  /* 边框 */
  --border-light: #ebeef5;
  /* 浅边框 */
  --radius: 4px;
  /* 圆角 */
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  /* 阴影 */
  --shadow-lg: 0 6px 18px rgba(0, 0, 0, 0.14);
  /* 大阴影 */
  --success: #67c23a;
  /* 成功色 */
  --error: #f56c6c;
  /* 错误色 */
  --warn: #e6a23c;
  /* 警告色 */

  /* ---- 布局表面（主题化） ---- */
  --bg-base: #F0F3FC;
  /* 内容/页面底 */
  --surface: #ffffff;
  /* 面板/卡片底 */
  --sidebar-bg: #ffffff;
  /* 侧边栏底 */
  --toolbar-bg: #ffffff;
  /* 顶栏底 */
  --tabbar-bg: #ffffff;
  /* 标签栏底 */
  --tab-bg: #f2f4f8;
  /* 未选中标签底 */
  --tab-hover-bg: #e6f4ff;
  /* 标签悬浮底 */
  --tab-active-bg: #e6f4ff;
  /* 标签选中底 */
  --tab-active-color: #409EFF;
  /* 标签选中文字 */
  --tab-border: #ccd3e0;
  /* 标签边框 */
  --tab-border-hover: #a8cfff;
  /* 标签悬浮边框 */
  --menu-active-bg: #e6f4ff;
  /* 菜单选中底 */
  --menu-active-color: #409EFF;
  /* 菜单选中文字 */
  --menu-active-line: #409EFF;
  /* 菜单选中右线 */
  --menu-hover-bg: #ECF5FF;
  /* 菜单悬浮底 */
  --popup-bg: #ffffff;
  /* 下拉面板底 */
  --ph-ico-bg: #ecf5ff;
  --modal-footer-bg: #fafbfe;
  /* 占位图标圆底 */
}


/* ---------- 基础重置 ---------- */
/* 全局盒模型 + 隐藏 Firefox 滚动条 */
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  scrollbar-width: none;
}

/* html/body 高度与字体 */
html,
body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  color: var(--text-main);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
}

/* 隐藏 webkit 滚动条 */
::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* 链接 */
a {
  text-decoration: none;
  color: inherit;
}

/* 列表 */
ul,
ol {
  list-style: none;
}

/* 按钮 */
button {
  font-family: inherit;
  cursor: pointer;
}

/* 表单控件 */
input,
textarea,
select {
  font-family: inherit;
  outline: none;
}

/* ---------- 按钮 ---------- */
/* 主按钮 */
.btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 14px;
  line-height: 1;
  border: 1px solid var(--primary);
  -webkit-border-radius: var(--radius);
  -moz-border-radius: var(--radius);
  border-radius: var(--radius);
  background: var(--primary);
  color: #fff;
  -webkit-transition: all .2s;
  -moz-transition: all .2s;
  -o-transition: all .2s;
  transition: all .2s;
  white-space: nowrap;
}

/* 主按钮悬浮 */
.btn:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

/* 主按钮按下 */
.btn:active {
  background: var(--primary-active);
}


/* 取消按钮 */
.btnCancel {
  background: var(--white);
  color: var(--text-regular);
  border-color: var(--border);
}

/* 取消按钮悬浮 */
.btnCancel:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--white);
}


/* 禁用按钮 */
.btn[disabled] {
  background: #c0c4cc;
  border-color: #c0c4cc;
  cursor: not-allowed;
}

/* ---------- 输入控件 ---------- */
/* 输入框/下拉/文本域 */
.input,
.select,
.textarea {
  padding: 8px 12px;
  font-size: 14px;
  color: var(--text-main);
  border: 1px solid var(--border);
  -webkit-border-radius: var(--radius);
  -moz-border-radius: var(--radius);
  border-radius: var(--radius);
  background: var(--white);
  -webkit-transition: border-color .2s;
  -moz-transition: border-color .2s;
  -o-transition: border-color .2s;
  transition: border-color .2s;
}

/* 聚焦 */
.input:focus,
.select:focus,
.textarea:focus {
  border-color: var(--primary);
}

/* 下拉 */
.select {
  padding-right: 28px;
}

/* 文本域 */
.textarea {
  resize: vertical;
  min-height: 90px;
}


/* ---------- 无障碍 ---------- */
/* 仅对读屏器可见（screen-reader-only）的标签 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}