/* ═══════════════════════════════════════════════════════════════════
   Patient Profile Modal
   ═══════════════════════════════════════════════════════════════════ */

/* ── Sidebar Nav ─────────────────────────────────────────────────── */
#modalPatientProfile .pp-sidebar .nav-link {
	position: relative;
	font-size: 0.85rem;
	font-weight: 500;
	padding: 0.65rem 0.75rem 0.65rem 1rem;
	border-radius: 0;
	color: #6E6660;
	transition: background 0.15s ease, color 0.15s ease;
}
#modalPatientProfile .pp-sidebar .nav-link:hover:not([disabled]) {
	/* Real platform brand token (--sa-primary-color), not Bootstrap's
	   generic blue -- --bs-primary is never defined anywhere in this
	   codebase, so the previous rule silently fell back to stock blue. */
	background: rgba(var(--primary-rgb), 0.06);
	color: var(--sa-primary-color);
}
#modalPatientProfile .pp-sidebar .nav-link.active {
	background: rgba(var(--primary-rgb), 0.08);
	color: var(--sa-primary-color);
	font-weight: 700;
}
/* Left active-indicator bar, matching the platform's sharp-corner design
   law (no rounded pills here) instead of a filled nav-pill background. */
#modalPatientProfile .pp-sidebar .nav-link.active::before {
	content: '';
	position: absolute;
	left: 0; top: 0.35rem; bottom: 0.35rem;
	width: 3px;
	background: var(--sa-primary-color);
}
#modalPatientProfile .pp-sidebar .nav-link[disabled] {
	opacity: 0.45;
	font-style: italic;
}
#modalPatientProfile .pp-sidebar .nav-link i {
	width: 18px;
	text-align: center;
}
#modalPatientProfile .pp-sidebar .nav-link .pp-nav-count {
	margin-left: auto;
	font-size: 0.68rem;
	font-weight: 700;
	color: #B5AB9D;
}
#modalPatientProfile .pp-sidebar .nav-link.active .pp-nav-count {
	color: var(--sa-secondary-color, #847C70);
}

/* ── Stat & Info Cards ─────────────────────────────────────────────
   "Agency feeling, modern medical" pass: soft elevation instead of a
   flat gray border + tinted header bar (the generic SaaS-dashboard
   tell), and a small-caps typographic label instead of an icon sitting
   in front of every heading -- consistent with this platform's own
   "typography-led, not icon-card grids" rule elsewhere. Every tab that
   reuses .pp-info-card/.pp-stat-card (Overview, Demographics, Insurance,
   Verification, Notes, Order History) inherits this in one place rather
   than restyling Overview alone and leaving the rest inconsistent. */
.pp-stat-card {
	border-radius: 0.75rem;
	border: 1px solid #EFEBE5;
	background: #fff;
	box-shadow: 0 1px 2px rgba(40, 35, 32, 0.04);
}
.pp-info-card {
	border-radius: 0.75rem;
	border: 1px solid #EFEBE5;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(40, 35, 32, 0.04);
}
.pp-info-card .card-header {
	background: #fff;
	border-bottom: 1px solid #EFEBE5;
	padding: 0.85rem 1.1rem !important;
}
.pp-info-card .card-header h6 {
	font-size: 0.7rem !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: #847C70 !important;
}
/* Drop the icon-before-label pattern in every card header -- purely
   decorative, and removing it is what actually reads as "editorial"
   instead of "dashboard widget." */
.pp-info-card .card-header h6 i {
	display: none;
}
.pp-info-card .card-body {
	padding: 1.1rem !important;
}
.pp-order-row:hover {
	background-color: rgba(var(--primary-rgb), 0.03);
}

/* .pp-stat-card/.pp-info-card background and .card-header dark-mode rules
   already exist further down this file (search "Dark mode") -- not
   repeated here to avoid two rules for the same selector disagreeing
   (the .card-header background did: #202020 here vs. #222222 there). */
[data-theme-mode="dark"] .pp-info-card .card-header h6 {
	color: #9C948A !important;
}

/* ── Overview stat numbers -- editorial-weight figures instead of a
   generic Bootstrap "stat widget" (bold-blue-number-over-caption). ── */
.pp-ov-stat__value {
	font-size: 1.9rem;
	font-weight: 700;
	line-height: 1;
	color: #2A2622;
	letter-spacing: -0.01em;
}
.pp-ov-stat__value--sm {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.75rem;
}
.pp-ov-stat__label {
	font-size: 0.68rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #847C70;
	margin-top: 0.15rem;
}
[data-theme-mode="dark"] .pp-ov-stat__value {
	color: #E8E8E8;
}
[data-theme-mode="dark"] .pp-ov-stat__label {
	color: #9C948A;
}
.pp-order-detail > td {
	border-top: none;
}

/* ── Field label/value (read-only detail grid) ──────────────────────
   Formalizes the pattern every tab was previously hand-rolling inline
   (style="font-size:0.7rem; letter-spacing:0.5px;" repeated dozens of
   times) into one shared, dark-mode-covered component. Use:
   <div class="pp-field"><span class="pp-field__label">Label</span>
   <span class="pp-field__value">Value</span></div> ── */
.pp-field {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}
.pp-field__label {
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #847C70;
}
.pp-field__value {
	font-size: 0.9rem;
	font-weight: 500;
	color: #2A2622;
}
.pp-field__value--muted {
	color: #B5AB9D;
	font-weight: 400;
	font-style: italic;
}
.pp-field__hint {
	font-size: 0.72rem;
	color: #B5AB9D;
	margin-top: 0.1rem;
}

