/**
 * 移动端深度优化样式
 */

/* 移动端基础优化 */
@media (max-width: 768px) {
    /* 增大触摸目标 */
    .btn, .nav-link, .card, .sensor-card {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* 优化导航栏 */
    .navbar {
        padding: 0.5rem 1rem;
    }
    
    .navbar-brand {
        font-size: 1rem;
    }
    
    .navbar-nav {
        margin-top: 10px;
    }
    
    .navbar-nav .nav-link {
        padding: 10px 15px;
        font-size: 16px;
    }
    
    /* 优化卡片 */
    .card {
        margin-bottom: 15px;
    }
    
    .card-body {
        padding: 15px;
    }
    
    /* 优化表格 */
    .table-responsive {
        font-size: 14px;
    }
    
    .table th,
    .table td {
        padding: 8px 4px;
    }
    
    /* 优化表单 */
    .form-control,
    .form-select {
        font-size: 16px; /* 防止iOS自动缩放 */
        padding: 12px;
    }
    
    .form-label {
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 8px;
    }
    
    /* 优化按钮 */
    .btn {
        padding: 12px 20px;
        font-size: 16px;
        min-height: 44px;
    }
    
    .btn-sm {
        padding: 8px 16px;
        font-size: 14px;
        min-height: 36px;
    }
    
    /* 优化模态框 */
    .modal-dialog {
        margin: 10px;
        max-width: calc(100% - 20px);
    }
    
    .modal-content {
        border-radius: 8px;
    }
    
    .modal-header {
        padding: 15px;
    }
    
    .modal-body {
        padding: 15px;
        max-height: calc(100vh - 200px);
        overflow-y: auto;
    }
    
    /* 优化图表容器 */
    .chart-container {
        height: 250px !important;
    }
    
    /* 优化设备卡片 */
    .device-card {
        margin-bottom: 15px;
    }
    
    .device-header {
        padding: 12px 15px;
        font-size: 14px;
    }
    
    /* 优化传感器网格 */
    .sensor-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    /* 移动端关键指标仪表板优化 */
    #key-metrics-dashboard {
        margin-bottom: 80px; /* 为底部导航栏留出空间 */
    }
    
    #key-metrics-dashboard .card-body {
        padding: 1rem;
    }
    
    #key-metrics-dashboard .col-lg-3 {
        margin-bottom: 1rem;
    }
    
    /* 移动端合规报告按钮优化 */
    #key-metrics-dashboard .btn {
        min-height: 44px;
        font-size: 0.9rem;
        padding: 0.5rem 1rem;
    }
    
    /* 移动端底部导航栏优化 */
    #mobile-bottom-nav {
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        /* 确保底部导航栏完全可见，考虑系统导航栏 */
        padding-bottom: env(safe-area-inset-bottom, 0);
        /* 确保在系统导航栏之上 */
        bottom: 0 !important;
    }
    
    /* 为页面内容添加底部 padding，避免被导航栏遮挡 */
    body {
        padding-bottom: calc(60px + env(safe-area-inset-bottom, 0));
    }
    
    /* 移动端页面容器需要额外底部空间 */
    @media (max-width: 768px) {
        .container,
        .container-fluid {
            padding-bottom: calc(80px + env(safe-area-inset-bottom, 0));
        }
    }
    
    #mobile-bottom-nav .nav-link {
        padding: 0.5rem 0.25rem;
        font-size: 0.7rem;
        /* 确保触摸区域足够大 */
        min-height: 44px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    #mobile-bottom-nav .nav-link i {
        font-size: 1.2rem;
        margin-bottom: 0.25rem;
    }
    
    /* 移动端快速操作面板 */
    .mobile-quick-actions {
        position: fixed;
        bottom: 60px;
        right: 15px;
        z-index: 1020;
    }
    
    .mobile-quick-actions .btn {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    
    /* 移动端传感器配置简化 */
    .sensor-config-mobile .form-group {
        margin-bottom: 1rem;
    }
    
    .sensor-config-mobile .form-control,
    .sensor-config-mobile .form-select {
        font-size: 16px; /* 防止iOS自动缩放 */
        padding: 12px;
    }
    
    /* 移动端配置模板卡片优化 */
    .template-card {
        margin-bottom: 1rem;
    }
    
    .template-card .card-body {
        padding: 1rem;
    }
    
    /* 移动端设备监控筛选优化 */
    #device-filter {
        font-size: 16px;
        padding: 12px;
        min-height: 44px;
    }
    
    /* 移动端告警列表优化 */
    .alert-list-mobile .alert {
        margin-bottom: 0.75rem;
        padding: 1rem;
    }
    
    .alert-list-mobile .alert .btn {
        min-height: 44px;
        padding: 0.5rem 1rem;
    }
}

/* 小屏幕优化（手机） */
@media (max-width: 576px) {
    /* 优化文本 */
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    h4 { font-size: 1.1rem; }
    
    /* 优化间距 */
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .mt-4 {
        margin-top: 1.5rem !important;
    }
    
    .mb-4 {
        margin-bottom: 1.5rem !important;
    }
}

/* 小屏幕优化（手机） */
@media (max-width: 576px) {
    /* 进一步优化 */
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .card-body {
        padding: 10px;
    }
    
    .btn {
        width: 100%;
        margin-bottom: 10px;
    }
    
    .btn-group {
        width: 100%;
    }
    
    .btn-group .btn {
        flex: 1;
    }
    
    /* 隐藏非关键元素 */
    .text-muted.small {
        font-size: 12px;
    }
    
    /* 优化图标大小 */
    .fa-3x {
        font-size: 2em !important;
    }
    
    .fa-2x {
        font-size: 1.5em !important;
    }
}

/* 横屏优化 */
@media (max-width: 768px) and (orientation: landscape) {
    .modal-dialog {
        max-height: 90vh;
    }
    
    .modal-body {
        max-height: calc(90vh - 150px);
    }
}

/* 触摸优化 */
@media (hover: none) and (pointer: coarse) {
    /* 移动设备触摸优化 */
    .btn:hover {
        background-color: initial;
    }
    
    .card:hover {
        transform: none;
    }
    
    /* 增大点击区域 */
    a, button, .clickable {
        padding: 10px;
        margin: -10px;
    }
}

/* 性能优化 */
@media (max-width: 768px) {
    /* 减少动画 */
    * {
        transition-duration: 0.2s !important;
    }
    
    /* 优化图片加载 */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* 懒加载 */
    .lazy-load {
        opacity: 0;
        transition: opacity 0.3s;
    }
    
    .lazy-load.loaded {
        opacity: 1;
    }
}