/* ShenaAI 管理后台 · 移动端响应式增强（共享样式）
   设计：不改各页 HTML，仅以相同选择器在窄屏下覆盖内联样式。
   需在各页 <style> 之后通过 <link> 引入，以保证覆盖生效。 */

/* 平板及以下：收窄留白 */
@media (max-width: 1024px) {
  main { padding-left: 16px !important; padding-right: 16px !important; }
}

/* 手机：导航换行可滚、表格横滑、表单铺满 */
@media (max-width: 760px) {
  nav {
    flex-wrap: wrap;
    gap: 8px 10px !important;
    padding: 10px 14px !important;
  }
  nav b { font-size: 14px; }
  nav img { height: 26px !important; }
  /* 右侧链接组：占满一行并横向滚动，避免溢出挤压 */
  nav .links {
    margin-left: 0 !important;
    width: 100%;
    overflow-x: auto;
    gap: 14px !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  nav .links a, nav a { white-space: nowrap; }

  main { padding: 16px 12px 72px !important; }
  h1 { font-size: 20px !important; }
  h2 { font-size: 15px !important; }
  .panel { padding: 14px !important; border-radius: 8px; }

  /* 表格：转为可横向滚动容器，列不换行，宁可滑动也不挤压 */
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  th, td { padding: 8px 8px !important; }

  /* 表单：窄屏下输入项自适应铺满，避免横向溢出 */
  .row { gap: 8px; }
  .row input, .row select, .row button { flex: 1 1 140px; min-width: 0; }
  /* iOS 聚焦不缩放（字号需 >=16px） */
  input, select, textarea { font-size: 16px !important; }

  /* KPI 卡片更紧凑 */
  .kpi .c { min-width: 90px; }
  .kpi .n { font-size: 20px !important; }

  /* 模块卡片单列/双列自适应已由 auto-fill 处理，这里仅兜底 */
  .cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* 超小屏（≤420px）：KPI 两列、按钮可换行 */
@media (max-width: 420px) {
  .kpi { grid-template-columns: repeat(2, 1fr) !important; }
  .btn { padding: 9px 12px; }
}