/* ============================================================
   授权系统 · 移动端 UI 优化层
   说明：本文件是独立注入的增强样式，仅作用于移动端（<= 768px）。
   不改动任何编译产物，删除本 link 即可完整还原，安全可逆。
   目标：触控更友好、表格可横滑、弹窗满屏可用、表单纵向堆叠、
        工具栏换行、分页紧凑、整体留白与字号更舒适。
   你可以直接在本文件里调数字（间距、字号、触控高度等）。
   ============================================================ */

/* ---------- 1. 基础 / 视口与安全区 ---------- */html,
body {
  overflow-x: hidden;
  max-width: 100%;
}
body {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}
#app {
  min-height: 100vh;
}

/* ---------- 2. 移动端断点下统一增强 ---------- */
@media (max-width: 768px) {
  /* 触控目标：按钮、输入框、标签页最小可点高度 */
  .el-button {
    min-height: 40px;
    padding: 10px 16px;
  }
  .el-button.is-round {
    min-height: 40px;
  }
  .el-input__wrapper,
  .el-textarea__inner {
    min-height: 40px;
  }
  .el-select__wrapper {
    min-height: 40px;
  }
  .el-form-item__label {
    line-height: 1.6;
  }
  .el-tabs__item {
    height: 42px;
    line-height: 42px;
  }
  .el-radio,
  .el-checkbox {
    min-height: 36px;
  }
  .el-switch {
    transform: scale(1.05);
  }
  /* 关键：输入框字号 >= 16px，避免 iOS 聚焦时自动放大页面 */
  .el-input__inner,
  .el-textarea__inner,
  .el-select__input,
  .el-input-number__input,
  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  /* 留白收敛，内容区紧凑且不贴边 */
  .el-main,
  #app-main .layout-content,
  #app-content .layout-content {
    padding: 14px 12px 24px !important;
  }
  .el-card {
    border-radius: 12px;
  }
  .el-card__header {
    padding: 14px 16px;
  }
  .el-card__body {
    padding: 14px 16px;
  }
  .el-card__header .el-card__header-text {
    font-size: 16px;
  }

  /* ---------- 表格：横滑 + 紧凑 ---------- */
  .el-table {
    max-width: 100%;
  }
  .el-table .el-table__body-wrapper {
    -webkit-overflow-scrolling: touch;
  }
  .el-table th.el-table__cell,
  .el-table td.el-table__cell {
    padding: 10px 8px;
    font-size: 13px;
  }
  .el-table .cell {
    line-height: 1.4;
    white-space: normal; /* 长内容自动换行，避免挤爆列 */
  }
  .el-table__empty-block {
    min-height: 80px;
  }
  /* 让列宽自适应，内容超宽时整体横向滚动而不是压缩崩溃 */
  .el-table--scrollable-x .el-table__inner-wrapper {
    min-width: 100%;
  }

  /* ---------- 弹窗 / 抽屉：更贴近全屏 ---------- */
  .el-dialog {
    width: calc(100% - 20px) !important;
    max-width: none !important;
    margin: 10px auto !important;
    border-radius: 14px;
  }
  .el-dialog.is-fullscreen {
    border-radius: 0;
  }
  .el-dialog__header {
    padding: 16px 18px 10px;
  }
  .el-dialog__body {
    padding: 8px 18px 16px;
    max-height: 68vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .el-dialog__footer {
    padding: 12px 18px;
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: var(--el-bg-color, #fff);
    border-top: 1px solid var(--el-border-color-lighter, #e4e7ed);
  }
  .dark .el-dialog__footer {
    background: var(--el-bg-color, #1d1e1f);
  }
  .el-dialog__footer .el-button {
    flex: 1;
    margin: 0;
  }
  .el-dialog__footer .el-button + .el-button {
    margin-left: 10px;
  }
  /* 抽屉：窄屏全宽 */
  .el-drawer {
    width: 100% !important;
    max-width: 100% !important;
  }
  .el-drawer__header {
    padding: 16px;
    margin-bottom: 0;
    border-bottom: 1px solid var(--el-border-color-lighter, #e4e7ed);
  }
  .el-drawer__body {
    padding: 16px;
  }

  /* ---------- 表单：纵向堆叠，标签在上 ---------- */
  .el-form-item {
    display: block;
    margin-bottom: 16px;
  }
  .el-form-item__label {
    display: block;
    float: none;
    width: auto !important;
    text-align: left;
    padding: 0 0 6px;
    margin-bottom: 0;
    line-height: 1.5;
  }
  .el-form-item__content {
    margin-left: 0 !important;
    width: 100%;
  }
  /* 表单里的成对输入（手机验证码等）自适应 */
  .el-form--inline .el-form-item {
    margin-right: 0;
  }

  /* ---------- 工具栏 / 筛选 / 搜索：换行堆叠 ---------- */
  .el-card__header .el-button,
  .toolbar-filters,
  .filter-bar,
  [class*="toolbar"] {
    flex-wrap: wrap;
    row-gap: 10px;
  }
  .el-input--suffix,
  .el-select,
  .el-date-editor {
    width: 100% !important;
  }
  .toolbar-filters .el-input,
  .toolbar-filters .el-select,
  .toolbar-filters .el-date-editor,
  [class*="filter"] .el-input,
  [class*="filter"] .el-select,
  [class*="filter"] .el-date-editor {
    width: 100% !important;
    margin-bottom: 4px;
  }
  /* 搜索区操作按钮整行 */
  .el-card__header .el-button--primary {
    width: 100%;
  }

  /* ---------- 分页：紧凑居中可换行 ---------- */
  .el-pagination {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 8px;
    column-gap: 4px;
  }
  .el-pagination__sizes .el-select {
    width: auto !important;
  }
  .el-pagination__jump {
    margin-left: 0;
  }

  /* ---------- 消息/确认框 ---------- */
  .el-message-box {
    width: calc(100% - 24px) !important;
    max-width: none !important;
  }
  .el-message {
    max-width: 92vw;
    min-width: auto;
    flex-wrap: wrap;
    word-break: break-word;
  }
  .el-notification {
    width: calc(100% - 24px);
    max-width: none;
  }

  /* ---------- 下拉 / 气泡：小屏适配 ---------- */
  .el-popper.is-light,
  .el-popper.is-dark {
    max-width: 88vw;
  }
  .el-dropdown-menu {
    max-width: 88vw;
  }
  .el-dropdown-menu__item {
    line-height: 40px;
  }

  /* ---------- 图片/上传/预览 ---------- */
  .el-upload-list--picture-card .el-upload-list__item,
  .el-upload--picture-card {
    width: 84px;
    height: 84px;
  }
}

/* ---------- 3. 小屏（<= 480px）进一步收敛 ---------- */
@media (max-width: 480px) {
  .el-card__body {
    padding: 12px 14px;
  }
  .el-dialog__body {
    padding: 6px 14px 14px;
    max-height: 72vh;
  }
  .el-form-item__label {
    font-size: 14px;
  }
  .el-table th.el-table__cell,
  .el-table td.el-table__cell {
    padding: 9px 6px;
    font-size: 12.5px;
  }
  /* 主按钮整行，避免按钮挤压 */
  .el-button + .el-button {
    margin-left: 0;
  }
  .el-dialog__footer .el-button {
    min-height: 44px;
  }
}

/* ---------- 4. 登录页移动端 ---------- */
@media (max-width: 768px) {
  .login-container,
  .login-right,
  .login-form-wrapper,
  .auth-form-wrapper {
    padding: 24px 18px !important;
  }
  .login-form,
  .auth-form {
    width: 100% !important;
    max-width: 100% !important;
  }
  .auth-submit,
  .login-btn,
  .el-button--primary {
    min-height: 46px;
    font-size: 15px;
  }
  .auth-title,
  .login-title {
    font-size: 22px;
    line-height: 1.3;
  }
  .auth-subtitle {
    font-size: 14px;
  }
  /* 底部固定提交按钮便于拇指操作 */
  .login-container .el-form-item:last-child {
    position: static;
  }
}

/* ============================================================
   5. 侧边栏"收不起来"修复（重点 · 已核对编译产物 DOM 机制）
   ------------------------------------------------------------
   编译产物真实结构（index-BBi2ggLK.js / data-v-38255ebb）：
     <aside id="app-sidebar">          （≤800px: fixed;top:0;left:0;z-index:300;height:100vh）
       <div class="layout-sidebar">    （≤800px: width:0）
         <div class="dual-menu-left">  （仅双菜单模式，width:80px inline，溢出残留）
         <div class="menu-left menu-left-open | menu-left-close">
           <div class="header">…</div>
           <el-menu/>…
         </div>
         <div class="menu-model" onclick="ae"
              style="opacity:menuOpen?1:0; transform:scale(…)"/>  ← 遮罩
       </div>
     </aside>
   根因：
     · ≤800px 下 .menu-model 被编译为 position:fixed;z-index:-1;display:block;
       盖在整屏但层级被压到内容/抽屉之下，手机端点不到，原生 onclick 无法触发，
       菜单 thus 收不起来。
     · 双菜单模式 .dual-menu-left 在 sidebar width:0 后仍溢出显示一条 80px 图标栏。
   修复策略（不碰 Vue 状态，只覆盖 CSS 层级 + 由 JS 同步 .ms-open 类）：
     · 遮罩默认 pointer-events:none，收起态绝不挡页面；
     · 展开态（.layout-sidebar.ms-open，JS 据 .menu-left-open 同步）：
       遮罩 z-index:250、可点、cursor:pointer，点击走原生 onclick 收起；
     · 菜单抽屉 .menu-left 抬到 z-index:260，保证菜单本身始终在遮罩之上可点；
     · #app-sidebar 保持 z-index:300 最高层；
     · 双菜单图标栏手机上 display:none 彻底隐藏。
   ============================================================ */
@media (max-width: 800px) {
  /* 侧边栏抽屉容器：最高层 */
  .app-layout #app-sidebar {
    z-index: 300 !important;
  }

  /* 菜单抽屉本体：压在遮罩之上，保证菜单项始终可点 */
  .layout-sidebar .menu-left {
    position: relative;
    z-index: 260 !important;
  }

  /* 遮罩默认：铺满整屏但不接收任何点击（收起态 opacity:0，避免误触/挡页面） */
  .layout-sidebar .menu-model {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 250 !important;
    pointer-events: none !important;
    cursor: default;
    background: rgba(0, 0, 0, 0.5) !important;
  }
  /* 展开态：遮罩可点，点击即走原生 onclick=ae 收起菜单 */
  .layout-sidebar.ms-open .menu-model {
    pointer-events: auto !important;
    cursor: pointer;
  }

  /* 双菜单模式左侧图标栏：手机上彻底隐藏，避免收起后仍残留一条 80px 图标 */
  .layout-sidebar .dual-menu-left {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
  }

  /* 展开抽屉时锁定背景滚动（JS 同步 body.ms-sidebar-open） */
  body.ms-sidebar-open {
    overflow: hidden !important;
  }

  /* 侧边栏内菜单条目：手机上加大触控高度 */
  .layout-sidebar .el-menu-item,
  .layout-sidebar .el-sub-menu__title {
    min-height: 44px !important;
    line-height: 44px !important;
  }
}

/* ============================================================
   6. 顶栏 / 安全区 / 其他移动端收尾
   ============================================================ */
@media (max-width: 800px) {
  /* 顶栏汉堡/图标按钮触控区加大 */
  #app-header .el-button,
  #app-header [class*="btn"],
  #app-header [class*="icon"] {
    min-width: 40px;
    min-height: 40px;
  }
  /* 内容区左右留白适配小屏 */
  .app-layout #app-main #app-content .layout-content {
    width: 100% !important;
    padding: 12px 10px 28px !important;
  }
  .app-layout #app-main #app-content .layout-content .page-content {
    padding: 14px 12px !important;
    border-radius: 10px !important;
  }
  /* 底部安全区（iPhone Home 条） */
  body {
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .app-layout #app-footer {
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0));
  }
}

/* 深色模式下遮罩与弹窗细节兜底（已有 var，这里补遮罩透明度） */
@media (max-width: 800px) {
  .dark .layout-sidebar.ms-open .menu-model {
    background: rgba(0, 0, 0, 0.65) !important;
  }
}