/* Customer Portal — customer-facing chrome on top of the shared bolster
 * tokens (bolster.css ships the palette + ticket/priority badge classes). */

body.portal {
	background: var(--bs-body-bg);
}

/* ─── top navigation ─────────────────────────────────────────────────── */
.portal-nav {
	background: var(--bs-body-bg);
	border-bottom: 1px solid var(--bs-border-color);
	position: sticky;
	top: 0;
	z-index: 100;
}
.portal-nav-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1rem;
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-height: 3.25rem;
	flex-wrap: wrap;
}
.portal-brand {
	color: var(--bs-body-color);
	text-decoration: none;
	font-size: 1.05rem;
	white-space: nowrap;
}
.portal-brand i { color: var(--bs-primary); }
.portal-nav-links {
	display: flex;
	gap: 0.25rem;
	flex: 1;
}
.portal-nav-links a {
	color: var(--bs-secondary-color);
	text-decoration: none;
	padding: 0.9rem 0.75rem;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}
.portal-nav-links a:hover { color: var(--bs-body-color); }
.portal-nav-links a.active {
	color: var(--bs-body-color);
	border-bottom-color: var(--bs-primary);
}
.portal-nav-user {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.portal-whoami {
	color: var(--bs-secondary-color);
	font-size: 0.85rem;
	white-space: nowrap;
}

/* ─── layout ─────────────────────────────────────────────────────────── */
.portal-content {
	max-width: 1200px;
	margin: 0 auto;
	padding: 1.5rem 1rem;
}
.portal-narrow { max-width: 640px; }
.portal-login {
	max-width: 400px;
	margin: 8vh auto 0;
}
.portal-grid-2 {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 1rem;
	align-items: start;
}
@media (max-width: 900px) {
	.portal-grid-2 { grid-template-columns: 1fr; }
}

/* Plugins embed full-bleed under the nav, like apps in the Hub shell. */
.portal-frame-wrap {
	position: fixed;
	inset: 3.25rem 0 0 0;
}
.portal-frame-wrap iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

/* ─── conversation thread ────────────────────────────────────────────── */
.portal-comment {
	padding: 0.6rem 0.8rem;
	border: 1px solid var(--bs-border-color);
	border-radius: 0.5rem;
	margin-bottom: 0.6rem;
	background: var(--bs-tertiary-bg);
}
.portal-comment.mine {
	background: transparent;
}
.portal-comment-meta {
	display: flex;
	gap: 0.5rem;
	align-items: baseline;
	font-size: 0.85rem;
	margin-bottom: 0.25rem;
}
.portal-comment-text {
	white-space: pre-wrap;
}

/* clickable table rows (shared idiom with the internal apps) */
.clickable-row { cursor: pointer; }

/* ─── ticket badges (same classes/tokens as the Customer Support app) ─── */
.badge.prio-low      { background: var(--bol-color-text-secondary); }
.badge.prio-medium   { background: var(--bol-color-primary); }
.badge.prio-high     { background: var(--bol-color-warning); color: var(--bol-color-text-warning); }
.badge.prio-urgent   { background: var(--bol-color-negative); }

.badge.ticket-status-new       { background: var(--bol-color-text-secondary); }
.badge.ticket-status-open      { background: var(--bol-color-primary); }
.badge.ticket-status-pending   { background: var(--bol-color-warning); color: var(--bol-color-text-warning); }
.badge.ticket-status-resolved  { background: var(--bol-color-positive); }
.badge.ticket-status-closed    { background: var(--bol-color-text-secondary); opacity: 0.7; }

/* CSAT rating buttons */
.portal-rating { display: inline-flex; gap: 0.35rem; }