/* ============================================================
   renba 全站移动端自适应基座 · mobile-core.css v2
   ------------------------------------------------------------
   作用域：renba.tech 下全部系统全部页面（含 traffic-ops / gemini 图片工作台 /
           仁霸品牌站 / 斯兰德 / 网络工具 / 价目表 / 会议纪要 / HR / 财务）
   注入方式：<link rel="stylesheet" href="/traffic-ops/static/mobile-core.css?v=2">
   设计原则：
     1) 全部规则包在 @media 内 —— 桌面端零影响，可安全回滚
     2) 结构无关层（第 1-10 节）+ 中控台专属层（第 11-16 节）
     3) 覆盖机型：280(折叠屏外屏) / 320(SE) / 360 / 375 / 390 / 412 / 430
                  / 600 / 768(平板竖) / 1024(平板横)
   ============================================================ */

:root {
  --rb-safe-b: env(safe-area-inset-bottom, 0px);
  --rb-safe-l: env(safe-area-inset-left, 0px);
  --rb-safe-r: env(safe-area-inset-right, 0px);
  --rb-tap: 40px;
}

/* ============================================================
   1. 全局防溢出（全断点）
   ============================================================ */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: hidden; max-width: 100vw; }
img, video, canvas, svg, iframe, embed { max-width: 100%; height: auto; }
a, p, span, div, td, th, li, label { overflow-wrap: break-word; word-break: break-word; }
pre, code { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }

/* ============================================================
   2. 表格 —— 全站 130+ 张表：自身横向滚动，表头保持对齐
   ============================================================ */
@media (max-width: 1024px) {
  table {
    display: block; width: 100%; max-width: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  table > thead, table > tbody, table > tfoot {
    display: table; width: max-content; min-width: 100%;
  }
  table th, table td { white-space: nowrap; padding-left: 8px; padding-right: 8px; }
  .table-wrap, div[class*="table-wrap"], div[class*="tableWrap"],
  div[class*="table-container"], div[class*="table-responsive"] {
    overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%;
    max-height: none;
  }
}
@media (max-width: 600px) {
  table th, table td { padding-left: 6px; padding-right: 6px; font-size: 12px; }
}

/* ============================================================
   3. 弹性布局堆叠
   ============================================================ */
@media (max-width: 768px) {
  [style*="display:flex"], [style*="display: flex"] { flex-wrap: wrap; }
  [class*="row"], [class*="toolbar"], [class*="filters"], [class*="actions"],
  [class*="btn-group"], [class*="btnBar"], [class*="kpi"], [class*="card-row"],
  .inline-controls, .item-actions, .tr-preset, .back-home-row {
    flex-wrap: wrap; gap: 8px;
  }
  [style*="display:grid"], [style*="display: grid"] { grid-template-columns: 1fr !important; }
  [class*="panel"], [class*="card"], [class*="section"], [class*="block"],
  [class*="widget"], [class*="box"] { min-width: 0; max-width: 100%; }
}

/* ============================================================
   4. 触控友好
   ============================================================ */
@media (max-width: 1024px) {
  button, .btn, [class*="btn"], [role="button"], input[type="submit"],
  input[type="button"], .tab, [class*="tab-item"], select, .chip, [class*="chip"] {
    min-height: var(--rb-tap); min-width: var(--rb-tap); touch-action: manipulation;
  }
  * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0.06); }
  input:not([type="checkbox"]):not([type="radio"]), select, textarea {
    font-size: 16px !important; min-height: 40px; max-width: 100%;
  }
}

/* ============================================================
   5. 弹窗 / 抽屉全屏化
   ============================================================ */
@media (max-width: 768px) {
  .modal, [class*="modal"], [class*="Modal"], [class*="dialog"],
  [class*="popup"], [class*="drawer"] {
    max-width: 100vw !important; width: 100vw !important; border-radius: 12px 12px 0 0;
  }
  .modal-dialog, [class*="modal"] > div:first-child, [class*="dialog"] > div:first-child {
    margin: 0 !important; max-width: 100vw !important; width: 100vw !important;
  }
  .modal-body, [class*="modal-body"], [class*="modalBody"] {
    max-height: calc(100vh - 140px); overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
}

/* ============================================================
   6. 安全区（iPhone 刘海 / 底部横条）
   ============================================================ */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  @media (max-width: 1024px) {
    body { padding-left: var(--rb-safe-l); padding-right: var(--rb-safe-r); }
    [class*="footer"], [class*="bottom-bar"], [class*="action-bar"], [class*="submit-bar"] {
      padding-bottom: calc(var(--rb-safe-b) + 8px);
    }
  }
}

