/* 手机与窄屏（2026-10 控制台改版，UI 审视 X2 与 §4.5「手机」）：导航抽屉、列表卡片、按钮不换行。
   详情抽屉在手机上的样子在 console-detail.css，弹窗在 console.css / console-entry.css。颜色与间距只取 console.css :root 的变量。 */

/* 按钮上的字不换行（手机上「关闭」「记收款」以前会一字一行）；放不下由外面的容器换行 */
.btn { white-space: nowrap; }

/* ---------- 顶栏 + 导航抽屉：≤900px（nav-drawer.js） ---------- */
.mobile-bar, .nav-close { display: none; }

@media (max-width: 900px) {
  .mobile-bar {
    position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--space-2);
    height: 48px; padding: 0 var(--space-2); background: var(--panel); border-bottom: 1px solid var(--border);
  }
  .mobile-bar-menu, .nav-close {
    flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
    background: none; border: none; border-radius: var(--radius); color: var(--text); font-size: 16px; cursor: pointer;
  }
  .mobile-bar-menu:hover, .nav-close:hover { background: var(--panel-2); }
  .mobile-bar-menu:focus-visible, .nav-close:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .mobile-bar-title { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-bar-enterprise { flex: none; max-width: 45%; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .console { display: block; min-height: auto; }
  /* 抽屉收起时 visibility:hidden：里面的按钮不在 Tab 顺序里，读屏也读不到 */
  .side-nav {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 45; width: min(300px, 85vw); height: 100%;
    transform: translateX(-100%); visibility: hidden; transition: transform .2s ease, visibility .2s;
    box-shadow: 0 0 32px rgba(0, 0, 0, .5);
  }
  /* 打开时 visibility 立刻生效（不等动画）：nav-drawer.js 打开当下就要把焦点放进来 */
  .nav-open .side-nav { transform: none; visibility: visible; transition: transform .2s ease, visibility 0s; }
  .side-nav-logo { padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); }
  .side-nav-logo > span { flex: 1; }
  .nav-close { display: inline-flex; }
  .nav-backdrop { position: fixed; inset: 0; z-index: 44; background: rgba(0, 0, 0, .55); }
  .side-nav-menu .tab { padding: 11px 10px; } /* 手指点得准：每项约 44px 高 */

  .console-main { padding: var(--space-4) var(--space-4) 60px; }
}
@media (prefers-reduced-motion: reduce) { .side-nav { transition: none; } }

/* ---------- 列表在手机上变卡片（<700px）：账单、应付、客户预付款（table.list-table.list-cards） ----------
   每行一张卡片：第一行对方（.cell-main）+ 状态（.cell-status），第二行关键金额（.num-key），其余格子缩成一行行灰色小字、
   前面带上表头（list-cards.js 把表头写进每格的 data-label）。信息一个不少，只是主次分开。 */
@media (max-width: 700px) {
  .table-card:has(> .table-wrap > table.list-cards) { background: none; border: none; overflow: visible; }
  table.list-cards, table.list-cards tbody { display: block; width: 100%; white-space: normal; }
  table.list-cards thead { display: none; }
  table.list-cards tbody tr:not(.table-state) {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-3);
    margin-bottom: var(--space-2); padding: var(--space-3) var(--space-4);
    background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg);
  }
  table.list-cards tbody tr.table-state { display: block; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); }
  table.list-cards tbody tr.table-state td { display: block; }
  table.list-cards tbody tr td { display: block; height: auto; padding: 0; border: none; text-align: left; }
  table.list-cards td.cell-main { flex: 1 1 0; min-width: 0; order: 0; font-size: 14px; }
  table.list-cards td.cell-main .cell-title, table.list-cards td.cell-main .cell-sub { max-width: none; }
  table.list-cards td.cell-status { flex: none; order: 1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; max-width: 45%; }
  table.list-cards td.cell-status .badge { display: inline-block; }
  table.list-cards td.cell-status .badge + .badge { margin-top: 0; }
  table.list-cards td.num-key { flex: 1 1 100%; order: 2; margin: var(--space-1) 0; font-size: 18px; text-align: left; }
  table.list-cards td.num-key::before { content: attr(data-label) ' '; color: var(--muted); font-size: 12px; font-weight: 400; }
  /* 其余格子：一行一项「表头 值」，灰色小字 */
  table.list-cards td:not(.cell-main):not(.cell-status):not(.num-key) { order: 3; flex: 0 1 auto; color: var(--muted); font-size: 12px; }
  table.list-cards td:not(.cell-main):not(.cell-status):not(.num-key)::before { content: attr(data-label) ' '; opacity: .8; }
  table.list-cards td:not(.cell-main):not(.cell-status):not(.num-key):empty { display: none; }
  table.list-cards td.col-entity { flex-basis: 100%; }
  table.list-cards.hide-entity td.col-entity { display: none; }
  table.list-cards .cell-clip { max-width: none; display: inline; }
}