/* ============================================================
 * 信息码系统 - 手机优先（Mobile First）公共样式
 * ============================================================
 * 加载位置：各页面内联 <style> 之后、</head> 之前，用于统一覆盖为手机优先。
 * 设计原则：
 *   1. 基础样式 = 手机端（单列、抽屉导航、全宽按钮、紧凑留白）
 *   2. 平板/桌面通过 @media (min-width: 768px / 1200px) 逐级增强
 *   3. 表格一律包在 .table-wrap 内横向滚动，不挤压内容
 * ============================================================ */

/* ---------------- 全局基础（手机） ---------------- */
html {
    -webkit-text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
}

/* 表单控件：触控友好，字号 ≥16px 可避免 iOS 聚焦时自动放大页面 */
input[type="text"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="email"],
select,
textarea {
    font-size: 16px;
}

/* 按钮：手机端最小点击区 44px */
.btn,
button {
    min-height: 44px;
}

/* 移动端顶栏上的圆形加号按钮保持方形，不被 44px 撑变形 */
.mobile-header .btn {
    min-height: 36px;
}

/* ---------------- 前台顶部导航：品牌与按钮同一行，手机只显示图标 ---------------- */
.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: nowrap;
    padding: 10px 12px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    min-width: 0;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
}

.brand .name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sitenav {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}

.sitenav::-webkit-scrollbar {
    display: none;
}

.sitenav a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 14px;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.sitenav a:hover {
    background: rgba(255, 255, 255, 0.28);
}

.sitenav a.active {
    background: #fff;
    color: #15803d;
    font-weight: 600;
}

.sitenav a .ico {
    font-size: 16px;
    line-height: 1;
}

/* 手机端只显示图标 */
.sitenav a .txt {
    display: none;
}

/* ---------------- 后台布局：上下结构（顶部导航 + 全宽内容区） ---------------- */
/* .sidebar 容器复用为顶部导航条，页面内容区不再有左侧留白 */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    width: 100%;
    max-width: none;
    min-height: 0;
    height: auto;
    padding: 8px 12px;
    transform: none !important;
    background: linear-gradient(90deg, #15803d 0%, #166534 100%);
    box-shadow: 0 2px 8px rgba(20, 83, 45, 0.25);
    overflow: visible;
    z-index: 1000;
}

/* 上下结构下不再使用的元素：侧边栏标题、汉堡条、抽屉遮罩 */
.sidebar .logo,
.mobile-header,
.overlay {
    display: none !important;
}

.main-content {
    margin-left: 0 !important;
    padding: 76px 12px 24px !important;
}

/* ---------------- 顶部导航条 ---------------- */
.topnav {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.topnav-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    flex-shrink: 0;
}

