*,
*::before,
*::after {
  box-sizing: border-box;
}

/* The global preference drawer is intentionally unavailable in this deployment. */
#app .flex-col-center.size-10.cursor-pointer.rounded-l-lg.rounded-r-none.border-none.bg-primary {
  display: none !important;
}

@media (max-width: 767px) {
  html,
  body,
  #app {
    max-width: 100%;
    overflow-x: hidden;
  }

  .ant-card,
  .ant-card-body,
  .ant-tabs,
  .ant-tabs-content,
  .ant-tabs-tabpane,
  .ant-table-wrapper {
    min-width: 0;
    max-width: 100%;
  }

  .ant-card-body {
    overflow: hidden;
  }

  .ant-table-wrapper {
    width: 100%;
    overflow: hidden;
  }

  .ant-table-wrapper .ant-table,
  .ant-table-wrapper .ant-table-container {
    max-width: 100%;
  }

  .ant-table-wrapper .ant-table-content,
  .ant-table-wrapper .ant-table-body {
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .ant-table-wrapper .ant-table-content > table,
  .ant-table-wrapper .ant-table-body > table {
    max-width: none;
  }

  .ant-table-wrapper .ant-table-pagination.ant-pagination {
    max-width: 100%;
    flex-wrap: wrap;
    row-gap: 8px;
  }

  /* Keep every Page on one mobile frame without turning wide tables into page-level overflow. */
  .relative.flex.h-full.flex-col,
  .relative.flex.h-full.flex-col > .h-full.p-4 {
    min-width: 0;
    max-width: 100%;
  }

  .relative.flex.h-full.flex-col > .h-full.p-4 {
    padding-inline: 2.5px !important;
    overflow-x: clip;
  }

  .relative.flex.h-full.flex-col > .h-full.p-4 > * {
    min-width: 0;
    max-width: 100%;
  }

  .ant-card-body {
    padding-right: 10px !important;
    padding-left: 10px !important;
  }

  /* Tables meet the card edge; controls above them keep the card-body gutter. */
  .ant-card-body > .ant-table-wrapper {
    width: calc(100% + 20px);
    max-width: none;
    margin-inline: -10px;
  }

  .ant-table-wrapper .ant-table-thead > tr > th,
  .ant-table-wrapper .ant-table-tbody > tr > td {
    padding-right: 8px;
    padding-left: 8px;
  }

  .ant-table-wrapper .ant-pagination {
    justify-content: center;
  }

  .ant-table-wrapper .ant-pagination-options {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    row-gap: 8px;
    max-width: 100%;
    margin-inline-start: 0;
  }

  .source-mobile-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 8px;
    margin-top: 12px;
  }

  .source-mobile-pagination .ant-pagination-options {
    display: inline-flex;
    margin-inline-start: 0;
  }

  /* Check-in pages fill the remaining mobile viewport even with only a few rows. */
  .ant-card.cop-page,
  .ant-card.yf-page {
    min-height: calc(100vh - 158px) !important;
    min-height: calc(100dvh - 158px) !important;
  }

  .ant-card.cop-page > .ant-card-body,
  .ant-card.yf-page > .ant-card-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .cop-page .ant-table-content,
  .cop-page .ant-table-body,
  .yf-page .ant-table-content,
  .yf-page .ant-table-body {
    overscroll-behavior-x: contain;
  }
}

/* ============================================================
   移动端底部空白修复 2026-08-20 (start)
   现象:整页滚动滑到底,内容结束后还有一段空白/灰带,可继续下拉
   根因组合:100vh 取大视口高度(地址栏收起) > 实际可视高度,页面根
   被垫高;滚动边界浏览器橡皮筋回弹露出 html/body 底色
   ------------------------------------------------------------
   ① 拦截橡皮筋回弹与滚动连锁:防止滑到底继续下拉露出底色空白
   ② html/body 页根高度改用动态视口 100dvh:随地址栏实时变化,
      不再多出 100vh-可视高度 的死区
   ③ 不支持 dvh 的老内核回退到 JS 注入的 --vh 真实视口高度
   ============================================================ */
