/* ============================================================
 *  移动端优先优化层  assets/mobile.css
 *  该文件在所有页面的 <head> 末尾引入，优先级高于页面内联样式，
 *  用于统一改善手机端（触摸目标、字号、间距、安全区、后台导航）。
 * ============================================================ */

/* ---------- 1. 基础：视口与点击体验 ---------- */
html {
    -webkit-text-size-adjust: 100%;   /* 防止 iOS 横屏自动放大字体 */
    text-size-adjust: 100%;
}
* {
    -webkit-tap-highlight-color: rgba(44, 62, 80, 0.06); /* 轻触反馈 */
}
body {
    /* iPhone 刘海屏安全区，避免内容被圆角/黑条遮挡 */
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
    overflow-x: hidden;               /* 防止个别元素撑出横向滚动条 */
}
img, video, canvas {
    max-width: 100%;
    height: auto;
}

/* 图片加载失败时的降级外观（避免破图） */
img.is-broken {
    background: #eef2f7;
    object-fit: cover;
}

/* ---------- 2. 手机端（<768px）通用优化 ---------- */
@media (max-width: 767.98px) {

    /* 2.1 触摸目标：按钮、输入框保证足够高度 */
    .btn {
        min-height: 46px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.6rem 1.1rem;
        font-size: 1rem;
    }
    .btn-sm {
        min-height: 38px;
        font-size: 0.85rem;
        padding: 0.35rem 0.8rem;
    }
    .btn-lg {
        min-height: 52px;
        font-size: 1.05rem;
    }
    .btn.w-100 { width: 100% !important; }

    /* 2.2 表单控件：16px 可避免 iOS/Safari 聚焦时自动放大页面 */
    .form-control,
    .form-select,
    input[type="text"],
    input[type="tel"],
    input[type="email"],
    input[type="password"],
    input[type="file"],
    select,
    textarea {
        font-size: 16px !important;
        min-height: 46px;
        border-radius: 10px;
    }
    textarea.form-control { min-height: auto; }

    .form-label { font-size: 0.95rem; margin-bottom: 0.35rem; }

    /* 单选/复选：加大触摸区域 */
    .form-check { padding-left: 1.9rem; min-height: 44px; display: flex; align-items: center; }
    .form-check-input { width: 1.25rem; height: 1.25rem; margin-left: -1.9rem; margin-top: 0; }

    /* 2.3 顶部 hero 头部压缩，减少首屏占用 */
    .header {
        padding: 1.15rem 0 1rem !important;
    }
    .header h1 {
        font-size: 1.3rem;
        line-height: 1.3;
    }
    .header h2,
    .header .h4,
    .header .h5,
    .header .h6 {
        font-size: 0.9rem;
    }
    .header .lead { display: none; }      /* 副标题在手机上省略 */
    .header img { max-height: 56px !important; margin-bottom: 0.4rem !important; }
    .header .breadcrumb {
        font-size: 0.8rem;
        margin-bottom: 0 !important;
        margin-top: 0.35rem;
    }

    /* 2.4 内容区留白收敛，手机屏幕更省空间 */
    .container { padding-left: 0.85rem; padding-right: 0.85rem; }
    .card { border-radius: 14px; }
    .card-body { padding: 1rem; }
    .form-card,
    .verify-card,
    .search-card {
        padding: 1rem !important;
        margin-top: 1rem !important;
        border-radius: 14px;
    }
    .footer {
        padding: 1.2rem 0 !important;
        margin-top: 1.5rem !important;
        font-size: 0.8rem;
    }
    .modal-body { padding: 1rem; }
    .alert { border-radius: 12px; }

    /* 2.5 卡片栅格：手机端统一两列（首页功能入口） */
    .row.cards-grid > [class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
        margin-bottom: 0.85rem !important;
    }

    /* 2.6 表格：手机端可横向滑动，字号与内边距收敛 */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
        border-radius: 12px;
        /* 右侧渐隐提示“可横向滑动” */
        background:
            linear-gradient(to right, #fff 30%, rgba(255,255,255,0)),
            linear-gradient(to right, rgba(255,255,255,0), #fff 70%) 100% 0,
            radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.14), transparent),
            radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.14), transparent) 100% 0;
        background-repeat: no-repeat;
        background-size: 40px 100%, 40px 100%, 16px 100%, 16px 100%;
        background-attachment: local, local, scroll, scroll;
    }
    table.table { font-size: 0.85rem; margin-bottom: 0; }
    table.table th,
    table.table td { padding: 0.55rem 0.7rem; vertical-align: middle; }

    /* 2.7 入校码（电子通行证）在小屏的适配 */
    .pass-code-value {
        font-size: 2.6rem;
        letter-spacing: 0.45rem;
    }
    .pass-photo-wrap { max-width: 230px; }
    .pass-photo { border-width: 3px; border-radius: 14px; }
    .pass-clock-time { font-size: 2.3rem; }
    .pass-car-plate .cpl-number { font-size: 1.4rem; letter-spacing: 0.14rem; }
    .pass-name { font-size: 1.3rem; }
    .pass-body { padding: 1rem; }
    .modal-fullscreen-sm-down .modal-content { border-radius: 0; }

    /* 2.8 底部吸底操作条（表单提交等在手机上常驻手指可达区） */
    .sticky-actions {
        position: sticky;
        bottom: 0;
        z-index: 40;
        background: rgba(255, 255, 255, 0.94);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        margin: 0 -1rem -1rem;
        padding: 0.7rem 0.85rem calc(0.7rem + env(safe-area-inset-bottom, 0));
        border-top: 1px solid #e9ecef;
        box-shadow: 0 -6px 18px rgba(15, 23, 42, 0.08);
    }
    .sticky-actions .btn {
        width: 100%;
        min-height: 50px;
        font-size: 1.05rem;
    }
}

