/* ============================================================
   TMS Grid Styles — Tabulator 커스텀 테마
   css/grid.css
   ============================================================ */

/* ── 그리드 마운트 포인트 — display:block 만 보장 ──
   width / min-width 는 각 페이지 HTML 인라인 스타일로 제어
   (fitColumns: 불필요, fitData: min-width 를 컬럼 합산으로 지정)
   ★ !important 로 덮으면 fitData 의 min-width 가 무효화되므로 제거
── */
[id$="Grid"] {
    display: block !important;
}

@font-face {
    font-family: 'S-CoreDream-3Light';
    src: url('../font/S-CoreDream-3Light.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Pretendard';
    src: url('../font/PretendardVariable.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('../font/NanumSquareNeo-Variable.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-display: swap;
}

/* ── 기본 Tabulator 변수 재정의 ── */
.tabulator {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    /*font-family: var(--font-main);*/
    font-family: 'NanumSquareNeo';
    font-size: 13px;
    background: var(--bg-card);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    /*
   * ★ width / min-width !important 제거
   *   fitColumns → grid-utils.js 에서 초기화 전 px 설정 후 100% 복원
   *   fitData    → HTML 인라인 min-width(컬럼 합산) 를 그대로 사용
   *   !important 로 덮으면 두 방식 모두 헤더-바디 너비 불일치 발생
   */
    box-sizing: border-box;
}

    /* ★ 헤더 전체 행 — display:block 유지, width 강제 제거
   Tabulator 가 내부적으로 컬럼 합산 너비를 헤더에 적용하므로
   width:100% !important 로 덮으면 바디와 너비가 달라져 정렬 불일치 */
    .tabulator .tabulator-header {
        display: block !important;
        overflow: hidden;
    }

        .tabulator .tabulator-header .tabulator-headers {
            display: flex !important;
            flex-direction: row !important;
            flex-wrap: nowrap !important;
            /*
   * width:100% !important 제거
   * → 이 값이 있으면 헤더 내부 컬럼들이 100% 기준으로 렌더링되어
   *   실제 데이터 행 너비와 달라지고, 컬럼 리사이즈 드래그도 불가해짐
   */
            min-height: 40px;
        }

    /* ── 헤더 배경/보더 ── */
    .tabulator .tabulator-header {
        background: #f8f9fc !important;
        border-bottom: 2px solid var(--border) !important;
    }

        .tabulator .tabulator-header .tabulator-col {
            background: transparent !important;
            border-right: 1px solid var(--border-light) !important;
            color: var(--text-secondary) !important;
            font-weight: 600 !important;
            font-size: 12px !important;
            letter-spacing: 0.02em;
            text-transform: none;
            padding: 0 12px !important;
            height: 40px !important;
            /* ★ 컬럼 자체는 인라인 플렉스로 제목과 소터를 가로 정렬 */
            display: inline-flex !important;
            flex-direction: row !important;
            align-items: center !important;
            flex-shrink: 0;
            box-sizing: border-box;
            vertical-align: top;
        }

            .tabulator .tabulator-header .tabulator-col:hover {
                background: var(--primary-light);
            }

            .tabulator .tabulator-header .tabulator-col.tabulator-col-sorter-asc .tabulator-col-sorter-triangle {
                border-bottom-color: var(--primary);
            }

            .tabulator .tabulator-header .tabulator-col.tabulator-col-sorter-desc .tabulator-col-sorter-triangle {
                border-top-color: var(--primary);
            }

            .tabulator .tabulator-header .tabulator-col .tabulator-col-title {
                padding: 0;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

    /* ── 행 ── */
    .tabulator .tabulator-tableholder .tabulator-table .tabulator-row {
        border-bottom: 1px solid var(--border-light);
        transition: background var(--transition);
        min-height: 38px;
    }

        .tabulator .tabulator-tableholder .tabulator-table .tabulator-row:hover {
            background: var(--primary-50) !important;
            cursor: pointer;
        }

        .tabulator .tabulator-tableholder .tabulator-table .tabulator-row.row-selected {
            background: var(--primary-light) !important;
        }

        .tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell {
            padding: 6px 12px;
            border-right: 1px solid var(--border-light);
            vertical-align: middle;
            color: var(--text-primary);
            font-size: 13px;
            line-height: 1.4;
            overflow: hidden;
            text-overflow: ellipsis;
        }

            .tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell:last-child {
                border-right: none;
            }

        /* 짝수 행 */
        .tabulator .tabulator-tableholder .tabulator-table .tabulator-row:nth-child(even) {
            background: #fafbfd;
        }

    /* ── 반응형 expand 버튼 ── */
    .tabulator .tabulator-responsive-collapse-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: var(--primary-light);
        color: var(--primary);
        border: none;
        cursor: pointer;
        font-size: 13px;
    }

    .tabulator .tabulator-responsive-collapse {
        background: #f0f4ff;
        padding: 8px 16px;
        font-size: 12px;
        border-bottom: 1px solid var(--border-light);
    }

        .tabulator .tabulator-responsive-collapse table td {
            padding: 4px 8px;
        }

            .tabulator .tabulator-responsive-collapse table td:first-child {
                color: var(--text-secondary);
                font-weight: 600;
                width: 110px;
            }

    /* ── 페이지네이션 ── */
    .tabulator .tabulator-footer {
        background: #f8f9fc;
        border-top: 1px solid var(--border);
        padding: 6px 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 6px;
    }

        .tabulator .tabulator-footer .tabulator-page-size {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            color: var(--text-secondary);
        }

            .tabulator .tabulator-footer .tabulator-page-size select {
                border: 1px solid var(--border);
                border-radius: var(--radius-sm);
                padding: 2px 6px;
                font-size: 12px;
                color: var(--text-primary);
                background: #fff;
            }

        .tabulator .tabulator-footer .tabulator-paginator {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .tabulator .tabulator-footer .tabulator-page {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 30px;
            height: 28px;
            padding: 0 8px;
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            background: #fff;
            color: var(--text-secondary);
            font-size: 12px;
            cursor: pointer;
            transition: all var(--transition);
        }

            .tabulator .tabulator-footer .tabulator-page:hover {
                background: var(--primary-light);
                border-color: var(--primary);
                color: var(--primary);
            }

            .tabulator .tabulator-footer .tabulator-page.active {
                background: var(--primary);
                border-color: var(--primary);
                color: #fff;
                font-weight: 600;
            }

            .tabulator .tabulator-footer .tabulator-page[disabled] {
                opacity: 0.4;
                cursor: not-allowed;
            }

        .tabulator .tabulator-footer .tabulator-counter {
            font-size: 12px;
            color: var(--text-secondary);
        }

    /* ── 빈 데이터 ── */
    .tabulator .tabulator-placeholder {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 160px;
    }

.grid-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 20px;
    color: var(--text-muted);
}

    .grid-empty i {
        font-size: 40px;
        opacity: 0.35;
    }

    .grid-empty p {
        font-size: 14px;
        font-weight: 500;
    }

/* ── 로딩 오버레이 ── */
.tabulator .tabulator-loading-msg {
    background: rgba(255,255,255,0.92);
    color: var(--primary);
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--radius-md);
}

/* ── 배지 스타일 ── */
.grid-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

    .grid-badge.active {
        background: #e6f9f0;
        color: #0ca678;
    }

    .grid-badge.inactive {
        background: #fef2f2;
        color: #e03131;
    }

    .grid-badge.processing {
        background: #fffbe6;
        color: #d97706;
    }

    .grid-badge.pending {
        background: #f0f4ff;
        color: #3b5bdb;
    }

    .grid-badge.info {
        background: #e0f2fe;
        color: #0369a1;
    }

    .grid-badge.warning {
        background: #fff7ed;
        color: #c2410c;
    }

    .grid-badge.secondary {
        background: #f3f4f6;
        color: #374151;
    }

    .grid-badge.default {
        background: #f0f0f0;
        color: #555;
    }

/* ── 그리드 액션 버튼 ── */
.grid-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: center;
}

