/* ================================================================
   style.css — ClinicBase Design System
   Font: Outfit (headings) + Nunito Sans (body) via Google Fonts
   Color: Emerald Green + Dark Apple Grey theme
   ================================================================ */

/* ---------- Google Fonts (loaded in HTML) ---------- */

/* ---------- CSS Custom Properties ---------- */
:root {
	/* Brand colors — Emerald Green */
	--c-primary: #059669; /* emerald-600 – health/clinical green */
	--c-primary-dk: #047857;
	--c-primary-lt: #d1fae5;
	--c-secondary: #606c38; /* olive green */
	--c-secondary-lt: #eef3df;
	--c-amber: #d97706;
	--c-amber-lt: #fef3c7;
	--c-danger: #dc2626;
	--c-danger-lt: #fee2e2;
	--c-purple: #7c3aed;
	--c-purple-lt: #ede9fe;

	/* Sidebar — Dark Apple Grey */
	--sidebar-bg: #3a3a3c; /* dark apple grey */
	--sidebar-w: 240px;
	--sidebar-text: #9ca3af;
	--sidebar-hover: rgba(255, 255, 255, 0.08);
	--sidebar-active: rgba(5, 150, 105, 0.18);
	--sidebar-border: rgba(255, 255, 255, 0.06);

	/* Surfaces */
	--bg: #f0fdf4;
	--surface: #ffffff;
	--border: #e2e8f0;
	--border-strong: #cbd5e1;
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
	--shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

	/* Typography */
	--text: #0f172a;
	--text-muted: #64748b;
	--text-faint: #94a3b8;

	/* Spacing */
	--radius: 8px;
	--radius-lg: 12px;
	--gap: 1.25rem;

	/* Mobile shell */
	--mobile-header-height: 56px;
	--mobile-nav-height: 64px;
	--safe-bottom: env(safe-area-inset-bottom, 0px);
	--safe-top: env(safe-area-inset-top, 0px);

	/* Shared auth/settings aliases */
	--primary: var(--c-primary);
	--primary-dark: var(--c-primary-dk);
	--primary-light: var(--c-primary-lt);
	--secondary: var(--c-secondary);
	--secondary-light: var(--c-secondary-lt);
	--accent: var(--c-secondary);
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html {
	font-size: 14px;
}
body {
	font-family: "Nunito Sans", sans-serif;
	background: var(--bg);
	color: var(--text);
	line-height: 1.6;
	min-height: 100vh;
	min-height: 100dvh;
	overflow-x: hidden;
}

/* ---------- Splash ---------- */
.splash-screen {
	position: fixed;
	inset: 0;
	background: linear-gradient(
		135deg,
		var(--c-primary) 0%,
		var(--c-primary-dk) 100%
	);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	transition: opacity 0.5s ease;
}

.splash-screen.fade-out {
	opacity: 0;
	pointer-events: none;
}

.splash-content {
	text-align: center;
	color: #fff;
}

.splash-icon {
	width: 82px;
	height: 82px;
	margin: 0 auto 1rem;
	animation: splash-bounce 1s infinite;
}

.splash-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.splash-title {
	font-family: "Outfit", sans-serif;
	font-size: 2rem;
	font-weight: 800;
	margin-bottom: 0.25rem;
}

.splash-subtitle {
	opacity: 0.85;
	font-size: 0.9rem;
}

.splash-loader {
	width: 44px;
	height: 4px;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 2px;
	margin: 1.5rem auto 0;
	overflow: hidden;
}

.splash-loader::after {
	content: "";
	display: block;
	width: 50%;
	height: 100%;
	background: #fff;
	border-radius: 2px;
	animation: splash-loading 1s ease-in-out infinite;
}

@keyframes splash-bounce {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-8px);
	}
}

@keyframes splash-loading {
	0% {
		transform: translateX(-100%);
	}
	100% {
		transform: translateX(200%);
	}
}
a {
	color: var(--c-primary);
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
img {
	max-width: 100%;
}

/* ---------- App Layout ---------- */
#app {
	display: flex;
	min-height: 100vh;
	min-height: 100dvh;
}

/* Main app container (mobile: flex column; desktop: flex:1 beside sidebar) */
.main-app {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

.hidden {
	display: none !important;
}

/* ---------- Sidebar ---------- */
#sidebar {
	width: var(--sidebar-w);
	background: var(--sidebar-bg);
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	overflow-y: auto;
	z-index: 100;
}

.sidebar__logo {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1.25rem 1rem;
	border-bottom: 1px solid var(--sidebar-border);
}
.sidebar__logo-icon {
	width: 36px;
	height: 36px;
	background: var(--c-primary);
	border-radius: var(--radius);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	flex-shrink: 0;
}
.sidebar__logo-text strong {
	font-family: "Outfit", sans-serif;
	color: #fff;
	font-size: 1rem;
	display: block;
}
.sidebar__logo-text small {
	color: var(--sidebar-text);
	font-size: 0.75rem;
}

#sidebar-nav {
	padding: 0.75rem 0;
	flex: 1;
}

.nav-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.65rem 1rem;
	color: var(--sidebar-text);
	transition: all 0.15s;
	border-radius: 0;
	cursor: pointer;
	text-decoration: none;
	font-size: 0.875rem;
}
.nav-item:hover {
	background: var(--sidebar-hover);
	color: #fff;
	text-decoration: none;
}
.nav-item--active {
	background: var(--sidebar-active);
	color: #ecfdf5;
	border-left: 3px solid var(--c-primary);
}
.nav-item svg {
	opacity: 0.8;
	flex-shrink: 0;
}
.nav-item--active svg {
	opacity: 1;
}

.sidebar__user {
	border-top: 1px solid var(--sidebar-border);
	padding: 1rem;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.sidebar__avatar {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--c-primary);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.75rem;
	font-weight: 700;
	flex-shrink: 0;
}
#sidebar-user-name {
	color: #fff;
	font-size: 0.875rem;
	font-weight: 600;
	display: block;
}
#sidebar-user-role {
	color: var(--sidebar-text);
	font-size: 0.75rem;
}

/* ---------- Content area (view-container) ---------- */
#view-container {
	flex: 1;
	overflow-y: auto;
	padding: 1.5rem;
}

/* ---------- Patient Banner ---------- */
#patient-banner {
	display: none;
}
.patient-banner--active {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--c-primary);
	color: #fff;
	padding: 0.6rem 1.5rem;
	gap: 1rem;
	flex-shrink: 0;
}
.patient-banner__info {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.patient-banner__avatar {
	width: 36px;
	height: 36px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.875rem;
	flex-shrink: 0;
}
.patient-banner__info strong {
	display: block;
	font-size: 0.9rem;
}
.patient-banner__info small {
	opacity: 0.8;
	font-size: 0.78rem;
}
.patient-banner__actions {
	display: flex;
	gap: 0.5rem;
	flex-shrink: 0;
}

/* ---------- View header ---------- */
.view-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 1.5rem;
	gap: 1rem;
}
.view-header h2 {
	font-family: "Outfit", sans-serif;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--text);
}
.view-header .text-muted {
	font-size: 0.875rem;
	color: var(--text-muted);
	margin-top: 0.2rem;
}

