/* ==========================================================================
   WXUI · 微信小程序风格 UI 框架（纯 CSS，无依赖）
   参照 WeUI / 微信小程序设计规范
   ========================================================================== */

/* ---------- 1. 设计变量 ---------- */
:root {
  /* 主色：微信绿 */
  --wx-green: #07c160;
  --wx-green-dark: #06ad56;
  --wx-green-light: #e8f8ee;

  /* 文字 */
  --wx-text: #191919;
  --wx-text-2: #7f7f7f;
  --wx-text-3: #b2b2b2;
  --wx-text-inverse: #ffffff;

  /* 背景与线条 */
  --wx-bg: #ededed;
  --wx-bg-card: #ffffff;
  --wx-bg-gray: #f7f7f7;
  --wx-line: #e5e5e5;
  --wx-line-light: #f0f0f0;

  /* 功能色 */
  --wx-red: #fa5151;
  --wx-red-light: #fdecea;
  --wx-blue: #10aeff;
  --wx-blue-light: #eaf1fb;
  --wx-orange: #ff8f1f;
  --wx-orange-light: #fff4e0;

  /* 尺寸 */
  --wx-navbar-h: 44px;
  --wx-tabbar-h: 50px;
  --wx-radius: 8px;
  --wx-radius-lg: 12px;
}

/* ---------- 2. Reset ---------- */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue",
               "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: var(--wx-bg);
  color: var(--wx-text);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

/* 手机容器：限制最大宽度，居中显示 */
#app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--wx-bg);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
}

/* ---------- 3. 导航栏（小程序 navbar） ---------- */
.wx-navbar {
  position: relative;
  height: var(--wx-navbar-h);
  background: var(--wx-bg-card);
  border-bottom: 1px solid var(--wx-line-light);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 12px;
  flex-shrink: 0;
  z-index: 20;
}

/* 深色导航栏变体 */
.wx-navbar.wx-navbar-dark {
  background: var(--wx-green);
  border-bottom-color: var(--wx-green-dark);
  color: var(--wx-text-inverse);
}

.wx-navbar-title {
  font-size: 15px;
  font-weight: 600;
  margin-left: 10px;
  flex: 1;
  min-width: 0;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wx-navbar-right {
  position: absolute;
  top: 0;
  right: 8px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 2px;
}

.wx-navbar-left {
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
}

/* 品牌 logo（导航栏最左侧） */
.wx-navbar-logo {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  object-fit: cover;
  flex: none;
}

/* 导航按钮（返回 / 图标） */
.wx-nav-btn {
  min-width: 36px;
  height: 36px;
  padding: 0 6px;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 6px;
}

.wx-nav-btn:active { background: rgba(0, 0, 0, .06); }
.wx-navbar-dark .wx-nav-btn:active { background: rgba(255, 255, 255, .18); }

/* 胶囊按钮（小程序右上角 ··· ） */
.wx-capsule {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 10px;
  border-radius: 16px;
  background: rgba(0, 0, 0, .05);
  color: inherit;
  font-size: 14px;
  border: none;
  cursor: pointer;
}

.wx-navbar-dark .wx-capsule { background: rgba(255, 255, 255, .2); }
.wx-capsule:active { opacity: .75; }

/* ---------- 4. 页面容器与路由 ---------- */
.wx-body {
  flex: 1;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.wx-page {
  display: none;
  padding: 12px;
  padding-bottom: calc(var(--wx-tabbar-h) + 24px);
  min-height: 100%;
}

.wx-page.wx-page-active {
  display: block;
  animation: wxPageIn .24s ease-out;
}

@keyframes wxPageIn {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* 二级页面（详情页）覆盖式进入 */
.wx-page-sub {
  position: absolute;
  inset: 0;
  background: var(--wx-bg);
  z-index: 30;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px;
  padding-bottom: calc(var(--wx-tabbar-h) + 24px);
  display: none;
}

.wx-page-sub.wx-page-active {
  display: block;
  animation: wxSubIn .26s ease-out;
}

@keyframes wxSubIn {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

/* ---------- 5. 卡片 ---------- */
.wx-card {
  background: var(--wx-bg-card);
  border-radius: var(--wx-radius-lg);
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .03);
}

.wx-card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--wx-text);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wx-card-title .wx-card-extra {
  font-size: 13px;
  font-weight: 400;
  color: var(--wx-text-2);
}

/* ---------- 6. 列表（WeUI Cell） ---------- */
.wx-cells {
  background: var(--wx-bg-card);
  border-radius: var(--wx-radius-lg);
  overflow: hidden;
  margin-bottom: 12px;
}

.wx-cell {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  position: relative;
  min-height: 52px;
  background: var(--wx-bg-card);
}

.wx-cell::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--wx-line-light);
}

.wx-cell:last-child::after { display: none; }