.topnav-brand .mark {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

/* 手机上品牌名让位给菜单，只保留图标 */
.topnav-brand .name {
    display: none;
}

.topnav-menu {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    padding: 2px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.topnav-menu::-webkit-scrollbar {
    display: none;
}

.topnav-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.92);
    font-size: 14px;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.topnav-item:hover {
    background: rgba(255, 255, 255, 0.26);
    color: #fff;
}

.topnav-item.active {
    background: #fff;
    color: #15803d;
    font-weight: 600;
}

.topnav-item .ico {
    font-size: 15px;
    line-height: 1;
}

.topnav-user {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.topnav-user .who {
    display: none;
}

/* 右侧最前面的「返回」：始终可见，不随主菜单横向滚动 */
.topnav-user .back {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    flex-shrink: 0;
}

.topnav-user .logout {
    background: rgba(0, 0, 0, 0.22);
}

/* ---------------- 卡片与区块 ---------------- */
.section {
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 16px;
}

.header {
    margin-bottom: 18px;
    gap: 8px;
}

.header h1 {
    font-size: 20px;
}

/* 搜索/筛选表单：手机上纵向排列，输入区全宽 */
.filter-form,
.search-form,
.query-form {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

.filter-form .field,
.search-form .field,
.query-form .field {
    width: 100%;
}

.filter-form input[type="text"],
.filter-form select,
.search-form input[type="text"],
.query-form input[type="text"] {
    width: 100%;
    min-width: 0;
}

.filter-form .btn,
.filter-form a.btn,
.search-form button,
.search-form .link-btn,
.query-form button {
    width: 100%;
    justify-content: center;
}

/* ---------------- 表格：紧凑 + 横向滚动 ---------------- */
/* 说明：表格最小宽度由各页面按列数自行定义，此处只统一留白与字号，避免挤压列宽 */
.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table th,
table td {
    padding: 9px 10px;
    font-size: 13px;
}

/* 统计卡片：手机两列，桌面四列 */
.stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

/* 顶栏留白 */
.topbar-inner {
    padding: 10px 12px;
}

/* 安装页容器 */
.install-container {
    padding: 20px 16px;
}

/* ---------------- 操作按钮组：手机纵向全宽 ---------------- */
.actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.actions .btn,
.actions a.btn,
.actions button {
    width: 100%;
    flex: none;
    min-width: 0;
}

/* ---------------- 弹窗：手机端贴底、可滚动 ---------------- */
.modal {
    padding: 12px;
    align-items: flex-end;
}

.modal-content {
    padding: 18px;
    max-height: 88vh;
    border-radius: 16px;
}

.modal-footer {
    flex-direction: column-reverse;
    gap: 10px;
}

.modal-footer .btn {
    width: 100%;
}

/* ---------------- 前台容器 ---------------- */
.wrap {
    padding: 16px 12px 30px;
}

/* ============================================================
 * 平板 / 桌面增强
 * ============================================================ */
@media (min-width: 768px) {
    /* 桌面按钮恢复自然高度（表格内小按钮等） */
    .btn,
    button {
        min-height: 0;
    }

    .stats-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 20px;
    }

    .topbar-inner {
        padding: 14px 20px;
    }

    /* 桌面端显示按钮文字 */
    .sitenav a .txt {
        display: inline;
    }

    .install-container {
        padding: 30px;
    }

    /* 桌面：上下结构保持，仅加大留白与顶部导航信息展示 */
    .sidebar {
        padding: 10px 24px;
    }

    .main-content {
        padding: 88px 28px 32px !important;
    }

    .topnav {
        gap: 16px;
    }

    .topnav-brand .name {
        display: inline;
    }

    .topnav-user .who {
        display: inline;
        color: rgba(255, 255, 255, 0.85);
        font-size: 13px;
    }

    .topnav-item {
        padding: 9px 14px;
    }

    .section {
        padding: 24px;
        margin-bottom: 20px;
    }

    .header {
        margin-bottom: 24px;
    }

    .header h1 {
        font-size: 24px;
    }

    /* 表单恢复横向排列 */
    .filter-form,
    .search-form,
    .query-form {
        flex-direction: row;
        align-items: flex-end;
        flex-wrap: wrap;
    }

    .filter-form .field,
    .search-form .field,
    .query-form .field {
        width: auto;
    }

    .filter-form .btn,
    .filter-form a.btn,
    .search-form button,
    .search-form .link-btn,
    .query-form button {
        width: auto;
    }

    table th,
    table td {
        padding: 12px 16px;
        font-size: 14px;
    }

    /* 操作按钮恢复横向 */
    .actions {
        flex-direction: row;
        gap: 8px;
    }

    .actions .btn,
    .actions a.btn,
    .actions button {
        width: auto;
    }

    /* 弹窗恢复居中 */
    .modal {
        align-items: center;
        padding: 20px;
    }

    .modal-footer {
        flex-direction: row;
        justify-content: flex-end;
    }

    .modal-footer .btn {
        width: auto;
    }

    .wrap {
        padding: 24px 20px 40px;
    }
}

@media (min-width: 1200px) {
    .sidebar {
        padding: 10px 40px;
    }

    .main-content {
        padding: 92px 40px 40px !important;
    }

    .wrap {
        max-width: 1180px;
    }
}

/* ============================================================
 * 搜索筛选：满容器自适应
 * 仅作用于带 .filter-fluid 的表单：字段与按钮随容器宽度自动填充，
 * 手机 1 列、平板 2 列、桌面多列，始终占满容器宽度。
 * ============================================================ */
.filter-fluid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    width: 100%;
    align-items: end;
}

.filter-fluid .field {
    width: 100%;
    min-width: 0;
}

.filter-fluid input[type="text"],
.filter-fluid select {
    width: 100%;
    min-width: 0;
}

.filter-fluid .btn,
.filter-fluid a.btn {
    width: 100%;
    justify-content: center;
}

@media (min-width: 768px) {
    .filter-fluid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 14px;
    }

    .filter-fluid .btn,
    .filter-fluid a.btn {
        width: auto;
    }
}