/**
 * app.css — 在 Arco Design 之上的业务样式
 *
 * 统一设计令牌：间距走 4px 基准的固定档位，圆角只有三档且覆盖了 Arco 自身的
 * 令牌，保证组件库控件与自定义元素用的是同一套标准，不会出现相邻元素
 * 一个 4px 圆角、一个 12px 圆角这种割裂感。
 */

/*
 * 圆角令牌必须同时写在 :root 和 body 上。
 * Arco 把自己的令牌定义在 body 选择器里，只覆盖 :root 会被 body 的定义遮蔽，
 * 导致按钮仍是 Arco 默认的 2px（看起来是方角）。
 */
:root, body {
  /* 间距：4px 基准，只允许用这些档位 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;

  /* 圆角：覆盖 Arco 令牌，全站共用三档 */
  --border-radius-small: 4px;    /* 标签、徽标 */
  --border-radius-medium: 6px;   /* 按钮、输入框 */
  --border-radius-large: 10px;   /* 卡片、弹窗、面板 */

  /*
   * 主色：把 Arco 默认的蓝色主色整条换成橙色，让交互色和品牌色统一。
   * --primary-N 是 --arcoblue-N 的别名，覆盖它，全部 Arco 组件
   * （按钮、菜单选中、链接、开关、聚焦环）都会跟着走，不必逐个改。
   *
   * 基准步 6 选 #C2410C：白字对比度 5.18，与被替换的 Arco 蓝 5.19 基本相同，
   * 换色不会带来任何可读性倒退（按钮白字、白底链接都仍满足 WCAG AA 4.5:1）。
   * 步 5 比步 6 浅，Arco 用它做 hover；步 7 更深，用作按下态。
   */
  --primary-1: 254, 242, 232;
  --primary-2: 253, 224, 203;
  --primary-3: 251, 193, 150;
  --primary-4: 248, 155, 97;
  --primary-5: 234, 88, 12;
  --primary-6: 194, 65, 12;
  --primary-7: 154, 52, 18;
  --primary-8: 124, 45, 18;
  --primary-9: 99, 36, 14;
  --primary-10: 74, 27, 11;

  /* 顶栏与侧栏品牌区同高，保证两者的分隔线水平对齐 */
  --bar-h: 56px;
}

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

body {
  background: var(--color-fill-1);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

.boot, .boot-spin {
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--color-text-3);
}

.muted { color: var(--color-text-3); }

/* Arco 卡片默认没有圆角，统一补上 */
.arco-card { border-radius: var(--border-radius-large); }

/* 同一行内的卡片等高，否则相邻卡片底边错开几个像素，看着像缺了一块 */
.arco-row > .arco-col > .arco-card { height: 100%; }

/* ── 登录页 ──────────────────────────────── */
.login-page {
  height: 100%;
  display: grid;
  place-items: center;
  padding: var(--sp-6);
  /* 两团光晕都取自主色系，不再混一个蓝色进来 */
  background:
    radial-gradient(1000px 600px at 15% 15%, rgba(234, 88, 12, .14), transparent 60%),
    radial-gradient(900px 500px at 85% 85%, rgba(248, 155, 97, .18), transparent 60%),
    var(--color-fill-2);
}

.login-card {
  width: 100%;
  max-width: 380px;
  padding: var(--sp-6);
  background: var(--color-bg-2);
  border-radius: var(--border-radius-large);
  box-shadow: 0 12px 48px rgba(0, 0, 0, .10);
}

.login-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
.login-brand h1 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--color-text-1);
}

.login-err {
  margin-bottom: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--color-danger-light-1);
  color: rgb(var(--danger-6));
  border-radius: var(--border-radius-medium);
  font-size: 13px;
}

/* ── 布局 ────────────────────────────────── */
.app-layout { height: 100%; }
.app-sider { border-right: 1px solid var(--color-border-2); }

/* 品牌区左内边距与菜单项文字对齐；收起时改为居中，避免 logo 被挤偏 */
.sider-brand {
  height: var(--bar-h);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-4);
  border-bottom: 1px solid var(--color-border-2);
  overflow: hidden;
}
.sider-brand.collapsed {
  padding: 0;
  justify-content: center;
  gap: 0;
}
.sider-brand svg { flex: none; }

.sider-title {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--color-text-1);
}

.app-header {
  height: var(--bar-h);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-4);
  background: var(--color-bg-2);
  border-bottom: 1px solid var(--color-border-2);
}
.header-title { font-size: 15px; font-weight: 600; color: var(--color-text-1); }
.header-right { margin-left: auto; }

.user-chip {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--border-radius-medium);
  cursor: pointer;
  transition: background .15s;
}
.user-chip:hover { background: var(--color-fill-2); }
.user-meta { display: flex; align-items: center; gap: var(--sp-1); }
.user-name { font-size: 13px; color: var(--color-text-1); }

.app-content { overflow: auto; }

/* 页面统一内边距；页内各区块之间也统一用 --sp-4 */
.page { padding: var(--sp-5); }
.page > * + * { margin-top: var(--sp-4); }
.page-loading { display: grid; place-items: center; padding: 80px 0; }

/* 操作栏：右对齐的按钮/筛选器，页面标题已在顶栏展示，此处不再重复 */
.page-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

/* ── 概览 ────────────────────────────────── */
.stat-card .arco-statistic-value { font-size: 26px; }
.stat-suffix { font-size: 12px; color: var(--color-text-3); }

/* 外卖券是最常关注的指标，用左侧色条和主色数值突出 */
.stat-card.primary { border-left: 3px solid rgb(var(--primary-6)); }
.stat-card.primary .arco-statistic-value { color: rgb(var(--primary-6)); }

