/* 테이블 및 데이터 표시 컴포넌트 스타일 */

/* 기본 테이블 스타일 */
.table {
    width: 100%;
    margin-bottom: 1rem;
    color: var(--text-primary);
    border-collapse: collapse;
}

.table th,
.table td {
    padding: 0.75rem;
    vertical-align: top;
    border-top: 1px solid var(--border-default);
}

.table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid var(--border-default);
    font-weight: 600;
    color: var(--text-primary);
    background-color: var(--bg-canvas-subtle);
}

.table tbody + tbody {
    border-top: 2px solid var(--border-default);
}

/* 테이블 변형 */
.table-sm th,
.table-sm td {
    padding: 0.3rem;
}

.table-bordered {
    border: 1px solid var(--border-default);
}

.table-bordered th,
.table-bordered td {
    border: 1px solid var(--border-default);
}

.table-bordered thead th,
.table-bordered thead td {
    border-bottom-width: 2px;
}

.table-borderless th,
.table-borderless td,
.table-borderless thead th,
.table-borderless tbody + tbody {
    border: 0;
}

/* 테이블 색상 변형 */
.table-dark {
    color: var(--text-primary);
    background-color: var(--bg-canvas-inset);
}

.table-dark th,
.table-dark td,
.table-dark thead th {
    border-color: var(--border-muted);
}

.table-dark.table-bordered {
    border: 0;
}

.table-dark.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.05);
}

.table-dark.table-hover tbody tr:hover {
    color: var(--text-primary);
    background-color: rgba(255, 255, 255, 0.075);
}

/* 줄무늬 테이블 */
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(139, 148, 158, 0.05);
}

/* 호버 테이블 */
.table-hover tbody tr:hover {
    color: var(--text-primary);
    background-color: rgba(139, 148, 158, 0.075);
}

/* 반응형 테이블 */
.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-responsive > .table {
    margin-bottom: 0;
}

/* 반응형 브레이크포인트별 */
.table-responsive-sm {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-responsive-md {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-responsive-lg {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-responsive-xl {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* 코드 블록 스타일 */
.code-block {
    background-color: var(--bg-canvas);
    border: 1px solid var(--border-default);
    border-radius: 0.375rem;
    padding: 1rem;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--text-primary);
    overflow-x: auto;
    white-space: pre;
}

.code-block::-webkit-scrollbar {
    height: 8px;
}

.code-block::-webkit-scrollbar-track {
    background: var(--bg-canvas-subtle);
}

.code-block::-webkit-scrollbar-thumb {
    background: var(--border-default);
    border-radius: 4px;
}

/* JSON 뷰어 스타일 */
.json-viewer {
    background-color: var(--bg-canvas);
    border: 1px solid var(--border-default);
    border-radius: 0.375rem;
    padding: 1rem;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--text-primary);
    overflow-x: auto;
    max-height: 400px;
    overflow-y: auto;
}

/* JSON 신택스 하이라이팅 */
.json-key {
    color: #79c0ff; /* GitHub Blue */
    font-weight: 600;
}

.json-string {
    color: #a5d6ff; /* GitHub Light Blue */
}

.json-number {
    color: #79c0ff; /* GitHub Blue */
}

.json-boolean {
    color: #ffa657; /* GitHub Orange */
    font-weight: 600;
}

.json-null {
    color: #8b949e; /* GitHub Gray */
    font-style: italic;
}

.json-bracket {
    color: var(--text-secondary);
    font-weight: bold;
}

.json-comma {
    color: var(--text-secondary);
}

/* 테이블 행 상태 */
.table tr.table-active {
    background-color: rgba(88, 166, 255, 0.1);
}

.table tr.table-success {
    background-color: rgba(63, 185, 80, 0.1);
}

.table tr.table-info {
    background-color: rgba(13, 202, 240, 0.1);
}

.table tr.table-warning {
    background-color: rgba(210, 153, 34, 0.1);
}

.table tr.table-danger {
    background-color: rgba(248, 81, 73, 0.1);
}

/* 데이터 테이블 정렬 */
.table th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
}

.table th.sortable:hover {
    background-color: rgba(139, 148, 158, 0.1);
}

.table th.sortable::after {
    content: '↕';
    position: absolute;
    right: 0.5rem;
    opacity: 0.5;
}

.table th.sortable.asc::after {
    content: '↑';
    opacity: 1;
}

.table th.sortable.desc::after {
    content: '↓';
    opacity: 1;
}

/* 반응형 테이블 */
@media (max-width: 768px) {
    .table-responsive {
        font-size: 0.875rem;
    }
    
    .table th,
    .table td {
        padding: 0.5rem;
    }
    
    .table-sm th,
    .table-sm td {
        padding: 0.25rem;
    }
    
    .code-block,
    .json-viewer {
        font-size: 0.8rem;
        padding: 0.75rem;
    }
}

/* 테이블 로딩 상태 */
.table-loading {
    position: relative;
    opacity: 0.6;
    pointer-events: none;
}

.table-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    border: 2px solid var(--border-default);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* 테이블 빈 상태 */
.table-empty {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
    font-style: italic;
}

.table-empty::before {
    content: '📄';
    display: block;
    font-size: 2rem;
    margin-bottom: 0.5rem;
}