/* Ground Handler Cost History — 공용 GH 비용 이력 인라인 패널
 * (assets/js/common/ground-handler-cost-history.js 가 그린다).
 * 로드: app/Views/components/html.php (modal.css / common.css 이후).
 * 색=앱 토큰(--bs-*), 폰트=폰트토큰(--font-*), 여백=5px 배수, radius=--bs-radius(-sm), 시맨틱 클래스.
 * 반응형 @media 는 responsive.css 에만 둔다.
 *
 * 구간 견적 이력(route-quote-history.css)과 뼈대가 같다(요약 밴드 + 차트|표 좌우).
 * 클래스를 공유하지 않고 따로 두는 이유는, 두 패널이 한 화면에 동시에 존재하고(같은 leg 행의
 * 아이콘 2개) 컬럼 구성·툴팁 내용이 다르기 때문이다 — 공용화하면 한쪽 수정이 다른 쪽을 깬다. */

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

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

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

/* ── 확장 슬롯 = 한 단 어두운 "바닥" ──
 * 행(흰색) → 바닥(회색) → 카드(흰색) 3층으로 쌓아 경계가 선 하나에 의존하지 않게 한다. */
.ghh-inline-row > .ghh-inline-cell {
    position: relative;
    padding: 10px 10px 10px 30px;
    background: var(--bs-bg-secondary);
}

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

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

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

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

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

/* ── 패널 본체 = 바닥 위에 뜬 흰 카드 ── */
.ghh-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;
}

/* ── 헤더 한 줄: 공항 · 부제 · 닫기 ── */
.ghh-panel-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

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

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

.ghh-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;
}

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

/* ── 요약 밴드 (헤더 아래 독립 줄) ──
 * ⚠️ 칩(흰 배경 + 테두리 + radius)으로 두지 말 것 — 이 앱에서 그건 버튼의 생김새라,
 *    누를 수 없는 수치가 버튼으로 읽힌다. 라벨 위 / 값 아래 스택 + 세로 구분선만 남긴다. */
.ghh-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);
}

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

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

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

.ghh-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;
}

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

/* ── 통화 칸(요약 밴드 첫 칸) ──
 * 통화가 2종 이상이면 이 칸이 select2 가 된다(라벨 없음 — 컨트롤이 통화를 그대로 보여주고
 * 앱의 다른 select2 와 같은 생김새라 설명이 필요 없다). 1종이면 라벨 + .ghh-stat-value 다
 * (옵션 하나짜리 드롭다운은 누를 수 없는 컨트롤이라 만들지 않는다 — 실전 기본 경로).
 *
 * ⭐ 생김새는 **앱 전역 select2 그대로** 둔다(사용자 결정, 2026-08-31).
 *    한때 이 칸만 컴팩트 알약 + 직접 그린 캐럿으로 바꿨었는데, 앱의 다른 select 과 달라 보여
 *    되돌렸다. 라벨 없이 세로 가운데로만 맞춘다 — 그 외 크기·색은 건드리지 않는다.
 *
 * ⚠️ 딱 하나 남는 override 는 **폭**이다. 이 패널은 Trip Estimator 의 leg 표 안에 펼쳐지는데
 *    그 페이지 CSS 의 `.te-legs-table .select2-container { width: 100% !important }` 가
 *    이 파일보다 나중에 로드돼, 그냥 두면 select 이 요약 밴드를 통째로 먹는다(실측).
 *    페이지 클래스를 참조하지 않으려고 **클래스를 두 번 반복해 (0,3,0)** 으로 올린다
 *    (tr.ghh-host-open 삼중 반복과 같은 이유). */
/* select 인 칸만 세로 가운데. 통화 1종일 때는 라벨 위 / 값 아래 스택이라 건드리면 안 된다. */
.ghh-stat--currency--select {
    display: flex;
    align-items: center;
}

/* 폭 고정 이유는 .te-legs-table 의 `.select2-container{width:100%!important}` 를 이기기 위해서다
 * (클래스 반복으로 특이도를 올린다). 값은 가장 긴 선택지 기준 — `USD (converted) (12)` 가 안 잘리는 폭.
 * ⚠️ 선택지 문구를 늘리면 여기도 같이 봐야 한다. 잘려도 에러가 안 나서 눈으로만 잡힌다. */
.ghh-stat--currency.ghh-stat--currency .select2-container {
    width: 190px !important;
}

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

/* ── 방문별 금액 추이 라인 그래프 (인라인 SVG, JS renderChart 가 그린다) ── */
.ghh-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 이라 차트가 폴백 폭으로 구워져 컨테이너를 안 채운다. */
.ghh-chart--empty {
    display: none;
}

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

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

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

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

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

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

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

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

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

/* 용역일(YYYY-MM-DD)이 좁은 컬럼에서 접히는 것 방지. */
.ghh-nowrap {
    white-space: nowrap;
}

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

/* 좌우 배치에서 표가 좁아지므로 업체명은 줄바꿈으로 흡수한다. 140px 로 두면 표 최소폭이 380px 이
 * 되어 좁은 패널에서 가로스크롤이 생긴다(구간 견적 이력에서 실측한 값과 같은 이유). */
.ghh-col-handler {
    min-width: 120px;
}

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

/* 합쳐진 청구서 건수 — 업체명 아래 한 단 작게. "이 금액이 왜 합계인지"의 근거라 지우지 말 것. */
.ghh-bill-count {
    display: block;
    font-size: var(--font-small);
    color: var(--bs-muted);
}

/* 합계라는 사실을 패널 안에서 밝히는 각주 — Bill 목록의 개별 금액과 달라 보이는 것을 막는다. */
.ghh-note {
    margin: 10px 0 0;
    font-size: var(--font-small);
    color: var(--bs-muted);
}

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

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

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