/* ============================================================
   EduMaster Mobile App UI —— 紧凑原生风格优化
   目标：信息密度高 · 视觉层次清 · 类原生APP体验
   ============================================================ */

/* ---------- 全局基础优化 ---------- */
@media (max-width: 767px) {
    /* 紧凑间距系统 */
    :root {
        --app-padding: 12px;
        --app-gap: 8px;
        --app-radius: 10px;
    }
    
    body {
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
    }
    
    /* 容器紧凑化 */
    .max-w-7xl,
    .max-w-4xl,
    .max-w-3xl {
        padding-left: var(--app-padding) !important;
        padding-right: var(--app-padding) !important;
    }
    
    /* 通用间距压缩 */
    .space-y-4 > * + * { margin-top: 8px !important; }
    .space-y-6 > * + * { margin-top: 10px !important; }
    .space-y-8 > * + * { margin-top: 12px !important; }
    
    .space-x-2 > * + * { margin-left: 6px !important; }
    .space-x-4 > * + * { margin-left: 8px !important; }
    .space-x-6 > * + * { margin-left: 10px !important; }
    
    /* 全局padding压缩 */
    .p-4 { padding: 10px !important; }
    .p-5 { padding: 12px !important; }
    .p-6 { padding: 14px !important; }
    .p-8 { padding: 16px !important; }
    
    .px-4 { padding-left: 12px !important; padding-right: 12px !important; }
    .px-5 { padding-left: 14px !important; padding-right: 14px !important; }
    .px-6 { padding-left: 16px !important; padding-right: 16px !important; }
    .px-8 { padding-left: 18px !important; padding-right: 18px !important; }
    
    .py-2 { padding-top: 6px !important; padding-bottom: 6px !important; }
    .py-3 { padding-top: 8px !important; padding-bottom: 8px !important; }
    .py-4 { padding-top: 10px !important; padding-bottom: 10px !important; }
    .py-5 { padding-top: 12px !important; padding-bottom: 12px !important; }
    .py-6 { padding-top: 14px !important; padding-bottom: 14px !important; }
    .py-8 { padding-top: 16px !important; padding-bottom: 16px !important; }
    
    /* 通用margin压缩 */
    .mt-2 { margin-top: 6px !important; }
    .mt-3 { margin-top: 8px !important; }
    .mt-4 { margin-top: 10px !important; }
    .mt-5 { margin-top: 12px !important; }
    .mt-6 { margin-top: 14px !important; }
    .mt-8 { margin-top: 16px !important; }
    
    .mb-2 { margin-bottom: 6px !important; }
    .mb-3 { margin-bottom: 8px !important; }
    .mb-4 { margin-bottom: 10px !important; }
    .mb-5 { margin-bottom: 12px !important; }
    .mb-6 { margin-bottom: 14px !important; }
    .mb-8 { margin-bottom: 16px !important; }
    
    /* 全局gap压缩 */
    .gap-1 { gap: 4px !important; }
    .gap-2 { gap: 6px !important; }
    .gap-3 { gap: 8px !important; }
    .gap-4 { gap: 10px !important; }
    .gap-5 { gap: 12px !important; }
    .gap-6 { gap: 14px !important; }
    .gap-8 { gap: 16px !important; }
    
    /* 字号紧凑化 */
    .text-xs { font-size: 11px !important; }
    .text-sm { font-size: 12.5px !important; }
    .text-base { font-size: 13.5px !important; }
    .text-lg { font-size: 14.5px !important; }
    .text-xl { font-size: 15.5px !important; }
    .text-2xl { font-size: 17px !important; }
    .text-3xl { font-size: 19px !important; }
    .text-4xl { font-size: 21px !important; }
    .text-5xl { font-size: 24px !important; }
    
    /* 行高紧凑 */
    p, li, td, th, .text-sm, .text-base, .text-lg {
        line-height: 1.4 !important;
    }
}

/* ============================================================
   卡片组件优化
   ============================================================ */
@media (max-width: 767px) {
    /* 通用卡片紧凑 */
    .rounded-xl { border-radius: 10px !important; }
    .rounded-2xl { border-radius: 12px !important; }
    
    /* 卡片内边距 */
    .p-3 { padding: 10px !important; }
    .p-4 { padding: 12px !important; }
    .p-5 { padding: 14px !important; }
    
    /* 卡片标题 */
    .card-title,
    .card-header,
    [class*="card"] h2,
    [class*="card"] h3,
    [class*="card"] h4 {
        font-size: 14px !important;
        margin-bottom: 6px !important;
    }
    
    /* 卡片描述 */
    .card-desc,
    .card-body p,
    [class*="card"] p {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }
}

/* ============================================================
   按钮组件优化
   ============================================================ */
