/* ═══════════════════════════════════════════════════════════════════════════
   Cable List — Grid 바둑판 압축 + Sticky 헤더
   - 상단 컨트롤 영역을 auto-fit grid로 빈틈 없이 채움
   - 테이블 thead 고정 (스크롤 시 헤더 그대로, body만 움직임)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ━━━ 1. 상단 컨트롤 데크 — 진짜 바둑판 grid (5열까지 펼침) ━━━ */
#main-content .legacy-filter-panel.excel-control-deck {
  display: grid !important;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) minmax(380px, 2fr) !important;
  grid-auto-rows: auto !important;
  gap: 4px 6px !important;
  padding: 4px 8px !important;
  margin-bottom: 4px !important;
  align-items: start !important;
}
/* ops-stack을 deck의 우측 칸에 한 줄로 배치 */
#main-content .excel-ops-stack {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 3px !important;
}
#main-content .excel-ops-panel {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(95px, 1fr)) !important;
  gap: 4px !important;
  padding: 3px 5px !important;
  align-items: end !important;
}
/* bulk-row: 버튼들도 grid로 균등 배치 (바둑판) */
#main-content .excel-bulk-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(85px, 1fr)) !important;
  gap: 3px !important;
  align-items: center !important;
  padding: 3px 5px !important;
  background: #f5f8fc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 3px !important;
}
#main-content .excel-bulk-row > * { min-width: 0 !important; }
#main-content .excel-bulk-row button,
#main-content .excel-bulk-row input[type="date"] {
  height: 22px !important;
  padding: 0 5px !important;
  font-size: 10px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#main-content .excel-bulk-row strong,
#main-content .excel-bulk-row span {
  font-size: 10px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ━━━ 2. SYSTEM/NODE 슬라이서 — 좁고 컴팩트 ━━━ */
#main-content .excel-slicer-stack {
  display: contents !important;  /* deck의 grid에 직접 합류 */
}
#main-content .excel-slicer {
  border-radius: 3px !important;
  border: 1px solid #d8dfe8 !important;
}
#main-content .excel-slicer-head {
  padding: 3px 7px !important;
  font-size: 10px !important;
  min-height: 20px !important;
  background: #f0f4f9 !important;
}
#main-content .excel-slicer-body {
  max-height: 80px !important;
  padding: 3px 4px !important;
  gap: 1px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  overflow-y: auto !important;
}
#main-content .slicer-chip {
  padding: 1px 5px !important;
  font-size: 10px !important;
  min-height: 18px !important;
  line-height: 1.2 !important;
  border-radius: 2px !important;
}

/* ops-panel label */
#main-content .excel-ops-panel label {
  font-size: 9.5px !important;
  margin-bottom: 1px !important;
  color: #4a5568 !important;
  letter-spacing: 0.02em !important;
}
#main-content .excel-ops-panel select,
#main-content .excel-ops-panel input {
  height: 22px !important;
  padding: 1px 5px !important;
  font-size: 11px !important;
  border-radius: 2px !important;
}
#main-content .excel-ops-panel button {
  height: 22px !important;
  padding: 0 8px !important;
  font-size: 10.5px !important;
  border-radius: 2px !important;
}

/* ━━━ 5. 탭 + 페이지 헤더 압축 ━━━ */
#main-content .cable-tabs {
  padding: 3px 10px 0 !important;
  gap: 3px !important;
}
#main-content .cable-tab {
  padding: 4px 10px !important;
  font-size: 11px !important;
  min-height: 24px !important;
}
#main-content .cable-tab-count {
  padding: 0 5px !important;
  font-size: 10px !important;
}

/* 페이지 헤더 ("케이블 리스트" + 우상단 일괄작업) */
#main-content .legacy-shell > header,
#main-content .cable-list-header {
  padding: 4px 10px !important;
  min-height: 26px !important;
}
#main-content .legacy-shell h1 { font-size: 13px !important; margin: 0 !important; }
#main-content .legacy-shell > header button,
#main-content .cable-list-header button {
  height: 22px !important;
  padding: 0 8px !important;
  font-size: 10.5px !important;
}

/* ━━━ 6. 테이블 wrapper — 스크롤 컨테이너로 만들고 thead sticky ━━━ */
#main-content .excel-shell.cable-data-wrap {
  position: relative !important;
  max-height: calc(100vh - 280px) !important;  /* 상단 압축 후 남는 공간 */
  overflow: auto !important;
  border: 1px solid #b7c0cf !important;
  background: #fff !important;
}

/* thead의 모든 행 sticky (excel-letters + excel-headline) */
#main-content .excel-table.cable-data-table thead {
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
}
#main-content .excel-table.cable-data-table thead tr.excel-letters th {
  position: sticky !important;
  top: 0 !important;
  z-index: 11 !important;
  background: #d9d9d9 !important;
}
#main-content .excel-table.cable-data-table thead tr.excel-headline th {
  position: sticky !important;
  top: 22px !important;  /* letters 행 높이만큼 아래 */
  z-index: 11 !important;
  background: #305496 !important;
  color: #fff !important;
  box-shadow: 0 2px 0 #1f3d72 !important;
}

/* 좌측 # 컬럼 + select 컬럼은 가로 sticky (좌측 고정) */
#main-content .excel-table.cable-data-table thead .excel-row-head,
#main-content .excel-table.cable-data-table thead .col-select {
  z-index: 12 !important;
}
#main-content .excel-table.cable-data-table tbody .excel-row-head,
#main-content .excel-table.cable-data-table tbody .col-select {
  position: sticky !important;
  left: 0 !important;
  z-index: 5 !important;
  background: #fff !important;
}

/* ━━━ 7. 페이지네이션 / 카운터 줄 압축 ━━━ */
#main-content .cable-meta-row,
#main-content .table-summary-row,
#main-content .cable-pagination,
#main-content .legacy-pagination {
  padding: 3px 10px !important;
  font-size: 10.5px !important;
  min-height: 22px !important;
}

/* 화면 width 1280px 미만이면 그리드 1열로 reflow */
@media (max-width: 1280px) {
  #main-content .legacy-filter-panel.excel-control-deck {
    grid-template-columns: 1fr 1fr !important;
  }
  #main-content .excel-ops-stack { grid-column: 1 / -1 !important; }
  #main-content .excel-slicer-body { max-height: 70px !important; }
}
@media (max-width: 768px) {
  #main-content .legacy-filter-panel.excel-control-deck {
    grid-template-columns: 1fr !important;
  }
}