/* 移动端增强样式 - 优化的响应式断点 */

/* 导航栏触摸优化 - 超小屏幕 */
@media (max-width: 480px) {

  /* 导航按钮触摸目标优化 */
  nav button,
  nav .nav-link,
  nav .nav-button {
    padding: 14px 12px;
    font-size: 14px;
  }

  /* 移动菜单切换按钮 */
  #mobile-menu-button {
    min-height: 48px;
    min-width: 48px;
    padding: 12px;
  }

  /* 搜索和暗色模式按钮 */
  .search-trigger,
  .dark-mode-toggle {
    min-height: 44px;
    min-width: 44px;
    padding: 10px;
  }
}

/* 导航栏触摸优化 - 中等移动设备 */
@media (min-width: 481px) and (max-width: 768px) {

  /* 导航按钮触摸目标优化 */
  nav button,
  nav .nav-link,
  nav .nav-button {
    padding: 12px 16px;
    font-size: 15px;
  }

  /* 移动菜单切换按钮 */
  #mobile-menu-button {
    min-height: 44px;
    min-width: 44px;
    padding: 10px;
  }
}

/* 导航栏触摸优化 - 平板设备 */
@media (min-width: 769px) and (max-width: 1023.98px) {

  /* 导航按钮触摸目标优化 */
  nav button,
  nav .nav-link,
  nav .nav-button {
    min-height: 40px;
    min-width: 40px;
    padding: 10px 14px;
    font-size: 16px;
  }
}

/* 触摸友好的交互 */
@media (max-width: 768px) {

  /* 增加点击区域 */
  .benchmark-table th {
    min-height: 2.5rem;
    display: table-cell;
    vertical-align: middle;
  }

  /* 改善触摸滚动 */
  .benchmark-table-container,
  .filter-chips-container {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }

  /* 防止意外缩放 */
  input,
  select,
  textarea {
    font-size: 16px !important;
    /* 防止iOS自动缩放 */
  }

  /* 改善按钮的触摸反馈 */
  .action-button:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }

  /* 表格行的触摸反馈 */
  .benchmark-table tbody tr:active {
    background-color: #e0e7ff;
    transition: background-color 0.1s ease;
  }

  /* 过滤器芯片的触摸反馈 */
  .filter-chip:active {
    transform: scale(0.95);
    transition: transform 0.1s ease;
  }

  /* 分页按钮触摸反馈 */
  .pagination-controls button:active:not(:disabled) {
    transform: scale(0.95);
    background-color: #4f46e5;
    color: white;
  }
}

/* 横屏模式优化 */
@media (max-width: 768px) and (orientation: landscape) {
  .chart-container {
    height: 200px;
    /* 横屏时减少图表高度 */
  }

  .h-fit.sticky.top-4 {
    margin-bottom: 0.5rem;
    /* 减少过滤器区域间距 */
    padding: 0.75rem;
  }
}

/* 超小屏幕优化 (小于480px) */
@media (max-width: 480px) {

  /* 进一步压缩表格 */
  .benchmark-table {
    font-size: 0.65rem;
    min-width: 520px;
  }

  .benchmark-table th,
  .benchmark-table td {
    padding: 3px 4px;
    font-size: 0.65rem;
  }

  /* 图表高度进一步减少 */
  .chart-container {
    height: 220px;
  }

  /* 过滤器芯片更紧凑 */
  .filter-chip {
    font-size: 0.6rem;
    padding: 0.15rem 0.3rem;
    margin: 0.05rem 0.15rem 0.05rem 0;
  }

  /* Task type toggle mobile optimization */
  .task-type-toggle-container {
    padding: 0.125rem;
    border-width: 1px;
  }

  .task-type-toggle {
    padding: 0.5rem 0.75rem;
    font-size: 0.6875rem;
    min-height: 2rem;
  }

  .task-type-toggle i {
    font-size: 0.625rem;
  }

  /* 按钮文字可能需要隐藏图标优先 */
  .action-button .hidden.sm\:inline {
    display: none !important;
  }

  .action-button .sm\:hidden {
    display: inline !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    color: inherit !important;
    letter-spacing: 0.025em;
  }

  /* 确保导出和视图按钮文字可见 */
  .export-button,
  .view-toggle-button {
    min-width: 3.5rem;
    font-weight: 600;
  }

  .export-button span,
  .view-toggle-button span {
    font-size: 0.6rem !important;
    font-weight: 700 !important;
    color: inherit !important;
  }

  .export-button.active span,
  .view-toggle-button.active span {
    color: white !important;
  }

  /* 分页控件更紧凑 */
  .pagination-controls {
    padding: 0 0.5rem;
  }

  .pagination-controls button {
    padding: 0.4rem 0.6rem;
    font-size: 0.7rem;
    min-width: 2rem;
  }
}

