/*
UI Framework - Tables
Estilos padronizados para tabelas (Escala: 8/12/16/24/32px)
*/

.table.ui {
	width: 100%;
	border-collapse: collapse;
	background-color: transparent;
	font-family: var(--font-ui);
	font-size: 0.875rem; /* 14px */
}

.table.ui thead {
	background-color: #F6F6F6;
	border-bottom: 2px solid var(--border-color, rgba(0, 0, 0, 0.1));
}

.table.ui thead th {
	text-align: left;
	font-weight: 600;
	color: var(--text-color, #333);
	padding: 12px 16px;
	white-space: nowrap;
}

.table.ui tbody td {
	padding: 8px;
	border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
	vertical-align: middle;
	color: var(--text-color, #555);
}

.table.ui tbody tr:hover td {
	background-color: #FAFAFA;
}

/* Modifier: Table Striped */
.table.ui.table-striped tbody tr:nth-child(even) {
	background-color: #F9F9F9;
}

.table.ui.table-striped tbody tr:hover td {
	background-color: #F1F1F1;
}

/* Modifier: Table Bordered */
.table.ui.table-bordered {
	border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
}

.table.ui.table-bordered th,
.table.ui.table-bordered td {
	border-right: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
}

.table.ui.table-bordered th:last-child,
.table.ui.table-bordered td:last-child {
	border-right: none;
}

/* 
Formatadores internos 
Adequações ao Padrão de extrato de pontos
*/
.table.ui td > label {
	display: block;
	font-size: 0.75rem; /* 12px */
	color: #777;
	margin-bottom: 4px;
}

.table.ui td > strong {
	display: block;
	font-weight: 700;
	margin-bottom: 4px;
	font-size: 1rem;
	color: #333;
}

.table.ui td > span {
	display: block;
	font-size: 0.875rem; /* 14px */
	color: #666;
}

.table.ui td.text-center, 
.table.ui th.text-center {
	text-align: center;
}

.table.ui td.text-right, 
.table.ui th.text-right {
	text-align: right;
}

/* Tabela de Pontos Variante Visual (Trazida do legado main.css) */
.table.ui.table-points td:nth-child(n+2) {
	background-color: #F6F6F6;
	border-left: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
	font-size: 1.25rem; /* 20px */
	font-weight: bold;
	vertical-align: middle;
	text-align: center;
}
.table.ui.table-points tbody tr:hover td:nth-child(n+2) {
	background-color: #EFEFEF;
}

@media (max-width: 600px) {
	.table.ui th,
	.table.ui td {
		padding: 8px 12px;
	}
	
	.table.ui td.text-center, 
	.table.ui th.text-center {
		font-size: 1rem;
	}
}