/* ── Headshot ─────────────────────────────────────────────────────── */
.pp-headshot-container {
	position: relative;
	display: inline-block;
}
.pp-headshot {
	width: 130px;
	height: 130px;
	border-radius: 50%;
	overflow: hidden;
	/* A soft brand-tinted ring instead of flat neutral gray -- a small
	   change that reads as considered/clinical rather than a generic
	   placeholder avatar. */
	border: 4px solid rgba(var(--primary-rgb), 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #D8D0C3 0%, #B5AB9D 100%);
	margin: 0 auto;
	font-size: 2.75rem;
	font-weight: 700;
	color: #6E6660;
	letter-spacing: 1px;
	box-shadow: 0 4px 16px rgba(40, 35, 32, 0.1);
}
.pp-headshot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.pp-upload-btn {
	position: absolute;
	bottom: 4px;
	right: 4px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	/* --bs-primary is never defined anywhere in this codebase, so this
	   previously resolved to nothing (no background at all) rather than
	   silently falling back to blue like the RGB-with-fallback rules above. */
	background: var(--sa-primary-color);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border: 3px solid #fff;
	box-shadow: 0 2px 6px rgba(0,0,0,0.15);
	transition: transform 0.15s ease;
}
.pp-upload-btn:hover {
	transform: scale(1.1);
}


/* ═══════════════════════════════════════════════════════════════════
   Document Library
   ═══════════════════════════════════════════════════════════════════ */

/* ── Empty State ─────────────────────────────────────────────────── */
.pp-docs-empty {
	text-align: center;
	padding: 2.5rem 1.5rem;
}
.pp-docs-empty__circle {
	width: 72px; height: 72px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	margin-bottom: 1rem;
	background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
}
.pp-docs-empty__circle i {
	font-size: 1.6rem;
	color: var(--sa-primary-color, #0d6efd);
	opacity: 0.8;
}
.pp-docs-empty__title {
	font-weight: 600; font-size: 0.95rem;
	color: #2A2622; margin-bottom: 0.35rem;
}
.pp-docs-empty__text {
	color: #847C70; font-size: 0.82rem;
	max-width: 280px; margin: 0 auto 1.25rem; line-height: 1.5;
}

/* ── Upload Card ─────────────────────────────────────────────────── */
.pp-docs-upload-card {
	border: 1px solid #D8D0C3; border-radius: 0.75rem;
	background: #fff; overflow: hidden; margin-bottom: 1.25rem;
	box-shadow: 0 2px 8px rgba(0,0,0,0.04);
	animation: ppDocCardIn 0.25s ease;
}
@keyframes ppDocCardIn {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: translateY(0); }
}
.pp-docs-upload-card__head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 0.7rem 1rem;
	border-bottom: 1px solid #EFEBE5; background: #fafbfc;
}
.pp-docs-upload-card__head h6 {
	margin: 0; font-size: 0.85rem; font-weight: 600; color: #3D3833;
}
.pp-docs-upload-card__body { padding: 1.25rem; }
.pp-docs-upload-card__foot {
	display: flex; justify-content: flex-end; align-items: center; gap: 0.5rem;
	padding: 0.75rem 1rem;
	border-top: 1px solid #EFEBE5; background: #fafbfc;
}

