/* ==========================================================================
   05-responsive.css — 全站 H5 响应式覆盖层
   项目：北投AI 安全培训终端管理后台（static/index.html，单页应用）
   用法：在 index.html 的 <style> 块之后引入：
     <link rel="stylesheet" href="/enhance/05-responsive.css">
   （放在内联样式之后，同优先级时靠层叠顺序覆盖；JS 内联样式处用 !important）
   纯 CSS，零依赖，不改 HTML 结构。新增类名统一 rsp- 前缀。
   断点：<768px 手机 / 768~1200px 平板 / >1200px 桌面（桌面不动）
   ========================================================================== */

/* ======================= 手机 <768px ======================= */
@media (max-width: 767.98px) {

  /* ---- 侧边栏：默认收起为左上角 48px 小方块，悬停/聚焦（移动端点按）展开 ---- */
  #nav {
    width: 48px;
    height: 48px;
    bottom: auto;
    padding-top: 0;
    overflow: hidden;
    border-radius: 0 0 10px 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
    z-index: 30;                 /* 压住 #screen(z:5)，低于 .modal-mask(z:50) */
    transition: width .2s ease, height .2s ease;
  }
  /* r89 修复（2026-08-23，手机竖屏菜单点不出）：
   * SB02Sidebar（02-sidebar.js）在窄屏把 #nav 整体 translateX(-105%)+visibility:hidden+
   * pointer-events:none 移出屏幕，并把 .sb02-nav 顶部 padding 强制 72px（顶掉本文件的 ☰）；
   * 而本文件展开依赖 :hover/:focus-within——触屏无 hover、收起态 #nav 内无可聚焦元素，
   * 点按永不触发 → 菜单永远打不开（双汉堡：SB02 FAB 与 #nav::before 并存）。
   * 修复：窄屏下 05 全面接管 #nav（压掉 SB02 的位移/隐藏/pointer/padding），隐藏 SB02 FAB，
   * 展开由 index.html 的显式 .rsp-nav-open 开关（触屏 tap）驱动。桌面规则不受影响。 */
  #nav {
    transform: none !important;
    visibility: visible !important;
    pointer-events: auto !important;
    padding-top: 0 !important;             /* 压掉 .sb02-nav 的 72px !important */
  }
  .sb02-fab { display: none !important; }  /* 移动端隐藏旧 FAB（桌面保留） */
  /* 收起态旧 ☰ 块：v2 隐藏（移动端唯一入口=#mnav-btn，防双汉堡） */
  #nav::before { display: none !important; }
  #nav h1,
  #nav a { display: none; }

  /* 展开态：:hover 兼容桌面，:focus-within 兼容移动端点按；
     .rsp-nav-open 留给集成方用一行 JS 做显式开关（可选） */
  #nav:hover,
  #nav:focus-within,
  #nav.rsp-nav-open {
    width: 200px;
    height: auto;
    bottom: 0;
    max-height: 100vh;
    padding-top: 12px !important;  /* r89：压掉 .sb02-nav 的 72px !important（展开态） */
    overflow-y: auto;
  }
  #nav:hover::before,
  #nav:focus-within::before,
  #nav.rsp-nav-open::before { display: none; }
  #nav:hover h1, #nav:hover a,
  #nav:focus-within h1, #nav:focus-within a,
  #nav.rsp-nav-open h1, #nav.rsp-nav-open a { display: block; }

  /* ===== 子弹级菜单（index.html 内联 JS 驱动）：显式按钮 + 遮罩 + mnav-open 类 ===== */
  #mnav-btn {
    display: flex !important;
    position: fixed; top: 8px; left: 8px; z-index: 9999;
    width: 44px; height: 44px; padding: 0;
    align-items: center; justify-content: center;
    background: rgba(10, 22, 40, .92) !important;
    border: 1px solid rgba(0, 229, 255, .55) !important;
    border-radius: 8px; color: #00e5ff; font-size: 22px;
    box-shadow: 0 0 12px rgba(0, 229, 255, .35);
  }
  #nav.mnav-open {
    position: fixed !important; left: 0 !important; top: 0 !important;
    z-index: 9998 !important;   /* 高于遮罩 9997，菜单项可点 */
    width: 200px !important; height: auto !important; bottom: 0 !important;
    max-height: 100vh !important; padding-top: 12px !important;
    overflow-y: auto !important;
    transform: translateX(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
    background: #0a1628;
  }
  #nav.mnav-open h1, #nav.mnav-open a { display: block !important; }
  #nav.mnav-open::before { display: none !important; }
  /* mnav-open 的显式关闭态：旧内联 translateX 会被本文件的 !important 覆盖，
     且 #nav:focus-within 会在触屏点选后继续撑开。收起时必须让导航彻底退出命中面。 */
  #nav.mnav-closed {
    position: fixed !important; left: 0 !important; top: 0 !important;
    z-index: 30 !important;
    width: 48px !important; height: 48px !important; bottom: auto !important;
    padding-top: 0 !important; overflow: hidden !important;
    transform: translateX(-105%) !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  #nav.mnav-closed h1, #nav.mnav-closed a { display: none !important; }
  #mnav-mask { position: fixed; inset: 0; z-index: 9997; background: rgba(0,0,0,.45); display: none; }
  #mnav-mask.show { display: block; }

  /* ---- 主内容区：去掉左留白，顶部给收起的小方块留位 ---- */
  #main {
    margin-left: 0;
    padding: 60px 12px 16px;
  }

  /* ---- 登录框、弹窗：不溢出小屏 ---- */
  #login .box { width: auto; max-width: calc(100vw - 32px); }
  .modal {
    width: auto;
    max-width: calc(100vw - 24px);
    max-height: 88vh;
    overflow-x: auto;
  }
  .modal .row { flex-wrap: wrap; }
  .modal .row label { width: 100%; margin-bottom: 2px; }
  .modal .row input,
  .modal .row select,
  .modal .row textarea { width: 100%; flex: 1 1 100%; }

  /* ---- 表格：H5 自适应（手机域表格贴满卡片，不出现横向拖条） ----
     2026-08-24 用户反馈：手机每个页面都有横向下拉条、看右侧内容要拖条。
     旧实现 .card>table{min-width:620px} + th,td{nowrap} 强制表格宽于卡片，
     卡片 overflow-x:auto → 10/14 页卡片内必现横向滚动条。
     修复：手机域表格 width:100%、min-width 归零、单元格允许换行断词、
     字号内边距压缩；overflow-x:auto 保留为兜底（极端内容不致破版）。
     桌面/平板媒体域不受影响。 */
  .card { overflow-x: auto; padding: 12px; }
  .card > table { min-width: 0; width: 100%; table-layout: fixed; }
  th, td { white-space: normal; word-break: break-all; }
  th, td { padding: 6px 4px; font-size: 12px; }
  th button, td button { white-space: normal; padding: 3px 5px; max-width: 100%; font-size: 12px; }
  th img, td img { max-width: 100%; height: auto; }
  th input, td input, th select, td select, th textarea, td textarea { max-width: 100%; }
  .card td .bar, .card th .bar { min-width: 0; width: 100%; max-width: 100%; }  /* 统计页完成率条贴满单元格（基类 min-width:80px 会撑破固定布局列） */

  /* ---- kb⑤ 知识库表格手机减列（2026-08-24 显示bug修复②）：
     6-7 列固定布局在 375 下每列仅 ~47px，break-all 把文字竖排撕碎=「表格全部变形」。
     手机域隐藏次要列，剩余列自然放宽：kb-list 留 问题/标准回答/操作，
     kb-preview(页面级) 留 勾选/问题/关键词/标准回答/删，弹窗版 kb-preview-box 留 5 列（去分类）。 */
  .card table.kb-list th:nth-child(1), .card table.kb-list td:nth-child(1),
  .card table.kb-list th:nth-child(3), .card table.kb-list td:nth-child(3),
  .card table.kb-list th:nth-child(5), .card table.kb-list td:nth-child(5) { display: none; }
  .card table.kb-preview th:nth-child(5), .card table.kb-preview td:nth-child(5),
  .card table.kb-preview th:nth-child(6), .card table.kb-preview td:nth-child(6) { display: none; }
  .kb-preview-box table.kb-preview th:nth-child(5), .kb-preview-box table.kb-preview td:nth-child(5) { display: none; }

  /* ---- 全站合规（2026-08-24）：高频宽表手机减列，留核心列（列宽≥45px 不再竖排撕字） ---- */
  .card table.tbl-users th:nth-child(4), .card table.tbl-users td:nth-child(4),
  .card table.tbl-users th:nth-child(5), .card table.tbl-users td:nth-child(5),
  .card table.tbl-users th:nth-child(6), .card table.tbl-users td:nth-child(6),
  .card table.tbl-users th:nth-child(7), .card table.tbl-users td:nth-child(7),
  .card table.tbl-users th:nth-child(8), .card table.tbl-users td:nth-child(8),
  .card table.tbl-users th:nth-child(9), .card table.tbl-users td:nth-child(9) { display: none; }
  .card table.tbl-devices th:nth-child(2), .card table.tbl-devices td:nth-child(2),
  .card table.tbl-devices th:nth-child(3), .card table.tbl-devices td:nth-child(3),
  .card table.tbl-devices th:nth-child(6), .card table.tbl-devices td:nth-child(6) { display: none; }
  .card table.tbl-events th:nth-child(3), .card table.tbl-events td:nth-child(3),
  .card table.tbl-events th:nth-child(6), .card table.tbl-events td:nth-child(6),
  .card table.tbl-events th:nth-child(7), .card table.tbl-events td:nth-child(7) { display: none; }

  /* ---- 行内表单：纵向堆叠、控件全宽 ---- */
  form.inline { flex-direction: column; align-items: stretch; }
  form.inline > input,
  form.inline > select,
  form.inline > button,
  form.inline > textarea { width: 100%; max-width: 100% !important; }

  /* ---- 统计卡片：单列 ---- */
  .stat-grid { grid-template-columns: 1fr; }

  /* ---- 数据大屏：窄屏降级为纵向滚动布局 ----
     原理：#screen 从 fixed 改为随文档流；#stage 取消 1920×1080 固定尺寸与
     transform 缩放（fitStage 写的是内联样式，必须 !important 压掉），
     三列改单列，图表给固定高度，页面整体可纵向滚动。 */
  #screen {
    position: static;
    overflow: visible;
    height: auto;
  }
  #stage {
    position: static;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    padding: 8px 10px;
    gap: 12px;
  }

  /* 顶部标题区压缩 */
  .sc-header { height: auto; padding: 8px 0 4px; }
  .sc-title { font-size: 20px; letter-spacing: 1px; padding-top: 6px; }
  .sc-title::after { width: 100%; margin-top: 8px; }
  .sc-clock { position: static; font-size: 13px; margin-top: 6px; }

  /* KPI：2×2 网格（单列太占纵向空间） */
  .sc-kpis { grid-template-columns: 1fr 1fr; height: auto; gap: 10px; }
  .sc-kpi { padding-top: 10px; padding-bottom: 10px; }
  .k-num { font-size: 30px; }
  .k-sub { font-size: 15px; }
  .k-lbl { font-size: 12px; }

  /* 三列图表区 → 单列纵向排列 */
  .sc-grid { display: flex; flex-direction: column; gap: 12px; }
  .sc-col { min-height: 0; }
  .sc-panel { flex: none; min-height: 0; }
  .p-title { font-size: 15px; }

  /* 图表固定高度，可滚动页面内逐块查看 */
  .chart { flex: none; height: 260px; min-height: 260px; }
  .chart.small { height: 220px; min-height: 220px; }

  /* 滚动名单：关掉无缝上滚动画，改原生纵向滚动 */
  .scroll-box { flex: none; max-height: 240px; overflow-y: auto; }
  .scroll-inner { animation: none; }
  .sc-row { font-size: 13px; }
}

