/* ============================================================
 * mobile-redesign.css —— 手机端全面改版 · 设计系统层（v20261106a）
 * ---------------------------------------------------------------------------
 * 参照「点餐宝」设计语言（老板 2026-11-05 提供的 14 张参照图）：
 *   ① 底部 Tab：白底、线性大图标、品牌绿选中态
 *   ② 「更多」抽屉：深色渐变用户头卡 + 白卡分组列表（图标 + 文字 + 箭头）
 *   ③ 工作台：渐变欢迎头卡 + 常用功能宫格（白卡大图标）
 *   ④ 全局：卡片圆角、44px 触控、表格横滚美化、模态近全屏、空态
 *
 * ★ 铁律：
 *   · 仅 @media (max-width:1023px) 生效 —— 桌面端零变化
 *   · 只改观感（CSS）与壳层图标 —— **功能、数据、交互逻辑零变更**
 *   · 本文件加载顺序在 style.css 之后（index.html 保证），同特异性下可覆盖
 * ============================================================ */

/* ---------- 0. 设计令牌（仅移动端注入） ---------- */
@media (max-width: 1023px) {
  :root {
    --mrd-primary: #07c160;            /* 点餐宝品牌绿 */
    --mrd-primary-dark: #06ad56;
    --mrd-primary-weak: #e8f9f0;       /* 选中浅底 */
    --mrd-bg: #f4f6f8;                 /* 页面底色 */
    --mrd-card: #ffffff;
    --mrd-line: #ebedf0;
    --mrd-text: #1f2329;
    --mrd-text-2: #86909c;
    --mrd-head-grad: linear-gradient(135deg, #35424e 0%, #232f3a 100%);
    --mrd-radius: 14px;
    --mrd-shadow: 0 2px 10px rgba(31, 35, 41, 0.06);
  }

  body {
    background: var(--mrd-bg) !important;
  }

  /* ---------- 1. 底部 Tab 栏：白底 + 线性图标 + 品牌绿选中 ---------- */
  .m-tabbar {
    height: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
    border-top: none !important;
    box-shadow: 0 -1px 0 var(--mrd-line), 0 -4px 16px rgba(31, 35, 41, 0.04) !important;
    background: var(--mrd-card) !important;
  }
  .m-tab {
    color: var(--mrd-text-2) !important;
    gap: 2px !important;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s ease;
  }
  .m-tab .m-tab-icon {
    font-size: 21px !important;
    line-height: 1 !important;
    width: 26px !important;
    height: 26px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .m-tab .m-tab-icon svg {
    width: 23px !important;
    height: 23px !important;
    display: block;
  }
  .m-tab .m-tab-icon svg * {
    stroke: currentColor;              /* 线性图标跟随文字色 */
  }
  .m-tab .m-tab-label {
    font-size: 10.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0.2px;
  }
  .m-tab.active {
    color: var(--mrd-primary) !important;
  }
  .m-tab.active .m-tab-label {
    font-weight: 700 !important;
  }
  .m-tab:active {
    background: transparent !important;
  }
  /* 图标轻微上浮的选中动效 */
  .m-tab .m-tab-icon { transition: transform 0.15s ease; }
  .m-tab.active .m-tab-icon { transform: translateY(-1px); }

  /* ---------- 2. 「更多」抽屉：点餐宝式 用户头卡 + 白卡分组 ---------- */
  .m-sheet {
    background: var(--mrd-bg) !important;
    border-radius: 18px 18px 0 0 !important;
    max-height: 86vh !important;
  }
  .m-sheet-handle {
    width: 36px !important;
    height: 4px !important;
    border-radius: 2px !important;
    background: #d5d9de !important;
    margin: 8px auto 0 !important;
  }
  /* 用户头卡（由 MobileTabbar.render() 填充 #mrdUserCard） */
  .mrd-usercard {
    margin: 10px 14px 4px;
    background: var(--mrd-head-grad);
    border-radius: 16px;
    padding: 16px 16px 14px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .mrd-usercard .mrd-avatar {
    width: 46px; height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, #34d399, #07c160);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 700; color: #fff;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
  }
  .mrd-usercard .mrd-u-name {
    font-size: 16px; font-weight: 700; line-height: 1.25;
    display: flex; align-items: center; gap: 6px;
  }
  .mrd-usercard .mrd-u-role {
    display: inline-block;
    font-size: 10.5px; font-weight: 600;
    padding: 1px 7px; border-radius: 9px;
    background: rgba(255, 255, 255, 0.16);
    color: #d1fae5;
  }
  .mrd-usercard .mrd-u-tenant {
    font-size: 12px; color: rgba(255, 255, 255, 0.72);
    margin-top: 3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .mrd-usercard .mrd-u-build {
    margin-left: auto;
    font-size: 10px; color: rgba(255, 255, 255, 0.45);
    text-align: right; line-height: 1.5;
    flex-shrink: 0;
  }
  .m-sheet-header {
    padding: 10px 16px 6px !important;
    background: transparent !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--mrd-text) !important;
  }
  .m-sheet-close {
    background: #eceff2 !important;
    width: 26px !important; height: 26px !important;
    border-radius: 50% !important;
    color: var(--mrd-text-2) !important;
    font-size: 12px !important;
  }
  .m-sheet-body { background: transparent !important; padding: 6px 12px 16px !important; }
  .m-sheet-group {
    background: var(--mrd-card) !important;
    border-radius: var(--mrd-radius) !important;
    margin: 0 0 12px !important;
    padding: 4px 0 !important;
    box-shadow: var(--mrd-shadow);
  }
  .m-sheet-title {
    font-size: 11.5px !important;
    color: var(--mrd-text-2) !important;
    font-weight: 600 !important;
    padding: 10px 16px 4px !important;
    letter-spacing: 0.4px;
  }
  .m-sheet-item {
    margin: 0 !important;
    border-radius: 0 !important;
    padding: 13px 16px !important;
    font-size: 14.5px !important;
    color: var(--mrd-text) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    border-bottom: 1px solid #f2f4f7 !important;
    -webkit-tap-highlight-color: #f0f1f3;
  }
  .m-sheet-item:last-child { border-bottom: none !important; }
  .m-sheet-item:active { background: #f6f8fa !important; }
  .m-sheet-icon {
    width: 26px !important; height: 26px !important;
    font-size: 17px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
  }
  /* 行尾箭头（伪元素追加，不改 DOM） */
  .m-sheet-group .m-sheet-item { position: relative; }
  .m-sheet-group .m-sheet-item::after {
    content: '';
    position: absolute;
    right: 14px; top: 50%;
    width: 8px; height: 8px;
    border-top: 1.6px solid #c9cdd4;
    border-right: 1.6px solid #c9cdd4;
    transform: translateY(-50%) rotate(45deg);
  }

  /* ---------- 3. 工作台：渐变欢迎头卡 + 常用功能宫格 ---------- */
  .welcome-card {
    background: var(--mrd-head-grad) !important;
    border-radius: 16px !important;
    padding: 18px 16px !important;
    color: #fff;
    box-shadow: 0 4px 14px rgba(35, 47, 58, 0.25) !important;
  }
  .welcome-card h2, .welcome-card #welcomeGreeting {
    color: #fff !important;
    font-size: 18px !important;
  }
  .welcome-card #welcomeDate, .welcome-card p {
    color: rgba(255, 255, 255, 0.68) !important;
    font-size: 12px !important;
  }
  /* 常用功能宫格：4 列白卡（覆盖内联 minmax(140px,1fr)） */
  #userShortcutGrid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 10px !important;
  }
  #userShortcutGrid .shortcut-item {
    border-radius: 14px !important;
    padding: 14px 6px 12px !important;
    text-align: center;
    box-shadow: var(--mrd-shadow) !important;
  }
  #userShortcutGrid .shortcut-item > div:first-child {
    font-size: 26px !important;
    margin-bottom: 6px !important;
  }
  /* 空状态提示（工作台常用功能为空时） */
  #emptyShortcutHint { color: var(--mrd-text-2) !important; }

  /* ---------- 4. 通用：页头 / 卡片 / 触控 / 表格 / 模态 / 空态 ---------- */
  /* 页头紧凑化：标题一行、副标题弱化 */
  .page-header {
    padding: 2px 0 10px !important;
    margin-bottom: 10px !important;
    border-bottom: 1px solid var(--mrd-line) !important;
  }
  .page-header h2 { font-size: 18px !important; }
  .page-header p { font-size: 11.5px !important; color: var(--mrd-text-2) !important; }

  /* 卡片类容器统一 */
  .card, .stats-card, .panel {
    border-radius: var(--mrd-radius) !important;
    box-shadow: var(--mrd-shadow) !important;
    border: none !important;
  }

  /* 触控目标 ≥40px */
  .btn {
    min-height: 38px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    -webkit-tap-highlight-color: transparent;
  }
  .btn-primary {
    background: var(--mrd-primary) !important;
    border-color: var(--mrd-primary) !important;
  }
  .form-control, select, input[type="text"], input[type="number"], input[type="date"], input[type="search"], textarea {
    min-height: 40px !important;
    border-radius: 10px !important;
    font-size: 15px !important;   /* ≥16px 可防 iOS 聚焦缩放；15px 为平衡值 */
  }

  /* 表格容器：圆角 + 横滚阴影提示 */
  div[style*="overflow-x:auto"] {
    border-radius: 12px;
  }
  .table {
    border-radius: 12px !important;
    overflow: hidden;
  }
  .table thead th {
    background: #f7f9fa !important;
    color: var(--mrd-text-2) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    white-space: nowrap;
  }
  .table tbody td { font-size: 13.5px !important; }

  /* 模态近全屏（底部升起） */
  .modal-content {
    width: 96vw !important;
    max-width: 96vw !important;
    max-height: 90vh !important;
    border-radius: 18px !important;
  }
  .modal-header {
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--mrd-line) !important;
  }
  .modal-header h3 { font-size: 16px !important; }
  .modal-body { padding: 14px 16px !important; }
  .modal-footer { padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important; }

  /* 空态 */
  .empty-state {
    padding: 52px 20px !important;
  }
  .empty-state .icon { font-size: 52px !important; opacity: 0.55; }

  /* 分页触控加大 */
  .pagination button {
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 9px !important;
  }

  /* ---------- 5. 流畅度：滚动与动效 ---------- */
  .page {
    animation: mrd-fadein 0.18s ease;
  }
  @keyframes mrd-fadein {
    from { opacity: 0.55; transform: translateY(4px); }
    to   { opacity: 1;    transform: translateY(0); }
  }
  * { -webkit-tap-highlight-color: rgba(7, 193, 96, 0.08); }
}

