/* ============================================================
   filter_bar.css — 필터바 공용 컴포넌트
   purchase_v2 / inventory_v2 가 공유하는 필터바 요소:
     · --fb-* 디자인 토큰 (높이·반경·폰트)
     · 브랜드 칩 바 (.pv2-brand-bar / .pv2-bc-chip / .pv2-brand-dot)
     · 검색 그룹 segmented pill (.pv2-search-group / .pv2-sg-*)
     · 잔월 필터 버튼 그룹 (.pv2-remain-filter / .pv2-rf-*)
   클래스명은 역사적으로 pv2- prefix 지만 두 앱 공용. base.html 에서 전역 로드.
   (이전엔 inventory 가 purchase_v2.css 전체를 로드해 빌려쓰던 의존성을 여기로 분리)
   ============================================================ */

:root {
  --fb-h: 32px;                     /* 필터바 요소 고정 높이 */
  --fb-radius: var(--radius-md);    /* 8px — 통일 */
  --fb-fs: var(--fs-xs);            /* 12px — 통일 */
  --fb-fw: var(--fw-semibold);      /* 600 */
  --fb-gap: var(--space-sm);        /* 8px — 존 내 gap */
  --fb-border: var(--border-color); /* #dee2e6 */
  /* outlined 버튼 공통 색 */
  --fb-outlined-bg: var(--bg-primary);
  --fb-outlined-color: var(--text-secondary);
  --fb-outlined-border: var(--border-color);
  /* outlined-blue (드래프트·임시저장) */
  --fb-blue-bg: #e7f5ff;
  --fb-blue-border: #74c0fc;
  --fb-blue-color: #1971c2;
}

/* ─── 브랜드 칩 바 ─── */
.pv2-brand-bar {
  display: flex;
  align-items: center;
  gap: .35rem;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.pv2-brand-bar::-webkit-scrollbar { display: none; }

.pv2-bc-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 .7rem;
  border-radius: 999px;
  border: 1.5px solid var(--border-color);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
  --brand-color: var(--color-primary);
}
.pv2-bc-chip:hover {
  border-color: var(--brand-color);
  color: var(--brand-color);
}
.pv2-bc-chip.active {
  background: var(--brand-color);
  border-color: var(--brand-color);
  color: #fff;
  font-weight: 600;
}
.pv2-bc-chip.active .pv2-brand-dot { background: rgba(255,255,255,0.85) !important; }

/* 브랜드 컬러 dot — 칩, 품목 헤더 행 공용 */
.pv2-brand-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  vertical-align: middle;
  margin-right: 4px;
}

/* ─── 검색 그룹 (제조사 + 품목/규격) — segmented pill ─── */
.pv2-search-group {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--fb-border);
  border-radius: var(--fb-radius);
  overflow: hidden;
  background: var(--bg-primary);
  height: var(--fb-h);
}
.pv2-sg-cell {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: 0 .7rem;
  border-right: 1px solid var(--fb-border);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--fb-fs);
  transition: background var(--transition-fast);
  margin: 0;
  cursor: pointer;
}
.pv2-sg-cell:last-child { border-right: none; }
.pv2-sg-cell:hover      { background: var(--bg-light); }
.pv2-sg-cell:focus-within {
  background: var(--bg-light);
  color: var(--text-primary);
}
.pv2-sg-icon {
  color: var(--text-muted);
  font-size: .75rem;
  flex-shrink: 0;
}
.pv2-sg-cell:focus-within .pv2-sg-icon { color: var(--color-primary); }

/* 내부 select/input — 테두리·배경 제거하고 pill 컨테이너에 녹여냄 */
.pv2-sg-select,
.pv2-sg-input {
  border: 0;
  outline: 0;
  background: transparent;
  padding: 0;
  font-size: var(--fb-fs);
  font-weight: var(--fb-fw);
  color: var(--text-primary);
  height: 100%;
  min-width: 0;
}
.pv2-sg-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 1rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path fill='%23868e96' d='M1 3l4 4 4-4z'/></svg>");
  background-repeat: no-repeat;
  background-position: right .1rem center;
  cursor: pointer;
}
.pv2-sg-input { width: 90px; }
.pv2-sg-input::placeholder { color: var(--text-muted); font-weight: var(--fw-normal); }

/* 블록 변형 — 컨테이너 폭 100% (드로어·사이드 패널용) */
.pv2-search-group-block {
  display: flex;
  width: 100%;
}
.pv2-search-group-block .pv2-sg-cell { flex: 1 1 0; min-width: 0; }
.pv2-search-group-block .pv2-sg-input,
.pv2-search-group-block .pv2-sg-select {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}

/* 잔월 필터 버튼 그룹 (카운트 배지 포함, 우측 존) */
.pv2-remain-filter {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--fb-border);
  border-radius: var(--fb-radius);
  overflow: hidden;
  background: var(--bg-primary);
  height: var(--fb-h);
}
.pv2-rf-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: transparent;
  border: none;
  border-right: 1px solid var(--fb-border);
  padding: 0 .7rem;
  font-size: var(--fb-fs);
  font-weight: var(--fb-fw);
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.pv2-rf-btn:last-child { border-right: none; }
.pv2-rf-btn:hover { background: var(--bg-light); }
.pv2-rf-btn.active { color: var(--text-primary); }
.pv2-rf-btn.active[data-remain="all"]    { background: var(--bg-light); }
.pv2-rf-btn.active[data-remain="danger"] { background: #ffe3e3; color: #c92a2a; }
.pv2-rf-btn.active[data-remain="warn"]   { background: #fff3bf; color: #8a6d00; }
.pv2-rf-btn.active[data-remain="ok"]     { background: #d3f9d8; color: #2b8a3e; }

/* 카운트 배지 — 버튼 안의 작은 pill */
.pv2-rf-count {
  display: inline-block;
  min-width: 20px;
  padding: .05rem .35rem;
  border-radius: 10px;
  background: rgba(0,0,0,.06);
  color: inherit;
  font-size: var(--fs-xs); /* 토큰 통일 */
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  text-align: center;
  line-height: 1.4;
}
.pv2-rf-btn.active .pv2-rf-count { background: rgba(255,255,255,.6); }
.pv2-rf-btn.pv2-rf-danger .pv2-rf-count { background: rgba(201,42,42,.12); color: #c92a2a; }
.pv2-rf-btn.pv2-rf-warn   .pv2-rf-count { background: rgba(138,109,0,.14); color: #8a6d00; }
.pv2-rf-btn.pv2-rf-ok     .pv2-rf-count { background: rgba(43,138,62,.14); color: #2b8a3e; }