/* ===== 后台手机端适配（admin.html）=====
 * 仅当 <html> 被 js/device.js 标记为 .device-mobile 时生效。
 * 前台通用适配在 css/mobile.css，本文件只处理管理后台独有结构（侧边栏/后台表格等）。
 * 所有规则以 .device-mobile 为前缀，PC 端（.device-pc）完全不受影响。
 * 未修改任何原始 CSS/JS，全部为新增覆盖规则。
 */

/* ---- 整体布局：侧边栏 → 顶部横向滚动菜单 ---- */
.device-mobile .admin-layout {
    flex-direction: column;
    min-height: auto;
}

.device-mobile .admin-sidebar {
    position: sticky;
    top: 52px; /* 顶部导航条（手机端 52px）之下 */
    z-index: 99;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 6px;
    border-right: none;
    border-bottom: 1px solid var(--gray-200);
    background: #fff;
}

.device-mobile .admin-sidebar::-webkit-scrollbar {
    display: none;
}

.device-mobile .admin-sidebar .menu-item {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 10px 14px;
    font-size: 14px;
    border-right: none;
    border-bottom: 3px solid transparent;
}

.device-mobile .admin-sidebar .menu-item:hover {
    background: var(--gray-50);
}

.device-mobile .admin-sidebar .menu-item.active {
    background: transparent;
    border-right: none;
    border-bottom: 3px solid var(--primary);
    color: var(--primary);
}

.device-mobile .admin-content {
    padding: 12px;
    overflow-x: hidden;
}

.device-mobile .admin-content h2 {
    font-size: 19px;
    margin-bottom: 12px !important;
}

/* ---- 卡片头：多按钮/筛选时允许换行 ---- */
.device-mobile .card-header {
    flex-wrap: wrap;
    gap: 8px;
}

/* ---- 表格：横向滚动而非挤压列宽（除扫码结果两列键值表） ---- */
.device-mobile .table-wrap,
.device-mobile .card table.table:not(#scanResult),
.device-mobile .card table.data-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
}

.device-mobile #scanResult,
.device-mobile #scanResult table.table {
    display: table;
    white-space: normal;
}

/* ---- 统计卡片：手机端紧凑 2 列 ---- */
.device-mobile .stats-grid {
    gap: 8px;
    margin-bottom: 16px;
}

.device-mobile .stat-card {
    padding: 14px 8px;
}

.device-mobile .stat-card .stat-value {
    font-size: 22px;
}

.device-mobile #roleEntries {
    grid-template-columns: repeat(2, 1fr) !important; /* 覆盖内联 minmax(220px,1fr) */
}

.device-mobile #roleEntries .stat-value {
    font-size: 16px;
}

/* ---- 登录页：顶部边距收敛 ---- */
.device-mobile #loginPage {
    margin: 24px auto !important;
    padding: 0 12px;
    max-width: 100% !important;
}

/* ---- 筛选条 / 工具栏：换行 + 内联固定宽度覆盖 ---- */
.device-mobile .filter-bar,
.device-mobile .toolbar {
    flex-wrap: wrap;
    gap: 8px;
}

.device-mobile .filter-bar .form-control,
.device-mobile .toolbar .form-control {
    min-width: 0;
    flex: 1 1 120px;
}

.device-mobile #searchKeyword,
.device-mobile #orderKeyword {
    width: 100% !important; /* 覆盖内联 width:200px */
}

.device-mobile #orderExpireMinutes {
    width: 100% !important; /* 覆盖内联 width:140px */
}

.device-mobile #paySettingBox {
    align-items: stretch;
}

.device-mobile #paySettingBox .form-control {
    width: 100% !important;
}

.device-mobile #transferApplyForm {
    grid-template-columns: 1fr !important; /* 覆盖内联 minmax(200px,1fr) */
}

/* ---- 角色 Tab 切换：允许横向滚动 ---- */
.device-mobile .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.device-mobile .tab {
    flex-shrink: 0;
    white-space: nowrap;
}

/* ---- 按钮：触控尺寸 ---- */
.device-mobile .btn-sm {
    min-height: 38px;
    padding: 8px 12px;
    font-size: 13px;
}

.device-mobile .btn {
    min-height: 44px;
}

.device-mobile .btn-link {
    min-height: 0;
}

/* ---- 弹窗：手机端全屏（mobile.css 已全屏化，这里补按钮布局） ---- */
.device-mobile .modal {
    margin: 0;
}

.device-mobile .modal-footer {
    flex-wrap: wrap;
    gap: 8px;
}

.device-mobile .modal-footer .btn {
    flex: 1 1 45%;
    min-width: 0;
}

.device-mobile .modal-close {
    padding: 6px 10px;
}

/* ---- 自动补全下拉：改为文档流，避免溢出屏幕 ---- */
.device-mobile .autocomplete-list {
    position: static;
    margin-top: 6px;
}

/* ---- 空状态 / 分页 ---- */
.device-mobile .empty-state {
    padding: 40px 12px;
}

.device-mobile .empty-state .empty-text {
    font-size: 14px;
}

.device-mobile .pagination {
    flex-wrap: wrap;
    gap: 6px;
}

/* ---- 扫码容器宽度约束（内联 max-width:420px） ---- */
.device-mobile #scanReader {
    max-width: 100% !important;
}

/* P2 search history */
.search-history {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    padding: 10px 0 14px; font-size: 13px; color: var(--gray-500);
}
.search-history .sh-label { color: var(--gray-500); }
.search-history .sh-item {
    background: var(--gray-100); color: var(--gray-700);
    padding: 4px 12px; border-radius: 14px; cursor: pointer; transition: all .15s;
}
.search-history .sh-item:hover { background: var(--primary-light); color: var(--primary); }
.search-history .sh-clear { color: var(--gray-400); cursor: pointer; margin-left: 4px; }
.search-history .sh-clear:hover { color: var(--danger); }