/* ============================================================
 * 第二批（v20261106b）：工作台 KPI 卡 / 列表表格卡化 / 详情弹窗
 *   · KPI 卡：2 列大数字白卡 + 触感反馈（工作台 & 驾驶舱）
 *   · 表格卡化：≥5 列的宽表（由 MobileTables 标 m-cards）变成
 *     「标签：值」堆叠卡片；<5 列窄表保持第一批的横滚样式
 *   · 详情弹窗：底部按钮大触控、表单区块留白统一
 * ============================================================ */
@media (max-width: 1023px) {

  /* ---------- 6. 工作台 KPI 卡 ---------- */
  .stat-cards, .data-stats, .order-stats, .inv-stats {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
  }
  .stat-card {
    min-width: 0 !important;
    border-radius: 14px !important;
    box-shadow: var(--mrd-shadow) !important;
    border: none !important;
    padding: 14px 12px !important;
    background: var(--mrd-card) !important;
    transition: transform 0.12s ease;
  }
  .stat-card .stat-content { gap: 10px !important; }
  .stat-card .stat-icon { font-size: 24px !important; }
  .stat-card .stat-label { font-size: 12px !important; color: var(--mrd-text-2) !important; }
  .stat-card .stat-value {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: var(--mrd-text) !important;
    letter-spacing: 0.2px;
  }
  .stat-card .stat-trend { font-size: 11px !important; }
  /* 可点的 KPI 卡：按压回缩动效 */
  .stat-card.kpi-link { cursor: pointer; position: relative; overflow: hidden; }
  .stat-card.kpi-link:active { transform: scale(0.97); }
  /* 驾驶舱：inline 网格 minmax(160px,1fr) → 手机 2 列白卡 */
  #cockpitCards { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  #cockpitCards > div {
    border-radius: 14px !important;
    box-shadow: var(--mrd-shadow) !important;
    border: none !important;
    min-width: 0 !important;
  }

  /* ---------- 7. 表格卡化（table.m-cards；v20261106c 起覆盖裸 <table>） ---------- */
  table.m-cards {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;   /* 覆盖 .table-container table { min-width:520px } —— 卡化后必须满宽不横滚 */
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }
  table.m-cards thead { display: none !important; }
  table.m-cards tbody { display: block !important; width: 100%; }
  table.m-cards tbody tr {
    display: block !important;
    background: var(--mrd-card) !important;
    border-radius: 12px !important;
    box-shadow: var(--mrd-shadow);
    padding: 4px 14px !important;
    margin: 0 0 10px !important;
    border: none !important;
  }
  /* 干掉斑马纹/悬停底色，统一白卡 */
  table.m-cards tbody tr:nth-child(even),
  table.m-cards tbody tr:hover { background: var(--mrd-card) !important; }
  table.m-cards tbody td {
    display: block !important;
    text-align: right !important;
    padding: 8px 0 !important;
    border: none !important;
    border-bottom: 1px dashed #f0f2f5 !important;
    font-size: 13px !important;
    background: transparent !important;
    white-space: normal !important;
    word-break: break-word;
    min-height: 20px;
  }
  table.m-cards tbody td:last-child { border-bottom: none !important; }
  /* 标签：浮动在左侧的灰色小字（来自 data-label，由 MobileTables 注入） */
  table.m-cards tbody td::before {
    content: attr(data-label);
    float: left;
    color: var(--mrd-text-2) !important;
    font-size: 12px !important;
    font-weight: 500;
    max-width: 42%;
    text-align: left;
  }
  /* 空单元格整行隐藏（增强器标记 data-m-empty） */
  table.m-cards tbody td[data-m-empty] { display: none !important; }
  /* colspan 单元格（空态/分组行）：整卡通栏居中，不出标签 */
  table.m-cards tbody td[colspan] { text-align: center !important; color: var(--mrd-text-2); }
  table.m-cards tbody td[colspan]::before { content: none !important; }
  /* 卡片内的操作按钮行：按钮右对齐不换行挤压 */
  table.m-cards tbody td .btn { margin: 2px 0 2px 6px; }
  table.m-cards tbody td .btn:first-child { margin-left: 0; }

  /* ---------- 8. 详情弹窗 / 表单区块 ---------- */
  /* 弹窗底部按钮：等宽大触控 */
  .modal-footer { display: flex !important; gap: 10px !important; }
  .modal-footer .btn { flex: 1 !important; min-height: 44px !important; font-size: 15px !important; }
  /* 弹窗标题底部色条弱化 + 右上关闭钮加大 */
  .modal-close, .modal-header button[class*="close"] {
    min-width: 34px !important; min-height: 34px !important;
    font-size: 16px !important;
  }
  /* 表单两列布局在窄屏收成单列（inline flex/grid 容器兜底） */
  .modal-body .form-group { margin-bottom: 12px !important; }
  .modal-body label { font-size: 12.5px !important; color: var(--mrd-text-2) !important; }
  /* 防止超宽内容撑破卡片 */
  .modal-body img { max-width: 100% !important; height: auto; }
  .modal-body table { max-width: 100% !important; }
  .modal-body pre, .modal-body code { white-space: pre-wrap !important; word-break: break-all; }

  /* ---------- 9. 列表页筛选条兜底 ---------- */
  /* v20261106c 修复：原规则 `flex:1 1 140px` 在纵向 flex 容器里 flex-basis 变成
     140px 高度 ⇒ 订单筛选 select 被拉成 140px 高。删除该规则，改为统一高度。 */
  .page input, .page select, .page textarea { max-width: 100% !important; }
  select {
    height: 42px !important;
    min-height: 42px !important;
    padding: 4px 10px !important;
  }
}

