/* ============================================================
 * mobile.css —— 移动端适配层（响应式）
 * ------------------------------------------------------------
 * 所有规则仅在屏幕宽度 ≤768px 时生效，PC 端完全不加载。
 * 加载顺序：modules 中最后加载（见 index.html），可覆盖前面的组件样式。
 *
 * 设计原则：
 *   1. 只增不改 —— 不修改 PC 端原有规则，只在 media query 内叠加/覆盖
 *   2. PC 端不可见 —— 汉堡按钮、底部导航等新增 DOM 在 >768px 时 display:none
 *   3. 触控友好 —— 按钮最小点击区域 44px，输入框 ≥40px
 *   4. 卡片优先 —— 多列表格转为垂直卡片，避免横向溢出
 * ============================================================ */

/* PC 端隐藏新增 DOM（必须写在 media query 之前，确保移动端规则可覆盖） */
.hamburger-btn { display:none; }
.m-bottom-nav { display:none; }
.sidebar-mask { display:none; }
.home-btn { display:none; }

@media (max-width:768px){

  /* ========== 1. 布局框架：侧栏抽屉化 ========== */
  .app { display:flex; flex-direction:column; height:100vh; overflow:hidden; }
  .sidebar {
    width:260px; flex:0 0 260px;
    transform:translateX(-100%);
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    z-index:200;
    box-shadow:4px 0 24px rgba(0,0,0,.25);
    position:fixed; left:0; top:0; height:100vh;
  }
  .sidebar.open { transform:translateX(0); }
  .sidebar-mask {
    display:block; position:fixed; inset:0; background:rgba(0,0,0,.45);
    z-index:190; opacity:0; pointer-events:none; transition:opacity .25s;
  }
  .sidebar-mask.open { opacity:1; pointer-events:auto; }
  .main { margin-left:0; }

  /* ========== 2. 顶部栏：精简 + 汉堡按钮 ========== */
  .topbar { height:52px; padding:0 10px; gap:8px; }
  .hamburger-btn {
    display:flex; flex-direction:column; justify-content:center; align-items:center;
    gap:4px; width:40px; height:40px; border:none; background:transparent;
    cursor:pointer; border-radius:8px; flex-shrink:0;
  }
  .hamburger-btn:active { background:#f0f4fa; }
  .hamburger-btn span {
    display:block; width:20px; height:2px; background:#1c2c4e; border-radius:2px;
    transition:all .25s;
  }
  .hamburger-btn.open span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
  .hamburger-btn.open span:nth-child(2) { opacity:0; }
  .hamburger-btn.open span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
  .crumb { font-size:16px; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:none; }
  .guide-link { display:none !important; }
  .btn-logout { display:none !important; }
  .msg-bell { display:none !important; }
  .top-right { gap:6px; }
  .user-info { padding:6px 8px; font-size:12px; }
  /* 首页按钮：移动端显示，PC端隐藏 */
  .home-btn { display:flex; align-items:center; justify-content:center; width:40px; height:40px; border:none; background:transparent; cursor:pointer; border-radius:8px; font-size:18px; flex-shrink:0; }
  .home-btn:active { background:#f0f4fa; }

  /* ========== 3. 底部 Tab 导航 ========== */
  .m-bottom-nav {
    display:flex; align-items:center; justify-content:space-around;
    height:58px; background:#fff; border-top:1px solid #e3e8f0;
    flex-shrink:0; padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -2px 10px rgba(0,0,0,.04);
  }
  .m-bottom-item {
    display:flex; flex-direction:column; align-items:center; gap:2px;
    padding:4px 10px; color:#889; font-size:10px; text-decoration:none;
    cursor:pointer; min-width:48px; min-height:48px; justify-content:center;
  }
  .m-bottom-item .mbi-icon { font-size:20px; line-height:1; }
  .m-bottom-item.active { color:#0e3f8f; font-weight:600; }
  .m-bottom-item.active .mbi-icon { transform:translateY(-1px); }

  /* ========== 4. 内容区：间距缩小 ========== */
  .content { padding:14px 12px; }
  .content.pt-0 { padding-top:0; }
  .page-sticky, .rep-sticky, .kb-sticky { position:static; padding:14px 12px 10px; }
  .content table thead th, .content .portal-task-table thead th { position:static; }

  /* ========== 5. 表格转卡片 ========== */
  .data-table,
  .data-table thead,
  .data-table tbody,
  .data-table th,
  .data-table td,
  .data-table tr {
    display:block;
  }
  .data-table {
    background:transparent; border:none; border-radius:0;
  }
  .data-table thead { display:none; }
  .data-table tfoot { display:none; } /* 移动端卡片化后无列概念，表尾列累计隐藏 */
  .data-table tbody { display:flex; flex-direction:column; gap:10px; }
  .data-table tr {
    background:#fff; border:1px solid #e3e8f0; border-radius:12px;
    padding:12px 14px; margin-bottom:0; box-shadow:0 2px 6px rgba(15,40,80,.04);
    cursor:pointer; transition:background .12s;
  }
  .data-table tr:active { background:#fafbfe; }
  .data-table tr.row-expired { background:linear-gradient(0deg,#fff5f5 0%,#fff 100%); }
  .data-table tr.row-expiring { background:linear-gradient(0deg,#fffbf0 0%,#fff 100%); }
  .data-table tr.row-debt { background:linear-gradient(0deg,#f8f8f8 0%,#fff 100%); }
  .data-table td {
    border:none; padding:3px 0; font-size:13px; display:flex;
    justify-content:space-between; align-items:flex-start; gap:10px;
  }
  .data-table td.col-check, .data-table th.col-check { display:none; }
  .data-table td input[type="checkbox"] { width:18px; height:18px; }
  .data-table td[data-label]::before {
    content:attr(data-label);
    font-weight:600; color:#556; font-size:12px;
    flex:0 0 auto; min-width:60px;
  }
  .data-table td[data-label] > * { flex:1; text-align:right; }
  .data-table td[data-label] > span,
  .data-table td[data-label] > a,
  .data-table td[data-label] > button { text-align:right; }
  .data-table td:last-child {
    display:flex; justify-content:flex-end; gap:6px; padding-top:8px;
    border-top:1px dashed #f0f2f5; margin-top:4px;
  }
  .data-table td:last-child::before { display:none; }
  .data-table .icon-btn { width:36px; height:36px; font-size:16px; }
  .data-table tr td[colspan] {
    display:block !important; text-align:center; padding:30px 0; color:#9aa;
  }
  table:not(.data-table) { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .portal-task-table { display:block; overflow-x:auto; }

  /* ========== 6. 页面标题区 ========== */
  .page-head { margin-bottom:14px; gap:10px; }
  .page-title { font-size:19px; }
  .page-desc { font-size:12px; }
  .btn { height:40px; padding:0 14px; font-size:14px; }
  .btn-sm { height:32px; padding:0 10px; font-size:12px; }

  /* ========== 7. Tab 切换：横向滚动 ========== */
  .page-tabs {
    flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    padding-bottom:2px; margin-bottom:12px;
  }
  .page-tabs::-webkit-scrollbar { height:0; }
  .page-tab { flex-shrink:0; white-space:nowrap; padding:7px 14px; font-size:13px; }
  .period-tabs { flex-wrap:nowrap; overflow-x:auto; align-items:center; padding-bottom:2px; }
  .period-tab { flex-shrink:0; white-space:nowrap; }
  .period-date { width:118px; flex-shrink:0; font-size:13px; }
  .period-tab-sep { flex-shrink:0; }

  /* ========== 8. 工具栏：搜索框自适应 ========== */
  .toolbar { gap:8px; margin-bottom:12px; }
  .search { width:100%; height:40px; font-size:14px; }
  .search-wrap { max-width:100%; flex:1; min-width:0; }
  .toolbar .search { padding-left:36px; }

  /* ========== 9. 详情页 ========== */
  .detail-card { padding:16px; }
  .detail-title { font-size:18px; margin-bottom:12px; }
  .kv-grid { grid-template-columns:1fr; gap:8px; }
  .kv { padding-bottom:5px; }
  .kv span { width:72px; flex:0 0 72px; font-size:12px; }
  .kv b { font-size:13px; }
  .detail-bar { gap:8px; }
  .detail-bar .btn { flex:1; justify-content:center; }
  .rel-sec { margin-top:16px; }
  .rel-sec h4 { font-size:14px; }
  .detail-multi { padding:10px 12px; }
  .detail-multi .dm-content { max-height:240px; font-size:12.5px; }
  .tk-img { width:84px; height:84px; }

  /* ========== 10. 弹窗：全宽底部弹出 ========== */
  .modal { align-items:flex-end; }
  .modal-box {
    width:100%; max-width:100%; max-height:90vh;
    border-radius:16px 16px 0 0; padding:0;
  }
  .modal-box .modal-body { padding:16px; max-height:60vh; }
  .modal-box .modal-foot { padding:12px 16px 16px; }
  .modal-head { padding:14px 16px; }
  .modal-title { font-size:16px; }
  .modal-close { width:34px; height:34px; font-size:20px; }
  .modal-body input, .modal-body select, .modal-body textarea {
    min-height:42px; font-size:15px; padding:10px 12px;
  }
  .modal-body textarea { min-height:90px; }
  .fld-grid { grid-template-columns:1fr; gap:12px; }
  .modal.drawer .modal-box {
    width:100%; max-width:100%; height:92vh; max-height:92vh;
    border-radius:16px 16px 0 0;
  }
  .modal.drawer .modal-box .modal-body { padding:16px; }

  /* ========== 11. 表单控件：触控优化 ========== */
  input, select, textarea {
    font-size:15px;
  }
  .icon-btn { width:36px; height:36px; font-size:16px; }
  .attach-btn { padding:7px 12px; font-size:13px; min-height:36px; }

  /* ========== 12. 仪表盘/门户 ========== */
  .cards { gap:10px; margin-bottom:16px; }
  .stat-card { min-width:calc(50% - 5px); padding:14px; }
  .stat-card .num { font-size:22px; }
  .stat-card .lbl { font-size:12px; }
  .panel { padding:14px; margin-bottom:14px; }
  .panel h3 { font-size:14px; margin-bottom:10px; }
  .bar-row .bl { width:70px; font-size:12px; }
  .bar-val { width:60px; font-size:12px; }
  .pwelcome { flex-direction:column; padding:16px; gap:12px; }
  .pwelcome .pw-left { padding:16px; }
  .pwelcome .pw-left h2 { font-size:18px; }
  .pwelcome .pw-sub { font-size:13px; }
  .pwelcome .pw-weather { flex:none; width:100%; padding:14px 16px; }
  .pwelcome .pw-quick { flex-wrap:wrap; }
  .pwelcome .qbtn { padding:7px 12px; font-size:12px; }
  .pstat-row { grid-template-columns:repeat(2,1fr); gap:10px; }
  .pstat { padding:12px 14px; gap:10px; }
  .pstat-icon { width:40px; height:40px; font-size:17px; flex:0 0 40px; }
  .pstat-value { font-size:20px; }
  .pstat-label { font-size:11px; }
  .playout { grid-template-columns:1fr; gap:12px; }
  .papp-row { grid-template-columns:repeat(4,1fr); gap:10px; padding:14px; }
  .papp-mini-icon { width:42px; height:42px; font-size:16px; }
  .papp-mini-name { font-size:12px; max-width:64px; }
  .task-ticker { flex-wrap:wrap; gap:8px; padding:10px 12px; }
  .ticker-label { font-size:12px; padding:5px 8px; }
  .ticker-viewport { width:100%; height:40px; order:2; }
  .ticker-item { height:40px; }
  .ticker-nav { flex-direction:row; order:3; margin-left:auto; }
  .ticker-dots { position:static; order:3; }
  .ticker-go { display:none; }

  /* ========== 13. 知识库 ========== */
  .kb-card-grid { grid-template-columns:1fr; gap:10px; }
  .kb-card { padding:12px 14px; }

  /* ========== 14. 报表 ========== */
  .rep-chart, .rep-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }

  /* ========== 15. 分页控件 ========== */
  .pagination { flex-wrap:wrap; justify-content:center; gap:4px; }
  .page-btn { min-width:36px; height:36px; font-size:13px; padding:0 10px; }
  .page-jump { width:100%; text-align:center; margin-top:8px; font-size:12px; }
  .page-jump input { height:34px; width:50px; font-size:14px; }

  /* ========== 16. 批量操作栏 ========== */
  .batch-bar { flex-wrap:wrap; gap:6px; padding:8px 0 !important; }
  .batch-bar .btn { flex:1; min-width:80px; justify-content:center; font-size:12px; padding:0 8px; }

  /* ========== 17. 汇总栏 ========== */
  .deal-sum-bar {
    flex-wrap:wrap; gap:6px 12px; padding:10px 12px; font-size:12px;
  }
  .deal-sum-bar span { white-space:nowrap; }

  /* ========== 18. 时间线 ========== */
  .tl-item { gap:10px; padding:6px 0; }
  .tl-body { font-size:13px; }

  /* ========== 19. 消息面板 ========== */
  .msg-panel {
    position:fixed; top:auto; bottom:0; left:0; right:0; width:100%;
    max-height:70vh; border-radius:16px 16px 0 0; z-index:210;
  }
  .msg-list { max-height:50vh; }

  /* ========== 20. 用户下拉菜单 ========== */
  .user-dropdown {
    position:fixed; top:auto; bottom:0; left:0; right:0; width:100%;
    border-radius:16px 16px 0 0; z-index:210; padding:12px 0;
  }
  .user-dropdown .ud-head { padding:14px 18px; }
  .user-dropdown .ud-item { padding:12px 18px; font-size:14px; }

  /* ========== 21. Toast 位置 ========== */
  .toast {
    top:auto; bottom:80px; left:50%; transform:translateX(-50%);
    max-width:90vw; font-size:13px; padding:10px 18px;
  }
  @keyframes toastIn { from{ opacity:0; transform:translate(-50%,8px);} to{ opacity:1; transform:translate(-50%,0);} }

  /* ========== 22. 登录页移动端微调 ========== */
  /* 2026-09-21 登录页改左右分屏（浅色商务）：.login-card 元素已移除，窄屏（≤900px）隐藏左品牌区改由 login.css 负责；
     表单左右留白统一由 .login-form 的 padding 控制，故原 .login-head/.login-body/.login-foot 的 24px 内边距规则一并移除（否则与 .login-form 叠加成 48px） */
  .login-input { height:46px; font-size:15px; }
  .login-btn { height:46px; font-size:15px; }
  .cap-box, .cap-slider { width:100%; max-width:320px; }

  /* 2026-09-11 侧栏分组折叠（移动端适配） */
  .side-nav .nav-group-head{ padding-left:18px; }
  .side-nav .nav-group-body a{ padding-left:32px; }

} /* END @media (max-width:768px) */