/*
 * 대시보드 섹션 헤더 컨트롤 공용 (2026-08-09)
 *   [제목] [세그먼트 탭…] [보조(건수·버튼)] + 보조 설명줄.
 *   적용 = 실적 현황(month_stats) · DB 진행상태 분포(status_dist) · 상담사 업무현황(counselor_activity)
 *   ⚠종전엔 세 섹션이 같은 인라인 탭 마크업을 복붙하고 있었다(개발규칙 3) — 여기로 일원화.
 *
 * 미디어쿼리가 필요해 인라인 스타일로는 불가 → 개발규칙 1 에 따라 컴포넌트로 분리.
 * ⚠각 섹션의 **표 본문**은 아직 인라인 스타일(기존 자산) — 여기는 헤더/컨트롤과 스크롤 컨테이너만.
 *
 * 반응형 전략 = 마크업 1벌 + order/flex-basis 재배치 (요소를 화면크기별로 두 벌 두지 않는다 —
 *   month_stats 의 「통계 상세보기」는 modal-ajax 컨트롤러가 붙어 있어 중복 부착 시 모달 id 가 겹친다).
 *     데스크톱  [제목] [탭…]                        [보조]
 *     모바일    [제목]                              [보조]
 *               [  탭  |  탭  |  탭  |  탭  ]   ← 100% 폭 균등
 */

.dsc-head     { margin-bottom: 12px; }
.dsc-head-top { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; }
.dsc-title    { order: 1; white-space: nowrap; margin: 0; }
.dsc-controls { order: 2; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.dsc-aside    { order: 3; margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.dsc-meta     { margin: 6px 0 0; font-size: 11px; color: #9ca3af; line-height: 1.6; }
.dsc-count    { font-size: 11px; color: #9ca3af; white-space: nowrap; }

/* 세그먼트 탭 — 활성 글자색은 변수로 두어 섹션별 포인트 컬러를 얹는다 */
.dsc-seg   { --dsc-on-color: #3e6187; display: inline-flex; background: #f1f5f9; border-radius: 8px; padding: 2px; flex-shrink: 0; }
.dsc-seg a {
  padding: 3px 10px; border-radius: 6px; font-size: 11px; font-weight: 500;
  color: #64748b; background: transparent; text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
}
.dsc-seg a:hover  { color: var(--dsc-on-color); }
.dsc-seg a.dsc-on { background: #fff; color: var(--dsc-on-color); font-weight: 700; box-shadow: 0 1px 2px rgba(15, 23, 42, .08); }

/* 섹션별 포인트 컬러 */
.dsc-seg-accent  { --dsc-on-color: #0e7490; }   /* 공유DB 3모드 (틸) */
.dsc-seg-consign { --dsc-on-color: #7c3aed; }   /* 실적 현황(거래처) — 위탁판매 퍼플 */

/* 라벨이 붙는 세그먼트 (예: 「공유DB」 3모드) */
.dsc-labeled   { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.dsc-seg-label { font-size: 11px; font-weight: 600; color: #0e7490; white-space: nowrap; }

/* 보조 버튼 (통계 상세보기 등) */
.dsc-btn {
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px;
  background: #fff; color: #3e6187; border: 1px solid #c8d6e4; border-radius: 8px;
  font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.dsc-btn:hover { background: #f5f9fd; }

/* 표 — 컬럼이 많은 섹션의 가로 스크롤 컨테이너 */
.dsc-table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid #eef0f3; border-radius: 10px;
}
.dsc-table-wrap-plain { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── 모바일 ─────────────────────────────────────────────────────────
   컨트롤이 헤더 한 줄에 다 들어가지 않으면 눌러야 할 것이 잘리거나 줄바꿈이 제멋대로 일어난다.
   폭을 다 쓰고 터치 타겟을 키운다(최소 34px). */
@media (max-width: 760px) {
  .dsc-aside    { order: 2; }
  .dsc-controls { order: 3; flex-basis: 100%; gap: 8px; }

  .dsc-controls > .dsc-seg,
  .dsc-controls > .dsc-labeled { flex: 1 1 100%; }
  .dsc-labeled .dsc-seg        { flex: 1; }

  .dsc-seg   { display: flex; }
  .dsc-seg a { flex: 1; min-height: 34px; padding: 6px 4px; font-size: 12px; }

  .dsc-btn  { padding: 5px 10px; font-size: 11.5px; }
  .dsc-meta { margin-top: 8px; }
}

/* 아주 좁은 화면 — 세그먼트 라벨을 윗줄로 올려 버튼 폭을 확보 */
@media (max-width: 400px) {
  .dsc-labeled   { flex-wrap: wrap; gap: 4px; }
  .dsc-seg-label { flex-basis: 100%; }
}