/* ======================= 平板 768~1200px ======================= */
@media (min-width: 768px) and (max-width: 1200px) {

  /* 统计卡片：双列 */
  .stat-grid { grid-template-columns: repeat(2, 1fr); }

  /* 表格允许横向滚动兜底；2026-08-24 显示bug修复②：去掉 min-width:720 强制宽度
     （800~1024 笔记本窗口下 720px 表塞进 ~560px 卡片 → 挤压/内滚=「表格变形」），
     改为自然宽度，overflow-x:auto 仅作兜底不再常态触发。 */
  .card { overflow-x: auto; }
  .card > table { min-width: 0; }

  /* 全站合规（2026-08-24）：平板域宽表同样贴卡固定布局+换行断词，
     users(12列)/devices(9列)/events(8列) 等自然宽度超内容区 → 卡内横滚；
     固定布局均分列宽+断词后 768px 下 12 列仍 ≥45px 可读。 */
  .card > table { width: 100%; table-layout: fixed; }
  th, td { white-space: normal; word-break: break-all; }
  th, td { padding: 6px 5px; font-size: 12px; }
  th button, td button { white-space: normal; max-width: 100%; }
  th img, td img { max-width: 100%; height: auto; }

  /* 弹窗别顶满 */
  .modal { max-width: calc(100vw - 48px); }
}

