/*
 * v2-table-search-widget 반응형 래퍼 (2026-04-10, Phase 1 Step 6)
 *
 * 카드 컨테이너 너비를 기준으로 검색 위젯의 내부 레이아웃을 강제 재배치.
 * TableSearchWidget 내부는 일체 건드리지 않고, 부모 래퍼 div 의 container query
 * 만으로 narrow 모드(카드 폭 < 600px) 에서 세로 스택으로 재배열한다.
 *
 * 작동 원리:
 *   .v2-tsw-responsive-root → container-type: inline-size
 *   위젯 루트가 이 컨테이너의 폭을 감지 (뷰포트가 아닌 카드 폭 기준)
 *   narrow 조건에서는 !important 로 Tailwind flex-row 레이아웃을 덮어씀
 */
.v2-tsw-responsive-root {
  container-type: inline-size;
  container-name: v2-tsw;
  width: 100%;
  min-width: 0;
}

/* wide (기본): TableSearchWidget 의 기존 레이아웃 그대로 */

/* narrow: 카드 컨테이너 폭 < 600px → 전체 세로 스택 */
@container v2-tsw (max-width: 599px) {
  /* 위젯 루트 flex 컨테이너를 세로로 강제 */
  .v2-tsw-responsive-root > div {
    flex-direction: column !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
  }

  /* 루트 바로 아래의 모든 요소를 전체 너비로 */
  .v2-tsw-responsive-root > div > * {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* 필터 입력 박스들 (flex-1 안쪽) 도 세로로 재배치 */
  .v2-tsw-responsive-root > div > div.flex-1,
  .v2-tsw-responsive-root > div > .flex.flex-1 {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  /* 개별 필터 입력 아이템 전체 너비 */
  .v2-tsw-responsive-root > div > div.flex-1 > div,
  .v2-tsw-responsive-root > div > .flex.flex-1 > div {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* 오른쪽의 데이터 건수 + 설정 버튼 영역도 전체 너비, 왼쪽 정렬 */
  .v2-tsw-responsive-root > div > div.flex-shrink-0 {
    justify-content: space-between !important;
  }
}
