/* ─────────────────────────────────────────────────────────────
 * Admin 운영 대시보드 (ops-*) — quote-flow.css 확장
 * D1 홈 / D2 주문 목록 / D3 주문 상세 / D4 견적 목록 / D5 견적 상세
 * 디자인 프리뷰: preview/bsmnt-b2b-ops-*.html (preview ↔ PHP 동일 내용 유지)
 * 의존: theme.css, pages/quote-flow.css (.qf 테이블·.qstatus 뱃지 재사용)
 * ───────────────────────────────────────────────────────────── */

.ops, .ops * { word-break: keep-all; overflow-wrap: break-word; }

/* ══════════ 신규 뱃지 (관리자 전용 — §6) ══════════ */
/* 취소요청: 돈이 걸린 건 — 솔리드 경고 톤으로 목록에서 즉시 식별 */
.qstatus--cancelreq { background: var(--c-danger); color: #fff; }
/* 만료임박: 주의 톤 아웃라인 (quoted 뱃지와 병기 가능) */
.qstatus--expiring { background: #fff; border: 1px solid var(--c-warning); color: var(--c-warning-text); }

/* 메뉴·탭 건수 뱃지 */
.ops-cnt { display: inline-flex; align-items: center; justify-content: center; min-width: 19px; height: 19px; padding: 0 6px; border-radius: var(--r-pill); background: var(--c-danger); color: #fff; font-size: 11px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.ops-cnt--muted { background: var(--c-surface-alt); color: var(--c-fg-3); }

/* ══════════ 관리자 사이드 메뉴 (§4) ══════════ */
.ops-nav li a { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ops-nav-group { padding: 14px 16px 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--c-fg-4); }
.ops-nav li.ops-nav-tool a { font-size: 13px; color: var(--c-fg-3); }
.ops-nav li.ops-nav-tool a [data-lucide] { width: 14px; height: 14px; }
.ops-nav-ext { display: inline-flex; align-items: center; gap: 6px; }

/* ══════════ D1 — 관리자 헤더 스트립 ══════════ */
.ops-hello { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: var(--c-fg-1); color: #fff; border-radius: var(--r-lg); padding: 18px 20px; margin-bottom: 20px; }
.ops-hello h2 { margin: 0 0 4px; font-size: 19px; font-weight: 800; color: #fff; }
.ops-hello p { margin: 0; font-size: 13px; color: #cbd1d6; }
.ops-hello-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ops-hello-actions .btn { border-color: rgba(255,255,255,0.35); color: #fff; background: transparent; }
.ops-hello-actions .btn:hover { background: rgba(255,255,255,0.12); border-color: #fff; color: #fff; }

/* ══════════ D1 — KPI 스트립 (§5.2) ══════════ */
.ops-kpis { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin-bottom: 24px; }
.ops-kpi { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 14px 14px 12px; background: #fff; text-decoration: none; transition: border-color .12s, box-shadow .12s; }
.ops-kpi:hover { border-color: var(--c-primary); box-shadow: var(--sh-sm); text-decoration: none; }
.ops-kpi .lbl { font-size: 12px; font-weight: 600; color: var(--c-fg-3); }
.ops-kpi .val { font-size: 26px; font-weight: 800; color: var(--c-fg-1); line-height: 1.15; font-variant-numeric: tabular-nums; }
.ops-kpi .val small { font-size: 13px; font-weight: 600; color: var(--c-fg-4); }
.ops-kpi--zero .val { color: var(--c-fg-4); }
.ops-kpi--warn { border-color: var(--c-danger); background: #fdf3f4; }
.ops-kpi--warn .lbl, .ops-kpi--warn .val { color: var(--c-danger); }
.ops-kpi--soon { border-color: var(--c-warning); background: var(--c-warning-bg); }
.ops-kpi--soon .lbl, .ops-kpi--soon .val { color: var(--c-warning-text); }

/* ══════════ D1 — 오늘 할 일 (작업 큐) ══════════ */
.ops-queue { border: 1px solid var(--c-border); border-radius: var(--r-lg); background: #fff; overflow: hidden; margin-bottom: 24px; }
.ops-queue-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-top: 1px solid var(--c-divider); }
.ops-queue-row:first-child { border-top: 0; }
.ops-queue-row .ic { width: 34px; height: 34px; border-radius: var(--r-md); background: var(--c-primary-softer); color: var(--c-primary); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 34px; }
.ops-queue-row .ic [data-lucide] { width: 17px; height: 17px; }
.ops-queue-row .tx { flex: 1; min-width: 0; }
.ops-queue-row .tx strong { font-size: 14px; color: var(--c-fg-1); }
.ops-queue-row .tx small { display: block; font-size: 12px; color: var(--c-fg-3); margin-top: 1px; }
.ops-queue-row .go { white-space: nowrap; }
.ops-queue-row--warn { background: #fdf3f4; }
.ops-queue-row--warn .ic { background: var(--c-danger); color: #fff; }

/* ══════════ D1 — 최근 목록 2열 + 섹션 헤더 ══════════ */
.ops-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.ops-sec-head h2 { margin: 0; font-size: 16px; font-weight: 800; color: var(--c-fg-1); }
.ops-sec-head .more { font-size: 13px; font-weight: 600; color: var(--c-primary); text-decoration: none; }
.ops-recent { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; align-items: start; }
.ops-recent .qf-table td { padding: 11px 14px; font-size: 13px; }
.ops-recent .qf-table th { padding: 9px 14px; }

/* ══════════ D1 — 운영 도구 바로가기 카드 (§5.9 — 반복 패턴) ══════════ */
.ops-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ops-tool { display: flex; align-items: flex-start; gap: 12px; border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 15px 16px; background: #fff; text-decoration: none; transition: border-color .12s, box-shadow .12s; }
.ops-tool:hover { border-color: var(--c-primary); box-shadow: var(--sh-sm); text-decoration: none; }
.ops-tool .ic { width: 38px; height: 38px; border-radius: var(--r-md); background: var(--c-primary-softer); color: var(--c-primary); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 38px; }
.ops-tool .ic [data-lucide] { width: 19px; height: 19px; }
.ops-tool strong { display: block; font-size: 14px; color: var(--c-fg-1); }
.ops-tool small { display: block; font-size: 12px; color: var(--c-fg-3); margin-top: 2px; line-height: 1.5; }
.ops-tool .ext { margin-left: auto; color: var(--c-fg-4); }
.ops-tool .ext [data-lucide] { width: 14px; height: 14px; }

/* ══════════ D2/D4 — 목록 공통 ══════════ */
.ops-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: var(--s-5); }
.ops-search { position: relative; min-width: 260px; }
.ops-search input { width: 100%; height: 38px; padding: 0 12px 0 36px; border: 1px solid var(--c-border); border-radius: var(--r-md); font-size: 13px; background: #fff; }
.ops-search input:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-tint); }
.ops-search [data-lucide] { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--c-fg-4); }
.qf-filter .ops-cnt { margin-left: 2px; }
.qf-filter.is-active .ops-cnt { background: rgba(255,255,255,0.25); color: #fff; }

/* 행 강조 (§9.6) */
.qf-table tr.ops-row--warn td { background: #fdf3f4; }
.qf-table tr.ops-row--warn td:first-child { box-shadow: inset 3px 0 0 var(--c-danger); }
.qf-table tr.ops-row--soon td { background: #fffbee; }
.qf-table tr.ops-row--new td { background: var(--c-primary-softer); }
.qf-table tr.ops-row--new td:first-child { box-shadow: inset 3px 0 0 var(--c-primary); }
.qf-table tr.ops-row--soon td:first-child { box-shadow: inset 3px 0 0 var(--c-warning); }

/* 행 인라인 주 액션 */
.ops-act { white-space: nowrap; }
.ops-due { display: block; font-size: 11.5px; color: var(--c-warning-text); font-weight: 700; margin-top: 3px; }
.ops-due--over { color: var(--c-danger); }

/* 페이지네이션 */
.ops-pager { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: var(--s-5); }
.ops-pager a, .ops-pager span { min-width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--c-border); border-radius: var(--r-sm); font-size: 13px; font-weight: 600; color: var(--c-fg-2); background: #fff; text-decoration: none; padding: 0 8px; }
.ops-pager a:hover { border-color: var(--c-primary); color: var(--c-primary); }
.ops-pager .is-cur { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }

/* ══════════ D3/D5 — 상세 공통 레이아웃 ══════════ */
.ops-detail { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s-6); align-items: start; }
/* D5 견적 상세 — 작성 테이블(6열)이 본업이라 항상 1열 스택.
 * (container max-width 때문에 넓은 화면에서도 2열이면 본문 ~536px — 열 잘림)
 * 사이드 카드(상태 관리·진행 이력)는 본문 아래 2열 그리드. */
.ops-detail--stack { grid-template-columns: 1fr; }
.ops-detail--stack > div:last-child { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-6); align-items: start; }
.ops-card { border: 1px solid var(--c-border); border-radius: var(--r-lg); background: #fff; margin-bottom: var(--s-5); overflow: hidden; }
.ops-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px var(--s-5); border-bottom: 1px solid var(--c-divider); background: var(--c-bg); }
.ops-card-head h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--c-fg-1); display: flex; align-items: center; gap: 7px; }
.ops-card-head h3 [data-lucide] { width: 16px; height: 16px; color: var(--c-primary); }
.ops-card-body { padding: var(--s-5); }
.ops-card-body--flush { padding: 0; }

/* 상세 헤더 */
.ops-dhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: var(--s-5); }
.ops-dhead h1 { margin: 0; font-size: 24px; letter-spacing: -0.02em; color: var(--c-fg-1); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ops-dhead h1 .mono { font-family: var(--font-mono); }
.ops-dhead .meta { font-size: 13px; color: var(--c-fg-3); margin-top: 5px; }
.ops-dhead .aux { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* 정보 dl */
.ops-dl { display: grid; grid-template-columns: 110px 1fr; gap: 10px var(--s-4); margin: 0; }
.ops-dl dt { font-size: 12.5px; color: var(--c-fg-3); }
.ops-dl dd { font-size: 13.5px; color: var(--c-fg-1); margin: 0; }

/* ══════════ D3 — 처리 패널 (상태 4분기 — §5.4) ══════════ */
.ops-panel { border: 1.5px solid var(--c-primary); border-radius: var(--r-lg); background: #fff; margin-bottom: var(--s-5); overflow: hidden; }
.ops-panel--warn { border-color: var(--c-danger); }
.ops-panel-head { display: flex; align-items: center; gap: 9px; padding: 13px var(--s-5); background: var(--c-primary-softer); color: var(--c-primary); font-size: 14px; font-weight: 800; }
.ops-panel--warn .ops-panel-head { background: #fdf3f4; color: var(--c-danger); }
.ops-panel-head [data-lucide] { width: 17px; height: 17px; }
.ops-panel-body { padding: var(--s-5); }
.ops-panel-note { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--c-fg-3); background: var(--c-bg); border: 1px solid var(--c-divider); border-radius: var(--r-md); padding: 10px 12px; margin-top: var(--s-4); line-height: 1.6; }
.ops-panel-note [data-lucide] { width: 14px; height: 14px; flex: 0 0 14px; margin-top: 2px; color: var(--c-fg-4); }

/* 송장 입력 폼 */
.ops-ship-form { display: grid; grid-template-columns: 180px 1fr auto; gap: 10px; align-items: end; }
.ops-field label { display: block; font-size: 12px; font-weight: 700; color: var(--c-fg-2); margin-bottom: 5px; }
.ops-field select, .ops-field input[type="text"], .ops-field textarea { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--c-border); border-radius: var(--r-md); font-size: 14px; background: #fff; font-family: inherit; }
.ops-field textarea { height: auto; padding: 10px 12px; line-height: 1.6; resize: vertical; }
.ops-field select:focus, .ops-field input:focus, .ops-field textarea:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-tint); }

/* 취소요청 사유 인용 */
.ops-reason { border-left: 3px solid var(--c-danger); background: var(--c-bg); border-radius: 0 var(--r-md) var(--r-md) 0; padding: 12px 14px; margin: 0 0 var(--s-4); }
.ops-reason .who { font-size: 12px; color: var(--c-fg-3); margin-bottom: 4px; }
.ops-reason .msg { font-size: 14px; color: var(--c-fg-1); line-height: 1.65; }
.ops-reason .chip { display: inline-flex; padding: 2px 9px; border-radius: var(--r-pill); background: var(--c-danger-bg); color: var(--c-danger-text); font-size: 11.5px; font-weight: 700; margin-bottom: 6px; }

/* 배송중 트래킹 */
.ops-track { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ops-track .no { font-family: var(--font-mono); font-size: 16px; font-weight: 800; color: var(--c-fg-1); }
.ops-track .carrier { font-size: 13px; color: var(--c-fg-3); }

/* 주문 메모 타임라인 */
.ops-notes { list-style: none; margin: 0; padding: 0; }
.ops-notes li { position: relative; padding: 0 0 var(--s-4) 22px; }
.ops-notes li::before { content: ""; position: absolute; left: 5px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--c-border-strong); }
.ops-notes li::after { content: ""; position: absolute; left: 8px; top: 18px; bottom: 0; width: 2px; background: var(--c-divider); }
.ops-notes li:last-child { padding-bottom: 0; }
.ops-notes li:last-child::after { display: none; }
.ops-notes li.is-sys::before { background: var(--c-primary); }
.ops-notes .t { font-size: 11.5px; color: var(--c-fg-4); font-variant-numeric: tabular-nums; }
.ops-notes .m { font-size: 13px; color: var(--c-fg-1); line-height: 1.6; margin-top: 2px; }
.ops-note-add { display: flex; gap: 8px; margin-top: var(--s-4); }
.ops-note-add input { flex: 1; height: 38px; padding: 0 12px; border: 1px solid var(--c-border); border-radius: var(--r-md); font-size: 13px; }

/* ══════════ D5 — 견적 작성 폼 ══════════ */
.ops-qedit td input { width: 90px; height: 34px; padding: 0 9px; border: 1px solid var(--c-border); border-radius: var(--r-sm); font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
.ops-qedit td input:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 2px var(--c-primary-tint); }
.ops-qedit td input.wide { width: 120px; }
.ops-qedit .rm { color: var(--c-fg-4); background: none; border: 0; cursor: pointer; padding: 4px; }
.ops-qedit .rm:hover { color: var(--c-danger); }
.ops-qedit .rm [data-lucide] { width: 16px; height: 16px; }
.ops-qedit tfoot td { background: var(--c-bg); font-weight: 800; }
.ops-qform-meta { display: grid; grid-template-columns: 160px 1fr; gap: var(--s-4); margin-top: var(--s-4); }

/* ══════════ 확인 모달 (§9.4 · §9.8) ══════════ */
.ops-modal { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 20px; }
.ops-modal.is-open { display: flex; }
.ops-modal-bg { position: absolute; inset: 0; background: rgba(15,23,32,0.55); }
.ops-modal-card { position: relative; width: 100%; max-width: 460px; background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-lg, 0 20px 50px rgba(0,0,0,0.25)); overflow: hidden; }
.ops-modal-head { display: flex; align-items: center; gap: 9px; padding: 16px var(--s-5); border-bottom: 1px solid var(--c-divider); font-size: 15px; font-weight: 800; color: var(--c-fg-1); }
.ops-modal-head [data-lucide] { width: 18px; height: 18px; color: var(--c-primary); }
.ops-modal-head.is-danger [data-lucide] { color: var(--c-danger); }
.ops-modal-body { padding: var(--s-5); font-size: 14px; color: var(--c-fg-2); line-height: 1.7; }
.ops-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px var(--s-5); border-top: 1px solid var(--c-divider); background: var(--c-bg); }
/* 알림톡 발송 고지 */
.ops-notify-note { display: flex; gap: 8px; align-items: flex-start; margin-top: var(--s-3); padding: 10px 12px; border-radius: var(--r-md); background: var(--c-warning-bg); color: var(--c-warning-text); font-size: 12.5px; font-weight: 600; line-height: 1.6; }
.ops-notify-note [data-lucide] { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 1px; }
/* 환불 2단계 — 금액 재확인 */
.ops-refund-amt { text-align: center; border: 1.5px dashed var(--c-danger); border-radius: var(--r-md); padding: var(--s-4); margin: var(--s-4) 0; }
.ops-refund-amt .l { font-size: 12px; color: var(--c-fg-3); }
.ops-refund-amt .v { font-size: 26px; font-weight: 800; color: var(--c-danger); font-variant-numeric: tabular-nums; }
.ops-refund-check { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; color: var(--c-fg-1); }
.ops-refund-check input { margin-top: 3px; }
.ops-modal-steps { display: flex; gap: 6px; align-items: center; font-size: 11.5px; font-weight: 800; color: var(--c-fg-4); margin-left: auto; }
.ops-modal-steps .on { color: var(--c-danger); }
/* 고객측 취소 사유 — 프리셋 칩 */
.ops-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--s-3); }
.ops-chip { padding: 7px 14px; border-radius: var(--r-pill); border: 1px solid var(--c-border); background: #fff; font-size: 13px; font-weight: 600; color: var(--c-fg-2); cursor: pointer; }
.ops-chip.is-on { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }

/* ══════════ 프리뷰 전용 — 상태 시안 전환 스위처 ══════════ */
.ops-demo-switch { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border: 1px dashed var(--c-border-strong); border-radius: var(--r-md); background: #fffdf5; padding: 10px 14px; margin-bottom: var(--s-5); font-size: 12px; color: var(--c-fg-3); }
.ops-demo-switch strong { font-size: 12px; color: var(--c-fg-2); }

/* ══════════ 반응형 (§9.3 — 모바일 처리 1급 유스케이스) ══════════ */
@media (max-width: 1100px) {
  .ops-kpis { grid-template-columns: repeat(4, 1fr); }
  .ops-detail { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .ops-recent { grid-template-columns: 1fr; }
  .ops-tools { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .ops-kpis { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .ops-tools { grid-template-columns: 1fr; }
  .ops-detail--stack > div:last-child { grid-template-columns: 1fr; }
  .ops-ship-form { grid-template-columns: 1fr; }
  .ops-qform-meta { grid-template-columns: 1fr; }
  .ops-toolbar { flex-direction: column; align-items: stretch; }
  .ops-search { min-width: 0; }
  /* 테이블 → 카드 리스트 전환: th 숨기고 td 를 data-th 라벨 그리드로 */
  .ops-table--cards thead { display: none; }
  .ops-table--cards tr { display: block; border-top: 1px solid var(--c-border); padding: 12px 14px; }
  .ops-table--cards tr:first-child { border-top: 0; }
  .ops-table--cards td { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 0; padding: 4px 0; font-size: 13px; }
  .ops-table--cards td.num { text-align: right; }
  .ops-table--cards td::before { content: attr(data-th); font-size: 12px; color: var(--c-fg-3); font-weight: 600; flex: 0 0 auto; }
  .ops-table--cards td.ops-td-main { display: block; padding-bottom: 6px; }
  .ops-table--cards td.ops-td-main::before { display: none; }
  .ops-table--cards td.ops-td-act { display: block; padding-top: 8px; }
  .ops-table--cards td.ops-td-act::before { display: none; }
  .ops-table--cards td.ops-td-act .btn { width: 100%; justify-content: center; }
  .qf-table.ops-table--cards tr.ops-row--warn td:first-child { box-shadow: none; }
  .ops-table--cards tr.ops-row--warn { box-shadow: inset 3px 0 0 var(--c-danger); }
  .ops-table--cards tr.ops-row--soon { box-shadow: inset 3px 0 0 var(--c-warning); }
  .qf-table.ops-table--cards tr.ops-row--new td:first-child { box-shadow: none; }
  .ops-table--cards tr.ops-row--new { box-shadow: inset 3px 0 0 var(--c-primary); }
}