/* ============================================================
 * 第三批（v20261106c）：清新度打磨 —— 顶栏压成一条、工作台重排、
 * 全局节奏统一（点餐宝式「上轻下重」：头部轻、内容卡片化）
 * ============================================================ */
@media (max-width: 1023px) {

  /* ---------- 10. 顶部：跑马灯横幅隐藏 + header 单行紧凑 ---------- */
  /* 全宽跑马灯（fixed 版 + 主内容区版）与品牌绿冲突且常驻占一行 —— 手机端隐藏 */
  .dev-marquee { display: none !important; }

  header {
    padding: 10px 14px !important;
    gap: 8px !important;
  }
  header > div { gap: 8px !important; }
  /* 返回工作台：品牌绿胶囊 */
  #backToDashboardBtn {
    background: var(--mrd-primary) !important;
    border-radius: 16px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    box-shadow: 0 2px 6px rgba(7, 193, 96, 0.3) !important;
  }
  #backToDashboardBtn:hover { background: var(--mrd-primary-dark) !important; }
  /* 租户徽章弱化 */
  #headerTenantBadge {
    padding: 3px 10px !important;
    font-size: 12px !important;
    background: var(--mrd-primary-weak) !important;
    border-color: #b7ebc6 !important;
    color: #0e8a4a !important;
  }
  /* 副面包文字隐藏（省空间），页面主标题加大 */
  #breadcrumbSub { display: none !important; }
  #breadcrumbCurrent { font-size: 16.5px !important; font-weight: 700 !important; }
  /* 头部铃铛（假通知 toast）隐藏 —— 消息中心已在底部 Tab */
  header div:has(> .badge) { display: none !important; }
  /* 用户区：只留头像 + 名字 + 激活 + 退出，角色副文字隐藏 */
  #userRole { display: none !important; }
  #userName { font-size: 13px !important; max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #userAvatar {
    width: 32px !important; height: 32px !important;
    font-size: 14px !important;
    background: linear-gradient(135deg, #34d399, #07c160) !important;
  }
  #headerLicenseBtn {
    background: #fff7e6 !important;
    border: 1px solid #ffe58f !important;
    color: #d48806 !important;
  }

  /* ---------- 11. 工作台重排：点餐宝式信息层级 ---------- */
  /* 顺序：欢迎头卡 → 常用功能宫格 → KPI 卡 → 图表/最近订单 → 业务横幅 → 预警/轮播沉底
     ★ 必须 :not(.hidden) —— 否则 display:flex !important 特异性压过 .hidden 的 display:none !important，
       工作台将永远无法隐藏（会盖在其他页面上） */
  #page-dashboard:not(.hidden) { display: flex !important; flex-direction: column; }
  #page-dashboard > .welcome-card { order: 1 !important; margin-bottom: 14px !important; }
  #page-dashboard > .shortcut-section { order: 2 !important; }
  #page-dashboard > .stat-cards { order: 3 !important; }
  #page-dashboard > .charts-row { order: 4 !important; }
  #page-dashboard > .card { order: 5 !important; }   /* 最近订单等白卡 */
  #page-dashboard > #customerPayBanner { order: 6 !important; }
  #page-dashboard > #dashboardAlertPanel { order: 7 !important; }
  #page-dashboard > #licenseCard { order: 8 !important; }
  #page-dashboard > #complianceWarnings { order: 9 !important; }
  #page-dashboard > #marketingCarousel { order: 10 !important; }
  /* 欢迎卡按钮：白底描边 → 品牌绿实心（头卡上的主行动点） */
  .welcome-card .btn {
    background: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    color: #fff !important;
    min-height: 34px !important;
    font-size: 12.5px !important;
  }
  .welcome-card .btn:active { background: rgba(255, 255, 255, 0.28) !important; }
  /* 工作台内嵌白色容器卡片化 */
  #page-dashboard > div:not(.welcome-card) {
    border-radius: var(--mrd-radius);
  }

  /* ---------- 12. KPI 卡数字统一品牌色节奏 ---------- */
  .stat-card .stat-value { color: #0e8a4a !important; }
  #cockpitCards .stat-value { color: inherit !important; }

  /* ---------- 13. 危险全宽按钮降级为常规尺寸（手机端太吓人且占屏） ---------- */
  .page > .btn-danger,
  .page .btn-block.btn-danger {
    display: inline-block !important;
    width: auto !important;
    min-height: 36px !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
  }

  /* ---------- 15. 体验模式悬浮标上移（v20261106d，老板反馈：别挡住底部菜单） ---------- */
  /* 徽标原 bottom:14px 与底部 Tab 栏（约 60px + 安全区）重叠；上移到 Tab 上方呼吸位。
     手机端（≤1023px）全程有底部 Tab（cat 或 main 二选一常驻），故取 Tab 高度偏移。 */
  #demoModeBadge {
    bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important;
    right: 12px !important;
    font-size: 12px !important;
    padding: 6px 12px !important;
  }
}


