/* 共享样式：页面与布局辅助 */
html, body { height: 100%; margin: 0; padding: 0; }
body { font-family: -apple-system, "PingFang SC", "Microsoft YaHei", Segoe UI, Roboto, sans-serif; background: #f5f7fa; }
.money { font-family: Menlo, Consolas, monospace; font-weight: 600; color: #e6a23c; }
.balance-card .amount { font-size: 30px; font-weight: 700; color: #f56c6c; }
.page { padding: 20px; }
.card-title { font-size: 16px; font-weight: 600; margin-bottom: 12px; }
/* 普通页面（经销商门户/员工工作台用 div.layout）自然滚动 */
.layout { min-height: 100vh; }
/* admin 后台用 el-container.layout：锁死一屏，仅 el-main 内部滚动，避免按钮被挤出视野 */
.el-container.layout { height: 100vh; width: 100%; }
.layout .el-main { overflow: auto; padding: 20px; }
/* 表格长内容省略号 */
.el-table .cell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: break-all; }
/* 顶部栏：el-header 与普通 div 都适用 */
.header-bar {
  display: flex; align-items: center; justify-content: space-between;
  background: #fff; padding: 0 20px; height: 60px; border-bottom: 1px solid #ebeef5;
  box-sizing: border-box; flex-shrink: 0;
}
.aside-logo {
  height: 60px; line-height: 60px; text-align: center;
  color: #fff; font-size: 16px; font-weight: 600;
  background: #1f2d3d; letter-spacing: 1px;
}
.header-bar .brand { font-weight: 600; color: #303133; }
.header-bar .user-info { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.stat-card { border-radius: 8px; color: #fff; padding: 18px 20px; min-height: 90px; }
.stat-card .label { font-size: 13px; opacity: 0.9; }
.stat-card .value { font-size: 24px; font-weight: 700; margin-top: 8px; }
.bg-blue   { background: linear-gradient(135deg,#409EFF,#66b1ff); }
.bg-green  { background: linear-gradient(135deg,#67C23A,#85ce61); }
.bg-orange { background: linear-gradient(135deg,#E6A23C,#ebb563); }
.bg-red    { background: linear-gradient(135deg,#F56C6C,#f89898); }
.bg-purple { background: linear-gradient(135deg,#909399,#a6a9ad); }

/* =====================================================================
   手机端适配（屏幕宽度 ≤ 768px）
   ===================================================================== */
@media (max-width: 768px) {
  /* ---- 顶部栏：允许换行、紧凑内边距 ---- */
  .header-bar {
    height: auto; min-height: 52px; padding: 8px 12px;
    flex-wrap: wrap; gap: 6px 10px;
  }
  .header-bar .brand { font-size: 15px; white-space: nowrap; }
  .header-bar .user-info { gap: 6px 10px; font-size: 13px; flex-wrap: wrap; }
  .header-bar .user-info .el-button { padding: 4px 6px; }
  .header-bar .user-info .el-button--large,
  .header-bar .user-info .el-button.is-link { font-size: 13px; }

  /* ---- admin 后台：左侧菜单变为顶部横向滚动菜单 ---- */
  .el-container.layout { flex-direction: column; height: auto; min-height: 100vh; }
  .el-container.layout > .el-aside { width: 100% !important; height: auto; overflow: visible; }
  .aside-logo { height: 44px; line-height: 44px; font-size: 14px; }
  .el-aside .el-menu {
    display: flex; flex-wrap: nowrap; overflow-x: auto;
    border-right: none !important; -webkit-overflow-scrolling: touch;
  }
  .el-aside .el-menu .el-menu-item {
    width: auto; flex: 0 0 auto; white-space: nowrap;
    height: 44px; line-height: 44px; padding: 0 14px; font-size: 13px;
  }
  .layout .el-main { padding: 12px; overflow: visible; }

  /* ---- 概览看板：4 列卡片改 2 列、半宽卡片改 1 列 ---- */
  .el-col-6  { max-width: 50% !important; flex: 0 0 50% !important; margin-bottom: 10px; }
  .el-col-12 { max-width: 100% !important; flex: 0 0 100% !important; margin-top: 0 !important; margin-bottom: 10px; }
  .stat-card { padding: 12px 14px; min-height: 64px; border-radius: 8px; }
  .stat-card .label { font-size: 12px; }
  .stat-card .value { font-size: 20px; margin-top: 6px; }

  /* ---- 弹窗/消息框：接近满宽、内部可滚动 ---- */
  .el-overlay-dialog .el-dialog { width: 92vw !important; margin: 4vh auto !important; }
  .el-dialog__body { padding: 14px 16px; max-height: 72vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .el-message-box { width: 90vw !important; max-width: 90vw; }

  /* ---- 员工工作台/经销商门户：缩小页面边距 ---- */
  .page { padding: 12px; }
  .layout { padding: 10px !important; }
  .work-area { padding: 14px !important; }
  .balance-card .amount { font-size: 24px; }

  /* ---- 产品类型选择大按钮：允许换行、每个按钮占一定宽度 ---- */
  .el-radio-group { display: flex; flex-wrap: wrap; row-gap: 8px; }
  .el-radio-group .el-radio-button { flex: 1 1 auto; min-width: 30%; }
  .el-radio-group .el-radio-button .el-radio-button__inner { width: 100%; padding: 12px 8px; }

  /* ---- 筛选工具栏里的输入框/下拉框占满整行（表格内置组件除外） ---- */
  .el-main .el-input, .el-main .el-select,
  .work-area .el-input, .work-area .el-select,
  .el-card .el-input, .el-card .el-select { width: 100% !important; }
  .el-pagination .el-select { width: auto !important; }
  .el-table .el-input, .el-table .el-select { width: 100% !important; }

  /* ---- 分页器：可换行、紧凑 ---- */
  .el-pagination { flex-wrap: wrap; justify-content: center; row-gap: 6px; padding: 8px 0; }
  .el-pagination .el-pagination__jump,
  .el-pagination .el-pagination__total { display: none; }
  .el-pagination button, .el-pager li { min-width: 28px; }

  /* ---- 登录页：宽度自适应 ---- */
  .login-box { width: 92vw !important; max-width: 400px; padding: 22px 18px !important; }

  /* ---- 表格操作按钮紧凑（手机上多按钮不挤） ---- */
  .el-table .cell .el-button { margin: 2px 0; padding: 4px 8px; }

  /* ---- 表格：列总宽超过屏幕时横向滚动，避免左侧列被裁掉 ---- */
  /* 关键点：表格外层 .el-table 保持 100% 宽不溢出；真正的滚动容器是
     Element Plus 内部的 .el-scrollbar__wrap；内层表格用 max-content 撑开到列宽总和 */
  .el-table { table-layout: auto !important; }
  .el-table__body-wrapper .el-scrollbar__wrap,
  .el-table__header-wrapper .el-scrollbar__wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .el-table__body, .el-table__header {
    width: max-content !important;
    min-width: 100% !important;
  }

  /* ---- 结果弹窗里的大字密码稍微缩小，避免撑破 ---- */
  .result-box { padding: 12px; word-break: break-all; }
}