/* Route Quote History — 공용 구간 견적 이력 인라인 패널(assets/js/common/route-quote-history.js 가 그린다).
 * 로드: app/Views/components/html.php (modal.css / common.css 이후).
 * 색=앱 토큰(--bs-*), 폰트=폰트토큰(--font-*), 여백=5px 배수, radius=--bs-radius(-sm), 시맨틱 클래스.
 * 반응형 @media 는 responsive.css 에만 둔다. */

/* ── 패널을 여는 버튼 (호스트 화면의 leg 마다 1개) ── */
.rqh-open-btn {
    white-space: nowrap;
}

/* 좁은 자리(Trip Estimator VIEW 의 액션 셀)용 아이콘 전용 변형. */
.rqh-open-btn--icon {
    padding: 2px 6px;
    line-height: 1;
}

/* 펼쳐진 동안은 눌린 상태로 보여야 "이 행이 열려 있다"가 읽힌다(아코디언이라 하나뿐). */
.rqh-open-btn--active {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: var(--bs-white);
}

/* ── 확장 슬롯 = 한 단 어두운 "바닥" ──
 * 표 안(.rqh-inline-row = colspan 확장행) / 표가 아닌 카드형 leg(.rqh-inline-block) 두 가지.
 * ⚠️ 바닥을 깔지 않으면 흰 데이터 행과 흰 패널이 같은 층으로 보인다(옛 버전은 위쪽 2px 선 하나가
 *    유일한 경계였고, 실제로 "구분이 안 간다"는 지적을 받았다).
 *    행(흰색) → 바닥(회색) → 카드(흰색) 3층으로 쌓아 경계가 선 하나에 의존하지 않게 한다. */
.rqh-inline-row > .rqh-inline-cell {
    position: relative;
    padding: 10px 10px 10px 30px;
    background: var(--bs-bg-secondary);
}

/* 확장행은 정렬·hover 등 표 행 스타일을 따라가면 안 된다(데이터 행이 아니다). */
.rqh-inline-row:hover > .rqh-inline-cell {
    background: var(--bs-bg-secondary);
}

/* 왼쪽 세로 바 = "바로 위 행에 딸린 내용"이라는 연결 표시(옛 위쪽 2px 선의 대체).
 * ⚠️ td 에 display 를 주지 않고 position:relative 만 쓴다 — display 를 바꾸면 행 높이를 못 따라간다. */
.rqh-inline-row > .rqh-inline-cell::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 10px;
    bottom: 10px;
    width: 5px;
    border-radius: 5px;
    background: var(--bs-primary);
}

.rqh-inline-block {
    margin-top: 10px;
    padding: 10px 10px 10px 30px;
    position: relative;
    background: var(--bs-bg-secondary);
    border-radius: var(--bs-radius-sm);
}

.rqh-inline-block::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 10px;
    bottom: 10px;
    width: 5px;
    border-radius: 5px;
    background: var(--bs-primary);
}

/* 패널을 연 행 자체도 물들인다 — 확장행 하나만으로는 "어느 leg 의 이력인지"가 약하다.
 * ⚠️ 특이도 싸움이 있다: 호스트 표가 `.te-legs-view-table tbody td { background: transparent }`(0,1,2) 와
 *    `tbody tr:hover td`(0,2,2) 로 배경을 덮고, 그 파일이 이 파일보다 나중에 로드된다.
 *    여기서 페이지 클래스를 참조하지 않으려고 **클래스를 세 번 반복해 (0,3,2)** 로 올린다 —
 *    호스트가 늘어나도 이 파일만으로 버틴다(공용 컴포넌트라 페이지를 알면 안 된다). */
tr.rqh-host-open.rqh-host-open.rqh-host-open > td {
    background: var(--bs-bg-primary-light);
}

/* ── 패널 본체 = 바닥 위에 뜬 흰 카드 ── */
.rqh-panel {
    border: 1px solid var(--bs-border-muted);
    border-radius: var(--bs-radius-sm);
    background: var(--bs-white);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    padding: 15px;
}

/* ── 헤더 한 줄: 구간 · 부제 · 요약칩 · 닫기 ──
 * 요약을 헤더에 얹어 세로 한 단을 줄인다(모달 시절엔 타일 4칸이 독립된 단이었다). */
.rqh-panel-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.rqh-panel-route {
    font-size: var(--font-normal);
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--bs-primary-dark);
}

/* 부제부터 닫기까지는 오른쪽 끝에 붙인다 — 왼쪽(구간)과 오른쪽(메타·닫기)으로 갈려야 한 줄이 읽힌다. */
.rqh-panel-sub {
    margin-left: auto;
    font-size: var(--font-small);
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--bs-muted);
}

/* ── 요약 밴드 (헤더 아래 독립 줄) ──
 * ⚠️ 칩(흰 배경 + 테두리 + radius)으로 두지 말 것 — 이 앱에서 그건 버튼의 생김새라,
 *    누를 수 없는 수치가 버튼으로 읽힌다(실제로 그 지적을 받아 걷어냈다).
 *    라벨 위 / 값 아래 스택 + 세로 구분선만 남긴다. */
.rqh-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: 15px;
    border-top: 1px solid var(--bs-border-light);
    border-bottom: 1px solid var(--bs-border-light);
}

.rqh-stat {
    display: block;
    padding: 10px 20px 10px 0;
    margin-right: 20px;
    border-right: 1px solid var(--bs-border-light);
}

.rqh-stat:last-child {
    margin-right: 0;
    border-right: none;
}

