/* 管理端移动壳覆盖层。admins/base.html 用 media="(max-width: 768px)" 引入本文件，
   所以这里不写 @media；admin.css 保持零 @media，桌面各页逐字不变。
   覆盖范围是全部功能页：窄屏不做功能子集，桌面页在手机上也要能用，
   因此这里只做通用降级（表格转卡片、横向排布换行、控件拉满、触控加大），
   不逐页打补丁——单页的体验优化另立项，不许把入口过滤加回来。

   引入位置在所有页面私有 <style> 之后（base 的 extraHead 后面）：
   覆盖层必须压过桌面页内联样式的 padding / text-align / border，否则窄屏下表格降级会半途而废。 */

/* 底栏：桌面由 admin.css 里那条 .p-tabbar { display: none } 收起，窄屏放出来。
    markup 与点亮逻辑都是三端共用的 common/_tabbar.html + common/js/tabbar.js */
.p-tabbar { display: flex; }

/* 内容区：底栏约 54px + 安全区，避让高度与两端 .p-page 的 76px 取齐 */
.admin-container { padding: 12px 12px 76px; }
.admin-card { padding: 12px; margin-bottom: 12px; }
.admin-header { padding: 10px 12px; }

/* 首页宫格：桌面按 110px 自适应多列，窄屏固定两列更好扫读；hover 抬升在无触控板上没意义 */
.admin-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.admin-grid-item { padding: 14px 8px; }
.admin-grid-item:hover { transform: none; box-shadow: var(--admin-shadow); }

/* 表单控件：字号 <16px 会让 iOS 在聚焦时放大整页且不再收回 */
.admin-input, .admin-select, .admin-textarea { font-size: 16px; }
/* 桌面筛选条常用内联 max-width 收宽度，窄屏一律拉满整行（同特异性、后置即生效） */
.admin-input, .admin-select, .admin-textarea { width: 100%; max-width: 100%; }

/* 触控目标：桌面 8px 上下内边距在手机上偏小，统一垫到约 40px 高 */
.admin-btn { min-height: 40px; }

/* 筛选条、按钮组一类横向排布：窄屏允许换行，不把「确定」挤出可视区 */
.admin-row, .admin-row-between { flex-wrap: wrap; }

/* ---------- 表格降级为卡片列表 ----------
   只对标了 .admin-table-cards 的容器生效，列名来自每个 td 的 data-label（没有列名就退化成
   一列没有语义的值，比表格更难读）。thead 直接隐藏：一张卡自己就是完整记录。 */
/* 桌面常给表格内层写 min-width 撑列（如学生管理 640px），卡片化后必须解锁并收起横向滚动 */
.table-wrap { overflow-x: visible; }
.table-wrap.admin-table-cards table { min-width: 0; }
.admin-table-cards table { width: 100%; border-collapse: separate; border-spacing: 0; }
.admin-table-cards thead { display: none; }
.admin-table-cards tbody { display: block; }
.admin-table-cards tr {
    display: block;
    border: 1px solid var(--admin-border);
    border-radius: 10px;
    padding: 6px 10px;
    margin-bottom: 10px;
}
.admin-table-cards tr:hover td { background: transparent; }
.admin-table-cards td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
    border-bottom: 0;
    text-align: right;
    font-size: 13px;
    word-break: break-all;
}
/* 卡片内的按钮组同样允许换行（操作列里常是两三个按钮并排） */
.admin-table-cards .admin-row { flex-wrap: wrap; }
.admin-table-cards td::before {
    content: attr(data-label);
    color: var(--admin-text-sub);
    text-align: left;
    flex: none;
}
/* 操作列：标签留在左侧，按钮靠右成一行 */
.admin-table-cards td.admin-cell-actions { padding-top: 8px; }