/* ---------- Cards ---------- */
.card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}
.card + .card,
.card.mt-2 {
	margin-top: var(--gap);
}
.card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.875rem 1.25rem;
	border-bottom: 1px solid var(--border);
	background: #fafbfd;
}
.card__head h3 {
	font-family: "Outfit", sans-serif;
	font-size: 0.95rem;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--text);
}
.card__body {
	padding: 1.25rem;
}
.card__body.p-0 {
	padding: 0;
}

/* ---------- Stats grid ---------- */
.stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--gap);
	margin-bottom: var(--gap);
}
.stat-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 1.25rem;
	display: flex;
	gap: 1rem;
	align-items: center;
	cursor: pointer;
	transition:
		transform 0.15s,
		box-shadow 0.15s;
	box-shadow: var(--shadow-sm);
}
.stat-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow);
}
.stat-card__icon {
	width: 48px;
	height: 48px;
	border-radius: var(--radius);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.stat-card--blue .stat-card__icon {
	background: var(--c-secondary-lt);
	color: var(--c-secondary);
}
.stat-card--teal .stat-card__icon {
	background: var(--c-primary-lt);
	color: var(--c-primary);
}
.stat-card--amber .stat-card__icon {
	background: var(--c-amber-lt);
	color: var(--c-amber);
}
.stat-card--purple .stat-card__icon {
	background: var(--c-purple-lt);
	color: var(--c-purple);
}
.stat-card__value {
	font-family: "Outfit", sans-serif;
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1;
}
.stat-card__label {
	font-size: 0.78rem;
	color: var(--text-muted);
	margin-top: 0.2rem;
}

/* ---------- Dashboard grid ---------- */
.dashboard-grid {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: var(--gap);
}

/* ---------- Alerts ---------- */
.alerts-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.alert-row {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.6rem 0.75rem;
	border-radius: var(--radius);
	font-size: 0.85rem;
}
.alert-row--warning {
	background: var(--c-amber-lt);
	color: #92400e;
}
.alert-row--info {
	background: var(--c-primary-lt);
	color: #0c4a6e;
}
.alert-row--success {
	background: var(--c-secondary-lt);
	color: #065f46;
}

/* ---------- Data table ---------- */
.table-wrap {
	overflow-x: auto;
}
.data-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.85rem;
}
.data-table th {
	padding: 0.65rem 1rem;
	text-align: left;
	font-weight: 600;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--text-muted);
	background: #f8fafc;
	border-bottom: 1px solid var(--border);
	white-space: nowrap;
}
.data-table td {
	padding: 0.7rem 1rem;
	border-bottom: 1px solid var(--border);
	vertical-align: middle;
}
.data-table tr:last-child td {
	border-bottom: none;
}
.data-table tbody tr:hover {
	background: #f0fdf4;
}

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.55rem 1rem;
	border-radius: var(--radius);
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	border: 1.5px solid transparent;
	transition: all 0.15s;
	white-space: nowrap;
	text-decoration: none;
}
.btn:focus {
	outline: 2px solid var(--c-primary);
	outline-offset: 2px;
}
.btn--primary {
	background: var(--c-primary);
	color: #fff;
}
.btn--primary:hover {
	background: var(--c-primary-dk);
}
.btn--secondary {
	background: var(--c-secondary);
	color: #fff;
}
.btn--secondary:hover {
	background: #4f5a2f;
}
.btn--danger {
	background: var(--c-danger);
	color: #fff;
}
.btn--danger:hover {
	background: #b91c1c;
}
.btn--ghost {
	background: transparent;
	border-color: var(--border-strong);
	color: var(--text);
}
.btn--ghost:hover {
	background: #f1f5f9;
}
.btn--sm {
	padding: 0.35rem 0.7rem;
	font-size: 0.8rem;
}
.btn-icon {
	width: 30px;
	height: 30px;
	border: none;
	background: none;
	cursor: pointer;
	border-radius: var(--radius);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--text-muted);
	transition: all 0.15s;
}
.btn-icon:hover {
	background: var(--c-primary-lt);
	color: var(--c-primary);
}
.btn-icon--danger:hover {
	background: var(--c-danger-lt);
	color: var(--c-danger);
}
.actions-cell {
	white-space: nowrap;
}

/* ---------- Forms ---------- */
.form-section {
	margin-bottom: 1.5rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--border);
}
.form-section:last-child {
	border-bottom: none;
	margin-bottom: 0;
}
.form-section h4 {
	font-family: "Outfit", sans-serif;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--c-primary);
	margin-bottom: 0.75rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.form-row {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}
.form-group {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}
.form-group--full {
	grid-column: 1 / -1;
}
.form-label {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--text-muted);
}
.form-label.required::after {
	content: " *";
	color: var(--c-danger);
}
.form-control {
	padding: 0.5rem 0.75rem;
	border: 1.5px solid var(--border-strong);
	border-radius: var(--radius);
	font-family: inherit;
	font-size: 0.875rem;
	color: var(--text);
	background: #fff;
	transition:
		border-color 0.15s,
		box-shadow 0.15s;
	width: 100%;
}
.form-control:focus {
	outline: none;
	border-color: var(--c-primary);
	box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.15);
}
.form-control.is-invalid {
	border-color: var(--c-danger);
}
.form-control[readonly] {
	background: #f8fafc;
	color: var(--text-muted);
}
textarea.form-control {
	resize: vertical;
	min-height: 80px;
}
.field-error {
	font-size: 0.75rem;
	color: var(--c-danger);
	margin-top: 0.15rem;
}
.field-hint {
	font-size: 0.75rem;
	color: var(--text-muted);
}
.form-note {
	font-size: 0.85rem;
	color: var(--text-muted);
	margin-bottom: 1rem;
	padding: 0.5rem 0.75rem;
	background: var(--c-primary-lt);
	border-radius: var(--radius);
}

.form-screen {
	width: 100%;
	max-width: 1040px;
	margin: 0 auto;
}
.form-screen__card {
	overflow: visible;
}
.form-screen__card--narrow {
	max-width: 680px;
}
.form-screen__inline {
	margin-bottom: 1.5rem;
}
.form-screen__actions {
	display: flex;
	justify-content: flex-end;
	gap: 0.75rem;
	margin-top: 1rem;
	padding-bottom: 0.5rem;
}
.form-screen__actions--inline {
	margin-top: 0;
}
.form-screen__actions--narrow {
	max-width: 680px;
}

/* ---------- Rx row layout ---------- */
.rx-row {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	margin-bottom: 0.5rem;
}