/* ============================================================
   =====  以下为 traffic-ops 中控台专属（60+ 版块）  =====
   ============================================================ */

/* ------------------------------------------------------------
   11. 导航抽屉 —— 修复：小屏汉堡按钮被 display:none 掉的问题
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .nav-toggle-btn {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    width: 40px; height: 40px; font-size: 20px;
    position: fixed; left: 10px; top: 12px; z-index: 10000;
    border-radius: 10px;
  }
  #appView > header { padding-left: 58px !important; padding-right: 10px; }
  #appView > header h1 { font-size: 17px !important; line-height: 1.3; }
  #appView > header p { font-size: 12px; }

  nav#tabs {
    position: fixed !important;
    left: 0; top: 0; bottom: 0;
    width: 248px !important; max-width: 82vw;
    height: 100vh !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    overflow-y: auto !important; overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    transform: translateX(-100%) !important;
    transition: transform .22s ease;
    z-index: 9999;
    padding: 56px 10px calc(16px + var(--rb-safe-b)) 10px !important;
    box-shadow: none;
  }
  body.nav-open nav#tabs { transform: translateX(0) !important; box-shadow: 6px 0 26px rgba(16,40,61,.18); }
  body.nav-open::after {
    content: ""; position: fixed; inset: 0;
    background: rgba(0,0,0,.35); z-index: 9998;
  }
  nav#tabs button { padding: 10px 12px !important; font-size: 14px; min-height: 40px; }
  nav#tabs .tab-group > summary { min-height: 40px; padding: 9px 12px !important; font-size: 14px; }
}

/* ------------------------------------------------------------
   12. 栅格降列 —— 覆盖 repeat(6,minmax(140px,1fr)) 等会溢出的定义
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  /* 表单 / 详情类：直接单列 */
  .form-grid, .form-grid.compact, .erp-form-grid, .erp-master-grid, .erp-cust-grid,
  .erp-bank-grid, .knowledge-grid, .guide-grid, .info-card-grid, .asset-grid,
  .logs-grid, .lead-image-grid, .map-grid, .dc-grid, .cw-cards, .kb-body, .gd-body,
  .logi-grid, .logi-grid2, .fin-charts, .im-wrap, .access-options, .ai-form-row,
  .pi-field, .pi-grid, .grid, .grid.two, .grid.three, .grid.compact2 {
    grid-template-columns: 1fr !important;
  }
  /* KPI / 统计卡类：两列更省屏 */
  .summary-grid, .history-kpis, .fin-kpi-row, .logs-stats, .ai-kpi-grid,
  .sc-stats, .sc-products, .sc-factories, .sc-contact-grid, .stat-card {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 430px) {
  .summary-grid, .history-kpis, .fin-kpi-row, .logs-stats, .ai-kpi-grid,
  .sc-stats, .sc-products, .sc-factories, .sc-contact-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ------------------------------------------------------------
   13. 面板与留白压缩
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  .panel { padding: 13px 12px !important; margin-bottom: 13px !important; border-radius: 12px; }
  .panel-head { flex-wrap: wrap; gap: 8px; }
  .panel-head h2, .panel-head h3 { font-size: 15px !important; }
  #appView > header { margin-bottom: 12px !important; }
  main, #appView { padding-left: 8px; padding-right: 8px; }
  .stack > * + * { margin-top: 10px; }
}

/* ------------------------------------------------------------
   14. 版块内子标签 / 搜索 / 工具条
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  /* 版块内子 tab：横向滚动不换行 */
  #tabs ~ * .subtabs, .subtabs, .tab-group, .aitraffic-tab, .ai-tab, .erp-sub,
  .ai-sub, .edm-sub, .hr-panel .hr-sub {
    display: flex !important; flex-wrap: nowrap !important;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .subtabs::-webkit-scrollbar, .tab-group::-webkit-scrollbar { display: none; }
  .subtabs button, .subtabs > * { flex: 0 0 auto; white-space: nowrap; }

  /* 全局搜索条占满宽度 */
  .global-search { flex: 1 1 100% !important; min-width: 0 !important; margin-top: 8px; }
  .global-search input { width: 100%; }
}