.grid-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.16s;
}

    .grid-action-btn.view {
        background: #e0f2fe;
        color: #0369a1;
    }

    .grid-action-btn.edit {
        background: #e0e7ff;
        color: #4338ca;
    }

    .grid-action-btn.delete {
        background: #fee2e2;
        color: #b91c1c;
    }

    .grid-action-btn.print {
        background: #f0fdf4;
        color: #16a34a;
    }

    .grid-action-btn.send {
        background: #fefce8;
        color: #ca8a04;
    }

    .grid-action-btn.link {
        background: #f5f3ff;
        color: #7c3aed;
    }

    .grid-action-btn:hover {
        filter: brightness(0.9);
        transform: scale(1.1);
    }

    .grid-action-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
        transform: none;
    }

/* ── 그리드 래퍼 ── */
.grid-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    overflow: visible;
}

/*
 * .tabulator-tableholder 스크롤
 *   overflow-x: auto  → fitData 모드에서 바디 가로 스크롤
 *   overflow-y: auto  → 세로 스크롤
 * !important 유지 (Tabulator 기본 스타일 덮어쓰기 필요)
 */
.tabulator .tabulator-tableholder {
    overflow-x: auto !important;
    overflow-y: auto !important;
}

    /*
 * 헤더·테이블 min-width: 100%
 * → fitColumns 에서 컨테이너보다 좁아지는 현상 방지
 * → fitData 에서는 Tabulator 가 컬럼 합산 너비로 자동 계산하므로
 *   이 규칙이 영향 없음 (컬럼 합산 > 100% 이므로)
 */
    .tabulator .tabulator-header,
    .tabulator .tabulator-tableholder .tabulator-table {
        min-width: 100%;
    }

        /* 최소 컬럼 너비 */
        .tabulator .tabulator-header .tabulator-col,
        .tabulator .tabulator-row .tabulator-cell {
            min-width: 40px;
        }