/* ---------- Lab checkboxes ---------- */
.lab-checks {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 0.4rem;
	margin-bottom: 0.5rem;
}
.check-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 0.6rem;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	cursor: pointer;
	font-size: 0.82rem;
	transition: background 0.12s;
}
.check-item:hover {
	background: var(--c-primary-lt);
}
.check-item input[type="checkbox"] {
	accent-color: var(--c-primary);
}

/* ---------- SOAP note styles ---------- */
.soap-tag {
	display: inline-flex;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.78rem;
	flex-shrink: 0;
}
.soap-tag--s {
	background: #dbeafe;
	color: #1d4ed8;
}
.soap-tag--o {
	background: #fef3c7;
	color: #92400e;
}
.soap-tag--a {
	background: #fee2e2;
	color: #991b1b;
}
.soap-tag--p {
	background: #d1fae5;
	color: #065f46;
}
.soap-section {
	display: flex;
	gap: 0.75rem;
	margin-bottom: 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--border);
}
.soap-section:last-child {
	border-bottom: none;
}
.soap-block {
	margin-top: 1rem;
}
.enc-meta {
	display: flex;
	gap: 1.5rem;
	flex-wrap: wrap;
	font-size: 0.85rem;
	padding: 0.75rem 1rem;
	background: var(--c-primary-lt);
	border-radius: var(--radius);
	margin-bottom: 1rem;
}

/* ---------- Badges ---------- */
.badge {
	display: inline-block;
	padding: 0.2em 0.6em;
	border-radius: 99px;
	font-size: 0.75rem;
	font-weight: 600;
}
.badge--success {
	background: var(--c-secondary-lt);
	color: #065f46;
}
.badge--warning {
	background: var(--c-amber-lt);
	color: #92400e;
}
.badge--danger {
	background: var(--c-danger-lt);
	color: #991b1b;
}
.badge--info {
	background: var(--c-primary-lt);
	color: #0c4a6e;
}
.badge--muted {
	background: #f1f5f9;
	color: var(--text-muted);
}
.badge--purple {
	background: var(--c-purple-lt);
	color: #5b21b6;
}

/* ---------- Tags (diagnosis) ---------- */
.tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0.5rem 0;
	min-height: 32px;
}
.tag {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.25em 0.6em;
	background: var(--c-primary-lt);
	color: var(--c-primary-dk);
	border-radius: 99px;
	font-size: 0.78rem;
	font-weight: 600;
}
.tag button {
	background: none;
	border: none;
	cursor: pointer;
	color: inherit;
	line-height: 1;
	display: inline-flex;
}
.tag--sm {
	font-size: 0.72rem;
	padding: 0.15em 0.5em;
}

/* ---------- Vital flags ---------- */
.flag {
	font-size: 0.82rem;
	font-weight: 600;
	padding: 0.1em 0.4em;
	border-radius: 4px;
}
.flag--high {
	background: var(--c-danger-lt);
	color: var(--c-danger);
}
.flag--low {
	background: var(--c-primary-lt);
	color: var(--c-primary);
}
.flag--normal {
	background: transparent;
	color: var(--text);
}

/* ---------- Vitals summary ---------- */
.vitals-summary {
	margin-bottom: var(--gap);
}
.vitals-current {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 1.25rem;
	box-shadow: var(--shadow-sm);
}
.vitals-current h4 {
	font-size: 0.85rem;
	color: var(--text-muted);
	margin-bottom: 0.75rem;
}
.vitals-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}
.vitals-chip {
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 0.5rem 0.875rem;
	text-align: center;
	min-width: 80px;
}
.vitals-chip span {
	display: block;
	font-size: 0.72rem;
	color: var(--text-muted);
	text-transform: uppercase;
}
.vitals-chip strong {
	display: block;
	font-family: "Outfit", sans-serif;
	font-size: 1.2rem;
	color: var(--text);
}
.vitals-chip em {
	font-size: 0.7rem;
	color: var(--text-faint);
	font-style: normal;
}

/* ---------- Modal ---------- */
#modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	backdrop-filter: blur(2px);
}
.modal {
	background: var(--surface);
	border-radius: var(--radius-lg);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	width: 100%;
	animation: modal-in 0.2s ease;
}
@keyframes modal-in {
	from {
		opacity: 0;
		transform: scale(0.95) translateY(8px);
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}
.modal--sm {
	max-width: 440px;
}
.modal--md {
	max-width: 640px;
}
.modal--lg {
	max-width: 820px;
}
.modal--xl {
	max-width: 1000px;
}
.modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--border);
	flex-shrink: 0;
}
.modal__head h3 {
	font-family: "Outfit", sans-serif;
	font-size: 1rem;
	font-weight: 700;
}
.modal__body {
	padding: 1.25rem;
	overflow-y: auto;
	flex: 1;
}
.modal__foot {
	display: flex;
	justify-content: flex-end;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	border-top: 1px solid var(--border);
	flex-shrink: 0;
	background: #fafbfd;
}

/* ---------- Search bar ---------- */
.search-bar {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	background: var(--surface);
	border: 1.5px solid var(--border-strong);
	border-radius: var(--radius);
	padding: 0.5rem 1rem;
	margin-bottom: var(--gap);
	box-shadow: var(--shadow-sm);
	max-width: 480px;
	color: var(--text-muted);
}
.search-input {
	border: none;
	outline: none;
	flex: 1;
	font-family: inherit;
	font-size: 0.875rem;
	color: var(--text);
}

/* ---------- Notices / alerts ---------- */
.notice {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	border-radius: var(--radius);
	font-size: 0.875rem;
	margin-bottom: var(--gap);
}
.notice--info {
	background: var(--c-primary-lt);
	color: #0c4a6e;
	border: 1px solid #bae6fd;
}
.notice--warning {
	background: var(--c-amber-lt);
	color: #92400e;
	border: 1px solid #fcd34d;
}

/* ---------- Empty state ---------- */
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 3rem 1.5rem;
	color: var(--text-faint);
	text-align: center;
	gap: 0.75rem;
}
.empty-state svg {
	width: 40px;
	height: 40px;
}
.empty-state p {
	font-size: 0.9rem;
}

/* ---------- Detail view ---------- */
.detail-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
}
.detail-block {
	background: #f8fafc;
	border-radius: var(--radius);
	padding: 1rem;
	border: 1px solid var(--border);
}
.detail-block--full {
	grid-column: 1 / -1;
}
.detail-block h5 {
	font-family: "Outfit", sans-serif;
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--c-primary);
	margin-bottom: 0.75rem;
}
dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.3rem 0.75rem;
	font-size: 0.85rem;
}
dt {
	color: var(--text-muted);
	font-weight: 600;
}
dd {
	color: var(--text);
}