@media (max-width: 767px) {
  body,
  #app {
    overscroll-behavior-y: none;
    -webkit-overflow-scrolling: touch;
  }

  /* 内部可滚动列表滚动到底后,不再把滚动"传染"给页面根 */
  .ant-table-body,
  .ant-table-content,
  .course-list {
    overscroll-behavior: contain;
  }

  /* ② 页根:100vh 兜底 + 100dvh 修正 */
  body {
    min-height: 100vh;
    min-height: 100dvh !important;
  }

  .mall-storefront[data-v-fbf533fd],
  .lookup-page[data-v-7b65607d] {
    min-height: 100vh !important;
    min-height: 100dvh !important;
  }

  /* ③ 老内核兜底(JS 在 index.html 注入 --vh) */
  @supports not (height: 100dvh) {
    body,
    .mall-storefront[data-v-fbf533fd],
    .lookup-page[data-v-7b65607d] {
      min-height: calc(var(--vh, 1vh) * 100) !important;
    }
  }
}
/* ============ 移动端底部空白修复 2026-08-20 (end) ============ */
/* ============================================================
   移动端整页滚动修复 2026-08-20 (start)
   现象:表单/列表是独立局部滚动层,与整页滚动分离;表单占满屏幕后
   无外部可滑区域,无法滚动整页
   根因:
   - 内容区 .h-full.p-4 内联 height:calc(var(--vben-content-height))
     + overflow-y:auto, 内容区自身接管滚动
   - 表格 .ant-table-body 内联 max-height:calc(-305px + 100vh)
     + overflow:auto scroll, 表格自身纵向滚动
   方案(仅移动端):解除内容链定高与局部滚动,内容自然撑高,交由
   html/body 统一整页滚动;overscroll-behavior-y:none 继续生效,
   保留"滑到底继续下拉无空白"的回弹表现。
   ============================================================ */
@media (max-width: 767px) {
  /* ① 主内容区不再被 flex:1 压回视口高度,改由内容自然撑高 */
  main#__vben_main_content {
    flex: none !important;
  }

  /* ② 内容链定高解除(h-full 百分比高度、内联 calc 高度全部让位) */
  main#__vben_main_content > .relative.h-full,
  main#__vben_main_content > .relative.h-full > .relative.flex.h-full.flex-col,
  main#__vben_main_content > .relative.h-full > .relative.flex.h-full.flex-col > .h-full.p-4,
  main#__vben_main_content > .relative.flex.h-full.flex-col > .h-full.p-4,
  main#__vben_main_content > .h-full.p-4 {
    height: auto !important;
  }

  /* ③ 内容区局部滚动取消(覆盖内联 overflow-y:auto),
      并保证内容不满屏时背景仍铺满,不露出底色空白 */
  main#__vben_main_content .h-full.p-4 {
    height: auto !important;
    min-height: calc(100vh - 88px) !important;
    min-height: calc(100dvh - 88px) !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* ④ 表格纵向局部滚动取消(覆盖内联 max-height / overflow),横向滚动保留 */
  .ant-table-wrapper .ant-table-body {
    max-height: none !important;
    overflow-y: hidden !important;
  }

  /* ⑤ 只在横向边界阻止回弹;纵向手势继续传给 #app 整页滚动层 */
  .ant-table-wrapper .ant-table-content,
  .ant-table-wrapper .ant-table-body {
    overscroll-behavior-x: contain !important;
    overscroll-behavior-y: auto !important;
    touch-action: pan-x pan-y;
  }
}
/* ============ 移动端整页滚动修复 2026-08-20 (end) ============ */

/* 浅色主题下状态标签保持浅色语义色 */
html:not(.dark) .ant-tag-orange {
  background: #fff7e6 !important;
  border-color: #ffd591 !important;
  color: #d46b08 !important;
}

html:not(.dark) .ant-tag-blue {
  background: #e6f4ff !important;
  border-color: #91caff !important;
  color: #0958d9 !important;
}

html:not(.dark) .ant-tag-green {
  background: #f6ffed !important;
  border-color: #b7eb8f !important;
  color: #389e0d !important;
}

html:not(.dark) .ant-tag-red {
  background: #fff2f0 !important;
  border-color: #ffccc7 !important;
  color: #cf1322 !important;
}

html:not(.dark) .ant-tag-default {
  background: #fafafa !important;
  border-color: #d9d9d9 !important;
  color: #595959 !important;
}

/* ============================================================
   固定浅色交互与短动效 2026-09-10
   ============================================================ */
html.light {
  --ring: 212 100% 45%;
  --overlay: 215 25% 25% / 20%;
  --overlay-content: 210 25% 98% / 92%;
  color-scheme: light !important;
}

/* 固定浅色后不再展示无效的主题切换入口。 */
html.light .theme-toggle {
  display: none !important;
}

