/* ============================================================
 * override.css —— H5 运行时补丁层
 * 位置：必须放在 base.css 之后、页面 css 之后加载
 * 作用：把小程序独有的标签/单位/行为补成浏览器能吃的
 * ============================================================ */

/* ---------- 1. rpx 基准 ----------
 * 小程序 1rpx = 屏宽/750。这里用 CSS 变量，
 * 桌面端把「屏宽」锁成 480px 的虚拟手机宽度，视觉与真机一致。
 * 手机端直接跟随真实 vw。
 */
:root {
  --rpx: calc(100vw / 750);
  --app-max-width: 480px;
  --page-bg: #f8f8f8;
}

@media (min-width: 520px) {
  :root {
    --rpx: calc(var(--app-max-width) / 750);
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* 桌面端居中，模拟手机宽度 */
body > .app-shell {
  margin: 0 auto;
  max-width: var(--app-max-width);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  background: inherit;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .04);
}

/* electronic 页是整屏底色（红/绿/蓝），需要把底色铺到 shell 上 */
body.theme-electronic > .app-shell {
  background: #f8f8f8;
}

/* .page 原样式 height:100%; overflow-y:auto —— 在 H5 里交给浏览器滚动 */
.page-root .page {
  height: auto;
  overflow-y: visible;
  width: 100%;
}

/* ---------- 2. 小程序标签映射 ----------
 * wx-view / wx-text / wx-image 保留原标签名（见 convert_wxss.py 的说明），
 * 这里只给它们补浏览器默认没有的 display，其它样式全部交给原始 wxss。
 * 注意：electronic.wxss 里有 wx-image,wx-text,wx-view{flex-shrink:0}，
 * 保留原标签名后这条就只作用于本页，不会污染全站。
 */
wx-view {
  box-sizing: border-box;
  display: block;
}

wx-text {
  box-sizing: border-box;
  display: inline;
}

wx-image {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-sizing: border-box;
  display: inline-block;
  overflow: hidden;
}

/* wx-image 用 background-image 渲染（H5 里没有 image 标签行为），
   所以需要一个内层 <img> 兜住 object-fit */
wx-image > img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

img {
  border: 0;
  max-width: 100%;
}

/* ---------- 3. 页面级 token（原 app.wxss 的 page 背景） ---------- */
.page-root {
  background: var(--page-bg);
  min-height: 100vh;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

/* 白底页面（请假详情原 wxss: page{background-color:#fff}） */
.page-root--white {
  background: #fff;
}

/* electronic.wxss 里 page{height:100vh;width:100vw}
 * 100vw 在桌面端会比 app-shell(480px) 宽，导致横向溢出 + 白边。
 * 这里换成 100%，让容器宽度说了算。
 */
.page-root {
  height: auto;
  min-height: 100vh;
  width: 100%;
}

/* ---------- 4. 通用容器 ---------- */
.h5-appbar {
  align-items: center;
  background: #fff;
  border-bottom: 1px solid #f3f3f3;
  color: #000;
  display: flex;
  font-size: 17px;
  font-weight: 500;
  height: 44px;
  justify-content: center;
  position: sticky;
  top: 0;
  z-index: 50;
}

/* 返回键：内联 SVG 描边折角（chevron）
 * 尺寸对齐微信原生：箭头约 12×20，线宽 1.8，圆头。
 * 点击热区做成 44px 高、左侧 12px 内边距，比图标本体大，好点。
 *
 * 注：曾试过「伪元素 + border + rotate(45deg)」的纯 CSS 写法，
 * 在部分引擎里伪元素的 transform 不生效，会退化成 "L" 形，所以不用。
 */
.h5-appbar__back {
  align-items: center;
  cursor: pointer;
  display: flex;
  height: 44px;
  justify-content: flex-start;
  left: 0;
  padding-left: 12px;
  padding-right: 10px;
  position: absolute;
  top: 0;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.h5-appbar__back svg {
  display: block;
  flex-shrink: 0;
}

.h5-appbar__back:active {
  opacity: .5;
}

/* 扫码直达场景：箭头照旧渲染，但不可点、不跳转。
 * 用 cursor:default + 去掉 :active 反馈，避免“看起来能点却不动”的困惑。 */
.h5-appbar__back--disabled {
  cursor: default;
  pointer-events: none;
}

.h5-appbar__back--disabled:active {
  opacity: 1;
}

.h5-appbar__title {
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- 5. 微信内置 <icon> 复刻 ----------
 * 原 steps 组件用了 <icon type="waiting|success|warn">，
 * type=success 绿勾 / waiting 灰蓝点 / warn 橙叹号。
 */
.wx-icon {
  display: inline-block;
  flex-shrink: 0;
  height: 1em;
  line-height: 1;
  position: relative;
  vertical-align: middle;
  width: 1em;
}

.wx-icon--success::before {
  color: #09bb07;
  content: "✓";
  font-size: 1em;
  font-weight: 700;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.wx-icon--waiting::before {
  background: #c9c9c9;
  border-radius: 50%;
  content: "";
  height: .62em;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: .62em;
}

.wx-icon--warn::before {
  background: #f5a623;
  border-radius: 50%;
  color: #fff;
  content: "!";
  font-size: .78em;
  font-weight: 700;
  height: 1em;
  left: 50%;
  line-height: 1em;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1em;
}

.wx-icon--cancel::before,
.wx-icon--clear::before {
  background: #c9c9c9;
  border-radius: 50%;
  color: #fff;
  content: "×";
  font-size: .78em;
  height: 1em;
  left: 50%;
  line-height: 1em;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1em;
}

/* steps 里的连线：原 wxss 用 ::after 画，尺寸依赖 <icon size="20">
 * 这里把 size=20 折算成 20px，图标内的 ::before 用 em 自适应 */
.geek-step-icon {
  height: 20px;
  padding: 0 4px;
  width: 20px;
}

/* ---------- 6. <button> 复位 ----------
 * 原 gk-button 是 <button> 标签，浏览器默认样式会盖掉 wxss，
 * 这里把原生外观清空，让 base.css 的 .geek-btn-* 说了算。
 */
button.geek-btn {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  font-family: inherit;
  outline: none;
}

button.geek-btn::after {
  border: none;
}

/* tui-modal 的按钮同理 */
button.tui-modal-btn {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  cursor: pointer;
  display: block;
  font-family: inherit;
  outline: none;
  padding: 0;
  text-align: center;
}

/* ---------- 7. 原样式里拿不到的元素补丁 ---------- */
/* 顶部提示条：原 wxss 是 position:fixed;top:0，
 * 小程序里 webview 本来就位于原生导航栏下方，所以 fixed top:0 = 导航栏下方；
 * H5 里导航栏是我们自己画的，所以改成 sticky 并顶在 44px（导航栏高度）下方。
 * 用 sticky 而不是 fixed：不会在桌面端溢出 app-shell 宽度，也不需要占位垫片。 */
.result-state-tips,
.geek-msg_fixed {
  left: auto !important;
  position: sticky !important;
  right: auto !important;
  top: 44px !important;
  transition: none !important;
  z-index: 40;
}

/* 请假详情：附件缩略图
 * 这是原页面唯一真正可点的图片（result.wxml 第 82 行 bindtap="preview"），
 * 点了走 wx.previewImage，所以给 zoom-in 光标是对的。
 */
.result-detail-cell-img {
  border-radius: 4px;
  cursor: zoom-in;
  object-fit: cover;
}

/* 电子假条：二维码/照片占位保持比例
 * 注意：原页面这些图**没有绑定任何事件**，不可点。
 * 所以这里不设 cursor: zoom-in（只在 ?zoom=1 时由 JS 动态加）。
 */
.student-ewm,
.student-photo,
.student-pic-red,
.student-pic-green,
.student-pic-blue {
  object-fit: cover;
}

/* 头像缺省来源时的淡灰底 */
.img-fallback {
  background: #f2f2f2;
}

/* ---------- 8. 交互反馈 ---------- */.geek-btn-hover,
.geek-btn:active {
  opacity: .9;
}

.geek-cell_active {
  background-color: #ececec !important;
}

/* toast / modal（自己实现的 wx.showToast / wx.showModal） */
.wx-toast-layer {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  left: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999;
}

.wx-toast {
  background: rgba(17, 17, 17, .82);
  border-radius: 8px;
  color: #fff;
  font-size: 15px;
  max-width: 70%;
  padding: 12px 18px;
  text-align: center;
  word-break: break-all;
}

.wx-modal-layer {
  align-items: center;
  background: rgba(0, 0, 0, .6);
  display: flex;
  height: 100%;
  justify-content: center;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9998;
}

.wx-modal {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  text-align: center;
  width: 78%;
}

.wx-modal__title {
  color: #000;
  font-size: 17px;
  font-weight: 600;
  padding: 22px 20px 0;
}

.wx-modal__content {
  color: #888;
  font-size: 15px;
  line-height: 1.5;
  padding: 12px 20px 20px;
}

.wx-modal__btns {
  border-top: 1px solid #eee;
  display: flex;
}

.wx-modal__btn {
  background: none;
  border: none;
  color: #576b95;
  cursor: pointer;
  flex: 1;
  font-family: inherit;
  font-size: 17px;
  padding: 14px 0;
}

.wx-modal__btn + .wx-modal__btn {
  border-left: 1px solid #eee;
}

.wx-modal__btn--primary {
  color: #576b95;
  font-weight: 600;
}

/* 图片预览层 */
.wx-preview-layer {
  align-items: center;
  background: #000;
  display: flex;
  height: 100%;
  justify-content: center;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10000;
}

.wx-preview-layer img {
  max-height: 92%;
  max-width: 96%;
  object-fit: contain;
}

.wx-preview-close {
  color: #fff;
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
  position: absolute;
  right: 18px;
  top: 18px;
  user-select: none;
}

/* ---------- 9. 有奖问卷/调试面板（仅 dev 模式显示） ---------- */
.h5-param-panel {
  background: #fff;
  border-top: 1px solid #eee;
  font-size: 13px;
  margin-top: 24px;
  padding: 14px 15px 24px;
}

.h5-param-panel__title {
  color: #4a4a4a;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}

.h5-param-panel__hint {
  color: #9b9b9b;
  font-size: 12px;
  line-height: 1.5;
  margin-bottom: 10px;
}

.h5-param-panel__grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.h5-param-panel label {
  color: #9b9b9b;
  display: block;
  font-size: 12px;
  margin-bottom: 3px;
}

.h5-param-panel input,
.h5-param-panel select {
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  padding: 7px 8px;
  width: 100%;
}

.h5-param-panel__actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.h5-param-panel__actions button {
  background: #3f8eff;
  border: none;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  flex: 1;
  font-family: inherit;
  font-size: 14px;
  padding: 10px 0;
}

.h5-param-panel__actions button.ghost {
  background: #f2f2f2;
  color: #4a4a4a;
}