/* ======================= 窄平板 768~1024px ======================= */
@media (min-width: 768px) and (max-width: 1024px) {
  /* 全站合规（2026-08-24）：高频宽表再减次要列（列宽 45px→60px+，消除挤压） */
  .card table.tbl-users th:nth-child(5), .card table.tbl-users td:nth-child(5),
  .card table.tbl-users th:nth-child(6), .card table.tbl-users td:nth-child(6),
  .card table.tbl-users th:nth-child(9), .card table.tbl-users td:nth-child(9) { display: none; }
  .card table.tbl-devices th:nth-child(2), .card table.tbl-devices td:nth-child(2) { display: none; }
  .card table.tbl-events th:nth-child(6), .card table.tbl-events td:nth-child(6) { display: none; }
}

/* ======================= 触屏通用优化 ======================= */
@media (hover: none) and (pointer: coarse) {
  /* 触屏设备点击目标不小于 40px */
  #nav a { padding-top: 12px; padding-bottom: 12px; }
  button { min-height: 34px; }
  form.inline button { min-height: 38px; }
}


/* ===== 队长修复 v2（flow-ui1 诊断采纳）：桌面(≥768)隐藏手机汉堡；SB02 FAB 桌面保留 ===== */
@media (min-width: 768px) {
  #mnav-btn, #mnav-mask { display: none !important; }
}

/* ===== 全站合规（2026-08-24）：完成率条全宽度贴满单元格 =====
   基类 .bar{min-width:80px} 在平板/手机窄列里撑破固定布局表格（stats 页 +1~27px 溢出源），
   全局 min-width 归零（桌面单元格 >80px 无视觉变化）。 */
.card td .bar, .card th .bar { min-width: 0; width: 100%; max-width: 100%; }