/* ── Dropzone ────────────────────────────────────────────────────── */
.pp-docs-dropzone {
	border: 2px dashed #dee2e6; border-radius: 0.5rem;
	padding: 2rem 1rem; text-align: center;
	cursor: pointer; transition: all 0.2s ease; background: #f8f9fa;
}
.pp-docs-dropzone:hover {
	border-color: var(--sa-primary-color, #0d6efd);
	background: rgba(13,110,253,0.02);
}
.pp-docs-dropzone.dragover {
	border-color: var(--sa-primary-color, #0d6efd);
	background: rgba(13,110,253,0.05);
	border-style: solid;
	transform: scale(1.005);
}
.pp-docs-dropzone__icon {
	width: 52px; height: 52px; border-radius: 50%;
	background: linear-gradient(135deg, #e8f0fe 0%, #d2e3fc 100%);
	display: inline-flex; align-items: center; justify-content: center;
	margin-bottom: 0.75rem; transition: transform 0.25s ease;
}
.pp-docs-dropzone:hover .pp-docs-dropzone__icon { transform: translateY(-3px); }
.pp-docs-dropzone__icon i { font-size: 1.3rem; color: var(--sa-primary-color, #0d6efd); }

/* ── File Preview ────────────────────────────────────────────────── */
.pp-docs-file {
	display: flex; align-items: center; gap: 0.75rem;
	padding: 0.75rem 1rem;
	border: 1px solid #D8D0C3; border-radius: 0.5rem; background: #fff;
}
.pp-docs-file__icon {
	width: 42px; height: 42px; border-radius: 0.5rem; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
}
.pp-docs-file__name {
	font-weight: 600; font-size: 0.82rem; color: #2A2622; word-break: break-all;
}
.pp-docs-file__size { font-size: 0.72rem; color: #847C70; }
.pp-docs-file__remove {
	margin-left: auto; width: 30px; height: 30px; border-radius: 50%;
	border: none; background: #fee2e2; color: #ef4444; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	font-size: 0.72rem; flex-shrink: 0; transition: all 0.15s ease;
}
.pp-docs-file__remove:hover { background: #fca5a5; transform: scale(1.1); }

/* ── Progress Bar ────────────────────────────────────────────────── */
.pp-docs-progress {
	height: 4px; background: #D8D0C3; border-radius: 2px;
	overflow: hidden; margin-top: 0.75rem;
}
.pp-docs-progress__bar {
	height: 100%; width: 0; border-radius: 2px;
	background: linear-gradient(90deg, var(--sa-primary-color, #0d6efd), #463C37);
	transition: width 0.3s ease;
}


/* ═══════════════════════════════════════════════════════════════════
   Bulk Upload Stepper
   ═══════════════════════════════════════════════════════════════════ */
.sa-bulk-stepper {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 1.5rem;
	border-bottom: 1px solid var(--default-border, #dee2e6);
	background: var(--custom-white, #fff);
}
.sa-bulk-step {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}
.sa-bulk-step-num {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 2px solid #dee2e6;
	color: #adb5bd;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 0.8rem;
	transition: all 0.2s ease;
}
.sa-bulk-step.active .sa-bulk-step-num {
	background: rgb(var(--primary-rgb));
	border-color: rgb(var(--primary-rgb));
	color: #fff;
}
.sa-bulk-step.completed .sa-bulk-step-num {
	background: #198754;
	border-color: #198754;
	color: #fff;
}
.sa-bulk-step-label {
	font-size: 0.8rem;
	color: #adb5bd;
	font-weight: 500;
}
.sa-bulk-step.active .sa-bulk-step-label {
	color: var(--default-text-color, #333);
	font-weight: 600;
}
.sa-bulk-step.completed .sa-bulk-step-label {
	color: #198754;
}
.sa-bulk-step-line {
	width: 40px;
	height: 2px;
	background: #dee2e6;
	margin: 0 0.5rem;
	transition: background 0.2s ease;
}
.sa-bulk-step-line.completed {
	background: #198754;
}

/* ── Bulk Dropzone ───────────────────────────────────────────────── */
.sa-bulk-dropzone {
	border: 2px dashed #dee2e6;
	border-radius: 0.375rem;
	background: #f8f9fa;
	cursor: pointer;
	transition: all 0.2s ease;
}
.sa-bulk-dropzone-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 2rem 1rem;
	text-align: center;
}
.sa-bulk-dropzone:hover {
	border-color: rgb(var(--primary-rgb));
	background: rgba(var(--primary-rgb), 0.05);
}
.sa-bulk-dropzone.dragover {
	border-color: rgb(var(--primary-rgb));
	background: rgba(var(--primary-rgb), 0.08);
	border-style: solid;
}

/* ── Review Table Error Rows ─────────────────────────────────────── */
#bulkPreviewTable .row-error {
	background-color: #fff5f5;
}
#bulkPreviewTable .row-error td {
	color: #842029;
}
.sa-bulk-error-detail td {
	padding: 0.25rem 0.5rem 0.5rem !important;
	background: #fff5f5;
	border-top: none !important;
}
.sa-bulk-error-msgs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
}
.sa-bulk-error-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.15rem 0.5rem;
	border-radius: 0.25rem;
	background: #f8d7da;
	color: #842029;
	font-size: 0.75rem;
}
.sa-bulk-error-badge i {
	margin-right: 0.3rem;
	font-size: 0.65rem;
}

/* ── Filter Button Group Active State ────────────────────────────── */
#bulkUploadStep2 .btn-group .btn.active {
	background: rgb(var(--primary-rgb));
	border-color: rgb(var(--primary-rgb));
	color: #fff;
}

/* ── Success Checkmark Animation ─────────────────────────────────── */
.sa-bulk-chk-circle {
	stroke: #198754;
	stroke-width: 2;
	stroke-dasharray: 166;
	stroke-dashoffset: 166;
	animation: saChkCircle 0.6s ease-in-out forwards;
}
.sa-bulk-chk-path {
	stroke: #198754;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 48;
	stroke-dashoffset: 48;
	animation: saChkDraw 0.3s ease-in-out 0.5s forwards;
}
@keyframes saChkCircle { to { stroke-dashoffset: 0; } }
@keyframes saChkDraw { to { stroke-dashoffset: 0; } }


/* ═══════════════════════════════════════════════════════════════════
   Patient Dropdown (order entry)
   ═══════════════════════════════════════════════════════════════════ */
.patient-dropdown-list {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 1050;
	background: #fff;
	border: 1px solid #dee2e6;
	border-top: none;
	border-radius: 0 0 0.375rem 0.375rem;
	max-height: 320px;
	overflow-y: auto;
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.patient-dropdown-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.5rem 0.75rem;
	font-size: 0.875rem;
	border-bottom: 1px solid #f1f3f5;
	cursor: default;
}
.patient-dropdown-item:last-child { border-bottom: none; }
.patient-dropdown-item-enabled {
	cursor: pointer;
}
.patient-dropdown-item-enabled:hover {
	background: #EFEBE5;
}
.patient-dropdown-item-disabled {
	opacity: 0.45;
	cursor: not-allowed;
}
.patient-dropdown-name {
	font-weight: 500;
}

/* ─── Dark mode ────────────────────────────────────────────── */
[data-theme-mode="dark"] .pp-stat-card,
[data-theme-mode="dark"] .pp-info-card {
	background: #202020 !important;
	border-color: #303030 !important;
}
[data-theme-mode="dark"] .pp-info-card .card-header {
	background: #222222 !important;
	border-bottom-color: #303030 !important;
}
[data-theme-mode="dark"] .pp-field__label {
	color: #9C948A;
}
[data-theme-mode="dark"] .pp-field__value {
	color: #E8E8E8;
}
[data-theme-mode="dark"] .pp-field__value--muted,
[data-theme-mode="dark"] .pp-field__hint {
	color: #6E6660;
}
[data-theme-mode="dark"] #modalPatientProfile .pp-sidebar {
	background: #1a1a1a !important;
	border-color: #303030 !important;
}
[data-theme-mode="dark"] #modalPatientProfile .pp-sidebar .nav-link {
	color: #AAAAAA;
}
[data-theme-mode="dark"] #modalPatientProfile .pp-sidebar .nav-link:hover:not([disabled]),
[data-theme-mode="dark"] #modalPatientProfile .pp-sidebar .nav-link.active {
	background: rgba(255, 255, 255, 0.06);
	color: #E8E8E8;
}
[data-theme-mode="dark"] #modalPatientProfile .modal-header {
	background: #1a1a1a !important;
	border-bottom-color: #303030 !important;
}
[data-theme-mode="dark"] #modalPatientProfile #patientProfileContent {
	background: #171717 !important;
}
[data-theme-mode="dark"] .pp-docs-upload-card {
	background: #202020 !important;
	border-color: #303030 !important;
}
[data-theme-mode="dark"] .pp-docs-upload-card__head,
[data-theme-mode="dark"] .pp-docs-upload-card__foot {
	background: #222222 !important;
	border-color: #303030 !important;
}
[data-theme-mode="dark"] .pp-docs-dropzone {
	background: #1A1A1A !important;
	border-color: #303030 !important;
}
[data-theme-mode="dark"] .pp-docs-file {
	background: #222222 !important;
	border-color: #303030 !important;
}
[data-theme-mode="dark"] .pp-docs-file__name { color: #E8E8E8 !important; }

/* ── Activity Timeline ─────────────────────────────────────────────
   Built on real PlatformActivityLog rows (see getPatientActivityTimeline(),
   fx-activity-log.php). Vertical line + colored icon markers, matching the
   existing .sa-badge/.sa-lot-pill "-transparent" color convention already
   used platform-wide for status pills, so a timeline entry's color
   language matches whatever badge you'd see for that same event elsewhere
   (e.g. an "IVR Approved" entry uses the same green as the Approved badge). */
.pp-timeline {
	position: relative;
	padding-left: 2.25rem;
}
.pp-timeline::before {
	content: '';
	position: absolute;
	left: 0.95rem;
	top: 0.25rem;
	bottom: 0.25rem;
	width: 2px;
	background: #EFEBE5;
}
.pp-timeline__day-label {
	position: relative;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #B5AB9D;
	margin: 1.25rem 0 0.75rem;
}
.pp-timeline__day-label:first-child {
	margin-top: 0;
}
.pp-timeline__item {
	position: relative;
	display: flex;
	gap: 0.75rem;
	padding-bottom: 1.1rem;
}
.pp-timeline__marker {
	position: absolute;
	left: -2.25rem;
	width: 1.9rem;
	height: 1.9rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.85rem;
	flex-shrink: 0;
	z-index: 1;
}
.pp-timeline__content {
	flex: 1;
	min-width: 0;
	padding-top: 0.1rem;
}
.pp-timeline__title {
	font-size: 0.85rem;
	font-weight: 600;
	color: #2A2622;
}
.pp-timeline__desc {
	font-size: 0.8rem;
	color: #6E6660;
	margin-top: 0.1rem;
	word-break: break-word;
}
.pp-timeline__meta {
	font-size: 0.72rem;
	color: #B5AB9D;
	margin-top: 0.25rem;
}

[data-theme-mode="dark"] .pp-timeline::before {
	background: #303030;
}
[data-theme-mode="dark"] .pp-timeline__day-label {
	color: #6E6660;
}
[data-theme-mode="dark"] .pp-timeline__title {
	color: #E8E8E8;
}
[data-theme-mode="dark"] .pp-timeline__desc {
	color: #9C948A;
}
[data-theme-mode="dark"] .pp-timeline__meta {
	color: #6E6660;
}

/* ── Needs Attention band (Overview) ─────────────────────────────────
   Every item is a real, computed signal (getPatientAttentionItems(),
   fx-clinics-patients.php) -- never a mock/placeholder count. Severity
   colors reuse the same danger/warning language as the rest of the
   platform's badges, just applied to a clickable row instead of a pill. */

/* ── Verification summary bar (Products / QCodes list) ─────────────── */
.pp-ivr-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid #EFEBE5;
	font-size: 0.8rem;
}
.pp-ivr-summary__counts {
	color: #3D3833;
	font-weight: 500;
}
.pp-ivr-summary__attention {
	color: #8A6A2F;
	font-weight: 600;
}
.pp-ivr-summary__ok {
	color: #2E7D4F;
	font-weight: 600;
}
[data-theme-mode="dark"] .pp-ivr-summary {
	border-bottom-color: #303030;
}
[data-theme-mode="dark"] .pp-ivr-summary__counts {
	color: #E8E8E8;
}
[data-theme-mode="dark"] .pp-ivr-summary__attention {
	color: #E8C77D;
}
[data-theme-mode="dark"] .pp-ivr-summary__ok {
	color: #6fd89a;
}

/* ── Order History detail panel (table row expand + Card view expand) ──
   Same content (ppRenderOrderDetailBody()), two wrappers -- shared here so
   both get the same background/padding, and so dark mode has a real
   selector to hook into (this was previously an inline style attribute,
   which no [data-theme-mode="dark"] rule can ever reach). ── */
.pp-order-detail-panel {
	background: #f9fafb;
	padding: 1rem 1.25rem;
}
[data-theme-mode="dark"] .pp-order-detail-panel {
	background: #202020;
}

.pp-attention {
	/* Softer than a stock Bootstrap-alert amber box (thick border, flat
	   saturated fill) -- a thin accent bar + subtle tint + soft shadow
	   reads as considered/branded rather than a generic warning banner,
	   while keeping the same semantic urgency color. */
	border: 1px solid #F3E5C6;
	border-left: 3px solid #B8935B;
	border-radius: 0.75rem;
	overflow: hidden;
	background: #FDFBF6;
	box-shadow: 0 1px 2px rgba(40, 35, 32, 0.04);
}
.pp-attention__head {
	display: flex;
	align-items: center;
	padding: 0.7rem 1.1rem;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #8A6A2F;
}
.pp-attention__list {
	background: #fff;
}
.pp-attention__item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	border-top: 1px solid #FEF3C7;
	cursor: pointer;
	transition: background 0.15s ease;
}
.pp-attention__item:hover {
	background: #FFFBEB;
}
.pp-attention__icon {
	font-size: 1rem;
	width: 1.5rem;
	text-align: center;
	flex-shrink: 0;
}
.pp-attention__item--danger .pp-attention__icon { color: #dc2626; }
.pp-attention__item--warning .pp-attention__icon { color: #B8935B; }
.pp-attention__title {
	font-size: 0.85rem;
	font-weight: 600;
	color: #2A2622;
}
.pp-attention__desc {
	font-size: 0.78rem;
	color: #6E6660;
	margin-top: 0.05rem;
}
.pp-attention__chevron {
	font-size: 0.8rem;
	color: #B5AB9D;
	flex-shrink: 0;
}

[data-theme-mode="dark"] .pp-attention {
	background: #2A2210 !important;
	border-color: #4a3a10 !important;
	border-left-color: #B8935B !important;
}
[data-theme-mode="dark"] .pp-attention__head {
	color: #E8C77D;
}
[data-theme-mode="dark"] .pp-attention__list {
	background: #202020 !important;
}
[data-theme-mode="dark"] .pp-attention__item {
	border-top-color: #303030 !important;
}
[data-theme-mode="dark"] .pp-attention__item:hover {
	background: #262626 !important;
}
[data-theme-mode="dark"] .pp-attention__title {
	color: #E8E8E8;
}
[data-theme-mode="dark"] .pp-attention__desc {
	color: #9C948A;
}

/* ── Sticky Header Identity ──────────────────────────────────────────
   Populated by ppPopulateProfileHeader() (samg-clinic-patients.js) right
   when a specific patient opens. Lives outside #patientProfileContent, so
   unlike every other piece of patient identity in this modal (previously
   only ever shown on the Overview tab), this stays visible no matter
   which tab is open. */
#modalPatientProfile .pp-header {
	gap: 1rem;
	flex-wrap: nowrap;
}
.pp-header__identity {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-width: 0;
	/* Was sized to its own content only, leaving the actual empty space in
	   the header between the action buttons and the Expand/Close cluster
	   (which sit at the far right via ms-auto) -- growing this into that
	   space instead gives the meta line real room, fixing the truncation
	   below at its root instead of just widening a hardcoded max-width. */
	flex: 1 1 auto;
}
.pp-header__avatar {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #D8D0C3 0%, #B5AB9D 100%);
	color: #3D3833;
	font-weight: 700;
	font-size: 0.9rem;
	letter-spacing: 0.02em;
}
.pp-header__text {
	min-width: 0;
}
.pp-header__meta {
	font-size: 0.75rem;
	color: #6E6660;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	/* No hardcoded max-width -- .pp-header__identity's flex-grow (above),
	   combined with .pp-header__text's min-width:0, gives this whatever
	   space is actually available before the action buttons, so the
	   ellipsis only kicks in for a genuinely long clinic+physician
	   combination rather than truncating by default. */
}
.pp-header__meta-sep {
	color: #D8D0C3;
	margin: 0 0.15rem;
}
.pp-header__status-badge {
	font-size: 0.68rem;
	font-weight: 700;
	vertical-align: middle;
}

/* Action hierarchy: New Order is the primary action (matches Overview's own
   "Place New Order" primary button); New IVR is secondary. Previously both
   used the same unstyled .pp-header-btn class with zero color distinction
   (and no CSS at all for that class, anywhere -- confirmed while auditing
   this file). */
.pp-header-btn {
	font-size: 0.8rem;
	border-radius: 0.375rem;
}
.pp-header-btn--primary {
	background: var(--sa-primary-color);
	border-color: var(--sa-primary-color);
	color: #fff;
}
.pp-header-btn--primary:hover {
	background: #110e0d;
	border-color: #110e0d;
	color: #fff;
}
.pp-header-btn--secondary {
	background: transparent;
	border: 1px solid #D8D0C3;
	color: #3D3833;
}
.pp-header-btn--secondary:hover {
	background: #F8F6F3;
}

[data-theme-mode="dark"] .pp-header__avatar {
	background: linear-gradient(135deg, #3a342c 0%, #4a4238 100%);
	color: #E8E8E8;
}
[data-theme-mode="dark"] .pp-header__meta {
	color: #9C948A;
}
[data-theme-mode="dark"] .pp-header__meta-sep {
	color: #4a4238;
}
[data-theme-mode="dark"] .pp-header-btn--secondary {
	border-color: #4a4238;
	color: #E8E8E8;
}
[data-theme-mode="dark"] .pp-header-btn--secondary:hover {
	background: #2a2622;
}

/* ── Header utility group (Recent / Expand / Close) ──────────────────────
   Previously "Recent" and "Expand" were bare icon+text with zero button
   chrome (transparent background, no border), sitting right next to the
   fully-styled New IVR/New Order buttons -- four different visual
   treatments in one row read as inconsistent/unfinished. These three now
   share one uniform icon-only treatment, set apart from the CTA buttons
   by a vertical divider, so the row reads as two clear groups: actions,
   then chrome controls. */
.pp-header-utility {
	display: flex;
	align-items: center;
	gap: 0.35rem;
}
.pp-header-divider {
	width: 1px;
	height: 1.5rem;
	background: #D8D0C3;
	margin-right: 0.35rem;
}
.pp-header-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 0.4rem;
	background: transparent;
	color: #6E6660;
	font-size: 0.95rem;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.pp-header-icon-btn:hover {
	background: rgba(var(--primary-rgb), 0.08);
	color: var(--sa-primary-color);
}
[data-theme-mode="dark"] .pp-header-divider {
	background: #4a4238;
}
[data-theme-mode="dark"] .pp-header-icon-btn {
	color: #9C948A;
}
[data-theme-mode="dark"] .pp-header-icon-btn:hover {
	background: rgba(255,255,255,0.08);
	color: #E8E8E8;
}

/* ── Email Documents form fields ──────────────────────────────────────────
   Previously plain .form-control-sm, which rendered with a border faint
   enough (per direct user feedback on a screenshot) to look almost
   disabled/invisible. These get an explicit, visible border, comfortable
   padding, and a real focus ring instead of inheriting whatever the
   ambient .form-control styling happened to resolve to. */
.pp-email-field__label {
	display: block;
	font-size: 0.82rem;
	font-weight: 600;
	color: #3D3833;
	margin-bottom: 0.35rem;
}
.pp-email-field__input {
	display: block;
	width: 100%;
	border: 1.5px solid #D8D0C3;
	border-radius: 0.45rem;
	padding: 0.6rem 0.85rem;
	font-size: 0.9rem;
	color: #2A2622;
	background: #fff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pp-email-field__input::placeholder {
	color: #B5AB9D;
}
.pp-email-field__input:focus {
	outline: none;
	border-color: var(--sa-primary-color);
	box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12);
}
[data-theme-mode="dark"] .pp-email-field__label {
	color: #E8E8E8;
}
[data-theme-mode="dark"] .pp-email-field__input {
	background: #202020;
	border-color: #4a4238;
	color: #E8E8E8;
}
[data-theme-mode="dark"] .pp-email-field__input::placeholder {
	color: #6E6660;
}

/* ── Email Documents result banner ────────────────────────────────────── */
.pp-email-result {
	display: flex;
	align-items: center;
	padding: 0.6rem 0.85rem;
	border-radius: 0.45rem;
	font-size: 0.85rem;
	font-weight: 500;
	margin-bottom: 1rem;
}
.pp-email-result--ok {
	background: #eafaf1;
	color: #146c43;
	border: 1px solid #b6e6c9;
}
.pp-email-result--fail {
	background: #fdecea;
	color: #b02a37;
	border: 1px solid #f3c2c2;
}
[data-theme-mode="dark"] .pp-email-result--ok {
	background: #12291d;
	color: #6fd89a;
	border-color: #1f4a32;
}
[data-theme-mode="dark"] .pp-email-result--fail {
	background: #2e1416;
	color: #f3a3a9;
	border-color: #5a2329;
}

/* ── Scroll safety net ─────────────────────────────────────────────────
   Previous version of this block relied on height:100%/max-height:100%
   percentage chains (modal-body -> .d-flex.h-100 -> sidebar/content) to
   reach a real pixel height -- confirmed broken in practice (content with
   enough height to overflow, e.g. many Order History cards, produced NO
   scrollbar and no scroll response at all, not even a partial one).
   Percentage heights need every ancestor in the chain to already have a
   DEFINITE resolved height, and something in that chain wasn't resolving
   as expected.

   Rebuilt using flex-basis:0 instead ("flex: 1 1 0"), which sidesteps
   percentage resolution entirely -- the browser hands this element
   whatever space is actually left over in its flex parent, full stop,
   with no dependency on any ancestor's height computing correctly first.
   This is the standard, more robust pattern for a nested "sidebar + its
   own independently-scrolling content pane" layout. */
#modalPatientProfile .modal-body {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	min-height: 0;
}
#modalPatientProfile .modal-body > .d-flex.h-100 {
	flex: 1 1 0;
	height: auto; /* neutralize the h-100 utility class's height:100% so flex-basis:0 above is what actually governs sizing */
	min-height: 0;
}
#modalPatientProfile .pp-sidebar {
	overflow-y: auto;
}
#modalPatientProfile #patientProfileContent {
	overflow-x: hidden;
}