/* ---------- Toast ---------- */
#toast {
	position: fixed;
	bottom: 1.5rem;
	right: 1.5rem;
	background: var(--text);
	color: #fff;
	padding: 0.75rem 1.25rem;
	border-radius: var(--radius);
	font-size: 0.875rem;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	box-shadow: var(--shadow);
	opacity: 0;
	transform: translateY(8px);
	transition: all 0.25s;
	z-index: 2000;
	pointer-events: none;
}
#toast.toast--show {
	opacity: 1;
	transform: translateY(0);
}
#toast.toast--success {
	background: var(--c-secondary);
}
#toast.toast--error {
	background: var(--c-danger);
}
#toast.toast--warning {
	background: var(--c-amber);
}
#toast.toast--info {
	background: var(--c-primary);
}

/* ---------- Inventory tab bar ---------- */
.tab-bar {
	display: flex;
	gap: 0.5rem;
	margin-bottom: var(--gap);
	flex-wrap: wrap;
}
.tab-btn {
	padding: 0.45rem 1rem;
	border: 1.5px solid var(--border-strong);
	border-radius: 99px;
	background: var(--surface);
	font-family: inherit;
	font-size: 0.8rem;
	font-weight: 600;
	cursor: pointer;
	color: var(--text-muted);
	transition: all 0.15s;
}
.tab-btn:hover,
.tab-btn--active {
	background: var(--c-primary);
	border-color: var(--c-primary);
	color: #fff;
}

/* ---------- Typography helpers ---------- */
.font-mono {
	font-family: "JetBrains Mono", "Courier New", monospace;
	font-size: 0.85em;
}
.text-muted {
	color: var(--text-muted);
}
.text-danger {
	color: var(--c-danger);
	font-weight: 600;
}
.mt-1 {
	margin-top: 0.75rem;
}
.mt-2 {
	margin-top: 1.25rem;
}
.link-sm {
	font-size: 0.8rem;
	color: var(--c-primary);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.dashboard-grid {
		grid-template-columns: 1fr;
	}
	.detail-grid {
		grid-template-columns: 1fr;
	}
	.form-row {
		grid-template-columns: 1fr;
	}
}
/* Desktop: hide mobile shell elements, show sidebar */
@media (min-width: 769px) {
	.mobile-header,
	#mobile-header,
	.bottom-nav,
	#bottom-nav {
		display: none !important;
	}
	#view-container {
		padding: 1.5rem;
	}
}
@media print {
	#sidebar,
	#patient-banner,
	.btn,
	.btn-icon,
	#mobile-header,
	#bottom-nav {
		display: none !important;
	}
	.main-app {
		margin: 0;
	}
	.card {
		box-shadow: none;
		border: 1px solid #ddd;
	}
}

.btn-block {
	width: 100%;
	justify-content: center;
}
.btn-lg {
	padding: 12px 16px;
	font-size: 0.95rem;
}

@media (max-width: 768px) {
	html {
		-webkit-text-size-adjust: 100%;
		height: 100%;
		overflow: hidden;
	}

	body {
		height: 100%;
		overflow: hidden;
		overscroll-behavior: none;
		touch-action: manipulation;
	}

	#app {
		min-height: 100vh;
		min-height: 100dvh;
		height: 100vh;
		height: 100dvh;
		overflow: hidden;
	}

	#sidebar {
		display: none !important;
	}

	.main-app {
		min-height: 100vh;
		min-height: 100dvh;
		height: 100vh;
		height: 100dvh;
		overflow: hidden;
	}

	.mobile-header,
	#mobile-header {
		position: sticky;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: var(--sidebar-bg);
		color: #fff;
		padding: calc(env(safe-area-inset-top, 0px) + 8px) 1rem 8px;
		min-height: calc(
			var(--mobile-header-height) +
			env(safe-area-inset-top, 0px) +
			8px
		);
		flex-shrink: 0;
		z-index: 100;
	}

	.mobile-header__brand {
		display: flex;
		align-items: center;
		gap: 0.6rem;
	}

	.mobile-header__logo {
		width: 30px;
		height: 30px;
		background: var(--c-primary);
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}

	.mobile-header__title {
		font-family: "Outfit", sans-serif;
		font-size: 1rem;
		font-weight: 700;
		color: #fff;
		line-height: 1.1;
	}

	.mobile-header__subtitle {
		display: block;
		font-size: 0.7rem;
		color: var(--sidebar-text);
	}

	.mobile-header__actions {
		display: flex;
		align-items: center;
		gap: 0.25rem;
	}

	.mobile-header__btn {
		width: 40px;
		height: 40px;
		background: rgba(15, 23, 42, 0.24);
		border: none;
		border-radius: 10px;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		position: relative;
	}

	.mobile-header__btn::after {
		content: "";
		position: absolute;
		inset: -6px;
	}

	.mobile-header__btn:active {
		background: rgba(15, 23, 42, 0.34);
	}

	#patient-banner {
		flex-shrink: 0;
		z-index: 190;
	}

	.patient-banner--active {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		background: var(--c-primary);
		color: #fff;
		padding: 0.5rem 0.875rem;
		gap: 0.5rem;
		min-height: 44px;
	}

	.patient-banner__actions {
		display: none !important;
	}

	.patient-banner__info {
		flex: 1;
		gap: 0.5rem;
		min-width: 0;
	}

	.patient-banner__info strong,
	.patient-banner__info small {
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.patient-banner__info strong {
		font-size: 0.82rem;
	}

	.patient-banner__info small {
		font-size: 0.7rem;
		opacity: 0.85;
	}

	.content,
	#view-container {
		flex: 1;
		min-height: 0;
		overflow-y: auto;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		padding: 1rem;
		padding-bottom: calc(var(--mobile-nav-height) + var(--safe-bottom) + 1rem);
	}

	.bottom-nav,
	#bottom-nav {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: calc(var(--mobile-nav-height) + var(--safe-bottom));
		padding-bottom: var(--safe-bottom);
		display: flex;
		border-top: 1px solid var(--border);
		z-index: 100;
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		background: rgba(255, 255, 255, 0.95);
		box-shadow:
			0 -1px 0 var(--border),
			0 -4px 16px rgba(0, 0, 0, 0.06);
	}

	.bottom-nav__item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 0.55rem 0.25rem;
		min-height: 58px;
		color: var(--text-faint);
		cursor: pointer;
		background: none;
		border: none;
		font-family: inherit;
		transition: color 0.15s;
		position: relative;
		-webkit-tap-highlight-color: transparent;
	}

	.bottom-nav__item:active {
		background: rgba(3, 105, 161, 0.06);
	}

	.bottom-nav__icon {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 28px;
		border-radius: 14px;
		transition: background 0.15s;
		margin-bottom: 2px;
	}

	.bottom-nav__item--active {
		color: var(--c-primary);
	}

	.bottom-nav__item--active .bottom-nav__icon {
		background: var(--c-primary-lt);
	}

	.bottom-nav__label {
		font-size: 0.62rem;
		font-weight: 600;
		letter-spacing: -0.01em;
		line-height: 1;
	}

	.mobile-more-sheet {
		position: fixed;
		inset: 0;
		z-index: 1300;
		display: flex;
		align-items: flex-end;
	}

	.mobile-more-sheet__backdrop {
		position: absolute;
		inset: 0;
		background: rgba(15, 23, 42, 0.38);
	}

	.mobile-more-sheet__panel {
		position: relative;
		width: 100%;
		background: #fff;
		border-radius: 22px 22px 0 0;
		padding: 10px 16px calc(16px + var(--safe-bottom));
		box-shadow: 0 -10px 30px rgba(15, 23, 42, 0.16);
	}

	.mobile-more-sheet__handle {
		width: 40px;
		height: 4px;
		border-radius: 999px;
		background: #cbd5e1;
		margin: 0 auto 12px;
	}

	.mobile-more-sheet__header {
		margin-bottom: 8px;
	}

	.mobile-more-sheet__header h3 {
		font-family: "Outfit", sans-serif;
		font-size: 1rem;
		font-weight: 700;
		color: var(--text);
	}

	.mobile-more-sheet__list {
		display: grid;
		gap: 8px;
	}

	.mobile-more-sheet__item {
		width: 100%;
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 14px 12px;
		border: 1px solid var(--border);
		border-radius: 14px;
		background: #fff;
		color: var(--text);
		font: inherit;
		font-weight: 600;
		cursor: pointer;
		text-align: left;
	}

	.mobile-more-sheet__icon {
		width: 36px;
		height: 36px;
		border-radius: 10px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: var(--c-primary-lt);
		color: var(--c-primary);
		flex-shrink: 0;
	}

	.view-header {
		flex-direction: column;
		align-items: stretch;
		gap: 0.75rem;
		margin-bottom: 1rem;
	}

	.view-header h2 {
		font-size: 1.25rem;
	}

	.view-header .btn {
		width: 100%;
		justify-content: center;
	}

	.stats-grid {
		grid-template-columns: 1fr 1fr;
		gap: 0.75rem;
	}

	.stat-card {
		padding: 0.875rem;
	}

	.stat-card__icon {
		width: 38px;
		height: 38px;
	}

	.stat-card__value {
		font-size: 1.5rem;
	}

	.dashboard-grid,
	.detail-grid,
	.form-row {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}

	.card__body.p-0 {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.data-table {
		min-width: 560px;
	}

	.data-table th,
	.data-table td {
		padding: 0.55rem 0.75rem;
		font-size: 0.78rem;
	}

	.btn {
		min-height: 44px;
		padding: 0.65rem 1.1rem;
		font-size: 0.9rem;
	}

	.btn--sm {
		min-height: 36px;
		padding: 0.4rem 0.8rem;
		font-size: 0.8rem;
	}

	.btn-icon {
		width: 36px;
		height: 36px;
	}

	.form-control,
	.auth-form .form-input {
		font-size: 16px;
		min-height: 44px;
	}

	textarea.form-control {
		min-height: 80px;
		font-size: 16px;
	}

	#toast {
		left: 50%;
		right: auto;
		transform: translateX(-50%) translateY(8px);
		bottom: calc(74px + env(safe-area-inset-bottom, 0px) + 0.5rem);
		min-width: 260px;
		max-width: calc(100vw - 2rem);
		text-align: center;
		justify-content: center;
	}

	#toast.toast--show {
		transform: translateX(-50%) translateY(0);
	}

	.auth-screen {
		padding: 24px 16px;
	}
}

