/**
 * Nova 스타일 테이블 공통 클래스
 * 페이지 마크업에서 <table class="nova-table"> 형태로 적용
 * design_renewal_2026_06_08 설계 §4.3 참조
 */

.nova-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: var(--font-size-body);
	color: var(--color-gray-700);
	background: transparent;
}

.nova-table thead th {
	background: var(--color-surface-deeper);
	color: var(--color-gray-700);
	font-size: 12px;
	font-weight: 600;
	text-align: left;
	padding: 8px 12px;
	border-bottom: 1px solid var(--color-gray-200);
	white-space: nowrap;
	text-align: center;
}

.nova-table tbody td {
	font-size: 13px;
	color: var(--color-gray-700);
	padding: 8px 12px;
	border-bottom: 1px solid var(--color-gray-200);
	background: var(--color-surface);
	height: 40px;
	vertical-align: middle;
	text-align: center;
}

.nova-table tbody tr:hover td {
	background: var(--color-primary-50);
}

.nova-table tbody tr:last-child td {
	border-bottom: none;
}

/* 정렬 가능 컬럼 */
.nova-table th.sortable {
	cursor: pointer;
	user-select: none;
}

.nova-table th.sortable .sort-icon {
	margin-left: 6px;
	color: var(--color-gray-300);
	font-size: 11px;
	transition: color var(--motion-fast);
}

.nova-table th.sortable:hover .sort-icon,
.nova-table th.sortable.active .sort-icon {
	color: var(--color-primary-500);
}

/* 셀 액션 — 상세 이동(링크/돋보기)만 허용 */
.nova-table .cell-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	color: var(--color-primary-500);
	font-size: 13px;
	text-decoration: none;
	transition: color var(--motion-fast);
}

.nova-table .cell-action:hover {
	color: var(--color-primary-700);
}

/* 빈 결과 empty state */
.nova-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 48px 24px;
	background: var(--color-surface-deeper);
	border-radius: var(--radius-lg);
	text-align: center;
}

.nova-empty-state .empty-icon {
	font-size: 64px;
	color: var(--color-gray-300);
	margin-bottom: 16px;
}

.nova-empty-state .empty-title {
	font-size: 16px;
	color: var(--color-gray-700);
	font-weight: 600;
	margin-bottom: 6px;
}

.nova-empty-state .empty-desc {
	font-size: 13px;
	color: var(--color-gray-500);
}

/* === Bootstrap .table override (하위호환 — AdminLTE 덮기) === */
.tw-app .table {
	color: var(--color-gray-700);
	border-color: var(--color-gray-200);
}
.tw-app .table thead th {
	background: var(--color-surface-deeper) !important;
	color: var(--color-gray-700) !important;
	font-size: 12px;
	font-weight: 600;
	border-color: var(--color-gray-200) !important;
	white-space: nowrap;
	padding: 8px 12px;
}
.tw-app .table tbody td {
	border-color: var(--color-gray-200) !important;
	color: var(--color-gray-700) !important;
	vertical-align: middle;
	padding: 8px 12px;
	font-size: 13px;
}
.tw-app .table tbody tr {
	transition: background var(--motion-fast);
}
.tw-app .table tbody tr:hover td {
	background: var(--color-primary-50) !important;
}
.tw-app .table-bordered,
.tw-app .table-bordered td,
.tw-app .table-bordered th {
	border-color: var(--color-gray-200) !important;
}
/* 테이블 상태 행 */
.tw-app .table-danger td, .tw-app .table-danger th {
	background: rgba(239, 68, 68, 0.06) !important;
	color: var(--color-danger) !important;
}
.tw-app .table-warning td, .tw-app .table-warning th {
	background: rgba(245, 158, 11, 0.06) !important;
	color: var(--color-warning) !important;
}
.tw-app .table-success td, .tw-app .table-success th {
	background: rgba(16, 185, 129, 0.06) !important;
	color: var(--color-success) !important;
}
.tw-app .table-secondary td, .tw-app .table-secondary th {
	background: var(--color-gray-50) !important;
	color: var(--color-gray-500) !important;
}
.tw-app .table-active td, .tw-app .table-active th {
	background: var(--color-primary-50) !important;
}
.tw-app tr.row-active td {
	background: var(--color-primary-50) !important;
	border-left: 3px solid var(--color-primary-500) !important;
}
.tw-app .thead-light th, .tw-app .thead-dark th {
	background: var(--color-surface-deeper) !important;
	color: var(--color-gray-700) !important;
	border-color: var(--color-gray-200) !important;
}

/* === 전역 테이블 overflow 방지 (모바일 + 작은 화면) === */
@media (max-width: 1199px) {
	.tw-app .card-body {
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch;
		max-width: 100%;
	}
	.tw-app .table {
		min-width: 600px;
	}
}
.tw-app .table-responsive {
	overflow-x: auto !important;
	-webkit-overflow-scrolling: touch;
}