/* 더망고 커스텀 스타일 — 원본(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;
}

/* 버튼 모양은 사각 하나로 통일한다 (셀러 요청 2026-09-03).
   종전엔 .btn 전체를 알약(50rem)으로 깔고 btn-primary·btn-dark·btn-blue만
   사각으로 되돌려서, 같은 툴바 안에서 채운 버튼은 각지고 아웃라인 버튼만
   둥근 상태였다. 원본 재현 버튼(pol-btn·mk-chip·sq-tab·tbl-btn·btn-chip)이
   전부 사각이므로 맞추는 방향은 사각이다. */
.btn {
  border-radius: 0.375rem;
}
.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;
}

/* 메뉴바 + 상태바 — 스크롤해도 위에 붙어 있는다 (2026-08-26 사용자 요청).
   모달(1055)보다는 낮고 일반 콘텐츠보다는 높게 둔다. */
.durian-topbar {
  position: sticky;
  top: 0;
  z-index: 1030;
}

/* 네비게이션 — 원본과 동일한 톤 */
.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;
}
/* 사용 중인 메뉴 — 원본처럼 지금 어느 메뉴를 보고 있는지 한눈에 보이게 한다
   (표시가 없어 화면을 옮기면 위치를 알 수 없다는 베타테스터 제보, 2026-09-01) */
.durian-nav .nav-link.active {
  color: #fff;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 4px 4px 0 0;
  box-shadow: inset 0 -3px 0 #ffc107;
}
.durian-nav .dropdown-item.active,
.durian-nav .dropdown-item:active {
  background: #f1f3f5;
  color: #1f2937;
  font-weight: 600;
}
.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;
}

/* 수집 화면이 자기 배지를 따로 그리던 걸 이 배지 하나로 합쳤다 (2026-09-02).
   그래서 "검색 중…"·"오류" 같은 진행 상태도 여기 표시된다. */
.durian-statusbar .status-pill.status-pill-busy {
  color: #0d6efd;
  border-color: #9ec5fe;
}
.durian-statusbar .status-pill.status-pill-err {
  color: #dc3545;
  border-color: #f1aeb5;
}
/* 새 Extension 버전이 있을 때 — 원본도 이 자리를 노란 배지로 쓴다.
   눌러야 하는 배지이므로 커서를 손모양으로 바꿔 눌리는 것임을 알린다. */
.durian-statusbar .status-pill.status-pill-update {
  color: #664d03;
  background-color: #fff3cd;
  border-color: #ffe69c;
  cursor: pointer;
}
.durian-statusbar .status-pill.status-pill-update:hover {
  background-color: #ffe69c;
}

/* Extension 자동 갱신이 실패했을 때 화면을 덮는 안내.
   배지로는 안 누르는 셀러 때문에 만든 기능이라 배지로 돌아가면 제자리다. */
.ext-force-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2000;                 /* 부트스트랩 모달(1055)보다 위 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(33, 37, 41, 0.6);
}
.ext-force-backdrop .ext-force-box {
  width: 100%;
  max-width: 26rem;
  padding: 1.5rem;
  border-radius: 0.5rem;
  background: #fff;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.35);
}
.ext-force-backdrop .ext-force-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.ext-force-backdrop .ext-force-desc {
  font-size: 0.875rem;
  color: #6c757d;
  margin-bottom: 1rem;
}
.ext-force-backdrop .ext-force-help {
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: #6c757d;
}
.ext-force-backdrop .ext-force-help ul {
  padding-left: 1.1rem;
  margin: 0.5rem 0;
}
.ext-force-backdrop .ext-force-help li {
  margin-bottom: 0.25rem;
}

.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 기본값과 같지만, 원본의 다크 버튼이 사각이라는 근거를 남겨 둔다 */
.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; }