/* ---------- Facility setup ---------- */
.setup-form {
	max-width: 640px;
}
.setup-form .form-section {
	margin-bottom: 1.5rem;
}

/* ---------- Animations ---------- */
.anim-fade {
	animation: fadeIn 0.25s ease;
}
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ---------- iOS safe areas ---------- */
@supports (padding-top: env(safe-area-inset-top)) {
	#sidebar {
		padding-top: env(safe-area-inset-top);
	}
}

/* ---------- Autocomplete dropdown ---------- */
.autocomplete-list {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	max-height: 260px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	z-index: 100;
	margin-top: 2px;
}
.autocomplete-item {
	padding: 0.6rem 0.85rem;
	cursor: pointer;
	border-bottom: 1px solid var(--border);
	font-size: 0.85rem;
	line-height: 1.35;
}
.autocomplete-item:last-child {
	border-bottom: none;
}
.autocomplete-item:hover {
	background: var(--bg-green, #f0fdf4);
}
.autocomplete-item strong {
	color: var(--c-primary);
}

/* ---------- Settings tabs ---------- */
.settings-tabs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}
.settings-tab {
	padding: 0.95rem 1rem;
	border: 1px solid var(--border);
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.98) 0%,
		rgba(248, 250, 252, 0.98) 100%
	);
	cursor: pointer;
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--text-muted);
	white-space: normal;
	transition:
		transform 0.18s,
		color 0.18s,
		border-color 0.18s,
		box-shadow 0.18s;
	border-radius: 18px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	min-height: 102px;
	box-shadow: 0 14px 30px rgba(15, 23, 42, 0.05);
}
.settings-tab i {
	width: 2.35rem;
	height: 2.35rem;
	padding: 0.55rem;
	border-radius: 14px;
	background: rgba(37, 99, 235, 0.08);
	color: var(--c-primary);
}
.settings-tab:hover {
	color: var(--c-primary);
	transform: translateY(-1px);
}
.settings-tab--active {
	color: var(--c-primary);
	border-color: rgba(37, 99, 235, 0.35);
	box-shadow: 0 18px 32px rgba(37, 99, 235, 0.12);
	background: linear-gradient(
		180deg,
		rgba(219, 234, 254, 0.88) 0%,
		rgba(255, 255, 255, 0.98) 100%
	);
}
.settings-panel {
	display: none;
}
.settings-panel--active {
	display: block;
}

.settings-preset-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
	gap: 0.75rem;
}

.settings-preset {
	border: 1px solid var(--border);
	border-radius: 16px;
	background: var(--surface, #fff);
	padding: 0.85rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.6rem;
	cursor: pointer;
}

.settings-preset__swatches {
	display: flex;
	gap: 0.35rem;
}

.settings-preset__swatches span {
	width: 1rem;
	height: 1rem;
	border-radius: 999px;
}

.settings-color-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.settings-color-row input[type="color"] {
	width: 2.8rem;
	height: 2.8rem;
	border: none;
	background: transparent;
	padding: 0;
	cursor: pointer;
}

.settings-color-row span {
	font-family:
		ui-monospace,
		SFMono-Regular,
		Menlo,
		Monaco,
		Consolas,
		Liberation Mono,
		monospace;
	color: var(--text-muted);
	font-size: 0.82rem;
}

@media (max-width: 768px) {
	.settings-tabs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.form-screen__actions,
	.form-screen__actions--inline,
	.form-screen__actions--narrow {
		flex-direction: column-reverse;
	}

	.form-screen__actions .btn,
	.form-screen__actions--inline .btn,
	.form-screen__actions--narrow .btn {
		width: 100%;
		justify-content: center;
	}

	.rx-row {
		flex-direction: column;
		align-items: stretch;
	}

	.rx-row .form-control,
	.rx-row .btn-icon {
		width: 100% !important;
	}
}

/* ═══════════════════════════════════════════════
   REPORTS & ANALYTICS MODULE
═══════════════════════════════════════════════ */

/* Period selector bar */
.rpt-period-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--surface);
	padding: 10px 16px;
	border-radius: var(--radius);
	border: 1px solid #e2e8f0;
	margin-bottom: 16px;
}
.rpt-period-bar select {
	flex: 0 0 auto;
	max-width: 160px;
}