/* ------------------------------------------------------------
   15. 图表容器
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  .chart-box, [class*="chart"], canvas {
    max-width: 100% !important; width: 100% !important; height: auto !important;
  }
  .chart-box { min-height: 220px; }
}

/* ------------------------------------------------------------
   16. 登录页
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  .login-wrap { padding: 16px 12px calc(16px + var(--rb-safe-b)); }
  .login-card {
    width: 100% !important; max-width: 100% !important;
    padding: 20px 16px !important; border-radius: 14px;
  }
  .login-card input, .login-card select { width: 100%; font-size: 16px !important; min-height: 44px; }
  .module-checks { grid-template-columns: 1fr !important; }
}

/* ============================================================
   17. 超小屏兜底（折叠屏外屏 280 / SE 320）
   ============================================================ */
@media (max-width: 360px) {
  body { font-size: 14px; }
  table th, table td { padding-left: 4px; padding-right: 4px; font-size: 11.5px; }
  h1 { font-size: 20px; } h2 { font-size: 18px; } h3 { font-size: 16px; }
  [class*="col"] { width: 100% !important; flex: 0 0 100% !important; }
  nav#tabs { width: 84vw !important; }
  /* renba 品牌站超小屏：nav 工具条换行、装饰元素剪裁 */
  .nav__tools { flex-wrap: wrap !important; max-width: 100vw !important; padding: 6px 10px !important; }
  .nav__tools .nav__quote, .nav__cta, .nav__btn { padding: 6px 10px !important; font-size: 13px !important; }
  .ring, .glow { display: none !important; }
  .expo-slide { max-width: 100vw !important; left: 0 !important; right: 0 !important; transform: none !important; }
  .hero, .hero-block { padding: 14px 12px !important; }
  .hero-titleA, .hero-titleB, [class*="hero-title"] { font-size: 26px !important; line-height: 1.15 !important; }
}

/* 折叠外屏 280 兜底 —— 装饰元素强制剪裁 */
@media (max-width: 320px) {
  html, body { overflow-x: hidden !important; }
  .expo-slide, .expo-track, .ring, .glow, .orb, .parallax,
  [class*="slide"], [class*="track"] {
    visibility: hidden !important;
  }
  .nav__tools, .nav, header > div { max-width: 100vw !important; flex-wrap: wrap !important; }
  a.brand, .brand { max-width: 80vw !important; }
  .hero-titleA, .hero-titleB { font-size: 22px !important; }
}

/* ============================================================
   18. 横屏手机
   ============================================================ */
@media (max-height: 480px) and (orientation: landscape) {
  .modal-body, [class*="modal-body"] { max-height: calc(100vh - 80px); }
  nav#tabs { padding-top: 50px !important; }
}

/* ============================================================
   19. 打印不受影响（业务部日报要 A4 打印）
   ============================================================ */
@media print {
  table { display: table !important; width: 100% !important; overflow: visible !important; }
  table th, table td { white-space: normal !important; font-size: 11pt !important; }
  nav#tabs, .nav-toggle-btn { display: none !important; }
}

/* ============================================================
   20. renba 品牌站装饰元素兜底（防止视差/glow 元素撑破视口）
   ============================================================ */
@media (max-width: 768px) {
  body { overflow-x: hidden; }
  .expo-slide, .glow, .hero-orb, .parallax, .bg-fx,
  .nav__tools, .nav__burger, .nav__panel, [class*="slide"],
  [class*="orb"], [class*="glow"], [class*="parallax"] {
    max-width: 100vw !important;
    overflow: hidden;
  }
  .expo-track, .marquee-track, [class*="track"] {
    max-width: 100vw !important;
  }
  .footer, footer { padding: 16px 12px !important; }
  .hero, .hero-block, .section { padding-left: 14px !important; padding-right: 14px !important; }
  .stats, .features, .grid-cards { grid-template-columns: 1fr !important; }
  .row-2, .row-3, .row-4 { grid-template-columns: 1fr !important; }
}