/**
 * Zelus Customer Portal – shared design system for list pages.
 * Premium B2B aesthetic: calm, structured, high-signal.
 */

/* --------------------------------------------------------------------------- */
/* Variables                                                                   */
/* --------------------------------------------------------------------------- */
.portal-page,
[data-portal-page] {
	--portal-container-max: 960px;
	--portal-space-xs: 0.25rem;
	--portal-space-sm: 0.5rem;
	--portal-space-md: 1rem;
	--portal-space-lg: 1.5rem;
	--portal-space-xl: 2rem;
	--portal-radius: 6px;
	--portal-radius-sm: 4px;
	--portal-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	--portal-shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.08);
	--portal-border: 1px solid #e5e7eb;
	--portal-border-muted: 1px solid #f3f4f6;
	--portal-text: #111827;
	--portal-text-muted: #6b7280;
	--portal-text-muted-light: #9ca3af;
	--portal-bg: #ffffff;
	--portal-bg-subtle: #f9fafb;
	--portal-accent: #2563eb;
	--portal-accent-hover: #1d4ed8;
	--portal-badge-open: #dbeafe;
	--portal-badge-open-text: #1e40af;
	--portal-badge-closed: #f3f4f6;
	--portal-badge-closed-text: #4b5563;
	--portal-empty-bg: #f9fafb;
}

/* --------------------------------------------------------------------------- */
/* Page container                                                              */
/* --------------------------------------------------------------------------- */
.portal-page .portal-container,
[data-portal-page] .portal-container {
	max-width: var(--portal-container-max);
	margin: 0 auto;
	padding: var(--portal-space-xl) var(--portal-space-lg);
}

/* --------------------------------------------------------------------------- */
/* Page header                                                                 */
/* --------------------------------------------------------------------------- */
.portal-page .portal-header,
[data-portal-page] .portal-header {
	margin-bottom: var(--portal-space-lg);
}

.portal-page .portal-breadcrumb,
[data-portal-page] .portal-breadcrumb {
	font-size: 0.875rem;
	color: var(--portal-text-muted);
	margin-bottom: var(--portal-space-sm);
}

.portal-page .portal-breadcrumb a,
[data-portal-page] .portal-breadcrumb a {
	color: var(--portal-text-muted);
	text-decoration: none;
}

.portal-page .portal-breadcrumb a:hover,
[data-portal-page] .portal-breadcrumb a:hover {
	color: var(--portal-accent);
}

.portal-page .portal-breadcrumb .breadcrumb-sep,
[data-portal-page] .portal-breadcrumb .breadcrumb-sep {
	margin: 0 var(--portal-space-sm);
	color: var(--portal-text-muted-light);
}

.portal-page .portal-title,
[data-portal-page] .portal-title {
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--portal-text);
	margin: 0 0 var(--portal-space-xs) 0;
	line-height: 1.3;
}

.portal-page .portal-subtitle,
[data-portal-page] .portal-subtitle {
	font-size: 0.9375rem;
	color: var(--portal-text-muted);
	margin: 0 0 var(--portal-space-md) 0;
}

.portal-page .portal-result-count,
[data-portal-page] .portal-result-count {
	font-size: 0.875rem;
	color: var(--portal-text-muted);
	margin-top: var(--portal-space-sm);
}

/* --------------------------------------------------------------------------- */
/* Context card (e.g. "Selected Customer", "Selected Site")                    */
/* --------------------------------------------------------------------------- */
.portal-page .portal-context-card,
[data-portal-page] .portal-context-card {
	background: var(--portal-bg-subtle);
	border: var(--portal-border-muted);
	border-radius: var(--portal-radius);
	padding: var(--portal-space-lg);
	margin-bottom: var(--portal-space-lg);
}

.portal-page .portal-context-card .context-label,
[data-portal-page] .portal-context-card .context-label {
	font-size: 0.8125rem;
	color: var(--portal-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin-bottom: var(--portal-space-xs);
}

.portal-page .portal-context-card .context-value,
[data-portal-page] .portal-context-card .context-value {
	font-size: 1rem;
	font-weight: 500;
	color: var(--portal-text);
}

/* --------------------------------------------------------------------------- */
/* Toolbar (search, sort, filter)                                              */
/* --------------------------------------------------------------------------- */
.portal-page .portal-toolbar,
[data-portal-page] .portal-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--portal-space-md);
	align-items: center;
	margin-bottom: var(--portal-space-lg);
}

