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

/* ---------------------------------------------------------------------
   Baseline rhythm.

   The portal renders inside the site's own theme (Woodmart/Elementor),
   whose CSS resets heading and form margins to zero — which is what made
   sections run straight into each other with no breathing room. These
   rules are scoped under .chcp-portal so they re-establish spacing
   inside the portal without leaking out into the rest of the site.
   --------------------------------------------------------------------- */
.chcp-portal h2 {
	margin: var(--chcp-space-lg) 0 var(--chcp-space);
	font-size: 1.25rem;
	color: var(--chcp-turquoise-dark);
}

.chcp-portal h3 {
	margin: var(--chcp-space) 0 12px;
	font-size: 1.05rem;
}

/* The first heading in a section shouldn't push the whole block down. */
.chcp-portal__body > h2:first-child,
.chcp-card > h2:first-child,
.chcp-card > h3:first-child {
	margin-top: 0;
}

.chcp-portal p {
	margin: 0 0 12px;
}

.chcp-form {
	margin-bottom: var(--chcp-space-lg);
}

/* Inline forms sit inside table rows/toolbars — they must not inherit the
   block-level form spacing above. */
.chcp-portal .chcp-inline-form {
	margin-bottom: 0;
}

.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. An
   Updates list entry is excluded on purpose: it's a whole clickable row,
   not an inline link inside a sentence, and underlining it made it read
   as a hyperlink sitting inside a card rather than a row you click —
   .chcp-updates-list__link below gives it its own neutral, no-underline
   treatment instead. */
.chcp-portal a:not(.chcp-button):not(.chcp-tabs__item):not(.chcp-nav__item a):not(.chcp-updates-list__link) {
	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):not(.chcp-updates-list__link):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;
}

/* A row of quick-action buttons inside a card (e.g. Call/WhatsApp/Email on
   the patient Overview) — wraps instead of overflowing a narrow card. */
.chcp-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}

.chcp-card__actions .chcp-button + .chcp-button {
	margin-left: 0;
}

.chcp-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
	margin-bottom: var(--chcp-space);
}

.chcp-table th,
.chcp-table td {
	text-align: left;
	padding: 12px 10px;
	border-bottom: 1px solid #eee;
	vertical-align: middle;
}

/* A secondary line under a cell's primary text (an update's message under
   its title) — keeps one record to one row instead of a second full-width
   <tr> underneath it, which read as every entry rendering twice. */
.chcp-table__subtext {
	margin: 4px 0 0;
	color: var(--chcp-gray);
	font-size: 0.85rem;
	font-weight: 400;
}

.chcp-table th {
	color: var(--chcp-gray);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	white-space: nowrap;
}

.chcp-button {
	display: inline-block;
	padding: 12px 20px;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 600;
	font-size: 1rem;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

/* Without this, an <a class="chcp-button"> falls back to whatever the
   theme's own a:hover styles are (underline, accent-color flash, etc.) —
   pin down a deliberate, quiet hover instead of inheriting that. A class
   selector beats the theme's plain "a:hover" on specificity regardless of
   stylesheet order, so this reliably wins. */
.chcp-button:hover,
.chcp-button:focus-visible {
	text-decoration: none;
}

/* Adjacent actions (Save + Cancel, Mark Completed + Cancel) were relying
   on incidental whitespace between inline-blocks — give them real space. */
.chcp-button + .chcp-button,
.chcp-button + .chcp-inline-form,
.chcp-inline-form + .chcp-button {
	margin-left: 8px;
}

.chcp-button:disabled,
.chcp-button.is-busy {
	opacity: 0.6;
	pointer-events: none;
}

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

.chcp-button--primary:hover,
.chcp-button--primary:focus-visible {
	background: #2b8082;
	color: #ffffff;
}

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

.chcp-button--danger:hover,
.chcp-button--danger:focus-visible {
	background: #4d1e22;
	color: #ffffff;
}

.chcp-button--small {
	padding: 6px 14px;
	font-size: 0.85rem;
}

.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;
	}

	/* The measurements table alone has 10 columns — squashing it into a
	   phone viewport makes every cell unreadable. Let it scroll sideways
	   instead, which keeps the numbers legible. */
	.chcp-table {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
	}

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

	.chcp-button {
		width: 100%;
		text-align: center;
	}

	.chcp-button + .chcp-button {
		margin-left: 0;
		margin-top: 8px;
	}

	/* Inline row actions stay inline — full-width buttons inside a table
	   cell would be worse, not better. Same for a small per-order action
	   like "Print Request": full-width would make it as prominent as the
	   card's main content instead of a minor corner action. */
	.chcp-inline-form .chcp-button,
	.chcp-inline-form .chcp-link-button,
	.chcp-table .chcp-button,
	.chcp-fieldset__row .chcp-button {
		width: auto;
	}
}

