/* ============================================================
   移动端专用适配（手机浏览器 / 钉钉内置浏览器）
   仅在屏宽 ≤ 820px 时生效，桌面端布局完全不受影响
   ============================================================ */
@media (max-width: 820px) {
  html { -webkit-text-size-adjust: 100%; }
  body { font-size: 14px; }

  /* 输入框 16px：避免 iOS 聚焦自动放大；加大触控高度 */
  input, select, textarea {
    font-size: 16px;
    min-height: 42px;
    padding: 8px 12px;
  }
  input[type="checkbox"], input[type="radio"] { min-height: 0; }

  /* —— 顶栏：第一行 品牌+用户，第二行 横滑菜单胶囊 —— */
  .topbar {
    flex-wrap: wrap;
    height: auto;
    padding: 0 0 4px;
    row-gap: 0;
  }
  .topbar .brand {
    order: 1;
    margin: 8px 0 2px 12px;
    font-size: 15px;
    flex: 1 1 auto;
  }
  .topbar .brand .brand-logo { height: 24px; margin-right: 7px; }
  .topbar .user {
    order: 2;
    margin: 6px 12px 2px 0;
    font-size: 12.5px;
    gap: 6px;
  }
  .topbar .user .user-role { display: none; }   /* 手机上隐藏冗长角色说明 */
  .topbar .user a {
    background: rgba(47, 124, 232, .08);
    border: 1px solid rgba(47, 124, 232, .14);
    padding: 6px 12px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    font-size: 12.5px;
  }
  .topbar nav {
    order: 3;
    flex: 1 1 100%;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    gap: 6px;
    padding: 4px 12px 8px;
    scrollbar-width: none;
  }
  .topbar nav::-webkit-scrollbar { display: none; }
  .topbar nav a {
    flex: 0 0 auto;
    white-space: nowrap;
    background: rgba(47, 124, 232, .07);
    border: 1px solid rgba(47, 124, 232, .14);
    padding: 9px 14px;
    min-height: 38px;
    font-size: 13.5px;
    border-radius: 999px;
  }
  .topbar nav a::after { display: none; }
  .topbar nav a:hover { background: rgba(59, 130, 246, .16); }

  /* —— 返回按钮：右下角悬浮圆钮（只留箭头图标），不再挤占版面 —— */
  .btn-back {
    position: fixed;
    left: auto;
    top: auto;
    right: 14px;
    bottom: 24px;
    z-index: 90;
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
    font-size: 0;
    box-shadow: 0 6px 22px rgba(47, 124, 232, .38);
  }
  .btn-back i { font-size: 17px; margin: 0; }

  /* —— 大屏横幅（院徽/时钟/大屏模式）：手机上压缩为紧凑卡片 —— */
  .screen-header {
    min-height: 0;
    padding: 14px 12px 16px;
    gap: 8px;
  }
  .screen-left,
  .screen-center,
  .screen-right {
    position: static;   /* 桌面端为绝对定位，手机上改常规流式 */
  }
  .screen-left {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    width: 100%;
  }
  .org-logo { height: 52px; padding: 2px; }
  .clock-date { flex: 1; text-align: left; font-size: 14px; }
  .org-addr-bar { display: none; }              /* 地址在手机上省略 */
  .screen-right { display: none; }              /* 圆盘时钟隐藏 */
  .fullscreen-btn { display: none; }            /* 大屏模式按钮隐藏 */
  .screen-center { gap: 4px; }
  .org-name { font-size: 18px; letter-spacing: 1px; }
  .screen-brand { font-size: 15px; gap: 8px; }
  .screen-brand .brand-logo-screen { height: 30px; }

  /* —— 页面容器与卡片 —— */
  .wrap { margin: 12px auto; padding: 0 10px; }
  .card { padding: 13px 12px; border-radius: 12px; }
  .card h2 { font-size: 16.5px; }

  /* —— 功能导航磁贴：固定两列、等高更易点 —— */
  .nav-tiles { gap: 9px; }
  .nav-tiles .tile {
    flex: 1 1 calc(50% - 5px);
    justify-content: center;
    text-align: center;
    padding: 15px 8px;
    font-size: 14.5px;
    min-height: 54px;
  }

  /* —— 表单行：两列自适应铺满 —— */
  .row { gap: 10px; }
  .row .fld { min-width: 46%; max-width: none; flex: 1 1 46%; }

  /* —— 按钮：加大触控 —— */
  .btn { min-height: 42px; padding: 9px 16px; font-size: 14.5px; }
  .btn.sm { min-height: 36px; padding: 6px 12px; font-size: 13px; }

  /* —— 表格：紧凑字号，宽表在卡片内横滑 —— */
  table { font-size: 13px; }
  th, td { padding: 8px 9px; }

  /* —— 提示条 / 页脚 —— */
  .flash { font-size: 13.5px; padding: 10px 13px; }
  .copyright-footer { font-size: 11px; padding: 10px 12px; }

  /* —— 登录框 —— */
  .login-box { margin: 26px 14px; padding: 22px 18px; }
  .login-box h1 { font-size: 18px; line-height: 1.5; }
  .login-box input { width: 100%; }
  .login-box .btn { width: 100%; }
}