/* ============================================================
   模型收藏管理系统 · 手机/平板端适配
   仅在桌面版 style.css 之后加载，负责窄屏下的布局优化
   ============================================================ */

/* ---------- 通用 ---------- */
@media (max-width: 900px) {
    html { -webkit-text-size-adjust: 100%; }
    body { overflow-x: hidden; }

    /* 防止 iOS 聚焦输入框时自动放大 */
    .form-group input,
    .form-group select,
    .form-group textarea,
    .settings-row input,
    .filter-search,
    .filter-sort,
    .filter-series,
    input[type="text"],
    input[type="number"] {
        font-size: 16px;
    }

    /* 触控目标最小高度 */
    .header-btn,
    .io-btn,
    .btn { min-height: 38px; }
}

/* ---------- 头部 ---------- */
@media (max-width: 900px) {
    #app-header { position: sticky; top: 0; z-index: 100; }
    .header-content { padding: 8px 10px; gap: 8px; }
    .logo-area { width: 42px; height: 42px; }
    .app-title { font-size: 17px; line-height: 1.3; }
    .app-version { font-size: 10px; padding: 1px 6px; }
    .header-actions { gap: 6px; }
    .header-btn { padding: 7px 10px; font-size: 13px; }
    .header-btn-back,
    .header-btn-forward { display: none; }   /* 手机端使用系统返回，隐藏前进/后退 */
    .header-btn-save { padding: 7px 12px; }
}

/* ---------- 主区域 ---------- */
@media (max-width: 900px) {
    #main-content { padding: 12px; max-width: 100%; }
    .breadcrumb { padding: 6px 12px; font-size: 12px; }
    .page-title { font-size: 20px; margin-bottom: 14px; }

    /* 网格：默认两列 */
    .category-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .subcategory-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .folder-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .item-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

    .category-card-image { height: 96px; }
    .subcategory-card-image { height: 88px; }
    .folder-card-icon { height: 76px; }
    .item-card-image { height: 130px; }
    .add-card { min-height: 120px; }

    .category-card-info { padding: 8px 10px; }
    .category-card-name { font-size: 14px; }
    .category-card-count { font-size: 12px; }
    .item-card-name { font-size: 13px; }
    .item-card-meta { font-size: 11px; gap: 4px; }

    /* 移动端无 hover：操作按钮常显 */
    .category-card-actions,
    .subcategory-card-actions,
    .folder-card-actions,
    .item-card-actions { opacity: 1; }
    .category-card-actions button,
    .subcategory-card-actions button,
    .folder-card-actions button,
    .item-card-actions button { width: 30px; height: 30px; font-size: 13px; }

    /* 列表视图 */
    .list-item { padding: 10px; gap: 10px; }
    .list-item-image { width: 72px; height: 72px; }
    .list-item-name { font-size: 14px; }
}

/* ---------- 筛选栏 ---------- */
@media (max-width: 900px) {
    .filter-bar { flex-direction: column; align-items: stretch; gap: 8px; }
    .filter-search { min-width: 0; font-size: 16px; }
    .filter-sort { min-width: 0; width: 100%; font-size: 16px; }
    .filter-series { max-width: none; width: 100%; font-size: 16px; }
    .filter-btn-group { flex-wrap: wrap; }
    .multi-select-actions { padding: 8px 10px; }
}

/* ---------- 模态框：小屏底部弹层 ---------- */
@media (max-width: 600px) {
    .modal-overlay { padding: 0; align-items: flex-end; }
    .modal-content {
        width: 100%;
        max-width: 100%;
        max-height: 92vh;
        border-radius: 16px 16px 0 0;
    }
    .modal-header { padding: 14px 16px; }
    .modal-header h2 { font-size: 16px; }
    .modal-body { padding: 16px; }
    .modal-footer { padding: 12px 16px; }
    .form-row { flex-direction: column; gap: 0; }

    /* 详情弹层：全屏 */
    .detail-popup-overlay { padding: 0; }
    .detail-popup-content {
        max-width: 100%;
        max-height: 100vh;
        height: 100vh;
        border-radius: 0;
    }
    .detail-image-section { height: 38vh; }
    .detail-info-section { padding: 14px; }
    .detail-info-title { font-size: 20px; }
    .detail-info-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/* ---------- 悬浮按钮与工具栏 ---------- */
@media (max-width: 900px) {
    .floating-add-btn {
        right: 14px;
        bottom: 84px;
        height: 44px;
        padding: 0 18px;
        font-size: 14px;
        border-radius: 22px;
    }
    .io-bar {
        left: 50%;
        transform: translateX(-50%);
        bottom: 22px;
        right: auto;
        justify-content: center;
    }
    .io-btn { padding: 8px 12px; font-size: 12px; }
    .toast { bottom: 90px; max-width: 90vw; }
}

/* ---------- 统计页 ---------- */
@media (max-width: 900px) {
    .stats-section { padding: 14px; }
    .stats-summary { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .stat-card { padding: 14px 10px; }
    .stat-card .stat-value { font-size: 22px; }
    .stats-table-wrap { -webkit-overflow-scrolling: touch; }
    .stats-table { font-size: 12px; }
    .inline-stats-grid { grid-template-columns: 1fr; }
    .bar-label { font-size: 10px; }
    .page-stats-bar { flex-wrap: wrap; }
}

/* ---------- 设置页 ---------- */
@media (max-width: 900px) {
    .settings-section { padding: 16px; margin-bottom: 14px; }
    .settings-row { flex-direction: column; align-items: flex-start; gap: 6px; }
    .settings-row label { width: auto; }
    .settings-row .input-area { width: 100%; }
}

/* ---------- 图片选择器 ---------- */
@media (max-width: 600px) {
    .image-picker-dialog { width: 92vw; }
    .image-picker-btn { padding: 16px 28px; }
}

/* ---------- 安全区（刘海屏） ---------- */
@supports (padding: env(safe-area-inset-bottom)) {
    @media (max-width: 900px) {
        .floating-add-btn { bottom: calc(84px + env(safe-area-inset-bottom)); }
        .io-bar { bottom: calc(22px + env(safe-area-inset-bottom)); }
        .toast { bottom: calc(90px + env(safe-area-inset-bottom)); }
        .modal-content { padding-bottom: env(safe-area-inset-bottom); }
        .detail-popup-content { padding-bottom: env(safe-area-inset-bottom); }
    }
}

/* ---------- 横向小屏（如折叠屏/横屏手机） ---------- */
@media (max-height: 480px) and (max-width: 900px) {
    .header-content { padding: 6px 10px; }
    .logo-area { width: 34px; height: 34px; }
    .app-title { font-size: 15px; }
}