/* Google Places Autocomplete (Demographics > Address) appends its
   suggestion dropdown directly to <body>, positioned absolutely from the
   input's on-screen coordinates -- a well-known source of "content
   extends outside the modal" when it renders inside a Bootstrap modal,
   since its default z-index can sit below the modal/backdrop stack and
   its width can be miscalculated if the field was hidden at any point
   before becoming visible. */
.pac-container {
	z-index: 100000 !important;
}

/* ── Mobile (≤767.98px) ──────────────────────────────────────────────
   Sidebar-stacking mirrors the exact pattern already proven on this same
   modal's own Documents-tab sub-nav (.pp-doc-shell, same file, further
   down) -- flex-direction:column, horizontal-scrolling pill row, active
   indicator moves from a left bar to a bottom bar. Reused rather than
   inventing a second mobile nav pattern for the same modal. */
@media (max-width: 767.98px) {
	#modalPatientProfile .modal-body > .d-flex.h-100 {
		flex-direction: column !important;
		height: auto !important;
	}
	#modalPatientProfile .pp-sidebar {
		min-width: 100% !important;
		max-width: 100% !important;
		width: 100% !important;
		border-right: 0 !important;
		border-bottom: 1px solid #e9ecef;
	}
	#modalPatientProfile .pp-sidebar .nav.flex-column {
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding: 0.4rem !important;
		gap: 0 !important;
	}
	#modalPatientProfile .pp-sidebar .nav-link {
		/* padding/font-size at this breakpoint are already set by
		   mobile.css's own "Patient Profile Modal — Mobile Layout" section,
		   which loads after this file -- not repeated here to avoid two
		   files silently fighting over the same !important declaration. */
		white-space: nowrap;
		flex-shrink: 0;
	}
	#modalPatientProfile .pp-sidebar .nav-link.active::before {
		left: 0.5rem;
		right: 0.5rem;
		top: auto;
		bottom: 0;
		width: auto;
		height: 3px;
	}
	#modalPatientProfile #patientProfileContent {
		padding: 1rem !important;
	}

	/* Header: avatar+name+status stay on row 1 (real identity, always
	   visible); DOB/clinic/physician/last-order collapse away entirely
	   rather than truncating to an unreadable "Las…" fragment -- that
	   detail already lives on the Overview tab body. Actions wrap to
	   their own row instead of squeezing into an unreadably narrow strip. */
	#modalPatientProfile .pp-header {
		flex-wrap: wrap;
		padding-bottom: 0.6rem !important;
	}
	.pp-header__meta {
		display: none;
	}
	#modalPatientProfile .pp-header-actions {
		order: 3;
		width: 100%;
		margin-top: 0.5rem;
	}
	#modalPatientProfile .pp-header-actions .pp-header-btn {
		flex: 1 1 0;
		font-size: 0.75rem;
	}
	.pp-header__avatar {
		width: 2rem;
		height: 2rem;
		font-size: 0.78rem;
	}

	/* Attention band + Timeline: tighter padding, no other structural
	   change needed -- both are already single-column, wrapping-text
	   layouts (no fixed-width columns to break at narrow widths). */
	.pp-attention__item {
		padding: 0.65rem 0.75rem;
	}
	.pp-timeline {
		padding-left: 1.85rem;
	}
	.pp-timeline__marker {
		left: -1.85rem;
		width: 1.6rem;
		height: 1.6rem;
		font-size: 0.72rem;
	}
}

