:root {
	--chcp-turquoise-light: #57C5C7;
	--chcp-turquoise-dark: #339799;
	--chcp-gray: #818285;
	--chcp-burgundy: #5A2328;
	--chcp-bg: #F9F9F9;
}

.chcp-portal {
	background: var(--chcp-bg);
	padding: 24px;
	border-radius: 12px;
	color: #2b2b2b;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Every plain link inside the portal gets a consistent, distinguishable
   color so it reads clearly as clickable next to ordinary body text.
   Buttons already stand out via their solid background — this covers
   everything else: table row links, card links, tab links, etc. */
.chcp-portal a:not(.chcp-button):not(.chcp-tabs__item):not(.chcp-nav__item a) {
	color: var(--chcp-turquoise-dark);
	text-decoration: underline;
	text-decoration-color: rgba(51, 151, 153, 0.35);
	text-underline-offset: 2px;
}

.chcp-portal a:not(.chcp-button):not(.chcp-tabs__item):not(.chcp-nav__item a):hover {
	color: var(--chcp-burgundy);
	text-decoration-color: currentColor;
}

.chcp-portal__header {
	margin-bottom: 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}

.chcp-portal__title {
	color: var(--chcp-turquoise-dark);
	font-size: 1.75rem;
	margin: 0;
}

.chcp-welcome {
	color: var(--chcp-gray);
	font-size: 1.15rem;
	font-weight: 600;
	margin: 0 0 20px;
}

.chcp-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
}

.chcp-card {
	background: #ffffff;
	border-radius: 10px;
	padding: 20px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	margin-bottom: 20px;
}

/* Inside a grid, the grid's own gap already spaces cards apart — an
   additional margin-bottom here would double up vertically between rows. */
.chcp-grid > .chcp-card {
	margin-bottom: 0;
}

.chcp-danger-zone {
	border: 1px solid #f3d6d6;
}

.chcp-danger-zone summary {
	color: var(--chcp-burgundy);
	font-weight: 600;
	cursor: pointer;
}

.chcp-card h2 {
	font-size: 1.05rem;
	margin: 0 0 12px;
	color: var(--chcp-gray);
}

.chcp-card__stat {
	font-size: 2.25rem;
	font-weight: 700;
	color: var(--chcp-turquoise-dark);
	margin: 0;
}

.chcp-card__placeholder {
	color: var(--chcp-gray);
	font-size: 0.9rem;
}

.chcp-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}

.chcp-table th,
.chcp-table td {
	text-align: left;
	padding: 8px 6px;
	border-bottom: 1px solid #eee;
}

.chcp-button {
	display: inline-block;
	padding: 12px 20px;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 600;
	font-size: 1rem;
}

.chcp-button--primary {
	background: var(--chcp-turquoise-dark);
	color: #ffffff;
}

.chcp-button--danger {
	background: var(--chcp-burgundy);
	color: #ffffff;
}

.chcp-notice {
	background: #fff;
	border-left: 4px solid var(--chcp-turquoise-dark);
	padding: 14px 18px;
	border-radius: 6px;
}

@media (max-width: 600px) {
	.chcp-portal {
		padding: 14px;
	}

	.chcp-grid {
		grid-template-columns: 1fr;
	}
}

@media print {
	.chcp-portal {
		background: #fff;
	}

	.chcp-button {
		display: none;
	}

	.no-print {
		display: none !important;
	}
}

/* Navigation */
.chcp-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	border-bottom: 2px solid #e7e7f0;
}

.chcp-nav__item a {
	display: inline-block;
	padding: 10px 14px;
	text-decoration: none;
	color: var(--chcp-gray);
	font-weight: 600;
	border-bottom: 3px solid transparent;
}

.chcp-nav__item.is-active a,
.chcp-nav__item a:hover {
	color: var(--chcp-turquoise-dark);
	border-bottom-color: var(--chcp-turquoise-dark);
}

/* "My Account" and Log Out are about the person herself, not about
   managing patients — pushing them to the far right of the same bar
   (rather than mixing them into the working nav items) keeps that
   distinction visible even when a patient's own tab bar is right below. */
.chcp-nav__item--account {
	margin-left: auto;
}

.chcp-nav__logout {
	color: var(--chcp-burgundy) !important;
}

/* Breadcrumbs */
.chcp-breadcrumbs {
	font-size: 0.85rem;
	color: var(--chcp-gray);
	margin-bottom: 16px;
}

.chcp-breadcrumbs a {
	color: var(--chcp-turquoise-dark);
	text-decoration: none;
}

.chcp-breadcrumbs__sep {
	margin: 0 6px;
}

/* Notices */
.chcp-notice--success {
	border-left-color: var(--chcp-turquoise-dark);
}

.chcp-notice--error {
	border-left-color: var(--chcp-burgundy);
	background: #fff5f5;
}

/* Empty state */
.chcp-empty-state {
	padding: 24px;
	text-align: center;
	color: var(--chcp-gray);
	background: #F9F9F9;
	border-radius: 8px;
}