/* 券包页的外卖分组同样高亮 */
.group-primary { border-left: 3px solid rgb(var(--primary-6)); }

.trend {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-2);
  height: 190px;
  padding-top: var(--sp-2);
}
.trend-item { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.trend-bar-wrap { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.trend-bar {
  /* 限制柱宽：数据只有一两天时，flex 均分会把柱子拉成一整片色块 */
  width: 100%;
  max-width: 44px;
  margin: 0 auto;
  border-radius: var(--border-radius-small) var(--border-radius-small) 0 0;
  /*
   * 单一实色而非渐变：这是单系列柱图，渐变不承载任何信息。
   * 原先的 #FFD45C→#F59300 对白色卡片只有 1.4~2.3:1，低于图形元素 3:1 的下限；
   * 改用主色步 5（#EA580C，3.56:1）既达标又和主色同源。
   */
  background: rgb(var(--primary-5));
  transition: height .3s;
}
.trend-label { margin-top: var(--sp-2); font-size: 11px; color: var(--color-text-3); }

.sched { font-size: 13px; }
.sched-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--color-border-1);
}
.sched-row:last-child { border-bottom: 0; }
.sched-row span { color: var(--color-text-3); }
.sched-row b { font-weight: 500; color: var(--color-text-1); }

/* ── 账号卡片 ────────────────────────────── */
.account-card { height: 100%; }

.ac-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); }
.ac-title { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.ac-avatar {
  width: 36px; height: 36px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--border-radius-medium);
  background: var(--color-fill-2);
  color: var(--color-text-2);
  font-size: 15px; font-weight: 600;
}
.ac-name {
  font-size: 15px; font-weight: 600; color: var(--color-text-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ac-sub { font-size: 12px; color: var(--color-text-3); }

.ac-body { margin: var(--sp-4) 0; min-height: 62px; }
.ac-count { font-size: 26px; font-weight: 650; color: rgb(var(--primary-6)); line-height: 1.2; }
.ac-count span { font-size: 13px; font-weight: 400; color: var(--color-text-3); }
.ac-detail {
  font-size: 12px; color: var(--color-text-3); margin-top: var(--sp-1);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ac-idle { font-size: 13px; color: var(--color-text-3); padding-top: var(--sp-3); }
.ac-note {
  margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--border-radius-medium);
  background: var(--color-fill-1);
  font-size: 12px; color: var(--color-text-2);
}
.ac-last { margin-top: var(--sp-2); font-size: 12px; color: var(--color-text-3); }

.ac-actions { border-top: 1px solid var(--color-border-1); padding-top: var(--sp-3); }

/* ── 扫码弹窗 ────────────────────────────── */
.qr-wrap { text-align: center; }
.qr-box {
  width: 220px; height: 220px;
  margin: var(--sp-1) auto var(--sp-3);
  display: grid; place-items: center;
  border: 1px solid var(--color-border-2);
  border-radius: var(--border-radius-large);
  background: var(--color-fill-1);
  overflow: hidden;
}
.qr-box img { width: 100%; height: 100%; object-fit: contain; }

.qr-status { font-size: 14px; font-weight: 500; color: var(--color-text-2); }
.qr-status.success { color: rgb(var(--success-6)); }
.qr-status.failed  { color: rgb(var(--danger-6)); }

.qr-link { margin-top: var(--sp-3); text-align: left; }
.qr-link a { font-size: 12px; word-break: break-all; color: rgb(var(--primary-6)); }

.form-err { margin-top: var(--sp-1); font-size: 12px; color: rgb(var(--danger-6)); }

/* ── 券 ──────────────────────────────────── */
.coupon-summary-title { font-size: 13px; color: var(--color-text-3); margin-bottom: var(--sp-1); }
.coupon-summary { font-size: 13px; color: var(--color-text-1); line-height: 1.7; }

.coupon {
  height: 100%;
  padding: var(--sp-3);
  background: var(--color-bg-2);
  border: 1px solid var(--color-border-2);
  border-left: 3px solid rgb(var(--primary-6));
  border-radius: var(--border-radius-medium);
}
.coupon-value { font-size: 17px; font-weight: 650; color: rgb(var(--primary-6)); }
.coupon-name  { font-size: 13px; color: var(--color-text-1); margin: var(--sp-1) 0; }
.coupon-period{ font-size: 11px; color: var(--color-text-3); }

/* ── 历史展开区 ──────────────────────────── */
.history-detail { padding: var(--sp-2) var(--sp-1); }

/*
 * 标签-值列表：标签定宽、值自适应并允许换行。
 * 不用 Arco Descriptions 的多列布局，因为「品类分布」是很长的中文串，
 * 挤进等分列里会溢出压到相邻单元格上。
 */
.kv {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--sp-1) var(--sp-3);
  margin: 0;
  font-size: 12px;
}
.kv dt { color: var(--color-text-3); white-space: nowrap; }
.kv dd {
  margin: 0;
  color: var(--color-text-1);
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.7;
}
.history-coupons {
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.mini-coupon {
  display: flex; flex-direction: column; gap: 1px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--border-radius-medium);
  background: var(--color-fill-1);
  font-size: 12px;
}
.mini-coupon b { color: rgb(var(--primary-6)); font-size: 13px; }
.mini-coupon span { color: var(--color-text-1); }
.mini-coupon i { color: var(--color-text-3); font-style: normal; font-size: 11px; }

/* ── 其他 ────────────────────────────────── */
.log-toolbar { margin-bottom: var(--sp-3); }

.role-opt { display: flex; flex-direction: column; line-height: 1.4; }
.role-opt span { font-size: 12px; color: var(--color-text-3); }

@media (max-width: 768px) {
  .page { padding: var(--sp-4); }
  .app-header { padding: 0 var(--sp-3); }
  .header-title { display: none; }
}