/* Copyright (c) 2026, TRX and contributors */
/* Customer portal styling for trx_saas/www/* pages. */

:root {
	--trx-brand: #1abc9c;
	--trx-brand-dark: #159c82;
}

.trx-portal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
}

.trx-portal-header h3 {
	margin: 0;
}

.trx-stat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.trx-stat-card {
	border: 1px solid var(--border-color, #e0e0e0);
	border-radius: 8px;
	padding: 1rem 1.25rem;
	background: var(--card-bg, #fff);
}

.trx-stat-card .trx-stat-value {
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--trx-brand-dark);
}

.trx-stat-card .trx-stat-label {
	font-size: 0.8rem;
	color: var(--text-muted, #6c757d);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.trx-panel {
	border: 1px solid var(--border-color, #e0e0e0);
	border-radius: 8px;
	padding: 1.25rem;
	margin-bottom: 1.5rem;
	background: var(--card-bg, #fff);
}

.trx-panel h5 {
	margin-top: 0;
	margin-bottom: 1rem;
}

.trx-filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.trx-filter-bar input,
.trx-filter-bar select {
	max-width: 220px;
}

.trx-table {
	width: 100%;
	border-collapse: collapse;
}

.trx-table th,
.trx-table td {
	padding: 0.6rem 0.75rem;
	border-bottom: 1px solid var(--border-color, #e9ecef);
	text-align: left;
	vertical-align: middle;
}

.trx-table th {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--text-muted, #6c757d);
}

.trx-table tbody tr:hover {
	background: var(--highlight-bg, #f8f9fa);
}

.trx-table a {
	color: var(--trx-brand-dark);
	font-weight: 500;
}

.trx-badge {
	display: inline-block;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
}

.trx-badge-green {
	background: rgba(26, 188, 156, 0.15);
	color: var(--trx-brand-dark);
}

.trx-badge-orange {
	background: rgba(245, 158, 11, 0.15);
	color: #b45309;
}

.trx-badge-red {
	background: rgba(220, 53, 69, 0.15);
	color: #c0392b;
}

.trx-badge-blue {
	background: rgba(52, 144, 220, 0.15);
	color: #2166a5;
}

.trx-badge-gray {
	background: rgba(108, 117, 125, 0.15);
	color: #6c757d;
}

.trx-attention-item {
	display: flex;
	gap: 0.75rem;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--border-color, #e9ecef);
}

.trx-attention-item:last-child {
	border-bottom: none;
}

.trx-empty-state {
	padding: 2rem 1rem;
	text-align: center;
	color: var(--text-muted, #6c757d);
}

.trx-pagination {
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
	margin-top: 1rem;
}

.trx-detail-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 0.75rem 1.5rem;
	margin-bottom: 1rem;
}

.trx-detail-grid .trx-detail-label {
	font-size: 0.75rem;
	text-transform: uppercase;
	color: var(--text-muted, #6c757d);
}

.trx-detail-grid .trx-detail-value {
	font-size: 0.95rem;
}