/* Belt-and-suspenders for a dietitian who presses Ctrl+P on the live page
   instead of "Print Summary" (which opens the dedicated standalone
   document in Patient_Print_Summary_Handler instead): hides chrome that
   never belongs on paper. Buttons are always hidden in print — including
   inside the standalone document itself, which loads this same
   stylesheet — since some forms there (blood test results, food diary
   feedback) hold real data worth printing even though their submit
   buttons don't. */
@media print {
	.chcp-portal {
		background: #fff;
	}

	.chcp-nav,
	.chcp-tabs,
	.chcp-notice,
	.chcp-patient-header__actions,
	.chcp-button,
	.no-print {
		display: none !important;
	}
}

/* Patient_Print_Summary_Handler's standalone document. It loads this same
   stylesheet (see the handler for why it needs a separate bare document
   rather than an in-page @media print rule) but is meant to be handed to a
   patient or presented to a lab, not to look like a screenshot of the
   dashboard — so everything under .chcp-print-doc below overrides the
   dashboard's card/grid/table look with a plain, formal, letterhead-style
   document: no shadows, no rounded corners, no coloured badges, ruled
   sections instead of floating cards. */
.chcp-print-doc {
	background: #fff;
	padding: 0;
	max-width: 780px;
	margin: 0 auto;
	color: #1a1a1a;
	font-family: Georgia, 'Times New Roman', serif;
}

.chcp-print-doc__toolbar {
	text-align: right;
	padding: 16px 24px 0;
}

.chcp-print-doc__letterhead {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 32px 40px 20px;
	border-bottom: 3px solid #1a1a1a;
}

.chcp-print-doc__logo {
	max-width: 150px;
	max-height: 70px;
	height: auto;
}

.chcp-print-doc__practice {
	flex: 1;
}

.chcp-print-doc__practice-name {
	margin: 0;
	font-size: 1.3rem;
	letter-spacing: 0.02em;
}