/* 可访问性增强 */
@media (max-width: 768px) {

  /* 确保焦点可见 */
  .action-button:focus,
  .benchmark-table th:focus,
  .filter-chip:focus {
    outline: 2px solid #4f46e5;
    outline-offset: 2px;
  }

  /* 改善对比度 */
  .benchmark-table th {
    color: #1e293b;
    font-weight: 700;
  }

  /* 确保文字可读性 */
  .benchmark-table td {
    color: #334155;
    line-height: 1.4;
  }
}

/* 加载状态优化 */
@media (max-width: 768px) {
  .loading-spinner {
    width: 1.5rem;
    height: 1.5rem;
  }

  .loading-text {
    font-size: 0.875rem;
    margin-top: 0.5rem;
  }
}

/* 错误状态优化 */
@media (max-width: 768px) {
  .error-message {
    padding: 1rem;
    font-size: 0.875rem;
    margin: 0.5rem;
    border-radius: 0.375rem;
  }
}

/* Datasets Page Mobile Filter Drawer Styles */
@media (max-width: 1023.98px) {

  /* lg breakpoint in Tailwind */
  .desktop-filters {
    display: none;
  }

  #open-filter-drawer-btn-datasets {
    display: none;
    /* Hide original mobile filter button, as it's now in the sticky header */
  }

  /* Styles for the new sticky header */
  #mobile-sticky-controls {
    display: flex;
    /* Ensure it's visible on mobile */
    position: sticky;
    top: 64px;
    /* Adjust for fixed navbar height */
    background-color: white;
    /* Or your desired background */
    z-index: 10;
    /* Lower than navigation bar (z-index: 1000) */
    padding: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }



  #mobile-sticky-controls #dataset-search-mobile {
    margin-bottom: 0;
    /* Remove bottom margin if any from original placement */
  }

  #mobile-sticky-controls #open-filter-drawer-btn-datasets-mobile {
    display: inline-flex;
    /* Show the new filter button in the sticky header */
  }

  /* Hide the original desktop search and sort controls on mobile */
  .lg\:w-3\/4>.bg-white.p-4.rounded-lg.shadow-md.mb-6.hidden.lg\:block .flex.flex-col.sm\:flex-row {
    display: none;
  }
}

/* Ensure the sticky header is hidden on larger screens */
@media (min-width: 1024px) {
  #mobile-sticky-controls {
    display: none;
  }

  #open-filter-drawer-btn-datasets {
    display: none;
    /* Hide the button on desktop */
  }

  #open-filter-drawer-btn-datasets-mobile {
    display: none;
    /* Hide the mobile specific filter button on desktop */
  }

  /* Ensure original desktop controls are visible */
  .lg\:w-3\/4>.bg-white.p-4.rounded-lg.shadow-md.mb-6.hidden.lg\:block {
    display: block;
    /* Overrides the inline 'hidden' potentially added by JS or other CSS */
  }

  .lg\:w-3\/4>.bg-white.p-4.rounded-lg.shadow-md.mb-6.hidden.lg\:block .flex.flex-col.sm\:flex-row {
    display: flex;
    /* Or 'block' or 'grid' depending on its original display type */
  }
}

body.benchmarks-page .mobile-sidebar {
  position: fixed;
  top: 64px;
  /* Navbar height */
  left: 0;
  height: calc(100% - 64px);
  /* Full height below navbar */
  background-color: white;
  padding: 1.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  z-index: 50;
  transition: transform 0.3s ease-in-out;
  transform: translateX(-100%);
  overflow-y: auto;
  /* Allow sidebar to scroll if content is long */
}

body.benchmarks-page .mobile-sidebar.active {
  transform: translateX(0);
}

body.benchmarks-page .mobile-sidebar.hidden {
  display: none;
}

/* Hide the overlay for benchmarks page as per user requirement */
body.benchmarks-page .filter-drawer-overlay {
  display: none !important;
}

#dataset-filter-count-badge.hidden {
  display: none !important;
}