/* 喜卷卷饼商家后台 · 移动端响应式
 * 仅在窄屏生效：侧边栏改为抽屉，主区域单列，宽表格可横向滑动，
 * 操作列固定在右侧；桌面端（>768px）完全沿用原有 admin.css。
 */

/* 汉堡按钮：仅窄屏显示，默认隐藏 */
.nav-toggle { display: none; }
.nav-overlay { display: none; }

@media (max-width: 768px) {
  html, body { width: 100%; overflow-x: hidden; }

  /* 外壳：去掉 1200px 最小宽度，纵向排列 */
  .admin-shell {
    min-width: 0;
    width: 100%;
    flex-direction: column;
    display: block;
  }

  /* 侧边栏：off-canvas 抽屉，默认藏在左侧 */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100vh;
    height: 100dvh;
    width: 264px;
    z-index: 320;
    transform: translateX(-100%);
    transition: transform 0.26s ease;
    box-shadow: 0 12px 40px rgba(20, 10, 5, 0.35);
  }
  body.nav-open .sidebar { transform: translateX(0); }

  /* 遮罩：抽屉打开时显示 */
  .nav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(20, 10, 5, 0.45);
    z-index: 310;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.26s ease;
  }
  body.nav-open .nav-overlay { opacity: 1; pointer-events: auto; }

  /* 汉堡按钮：显示 */
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--line-b);
    background: #fff;
    color: var(--ink);
    flex: 0 0 auto;
  }
  .nav-toggle svg { width: 20px; height: 20px; }

  /* 桌面端折叠按钮在移动端隐藏，统一用抽屉汉堡 */
  .sb-collapse { display: none; }

  /* 主区域：占满宽度 */
  .admin-main { width: 100%; min-width: 0; }

  /* 顶栏：允许换行、缩小内边距，次要状态芯片隐藏 */
  .topbar {
    height: auto;
    min-height: 56px;
    padding: 10px 14px;
    gap: 10px;
    flex-wrap: wrap;
  }
  .topbar .tb-title { font-size: 15.5px; }
  .topbar .tb-sub { display: none; }
  .topbar .tb-right { gap: 8px; width: 100%; }
  .topbar .tb-right > .chip { display: none; }
  .tb-user { padding: 4px 12px 4px 5px; }
  .tb-logout { width: 36px; height: 36px; }

  /* 内容区：缩小内边距 */
  .content { padding: 14px 14px 40px; gap: 14px; }
  .page-head h2 { font-size: 18px; }
  .page-head .head-actions { width: 100%; flex-wrap: wrap; }

  /* 卡片：缩小内边距 */
  .card { padding: 15px; border-radius: 13px; }

  /* 所有自适应网格在手机上单列 */
  .stat-grid,
  .table-grid,
  .chart-grid,
  .form-grid,
  .verify-queue,
  .url-grid { grid-template-columns: 1fr; gap: 12px; }

  /* 内联写死的两列网格（收银台、桌台统计）统一单列 */
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* 统计数字略小 */
  .stat-value { font-size: 24px; }

  /* —— 分段控件 / 标签页：横向滑动，不挤压、不折行 —— */
  .seg {
    display: flex;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .seg::-webkit-scrollbar { display: none; }
  .seg button { flex: 0 0 auto; white-space: nowrap; }

  /* 页头操作区：子元素整行排列，日期框可并排，查询按钮占满一行 */
  .page-head .head-actions { display: flex; gap: 8px; }
  .page-head .head-actions .seg { flex: 1 1 100%; }
  .page-head .head-actions input[type="date"] { flex: 1 1 42%; min-width: 0; }
  .page-head .head-actions > span { flex: 0 0 auto; align-self: center; }
  .page-head .head-actions #queryBtn { flex: 1 1 100%; min-height: 42px; }
  /* 搜索框占满剩余宽度，刷新按钮固定，避免搜索框被截断 */
  .page-head .head-actions .search-input-wrap { flex: 1 1 160px; min-width: 0; }
  .page-head .head-actions #refresh { flex: 0 0 auto; }

  /* 宽表格：外层横向滑动，不撑破页面 */
  .data-table { min-width: 560px; }
  .table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 操作列固定在右侧，横滑时始终可见可点（最后一列） */
  .data-table td:last-child,
  .data-table th:last-child {
    position: sticky;
    right: 0;
    z-index: 2;
    background: #fff;
    box-shadow: -8px 0 12px -10px rgba(42, 26, 16, 0.45);
  }
  .data-table thead th:last-child { background: #f8f2e8; z-index: 4; }
  .data-table th:last-child { border-radius: 0; }

  /* 右侧详情抽屉：手机上接近全宽 */
  .drawer { width: 88vw; max-width: 340px; }
  .drawer.show { right: 0; }

  /* 弹窗：手机上近乎全屏，便于操作 */
  .mask { padding: 0; }
  .modal {
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    border-radius: 0;
    max-height: 100vh;
  }

  /* 按钮：主操作在窄屏更易点 */
  .btn { min-height: 40px; }
  .head-actions .btn,
  .card-title .t-actions .btn { flex: 1 1 auto; }

  /* 卡片标题里的操作按钮：换行后整行，不溢出 */
  .card-title { flex-wrap: wrap; }
  .card-title .t-actions { flex: 1 1 100%; margin-left: 0; }

  /* 门店通用码：窄屏纵向堆叠并居中 */
  [style*="gap:26px"],
  [style*="gap: 26px"] {
    flex-direction: column;
    align-items: center;
  }

  /* 输入控件：避免最小宽度溢出 */
  .filter-bar .input { width: 100%; }
  input, select, textarea { max-width: 100%; }
  .filter-bar { flex-wrap: wrap; }
  .filter-bar .search-input-wrap { width: 100%; }
}

/* 超窄屏（≤360px）再压缩 */
@media (max-width: 360px) {
  .content { padding: 12px 11px 36px; }
  .sidebar { width: 84vw; }
  .data-table { min-width: 480px; }
}