/* ============================================================
   移动端适配（仅窄屏 max-width:768px 生效，不影响桌面布局）
   通过 index.html 的 media="(max-width:768px)" 引入，
   即便浏览器不支持媒体属性也只在窄屏匹配时应用。
   ============================================================ */
@media (max-width: 768px) {

  /* 整体取消固定高度，改为整页自然滚动 */
  .app {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  /* 侧边栏 -> 顶部条：品牌在上，导航横向滑动 */
  .sidebar {
    width: 100%;
    flex-direction: column;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .sidebar .brand {
    padding: 10px 14px;
    font-size: 14px;
  }
  .sidebar .brand .logo {
    width: 24px;
    height: 24px;
  }
  .nav {
    flex-direction: row;
    flex: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 6px 10px;
    gap: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .nav-item {
    flex: 0 0 auto;
    margin-bottom: 0;
    padding: 9px 12px;
    min-height: 38px;
    font-size: 13px;
    white-space: nowrap;
  }
  /* 手机不支持拖拽排序，隐藏把手 */
  .nav-item .drag-handle { display: none; }
  /* 导出/拖拽提示为 PC 功能，手机上隐藏（桌面端保留） */
  .sidebar .foot { display: none; }

  /* 主区与顶栏 */
  .main { overflow: visible; }
  .topbar {
    padding: 0 12px;
    height: 48px;
  }
  .topbar .title { font-size: 15px; }
  .topbar .user { gap: 8px; font-size: 12px; }
  /* 窄屏顶栏空间有限：「修改密码」改用短文案「改密」 */
  .topbar .user .pwd-wide { display: none; }
  .topbar .user .pwd-narrow { display: inline; }

  /* 内容区整页滚动，缩小留白 */
  .content {
    padding: 14px;
    overflow: visible;
  }
  .card { padding: 14px; }

  /* 表格：横向滑动，避免挤压变形 */
  table.tbl {
    display: block;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 12px;
  }
  .tbl th, .tbl td {
    padding: 8px 10px;
    white-space: nowrap;
  }

  /* 登录卡片自适应 */
  .login-card {
    width: auto;
    max-width: 92vw;
    padding: 24px 18px;
  }

  /* 统计卡片：窄屏两列 */
  .stat-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }

  /* 评分项：文字在上、选项在下，避免横向溢出 */
  .item-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .item-row .score-opts { flex-shrink: 1; }

  /* 放大触摸目标 */
  .score-opt {
    min-width: 40px;
    min-height: 36px;
    padding: 8px 12px;
  }
  .btn { min-height: 38px; }

  /* 弹窗：手机上近乎满屏 */
  .modal {
    width: auto;
    max-width: 94vw;
    max-height: 90vh;
  }
  .modal.wide { width: auto; }
  .modal .m-head,
  .modal .m-body,
  .modal .m-foot { padding: 14px; }
  .modal .m-foot { flex-wrap: wrap; }
  .modal .m-foot .btn { flex: 1; justify-content: center; }

  /* 通用行允许换行 */
  .row { flex-wrap: wrap; }
}