@media (max-width: 576px) {
	#modalPatientProfile .pp-header-actions .pp-header-btn {
		font-size: 0.7rem;
		padding: 0.4rem 0.5rem !important;
	}
}

/* Patient-profile sidebar tabs: keep every tab label on one line (e.g. the
   longer "Care Continuum" was wrapping to two) and trim the horizontal padding
   to make room. */
#patientProfileTabs .nav-link { white-space: nowrap; padding-left: 0.7rem; padding-right: 0.7rem; }

/* ── Care Continuum — wound-healing curve (patient profile) ───────────────
   Wound area (cm²) declining over time, split conservative (teal) → advanced
   (amber) at escalation, against the 50%-by-day-30 healing benchmark. One line
   per wound; solid = measured, hollow = product-size estimate. Fed by
   getPatientWoundCareContinuum()['healing'] / renderPatientProfileWoundCare(). */
.pp-wc {
	--wc-cons:#0E9F6E; --wc-cons-deep:#0A7D56; --wc-adv:#E0881E; --wc-adv-deep:#B45309; --wc-bench:#2563B0;
	--wc-stroke:#FFFFFF; --wc-border:#EFEBE5; --wc-hairline:#F2EEE8; --wc-faint:#B5AB9D;
	--wc-fg:#2A2622; --wc-muted:#6E6660; --wc-good:#0A7D56; --wc-surface2:#F7F4EF; --wc-btn-save:#0A7D56;
}
[data-theme-mode="dark"] .pp-wc {
	--wc-cons:#2DD4A0; --wc-cons-deep:#34D399; --wc-adv:#F0A842; --wc-adv-deep:#FBBF24; --wc-bench:#5AA0E8;
	--wc-stroke:#202020; --wc-border:#303030; --wc-hairline:#2A2A2A; --wc-faint:#6E6660;
	--wc-fg:#E8E8E8; --wc-muted:#9C948A; --wc-good:#34D399; --wc-surface2:#262019;
	/* Save button keeps a deep saturated green in dark (white-on-#0A7D56 ~5:1); the
	   mint --wc-cons-deep accent is for strokes/text, not a button fill. */
	--wc-btn-save:#0A7D56;
}

