
/* V102.03.4 — clean Components section layout */
@media (min-width:1181px){

  /* Keep the section readable and prevent controls/text from colliding. */
  .left-panel .section:has(#componentSelect){
    gap:0!important;
  }

  /* Heading/subheading: one clean compact block. */
  .left-panel .section:has(#componentSelect) .section-title{
    margin:0 0 2px!important;
    font-size:11px!important;
    line-height:1.15!important;
  }

  .left-panel .section:has(#componentSelect) > .helper:first-of-type{
    margin:0 0 7px!important;
    font-size:9px!important;
    line-height:1.15!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  /* Dropdown + Add button on one stable row. */
  .left-panel .component-add{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 62px!important;
    gap:7px!important;
    align-items:center!important;
    margin:0 0 6px!important;
  }

  .left-panel #componentSelect{
    width:100%!important;
    min-width:0!important;
    height:34px!important;
    min-height:34px!important;
    padding:4px 28px 4px 9px!important;
    font-size:10.5px!important;
    font-weight:800!important;
    line-height:1!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  .left-panel #addComponentBtn{
    width:62px!important;
    min-width:62px!important;
    max-width:62px!important;
    height:34px!important;
    min-height:34px!important;
    padding:3px 4px!important;
    margin:0!important;
    border-radius:7px!important;
    font-size:9px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }

  /* Instruction line below controls: no overlap with Selected Components heading. */
  .left-panel .section:has(#componentSelect) .component-add + .helper{
    margin:0 0 7px!important;
    padding:0!important;
    font-size:8.5px!important;
    line-height:1.22!important;
    min-height:20px!important;
    max-height:22px!important;
    overflow:hidden!important;
  }

  /* Selected Components heading/count: clean aligned row. */
  .left-panel .selected-head,
  .left-panel .selected-components-head,
  .left-panel .section:has(#componentSelect) [class*="selected"][class*="head"]{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:8px!important;
    margin:0 0 5px!important;
    min-height:20px!important;
  }

  /* Generic fallback for the count element if markup is simple. */
  .left-panel .section:has(#componentSelect) [data-selected-count],
  .left-panel .section:has(#componentSelect) .selected-count,
  .left-panel .section:has(#componentSelect) #selectedCount{
    margin-left:auto!important;
    flex:0 0 auto!important;
    min-width:18px!important;
    text-align:right!important;
    font-size:9px!important;
    line-height:1!important;
  }

  /* Selected list starts below heading and uses lower space cleanly. */
  .left-panel .selected-list{
    flex:1 1 auto!important;
    min-height:150px!important;
    max-height:none!important;
    overflow-y:auto!important;
    margin-top:0!important;
    padding-top:2px!important;
  }

  .left-panel .selected-list .empty,
  .left-panel .selected-list p{
    margin:2px 0!important;
    font-size:8.7px!important;
    line-height:1.25!important;
  }
}
