/* settle_tables.css - 공통 테이블, 참여자 테이블, 비용 테이블 스타일 */

/* Add .table-responsive style for horizontal scrolling */
.table-responsive {
	display: block;
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	/* Optional: Add border/background if needed for the wrapper itself */
	/* border: 1px solid var(--border-color); */
	/* border-radius: var(--border-radius-small); */
	/* background-color: var(--content-bg-color); */
	margin-bottom: 1em; /* Add some margin below the scrollable area */
}
.table-responsive > table {
	/* Ensure table inside doesn't cause issues */
	margin-bottom: 0;
	border: none; /* Remove border if wrapper has one */
	min-width: 200px; /* Example: Set a min-width to force scrollbar sooner */
}


.custom-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1em;
}
.custom-table th, .custom-table td {
	padding: 10px 12px;
	text-align: left;
	border-bottom: 1px solid var(--border-light-color);
	vertical-align: middle;
}
.custom-table thead th {
	background-color: var(--content-light-bg-color);
	font-weight: 500;
	color: var(--text-color);
	border-bottom-width: 2px;
	border-bottom-color: var(--border-color);
	/* Position sticky might be needed if table itself is very long vertically */
	/* position: sticky; */
	/* top: 0; */
	/* z-index: 1; */
}
.custom-table tbody tr:hover {
	background-color: var(--primary-very-light-color);
}
.custom-table td.actions button {
	margin-right: 5px;
	padding: 3px 8px;
	font-size: 0.85em;
}
.custom-table .no-data-message td {
	text-align: center;
	color: var(--text-light-color);
	padding: 2em 0;
}
.custom-table input[type="checkbox"] {
	cursor: pointer;
}

/* 참여자 테이블 */
#participants-table td:nth-child(3) {
	text-align: right;
}
#participants-table .participant-name {
	cursor: grab;
}

/* 비용 테이블 */
#expenses-table th:nth-child(4),
#expenses-table td:nth-child(4) {
	text-align: right;
}
#expenses-table .expense-amount {
	font-weight: 500;
}
#expenses-table .expense-currency {
	font-size: 0.85em;
	color: var(--text-light-color);
	margin-left: 5px;
}
#expenses-table .involved-list {
	font-size: 0.9em;
	color: #555;
	line-height: 1.4;
	max-width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#expenses-table th:nth-child(1),
#expenses-table td:nth-child(1),
#expenses-table th:nth-child(2),
#expenses-table td:nth-child(2),
#expenses-table th:nth-child(4),
#expenses-table td:nth-child(4),
#expenses-table th:nth-child(7),
#expenses-table td:nth-child(7) {
    white-space: nowrap; /* 해당 열의 내용을 줄바꿈 없이 한 줄로 표시 */
    /*
     * (선택 사항) 내용이 너무 길어서 셀 너비가 부모 요소를 넘어갈 경우
     * 넘치는 부분을 숨기고 ...으로 표시하고 싶다면 추가합니다.
     * 셀 너비가 최대한 늘어나고 필요시 테이블 전체에 스크롤이 생기는 것을
     * 원하신다면 아래 두 줄은 생략하거나 overflow: visible; 로 설정할 수 있습니다.
    */
    overflow: hidden; /* 넘치는 내용 숨김 */
    text-overflow: ellipsis; /* 숨겨진 내용이 있음을 ...으로 표시 */
}