/* Forms */
.chcp-form-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 14px;
	margin-bottom: 20px;
}

.chcp-form-grid__wide {
	grid-column: 1 / -1;
}

.chcp-form label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--chcp-gray);
}

/* Checkbox (and radio) labels need the checkbox and its text side-by-side,
   not stacked — the column layout above is only meant for "label text
   above its input" fields like text/textarea/select. */
.chcp-form label:has(> input[type="checkbox"]:first-child),
.chcp-form label:has(> input[type="radio"]:first-child) {
	flex-direction: row;
	align-items: center;
	gap: 8px;
}

.chcp-form input[type="text"],
.chcp-form input[type="email"],
.chcp-form input[type="date"],
.chcp-form input[type="time"],
.chcp-form input[type="number"],
.chcp-form input[type="search"],
.chcp-form select,
.chcp-form textarea {
	padding: 10px 12px;
	border: 1px solid #d8d8e6;
	border-radius: 8px;
	font-size: 1rem;
	font-family: inherit;
}

.chcp-form textarea {
	min-height: 90px;
	resize: vertical;
}

.chcp-inline-form {
	display: inline-block;
	margin: 0 4px;
}

.chcp-link-button {
	background: none;
	border: none;
	color: var(--chcp-turquoise-dark);
	cursor: pointer;
	font-weight: 600;
	padding: 0;
	text-decoration: underline;
}

/* Toolbar / filters */
.chcp-toolbar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
}

.chcp-filter-form {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

/* Tables */
.chcp-table__actions {
	white-space: nowrap;
}

/* Pagination */
.chcp-pagination {
	display: flex;
	gap: 6px;
	margin-top: 16px;
}

.chcp-pagination__link {
	padding: 6px 12px;
	border-radius: 6px;
	background: #fff;
	color: var(--chcp-turquoise-dark);
	text-decoration: none;
	border: 1px solid #d8d8e6;
}

.chcp-pagination__link.is-active {
	background: var(--chcp-turquoise-dark);
	color: #fff;
	border-color: var(--chcp-turquoise-dark);
}

/* Lists */
.chcp-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.chcp-list li {
	padding: 6px 0;
	border-bottom: 1px solid #f0f0f5;
}

/* Patient header */
.chcp-patient-header {
	margin-bottom: 20px;
}

.chcp-clinical-id {
	color: var(--chcp-gray);
	font-size: 1rem;
	font-weight: 400;
}

/* Print summary */
.chcp-print-section.is-hidden {
	display: none;
}

.chcp-print-controls {
	background: #F9F9F9;
	padding: 12px;
	border-radius: 8px;
	margin-bottom: 16px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

.chcp-sparkline {
	width: 100%;
	max-width: 500px;
	height: auto;
}

/* Patient profile tabs */
.chcp-patient-header__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}

.chcp-patient-header__actions {
	display: flex;
	gap: 8px;
	align-items: center;
}

.chcp-patient-header__meta {
	color: var(--chcp-gray);
	margin: 4px 0 16px;
}

.chcp-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	border-bottom: 2px solid #e7e7f0;
	margin-bottom: 20px;
}

.chcp-tabs__item {
	display: inline-block;
	padding: 8px 12px;
	text-decoration: none;
	color: var(--chcp-gray);
	font-weight: 600;
	font-size: 0.9rem;
	border-bottom: 3px solid transparent;
}

.chcp-tabs__item.is-active,
.chcp-tabs__item:hover {
	color: var(--chcp-turquoise-dark);
	border-bottom-color: var(--chcp-turquoise-dark);
}

/* Condensed filters */
.chcp-more-filters {
	display: inline-block;
	position: relative;
}

.chcp-more-filters summary {
	cursor: pointer;
	color: var(--chcp-turquoise-dark);
	font-weight: 600;
	font-size: 0.9rem;
	list-style: none;
}

.chcp-more-filters summary::-webkit-details-marker {
	display: none;
}

.chcp-more-filters__body {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin-top: 10px;
	padding: 12px;
	background: #fff;
	border: 1px solid #e7e7f0;
	border-radius: 8px;
}

.chcp-toolbar__actions {
	display: flex;
	gap: 8px;
}

/* Currently-editing row/card highlight */
tr.is-editing,
.chcp-card.is-editing {
	background-color: #eef8f8;
	box-shadow: inset 3px 0 0 var(--chcp-turquoise-dark);
}

/* Updates panel */
.chcp-updates-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.chcp-updates-list__item {
	padding: 10px 0;
	border-bottom: 1px solid #f0f0f5;
}

.chcp-updates-list__item:last-child {
	border-bottom: none;
}

.chcp-updates-list__date {
	display: block;
	color: var(--chcp-gray);
	font-size: 0.8rem;
	margin-top: 2px;
}

.chcp-updates-list__item p {
	margin: 6px 0 0;
}