/* Ant 浮层可能挂载到 body，不能只依赖页面组件的局部主题类。 */
html.light :where(
    .ant-select-dropdown,
    .ant-dropdown-menu,
    .ant-cascader-menus,
    .ant-picker-panel-container,
    .ant-popover-inner,
    .ant-modal-content,
    .ant-drawer-content,
    .ant-message-notice-content,
    .ant-notification-notice,
    .ant-tooltip-inner
  ) {
  color: #303133 !important;
  background: #fff !important;
  border-color: #e5e7eb !important;
}

html.light :where(
    .ant-select-dropdown,
    .ant-dropdown-menu,
    .ant-cascader-menus,
    .ant-picker-panel-container,
    .ant-popover-inner,
    .ant-modal-content,
    .ant-drawer-content,
    .ant-message-notice-content,
    .ant-notification-notice
  ) {
  box-shadow: 0 8px 24px rgb(15 23 42 / 10%) !important;
}

html.light .ant-tooltip {
  --antd-arrow-background-color: #fff;
}

html.light .ant-tooltip-inner,
html.light .tippy-box {
  color: #303133 !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 6px 18px rgb(15 23 42 / 12%) !important;
}

html.light .tippy-arrow {
  color: #fff !important;
}

html.light :where(
    .ant-select-item-option-active:not(.ant-select-item-option-disabled),
    .ant-dropdown-menu-item-active:not(.ant-dropdown-menu-item-disabled),
    .ant-cascader-menu-item-active:not(.ant-cascader-menu-item-disabled),
    .ant-cascader-menu-item:hover:not(.ant-cascader-menu-item-disabled),
    .ant-menu-item:hover:not(.ant-menu-item-disabled),
    .ant-menu-submenu-title:hover,
    .ant-tree-node-content-wrapper:hover,
    .ant-list-item:hover
  ) {
  color: #303133 !important;
  background: #f2f7ff !important;
}

html.light :where(
    .ant-select-item-option-selected:not(.ant-select-item-option-disabled),
    .ant-dropdown-menu-item-selected,
    .ant-cascader-menu-item-active,
    .ant-menu-item-selected,
    .ant-tree-node-selected,
    .ant-segmented-item-selected
  ) {
  color: #0958d9 !important;
  background: #e6f4ff !important;
}

html.light :where(
    .ant-table-tbody > tr.ant-table-row:hover > td,
    .ant-table-tbody > tr > td.ant-table-cell-row-hover
  ) {
  background: #f7faff !important;
}

html.light .ant-table-tbody > tr.ant-table-row-selected > td {
  background: #eaf3ff !important;
}

html.light :where(
    .ant-input:focus,
    .ant-input-focused,
    .ant-input-affix-wrapper:focus,
    .ant-input-affix-wrapper-focused,
    .ant-input-number-focused,
    .ant-picker-focused,
    .ant-select-focused .ant-select-selector
  ) {
  border-color: #1677ff !important;
  box-shadow: 0 0 0 2px rgb(22 119 255 / 14%) !important;
}

html.light :where(.ant-modal-mask, .ant-drawer-mask) {
  background: rgb(15 23 42 / 18%) !important;
  backdrop-filter: none !important;
}

/* 将常见 300-500ms 交互压缩到 120-150ms，保留反馈但减少拖沓感。 */
html.light :where(
    .ant-btn,
    .ant-input,
    .ant-input-affix-wrapper,
    .ant-input-number,
    .ant-picker,
    .ant-select-selector,
    .ant-select-item,
    .ant-dropdown-menu-item,
    .ant-cascader-menu-item,
    .ant-menu-item,
    .ant-menu-submenu-title,
    .ant-tabs-tab,
    .ant-switch,
    .ant-checkbox-inner,
    .ant-radio-inner,
    .ant-table-cell,
    .ant-tree-node-content-wrapper,
    button,
    a,
    [role="button"],
    [role="menuitem"],
    [data-highlighted]
  ) {
  transition-delay: 0ms !important;
  transition-duration: 120ms !important;
}

html.light :where(
    .ant-select-dropdown,
    .ant-dropdown,
    .ant-popover,
    .ant-tooltip,
    .ant-modal,
    .ant-modal-mask,
    .ant-drawer,
    .ant-drawer-mask,
    .ant-message-notice,
    .ant-notification-notice,
    [data-reka-popper-content-wrapper]
  ) {
  animation-duration: 140ms !important;
  transition-duration: 140ms !important;
}

html.light [class*="duration-"] {
  animation-duration: 150ms !important;
  transition-duration: 150ms !important;
}

html.light :where(.animate-in, .animate-out) {
  animation-duration: 140ms !important;
}

@media (prefers-reduced-motion: reduce) {
  html.light *,
  html.light *::before,
  html.light *::after {
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}