.chcp-print-doc__title {
	margin: 20px 40px 0;
	font-size: 1.6rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.chcp-print-doc__issued {
	margin: 4px 40px 24px;
	color: #555;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.85rem;
}

.chcp-print-doc__patient {
	margin: 0 40px 28px;
	padding: 16px 20px;
	border: 1px solid #999;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.9rem;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 6px 20px;
}

.chcp-print-doc__patient dt {
	font-weight: 700;
	color: #555;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0;
}

.chcp-print-doc__patient dd {
	margin: 2px 0 0;
}

.chcp-print-doc__body {
	padding: 0 40px 32px;
	font-family: Arial, Helvetica, sans-serif;
}

.chcp-print-doc__footer {
	margin: 32px 40px 0;
	padding-top: 12px;
	border-top: 1px solid #ccc;
	color: #777;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.75rem;
}

/* Neutralise the dashboard's visual language wherever it's reused inside
   the print body — a formal document doesn't have drop-shadowed cards,
   rounded corners, or a coloured "New"/"Read" badge system. */
.chcp-print-doc .chcp-card {
	background: none;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	margin-bottom: 24px;
	border-bottom: 1px solid #ccc;
	padding-bottom: 20px;
}

.chcp-print-doc .chcp-card:last-child {
	border-bottom: none;
}

.chcp-print-doc .chcp-card h2 {
	color: #1a1a1a;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 1.05rem;
	border-bottom: 1px solid #ddd;
	padding-bottom: 6px;
}

.chcp-print-doc .chcp-grid {
	display: block;
}

.chcp-print-doc .chcp-table th {
	color: #1a1a1a;
	text-transform: none;
	letter-spacing: normal;
	border-bottom: 2px solid #1a1a1a;
}

.chcp-print-doc .chcp-badge {
	background: none !important;
	color: #1a1a1a !important;
	border: 1px solid #999;
}

.chcp-print-doc .chcp-card__stat {
	color: #1a1a1a;
}

/* Patient_Print_Summary_Handler::render_blood_test_request() — a
   ground-up reproduction of the clinic's own paper blood-test order
   sheet (name/date boxes, category headings, one checkbox per test),
   not the generic letterhead-document treatment above. Deliberately
   its own class namespace rather than reusing .chcp-print-doc's
   internals, since the two are visually unrelated documents. */
.chcp-blood-request {
	max-width: 900px;
	margin: 0 auto;
	padding: 32px 40px 48px;
	font-family: Arial, Helvetica, sans-serif;
	color: #333;
	background: #fff;
	/* Chrome/Firefox/Safari all drop background colours on print by
	   default unless the user has "print backgrounds" on — which most
	   people don't. Without this, the checked circles below print as
	   hollow outlines indistinguishable from unchecked ones. */
	print-color-adjust: exact;
	-webkit-print-color-adjust: exact;
}

.chcp-blood-request__toolbar {
	text-align: right;
	margin-bottom: 16px;
}

.chcp-blood-request__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 20px;
	border-bottom: 1px solid #eee;
	padding-bottom: 12px;
	margin-bottom: 18px;
}

.chcp-blood-request__logo {
	max-width: 190px;
	height: auto;
}

.chcp-blood-request__contact {
	text-align: right;
	font-size: 0.8rem;
	color: #555;
	line-height: 1.6;
	white-space: nowrap;
}

.chcp-blood-request__fields {
	display: flex;
	gap: 24px;
	margin-bottom: 18px;
}

.chcp-blood-request__field {
	flex: 1;
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 7px 14px;
	font-size: 0.9rem;
	color: #777;
}

.chcp-blood-request__field strong {
	color: #1a1a1a;
	font-weight: 700;
	margin-left: 6px;
}

.chcp-blood-request__section-title {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--chcp-turquoise-dark);
	font-size: 1.1rem;
	font-weight: 700;
	margin: 0 0 10px;
}

.chcp-blood-request__swatch {
	display: inline-block;
	width: 14px;
	height: 14px;
	background: var(--chcp-turquoise-dark);
	flex-shrink: 0;
}

.chcp-blood-request__note {
	margin: 0 0 5px;
	padding-left: 12px;
	border-left: 3px solid var(--chcp-turquoise-dark);
	color: #555;
	font-size: 0.82rem;
	line-height: 1.4;
}

.chcp-blood-request__note--bold {
	font-weight: 700;
	color: #1a1a1a;
}

.chcp-blood-request__columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 40px;
	margin-top: 16px;
}

.chcp-blood-request__category {
	margin: 0 0 4px;
	color: var(--chcp-turquoise-dark);
	font-size: 0.85rem;
	font-weight: 700;
	break-inside: avoid;
	break-after: avoid;
}

.chcp-blood-request__items {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
	break-inside: avoid;
}

.chcp-blood-request__items li {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 1px 0;
	font-size: 0.78rem;
	line-height: 1.5;
	color: #666;
}

.chcp-blood-request__items li.is-checked {
	color: #1a1a1a;
	font-weight: 700;
}

.chcp-blood-request__dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 1.5px solid var(--chcp-turquoise-dark);
	flex-shrink: 0;
}

.chcp-blood-request__dot--checked {
	background: var(--chcp-turquoise-dark);
	border-color: var(--chcp-turquoise-dark);
}

.chcp-blood-request__others-line {
	border-bottom: 1px solid #999;
	max-width: 220px;
	height: 1.2em;
}