.rqh-stat-label {
    display: block;
    font-size: var(--font-small);
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--bs-muted);
    margin-bottom: 2px;
}

.rqh-stat-value {
    display: block;
    font-size: var(--font-large);
    font-weight: 800;
    line-height: 1.1;
    color: var(--bs-text);
    font-variant-numeric: tabular-nums;
}

/* 평균이 이 패널의 핵심 지표라 유일하게 강조한다(배경 대신 글자색만). */
.rqh-stat--accent .rqh-stat-value {
    color: var(--bs-primary-dark);
}


.rqh-panel-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--bs-border-muted);
    border-radius: var(--bs-radius-sm);
    color: var(--bs-muted);
    cursor: pointer;
}

.rqh-panel-close:hover {
    background: var(--bs-white);
    color: var(--bs-text);
}

/* ── 차트 : 표 = 0.55 : 0.45 좌우 배치 ──
 * 세로로 쌓으면 확장행이 leg 표를 통째로 밀어낸다.
 * minmax(0,·) 필수 — fr 트랙의 자동 최소값은 min-content 라, 차트 SVG 에 박힌 픽셀 폭이 그대로
 * 트랙 하한이 되어 비율이 깨진다(실측: minmax 없이 쓰면 762px/129px = 0.855).
 * 좁은 화면 세로 스택은 responsive.css. */
.rqh-split {
    display: grid;
    grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr);
    gap: 15px;
    align-items: start;
}

/* ── 금액 추이 라인 그래프 (인라인 SVG, JS renderChart 가 그린다) ── */
.rqh-chart {
    border: 1px solid var(--bs-border-muted);
    border-radius: var(--bs-radius-sm);
    background: var(--bs-white);
    padding: 10px;
}

/* 데이터 0건이면 테두리만 남지 않게 통째로 숨긴다 — JS(renderChart)가 클래스를 붙인다.
 * :empty 를 쓰면 안 된다: 처음 그릴 때 host 는 비어 있으므로 display:none 이 되고,
 * 그 상태의 clientWidth 는 0 이라 차트가 폴백 폭으로 구워져 컨테이너를 안 채운다(실측 560/721). */
.rqh-chart--empty {
    display: none;
}

/* JS 가 컨테이너 폭을 실측해 width/height 를 박아 넣는다 — 여기서 width:100% 로 늘이면 높이까지
 * 비례해 커져 패널이 세로로 폭증한다.
 * max-width 는 안전장치 — 폭이 바뀐 직후 재렌더 전까지 박힌 픽셀 폭이 컨테이너를 넘지 않게. */
.rqh-chart-svg {
    display: block;
    max-width: 100%;
}

.rqh-chart-axis {
    stroke: var(--bs-border-muted);
    stroke-width: 1;
}

/* 최저/최고 눈금선 — 축보다 옅게. */
.rqh-chart-grid {
    stroke: var(--bs-border-light);
    stroke-width: 1;
}

.rqh-chart-line {
    fill: none;
    stroke: var(--bs-primary);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.rqh-chart-dot {
    fill: var(--bs-white);
    stroke: var(--bs-primary);
    stroke-width: 2;
}

/* 평균 기준선 — 실측 데이터(실선)와 구분되게 점선 + 다른 색. */
.rqh-chart-avg {
    stroke: var(--bs-warning-dark);
    stroke-width: 1.5;
    stroke-dasharray: 5 4;
}

.rqh-chart-avg-label {
    fill: var(--bs-warning-dark);
    font-size: var(--font-small);
    font-weight: 700;
}

.rqh-chart-label {
    fill: var(--bs-muted);
    font-size: var(--font-small);
}

/* ── 목록 ── */
.rqh-list {
    background: var(--bs-white);
    border: 1px solid var(--bs-border-muted);
    border-radius: var(--bs-radius-sm);
    padding: 0 10px;
}

/* 견적일(YYYY-MM-DD)이 좁은 컬럼에서 "2026-07-" / "05" 로 접히던 것 방지. */
.rqh-nowrap {
    white-space: nowrap;
}

/* 컬럼 폭 — DataTables autoWidth:false 와 짝. 날짜/금액은 고정, 남는 폭은 기종이 가져간다. */
.rqh-col-date,
.rqh-col-amount {
    width: 120px;
}

/* 좌우 배치에서 표가 좁아지므로 기종명은 줄바꿈으로 흡수한다. 여기를 210px 로 두면 표 최소폭이
 * 390px 이 되어 좁은 패널에서 가로스크롤이 생긴다(실측). 전체 기종명은 차트 툴팁에도 있다. */
.rqh-col-aircraft {
    min-width: 120px;
}

.rqh-amount {
    text-align: right;
    white-space: nowrap;
    font-weight: 700;
}

/* ── 다크 테마 ──
 * 라이트에서 바닥(회색) < 카드(흰색) 였던 명암 관계를 다크에선 뒤집어야 카드가 "떠" 보인다:
 * 바닥 = --bs-bg-light(#212529, 가장 어두움), 카드 = --bs-bg-secondary(#343a40, 한 단 밝음). */
[data-bs-theme="dark"] .rqh-inline-row > .rqh-inline-cell,
[data-bs-theme="dark"] .rqh-inline-row:hover > .rqh-inline-cell,
[data-bs-theme="dark"] .rqh-inline-block {
    background: var(--bs-bg-light);
}

[data-bs-theme="dark"] .rqh-panel {
    background: var(--bs-bg-secondary);
    box-shadow: none;
}

[data-bs-theme="dark"] .rqh-chart,
[data-bs-theme="dark"] .rqh-list {
    background: var(--bs-bg-light);
}