/* BaroQ 전용 스타일.
   main.css 는 디자이너 산출물이라 손대지 않고, 프로젝트에서 덧입히는 것만 여기 둔다.
   _Layout 에서 가장 마지막에 로드된다. */

/* 페이지 네비를 카드 헤더 제목 자리에 넣어 쓴다.
   card-header-title 의 font-weight:700 을 그대로 물려받으면 경로 전체가 굵어지므로 되돌린다.
   마지막 마디는 main.css 의 `.breadcrumb li:last-child a { font-weight:600 }` 이 살아 있어
   현재 위치만 도드라진다 */
.card-header .card-header-title .breadcrumb {
    font-weight: 400;
}

/* ---- 파이프라인 (Doc/Pipeline) ----------------------------------------
   문서 상태 순서도. 노드 = 상태(건수), 화살표 = 처리 단계.
   차트 라이브러리 없이 flex 로만 그린다 — 노드 7개짜리 상태도에 의존성을 달 이유가 없다 */

.pipeline {
    padding: 8px 4px;
}

.pl-lane {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 4px 0;
}

.pl-node {
    min-width: 128px;
    padding: 10px 14px;
    border: 1px solid #d8dbe0;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    line-height: 1.35;
}

.pl-node:hover {
    border-color: #7a8699;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}

.pl-node small {          /* 상태 코드 — 로그·DB 와 대조할 때 쓰는 원값 */
    display: block;
    color: #8a919c;
    font-size: 11px;
}

.pl-node span {           /* 상태 이름 */
    display: block;
    font-weight: 600;
}

.pl-node b {               /* 건수 */
    display: block;
    font-size: 22px;
    line-height: 1.2;
}

.pl-node em {              /* 다음에 무슨 일이 일어나는지 */
    display: block;
    font-style: normal;
    color: #8a919c;
    font-size: 11px;
}

.pl-node.is-empty b {
    color: #c3c8cf;
}

.pl-node.is-good  { border-color: #3f9d63; }
.pl-node.is-good b { color: #2f7a4c; }
.pl-node.is-warn  { border-color: #d9a441; }
.pl-node.is-warn b { color: #a97b1f; }
.pl-node.is-bad   { border-color: #cf5f5f; }
.pl-node.is-bad b { color: #b34242; }
.pl-node.is-quiet { border-style: dashed; }

/* 처리 단계 화살표 — 단계 이름을 화살표 위에 얹는다 */
.pl-arrow {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
    color: #6b7280;
    font-size: 12px;
    white-space: nowrap;
}

.pl-arrow span::after {
    content: "→";
    display: inline-block;
    margin-left: 6px;
    font-size: 16px;
    color: #9aa1ab;
}

.pl-arrow small {
    color: #a8aeb8;
    font-size: 10px;
}

/* 갈래 줄 — 본류에서 빠지는 종착 상태들 */
.pl-branch {
    margin-top: 10px;
    gap: 8px;
}

/* 되돌아가는 길 — 순서도의 루프를 글로 박제한다.
   CSS 로 역방향 화살표를 그리면 화면폭 따라 깨진다. 정확한 문장이 낫다 */
.pl-returns {
    margin-top: 14px;
    padding: 10px 14px;
    border-left: 3px solid #d8dbe0;
    color: #6b7280;
    font-size: 12px;
    line-height: 1.9;
}

/* 채널 노드 — 본류보다 작게, 한 묶음으로 */
.pl-group {
    display: flex;
    gap: 6px;
}

.pl-node.pl-src {
    min-width: 86px;
    padding: 8px 10px;
    background: #fafbfc;
}

.pl-node.pl-src b {
    font-size: 17px;
}

/* 스케줄러 점 — 상태가 색이고, 눌러서 멈춤/재개.
   노드 우상단 또는 화살표 라벨 옆에 붙는다 */
.pl-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #c3c8cf;          /* 상태 오기 전 기본 */
    cursor: pointer;
    vertical-align: middle;
}

.pl-node .pl-dot {
    position: absolute;
    top: 8px;
    right: 8px;
}

.pl-node {
    position: relative;
}

.pl-dot.is-run    { background: #3f9d63; }
.pl-dot.is-paused { background: #333;    }
.pl-dot.is-stale  { background: #cf5f5f; box-shadow: 0 0 0 3px rgba(207,95,95,.25); }
.pl-dot.is-fail   { background: #d9a441; }
.pl-dot.is-off    { background: #d8dbe0; cursor: not-allowed; }

.pl-dot:hover {
    filter: brightness(0.85);
}

/* 줄바꿈 커넥터 — 1줄 끝 ↴, 2줄 처음 ↳ 로 흐름이 이어짐을 표시 */
.pl-wrap {
    display: flex;
    align-items: center;
    padding: 0 8px;
    font-size: 22px;
    color: #9aa1ab;
}

.pl-lane2 {
    margin-top: 10px;
}

/* ---- 하네스 배지 (Doc/Pipeline 위에 얹는 주석) -------------------------
   각 처리 단계에 어느 자산(예외·프롬프트·룰북)이 끼어드는지 알린다.

   하네스를 **별도 화면으로 그렸다가 걷어냈다** — 같은 파이프라인을 두 번 그리면
   읽는 사람이 두 그림을 눈으로 이어붙여야 한다. 자산은 흐름 위의 주석이지 별도 지도가 아니다.
   그래서 여기서는 흐름을 가리지 않는 크기로만 붙인다 — 상세는 툴팁으로 내린다 */

.pl-hn {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 5px;
}

.pl-hn a {
    display: block;
    padding: 0 7px;
    border: 1px solid #dde1e6;
    border-radius: 10px;
    background: #f7f9fb;
    color: #7a8290;
    font-size: 10px;
    line-height: 17px;
    white-space: nowrap;
    text-decoration: none;
}

.pl-hn a:hover {
    border-color: #7a8699;
    color: #374151;
}

.pl-hn b {
    color: #4b5563;
    font-weight: 600;
}

/* 문서 상세 안의 의뢰서 블록 — 목록에서 특정 건을 골라 왔을 때 그것만 짚어 준다.
   문서 하나에 의뢰서가 10건까지 나온 적이 있어 표시가 없으면 어느 것인지 못 찾는다
   (2026-08-06 의뢰서 상세를 문서 상세로 통합) */
.inq-block.is-focus {
    border-left: 3px solid #3f9d63;
    padding-left: 10px;
    margin-left: -13px;
}

/* ---- 대시보드 (Doc/Dashboard) — 고객사 견적 담당자용 업무 요약.
   파이프라인(pl-*)과 팔레트를 같이 쓴다: 초록 #3f9d63 / 노랑 #d9a441 / 빨강 #cf5f5f ---- */

/* .dashboard 는 이제 스타일이 없다 — db-* 가 전부 독립 선택자라 훅으로만 남는다.
   폭 제한(max-width:1280px)이 있었는데 걷어냈다: 요약 화면 셋 다 폭을 채운다 */

/* ---- 화면 폭 채우기 ----
   main.css 의 .page-content-inner 는 display:flex 인데 그 안의 .section 에는
   flex-grow 가 없다. 그래서 섹션은 **내용 폭만큼만** 차지하고 남는 자리는 빈다.

   그리드 화면은 표가 가로로 길어 저절로 차서 티가 안 난다.
   티가 나는 건 내용이 좁은 요약 화면 셋 — 대시보드·파이프라인·사용량이다.
   (사용량은 1920 화면에서 섹션이 1001px 에 멈췄다)
   그래서 전역이 아니라 그 셋에만 이 클래스를 단다.

   min-width:0 이 필요한 이유: flex 항목의 기본 min-width 는 auto 라
   안쪽 표가 길어지면 섹션이 컨테이너를 밀고 나가 가로 스크롤이 생긴다 */
.page-content-inner > .section.is-fill {
    flex: 1;
    min-width: 0;
}

.db-tiles {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.db-tile {
    flex: 1;
    min-width: 150px;
    border: 1px solid #d9dde3;
    border-radius: 8px;
    padding: 12px 16px;
    background: #fff;
    cursor: pointer;
}

.db-tile:hover {
    border-color: #7a8699;
}

.db-tile small {           /* 라벨 */
    display: block;
    color: #6b7280;
    font-size: 12px;
}

.db-tile small i {         /* 라벨 옆 기간 표시 */
    font-style: normal;
    color: #9aa1ab;
    font-size: 10px;
}

.db-tile b {               /* 건수 */
    display: block;
    font-size: 26px;
    line-height: 1.3;
    color: #374151;
}

.db-tile em {              /* 부연 — 이 숫자가 무엇인지. 좁은 타일에선 말줄임 */
    display: block;
    font-style: normal;
    color: #9aa1ab;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.db-tile.is-accent { border-color: #3f9d63; }
.db-tile.is-accent b { color: #2f7a4c; }
.db-tile.is-warn { border-color: #d9a441; }
.db-tile.is-warn b { color: #a97b1f; }
.db-tile.is-bad { border-color: #cf5f5f; }
.db-tile.is-bad b { color: #b34242; }
.db-tile.is-quiet { border-style: dashed; }

.db-block {
    margin-top: 22px;
}

.db-block h4, .db-col h4, .db-chart-box h4 {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.db-block h4 span, .db-col h4 span, .db-chart-box h4 span {
    font-weight: 400;
    color: #9aa1ab;
    font-size: 12px;
    margin-left: 6px;
}

.db-bar {
    display: flex;
    height: 14px;
    border-radius: 7px;
    overflow: hidden;
    background: #eef0f3;
}

.db-bar i {
    display: block;
}

/* 예산 게이지 — 소진분. 넘긴 상태는 붉게(막대는 100% 에서 잘려 색만 다르다) */
.db-bar .is-used { background: #3f9d63; }
.db-bar .is-over { background: #cf5f5f; }

/* 소진 예상일 — 부연(em) 안에 있지만 그 회색 그대로면 놓친다.
   임박도에 따라 색이 세진다: 안 급한 날짜까지 붉게 하면 정작 급할 때 눈에 안 걸린다 */
.db-tile em .is-due          { font-size: 12px; font-weight: 600; color: #4b5563; }
.db-tile em .is-due.is-soon  { color: #a97b1f; }
.db-tile em .is-due.is-now   { color: #b34242; }

.db-bar .is-accept, .db-legend .is-accept { background: #3f9d63; }
.db-bar .is-reject, .db-legend .is-reject { background: #cf5f5f; }
.db-bar .is-resubmit, .db-legend .is-resubmit { background: #d9a441; }
.db-bar .is-none, .db-legend .is-none { background: #c3c9d1; }

.db-legend {
    margin-top: 8px;
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    font-size: 12px;
    color: #6b7280;
}

.db-legend i {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    margin-right: 5px;
    vertical-align: -1px;
}

.db-cols {
    display: flex;
    gap: 24px;
    margin-top: 22px;
    flex-wrap: wrap;
}

.db-col {
    flex: 1;
    min-width: 380px;
}

.db-table {
    width: 100%;
    font-size: 12px;
    border-collapse: collapse;
}

.db-table th {
    text-align: left;
    color: #6b7280;
    font-weight: 500;
    border-bottom: 1px solid #d9dde3;
    padding: 4px 8px;
    white-space: nowrap;
}

.db-table td {
    border-bottom: 1px solid #eef0f3;
    padding: 5px 8px;
    color: #374151;
    white-space: nowrap;
}

.db-table th.is-num, .db-table td.is-num {
    text-align: right;
}

.db-table td.is-clip {
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.db-table td.is-reason {
    max-width: 200px;
    white-space: nowrap;
}

.db-table td.is-empty {
    color: #9aa1ab;
    text-align: center;
    padding: 18px 0;
}

.db-table tbody tr[data-doc] {
    cursor: pointer;
}

.db-table tbody tr[data-doc]:hover td {
    background: #f7f9fb;
}

.db-badge {
    display: inline-block;
    padding: 0 8px;
    border-radius: 9px;
    font-size: 11px;
    line-height: 18px;
    color: #fff;
}

.db-badge.is-accepted { background: #3f9d63; }
.db-badge.is-rejected { background: #cf5f5f; }
.db-badge.is-resubmit { background: #d9a441; }
.db-badge.is-none { background: #c3c9d1; color: #4b5563; }

/* 파이프라인 스케줄러 조작 줄 — 순서도 위에 얹는 도구 띠.
   기간 조회(헤더)와 성격이 달라 카드 안쪽 한 줄로 내렸다 (2026-08-06) */
.pl-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid #eef0f3;
}

.pl-toolbar .ml-auto {
    margin-left: auto;
}

/* 대시보드 차트 — echarts(f/w 규약 경로에서 지연 로드).
   높이를 CSS 로 고정한다: echarts 는 컨테이너 높이가 0 이면 아무것도 안 그리고 오류도 안 낸다 */
.db-charts {
    display: flex;
    gap: 24px;
    margin-top: 26px;
    flex-wrap: wrap;
}

/* 열 = 축을 공유하는 묶음. 날짜축 둘을 한 열에 세로로 두어 폭을 맞춘다 */
.db-chart-col {
    flex: 1;
    min-width: 340px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.db-chart-col.is-wide {
    flex: 2;
    min-width: 460px;
}

.db-chart {
    height: 200px;
}

/* 매출처 8줄이 옆 열 두 개 높이에 맞선다 */
.db-chart.is-tall {
    height: 420px;
}

/* 사용량 표의 고객사 소계 줄 — 정산에서 실제로 쓰는 숫자라 눈에 먼저 들어와야 한다 */
.db-table tr.is-sum td {
    background: #f7f9fb;
    border-top: 1px solid #d9dde3;
}

/* ---- 사용자 관리: 삭제 예정 행 -------------------------------------------
   그리드는 Batch 모드에서 삭제 버튼을 누르면 tr.delete 를 붙이면서 행을 hide() 한다.
   그러면 목록에서 사라져 저장 전에 무엇이 지워질지 확인할 수 없다.
   붉은 배경은 grid.css 의 tr.delete 규칙(#feecf0)에 이미 있으니 다시 보이게만 한다.
   프레임워크가 인라인 style="display:none" 을 박기 때문에 !important 가 필요하다 */

#pUserList .grid-body tbody.item tr.delete {
    display: table-row !important;
}

    /* 기본 #feecf0 은 너무 옅어 "지워질 행" 으로 안 읽힌다. 앱의 붉은 계열 값을 쓴다 */
    #pUserList .grid-body tbody.item tr.delete td {
        background-color: #fbe3e3;
        color: #b34242;
    }