.chcp-blood-request__custom-notes {
	margin: -4px 0 10px;
	padding-left: 20px;
	font-size: 0.78rem;
	color: #666;
}

@media (max-width: 600px) {
	.chcp-blood-request__columns {
		grid-template-columns: 1fr;
	}

	.chcp-blood-request__header {
		flex-direction: column;
	}

	.chcp-blood-request__contact {
		text-align: left;
	}
}

/* Compact enough on its own to comfortably fit one printed page (roughly
   46 individual test rows across two columns plus the letterhead), but
   @page tightens the browser's own default ~1in margins further so there
   is no risk of a stray line spilling onto a second page. (The browser's
   own print header/footer — page URL, date, page count — is a print
   dialog setting, not something CSS can remove; that's on the person
   printing to turn off if they don't want it.) */
@media print {
	@page {
		size: auto;
		margin: 10mm 12mm;
	}

	.chcp-blood-request {
		padding: 0;
		max-width: 100%;
	}
}

/* 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;
	/* Without this, a grid item stretches to the row's tallest sibling by
	   default. Every plain text/select field top-aligns its own content
	   regardless, but a checkbox label (row-direction, align-items: center —
	   see the ":has(> input...)" rule above) visibly centers itself inside
	   that stretched height instead, looking misaligned next to fields that
	   sit at the top of the row. Only the new-patient form's "Enable portal
	   access" checkbox exposed this, since it's the only checkbox sharing
	   this grid with taller siblings. */
	align-items: start;
}

.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;
}

.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 {
	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;
}

/* ---------------------------------------------------------------------
   Dashboard: main column + Updates sidebar
   --------------------------------------------------------------------- */
.chcp-dashboard-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: var(--chcp-space);
	align-items: start;
}

.chcp-dashboard-main {
	min-width: 0;
}

