/*
 * Yunxil responsive layout patch.
 * Keeps desktop behavior unchanged and converts the fixed left sidebar into
 * a horizontally scrollable navigation bar on phone-sized screens.
 */
@media (max-width: 768px) {
  html,
  body,
  #app {
    width: 100%;
    height: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .layout-container {
    display: block !important;
    width: 100vw !important;
    min-width: 0 !important;
    --sidebar-width: 100% !important;
    --sidebar-collapsed-width: 100% !important;
    --page-padding: 8px !important;
  }

  .sidebar-container,
  .sidebar-container.collapsed {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    width: 100vw !important;
    height: 60px !important;
    border-right: 0 !important;
    border-bottom: 1px solid #d9dee7 !important;
    overflow: hidden !important;
    z-index: 1000 !important;
  }

  .logo-container {
    display: none !important;
  }

  .sidebar-menu,
  .sidebar-menu.el-menu--collapse {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    height: 60px !important;
    padding: 4px 6px !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    scrollbar-width: none;
  }

  .sidebar-menu::-webkit-scrollbar {
    display: none;
  }

  .sidebar-menu > .el-menu-item {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 126px !important;
    height: 48px !important;
    line-height: 48px !important;
    margin: 2px 4px !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
  }

  .sidebar-menu > .el-menu-item .el-icon {
    margin-right: 6px !important;
  }

  .sidebar-menu.el-menu--collapse > .el-menu-item {
    min-width: 52px !important;
    width: 52px !important;
    padding: 0 14px !important;
  }

  .sidebar-menu.el-menu--collapse > .el-menu-item .el-icon {
    margin: 0 !important;
  }

  .main-container,
  .main-container.collapsed {
    width: 100% !important;
    min-width: 0 !important;
    height: 100vh !important;
    margin-left: 0 !important;
    padding-top: 60px !important;
    box-sizing: border-box !important;
  }

  .header-container {
    min-height: 48px !important;
    height: 48px !important;
    padding: 0 12px !important;
  }

  .header-right {
    gap: 12px !important;
  }

  .content-wrapper {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .breadcrumb-container {
    padding: 9px 10px !important;
    white-space: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  .page-content {
    min-width: 0 !important;
    padding: 8px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .pair-row {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .pair-row > .el-col {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 10px !important;
  }

  .el-card {
    width: 100% !important;
    min-width: 0 !important;
  }

  .el-card__header {
    padding: 11px 12px !important;
  }

  .el-card__body {
    min-width: 0 !important;
    padding: 10px !important;
    overflow-x: auto !important;
  }

  .card-header {
    flex-wrap: wrap !important;
    gap: 6px !important;
    font-size: 15px !important;
  }

  .el-table {
    min-width: 560px !important;
    font-size: 13px !important;
  }

  .chart-container {
    width: 100% !important;
    min-width: 0 !important;
    height: 300px !important;
  }

  .info-note {
    margin-top: 8px !important;
    padding: 9px 10px !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
  }
}

@media (max-width: 480px) {
  .sidebar-menu > .el-menu-item {
    min-width: 118px !important;
    padding: 0 10px !important;
  }

  .page-content {
    padding: 6px !important;
  }

  .el-card__body {
    padding: 8px !important;
  }

  .el-table {
    min-width: 520px !important;
  }

  .chart-container {
    height: 280px !important;
  }
}

/*
 * Nested Element Plus rows used by the leader and sector pages need an
 * explicit min-width reset so their table contents scroll inside the card
 * instead of widening the whole phone viewport.
 */
@media (max-width: 768px) {
  .page-content .el-row {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .page-content .el-row > .el-col {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 10px !important;
    box-sizing: border-box !important;
  }

  .leader-container,
  .sector-container,
  .leader-container > .el-card,
  .sector-container > .el-row {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .leader-container > .el-card {
    overflow: hidden !important;
  }

  .leader-container > .el-card > .el-card__body {
    overflow-x: hidden !important;
  }

  .leader-container .el-row .el-card__body,
  .sector-container .el-card__body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
  }

  .leader-container .sub-header {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
}