.portal-page .portal-toolbar .portal-search-wrap,
[data-portal-page] .portal-toolbar .portal-search-wrap {
	flex: 1 1 220px;
	min-width: 200px;
}

.portal-page .portal-toolbar .portal-search,
[data-portal-page] .portal-toolbar .portal-search {
	width: 100%;
	max-width: 280px;
	padding: 0.5rem 0.75rem;
	font-size: 0.9375rem;
	border: var(--portal-border);
	border-radius: var(--portal-radius-sm);
	background: var(--portal-bg);
	color: var(--portal-text);
}

.portal-page .portal-toolbar .portal-search::placeholder,
[data-portal-page] .portal-toolbar .portal-search::placeholder {
	color: var(--portal-text-muted-light);
}

.portal-page .portal-toolbar .portal-search:focus,
[data-portal-page] .portal-toolbar .portal-search:focus {
	outline: none;
	border-color: var(--portal-accent);
	box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.portal-page .portal-toolbar .portal-sort-wrap,
.portal-page .portal-toolbar .portal-filter-wrap,
[data-portal-page] .portal-toolbar .portal-sort-wrap,
[data-portal-page] .portal-toolbar .portal-filter-wrap {
	display: flex;
	align-items: center;
	gap: var(--portal-space-sm);
}

.portal-page .portal-toolbar .portal-toolbar-label,
[data-portal-page] .portal-toolbar .portal-toolbar-label {
	font-size: 0.875rem;
	color: var(--portal-text-muted);
	white-space: nowrap;
}

.portal-page .portal-toolbar select.portal-sort,
.portal-page .portal-toolbar select.portal-filter,
[data-portal-page] .portal-toolbar select.portal-sort,
[data-portal-page] .portal-toolbar select.portal-filter {
	padding: 0.5rem 0.75rem;
	font-size: 0.9375rem;
	border: var(--portal-border);
	border-radius: var(--portal-radius-sm);
	background: var(--portal-bg);
	color: var(--portal-text);
	min-width: 160px;
}

/* --------------------------------------------------------------------------- */
/* Table                                                                       */
/* --------------------------------------------------------------------------- */
.portal-page .portal-table-wrap,
[data-portal-page] .portal-table-wrap {
	background: var(--portal-bg);
	border: var(--portal-border);
	border-radius: var(--portal-radius);
	box-shadow: var(--portal-shadow);
	overflow: hidden;
}

.portal-page .portal-table-wrap .table-responsive,
[data-portal-page] .portal-table-wrap .table-responsive {
	overflow-x: auto;
}

.portal-page .portal-table,
[data-portal-page] .portal-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.portal-page .portal-table thead th,
[data-portal-page] .portal-table thead th {
	text-align: left;
	padding: 0.75rem 1rem;
	background: var(--portal-bg-subtle);
	font-weight: 600;
	color: var(--portal-text);
	border-bottom: var(--portal-border);
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.portal-page .portal-table tbody tr,
[data-portal-page] .portal-table tbody tr {
	border-bottom: var(--portal-border-muted);
	transition: background 0.15s ease;
}

.portal-page .portal-table tbody tr:last-child,
[data-portal-page] .portal-table tbody tr:last-child {
	border-bottom: none;
}

.portal-page .portal-table tbody tr:hover,
[data-portal-page] .portal-table tbody tr:hover {
	background: var(--portal-bg-subtle);
}

.portal-page .portal-table tbody tr.portal-row-hidden,
[data-portal-page] .portal-table tbody tr.portal-row-hidden {
	display: none;
}

.portal-page .portal-table tbody td,
[data-portal-page] .portal-table tbody td {
	padding: 0.875rem 1rem;
	color: var(--portal-text);
	vertical-align: middle;
}

.portal-page .portal-table tbody td.portal-cell-primary,
[data-portal-page] .portal-table tbody td.portal-cell-primary {
	font-weight: 500;
	color: var(--portal-text);
}

.portal-page .portal-table tbody td.portal-cell-muted,
[data-portal-page] .portal-table tbody td.portal-cell-muted {
	color: var(--portal-text-muted);
	font-size: 0.875rem;
}

/* --------------------------------------------------------------------------- */
/* Primary action button                                                       */
/* --------------------------------------------------------------------------- */
.portal-page .btn-portal-primary,
[data-portal-page] .btn-portal-primary {
	display: inline-block;
	padding: 0.5rem 1rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: #fff;
	background: var(--portal-accent);
	border: none;
	border-radius: var(--portal-radius-sm);
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.15s ease;
}

.portal-page .btn-portal-primary:hover,
[data-portal-page] .btn-portal-primary:hover {
	background: var(--portal-accent-hover);
	color: #fff;
}

/* --------------------------------------------------------------------------- */
/* Secondary / back link                                                       */
/* --------------------------------------------------------------------------- */
.portal-page .portal-back-link,
[data-portal-page] .portal-back-link {
	font-size: 0.9375rem;
	color: var(--portal-text-muted);
	text-decoration: none;
	margin-top: var(--portal-space-lg);
	display: inline-block;
}

.portal-page .portal-back-link:hover,
[data-portal-page] .portal-back-link:hover {
	color: var(--portal-accent);
}

/* --------------------------------------------------------------------------- */
/* Status badge                                                                */
/* --------------------------------------------------------------------------- */
.portal-page .portal-badge,
[data-portal-page] .portal-badge {
	display: inline-block;
	padding: 0.25rem 0.5rem;
	font-size: 0.8125rem;
	font-weight: 500;
	border-radius: var(--portal-radius-sm);
}

.portal-page .portal-badge.portal-badge-open,
[data-portal-page] .portal-badge.portal-badge-open {
	background: var(--portal-badge-open);
	color: var(--portal-badge-open-text);
}

.portal-page .portal-badge.portal-badge-closed,
[data-portal-page] .portal-badge.portal-badge-closed {
	background: var(--portal-badge-closed);
	color: var(--portal-badge-closed-text);
}

/* --------------------------------------------------------------------------- */
/* Empty state                                                                 */
/* --------------------------------------------------------------------------- */
.portal-page .portal-empty-state,
[data-portal-page] .portal-empty-state {
	text-align: center;
	padding: var(--portal-space-xl) var(--portal-space-lg);
	background: var(--portal-empty-bg);
	border: var(--portal-border-muted);
	border-radius: var(--portal-radius);
}

.portal-page .portal-empty-state .portal-empty-icon,
[data-portal-page] .portal-empty-state .portal-empty-icon {
	font-size: 2rem;
	color: var(--portal-text-muted-light);
	margin-bottom: var(--portal-space-md);
	line-height: 1;
}

.portal-page .portal-empty-state .portal-empty-message,
[data-portal-page] .portal-empty-state .portal-empty-message {
	font-size: 1rem;
	font-weight: 500;
	color: var(--portal-text);
	margin: 0 0 var(--portal-space-sm) 0;
}

.portal-page .portal-empty-state .portal-empty-submessage,
[data-portal-page] .portal-empty-state .portal-empty-submessage {
	font-size: 0.9375rem;
	color: var(--portal-text-muted);
	margin: 0;
}

/* --------------------------------------------------------------------------- */
/* Error / alert (e.g. invalid param)                                           */
/* --------------------------------------------------------------------------- */
.portal-page .portal-alert-warning,
[data-portal-page] .portal-alert-warning {
	padding: var(--portal-space-md) var(--portal-space-lg);
	background: #fef3c7;
	border: 1px solid #fcd34d;
	border-radius: var(--portal-radius);
	color: #92400e;
	margin-bottom: var(--portal-space-lg);
}

.portal-page .portal-alert-warning a,
[data-portal-page] .portal-alert-warning a {
	color: #b45309;
	font-weight: 500;
}

/* --------------------------------------------------------------------------- */
/* Responsive                                                                  */
/* --------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.portal-page .portal-container,
	[data-portal-page] .portal-container {
		padding: var(--portal-space-md);
	}

	.portal-page .portal-toolbar,
	[data-portal-page] .portal-toolbar {
		flex-direction: column;
		align-items: stretch;
	}

	.portal-page .portal-toolbar .portal-search-wrap,
	[data-portal-page] .portal-toolbar .portal-search-wrap {
		flex: 1 1 auto;
	}

	.portal-page .portal-toolbar .portal-search,
	[data-portal-page] .portal-toolbar .portal-search {
		max-width: none;
	}

	.portal-page .portal-table thead th,
	.portal-page .portal-table tbody td,
	[data-portal-page] .portal-table thead th,
	[data-portal-page] .portal-table tbody td {
		padding: 0.625rem 0.75rem;
		font-size: 0.875rem;
	}
}