/* 移动端适配样式 */

/* 基础移动端媒体查询 - 当屏幕宽度小于768px时 */
@media (max-width: 767px) {
  body {
    overflow: auto;
  }
  
  /* 调整主布局为垂直方向 */
  .app-container {
    flex-direction: column;
    height: auto;
    overflow: visible;
  }
  
  /* 侧边栏适配 */
  .sidebar {
    width: 100%;
    height: auto;
    max-height: 50vh;
    border-right: none;
    border-bottom: 1px solid var(--background-modifier-border);
    overflow-y: auto;
  }
  
  /* 主内容区域适配 */
  .main-content {
    height: 50vh;
    min-height: 400px;
  }
  
  /* 导航标签适配 */
  .tab {
    padding: 8px 10px;
    font-size: 14px;
  }
  
  /* 详情面板适配 */
  .detail-panel {
    position: fixed;
    width: 90%;
    max-width: none;
    top: 10%;
    right: 5%;
    max-height: 80vh;
  }
  
  /* 添加按钮调整位置 */
  .add-button {
    bottom: 20px;
    right: 20px;
    left: auto;
  }
  
  /* 调整工具栏位置 */
  .toolbar {
    bottom: 80px;
    right: 20px;
  }
  
  /* 调整模态框 */
  .modal {
    padding: 10px 0;
  }
  
  .modal-content {
    width: 95%;
    margin: 10px auto;
    padding: 20px;
    max-height: calc(100vh - 20px);
    min-height: auto;
  }
  
  .modal-form-container {
    max-height: calc(100vh - 200px);
  }
  
  /* 标签页调整 */
  .modal-tabs {
    flex-wrap: wrap;
  }
  
  .modal-tab {
    padding: 8px 10px;
    font-size: 14px;
    margin-bottom: 5px;
  }
}

/* 超小屏幕设备的调整 - 如手机竖屏 */
@media (max-width: 480px) {
  .sidebar-title {
    font-size: 16px;
  }
  
  .sidebar {
    max-height: 40vh;
    width: 100%;
  }
  
  .main-content {
    height: 60vh;
  }
  
  .modal {
    padding: 5px 0;
  }
  
  .modal-content {
    width: 98%;
    padding: 15px;
    margin: 5px auto;
    max-height: calc(100vh - 10px);
  }
  
  .modal-form-container {
    max-height: calc(100vh - 180px);
  }
  
  /* 调整表单元素 */
  .form-group {
    margin-bottom: 12px;
  }
  
  .modal-footer {
    padding: 15px;
    margin-left: -15px;
    margin-right: -15px;
    margin-bottom: -15px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
  }
  
  .modal-title {
    font-size: 1.25rem;
  }
  
  .form-control, .form-select {
    font-size: 16px;
    padding: 12px;
    min-height: 44px;
    border-radius: 8px;
  }
  
  .form-control:focus, .form-select:focus {
    outline: none;
    border-color: var(--text-accent);
    box-shadow: 0 0 0 2px rgba(123, 104, 238, 0.2);
  }
  
  .btn {
    min-height: 44px;
    padding: 12px 20px;
    font-size: 16px;
    border-radius: 8px;
    touch-action: manipulation;
  }
  
  .modal-tab {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
  }
  
  .form-label {
    font-size: 14px;
  }
  
  /* 详情面板上的按钮 */
  .detail-actions button {
    padding: 4px 8px;
    font-size: 12px;
  }
  
  /* 减少详情面板内边距 */
  .detail-panel {
    padding: 10px;
  }
  
  /* 移动端优化的列表项 */
  .list-item {
    padding: 6px 8px;
  }
  
  /* 为工具栏添加背景，使其更明显 */
  .toolbar {
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 8px;
    padding: 5px;
  }
  
  /* 调整连接标签大小 */
  .connection-tag {
    font-size: 12px;
    padding: 3px 6px;
  }
}

/* 处理横屏模式 */
@media (max-width: 767px) and (orientation: landscape) {
  .sidebar {
    max-height: 30vh;
  }
  
  .main-content {
    height: 70vh;
  }
}

/* 添加顶部导航用于触发侧边栏 */
.mobile-nav-toggle {
  display: none;
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1100;
  background-color: var(--interactive-accent);
  color: white;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

@media (max-width: 767px) {
  .mobile-nav-toggle {
    display: flex;
  }
  
  /* 默认隐藏侧边栏 */
  .sidebar {
    display: none;
  }
  
  /* 当有active类时显示侧边栏 */
  .sidebar.active {
    display: flex;
  }
}

/* 添加一些触摸友好的样式调整 */
@media (max-width: 767px) {
  /* 增大点击目标区域 */
  .toolbar-button,
  .detail-close,
  .modal-close {
    min-width: 40px;
    min-height: 40px;
  }
  
  /* 表单控件更大，更易触摸 */
  .form-control,
  .form-select {
    min-height: 44px;
    font-size: 16px; /* 防止iOS自动缩放 */
  }
  
  /* 增大按钮触摸区域 */
  .btn {
    padding: 8px 16px;
  }
}