/* Tab cards row */
.rpt-tab-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 10px;
	margin-bottom: 20px;
}
.rpt-tab-card {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--surface);
	border: 2px solid #e2e8f0;
	border-radius: var(--radius);
	padding: 12px 14px;
	cursor: pointer;
	transition: all 0.15s;
	text-align: left;
	font-family: inherit;
}
.rpt-tab-card:hover {
	border-color: var(--c-primary);
	background: var(--c-primary-lt);
}
.rpt-tab-card--active {
	border-color: var(--c-primary);
	background: var(--c-primary-lt);
	box-shadow: 0 0 0 1px var(--c-primary);
}
.rpt-tab-card strong {
	display: block;
	font-size: 13px;
	color: var(--text);
}
.rpt-tab-card small {
	display: block;
	font-size: 11px;
	color: var(--text-muted);
	margin-top: 2px;
}

/* Report header banner */
.rpt-header-banner {
	background: linear-gradient(135deg, var(--c-primary-dk), var(--c-primary));
	color: #fff;
	padding: 16px 20px;
	margin-bottom: 16px;
	border-radius: var(--radius);
}
.rpt-header-banner__org {
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .5px;
	opacity: .75;
	margin-bottom: 4px;
}
.rpt-header-banner__title {
	font-size: 16px;
	font-weight: 700;
}
.rpt-header-banner__meta {
	font-size: 12px;
	opacity: .8;
	margin-top: 6px;
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}
.rpt-header-banner__meta i {
	vertical-align: -2px;
	margin-right: 4px;
}