.pp-wc__head { margin-bottom: 0.4rem; }
.pp-wc__title { font-size: 1.1rem; font-weight: 700; color: var(--wc-fg); letter-spacing: -0.01em; }
.pp-wc__sub { font-size: 0.82rem; color: var(--wc-muted); margin-top: 0.12rem; }

/* KPI cards */
.pp-wc__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; margin: 0.85rem 0 0.4rem; }
.pp-wc__kpi { background: var(--wc-surface2); border: 1px solid var(--wc-border); border-radius: 0.7rem; padding: 0.6rem 0.7rem; }
.pp-wc__kpi b { display: block; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--wc-fg); }
.pp-wc__kpi span { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--wc-muted); font-weight: 700; margin-top: 0.2rem; display: block; }
.pp-wc__kpi--good b { color: var(--wc-good); }
@media (max-width: 560px){ .pp-wc__kpis { grid-template-columns: repeat(2, 1fr); } }

/* chart */
.pp-wc__chartwrap { margin-top: 0.3rem; }
.pp-wc__chart { width: 100%; height: auto; display: block; overflow: visible; }
.pp-wc__chart text { font-family: var(--default-font-family, "Inter", sans-serif); }
.pp-wc__band { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.pp-wc__grid { stroke: var(--wc-hairline); }
.pp-wc__axis { stroke: var(--wc-border); }
.pp-wc__axtxt { fill: var(--wc-muted); font-size: 11px; font-weight: 500; }
.pp-wc__axend { fill: var(--wc-faint); font-weight: 700; }
.pp-wc__axlabel { fill: var(--wc-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; }
.pp-wc__bench { stroke: var(--wc-bench); stroke-width: 1.3; stroke-dasharray: 5 4; opacity: 0.8; }
.pp-wc__benchlbl { fill: var(--wc-bench); font-size: 10px; font-weight: 700; }
.pp-wc__benchtraj { stroke: var(--wc-bench); stroke-width: 1.5; stroke-dasharray: 2 4; opacity: 0.6; }
.pp-wc__day30 { stroke: var(--wc-faint); stroke-width: 1.1; stroke-dasharray: 3 4; }
.pp-wc__esc { stroke: var(--wc-adv); stroke-width: 1.5; stroke-dasharray: 4 4; }
.pp-wc__curve { filter: drop-shadow(0 1px 1px rgba(0,0,0,0.06)); }
.pp-wc__pt { transition: r 0.12s ease; }
.pp-wc__pt:hover { r: 7.5; cursor: pointer; }
.pp-wc__wlbl { font-size: 10.5px; font-weight: 700; fill: var(--wc-fg); }
.pp-wc__note { font-size: 10.5px; font-weight: 700; }

/* legend */
.pp-wc__legend2 { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; margin-top: 0.7rem; font-size: 0.74rem; color: var(--wc-muted); }
.pp-wc__legend2 span { display: inline-flex; align-items: center; gap: 0.4rem; }
.pp-wc__sw { width: 18px; height: 3px; border-radius: 2px; display: inline-block; }
.pp-wc__sw--c { background: var(--wc-cons); } .pp-wc__sw--a { background: var(--wc-adv); }
.pp-wc__sw--b { border-top: 2px dashed var(--wc-bench); width: 18px; height: 0; }
.pp-wc__dote { width: 9px; height: 9px; border: 2px solid var(--wc-faint); border-radius: 50%; background: var(--wc-stroke); display: inline-block; }

/* necessity */
.pp-wc__necessity { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.86rem; line-height: 1.45; color: var(--wc-fg);
	background: rgba(14,159,110,0.09); border: 1px solid rgba(14,159,110,0.26); border-radius: 0.65rem; padding: 0.75rem 0.95rem; margin: 0.85rem 0 0; }
.pp-wc__nec-ico { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; color: var(--wc-cons-deep); }
.pp-wc__necessity--warn { background: rgba(194,65,12,0.09); border-color: rgba(194,65,12,0.3); }
.pp-wc__necessity--warn .pp-wc__nec-ico { color: var(--wc-adv-deep); }
.pp-wc__necessity--info { background: rgba(0,0,0,0.03); border-color: var(--wc-border); }
[data-theme-mode="dark"] .pp-wc__necessity--info { background: rgba(255,255,255,0.04); }
.pp-wc__necessity strong { font-weight: 800; }
.pp-wc__estnote { font-size: 0.76rem; color: var(--wc-muted); margin-top: 0.5rem; padding-left: 0.1rem; }
.pp-wc__estnote strong { color: var(--wc-fg); font-weight: 700; }

/* measurements table */
.pp-wc__ms { margin-top: 1.35rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pp-wc__ms-h { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wc-muted); margin: 0 0 0.3rem; font-weight: 800; }
.pp-wc__mtable { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.pp-wc__mtable th { text-align: left; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--wc-muted); font-weight: 700; padding: 0.5rem 0.5rem; border-bottom: 1px solid var(--wc-border); }
.pp-wc__mtable td { padding: 0.55rem 0.5rem; border-bottom: 1px solid var(--wc-hairline); vertical-align: middle; color: var(--wc-fg); }
.pp-wc__mtable tr:last-child td { border-bottom: 0; }
.pp-wc__mdate { color: var(--wc-muted); white-space: nowrap; }
.pp-wc__mdot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 0.5rem; vertical-align: -1px; }
.pp-wc__est { font-size: 0.6rem; color: var(--wc-muted); font-weight: 700; border: 1px solid var(--wc-border); border-radius: 0.3rem; padding: 0 0.35rem; margin-left: 0.4rem; }
.pp-wc__marea { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pp-wc__mred { color: var(--wc-good); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* empty state */
.pp-wc-empty { text-align: center; padding: 3rem 1.5rem; color: var(--wc-muted); }
.pp-wc-empty__ico { width: 46px; height: 46px; color: var(--wc-faint); margin: 0 auto 0.4rem; display: block; }
.pp-wc-empty h6 { margin: 0.75rem 0 0.35rem; font-weight: 700; color: var(--wc-fg); }
.pp-wc-empty p { font-size: 0.82rem; max-width: 470px; margin: 0 auto; line-height: 1.5; }

/* add-measurement control */
.pp-wc__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem 1rem; flex-wrap: wrap; }
.pp-wc__addbtn { border: 1px solid var(--wc-border); background: var(--wc-surface2); color: var(--wc-fg); font: inherit; font-size: 0.76rem; font-weight: 650; padding: 0.4rem 0.75rem; border-radius: 0.5rem; cursor: pointer; white-space: nowrap; }
.pp-wc__addbtn:hover { border-color: var(--wc-muted); }
.pp-wc__addform { margin-top: 0.7rem; padding: 0.85rem; border: 1px solid var(--wc-border); border-radius: 0.7rem; background: var(--wc-surface2); }
.pp-wc__addgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.6rem; }
.pp-wc__addform label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--wc-muted); font-weight: 700; min-width: 0; }
.pp-wc__addform input, .pp-wc__addform select { font: inherit; font-size: 0.86rem; font-weight: 500; text-transform: none; letter-spacing: 0; padding: 0.35rem 0.5rem; border: 1px solid var(--wc-border); border-radius: 0.4rem; background: var(--wc-stroke); color: var(--wc-fg); min-width: 0; }
/* Make the native date-picker indicator and number spinners render light-on-dark
   instead of dark-on-dark (the app themes via data-theme-mode, not color-scheme). */
