/* ============================================
 * shared/css/responsive.css
 * UClasses 跨页统一响应式（v2 · 2026-08-21）
 *
 * 4 档断点：
 *   xs (phone portrait)     ≤480px
 *   sm (phone landscape)    481-768px
 *   md (tablet landscape)   769-1024px
 *   lg (desktop)            ≥1025px   ← 桌面默认布局，不动
 *
 * 设计原则（v2 重写）:
 *   1. 不改桌面布局（lg 起全部继承页面原 CSS）
 *   2. **不**使用 `[class*="-grid"]` 通配强制改 grid（会破坏页面定制布局）
 *      改 grid 留给页面自己的 @media
 *   3. 只补：缩 padding、缩字号、表格横滚、弹窗全屏、表单 iOS 防缩放、触摸目标
 *   4. 跨页选择器：`body > header` / `body > [class*="-header"]`（兼容 div-based header）
 *   5. 触摸目标 ≥44px（iOS HIG / Material 推荐）
 *   6. iOS 防止 input 缩放：font-size: 16px+
 * ============================================ */

/* ====== 全设备基础 ====== */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { -webkit-tap-highlight-color: transparent; }

/* ============================================
 *  XS  手机竖屏  ≤480px
 * ============================================ */
@media (max-width: 480px) {
  html { font-size: 14px; }

  /* —— 顶栏压缩（兼容 header 标签 / div 容器） —— */
  body > header,
  body > div[class*="-header"]:not([class*="-inner"]):not([class*="-left"]):not([class*="-right"]):not([class*="-actions"]):not([class*="-content"]) {
    padding: 8px 12px !important;
    min-height: 56px !important;
  }

  /* —— 主容器缩 padding —— */
  body > main,
  body > div[class*="-main"]:not([class*="-inner"]):not([class*="-body"]) {
    padding: 8px 12px !important;
    margin: 8px auto !important;
    gap: 8px !important;
  }

  /* —— 卡片缩 padding —— */
  body > main > section > article,
  body > main > section > aside,
  body > main > div,
  body > main > section,
  [class*="-card"]:not([class*="-card-"]),
  [class*="-panel"]:not([class*="-panel-"]) {
    padding: 10px 12px !important;
  }

  /* —— 主页 header 特殊缩：时间块变小、学期 pill 紧凑 —— */
  .main-time-clock, [class*="-time-clock"] { font-size: 14px !important; }
  .main-time-date, [class*="-time-date"] { font-size: 10px !important; }
  .main-logo, [class*="-logo"] { font-size: 1.1rem !important; }
  .main-term-pill, [class*="-term-pill"] { font-size: 11px !important; padding: 2px 6px !important; }
  .main-account-chip, [class*="-account-chip"] { font-size: 11px !important; padding: 2px 6px !important; }
  .main-account-logout, .main-term-switch { font-size: 11px !important; padding: 4px 8px !important; }
  .main-notify-btn { width: 36px !important; height: 36px !important; }

  /* —— 表单 input/select/textarea 强制 16px 防 iOS 缩放 —— */
  input, select, textarea { font-size: 16px !important; }

  /* —— 表格横滚 —— */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  [class*="-table-wrap"], [class*="-table-container"] { overflow-x: auto; }

  /* —— 弹窗/抽屉全屏（仅匹配顶层 modal/drawer 容器，不覆盖 mask/title/buttons） —— */
  body > div[class*="-modal"]:not([class*="-mask"]):not([class*="-content"]):not([class*="-title"]):not([class*="-buttons"]):not([class*="-row"]):not([class*="-box"]),
  body > div[class*="-drawer"],
  [class$="-modal-box"]:not([class*="-modal-mask"]):not([class*="-modal-content"]):not([class*="-modal-title"]):not([class*="-modal-buttons"]),
  [class$="-drawer-body"] {
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  /* —— 触摸目标 ≥44px（iOS HIG） —— */
  button, a[role="button"], [role="button"],
  [class*="-btn"]:not([class*="-chip"]):not([class*="-tag"]):not([class*="-badge"]):not([class*="-lbl"]):not([class*="-mini"]) {
    min-height: 44px;
  }

  /* —— 隐藏次要 —— */
  .hide-xs { display: none !important; }

  /* —— 弹窗三按钮组：竖排撑满 —— */
  [class*="-modal-buttons"], [class*="-form-actions"] {
    flex-direction: column !important;
    gap: 6px !important;
  }
  [class*="-modal-buttons"] > *, [class*="-form-actions"] > * {
    width: 100% !important;
  }
}

/* ============================================
 *  SM  手机横屏 / 小平板竖屏  481-768px
 * ============================================ */
@media (min-width: 481px) and (max-width: 768px) {
  html { font-size: 15px; }

  /* 顶栏 padding 略缩 */
  body > header,
  body > div[class*="-header"]:not([class*="-inner"]):not([class*="-left"]):not([class*="-right"]):not([class*="-actions"]):not([class*="-content"]) {
    padding: 10px 16px !important;
  }

  body > main,
  body > div[class*="-main"]:not([class*="-inner"]):not([class*="-body"]) {
    padding: 12px 16px !important;
  }

  /* 主页 header 时间块适中 */
  .main-time-clock, [class*="-time-clock"] { font-size: 16px !important; }
  .main-term-pill, [class*="-term-pill"] { font-size: 12px !important; }

  /* notify 3 指标 → 3 列紧凑 */
  [class*="-stats"] {
    grid-template-columns: repeat(3, 1fr) !important;
    padding: 12px 16px !important;
  }
  [class*="-stats"] [class*="-stat-num"] { font-size: 22px !important; }

  /* 表格横滚 */
  [class*="-table-wrap"], [class*="-table-container"] { overflow-x: auto; }

  /* 弹窗保持但缩小 */
  [class$="-modal-box"]:not([class*="-modal-mask"]):not([class*="-modal-content"]):not([class*="-modal-title"]):not([class*="-modal-buttons"]) {
    width: min(420px, 92vw) !important;
  }
}

/* ============================================
 *  MD  平板横屏  769-1024px
 * ============================================ */
@media (min-width: 769px) and (max-width: 1024px) {
  /* 顶栏 padding 适中 */
  body > header,
  body > div[class*="-header"]:not([class*="-inner"]):not([class*="-left"]):not([class*="-right"]):not([class*="-actions"]):not([class*="-content"]) {
    padding: 10px 20px !important;
  }

  body > main,
  body > div[class*="-main"]:not([class*="-inner"]):not([class*="-body"]) {
    padding: 16px 20px !important;
  }

  /* 主页 header 时间 + 学期 + 早午读都可见 */
  .main-time-clock, [class*="-time-clock"] { font-size: 16px !important; }
  .main-readings, [class*="-readings"] { font-size: 12px !important; }

  /* notify 3 列紧凑（视图保持 3 列但比例调整） */
  [class*="-view-jae"], [class*="-view-super"] {
    grid-template-columns: 1fr 1.4fr 1fr !important;
    gap: 12px !important;
  }
}

/* ============================================
 *  触摸设备微调（hover 无效、点按加底色）
 * ============================================ */
@media (hover: none) and (pointer: coarse) {
  button:active, a:active, [role="button"]:active, [class*="-btn"]:active {
    opacity: 0.7;
    transform: scale(0.98);
    transition: transform 0.1s, opacity 0.1s;
  }
}

/* ============================================
 *  高 DPI / Retina 优化
 * ============================================ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  body { -webkit-font-smoothing: antialiased; }
}

/* ============================================
 *  横屏辅助（横屏手机）
 * ============================================ */
@media (orientation: landscape) and (max-height: 500px) {
  .hide-xs-landscape, [class*="-hide-landscape"] { display: none !important; }
  body > header { min-height: 48px !important; }
}