/* 더망고 커스텀 스타일 — 원본(UI_TEST) 룩앤필 테마 */

:root {
  --durian-green: #198754;        /* 포인트 컬러 (버튼·페이지네이션·테이블 상단 라인) */
  --durian-green-hover: #157347;
  --durian-green-active: #146c43;
  --durian-navy: #1f2937;         /* 검색 버튼 등 진한 네이비 */
}

body {
  font-size: 0.9rem;
  background-color: #fff;
}

/* 기본 버튼(primary)을 원본의 파란 액션 컬러로 통일
   (원본은 솔리드 액션 버튼이 파랑 — 초록은 페이지네이션·체크박스·아웃라인 버튼에만 사용) */
.btn-primary {
  --bs-btn-bg: #3d7ef7;
  --bs-btn-border-color: #3d7ef7;
  --bs-btn-hover-bg: #2f6fe4;
  --bs-btn-hover-border-color: #2f6fe4;
  --bs-btn-active-bg: #2a63cc;
  --bs-btn-active-border-color: #2a63cc;
  --bs-btn-disabled-bg: #9dbdf9;
  --bs-btn-disabled-border-color: #9dbdf9;
  border-radius: 0.375rem;
}

.btn-outline-primary {
  --bs-btn-color: #3d7ef7;
  --bs-btn-border-color: #3d7ef7;
  --bs-btn-hover-bg: #3d7ef7;
  --bs-btn-hover-border-color: #3d7ef7;
  --bs-btn-active-bg: #2a63cc;
  --bs-btn-active-border-color: #2a63cc;
  --bs-btn-disabled-color: #3d7ef7;
  --bs-btn-disabled-border-color: #3d7ef7;
}

/* 원본은 목록 상단 액션 버튼이 알약형(pill) — 단독 버튼만 pill, 그룹/인풋그룹 내부는 기본 radius 유지 */
.btn {
  border-radius: 50rem;
}
.input-group .btn,
.btn-group .btn,
.btn-group-sm .btn {
  border-radius: var(--bs-border-radius);
}

/* 체크박스·라디오·스위치 선택 색도 초록으로 */
.form-check-input:checked {
  background-color: var(--durian-green);
  border-color: var(--durian-green);
}

/* 탭 활성 표시 */
.nav-pills .nav-link.active {
  background-color: var(--durian-green);
}

/* 페이지네이션 — 활성 페이지 초록 */
.pagination {
  --bs-pagination-active-bg: var(--durian-green);
  --bs-pagination-active-border-color: var(--durian-green);
  --bs-pagination-color: #495057;
  --bs-pagination-hover-color: var(--durian-green-hover);
}

.navbar-brand {
  font-size: 1.15rem;
}

