/* ==========================================================================
   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;
  }
  /* 收起态的汉堡图标（纯 CSS，无新增 DOM） */
  #nav::before {
    content: '\2630';            /* ☰ */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
  }
  #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;
    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; }

  /* ---- 主内容区：去掉左留白，顶部给收起的小方块留位 ---- */
  #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%; }

  /* ---- 表格：卡片内横向滚动（表格保持完整列宽，不挤压文字） ---- */
  .card { overflow-x: auto; padding: 12px; }
  .card > table { min-width: 620px; }
  th, td { white-space: nowrap; }        /* 滚动场景下避免单元格被压成多行 */

  /* ---- 行内表单：纵向堆叠、控件全宽 ---- */
  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); }

  /* 表格允许横向滚动，避免列多挤压 */
  .card { overflow-x: auto; }
  .card > table { min-width: 720px; }

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

/* ======================= 触屏通用优化 ======================= */
@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; }
}