/**
 * 표(AG Grid) 키트 테마 — 시안
 *
 * 키트(ui.css)에는 표 규칙이 없어서, 대표님 전후 비교 HTML(적용전후-재고금액.html)의
 * "적용 후" 표 모양을 키트 색값(tokens.css)으로 옮긴 것.
 *
 * - 공통 head 를 쓰는 전 화면의 표에 적용된다. 특정 표만 예전 모양으로 두려면 class="ws-grid-off".
 * - 매출장(ledger.html·장부조회 ledger-view.html)도 불러온다. 매출장의 주 입력표는 AG Grid 가 아닌 HTML 표라
 *   맨 아래 '매출장 입력표' 규칙으로 같은 모양을 맞춘다 (짝/홀 줄 바탕색·입금 줄 빨간 글씨는 그대로).
 * - 글자색은 직접 지정하지 않는다 (고객별 글자색처럼 줄에 준 색이 칸까지 내려오게). 색은 --ag-*-color 변수로만.
 * - 사용자 색 설정(매입회사 표시설정 등)과 기능용 색(짝/홀 날짜 띠, 변경칸 표시 등)은 더 구체적인 규칙이라 그대로 이긴다.
 * - 행 높이(--ag-row-height)·글꼴(--app-font-family)·글자 크기(--app-font-size)는 사용자 설정을 그대로 따른다.
 *   (목업은 머리 13px / 칸 14px 이지만, 설정 > 화면글자 크기를 덮지 않도록 크기는 건드리지 않음)
 * - 머리줄 글자 굵기는 설정 > "표 제목·버튼 글자굵게" 규칙(ui-typography.css)을 그대로 따른다.
 * - 기존 ag-grid-custom.css 가 !important 로 칸 테두리·글자크기를 박아 두어서 여기서도 !important 로 덮는다.
 */

.ag-theme-alpine:not(.ws-grid-off) {
    --ag-foreground-color: var(--ink);
    --ag-background-color: var(--surface);
    --ag-odd-row-background-color: var(--surface);
    --ag-header-background-color: var(--surface-3);
    --ag-header-foreground-color: var(--ink-2);
    --ag-header-cell-hover-background-color: var(--line-soft);
    --ag-row-hover-color: var(--surface-2);
    --ag-selected-row-background-color: var(--brand-wash);
    --ag-border-color: var(--line);
    --ag-row-border-color: var(--line-soft);
    --ag-header-column-separator-color: var(--line-soft);
    --ag-cell-horizontal-padding: 8px;
    --ag-wrapper-border-radius: var(--r-2);
}

/* 바깥 테두리 — 둥근 모서리 */
.ag-theme-alpine:not(.ws-grid-off) .ag-root-wrapper {
    border: 1px solid var(--line);
    border-radius: var(--r-2);
}

/* ── 머리줄: 옅은 회색, 세로선 없음, 글자는 왼쪽(숫자 칸은 오른쪽) ── */
.ag-theme-alpine:not(.ws-grid-off) .ag-header {
    border-bottom: 1px solid var(--line);
}
.ag-theme-alpine:not(.ws-grid-off) .ag-header-cell {
    border-right: none !important;
    border-bottom: none !important;
    text-align: left !important;
    justify-content: flex-start !important;
}
/* 숫자 칸 머리는 AG Grid 가 row-reverse 로 그려서 flex-start 가 곧 오른쪽 */
.ag-theme-alpine:not(.ws-grid-off) .ag-header-cell-label {
    justify-content: flex-start !important;
}
/* 열 너비 조절 손잡이 — 기능은 그대로, 선만 옅게 */
.ag-theme-alpine:not(.ws-grid-off) .ag-header-cell-resize::after {
    width: 1px;
    height: 14px;
    background: var(--line);
}
.ag-theme-alpine:not(.ws-grid-off) .ag-header-cell:hover .ag-header-cell-resize::after {
    background: var(--ink-3);
}

