/* =====================================================================
 * 移动端（手机浏览器）统一适配
 * 全部规则均包裹在 @media (max-width: 768px) 内，
 * 桌面端（>768px，含平板横屏）完全不生效，不影响电脑浏览体验。
 *
 * 引入方式：
 *   - mars/* 与 tools/* 通过 includes/tool_head.php 自动引入
 *   - 根目录前端页（home/index/login 等）在各自 <head> 引入本文件
 * ===================================================================== */

@media (max-width: 768px) {

  /* ---------- 1. 基础：杜绝整页横向溢出 ---------- */
  html { overflow-x: hidden; }
  body {
    overflow-x: hidden;
    font-size: 14px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  *, *::before, *::after { box-sizing: border-box; }
  img, video, canvas, svg, iframe { max-width: 100%; }

  /* ---------- 2. 页面级容器自适应视口宽度 ---------- */
  .tool-page, .md-page, .md-body, .md-panel,
  .container, .wrap, .page, .panel, .content, .layout,
  [class*="-page"], [class*="-body"], [class*="-panel"], [class*="-layout"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ---------- 3. 表格：外层横向滚动，单元格保持 nowrap（靠滚动查看） ---------- */
  table { width: 100%; border-collapse: collapse; }
  table th, table td { white-space: nowrap; }

  /* 常见表格包裹层 + 任意包含 table 的 div 都允许横向滚动 */
  .md-table-wrap, .tool-table-wrap,
  [class*="-table-wrap"], [class*="tableWrap"], [class*="TableWrap"],
  div:has(> table), div:has(table) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* ---------- 4. flex 行 / 工具栏 / 筛选条 允许换行 ---------- */
  .md-toolbar, .subj-mode-bar, .int-filter, .toolbar, .controls,
  [class*="-toolbar"], [class*="-controls"], [class*="-bar"],
  [class*="-row"], [class*="-header"], [class*="-filter"] {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* ---------- 5. 表单元素 / 按钮 占满且不溢出 ---------- */
  input, select, textarea, button,
  .md-btn, .subj-btn, .btn, [class*="-btn"] {
    max-width: 100%;
    font-size: 14px;
  }
  /* 横向排列的表单组在小屏堆叠 */
  form .form-group, .form-row, [class*="form-row"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* ---------- 6. 固定宽度的侧栏 / 分栏 在手机上堆叠 ---------- */
  .subj-layout, .subject-sel-layout,
  [class*="-layout"] {
    flex-direction: column !important;
  }
  .subj-sidebar, .sidebar, [class*="-sidebar"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
  }
  /* 行业名称列不再固定 120px（home-modules.css .int-name） */
  .int-name {
    width: auto !important;
    flex: 1 1 60px !important;
    text-align: left !important;
  }

  /* ---------- 7. 悬浮/固定按钮不超出屏幕 ---------- */
  .vip-float-btn {
    left: 8px !important;
    right: 8px !important;
    transform: none !important;
    width: auto !important;
    max-width: calc(100% - 16px);
  }

  /* ---------- 8. 模态框在手机上接近全屏 ---------- */
  .modal-box, .modal, [class*="-modal"] {
    width: 96vw !important;
    max-width: 96vw !important;
    height: auto !important;
    max-height: 88vh !important;
  }

  /* ---------- 9. 首页自由画布：手机上改为单列纵向堆叠 ---------- */
  #wgCanvas {
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    grid-auto-rows: minmax(0, auto) !important;
    gap: 8px !important;
    padding: 8px !important;
    overflow-y: auto !important;
  }
  .wg-panel {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    min-height: 220px;
    overflow: hidden;
  }
  .wg-panel .panel-body,
  .wg-panel .wg-panel-body,
  .wg-panel > div {
    min-height: 0;
    overflow: auto;
  }
  /* 涨停/跌停内部 5 列网格在窄面板里改为 2 列，避免挤压 */
  .wg-panel[data-key="limitup"] .limitup-boards,
  .wg-panel[data-key="limitup"] #failureCards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  /* 顶栏按钮组在小屏允许换行，避免挤压品牌 */
  .wg-bar {
    flex-wrap: wrap !important;
    row-gap: 4px !important;
  }

  /* ---------- 10. 图表容器给最小高度，避免被压成 0 ---------- */
  .chart-box, [class*="-chart"], [class*="Chart"] {
    min-height: 200px !important;
  }
  /* 例外：指数分时(9张)与市场指标(9张)共 18 个模块的小走势图是迷你卡，
     上面的通用 200px 最小高度会把每张卡撑到 220px+，手机上必须压扁：
     恢复各自的原始 min-height（卡片高≈54~60px），面板也不再垫 220px */
  #indexSparkPanel .isp-chart,
  #marketIndicatorPanel .mi-chart {
    min-height: 42px !important;
  }
  .wg-panel[data-key="index_spark"],
  .wg-panel[data-key="market_indicator"] {
    min-height: 0 !important;
  }

  /* ---------- 11. 通用文字不溢出容器（允许长串换行） ---------- */
  p, span, div, a, li {
    overflow-wrap: break-word;
    word-break: break-word;
  }
}

/* ===== 第二轮：针对截图问题的细化修复 ===== */
@media (max-width: 768px) {

  /* --- home.php 顶栏按钮太占空间 --- */
  .wg-bar .btn,
  .wg-bar .btn-plain,
  .wg-bar a.btn,
  #wgHeaderRightMount .btn,
  #wgHeaderRightMount a.btn {
    padding: 3px 6px !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    border-radius: 4px !important;
  }
  .wg-bar {
    gap: 3px !important;
    padding: 3px 6px !important;
  }
  /* 首页跌停/大面行更紧凑，给名称列留空间 */
  .wg-panel[data-key="today_limit_down"] .today-pool-row,
  .wg-panel[data-key="today_big_drawdown"] .today-pool-row {
    grid-template-columns: minmax(0, 1fr) 3.6em 2em 3.6em !important;
    font-size: 10px !important;
  }
  .today-pool-name { font-size: 10px !important; }
  .today-pool-sector { max-width: 3.6em !important; font-size: 9px !important; }
  .today-pool-extra { font-size: 9px !important; }

  /* --- 指数分时弹窗 --- */
  .index-trend-box {
    width: 96vw !important;
    height: 80vh !important;
    min-height: 300px !important;
  }
  #idxTrendChips { padding: 4px 6px !important; gap: 4px !important; }
  #idxTrendChips span {
    font-size: 10px !important;
    padding: 2px 5px !important;
    border-radius: 3px !important;
  }

  /* --- zhulijinge.php 板块曲线页 --- */
  .chart-area { min-width: 0 !important; padding: 8px !important; }
  .chart-row { height: auto !important; min-height: 400px !important; flex-direction: column !important; }
  .chart-toolbar { gap: 6px !important; padding: 6px 8px !important; }
  .chart-toolbar .btn-today,
  .chart-toolbar .btn-export,
  .chart-toolbar .filter-btn,
  .chart-toolbar button,
  .mode-switch button {
    padding: 3px 7px !important;
    font-size: 11px !important;
  }
  .market-indicator-inner { flex-wrap: wrap !important; gap: 5px !important; }
  .mi-card {
    width: calc(50% - 3px) !important;
    flex: none !important;
    min-width: 0 !important;
  }
  /* 例外：上面的 .mi-card 50% 宽只该作用于 zhulijinge.php 的 2 列换行布局；
     首页/竖屏页 #marketIndicatorPanel 的 9 张卡是 3 列栅格，被 50% 宽压窄后
     标题折行、卡片参差不齐 —— 这里恢复栅格默认的等分撑满 */
  #marketIndicatorPanel .mi-card {
    width: auto !important;
    flex: 1 1 0 !important;
  }
  .mi-header-name { font-size: 11px !important; }
  .right-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    border-left: none !important;
    border-top: 1px solid var(--border) !important;
  }
  .indicator-grid { gap: 6px !important; }
  .ind-card { padding: 6px 8px !important; }
  .ind-card .ind-card-label,
  .ind-card .ind-card-value { font-size: 11px !important; }

  /* --- user_center 修改密码弹窗 --- */
  /* 通用规则 [class*="-modal"] 会把 .msg-modal 遮罩容器也限成 96vw / 88vh；
     这里把容器恢复满屏，卡片宽度改为相对容器的 100%（不再依赖 100vw），
     页面内容横向溢出把布局视口撑宽时，输入框和按钮也不会被撑出屏幕 */
  .msg-modal {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    padding: 10px !important;
  }
  /* 卡片改用固定像素宽度：页面内容溢出会把布局视口撑宽，vw/100%/calc 全部跟着变大，
     只有固定 px 不受影响。320px 在所有手机（含最窄的 360px 屏）上都放得下；
     配合左对齐，即使视口被撑宽卡片也贴着屏幕左侧，绝不超出右边 */
  .msg-modal-card {
    width: auto !important;
    max-width: 320px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    padding: 14px !important;
    border-radius: 10px !important;
  }
  /* 极窄屏（<340px）兜底 */
  @media (max-width:339px) {
    .msg-modal-card { max-width: 88vw !important; }
  }
  /* 关键修复：通用规则 [class*="-modal"] 是子串匹配，会把 .msg-modal-foot / -head /
     -mask / -time / -content / -x 等所有类名含 "-modal" 的后代全设成 96vw，
     底部按钮区因此被撑到 96vw 冲出卡片和屏幕。这里全部复位到卡片内容区宽度 */
  .msg-modal-foot,
  .msg-modal-head,
  .msg-modal-mask,
  .msg-modal-time,
  .msg-modal-content,
  .msg-modal-x {
    width: auto !important;
    max-width: 100% !important;
    max-height: none !important;
  }
  /* 输入框 / 按钮一律收缩到卡片内容区内，绝不超出卡片 */
  .msg-modal-card .field input {
    width: 100% !important;
    max-width: 100% !important;
  }
  .msg-modal-card .btn,
  .msg-modal-card .poster-tip {
    max-width: 100% !important;
    word-break: break-word;
  }
  .msg-modal-head { align-items: center !important; }
  .msg-modal-head b {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 15px !important;
  }
  .msg-modal-foot {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    margin-top: 14px !important;
  }
  .msg-modal-foot .btn {
    width: 100% !important;
    justify-content: center !important;
  }
}