.chcp-dashboard-side .chcp-card {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------
   Patient list: per-row quick actions.

   Built on <details> so it works with no JavaScript. The menu is
   positioned absolutely, which is why the cell establishes a positioning
   context and allows overflow.
   --------------------------------------------------------------------- */
.chcp-table__actions {
	position: relative;
	white-space: nowrap;
}

.chcp-quick-actions {
	display: inline-block;
	position: relative;
	margin-left: 10px;
}

.chcp-quick-actions > summary {
	list-style: none;
	cursor: pointer;
	padding: 2px 9px;
	border: 1px solid #d8d8e6;
	border-radius: 6px;
	color: var(--chcp-turquoise-dark);
	font-weight: 700;
	line-height: 1.4;
	background: #fff;
	user-select: none;
}

.chcp-quick-actions > summary::-webkit-details-marker,
.chcp-quick-actions > summary::marker {
	display: none;
	content: '';
}

.chcp-quick-actions[open] > summary {
	border-color: var(--chcp-turquoise-dark);
	background: var(--chcp-turquoise-dark);
	color: #fff;
}

.chcp-quick-actions__menu {
	position: absolute;
	right: 0;
	top: calc(100% + 4px);
	z-index: 30;
	min-width: 190px;
	background: #fff;
	border: 1px solid #e2e2ee;
	border-radius: 10px;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
	padding: 6px;
	display: flex;
	flex-direction: column;
	text-align: left;
	white-space: nowrap;
}

.chcp-quick-actions__menu a {
	padding: 9px 12px;
	border-radius: 7px;
	text-decoration: none !important;
	color: #2b2b2b !important;
	font-size: 0.9rem;
	font-weight: 500;
}

.chcp-quick-actions__menu a:hover,
.chcp-quick-actions__menu a:focus {
	background: #eef8f8;
	color: var(--chcp-turquoise-dark) !important;
}

/* ---------------------------------------------------------------------
   Collapsible table columns (measurements).

   The checkbox is a sibling of the table so the state can be read in
   plain CSS. It's visually hidden rather than display:none so it stays
   reachable by keyboard.
   --------------------------------------------------------------------- */
.chcp-table-wrap {
	position: relative;
}

.chcp-col-toggle {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.chcp-col-toggle__label {
	display: inline-block;
	margin-bottom: 10px;
	cursor: pointer;
	color: var(--chcp-turquoise-dark);
	font-weight: 600;
	font-size: 0.85rem;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.chcp-col-toggle:focus-visible + .chcp-col-toggle__label {
	outline: 2px solid var(--chcp-turquoise-dark);
	outline-offset: 3px;
	border-radius: 4px;
}

.chcp-col-toggle:not(:checked) ~ .chcp-table .chcp-col-extra {
	display: none;
}

.chcp-col-toggle:not(:checked) ~ .chcp-col-toggle__label .chcp-col-toggle__hide,
.chcp-col-toggle:checked ~ .chcp-col-toggle__label .chcp-col-toggle__show {
	display: none;
}

/* Printing should always include the full dataset regardless of the
   on-screen toggle state. */
@media print {
	.chcp-col-toggle:not(:checked) ~ .chcp-table .chcp-col-extra {
		display: table-cell;
	}

	.chcp-col-toggle__label {
		display: none;
	}
}

/* ---------------------------------------------------------------------
   Collapsible form sections (consultations)
   --------------------------------------------------------------------- */
.chcp-fieldset {
	background: #fff;
	border: 1px solid #e7e7f0;
	border-radius: 10px;
	margin-bottom: 12px;
	overflow: visible;
}

.chcp-fieldset > summary {
	cursor: pointer;
	padding: 14px 18px;
	font-weight: 700;
	color: var(--chcp-turquoise-dark);
	user-select: none;
	border-radius: 10px;
}

.chcp-fieldset > summary:hover {
	background: #f4fbfb;
}

.chcp-fieldset[open] > summary {
	border-bottom: 1px solid #e7e7f0;
	border-radius: 10px 10px 0 0;
}

.chcp-fieldset > .chcp-form-grid {
	padding: 18px;
	margin-bottom: 0;
}

/* Generic padded body for a .chcp-fieldset whose content isn't itself a
   .chcp-form-grid (e.g. the patient's Blood Tests page, where each order
   is a collapsible section around plain text/a table rather than a form). */
.chcp-fieldset__body {
	padding: 18px;
}

/* Pairs a per-order action (e.g. "Print Request") on the same line as the
   label it belongs to, instead of the button sitting alone above the
   content it's related to. The label keeps flex:1 even when empty (no
   requested tests, custom-note-only order) so the button still lands on
   the right rather than snapping back to the left with nothing beside it. */
.chcp-fieldset__row {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
}

.chcp-fieldset__row-label {
	flex: 1;
	margin: 0;
}

/* Note: no print override for collapsed sections. Browsers hide a closed
   <details> natively and CSS can't reliably force it open — but nothing is
   lost, because Patient_Print_Summary_Handler renders tabs with $is_print
   set, and the "New/Edit Consultation" form these sections belong to skips
   itself entirely in that mode (see consultations.php) rather than
   printing blank fields the patient never filled in. */

@media (max-width: 900px) {
	.chcp-dashboard-layout {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------
   Sized field grid (patient intake form).

   The default .chcp-form-grid gives every field the same minimum width,
   which is why a 4-digit step count and a paragraph of diet history were
   rendered the same size. This variant lays fields out on a 12-column
   track so each one can take the width its content actually needs —
   matching the paper client file, where a "Floor" box is small and a
   "Diet history" box is a tall block.

   Scoped to --sized so every other form in the plugin keeps the simpler
   auto-fit behaviour it was built around.
   --------------------------------------------------------------------- */
.chcp-form-grid--sized {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 14px 16px;
	align-items: start;
}

.chcp-form-grid--sized > .chcp-field--small  { grid-column: span 3; }
.chcp-form-grid--sized > .chcp-field--tick   { grid-column: span 3; }
.chcp-form-grid--sized > .chcp-field--medium { grid-column: span 6; }
.chcp-form-grid--sized > .chcp-field--wide   { grid-column: 1 / -1; }
/* A checkbox (span 3) paired with its own clarifying notes field (e.g.
   "Pregnancy" + "Pregnancy notes / date") needs to always land on the same
   row as its checkbox. At span 6 the pair only totals 9 of 12 columns, so
   the grid's own auto-placement was free to start the NEXT checkbox in the
   3 columns left over — which then pushed that next checkbox's own notes
   field onto a separate row entirely, splitting pairs apart unpredictably
   depending on what came before them. Span 9 makes checkbox + notes total
   exactly 12, so every pair fully occupies its row and the next field
   always starts fresh underneath it. */
.chcp-form-grid--sized > .chcp-field--nine   { grid-column: span 9; }

/* Ticks read as a row of options rather than a column of form rows, which is
   how they appear on paper. */
.chcp-form-grid--sized > .chcp-field--check {
	flex-direction: row;
	align-items: center;
	gap: 8px;
	font-weight: 500;
	color: #2b2b2b;
	background: #fbfbfd;
	border: 1px solid #ecedf3;
	border-radius: 8px;
	padding: 9px 12px;
	min-height: 42px;
	cursor: pointer;
	/* The grid as a whole uses align-items: start (see .chcp-form-grid--sized
	   above) so a checkbox never centers itself inside a row shared with a
	   taller, unrelated field — the original alignment bug. But a checkbox
	   paired 1:1 with its own "nine"-width notes field (Pregnancy/
	   Breastfeeding/Miscarriage) has no such unrelated sibling to worry
	   about, and pinned to the top it just left dead space below it where
	   the taller notes field continued — the box looked short and
	   unbalanced next to a two-line label+input. Stretching it back to the
	   row's full height here is safe specifically because every row this
	   class appears in is either this one paired checkbox+notes shape, or a
	   solid block of same-height checkboxes (Daily Habits) — never a
	   checkbox mixed with a taller sibling of a different kind. */
	align-self: stretch;
}

.chcp-form-grid--sized > .chcp-field--check:hover {
	border-color: var(--chcp-turquoise-light);
	background: #f5fcfc;
}

.chcp-form-grid--sized > .chcp-field--check input[type="checkbox"] {
	flex: 0 0 auto;
	margin: 0;
}

.chcp-form-grid--sized > .chcp-field--check span {
	line-height: 1.2;
}

/* Auto-growing textareas: they start at the height their paper equivalent
   occupies and expand as they are typed into, so nothing is oversized in
   anticipation of text that may never be entered. */
.chcp-portal textarea[data-chcp-autogrow] {
	overflow-y: hidden;
	resize: vertical;
	min-height: 2.6rem;
}

@media (max-width: 782px) {
	.chcp-form-grid--sized {
		grid-template-columns: repeat(6, 1fr);
	}

	.chcp-form-grid--sized > .chcp-field--small,
	.chcp-form-grid--sized > .chcp-field--tick { grid-column: span 3; }
	.chcp-form-grid--sized > .chcp-field--medium,
	.chcp-form-grid--sized > .chcp-field--nine { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
	.chcp-form-grid--sized {
		grid-template-columns: 1fr;
	}

	.chcp-form-grid--sized > .chcp-field--small,
	.chcp-form-grid--sized > .chcp-field--tick,
	.chcp-form-grid--sized > .chcp-field--medium,
	.chcp-form-grid--sized > .chcp-field--nine,
	.chcp-form-grid--sized > .chcp-field--wide { grid-column: 1 / -1; }
}

/* Read/unread state for the Updates feed */
.chcp-card__header-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
}

.chcp-card__header-row h2 {
	margin: 0;
}

.chcp-card__header-row .chcp-link-button {
	font-size: 0.85rem;
}

.chcp-badge {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1;
	padding: 3px 7px;
	border-radius: 10px;
	vertical-align: middle;
	margin-left: 4px;
}

.chcp-badge--unread {
	background: var(--chcp-turquoise-dark);
	color: #fff;
}

.chcp-badge--read {
	background: #f0f0f5;
	color: var(--chcp-gray);
}

.chcp-updates-list__item--unread {
	background: #f4fbfb;
}

/* Rendered as the first inline child inside the link/static box itself
   (see updates-panel.php) rather than a positioned sibling floated over
   the row — an absolutely-positioned dot sitting in the <li>'s padding
   left a strip of the row outside the <a>'s own box, which swallowed
   clicks instead of navigating. As a normal inline element it simply
   takes up its own space inline with the title, so there is no gap for
   a click to fall through. */
.chcp-updates-list__dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--chcp-turquoise-dark);
	margin-right: 8px;
	vertical-align: middle;
}

/* The clickable/static box carries the row's own padding (rather than the
   <li>) so the entire visual row — not just the text inside it — is part
   of the link's hit area, with no gap at the edges where a click would
   land on the <li> itself and silently do nothing. */
.chcp-updates-list__link,
.chcp-updates-list__static {
	display: block;
	padding: 10px 0;
	color: inherit;
	text-decoration: none;
}

.chcp-updates-list__link {
	cursor: pointer;
}

.chcp-updates-list__link:hover,
.chcp-updates-list__link:focus {
	background: #f4fbfb;
}

.chcp-updates-list__link:hover strong,
.chcp-updates-list__link:focus strong {
	color: var(--chcp-turquoise-dark);
}

.chcp-update-row--unread td {
	background: #f4fbfb;
	font-weight: 600;
}

.chcp-update-row--unread td:last-child {
	font-weight: 400;
}

/* Patient attribution inside the Updates panel */
.chcp-updates-list__who {
	display: block;
	font-size: 0.85rem;
	margin-top: 2px;
	color: var(--chcp-turquoise-dark);
	font-weight: 600;
}

.chcp-updates-list__who .chcp-clinical-id {
	color: var(--chcp-gray);
	font-weight: 400;
}

/* ---------------------------------------------------------------------
   "New record" modal.

   Every clinical module (measurements, plans, blood tests, consultations,
   follow-ups) used to keep its create/edit form permanently expanded at
   the bottom of the tab — reaching it meant scrolling past every existing
   record first, every single time. The form now lives in a native
   <dialog>, opened via a "New" button at the top of the tab (see
   templates/partials/record-modal.php and the data-chcp-open-modal wiring
   in portal.js). An edit link still works exactly as before — a normal
   page load to ?chcp_tab_action=edit — but the dialog is server-rendered
   already open in that case (data-chcp-autoopen) instead of the form
   sitting inline at the bottom of the page.
   --------------------------------------------------------------------- */
dialog.chcp-modal {
	border: none;
	border-radius: 12px;
	padding: 0;
	width: calc(100% - 40px);
	max-width: 720px;
	max-height: calc(100vh - 80px);
	box-shadow: 0 20px 60px rgba( 0, 0, 0, 0.25 );
}

dialog.chcp-modal::backdrop {
	background: rgba( 20, 20, 30, 0.55 );
}

.chcp-modal__box {
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - 80px);
}

.chcp-modal__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	border-bottom: 1px solid #e7e7f0;
	flex-shrink: 0;
}

.chcp-modal__header h2 {
	margin: 0;
	font-size: 1.15rem;
}

.chcp-modal__close {
	background: none;
	border: none;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	color: var(--chcp-gray);
	padding: 2px 6px;
	border-radius: 6px;
}

.chcp-modal__close:hover,
.chcp-modal__close:focus-visible {
	color: var(--chcp-burgundy);
	background: #f7eceb;
}

.chcp-modal__body {
	padding: 20px;
	overflow-y: auto;
}

.chcp-modal__body .chcp-form-grid,
.chcp-modal__body .chcp-fieldset:last-of-type {
	margin-bottom: 14px;
}

@media (max-width: 600px) {
	dialog.chcp-modal {
		width: calc(100% - 20px);
		max-height: calc(100vh - 40px);
	}
}

/* A header row pairing a tab's title/count with its "New" button, so the
   action sits where the eye already is instead of a full scroll away. */
.chcp-tab-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 16px;
}

.chcp-tab-header h2 {
	margin: 0;
}