.grid-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    flex-wrap: wrap;
    gap: 8px;
}

    .grid-toolbar .grid-info {
        font-size: 13px;
        color: var(--text-secondary);
    }

        .grid-toolbar .grid-info strong {
            color: var(--primary);
            font-weight: 700;
        }

    .grid-toolbar .grid-controls {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
    }

/* ── 모바일 ── */
@media (max-width: 768px) {
    .tabulator .tabulator-header .tabulator-col {
        font-size: 11px;
        padding: 0 8px;
        height: 36px;
    }

    .tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell {
        font-size: 12px;
        padding: 5px 8px;
    }

    .tabulator .tabulator-footer {
        padding: 4px 8px;
    }

    .grid-toolbar {
        padding: 6px 10px;
        gap: 6px;
    }

    .grid-badge {
        font-size: 10px;
        padding: 1px 6px;
    }

    .grid-action-btn {
        width: 26px;
        height: 26px;
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .tabulator .tabulator-footer {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ── 컬럼 이동 ── */
.tabulator .tabulator-col.tabulator-moving {
    background: var(--primary-light) !important;
    border: 2px dashed var(--primary) !important;
    opacity: 0.8;
}

/* ── 스크롤바 ── */
.tabulator .tabulator-tableholder::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.tabulator .tabulator-tableholder::-webkit-scrollbar-track {
    background: #f0f0f0;
}

.tabulator .tabulator-tableholder::-webkit-scrollbar-thumb {
    background: #c0c8d8;
    border-radius: 3px;
}

    .tabulator .tabulator-tableholder::-webkit-scrollbar-thumb:hover {
        background: #9aa5b4;
    }

/* ── 환경설정 탭 ── */
.settings-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--border);
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.settings-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    transition: all 0.18s;
}

    .settings-tab:hover {
        background: var(--bg-secondary);
        color: var(--text);
    }

    .settings-tab.active {
        color: var(--primary);
        border-bottom-color: var(--primary);
        background: var(--primary-light);
        font-weight: 600;
    }

.settings-panel {
    animation: fadeIn 0.2s ease;
}

/* ── 로우 선택(배차연동 등) ── */
.tabulator .tabulator-row.tabulator-selected {
    background: #eff6ff !important;
}

    .tabulator .tabulator-row.tabulator-selected:hover {
        background: #dbeafe !important;
    }

/* ── bottomCalc 합계 행 ── */
.tabulator .tabulator-footer .tabulator-calcs-holder {
    background: #f0f4ff !important;
    border-top: 2px solid var(--primary) !important;
}

    .tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row {
        background: #f0f4ff !important;
    }

    .tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-cell {
        font-weight: 700 !important;
        color: var(--primary) !important;
        font-size: 13px !important;
        padding: 8px 12px !important;
        border-right: 1px solid #c7d7f8 !important;
    }

        .tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-cell:last-child {
            border-right: none !important;
        }