[data-theme-mode="dark"] .pp-wc__addform input, [data-theme-mode="dark"] .pp-wc__addform select { color-scheme: dark; }
.pp-wc__addactions { display: flex; gap: 0.5rem; margin-top: 0.7rem; }
.pp-wc__addsave { border: 0; background: var(--wc-btn-save); color: #fff; font: inherit; font-size: 0.8rem; font-weight: 650; padding: 0.45rem 0.9rem; border-radius: 0.5rem; cursor: pointer; }
.pp-wc__addsave:hover { filter: brightness(1.06); }
.pp-wc__addsave:disabled { opacity: 0.6; cursor: default; }
.pp-wc__addcancel { border: 1px solid var(--wc-border); background: transparent; color: var(--wc-muted); font: inherit; font-size: 0.8rem; font-weight: 600; padding: 0.45rem 0.8rem; border-radius: 0.5rem; cursor: pointer; }
@media (max-width: 560px){ .pp-wc__addgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The chart is one fixed viewBox (948x392) scaled by width:100%, so on a phone the
   whole coordinate space (text included) shrinks to ~0.4x and 11px labels render at
   ~4px. Enlarge the SVG text in user-units at phone widths so it stays legible after
   the downscale. (overflow:visible on .pp-wc__chart means nothing clips.) */
@media (max-width: 560px){
	.pp-wc__band { font-size: 20px; }
	.pp-wc__axtxt, .pp-wc__axlabel { font-size: 19px; }
	.pp-wc__benchlbl { font-size: 16px; }
	.pp-wc__note, .pp-wc__wlbl { font-size: 19px; }
}