/**
 * TUI Grid 공통 스타일
 */

/* ============================================
   그리드 컨테이너
   ============================================ */
.tui-grid-container {
    border: none;
    border-radius: 0 0 8px 8px;
    overflow: hidden;
    font-family: inherit;
    background-color: #fff;
}

/* ============================================
   스크롤바 설정
   ============================================ */

/* 가로 스크롤 숨김 */
.tui-grid-scrollbar-x-inner-border,
.tui-grid-scrollbar-x-outer-border,
.tui-grid-scrollbar-x,
.tui-grid-scrollbar-right-bottom,
.tui-grid-scrollbar-left-bottom,
.tui-grid-scrollbar-corner {
    display: none !important;
}

/* 세로 스크롤바 - 기본값 유지하고 색상만 변경 */
.tui-grid-scrollbar-y-outer-border {
    background: #f1f5f9 !important;
}

.tui-grid-scrollbar-y-inner-border {
    background: #e2e8f0 !important;
}

.tui-grid-scrollbar-thumb {
    background: #64748b !important;
    border-radius: 4px !important;
}

.tui-grid-scrollbar-thumb:hover {
    background: #475569 !important;
}

/* ============================================
   헤더 영역 - 하늘색 배경
   ============================================ */
.tui-grid-header-area {
    background-color: #eff6ff;
    border-bottom: 1px solid #dbeafe;
}

.tui-grid-header-area .tui-grid-table {
    border-collapse: collapse;
}

.tui-grid-header-area .tui-grid-cell {
    height: 48px;
    padding: 0 10px;
    border: none;
    background-color: #eff6ff;
    color: #64748b;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    vertical-align: middle;
}

.tui-grid-header-area .tui-grid-cell-content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* 정렬 버튼 */
.tui-grid-sort-btn {
    color: #94a3b8;
}

.tui-grid-sort-btn.tui-grid-sort-btn-active {
    color: #3b82f6;
}

/* ============================================
   바디 영역
   ============================================ */
.tui-grid-body-area {
    background-color: #fff;
}

.tui-grid-body-area .tui-grid-cell {
    padding: 5px;
    border-right: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
    color: #374151;
    font-size: 15px;
    font-weight: 400;
    text-align: center;
    background-color: #fff;
    transition: background-color 0.2s;
    box-sizing: border-box;
    vertical-align: middle;
}

/* 바디 마지막 컬럼 */
.tui-grid-body-area .tui-grid-cell:last-child {
    border-right: none;
}

/* 호버 효과 */
.tui-grid-body-area .tui-grid-row:hover .tui-grid-cell {
    background-color: rgba(59, 130, 246, 0.05) !important;
}

/* 선택된 행 */
.tui-grid-body-area .tui-grid-row.tui-grid-row-selected .tui-grid-cell {
    background-color: #eff6ff;
}

/* ============================================
   이미지 셀
   ============================================ */
.tui-grid-cell img {
    border-radius: 6px;
    object-fit: cover;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
}

.tui-grid-cell img:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ============================================
   테두리 라인 숨김
   ============================================ */
.tui-grid-border-line-top,
.tui-grid-border-line-bottom,
.tui-grid-border-line-left,
.tui-grid-border-line-right {
    background-color: transparent !important;
}

/* 컬럼 리사이즈 핸들 */
.tui-grid-column-resize-handle {
    background-color: transparent;
}

/* 로딩 레이어 */
.tui-grid-layer-state {
    background-color: rgba(255, 255, 255, 0.9);
}

.tui-grid-layer-state-content {
    color: #475569;
}

/* ============================================
   반응형
   ============================================ */
@media (max-width: 992px) {
    .tui-grid-header-area .tui-grid-cell {
        font-size: 12px;
        padding: 10px 8px;
    }
    .tui-grid-body-area .tui-grid-cell {
        font-size: 13px;
        padding: 8px;
    }
}

@media (max-width: 768px) {
    .tui-grid-header-area .tui-grid-cell {
        font-size: 11px;
        padding: 8px 6px;
    }
    .tui-grid-body-area .tui-grid-cell {
        font-size: 12px;
        padding: 6px;
    }
    .tui-grid-cell img {
        width: 70px !important;
        height: 70px !important;
    }
}

/* ============================================
   다크모드
   ============================================ */
[data-bs-theme="dark"] .tui-grid-container {
    background-color: #0f172a;
}

/* 다크모드 스크롤바 */
[data-bs-theme="dark"] .tui-grid-scrollbar-y-outer-border {
    background: #1e293b !important;
}

[data-bs-theme="dark"] .tui-grid-scrollbar-y-inner-border {
    background: #334155 !important;
}

[data-bs-theme="dark"] .tui-grid-scrollbar-thumb {
    background: #64748b !important;
}

[data-bs-theme="dark"] .tui-grid-scrollbar-thumb:hover {
    background: #94a3b8 !important;
}

[data-bs-theme="dark"] .tui-grid-container *::-webkit-scrollbar-track:vertical {
    background: #1e293b;
}

[data-bs-theme="dark"] .tui-grid-container *::-webkit-scrollbar-thumb:vertical {
    background: #64748b;
}

[data-bs-theme="dark"] .tui-grid-container *::-webkit-scrollbar-thumb:vertical:hover {
    background: #94a3b8;
}

/* 다크모드 헤더 */
[data-bs-theme="dark"] .tui-grid-header-area {
    background-color: #1e3a5f;
    border-bottom-color: #334155;
}

[data-bs-theme="dark"] .tui-grid-header-area .tui-grid-cell {
    background-color: #1e3a5f;
    border: none;
    color: #94a3b8;
}

/* 다크모드 바디 */
[data-bs-theme="dark"] .tui-grid-body-area {
    background-color: #0f172a;
}

[data-bs-theme="dark"] .tui-grid-body-area .tui-grid-cell {
    background-color: #0f172a;
    border-right-color: #1e293b;
    border-bottom-color: #1e293b;
    color: #e5e7eb;
}

/* 다크모드 호버 */
[data-bs-theme="dark"] .tui-grid-body-area .tui-grid-row:hover .tui-grid-cell {
    background-color: rgba(59, 130, 246, 0.1) !important;
}

/* 다크모드 정렬 버튼 */
[data-bs-theme="dark"] .tui-grid-sort-btn {
    color: #64748b;
}

[data-bs-theme="dark"] .tui-grid-sort-btn.tui-grid-sort-btn-active {
    color: #60a5fa;
}

/* 다크모드 로딩 */
[data-bs-theme="dark"] .tui-grid-layer-state {
    background-color: rgba(15, 23, 42, 0.9);
}

[data-bs-theme="dark"] .tui-grid-layer-state-content {
    color: #e2e8f0;
}