/* =====================================================
   HKS FEL 移动端响应式样式
   ===================================================== */

/* 平板 (768px - 1024px) */
@media (max-width: 1024px) {
    .container {
        padding: 0 15px;
    }
    
    .card-custom {
        margin-bottom: 15px;
    }
    
    .stat-card {
        padding: 15px;
    }
    
    .stat-card h2 {
        font-size: 1.5rem;
    }
    
    .table-responsive {
        font-size: 0.9rem;
    }
    
    .btn {
        padding: 0.4rem 0.8rem;
    }
}

/* 手机横屏 (481px - 767px) */
@media (max-width: 767px) {
    /* 导航栏 */
    .navbar-brand {
        font-size: 1rem;
    }
    
    /* 统计卡片 */
    .row > [class*="col-"] {
        margin-bottom: 10px;
    }
    
    .stat-card {
        padding: 12px;
        text-align: center;
    }
    
    .stat-card h2 {
        font-size: 1.3rem;
    }
    
    .stat-card p {
        font-size: 0.8rem;
    }
    
    .stat-card .icon {
        display: none;
    }
    
    /* Tab 导航 */
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .nav-tabs .nav-link {
        white-space: nowrap;
        padding: 0.5rem 0.8rem;
        font-size: 0.85rem;
    }
    
    .nav-tabs .nav-link i {
        display: none;
    }
    
    /* 表格 */
    .table {
        font-size: 0.8rem;
    }
    
    .table th, .table td {
        padding: 0.5rem 0.3rem;
        white-space: nowrap;
    }
    
    /* 隐藏次要列 */
    .table .hide-mobile {
        display: none !important;
    }
    
    /* 按钮组 */
    .btn-group {
        flex-direction: column;
        width: 100%;
    }
    
    .btn-group .btn {
        margin-bottom: 5px;
        width: 100%;
    }
    
    /* 表单 */
    .form-control {
        font-size: 16px; /* 防止 iOS 缩放 */
    }
    
    /* Modal */
    .modal-dialog {
        margin: 10px;
    }
    
    .modal-body {
        padding: 15px;
    }
    
    /* 卡片 */
    .card-header {
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
    }
    
    .card-body {
        padding: 0.75rem;
    }
    
    /* 操作按钮 */
    .action-buttons .btn {
        padding: 0.25rem 0.4rem;
        font-size: 0.75rem;
    }
    
    /* 分页 */
    .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .pagination .page-link {
        padding: 0.3rem 0.6rem;
    }
}

/* 手机竖屏 (最大 480px) */
@media (max-width: 480px) {
    body {
        font-size: 14px;
    }
    
    /* 头部 */
    .page-header h1 {
        font-size: 1.2rem;
    }
    
    .page-header p {
        font-size: 0.8rem;
    }
    
    /* 统计卡片网格 */
    .stats-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .stat-card {
        padding: 10px;
    }
    
    .stat-card h2 {
        font-size: 1.1rem;
    }
    
    /* 表格滚动 */
    .table-responsive {
        margin: 0 -15px;
        padding: 0 15px;
    }
    
    /* 完全隐藏某些列 */
    .table .col-email,
    .table .col-phone,
    .table .col-date {
        display: none;
    }
    
    /* 操作按钮 */
    .table .action-col {
        min-width: 80px;
    }
    
    .action-buttons {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }
    
    /* 搜索框 */
    .search-box {
        width: 100%;
        margin-bottom: 10px;
    }
    
    /* 过滤下拉 */
    .filter-select {
        width: 100%;
        margin-bottom: 10px;
    }
    
    /* 通知配置 */
    .notification-config .row {
        flex-direction: column;
    }
    
    .notification-config .col-md-4,
    .notification-config .col-md-6 {
        width: 100%;
        margin-bottom: 10px;
    }
}

/* 工具类 */
.hide-mobile {
    display: none !important;
}

@media (min-width: 768px) {
    .hide-mobile {
        display: table-cell !important;
    }
    
    .show-mobile-only {
        display: none !important;
    }
}

/* 触摸友好的按钮 */
@media (pointer: coarse) {
    .btn {
        min-height: 44px;
        min-width: 44px;
    }
    
    .btn-sm {
        min-height: 36px;
        min-width: 36px;
    }
    
    .form-control {
        min-height: 44px;
    }
    
    .nav-link {
        padding: 12px 16px;
    }
}

/* 安全区域 (iPhone X+) */
@supports (padding: max(0px)) {
    .container {
        padding-left: max(15px, env(safe-area-inset-left));
        padding-right: max(15px, env(safe-area-inset-right));
    }
    
    .fixed-bottom {
        padding-bottom: max(10px, env(safe-area-inset-bottom));
    }
}