/* ── 칸: 세로선 없음, 아래 선만 옅게 ── */
.ag-theme-alpine:not(.ws-grid-off) .ag-cell {
    border-right: none !important;
    border-bottom: 1px solid var(--line-soft) !important;
    padding: 0 8px !important;
}
/* 칸을 눌렀을 때도 같은 선 유지 (기존 규칙이 회색 격자선을 다시 그림) */
.ag-theme-alpine:not(.ws-grid-off) .ag-cell-focus,
.ag-theme-alpine:not(.ws-grid-off) .ag-cell:focus,
.ag-theme-alpine:not(.ws-grid-off) .ag-cell-range-selected,
.ag-theme-alpine:not(.ws-grid-off) .ag-cell-range-selected-1,
.ag-theme-alpine:not(.ws-grid-off) .ag-cell-range-single-cell,
.ag-theme-alpine:not(.ws-grid-off) .ag-ltr .ag-cell-focus:not(.ag-cell-range-selected):focus-within {
    border-width: 0 0 1px 0 !important;
    border-color: var(--line-soft) !important;
}
/* 숫자는 자릿수가 세로로 맞게 (글꼴은 그대로, 숫자 폭만 고정) */
.ag-theme-alpine:not(.ws-grid-off) .ag-right-aligned-cell {
    font-variant-numeric: tabular-nums;
}

/* 고른 줄 — 옅은 키트색 + 왼쪽 띠. 매출장은 칸 색(분류·품목색)이 뜻을 가져서 고른 줄 색을 일부러 안 칠함 → 제외 */
body:not(.ledger-page) .ag-theme-alpine:not(.ws-grid-off) .ag-row-selected {
    background-color: var(--brand-wash) !important;
    box-shadow: inset 3px 0 0 0 var(--brand);
}

/* 고정 열 */
.ag-theme-alpine:not(.ws-grid-off) .ag-pinned-left-header,
.ag-theme-alpine:not(.ws-grid-off) .ag-pinned-left-cols-container {
    border-right: 1px solid var(--line);
}
.ag-theme-alpine:not(.ws-grid-off) .ag-pinned-left-header .ag-header-cell,
.ag-theme-alpine:not(.ws-grid-off) .ag-pinned-left-cols-container .ag-cell {
    background-color: var(--surface-2);
}

/* 아래 고정 줄(합계) */
.ag-theme-alpine:not(.ws-grid-off) .ag-floating-bottom {
    border-top: 1px solid var(--line);
}
.ag-theme-alpine:not(.ws-grid-off) .ag-floating-bottom .ag-row {
    background-color: var(--surface-2);
}

/* 정렬 표시 */
.ag-theme-alpine:not(.ws-grid-off) .ag-sort-ascending-icon,
.ag-theme-alpine:not(.ws-grid-off) .ag-sort-descending-icon {
    color: var(--brand);
}

/* 빈 표 안내 */
.ag-theme-alpine:not(.ws-grid-off) .ag-overlay-no-rows-center {
    color: var(--ink-3);
    font-size: var(--fs-2);
}

/* ── 매출장 입력표 (AG Grid 아님 · HTML 표) — 같은 모양으로 ──
   목업(적용전후-매출장.html)의 표: 머리 옅은 회색, 세로선 없음, 가로선만 옅게.
   줄 바탕색(짝/홀 회색 띠), 입금 줄 빨간 글씨, 합계 줄 색은 기존 규칙 그대로 둔다. */
.ledger-page .table-scroll[data-toggle="order-table"] thead th {
    background: var(--surface-3) !important;
    color: var(--ink-2);
    border: 0 !important;
    border-bottom: 1px solid var(--line) !important;
}
.ledger-page .table-scroll[data-toggle="order-table"] tbody td {
    border: 0 !important;
    border-bottom: 1px solid var(--line-soft) !important;
}