/* 品牌色集中在这里。页面各自只引变量，不写字面色值 ——
   改配色时只动这个文件，不会漏掉某个角落还留着旧的蓝。 */
:root {
  --blue: #0077B9;
  --blue-dk: #005B8E;      /* 蓝底上的深蓝文字 */
  --blue-line: #CBE6F4;    /* 浅蓝元素的描边 */
  --green: #167747;
  --blue-lt: #E6F2F9;
  --green-lt: #E7F3EC;
  --ink: #1B2733;
  --ink2: #5A6672;
  --ink3: #93A0AC;
  --line: #E3E9EE;
  --bg: #F4F7F9;

  /* 状态色与描边。单独列出来是为了让各页面的 CSS 里一个写死的色值都不出现 ——
     否则改配色时总有一个角落忘了改，页面就花脸。 */
  --green-line: #C9E2D4;
  --muted: #C7D0D8;
  --danger: #C0392B;
  --danger-bg: #FDECEA;
  --danger-line: #F5C6C0;
  --warn: #8A5A00;
  --warn-bg: #FFF4E5;
}

* { box-sizing: border-box; }

/* hidden 必须真的隐藏。
   浏览器默认的 [hidden]{display:none} 属于 UA 样式，作者样式里的 display:flex /
   display:block 会直接盖掉它 —— 于是 .who、.modes 这类元素加了 hidden 照样显示，
   现场看到的就是一个空的黑色身份卡和一个不该出现的模式切换。
   实测踩过，所以用 !important 钉死。 */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* 每个页面顶部压一条蓝绿对半的色带 —— 这个关系是从 logo 里
   绿伞托着蓝椭圆推出来的，用它给所有页面做统一收口。 */
.brand-bar {
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--blue) 0%, var(--blue) 52%,
    var(--green) 52%, var(--green) 100%
  );
}

/* 蓝管动作，绿管结果：蓝只出现在要点击/进行中的元素上，
   绿只出现在已完成的状态上。客户扫一眼就知道自己还差什么。 */
.btn {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 9px;
  padding: 13px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #fff;
  background: var(--blue);
  cursor: pointer;
}
.btn[disabled] { background: var(--muted); cursor: default; }

/* 行内小按钮。核销页的「重新登录」和后台的各种操作按钮都用它，
   所以放共享文件里 —— 放在 admin.css 里的话核销页引不到，
   按钮会退化成浏览器默认样式。 */
.btn-inline {
  padding: 8px 14px; font-size: 13px; border: 0; border-radius: 7px;
  background: var(--blue); color: #fff; cursor: pointer; font-family: inherit;
}
.btn-inline.ghost { background: #fff; color: var(--ink2); border: 1px solid var(--line); }
.btn-inline.danger { background: var(--danger); }
.btn-secondary { background: #fff; color: var(--blue); border: 1px solid var(--blue); }

/* ---- 轻提示（toast）----
   默认绿，err 红，info 蓝。左边一条粗色条表示性质，
   一眼能分清「保存成功」和「保存失败」。 */
/* 靠右下角。
   不能水平居中、也不能靠右上角 —— 后台的导航标签是居中的，视口一宽，
   居中的提示正好压住标签，右上角的也会蹭到最右边那个「审计日志」。
   右下角在任何宽度下都不会和页面上的东西打架。实测两种都踩过。 */
.ui-toasts {
  position: fixed; right: 16px; bottom: 16px;
  /* column（不是 column-reverse）：容器贴着底边往上长，DOM 里后加的排在下面，
     也就是新提示出现在最靠近右下角的位置，旧的自然往上顶。
     用 reverse 的话新提示会跑到最上面，离眼睛越来越远。 */
  z-index: 9999; display: flex; flex-direction: column; gap: 8px;
  width: min(88vw, 360px); pointer-events: none;
}
.ui-toast {
  background: #fff; border: 1px solid var(--line);
  border-left: 4px solid var(--green); border-radius: 9px;
  padding: 11px 14px; font-size: 13px; color: var(--ink); line-height: 1.5;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
  animation: ui-toast-in .18s ease-out;
}
.ui-toast.err { border-left-color: var(--danger); }
.ui-toast.info { border-left-color: var(--blue); }
.ui-toast.out { opacity: 0; transform: translateY(8px); transition: opacity .18s, transform .18s; }
@keyframes ui-toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ---- 确认框 ----
   只用在会改变状态的操作上（停用展区、解绑部门、移除礼品权限）。 */
.ui-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(27, 39, 51, .45);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.ui-dialog {
  background: #fff; border-radius: 12px; width: min(92vw, 380px);
  padding: 18px; box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
}
.ui-dialog h3 { margin: 0 0 8px; font-size: 15px; color: var(--ink); }
.ui-dialog p { margin: 0 0 16px; font-size: 13px; color: var(--ink2); line-height: 1.6; }
.ui-dialog .row { display: flex; gap: 8px; justify-content: flex-end; }
.ui-dialog button {
  padding: 8px 16px; font-size: 13px; border-radius: 7px; cursor: pointer;
  background: #fff; color: var(--ink2); border: 1px solid var(--line);
}
.ui-dialog button.primary { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }
.ui-dialog button.primary.danger { background: var(--danger); border-color: var(--danger); }
.ui-dialog button[disabled] { opacity: .45; cursor: default; }
.ui-confirm-input {
  width: 100%; margin-bottom: 14px; padding: 9px 11px; font-size: 13px;
  border: 1px solid var(--line); border-radius: 7px; font-family: inherit;
}
.ui-confirm-input:focus { outline: none; border-color: var(--danger); }

/* ---- 诊断信息 ----
   免登失败时把客户端各环节的实情摊出来。等宽、可选中，现场的人能整段复制发出来。
   核销页和后台页都要用，所以放共享文件里。 */
.diag {
  background: #fff; border: 1px solid var(--line); border-radius: 9px;
  padding: 11px 12px; margin-bottom: 12px; font-size: 11px; line-height: 1.7;
  color: var(--ink2); white-space: pre-wrap; word-break: break-all;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}