/* ========================================
   SmartStor 移动端适配样式
   版本: 1.0.0
   更新: 2026-03-08
   不修改AdminLTE源文件,仅覆盖和扩展
   ======================================== */

/* 1. 全局移动端优化 */
@media (max-width: 768px) {
  /* 禁用点击高亮 */
  * {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
  }

  /* 优化字体大小 */
  body {
    font-size: 14px;
    line-height: 1.6;
  }

  /* 增大点击区域 */
  a, button, .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* 2. AdminLTE侧边栏移动端优化 */
@media (max-width: 768px) {
  /* 侧边栏默认隐藏 */
  .main-sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }

  /* 侧边栏展开状态 */
  body.sidebar-open .main-sidebar {
    transform: translateX(0);
  }

  /* 添加遮罩层 */
  body.sidebar-open::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1039;
  }

  /* 内容区域全宽 */
  .content-wrapper {
    margin-left: 0 !important;
    padding: 10px;
  }

  /* 顶部导航优化 */
  .main-header {
    margin-left: 0 !important;
  }

  /* 侧边栏菜单项优化 */
  .nav-sidebar .nav-link {
    padding: 12px 15px;
    font-size: 15px;
  }

  .nav-sidebar .nav-icon {
    font-size: 18px;
    margin-right: 10px;
  }
}

/* 3. 卡片和表格移动端优化 */
@media (max-width: 768px) {
  /* 卡片优化 */
  .card {
    margin-bottom: 15px;
  }

  .card-body {
    padding: 12px;
  }

  /* 表格横向滚动 */
  .table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table {
    min-width: 600px;
  }

  /* 价格表优化 */
  .price-table {
    font-size: 12px;
  }

  .price-table th,
  .price-table td {
    padding: 8px 5px;
  }
}

/* 4. 栅格系统移动端优化 */
@media (max-width: 768px) {
  /* 强制单列布局 */
  .row > [class*="col-"] {
    width: 100%;
    margin-bottom: 15px;
  }

  /* Grid布局优化 */
  .grid {
    grid-template-columns: 1fr !important;
    gap: 15px;
  }
}

/* 5. 表单移动端优化 */
@media (max-width: 768px) {
  .form-group {
    margin-bottom: 15px;
  }

  .form-control {
    font-size: 16px; /* 防止iOS自动缩放 */
    padding: 10px;
  }

  .btn {
    padding: 12px 20px;
    font-size: 15px;
    width: 100%;
    margin-bottom: 10px;
  }
}

/* 6. 首页特殊优化 */
@media (max-width: 768px) {
  /* Banner优化 */
  .banner {
    padding: 60px 20px;
  }

  .banner h1 {
    font-size: 28px;
    line-height: 1.3;
  }

  .banner p {
    font-size: 16px;
  }

  /* Section标题优化 */
  section {
    padding: 40px 15px;
  }

  section h2 {
    font-size: 24px;
  }
}

/* 7. 小屏幕优化 (≤480px) */
@media (max-width: 480px) {
  body {
    font-size: 13px;
  }

  .banner h1 {
    font-size: 24px;
  }

  .banner p {
    font-size: 14px;
  }

  .banner .btn {
    padding: 10px 18px;
    font-size: 14px;
  }

  section h2 {
    font-size: 20px;
  }

  .card {
    padding: 15px;
  }
}

/* 8. 横屏优化 */
@media (max-width: 768px) and (orientation: landscape) {
  .banner {
    padding: 40px 20px;
  }

  .main-sidebar {
    max-height: 100vh;
    overflow-y: auto;
  }
}

/* 9. 触控优化 */
@media (hover: none) and (pointer: coarse) {
  /* 移除hover效果,使用active */
  .card:hover {
    transform: none;
  }

  .card:active {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  }

  .btn:hover {
    transform: none;
  }

  .btn:active {
    transform: scale(0.98);
  }
}