/* 네비게이션 — 원본과 동일한 톤 */
.durian-nav {
  font-size: 0.9rem;
}
.durian-nav .nav-link {
  color: #d8dce0;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}
.durian-nav .nav-link:hover,
.durian-nav .nav-link:focus {
  color: #fff;
}
.durian-nav .badge {
  font-size: 0.68rem;
  vertical-align: 1px;
}

/* 드롭다운 — 원본: 흰 배경, 각진 모서리, 컴팩트 */
.dropdown-menu {
  border-radius: 0;
  font-size: 0.85rem;
  padding: 0.3rem 0;
  border: 1px solid #ced4da;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.dropdown-item {
  padding: 0.3rem 0.9rem;
}
.dropdown-item:hover {
  background-color: #f1f3f5;
}

/* 상태 배지 바 — 네비 아래 회색 바 + 초록 아웃라인 pill */
.durian-statusbar {
  background-color: #f1f3f5;
  border-bottom: 1px solid #e9ecef;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}
.durian-statusbar .status-pill {
  background-color: #fff;
  color: var(--durian-green);
  border: 1px solid var(--durian-green);
  border-radius: 50rem;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.15rem 0.75rem;
}
/* Extension 미연결 — 초록 체크가 거짓 신호가 되지 않도록 회색으로 죽인다 */
.durian-statusbar .status-pill.status-pill-off {
  color: #868e96;
  border-color: #ced4da;
}

.card {
  border-radius: 0.5rem;
}

/* 사이드바 레이아웃 (향후 확장용) */
.sidebar {
  min-height: calc(100vh - 56px);
  background-color: #f8f9fa;
  border-right: 1px solid #dee2e6;
}

/* 테이블 — 원본은 상단 굵은 초록 라인 + 흰 배경 헤더 */
.table {
  border-top: 2px solid var(--durian-green);
}
.table th {
  font-weight: 600;
  font-size: 0.85rem;
  background-color: #fff;
  color: #495057;
}
.table > :not(caption) > * > * {
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
}
/* 모달·중첩 테이블에는 초록 라인 중복 방지 */
.table .table,
.modal .table {
  border-top-width: 1px;
  border-top-color: var(--bs-border-color);
}

/* 다크 네이비 select — 원본 CS관리 등 툴바 필터 */
.sel-navy {
  background-color: #3b5875;
  color: #fff;
  border-color: #3b5875;
}
.sel-navy option {
  background-color: #fff;
  color: #212529;
}

/* 환경설정 — 원본은 파란 사각 저장 버튼 + 파란 활성 사이드바 항목 */
.config-page .btn-primary {
  --bs-btn-bg: #3d7ef7;
  --bs-btn-border-color: #3d7ef7;
  --bs-btn-hover-bg: #2f6fe4;
  --bs-btn-hover-border-color: #2f6fe4;
  --bs-btn-active-bg: #2a63cc;
  --bs-btn-active-border-color: #2a63cc;
  border-radius: 0.375rem;
}
.config-page .list-group-item {
  font-size: 0.85rem;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}
.config-page .list-group-item.active {
  background-color: #3d7ef7;
  border-color: #3d7ef7;
}

/* 대량수집 — 원본의 큰 다크 '상품검색' 버튼(두 입력줄 높이) */
.durian-search-big {
  background-color: #343a40;
  color: #fff;
  border-radius: 0.4rem;
  font-weight: 600;
  align-self: stretch;
}
.durian-search-big:hover,
.durian-search-big:focus {
  background-color: #23272b;
  color: #fff;
}

/* 원본: 솔리드 다크 버튼은 사각 (아웃라인 버튼만 알약형) */
.btn-dark {
  border-radius: 0.375rem;
}

/* 파란 사각 버튼 — 원본의 선택저장/저장 계열 */
.btn-blue {
  background-color: #3d7ef7;
  color: #fff;
  border-radius: 0.375rem;
}
.btn-blue:hover,
.btn-blue:focus {
  background-color: #2f6fe4;
  color: #fff;
}
.btn-blue:disabled {
  background-color: #9dbdf9;
  color: #fff;
}

/* 작업일지 게시판 — 원본 보드 스타일 */
.worklog-search-btn {
  background-color: var(--durian-navy);
  color: #fff;
  border-radius: 0.4rem;
  width: 44px;
}
.worklog-search-btn:hover {
  background-color: #111827;
  color: #fff;
}
.worklog-title-link {
  color: #212529;
  text-decoration: none;
}
.worklog-title-link:hover {
  color: var(--durian-green);
  text-decoration: underline;
}

/* 상태 뱃지 */
.badge.status-active { background-color: #198754; }
.badge.status-inactive { background-color: #6c757d; }
.badge.status-pending { background-color: #ffc107; color: #000; }
.badge.status-error { background-color: #dc3545; }

/* ══════════════════════════════════════════════════════════════════════
   정책생성/관리 화면 공통 (원본 UI_TEST 재현)
   원본은 ① 상단 "정책 불러오기 / 정책명" 카드 ② 진회색 다크바 구획으로 구성된다.
   ══════════════════════════════════════════════════════════════════════ */

/* ① 상단 불러오기 카드 */
.pol-loadbar {
  border: 1px solid #cfd4da;
  border-radius: 6px;
  padding: 10px 14px 12px;
  background: #fff;
  margin-bottom: 10px;
}
.pol-loadbar .pol-lb {
  font-weight: 700;
  font-size: .82rem;
  color: #212529;
  margin-bottom: 4px;
}
.pol-loadbar select.form-select,
.pol-loadbar input.form-control {
  height: 30px;
  padding-top: 2px;
  padding-bottom: 2px;
  font-size: .82rem;
  border-radius: 3px;
}

/* 원본 상단 카드의 버튼 4종 — 사각, 작은 글씨 */
.pol-btn {
  border-radius: 3px;
  font-size: .8rem;
  font-weight: 700;
  padding: 4px 12px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.pol-btn-new    { background: #3d7ef7; border-color: #3d7ef7; color: #fff; }
.pol-btn-new:hover    { background: #2f6fe4; color: #fff; }
.pol-btn-copy   { background: #fff; border-color: #adb5bd; color: #212529; font-weight: 400; }
.pol-btn-copy:hover   { background: #f1f3f5; color: #212529; }
.pol-btn-save   { background: #21a366; border-color: #21a366; color: #fff; }
.pol-btn-save:hover   { background: #1c8f59; color: #fff; }
.pol-btn-del    { background: #e8402a; border-color: #e8402a; color: #fff; }
.pol-btn-del:hover    { background: #cf3623; color: #fff; }
.pol-btn:disabled { opacity: .5; }

/* ② 다크바 구획 헤더 */
.blk-bar {
  background: #3f4652;
  color: #fff;
  font-weight: 700;
  font-size: .82rem;
  padding: 5px 12px;
  border-radius: 3px 3px 0 0;
}
.blk-bar .blk-sub {
  color: #ff9d5c;
  font-weight: 400;
  font-size: .78rem;
  margin-left: 8px;
}
.blk-body {
  border: 1px solid #cfd4da;
  border-top: 0;
  border-radius: 0 0 3px 3px;
  padding: 12px 14px;
  background: #fff;
  margin-bottom: 12px;
}

/* 블록 안의 라벨/입력 2열 그리드 (원본은 라벨 좌측 고정폭) */
table.pol-grid { width: 100%; }
table.pol-grid > tbody > tr > td { padding: 3px 4px; vertical-align: middle; font-size: .82rem; }
table.pol-grid td.pol-l {
  width: 120px; text-align: left; color: #212529; white-space: nowrap; padding-left: 8px;
}
table.pol-grid td.pol-l2 {
  width: 150px; text-align: left; color: #212529; white-space: nowrap;
}
table.pol-grid input.form-control,
table.pol-grid select.form-select {
  height: 28px; padding: 1px 6px; font-size: .82rem; border-radius: 3px; display: inline-block;
}
.pol-note { color: #8a8f96; font-size: .76rem; }
.pol-warn { color: #d63030; font-weight: 700; }

/* 마켓 칩 (블록 B) — 원본은 흰 사각 버튼, 활성은 주황 */
.mk-chip {
  border: 1px solid #b9bec5;
  background: #fff;
  color: #212529;
  border-radius: 3px;
  font-size: .8rem;
  font-weight: 700;
  padding: 5px 0;
  min-width: 84px;
  flex: 1 1 0;
}
.mk-chip:hover { background: #f1f3f5; }
.mk-chip.active { background: #e8542f; border-color: #e8542f; color: #fff; }

/* 원본 탭(사각형) — 정책적용/바이마 정책 관리 */
.sq-tab {
  border-radius: 3px;
  font-size: .82rem;
  font-weight: 700;
  padding: 5px 14px;
  border: 1px solid #b9bec5;
  background: #fff;
  color: #212529;
}
.sq-tab.active { background: #e8402a; border-color: #e8402a; color: #fff; }

/* 준비중(미구현) 마커 — 원본 UI_TEST 재현.
   원본은 아직 구현되지 않은 버튼의 우측 상단 모서리에 작은 주황색 빈 원을 그려
   눌러보기 전에 알 수 있게 한다(원본은 클릭해도 무반응, 우리는 알림을 띄운다).
   마커를 붙일 대상은 base.html의 스크립트가 핸들러를 보고 자동으로 고른다. */
.pending-mark { position: relative; }
.pending-mark::after {
  content: "";
  position: absolute;
  top: -4px;
  right: -4px;
  width: 9px;
  height: 9px;
  border: 1.5px solid #e8590c;
  border-radius: 50%;
  background: #fff;
  pointer-events: none;
  z-index: 2;
}
/* select·input 처럼 가상요소를 못 그리는 요소는 이 래퍼가 대신 마커를 단다 */
span.pending-mark { display: inline-block; }