@media (max-width: 767px) {
    /* 按钮紧凑 */
    button,
    .btn,
    [role="button"] {
        padding: 8px 14px !important;
        font-size: 13px !important;
        min-height: 36px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* 按钮组紧凑 */
    .btn-group,
    [class*="btn-group"] {
        gap: 6px !important;
    }
    
    /* 点击反馈增强 */
    button:active,
    .btn:active,
    [role="button"]:active {
        transform: scale(0.96) !important;
        opacity: 0.9 !important;
    }
}

/* ============================================================
   列表组件优化
   ============================================================ */
@media (max-width: 767px) {
    /* 列表项紧凑 */
    .list-item,
    [class*="list"] > div,
    [class*="list"] > a,
    [class*="list"] > li {
        padding: 10px 12px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
    }
    
    /* 列表分隔线 */
    .list-item + .list-item,
    [class*="list"] > div + div,
    [class*="list"] > a + a {
        border-top-width: 1px !important;
    }
    
    /* 列表图标紧凑 */
    .list-item svg,
    .list-item img.icon,
    [class*="list"] svg,
    [class*="list"] img.icon {
        width: 18px !important;
        height: 18px !important;
        flex-shrink: 0 !important;
    }
    
    /* 列表文字紧凑 */
    .list-item .title,
    .list-item .name,
    .list-item h3,
    .list-item h4,
    [class*="list"] .title,
    [class*="list"] .name {
        font-size: 13.5px !important;
        font-weight: 500 !important;
    }
    
    .list-item .desc,
    .list-item .subtitle,
    [class*="list"] .desc,
    [class*="list"] .subtitle {
        font-size: 11.5px !important;
        color: #6b7280 !important;
    }
}

/* ============================================================
   导航栏优化
   ============================================================ */
@media (max-width: 767px) {
    /* 顶部导航紧凑 */
    header,
    .navbar,
    .topbar,
    [class*="header"] {
        padding: 8px var(--app-padding) !important;
        height: 48px !important;
    }
    
    /* 导航logo/标题 */
    .navbar-brand,
    .topbar-logo,
    [class*="logo"] {
        font-size: 15px !important;
        height: 28px !important;
    }
    
    /* 导航图标 */
    .navbar-icon,
    .topbar-icon,
    [class*="header"] svg {
        width: 20px !important;
        height: 20px !important;
    }
    
    /* 面包屑紧凑 */
    .breadcrumb {
        padding: 6px var(--app-padding) !important;
        font-size: 12px !important;
    }
}

/* ============================================================
   表单组件优化
   ============================================================ */
@media (max-width: 767px) {
    /* 输入框紧凑 */
    input,
    textarea,
    select,
    .form-control {
        padding: 8px 12px !important;
        font-size: 14px !important;
        height: 36px !important;
        border-radius: 8px !important;
    }
    
    /* 表单标签紧凑 */
    label,
    .form-label {
        font-size: 12px !important;
        margin-bottom: 4px !important;
        color: #374151 !important;
    }
    
    /* 表单组紧凑 */
    .form-group,
    .mb-3,
    .mb-4 {
        margin-bottom: 10px !important;
    }
    
    /* 表单提示文字 */
    .form-text,
    .form-hint,
    .text-muted {
        font-size: 11px !important;
    }
}

/* ============================================================
   徽章标签优化
   ============================================================ */
@media (max-width: 767px) {
    .badge,
    .tag,
    [class*="badge"],
    [class*="tag"] {
        padding: 2px 8px !important;
        font-size: 10px !important;
        border-radius: 4px !important;
    }
    
    /* 芯片标签 */
    .chip,
    [class*="chip"] {
        padding: 3px 10px !important;
        font-size: 11px !important;
    }
}

/* ============================================================
   网格布局优化（核心）
   ============================================================ */
@media (max-width: 767px) {
    /* 默认单列，特殊网格调整 */
    .grid-cols-2 { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .grid-cols-3 { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .grid-cols-4 { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .grid-cols-5 { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .grid-cols-6 { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    
    /* 卡片网格紧凑 */
    .grid > div,
    .grid > a,
    [class*="grid"] > div {
        padding: 8px !important;
    }
    
    /* 统计卡片紧凑 */
    .stat-card,
    [class*="stat"] {
        padding: 10px !important;
    }
    
    .stat-card .value,
    .stat-card .number,
    [class*="stat"] .value,
    [class*="stat"] .number {
        font-size: 18px !important;
    }
    
    .stat-card .label,
    [class*="stat"] .label {
        font-size: 11px !important;
    }
}

/* ============================================================
   图片媒体优化
   ============================================================ */
@media (max-width: 767px) {
    /* 图片自适应 */
    img,
    .card-img,
    [class*="cover"] img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* 封面图紧凑 */
    .cover-img,
    [class*="cover"] img {
        aspect-ratio: 16/10 !important;
    }
    
    /* 头像紧凑 */
    .avatar,
    [class*="avatar"] img {
        width: 32px !important;
        height: 32px !important;
    }
    
    .avatar-sm,
    [class*="avatar-sm"] img {
        width: 24px !important;
        height: 24px !important;
    }
}

/* ============================================================
   表格优化
   ============================================================ */
@media (max-width: 767px) {
    table {
        font-size: 12px !important;
    }
    
    th, td {
        padding: 6px 8px !important;
    }
    
    /* 横向滚动 */
    .table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================================
   分页优化
   ============================================================ */
@media (max-width: 767px) {
    .pagination,
    [class*="pager"] {
        padding: 8px 0 !important;
        gap: 4px !important;
    }
    
    .pagination button,
    .pagination a,
    [class*="pager"] button,
    [class*="pager"] a {
        padding: 6px 12px !important;
        font-size: 12px !important;
        min-width: 32px !important;
        text-align: center !important;
    }
}

/* ============================================================
   Hero区域优化
   ============================================================ */
@media (max-width: 767px) {
    .hero,
    [class*="hero"],
    section:first-of-type {
        padding: 16px var(--app-padding) !important;
        margin-bottom: 12px !important;
    }
    
    .hero h1,
    .hero h2,
    [class*="hero"] h1,
    [class*="hero"] h2 {
        font-size: 20px !important;
        margin-bottom: 8px !important;
        line-height: 1.3 !important;
    }
    
    .hero p,
    .hero .desc,
    [class*="hero"] p,
    [class*="hero"] .desc {
        font-size: 13px !important;
        margin-bottom: 12px !important;
    }
    
    .hero .actions,
    .hero .buttons,
    [class*="hero"] .actions,
    [class*="hero"] .buttons {
        gap: 8px !important;
    }
}

/* ============================================================
   空状态优化
   ============================================================ */
@media (max-width: 767px) {
    .empty-state,
    [class*="empty"],
    .no-data {
        padding: 30px 16px !important;
    }
    
    .empty-state svg,
    .empty-state img,
    [class*="empty"] svg,
    [class*="empty"] img {
        width: 48px !important;
        height: 48px !important;
        margin-bottom: 12px !important;
    }
    
    .empty-state h3,
    .empty-state h4,
    [class*="empty"] h3,
    [class*="empty"] h4 {
        font-size: 14px !important;
        margin-bottom: 6px !important;
    }
    
    .empty-state p,
    [class*="empty"] p {
        font-size: 12px !important;
    }
}

/* ============================================================
   Tab导航优化
   ============================================================ */
@media (max-width: 767px) {
    .tabs,
    [class*="tab-nav"],
    .nav-tabs {
        overflow-x: auto !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        padding: 0 var(--app-padding) !important;
    }
    
    .tabs::-webkit-scrollbar,
    [class*="tab-nav"]::-webkit-scrollbar {
        display: none !important;
    }
    
    .tab-item,
    [class*="tab"] a,
    [class*="tab"] button {
        padding: 8px 14px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
        min-width: fit-content !important;
    }
    
    .tab-item.active,
    [class*="tab"].active {
        font-weight: 600 !important;
    }
}

/* ============================================================
   搜索栏优化
   ============================================================ */
@media (max-width: 767px) {
    .search-bar,
    [class*="search"],
    .filter-bar {
        padding: 8px var(--app-padding) !important;
        gap: 8px !important;
    }
    
    .search-bar input,
    .search-bar input[type="search"],
    [class*="search"] input {
        padding: 8px 12px 8px 36px !important;
        font-size: 13px !important;
        height: 36px !important;
        border-radius: 18px !important;
        background: #f3f4f6 !important;
        border: none !important;
    }
    
    .search-bar button,
    [class*="search"] button {
        width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* ============================================================
   悬浮按钮优化
   ============================================================ */
@media (max-width: 767px) {
    .fab,
    [class*="fab"],
    .float-btn {
        width: 44px !important;
        height: 44px !important;
        bottom: 72px !important;
        right: 16px !important;
    }
    
    .fab svg,
    .fab i,
    [class*="fab"] svg,
    [class*="fab"] i {
        width: 22px !important;
        height: 22px !important;
    }
}

/* ============================================================
   底部安全区适配（iPhone X+）
   ============================================================ */
@media (max-width: 767px) {
    body {
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    }
    
    /* 底部固定栏适配 */
    .fixed-bottom,
    [class*="bottom-bar"],
    nav[role="navigation"] {
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        height: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ============================================================
   触摸优化（44px最小点击区）
   ============================================================ */
@media (max-width: 767px) {
    a, button, [role="button"], label {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* 链接内边距 */
    a {
        padding: 8px 12px !important;
    }
    
    /* 表单元素点击区 */
    input, select, textarea, button {
        min-height: 44px !important;
    }
}

/* ============================================================
   性能优化（减少重绘）
   ============================================================ */
@media (max-width: 767px) {
    * {
        -webkit-tap-highlight-color: transparent !important;
        -webkit-touch-callout: none !important;
    }
    
    /* 启用硬件加速 */
    .card,
    [class*="card"],
    .item,
    [class*="item"] {
        transform: translateZ(0) !important;
        backface-visibility: hidden !important;
    }
}