/* ============================================================
 * 14. 桌台看板（v20261106d · TableBoardModules）
 * ------------------------------------------------------------
 * 点餐宝式桌台页：顶部区域横滑 Tab + 状态筛选 chips + 3 列桌台卡宫格。
 * 基础规则放在媒体查询外（桌面端也有一份可看的基本排版），
 * 手机端在 @media 内做点餐宝化强化（更满的卡、更密的网格）。
 * ============================================================ */

.tbb-wrap { padding: 12px; }
.tbb-atabs {
  display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: 2px 2px 10px; scrollbar-width: none;
}
.tbb-atabs::-webkit-scrollbar { display: none; }
.tbb-atarea {
  flex: 0 0 auto; padding: 7px 16px; border-radius: 20px;
  font-size: 13.5px; color: #595959; background: #fff;
  border: 1px solid #e8e8e8; cursor: pointer; white-space: nowrap;
}
.tbb-atarea.active {
  background: #07c160; border-color: #07c160; color: #fff; font-weight: 600;
}
.tbb-chips {
  display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: 0 2px 12px; scrollbar-width: none; align-items: center;
}
.tbb-chips::-webkit-scrollbar { display: none; }
.tbb-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: 8px; font-size: 12.5px;
  background: #fff; border: 1px solid #e8e8e8; color: #595959; cursor: pointer;
}
.tbb-chip.active { border-color: #07c160; color: #07c160; background: #f2fbf6; font-weight: 600; }
.tbb-dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.tbb-n { font-size: 11px; color: #8c8c8c; }
.tbb-chip.active .tbb-n { color: #07c160; }

.tbb-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.tbb-card {
  --tbc: #52c41a;
  position: relative; min-height: 138px; border-radius: 12px;
  background: #fff; border: 1px solid #eef0f2; box-shadow: 0 1px 6px rgba(31,35,41,0.05);
  padding: 12px 8px 8px; cursor: pointer; overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  transition: transform .12s ease;
}
.tbb-card:active { transform: scale(.97); }
.tbc-name { font-size: 19px; font-weight: 700; color: #1f2329; line-height: 1.2; }
.tbc-badges { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; justify-content: center; }
.tbc-status {
  font-size: 10.5px; padding: 2px 9px; border-radius: 10px;
  color: var(--tbc, #52c41a); border: 1px solid var(--tbc, #52c41a);
  background: transparent; white-space: nowrap;
}
.tbc-res { font-size: 10px; padding: 2px 7px; border-radius: 10px; color: #1677ff; border: 1px solid #91caff; background: #e6f4ff; white-space: nowrap; }
.tbc-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 0 2px; }
.tbc-idlehint { font-size: 11.5px; color: #b7bcc4; }
.tbc-amount { font-size: 17px; font-weight: 700; color: var(--tbc, #1890ff); }
.tbc-unpaid { font-size: 11.5px; color: #fa8c16; font-weight: 600; }
.tbc-paidok { font-size: 11.5px; color: #52c41a; }
.tbc-serve { font-size: 11px; color: #8c8c8c; }
.tbc-foot {
  width: calc(100% + 16px); margin: 0 -8px -8px; padding: 5px 8px;
  display: flex; justify-content: space-between; font-size: 10.5px; color: #8c8c8c;
  border-top: 1px solid #f2f3f5; background: #fafbfc;
}
/* v20261106d 实拍修复：容量+时长溢出换行难看（「3小时16分」被拆行）→ 单行 + 溢出省略 */
.tbc-foot span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* 就餐中/开台/结账：品牌绿高亮卡（点餐宝「包6」样式） */
.tbb-card.busy {
  --tbc: #ffffff;
  background: linear-gradient(160deg, #10d269 0%, #07ad55 100%);
  border-color: #07ad55; color: #fff;
  box-shadow: 0 4px 14px rgba(7, 173, 85, 0.35);
}
.tbb-card.busy .tbc-name { color: #fff; }
.tbb-card.busy .tbc-status { color: #fff; border-color: rgba(255,255,255,.75); background: rgba(255,255,255,.14); }
.tbb-card.busy .tbc-amount { color: #fff; }
.tbb-card.busy .tbc-unpaid { color: #ffe58f; }
.tbb-card.busy .tbc-paidok { color: #d9f7e8; }
.tbb-card.busy .tbc-serve { color: rgba(255,255,255,.85); }
.tbb-card.busy .tbc-foot { border-top-color: rgba(255,255,255,.22); background: rgba(0,0,0,.12); color: rgba(255,255,255,.85); }
.tbb-card.busy .tbc-idlehint { color: rgba(255,255,255,.8); }

.tbb-empty { text-align: center; padding: 46px 20px; color: #8c8c8c; }
.tbb-empty p { margin: 6px 0 12px; font-size: 13.5px; }
.tbb-add-btn {
  padding: 9px 22px; border-radius: 10px; border: none; cursor: pointer;
  background: #07c160; color: #fff; font-size: 14px; font-weight: 600;
}

/* 桌台扩展操作面板 */
.tbb-sheet { padding: 4px 2px 8px; }
.tbb-sheet-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 4px 4px 12px; }
.tbb-sheet-head .tbc-status { font-size: 12px; padding: 3px 12px; color: var(--sc, #52c41a); border-color: var(--sc, #52c41a); }
.tbb-sheet-cap { font-size: 12.5px; color: #595959; }
.tbb-sheet-amt { margin-left: auto; font-size: 15px; font-weight: 700; color: #1f2329; }
.tbb-sheet-amt em { font-style: normal; font-size: 12px; color: #fa8c16; font-weight: 600; }
.tbb-acts { display: flex; flex-direction: column; gap: 9px; }
.tbb-act {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 12px 14px; border-radius: 12px; border: 1px solid #eef0f2;
  background: #fafbfc; cursor: pointer; text-align: left; width: 100%;
  transition: background .15s;
}
.tbb-act:active { background: #f0fdf5; }
.tbb-act b { font-size: 14.5px; color: #1f2329; font-weight: 600; }
.tbb-act i { font-style: normal; font-size: 11.5px; color: #8c8c8c; }
.tbb-act.danger b { color: #ff4d4f; }
.tbb-act-note { font-size: 12px; color: #8c8c8c; padding: 10px 14px; background: #fffbe6; border: 1px dashed #ffe58f; border-radius: 10px; }

/* 手机端强化：卡更满、网格贴边 */
@media (max-width: 1023px) {
  .tbb-wrap { padding: 10px 10px 16px; }
  .tbb-grid { gap: 9px; }
  .tbb-card { min-height: 150px; border-radius: 13px; }
  .tbc-name { font-size: 21px; }
  .tbc-foot { font-size: 11px; }
  /* 底部 Tab 上留出呼吸空间 */
  #page-tables .tbb-wrap { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
}

/* ★ v20261108a：桌台详情弹窗（菜品上菜情况 + 状态切换） */
.tbd-list { display: flex; flex-direction: column; gap: 10px; padding: 4px 2px 10px; max-height: 60vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.tbd-row { border: 1px solid var(--border-color, #f0f0f0); border-radius: 12px; padding: 10px 12px; background: #fff; }
.tbd-row.served { background: #fafafa; opacity: .92; }
.tbd-dishes { font-size: 15px; font-weight: 600; color: #262626; line-height: 1.5; }
.tbd-status { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.tbd-badge { font-size: 12px; font-weight: 700; border: 1.5px solid; border-radius: 999px; padding: 2px 12px; }
.tbd-sub { font-size: 12px; color: #8c8c8c; }
.tbd-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.tbb-act.tbb-act-mini { padding: 7px 14px; font-size: 13px; border: 1px solid var(--border-color, #e8e8e8); background: #fff; }
.tbb-act.tbb-act-mini b { font-size: 13px; }
.tbb-act.tbb-act-mini i { display: none; }