/* 超小屏（<400px）：进一步压缩入校码等大字号 */
@media (max-width: 400px) {
    .pass-code-value { font-size: 2.1rem; letter-spacing: 0.28rem; }
    .pass-clock-time { font-size: 2rem; }
    .pass-car-plate .cpl-number { font-size: 1.25rem; letter-spacing: 0.1rem; }
    .header h1 { font-size: 1.15rem; }
}

/* ---------- 3. 后台管理：手机端抽屉式导航 ---------- */
@media (max-width: 767.98px) {

    .admin-body .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 80% !important;
        max-width: 300px;
        min-height: 100vh;
        z-index: 1085;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transform: translateX(-105%);
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 4px 0 30px rgba(0, 0, 0, 0.35);
        padding-top: calc(1rem + env(safe-area-inset-top, 0));
    }
    .admin-body.nav-open .sidebar {
        transform: translateX(0);
    }
    /* 抽屉打开时的遮罩 */
    .admin-body .admin-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.5);
        z-index: 1080;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.28s ease, visibility 0.28s ease;
    }
    .admin-body.nav-open .admin-backdrop {
        opacity: 1;
        visibility: visible;
    }
    /* 主内容区在手机端占满整行 */
    .admin-body .col-md-10 {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    /* 顶部白色标题栏给汉堡按钮让位 */
    .admin-body .header {
        padding-left: 3.7rem !important;
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
        margin-bottom: 0.75rem !important;
    }
    .admin-body .header h2 { font-size: 1.15rem; margin-bottom: 0; }
    .admin-body .header p { font-size: 0.8rem; }
    /* 统计卡片在手机端两列 */
    .admin-body .stat-card { margin-bottom: 0.85rem; }
}

/* 汉堡菜单按钮（由 mobile.js 注入，仅在后台出现） */
.admin-nav-toggle {
    position: fixed;
    top: calc(0.7rem + env(safe-area-inset-top, 0));
    left: 0.7rem;
    z-index: 1090;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    color: #fff;
    font-size: 1.3rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.admin-nav-toggle:active { transform: scale(0.94); }

/* 桌面端隐藏汉堡按钮与遮罩 */
@media (min-width: 768px) {
    .admin-nav-toggle { display: none; }
    .admin-body .admin-backdrop { display: none; }
}

/* ---------- 4. 首页功能入口卡片：手机端两列紧凑排布 ---------- */
@media (max-width: 767.98px) {
    .cards-grid .card {
        height: 100%;
    }
    .cards-grid .card-body {
        padding: 1.1rem 0.55rem;
    }
    .cards-grid .card-icon {
        font-size: 2rem !important;
        margin-bottom: 0.5rem !important;
    }
    .cards-grid .card-title {
        font-size: 1rem;
        margin-bottom: 0.4rem;
    }
    .cards-grid .card-text {
        font-size: 0.75rem;
        margin-bottom: 0.8rem;
        line-height: 1.4;
    }
    .cards-grid .btn {
        width: 100%;
        min-height: 42px;
        font-size: 0.9rem;
        padding: 0.4rem 0.5rem;
    }
    /* 首页“系统功能介绍”在手机端收敛留白 */
    .system-info { margin-top: 1.5rem !important; }
    .system-info .card-body { padding: 1.1rem !important; }
    .section-title { margin-bottom: 1.2rem !important; }
    .section-title h2 { font-size: 1.3rem; }
}

/* ---------- 5. 记录卡片：手机端替代横向滚动表格 ---------- */
.app-item {
    background: #fff;
    border-radius: 14px;
    padding: 0.85rem 0.9rem;
    box-shadow: 0 3px 14px rgba(15, 23, 42, 0.08);
    margin-bottom: 0.85rem;
    border: 1px solid #eef2f7;
}
.app-thumb {
    width: 52px;
    height: 64px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid #e9ecef;
    flex: 0 0 auto;
}
.app-name {
    font-weight: 700;
    color: #0f172a;
    font-size: 1.05rem;
}
.app-sub {
    color: #64748b;
    font-size: 0.85rem;
    margin-top: 0.15rem;
}
.app-item-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.45rem 0;
    border-bottom: 1px dashed #eef2f7;
    font-size: 0.85rem;
}
.app-item-row:last-of-type { border-bottom: none; }
.app-item-row .k { color: #8492a6; white-space: nowrap; }
.app-item-row .v { color: #1e293b; font-weight: 600; text-align: right; word-break: break-word; }