.wx-cell:active { background: var(--wx-bg-gray); }

.wx-cell-icon {
  width: 24px;
  font-size: 16px;
  margin-right: 12px;
  text-align: center;
  flex-shrink: 0;
}

.wx-cell-bd {
  flex: 1;
  min-width: 0;
}

.wx-cell-title {
  font-size: 16px;
  color: var(--wx-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wx-cell-desc {
  font-size: 13px;
  color: var(--wx-text-2);
  margin-top: 2px;
}

.wx-cell-ft {
  font-size: 15px;
  color: var(--wx-text-3);
  margin-left: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 右箭头 */
.wx-cell-ft::after {
  content: "";
  width: 7px;
  height: 7px;
  border-top: 1.5px solid #c8c8cd;
  border-right: 1.5px solid #c8c8cd;
  transform: rotate(45deg);
}

.wx-cell-ft.wx-no-arrow::after { display: none; }

/* ---------- 7. 表单 ---------- */
.wx-field {
  margin-bottom: 14px;
}

.wx-label {
  display: block;
  font-size: 14px;
  color: var(--wx-text-2);
  margin-bottom: 6px;
}

.wx-input,
.wx-select,
.wx-textarea {
  width: 100%;
  background: var(--wx-bg-gray);
  border: 1px solid transparent;
  border-radius: var(--wx-radius);
  padding: 12px;
  font-size: 16px;
  color: var(--wx-text);
  outline: none;
  font-family: inherit;
}

.wx-input:focus,
.wx-select:focus,
.wx-textarea:focus {
  border-color: var(--wx-green);
  background: var(--wx-bg-card);
}

.wx-textarea {
  min-height: 80px;
  resize: vertical;
}

.wx-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%23b2b2b2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}

/* 数量输入（大字号） */
.wx-input-qty {
  font-size: 19px;
  font-weight: 700;
  text-align: center;
}

/* ---------- 8. 按钮 ---------- */
.wx-btn {
  display: block;
  width: 100%;
  height: 44px;
  line-height: 44px;
  padding: 0;
  border: none;
  border-radius: var(--wx-radius);
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  font-family: inherit;
  transition: opacity .15s;
}

.wx-btn:active { opacity: .8; }

.wx-btn-primary { background: var(--wx-green); color: #fff; }
.wx-btn-default { background: var(--wx-bg-card); color: var(--wx-text); border: 1px solid var(--wx-line); }
.wx-btn-warn   { background: var(--wx-red); color: #fff; }
.wx-btn-disabled { background: #d8d8d8; color: #fff; pointer-events: none; }

.wx-btn-inline {
  width: auto;
  height: 34px;
  line-height: 34px;
  padding: 0 12px;
  font-size: 13px;
}

/* ---------- 9. 分段器（小程序 segmented-control） ---------- */
.wx-seg {
  display: flex;
  background: var(--wx-bg-gray);
  border-radius: var(--wx-radius);
  padding: 2px;
  margin-bottom: 14px;
}

.wx-seg-item {
  flex: 1;
  text-align: center;
  padding: 8px 0;
  font-size: 14px;
  color: var(--wx-text-2);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
}

.wx-seg-item.wx-seg-active {
  background: var(--wx-bg-card);
  color: var(--wx-green);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

/* ---------- 10. 标签 ---------- */
.wx-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.6;
  white-space: nowrap;
}

.wx-tag-in    { background: var(--wx-green-light); color: var(--wx-green-dark); }
.wx-tag-out   { background: var(--wx-red-light);   color: #c0392b; }
.wx-tag-move  { background: var(--wx-blue-light);  color: #1270c8; }
.wx-tag-check { background: var(--wx-orange-light); color: #c97a12; }
.wx-tag-gray  { background: var(--wx-bg-gray);     color: var(--wx-text-2); }

/* ---------- 11. 通用行 / 文本 ---------- */
.wx-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.wx-row-inline {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wx-flex-1 { flex: 1; min-width: 0; }

.wx-muted  { color: var(--wx-text-3); font-size: 13px; }
.wx-text-2 { color: var(--wx-text-2); }
.wx-value  { font-weight: 600; }
.wx-qty-big { font-size: 24px; font-weight: 700; }

.wx-empty {
  text-align: center;
  color: var(--wx-text-3);
  font-size: 14px;
  padding: 32px 0;
}

.wx-divider {
  height: 1px;
  background: var(--wx-line-light);
  margin: 16px 0;
}

/* 进度条 */
.wx-bar-track {
  background: var(--wx-line-light);
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 6px;
}

.wx-bar-fill {
  background: var(--wx-green);
  height: 100%;
  border-radius: 3px;
  transition: width .3s;
}

/* ---------- 12. TabBar（小程序底部导航） ---------- */
.wx-tabbar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  height: var(--wx-tabbar-h);
  padding-bottom: env(safe-area-inset-bottom);
  background: #fbfbfb;
  border-top: 1px solid var(--wx-line-light);
  display: flex;
  z-index: 40;
}

.wx-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--wx-text-2);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.wx-tab-icon {
  font-size: 19px;
  line-height: 1;
}

.wx-tab-text { font-size: 10px; }

.wx-tab.wx-tab-active { color: var(--wx-green); }

/* ---------- 13. 弹层：Toast ---------- */
.wx-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, .78);
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 15px;
  max-width: 76%;
  text-align: center;
  z-index: 200;
  animation: wxFadeIn .18s ease-out;
  word-break: break-word;
}

.wx-toast-icon {
  font-size: 31px;
  display: block;
  margin-bottom: 6px;
}

@keyframes wxFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- 14. 弹层：Dialog ---------- */
.wx-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: wxFadeIn .18s ease-out;
}

.wx-dialog,
.wx-modal-box {
  background: var(--wx-bg-card);
  border-radius: var(--wx-radius-lg);
  width: 100%;
  max-width: 340px;
  overflow: hidden;
  animation: wxDialogIn .22s ease-out;
}

@keyframes wxDialogIn {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: scale(1); }
}

.wx-dialog-bd,
.wx-modal-box {
  padding: 20px;
}

.wx-dialog-title,
.wx-modal-box .wx-card-title {
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 10px;
  display: block;
}

.wx-dialog-content {
  font-size: 15px;
  color: var(--wx-text-2);
  text-align: center;
  margin-bottom: 18px;
  word-break: break-word;
  /* 支持多行步骤文案（\n 换行） */
  white-space: pre-line;
  text-align: left;
  line-height: 1.7;
}

.wx-dialog-ft {
  display: flex;
  border-top: 1px solid var(--wx-line-light);
}

.wx-dialog-btn {
  flex: 1;
  height: 48px;
  line-height: 48px;
  border: none;
  background: transparent;
  font-size: 15px;
  color: var(--wx-text);
  cursor: pointer;
  font-family: inherit;
}

.wx-dialog-btn + .wx-dialog-btn {
  border-left: 1px solid var(--wx-line-light);
}

.wx-dialog-btn.wx-dialog-btn-primary {
  color: var(--wx-green);
  font-weight: 600;
}

.wx-dialog-btn:active { background: var(--wx-bg-gray); }

/* ---------- 15. 弹层：Loading ---------- */
.wx-loading {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, .7);
  color: #fff;
  padding: 18px 22px;
  border-radius: 8px;
  z-index: 210;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

.wx-loading-spin {
  width: 26px;
  height: 26px;
  border: 2.5px solid rgba(255, 255, 255, .3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: wxSpin .7s linear infinite;
}

@keyframes wxSpin {
  to { transform: rotate(360deg); }
}

/* ---------- 16. 弹层：ActionSheet ---------- */
.wx-actionsheet {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100%;
  max-width: 480px;
  z-index: 150;
  animation: wxSheetIn .24s ease-out;
  padding-bottom: env(safe-area-inset-bottom);
}

@keyframes wxSheetIn {
  from { transform: translate(-50%, 100%); }
  to   { transform: translate(-50%, 0); }
}

.wx-actionsheet-group {
  background: var(--wx-bg-card);
  border-radius: 12px;
  margin: 0 8px 8px;
  overflow: hidden;
}

.wx-actionsheet-item {
  height: 52px;
  line-height: 52px;
  text-align: center;
  font-size: 15px;
  border: none;
  background: transparent;
  width: 100%;
  cursor: pointer;
  font-family: inherit;
  position: relative;
}

.wx-actionsheet-item + .wx-actionsheet-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--wx-line-light);
}

.wx-actionsheet-item:active { background: var(--wx-bg-gray); }
.wx-actionsheet-item.wx-actionsheet-warn { color: var(--wx-red); }

/* ---------- 17. 打印 ---------- */
.wx-print-area { display: none; }

@media print {
  body * { visibility: hidden; }
  .wx-print-area, .wx-print-area * { visibility: visible; }
  .wx-print-area {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    padding: 16px;
    font-size: 14px;
    width: 100%;
  }
  .wx-print-area h2 { margin: 0 0 12px; }
}

/* ================= 宿主容器适配（企业微信 / 微信） =================
   企业微信工作台打开时，窗口上方已有一条原生导航栏（应用名 + 返回 + 关闭），
   页面内再放一个返回键会重复，这里隐藏。 */
body.in-wxwork #navbarBack,
body.in-wxwork .wx-navbar-left .wx-nav-btn { display: none !important; }
body.in-wxwork .wx-navbar-left { min-width: 8px; }

/* 微信内置浏览器：底部有一个黑色前进/后退条，给内容留出安全距离 */
body.in-wechat .wx-tabbar { padding-bottom: env(safe-area-inset-bottom); }