/**
 * 全局样式
 *
 * 设计原则（老板原话：「那种做家私的，年轻的老的都不会去学，所以要弄到简单化」）：
 *   - 字大、按钮大、留白多
 *   - 一屏一个任务，不做多层嵌套菜单
 *   - 关键动作用颜色区分，不靠文字说明
 *   - 手机优先，桌面是加宽版
 */

:root {
  /* 底色要比卡片白压得住，不然整页糊成一片分不出层次 */
  --c-bg: #eef2f7;
  --c-surface: #ffffff;
  /* 边框分两级：默认这条很淡，只做分隔；要强调轮廓时才用 strong */
  --c-border: #e8edf2;
  --c-border-strong: #d7dfe8;
  --c-text: #111a28;
  --c-text-dim: #64748b;
  --c-primary: #2563eb;
  --c-primary-dark: #1d4ed8;
  --c-primary-soft: #eff5ff;
  --c-primary-ring: rgba(37, 99, 235, .15);
  --c-ok: #15803d;
  --c-warn: #b45309;
  --c-bad: #c81e2b;
  --c-info: #2563eb;
  --c-muted: #8b95a1;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-lg: 17px;
  --fs-xl: 21px;
  --fs-2xl: 27px;

  /* 两层叠加：近处一层勾边，远处一层铺开，比单层 rgba 更有体积感 */
  --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 2px 8px rgba(15, 23, 42, .05);
  --shadow-lg: 0 4px 10px rgba(15, 23, 42, .06), 0 16px 32px rgba(15, 23, 42, .10);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-size: var(--fs-base);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei",
    "PingFang SC", "Hiragino Sans GB", sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* 手机上禁止双击缩放导致的误触 */
button, a { touch-action: manipulation; }

[v-cloak] { display: none; }

/* ── 布局 ───────────────────────────────────────────── */

.page {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--sp-4);
  padding-bottom: 96px;
}

.page-wide { max-width: 1200px; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  padding: var(--sp-3) var(--sp-4);
}

.topbar h1 {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 600;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stack { display: flex; flex-direction: column; gap: var(--sp-3); }
.row { display: flex; align-items: center; gap: var(--sp-3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.grow { flex: 1; min-width: 0; }
.wrap { flex-wrap: wrap; }

/* ── 卡片 ───────────────────────────────────────────── */

.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  box-shadow: var(--shadow);
}

.card-tight { padding: var(--sp-3); }
.card + .card { margin-top: var(--sp-3); }

.card-title {
  font-size: var(--fs-sm);
  color: var(--c-text-dim);
  margin-bottom: var(--sp-2);
}

/* ── 文字 ───────────────────────────────────────────── */

.t-dim { color: var(--c-text-dim); }
.t-sm { font-size: var(--fs-sm); }
.t-lg { font-size: var(--fs-lg); }
.t-xl { font-size: var(--fs-xl); font-weight: 600; }
.t-2xl { font-size: var(--fs-2xl); font-weight: 700; }
.t-bold { font-weight: 600; }
.t-right { text-align: right; }
.t-center { text-align: center; }
.t-ok { color: var(--c-ok); }
.t-warn { color: var(--c-warn); }
.t-bad { color: var(--c-bad); }
.t-mono { font-variant-numeric: tabular-nums; }

/* 金额永远等宽，方便一列对齐 */
.money { font-variant-numeric: tabular-nums; font-weight: 600; }

/* ── 按钮 ───────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 46px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-text);
  font-size: var(--fs-base);
  font-weight: 500;
  cursor: pointer;
  transition: background .12s, border-color .12s;
  /* 手机窄屏必备：按钮在 flex 容器里会被压到最小宽度，中文没有空格可断，
     浏览器就逐字换行 ——「刷新」竖成两行、「保存草稿」竖成四行。
     flex-shrink: 0 保证按钮先不让步，宁可整条工具条横向滚，也不要竖排的字。
     2026-10-06 在 375px 实测考勤页发现（desk.css 的 .side-brand 是同一类问题）。 */
  white-space: nowrap;
  flex-shrink: 0;
}

.btn:hover:not(:disabled) { background: #eef1f5; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
}
.btn-primary:hover:not(:disabled) { background: var(--c-primary-dark); }

.btn-ok { background: var(--c-ok); border-color: var(--c-ok); color: #fff; }
.btn-danger { background: var(--c-bad); border-color: var(--c-bad); color: #fff; }
.btn-ghost { background: transparent; border-color: transparent; }

.btn-lg { min-height: 58px; font-size: var(--fs-lg); font-weight: 600; }
.btn-sm { min-height: 36px; padding: 0 var(--sp-3); font-size: var(--fs-sm); }
.btn-block { width: 100%; }

/* 工人端用的超大按钮：外劳看不懂字，靠颜色和大小识别 */
.btn-huge {
  min-height: 140px;
  font-size: 26px;
  font-weight: 700;
  border-radius: var(--r-lg);
  flex-direction: column;
  gap: var(--sp-2);
}

/* ── 表单 ───────────────────────────────────────────── */

.field { display: flex; flex-direction: column; gap: var(--sp-1); }
.field label { font-size: var(--fs-sm); color: var(--c-text-dim); }

.input, .select, .textarea {
  width: 100%;
  min-height: 46px;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-text);
  font-size: var(--fs-base);
  font-family: inherit;
}

.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-ring);
}

/* 换掉浏览器原生下拉箭头 —— 各家长得不一样，而且都很老气。内联 SVG 不走网络 */
.select, select.input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%2364748b' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.textarea { min-height: 88px; resize: vertical; }
.input-error { border-color: var(--c-bad); }
.field-error { color: var(--c-bad); font-size: var(--fs-sm); }

/* 金额和数量输入右对齐，方便核对 */
.input-num { text-align: right; font-variant-numeric: tabular-nums; }

/* 标签、警示、列表、表格、弹层、工具类见 components.css（单文件 ≤300 行） */