/* 
 * 📱 移动端全局适配样式
 * 优先级最高,覆盖所有页面的默认样式
 */

@media (max-width: 768px) {
  /* ========== 全局布局 ========== */
  * {
    box-sizing: border-box;
  }
  
  html, body {
    width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
  }
  
  body {
    font-size: 14px;
  }
  
  /* ========== 顶部导航栏 ========== */
  .topbar {
    height: 50px;
    padding: 0 8px;
    flex-wrap: nowrap;
  }
  
  .topbar .brand {
    font-size: 14px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  
  .topbar .nav {
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    display: flex;
    gap: 4px;
    padding: 0 4px;
  }
  
  .topbar .nav::-webkit-scrollbar {
    display: none;
  }
  
  .topbar .tab-btn {
    padding: 6px 10px !important;
    font-size: 12px !important;
    white-space: nowrap;
    flex-shrink: 0;
    border-radius: 6px;
  }
  
  .topbar-right {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
  }
  
  .system-time {
    display: none; /* 手机端隐藏时钟节省空间 */
  }
  
  .user-info {
    font-size: 12px;
    padding: 4px 8px;
  }
  
  .user-icon {
    font-size: 14px;
  }
  
  .btn-logout {
    padding: 4px 8px !important;
    font-size: 11px !important;
  }
  
  .btn-logout span {
    display: none; /* 只显示图标 */
  }
  
  /* ========== 容器 ========== */
  .container,
  .page-container {
    padding: 8px !important;
    width: 100% !important;
    margin: 0 !important;
  }
  
  /* ========== KPI统计卡片 ========== */
  .kpi-stats {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  
  .kpi-card {
    padding: 10px 8px !important;
    min-height: auto !important;
  }
  
  .kpi-number {
    font-size: 20px !important;
  }
  
  .kpi-label {
    font-size: 11px !important;
  }
  
  /* ========== 设备网格 ========== */
  .devices-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 0 !important;
  }
  
  .device-card {
    padding: 12px !important;
    margin-bottom: 8px !important;
  }
  
  .device-card-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  
  .device-card-header h3 {
    font-size: 15px !important;
  }
  
  .device-status-badge {
    font-size: 11px !important;
    padding: 3px 10px !important;
  }
  
  .device-params {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  
  .param-item {
    padding: 8px !important;
  }
  
  .param-label {
    font-size: 11px !important;
  }
  
  .param-value {
    font-size: 18px !important;
  }
  
  .param-unit {
    font-size: 10px !important;
  }
  
  /* ========== 报警中心 ========== */
  .alarm-container {
    flex-direction: column !important;
    height: auto !important;
  }
  
  .stats-panel {
    width: 100% !important;
    max-height: 300px !important;
    border-right: none !important;
    border-bottom: 1px solid #e5e7eb !important;
  }
  
  .content-panel {
    padding: 12px 8px !important;
  }
  
  /* ========== 策略控制 ========== */
  .strategy-container {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 8px 10px !important;
  }
  
  .device-list-panel {
    width: 100% !important;
    max-height: 180px !important;
  }
  
  .matrix-list {
    width: 100% !important;
    max-height: 300px !important;
  }
  
  .detail-panel {
    width: 100% !important;
  }
  
  /* ========== 趋势分析 ========== */
  .history-query-layout {
    flex-direction: column !important;
  }
  
  .history-left-panel {
    width: 100% !important;
    min-height: auto !important;
  }
  
  .history-right-content {
    width: 100% !important;
  }
  
  /* ========== Element Plus组件优化 ========== */
  .el-tabs__item {
    padding: 0 10px !important;
    font-size: 12px !important;
  }
  
  .el-form--inline .el-form-item {
    display: block !important;
    margin-right: 0 !important;
    margin-bottom: 12px !important;
  }
  
  .el-input,
  .el-select,
  .el-date-editor {
    width: 100% !important;
  }
  
  .el-input__inner {
    font-size: 14px !important;
  }
  
  .el-button {
    font-size: 13px !important;
    padding: 8px 12px !important;
  }
  
  .el-table {
    font-size: 11px !important;
  }
  
  .el-table th,
  .el-table td {
    padding: 6px 4px !important;
    font-size: 11px !important;
  }
  
  .el-pagination {
    padding: 12px 0 !important;
  }
  
  .el-pager li {
    min-width: 28px !important;
    height: 28px !important;
    line-height: 28px !important;
    font-size: 12px !important;
  }
  
  .el-card {
    margin-bottom: 12px !important;
  }
  
  .el-card__header {
    padding: 12px !important;
  }
  
  .el-card__body {
    padding: 12px !important;
  }
  
  /* ========== 图表优化 ========== */
  .chart-container,
  [id*="chart"],
  [class*="chart"] {
    height: 300px !important;
    min-height: 300px !important;
  }
  
  /* ========== 模态框 ========== */
  .modal-panel,
  .modal-content,
  .el-dialog {
    width: 95% !important;
    max-width: 95% !important;
    margin: 0 auto !important;
  }
  
  .modal-header {
    padding: 12px !important;
  }
  
  .modal-header h2 {
    font-size: 16px !important;
  }
  
  .modal-body {
    padding: 12px !important;
    max-height: calc(100vh - 150px) !important;
    overflow-y: auto !important;
  }
  
  /* ========== 表格容器滚动 ========== */
  .table-container,
  .el-table__body-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  /* ========== 按钮组优化 ========== */
  .filter-actions,
  .export-actions,
  .header-actions,
  .detail-actions {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  
  .filter-actions button,
  .export-actions button {
    flex: 1 1 calc(50% - 3px) !important;
    min-width: 100px !important;
  }
  
  /* ========== 卡片样式 ========== */
  .card {
    margin: 8px 0 !important;
    border-radius: 8px !important;
  }
  
  .card-header {
    padding: 12px !important;
  }
  
  .card-header h2 {
    font-size: 15px !important;
  }
  
  /* ========== 防止横向滚动 ========== */
  .overview-content,
  .tab-section,
  .content-section {
    width: 100% !important;
    overflow-x: hidden !important;
  }
  
  /* ========== 文字大小调整 ========== */
  h1 {
    font-size: 18px !important;
  }
  
  h2 {
    font-size: 16px !important;
  }
  
  h3 {
    font-size: 14px !important;
  }
  
  h4 {
    font-size: 13px !important;
  }
  
  /* ========== 间距优化 ========== */
  .filter-section,
  .stats-section {
    margin-bottom: 12px !important;
    padding: 12px !important;
  }
  
  /* ========== 隐藏不必要元素 ========== */
  .desktop-only {
    display: none !important;
  }
}

/* ========== 超小屏幕(iPhone SE等) ========== */
@media (max-width: 375px) {
  .topbar {
    height: 48px;
  }
  
  .topbar .brand {
    font-size: 13px;
  }
  
  .topbar .tab-btn {
    padding: 5px 8px !important;
    font-size: 11px !important;
  }
  
  .kpi-number {
    font-size: 18px !important;
  }
  
  .param-value {
    font-size: 16px !important;
  }
  
  .device-params {
    grid-template-columns: 1fr !important;
  }
}