/* Stats row (mini stat tiles) */
.rpt-stats-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 10px;
	margin-bottom: 16px;
}
.rpt-mini-stat {
	background: var(--surface);
	border: 1px solid #e2e8f0;
	border-radius: var(--radius);
	padding: 14px;
	text-align: center;
}
.rpt-mini-stat svg {
	margin-bottom: 6px;
}
.rpt-mini-stat__val {
	font-size: 22px;
	font-weight: 700;
	color: var(--text);
	line-height: 1.1;
}
.rpt-mini-stat__label {
	font-size: 11px;
	color: var(--text-muted);
	margin-top: 4px;
}
.rpt-mini-stat--blue svg { color: #3b82f6; }
.rpt-mini-stat--teal svg { color: #14b8a6; }
.rpt-mini-stat--amber svg { color: #f59e0b; }
.rpt-mini-stat--red svg { color: #ef4444; }
.rpt-mini-stat--purple svg { color: #8b5cf6; }

/* DHIMS-style data row */
.rpt-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 0;
	border-bottom: 1px solid #f1f5f9;
	gap: 12px;
}
.rpt-row:last-child {
	border-bottom: none;
}
.rpt-row__label {
	font-size: 13px;
	color: var(--text);
	flex: 1;
}
.rpt-row__label small {
	display: block;
	font-size: 11px;
	color: var(--text-muted);
}
.rpt-auto-badge {
	display: inline-block;
	font-size: 9px;
	font-weight: 700;
	color: var(--c-primary);
	background: var(--c-primary-lt);
	padding: 1px 5px;
	border-radius: 3px;
	margin-left: 6px;
	vertical-align: middle;
}
.rpt-row__input {
	width: 80px;
	text-align: right;
	padding: 6px 8px;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	font-family: 'JetBrains Mono', monospace;
}
.rpt-row__input--auto {
	background: #f8fafc;
	color: var(--c-primary-dk);
	border-color: var(--c-primary-lt);
}
.rpt-row__input:focus {
	outline: none;
	border-color: var(--c-primary);
	box-shadow: 0 0 0 2px rgba(5,150,105,.15);
}

/* Section head */
.rpt-section-head {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
}

/* Horizontal bar chart */
.rpt-hbar {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
}
.rpt-hbar__rank {
	font-size: 11px;
	font-weight: 700;
	color: var(--text-muted);
	width: 20px;
	text-align: center;
	flex-shrink: 0;
}
.rpt-hbar__track {
	flex: 1;
	background: #f1f5f9;
	border-radius: 4px;
	height: 28px;
	position: relative;
	overflow: hidden;
}
.rpt-hbar__fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background: linear-gradient(90deg, var(--c-primary-lt), var(--c-primary));
	border-radius: 4px;
	transition: width .4s ease;
	min-width: 2px;
}
.rpt-hbar__label {
	position: absolute;
	top: 50%;
	left: 8px;
	transform: translateY(-50%);
	font-size: 11px;
	font-weight: 600;
	color: var(--text);
	white-space: nowrap;
	z-index: 1;
}
.rpt-hbar__count {
	font-size: 13px;
	font-weight: 700;
	font-family: 'JetBrains Mono', monospace;
	width: 36px;
	text-align: right;
	flex-shrink: 0;
}

/* Proportion bar (pie alternative) */
.rpt-proportion-bar {
	display: flex;
	height: 24px;
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: 12px;
}
.rpt-proportion-bar__seg {
	transition: width .4s ease;
	min-width: 2px;
}
.rpt-proportion-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	font-size: 11px;
	color: var(--text-muted);
}
.rpt-proportion-legend i {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 2px;
	vertical-align: -1px;
	margin-right: 4px;
}

/* 6-month trend bars */
.rpt-trend {
	display: flex;
	align-items: flex-end;
	justify-content: space-around;
	height: 160px;
	gap: 8px;
	padding-top: 16px;
}
.rpt-trend__col {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;
}
.rpt-trend__bar {
	width: 100%;
	max-width: 48px;
	background: linear-gradient(180deg, var(--c-primary), var(--c-primary-lt));
	border-radius: 4px 4px 0 0;
	min-height: 4px;
	transition: height .4s ease;
}
.rpt-trend__val {
	font-size: 12px;
	font-weight: 700;
	font-family: 'JetBrains Mono', monospace;
	margin-top: 4px;
	color: var(--text);
}
.rpt-trend__label {
	font-size: 10px;
	color: var(--text-muted);
	margin-top: 2px;
}

/* Compact data table variant */
.data-table--compact th,
.data-table--compact td {
	padding: 8px 10px;
	font-size: 12px;
}
.data-table--compact code {
	font-size: 10px;
	background: #f1f5f9;
	padding: 1px 5px;
	border-radius: 3px;
}
.data-table__total td {
	border-top: 2px solid var(--c-primary-lt);
	background: #f8fafc;
}

/* Morbidity table */
.data-table--morbidity {
	min-width: 640px;
}

/* Report content area */
.rpt-content {
	margin-top: 0;
}

/* Print styles for reports */
@media print {
	.rpt-period-bar,
	.rpt-tab-cards,
	.view-header .btn,
	#sidebar,
	#bottom-nav,
	#mobile-header,
	#patient-banner,
	.btn--ghost,
	.btn--primary { display: none !important; }

	.rpt-header-banner {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.card { break-inside: avoid; }
	.data-table { font-size: 10px; }
}

/* Mobile adjustments for reports */
@media (max-width: 768px) {
	.rpt-tab-cards {
		grid-template-columns: repeat(2, 1fr);
	}
	.rpt-stats-row {
		grid-template-columns: repeat(2, 1fr);
	}
	.rpt-tab-card {
		padding: 10px;
	}
	.rpt-tab-card small {
		display: none;
	}
	.rpt-hbar__label {
		font-size: 10px;
	}
	.data-table--morbidity {
		font-size: 10px;
	}
}


/* ================================================================
   HIV / MCH Module Styles — openHealth Extensions
   ================================================================ */

/* ---- CSS variable extensions ---- */
:root {
	--fuchsia: #d946ef;
	--fuchsia-dark: #a21caf;
	--indigo: #6366f1;
	--teal: #14b8a6;
	--emerald: var(--c-primary);
	--blush: #fdf2f8;
	--warm-gray: #78716c;
	--ghost: #e7e5e4;

	/* Risk level colors */
	--risk-hi: #dc2626;
	--risk-hi-bg: #fee2e2;
	--risk-mod: #d97706;
	--risk-md-bg: #fef3c7;
}

/* ---- Single-dash button aliases (for HIV/MCH modules using MW/CC naming) ---- */
.btn-primary { background: var(--c-primary); color: #fff; }
.btn-primary:hover { background: var(--c-primary-dk); }
.btn-success { background: #059669; color: #fff; }
.btn-success:hover { background: #047857; }
.btn-danger { background: var(--c-danger); color: #fff; }
.btn-danger:hover { background: #b91c1c; }
.btn-ghost { background: transparent; border-color: var(--border-strong); color: var(--text); }
.btn-ghost:hover { background: #f1f5f9; }
.btn-sm { padding: 0.35rem 0.7rem; font-size: 0.8rem; }
.btn-block { width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; }
.btn-secondary { background: var(--c-secondary); color: #fff; }

/* ---- Form heads (colored section headers for HIV/MCH) ---- */
.form-head {
	display: flex; align-items: center; gap: 8px;
	font-family: "Outfit", sans-serif; font-weight: 600; font-size: 0.9rem;
	padding: 8px 12px; border-radius: var(--radius); margin-bottom: 12px;
}
.fh-red     { background: #fee2e2; color: #b91c1c; }
.fh-indigo  { background: #e0e7ff; color: #4338ca; }
.fh-emerald { background: #d1fae5; color: #047857; }
.fh-purple  { background: #ede9fe; color: #6d28d9; }
.fh-amber   { background: #fef3c7; color: #92400e; }
.fh-teal    { background: #ccfbf1; color: #0d9488; }
.fh-orange  { background: #ffedd5; color: #c2410c; }
.fh-fuchsia { background: #fdf2f8; color: #a21caf; }

/* ---- Form grid (2-col responsive grid for HIV/MCH forms) ---- */
.form-grid {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
	margin-bottom: 10px;
}
.form-grid .field { display: flex; flex-direction: column; gap: 2px; }
.form-grid .field.full { grid-column: 1 / -1; }
.form-grid label {
	font-size: 0.78rem; font-weight: 600; color: var(--text-muted);
}
.form-grid input, .form-grid select, .form-grid textarea {
	padding: 8px 10px; border: 1.5px solid var(--border);
	border-radius: var(--radius); font-size: 0.85rem;
	background: var(--surface); color: var(--text);
}
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus {
	outline: none; border-color: var(--c-primary);
	box-shadow: 0 0 0 3px var(--c-primary-lt);
}
.form-grid textarea { min-height: 60px; resize: vertical; }
@media (max-width: 480px) {
	.form-grid { grid-template-columns: 1fr; }
}

/* ---- Section label ---- */
.sec-label {
	font-family: "Outfit", sans-serif; font-weight: 600; font-size: 0.8rem;
	color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px;
	margin: 14px 0 6px; padding: 0;
}

/* ---- Patient banner (inline banner for HIV/MCH modules) ---- */
.pt-banner {
	display: flex; align-items: center; gap: 10px;
	padding: 10px 12px; border-radius: var(--radius);
	background: var(--c-primary-lt); border: 1.5px solid var(--c-primary);
}
.pt-banner .avatar {
	width: 36px; height: 36px; border-radius: 50%;
	background: var(--c-primary); color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: 0.8rem;
}
.pt-banner .name { font-weight: 600; font-size: 0.9rem; }
.pt-banner .meta { font-size: 0.75rem; color: var(--text-muted); }

/* ---- Patient dropdown (inline search results) ---- */
.pt-dropdown {
	display: none; position: absolute; left: 0; right: 0; top: 100%;
	background: var(--surface); border: 1.5px solid var(--border);
	border-radius: var(--radius); box-shadow: var(--shadow);
	max-height: 200px; overflow-y: auto; z-index: 100;
}
.pt-dd-row {
	padding: 8px 12px; cursor: pointer; font-size: 0.85rem;
	display: flex; align-items: center; justify-content: space-between;
}
.pt-dd-row:hover { background: var(--c-primary-lt); }
.pt-dd-row small { color: var(--text-muted); font-size: 0.75rem; }
.pt-dd-empty { padding: 10px 12px; color: var(--text-muted); font-size: 0.85rem; }

/* ---- HTS test boxes ---- */
.test-box {
	padding: 10px; border-radius: var(--radius);
	border: 1.5px solid var(--border); margin-bottom: 8px;
}
.test-box.t1 { border-left: 4px solid #3b82f6; }
.test-box.t2 { border-left: 4px solid #f59e0b; }
.test-box.t3 { border-left: 4px solid #ef4444; }

/* ---- Result panel ---- */
.result-panel {
	padding: 12px; border-radius: var(--radius);
	text-align: center; margin: 10px 0; font-weight: 700;
}
.rv.positive   { background: #fee2e2; color: #b91c1c; border: 2px solid #ef4444; }
.rv.negative   { background: #d1fae5; color: #047857; border: 2px solid #10b981; }
.rv.inconclusive { background: #fef3c7; color: #92400e; border: 2px solid #f59e0b; }
.rv.pending    { background: #f0f0f0; color: #666; border: 2px solid #ccc; }

/* ---- DSS alert banners ---- */
.dss-alert {
	display: flex; gap: 10px; align-items: flex-start;
	padding: 10px 12px; border-radius: var(--radius);
	margin-bottom: 8px; font-size: 0.85rem;
}
.dss-alert.danger  { background: #fee2e2; border-left: 4px solid #ef4444; }
.dss-alert.warning { background: #fef3c7; border-left: 4px solid #f59e0b; }
.dss-alert.info    { background: #dbeafe; border-left: 4px solid #3b82f6; }
.dss-alert i { font-size: 1.2rem; flex-shrink: 0; margin-top: 2px; }

/* ---- Alert banner (generic) ---- */
.alert-banner {
	display: flex; align-items: center; gap: 8px;
	padding: 8px 12px; border-radius: var(--radius);
	font-size: 0.82rem;
}
.alert-banner.info { background: #dbeafe; color: #1e40af; }
.alert-banner.success { background: #d1fae5; color: #047857; }
.alert-banner.warning { background: #fef3c7; color: #92400e; }
.alert-banner.error { background: #fee2e2; color: #b91c1c; }

/* ---- AI panel / gauge ---- */
.ai-panel {
	padding: 12px; border-radius: var(--radius);
	border: 1.5px solid var(--border); margin: 10px 0;
}
.gauge-wrap { text-align: center; margin-bottom: 8px; }
.gauge-label { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; }
.ai-alerts { margin-top: 8px; }
.ai-alert-row {
	display: flex; align-items: center; gap: 6px;
	font-size: 0.8rem; padding: 3px 0;
}

/* ---- Pill tabs (for ART initial/followup/iit) ---- */
.pill-tabs {
	display: flex; gap: 4px; margin-bottom: 12px;
	background: #f1f5f9; border-radius: var(--radius); padding: 3px;
}
.pill-tabs .pill {
	flex: 1; padding: 8px; text-align: center; cursor: pointer;
	border-radius: 6px; font-size: 0.82rem; font-weight: 600;
	transition: all 0.15s;
}
.pill-tabs .pill.active {
	background: var(--c-primary); color: #fff;
}

/* ---- Appointment card ---- */
.appt-card {
	padding: 8px 12px; border-radius: var(--radius);
	background: #f0fdf4; border: 1.5px solid #86efac;
	font-size: 0.82rem; margin-bottom: 6px;
}

/* ---- Badge (inline status pill) ---- */
.badge {
	display: inline-block; padding: 2px 8px; border-radius: 12px;
	font-size: 0.7rem; font-weight: 700;
}
.badge-green { background: #d1fae5; color: #047857; }
.badge-red { background: #fee2e2; color: #b91c1c; }
.badge-amber { background: #fef3c7; color: #92400e; }
.badge-blue { background: #dbeafe; color: #1e40af; }

/* ---- Settings grid (for child care tabs) ---- */
.settings-grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.settings-card {
	display: flex; flex-direction: column; align-items: center;
	padding: 12px 8px; border-radius: var(--radius);
	border: 1.5px solid var(--border); cursor: pointer;
	transition: all 0.15s;
}
.settings-card:hover { border-color: var(--c-primary); }
.settings-card.active {
	border-color: var(--c-primary); background: var(--c-primary-lt);
}
.settings-card__icon {
	font-size: 1.4rem; margin-bottom: 4px; color: var(--c-primary);
}
.settings-card__title {
	font-size: 0.75rem; font-weight: 600; text-align: center;
}
@media (max-width: 480px) {
	.settings-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Patient list row (for ANC list / Alerts) ---- */
.patient-row {
	display: flex; align-items: center; gap: 10px;
	padding: 10px 12px; cursor: pointer;
	border-bottom: 1px solid var(--border);
}
.patient-row:last-child { border-bottom: none; }
.patient-row:hover { background: #f8fafc; }
.patient-row .avatar {
	width: 36px; height: 36px; border-radius: 50%;
	background: var(--c-primary); color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: 0.75rem; flex-shrink: 0;
}
.patient-row .patient-info { flex: 1; min-width: 0; }
.patient-row .name { font-weight: 600; font-size: 0.88rem; }
.patient-row .meta { font-size: 0.75rem; color: var(--text-muted); }
.patient-row .chev { color: var(--text-muted); }

/* ---- Detail rows ---- */
.detail-row {
	display: flex; justify-content: space-between; padding: 6px 12px;
	border-bottom: 1px solid var(--border); font-size: 0.82rem;
}
.detail-row:last-child { border-bottom: none; }
.detail-row .dk { font-weight: 600; color: var(--text); }
.detail-row .dv { color: var(--text-muted); text-align: right; }

/* ---- Card body (for child care tab panels) ---- */
.card-body { padding: 12px; }

/* ---- Section label ---- */
.section-label {
	font-family: "Outfit", sans-serif; font-weight: 600; font-size: 0.8rem;
	color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px;
	margin: 14px 0 6px; padding: 0 12px;
}

/* ═══════════════════════════════════════════
   HUB / SERVICE DASHBOARDS
═══════════════════════════════════════════ */
.hub-header { margin: 0 0 20px; }
.hub-header h2 { font-family: "Outfit", sans-serif; font-weight: 700; font-size: 1.2rem; margin: 0 0 4px; }
.hub-header p { font-size: .82rem; color: var(--text-muted); margin: 0; }

.hub-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 12px; margin-top: 16px;
}
.hub-action {
	background: var(--card); border: 1px solid var(--border); border-radius: 12px;
	padding: 18px 14px; text-align: center; cursor: pointer;
	transition: transform .15s, box-shadow .15s;
}
.hub-action:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.hub-action:active { transform: scale(.97); }
.hub-action__icon {
	width: 44px; height: 44px; border-radius: 50%; margin: 0 auto 10px;
	display: flex; align-items: center; justify-content: center; font-size: 20px;
	color: #fff;
}
.hub-action__label { font-weight: 700; font-size: .85rem; margin-bottom: 3px; }
.hub-action__desc { font-size: .72rem; color: var(--text-muted); line-height: 1.3; }

/* Hub alert banner */
.hub-alert {
	background: #fff3cd; border-left: 4px solid #ffc107; border-radius: 8px;
	padding: 10px 14px; font-size: .82rem; margin-top: 16px;
}
[data-theme="dark"] .hub-alert { background: #3d3200; }

/* Hub summary table */
.hub-summary { margin-top: 20px; }
.hub-summary h4 { font-size: .85rem; font-weight: 700; margin: 0 0 8px; }
.hub-summary table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.hub-summary th { text-align: left; padding: 6px 10px; background: var(--bg); font-weight: 600; border-bottom: 2px solid var(--border); }
.hub-summary td { padding: 6px 10px; border-bottom: 1px solid var(--border); }

/* Cascade bar (HIV reports) */
.cascade-bar { max-width: 520px; }

/* Report dual-column layout */
.rpt-dual { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .rpt-dual { grid-template-columns: 1fr; } }