/**
 * Doctor AK Portal — Patient dashboard ([patient_dashboard] shortcode).
 *
 * Loaded together with doctor-ak-dashboard.css (shared sidebar/nav layout,
 * .dak-stat-card, .dak-dashboard-card, .dak-tag*, .dak-progress-bar) and
 * doctor-ak-auth.css (design tokens, .dak-button*, .dak-field*). This file
 * only adds what those don't already cover: the sidebar patient card, the
 * two-column grid, appointment-row layout, status/action pills, the
 * recent-activity list, quick actions, and the mobile bottom nav + FAB.
 */

/* Floating-card sidebar look, scoped to the patient dashboard only. */

.dak-patient-dashboard {
	gap: 1.25rem !important;
	padding: 1.25rem !important;
	box-sizing: border-box !important;
}

.dak-patient-dashboard .dak-dashboard-sidebar {
	border-right: none !important;
	border-radius: var( --dak-radius-lg ) !important;
	box-shadow: var( --dak-shadow ) !important;
	height: calc( 100vh - 2.5rem ) !important;
}

.dak-patient-dashboard .dak-dashboard-main {
	min-width: 0 !important;
}

/* Sidebar patient card */

.dak-sidebar-patient-card {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	text-align: center !important;
	gap: 0.5rem !important;
	padding: 1.25rem 1rem !important;
	margin-bottom: 0.5rem !important;
}

.dak-sidebar-patient-name {
	font-weight: 700 !important;
	font-size: 0.95rem !important;
	color: var( --dak-text ) !important;
}

.dak-sidebar-patient-badge {
	display: inline-flex !important;
	padding: 0.15rem 0.65rem !important;
	border-radius: 999px !important;
	background: var( --dak-primary-tint ) !important;
	color: var( --dak-primary-dark ) !important;
	font-size: 0.72rem !important;
	font-weight: 700 !important;
}

/* Sidebar "Need Help" support card */

.dak-sidebar-help-card {
	margin-top: auto !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 0.3rem !important;
	padding: 1rem !important;
	border-radius: var( --dak-radius-md ) !important;
	background: var( --dak-primary-tint ) !important;
}

.dak-sidebar-help-icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 2rem !important;
	height: 2rem !important;
	margin-bottom: 0.3rem !important;
	border-radius: 999px !important;
	background: var( --dak-bg-card ) !important;
	color: var( --dak-primary-dark ) !important;
}

.dak-sidebar-help-icon svg {
	width: 1.1rem !important;
	height: 1.1rem !important;
}

.dak-sidebar-help-card strong {
	font-size: 0.85rem !important;
	color: var( --dak-text ) !important;
}

.dak-sidebar-help-card p {
	font-size: 0.76rem !important;
	color: var( --dak-muted ) !important;
	margin: 0 0 0.5rem !important;
}

.dak-sidebar-help-card .dak-button {
	padding: 0.5rem 0.75rem !important;
	font-size: 0.8rem !important;
}

.dak-nav-badge {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 1.25rem !important;
	height: 1.25rem !important;
	padding: 0 0.35rem !important;
	margin-left: auto !important;
	border-radius: 999px !important;
	background: var( --dak-primary ) !important;
	color: #fff !important;
	font-size: 0.68rem !important;
	font-weight: 700 !important;
}

.dak-dashboard-nav li a {
	display: flex !important;
	align-items: center !important;
}

.dak-sidebar-subtle-item {
	margin-top: 1rem !important;
	padding: 0.5rem 0.9rem !important;
	font-size: 0.72rem !important;
	color: var( --dak-muted ) !important;
	opacity: 0.7 !important;
}

.dak-sidebar-subtle-item em {
	font-style: normal !important;
}

/* Header CTA */

.dak-patient-dashboard-header {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	flex-wrap: wrap !important;
	gap: 0.75rem !important;
}

.dak-patient-book-cta {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.4rem !important;
}

.dak-patient-book-cta .dak-nav-icon {
	width: 1rem !important;
	height: 1rem !important;
}

.dak-hero-banner .dak-patient-book-cta {
	background: #fff !important;
	color: var( --dak-primary-dark ) !important;
}

.dak-hero-banner .dak-patient-book-cta:hover {
	background: rgba( 255, 255, 255, 0.9 ) !important;
}

/* Stat cards */

.dak-patient-stat-row {
	display: grid !important;
	grid-template-columns: repeat( 3, 1fr ) !important;
	gap: 1rem !important;
	margin-bottom: 1.25rem !important;
}

.dak-patient-stat-card {
	display: flex !important;
	align-items: flex-start !important;
	gap: 0.85rem !important;
	background: var( --dak-bg-card ) !important;
	border-radius: var( --dak-radius-lg ) !important;
	box-shadow: var( --dak-shadow ) !important;
	padding: 1.25rem !important;
}

.dak-patient-stat-icon {
	flex: 0 0 auto !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 2.75rem !important;
	height: 2.75rem !important;
	border-radius: 999px !important;
}

.dak-patient-stat-icon svg {
	width: 1.3rem !important;
	height: 1.3rem !important;
}

.dak-patient-stat-icon.is-green { background: var( --dak-tint-success ) !important; color: var( --dak-tint-success-text ) !important; }
.dak-patient-stat-icon.is-purple { background: var( --dak-tint-purple ) !important; color: var( --dak-tint-purple-text ) !important; }
.dak-patient-stat-icon.is-blue { background: var( --dak-tint-info ) !important; color: var( --dak-tint-info-text ) !important; }

.dak-patient-stat-body {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.15rem !important;
	min-width: 0 !important;
}

.dak-patient-stat-label {
	font-size: 0.78rem !important;
	color: var( --dak-muted ) !important;
}

.dak-patient-stat-value {
	font-size: 1.3rem !important;
	font-weight: 700 !important;
	color: var( --dak-text ) !important;
	white-space: nowrap !important;
}

.dak-patient-stat-sub {
	font-size: 0.78rem !important;
	color: var( --dak-muted ) !important;
}

.dak-patient-stat-link {
	font-size: 0.78rem !important;
	font-weight: 700 !important;
	color: var( --dak-primary-dark ) !important;
	text-decoration: none !important;
	margin-top: 0.15rem !important;
}

.dak-patient-stat-link:hover {
	text-decoration: underline !important;
}

/* Two-column grid */

.dak-patient-dashboard-grid {
	display: grid !important;
	grid-template-columns: 1fr 340px !important;
	gap: 1.25rem !important;
	align-items: start !important;
}

.dak-patient-dashboard-main-col,
.dak-patient-dashboard-side-col {
	display: flex !important;
	flex-direction: column !important;
	gap: 1.25rem !important;
	min-width: 0 !important;
}

.dak-patient-dashboard-side-col .dak-dashboard-card {
	margin: 0 !important;
}

/* Appointment groups + rows */

.dak-patient-appt-group {
	margin-bottom: 1.25rem !important;
}

.dak-patient-appt-group:last-child {
	margin-bottom: 0 !important;
}

.dak-patient-appt-group-label {
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
	color: var( --dak-muted ) !important;
	margin: 0 0 0.6rem !important;
}

.dak-patient-appt-row {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 0.6rem !important;
	padding: 0.95rem 1.1rem 0.95rem 1.3rem !important;
	margin-bottom: 0.7rem !important;
	background: var( --dak-bg-card ) !important;
	border: 1px solid var( --dak-border ) !important;
	border-radius: var( --dak-radius-md ) !important;
	box-shadow: var( --dak-shadow ) !important;
	transition: box-shadow 0.15s ease, border-color 0.15s ease !important;
}

.dak-patient-appt-row:hover {
	box-shadow: var( --dak-shadow-hover ) !important;
	border-color: var( --dak-primary-tint ) !important;
}

.dak-patient-appt-row::before {
	content: '' !important;
	position: absolute !important;
	top: 0.6rem !important;
	bottom: 0.6rem !important;
	left: 0 !important;
	width: 4px !important;
	border-radius: 999px !important;
	background: var( --dak-primary ) !important;
}

.dak-patient-appt-group .dak-patient-appt-row:last-child {
	margin-bottom: 0 !important;
}

.dak-patient-appt-row-top {
	display: flex !important;
	align-items: flex-start !important;
	justify-content: space-between !important;
	flex-wrap: wrap !important;
	gap: 0.6rem !important;
}

.dak-patient-appt-row-bottom {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	flex-wrap: wrap !important;
	gap: 0.6rem !important;
}

.dak-patient-appt-row-doctor {
	display: flex !important;
	align-items: center !important;
	gap: 0.6rem !important;
	min-width: 0 !important;
	flex: 1 1 220px !important;
}

.dak-patient-appt-avatar {
	flex: 0 0 auto !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 2.25rem !important;
	height: 2.25rem !important;
	border-radius: 999px !important;
	background: var( --dak-primary-tint ) !important;
	color: var( --dak-primary-dark ) !important;
	font-weight: 700 !important;
	font-size: 0.8rem !important;
	overflow: hidden !important;
}

.dak-patient-appt-avatar img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

.dak-patient-appt-doctor-info {
	display: flex !important;
	flex-direction: column !important;
	min-width: 0 !important;
}

.dak-patient-appt-doctor-info strong {
	font-size: 0.88rem !important;
	color: var( --dak-text ) !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

.dak-patient-appt-specialty {
	font-size: 0.76rem !important;
	color: var( --dak-muted ) !important;
}

.dak-patient-appt-row-meta {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-end !important;
	gap: 0.3rem !important;
	flex: 0 0 auto !important;
	text-align: right !important;
}

.dak-patient-appt-countdown {
	display: inline-block !important;
	white-space: nowrap !important;
	padding: 0.15rem 0.6rem !important;
	border-radius: 999px !important;
	background: var( --dak-bg-subtle ) !important;
	color: var( --dak-text ) !important;
	font-size: 0.72rem !important;
	font-weight: 700 !important;
}

.dak-patient-appt-datetime {
	font-size: 0.8rem !important;
	color: var( --dak-muted ) !important;
	white-space: nowrap !important;
}

.dak-patient-appt-row-tags {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 0.4rem !important;
	min-width: 0 !important;
}

.dak-patient-appt-row-actions {
	display: flex !important;
	align-items: center !important;
	gap: 0.4rem !important;
	flex: 0 0 auto !important;
}

.dak-patient-appt-row-actions .dak-icon-button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 2rem !important;
	height: 2rem !important;
	flex-shrink: 0 !important;
	cursor: pointer !important;
	border: none !important;
	border-radius: 50% !important;
	padding: 0 !important;
}

.dak-patient-appt-row-actions .dak-icon-button svg {
	width: 1rem !important;
	height: 1rem !important;
	flex-shrink: 0 !important;
}

.dak-patient-appt-row-actions .dak-icon-button-danger {
	background: var( --dak-tint-danger ) !important;
	color: var( --dak-tint-danger-text ) !important;
}

.dak-patient-appt-row-actions .dak-icon-button-danger:hover {
	filter: brightness( 0.92 ) !important;
}

.dak-patient-appt-row-actions-buttons {
	flex-wrap: wrap !important;
	justify-content: flex-end !important;
}

.dak-patient-appt-row-amount {
	flex-shrink: 0 !important;
	font-weight: 700 !important;
	color: var( --dak-text ) !important;
	white-space: nowrap !important;
}

.dak-patient-appt-video-hint {
	margin: -0.2rem 0 0 !important;
	padding: 0 0 0.6rem !important;
	font-size: 0.76rem !important;
	color: var( --dak-muted ) !important;
}

/* "More actions" kebab dropdown */

.dak-patient-appt-kebab {
	position: relative !important;
}

.dak-patient-appt-kebab-menu {
	display: none !important;
	position: absolute !important;
	top: calc( 100% + 0.35rem ) !important;
	right: 0 !important;
	z-index: 20 !important;
	min-width: 180px !important;
	background: var( --dak-bg-card ) !important;
	border: 1px solid var( --dak-border ) !important;
	border-radius: var( --dak-radius-md ) !important;
	box-shadow: var( --dak-shadow ) !important;
	padding: 0.35rem !important;
}

.dak-patient-appt-kebab.is-open .dak-patient-appt-kebab-menu {
	display: block !important;
}

.dak-patient-appt-kebab-item {
	display: flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
	width: 100% !important;
	padding: 0.5rem 0.6rem !important;
	border: none !important;
	background: transparent !important;
	border-radius: var( --dak-radius-sm ) !important;
	font-size: 0.82rem !important;
	font-weight: 600 !important;
	color: var( --dak-text ) !important;
	cursor: pointer !important;
	text-align: left !important;
}

.dak-patient-appt-kebab-item svg {
	width: 0.9rem !important;
	height: 0.9rem !important;
	flex-shrink: 0 !important;
}

.dak-patient-appt-kebab-item.is-danger {
	color: var( --dak-tint-danger-text ) !important;
}

.dak-patient-appt-kebab-item:hover {
	background: var( --dak-bg-subtle ) !important;
}

/* Status pills (neutral, read-only) vs. action pills (filled, clickable) —
   kept visually distinct so a status label is never mistaken for a button. */

.dak-status-pill {
	display: inline-flex !important;
	align-items: center !important;
	white-space: nowrap !important;
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	padding: 0.22rem 0.7rem !important;
	border-radius: 999px !important;
	text-decoration: none !important;
}

.dak-status-pill-outline {
	background: transparent !important;
	border: 1px solid var( --dak-border ) !important;
	color: var( --dak-muted ) !important;
}

.dak-status-pill-outline.dak-status-pill-is-active {
	border-color: var( --dak-tint-success-text ) !important;
	color: var( --dak-tint-success-text ) !important;
}

.dak-status-pill-outline.dak-status-pill-is-pending {
	border-color: var( --dak-tint-amber-text ) !important;
	color: var( --dak-tint-amber-text ) !important;
}

.dak-status-pill-outline.dak-status-pill-is-disabled {
	border-color: var( --dak-tint-danger-text ) !important;
	color: var( --dak-tint-danger-text ) !important;
}

.dak-status-pill-outline.dak-status-pill-is-rescheduled {
	border-color: var( --dak-tint-info-text ) !important;
	color: var( --dak-tint-info-text ) !important;
}

.dak-status-pill-outline.dak-status-pill-is-checked-in {
	border-color: var( --dak-tint-purple-text ) !important;
	color: var( --dak-tint-purple-text ) !important;
}

.dak-status-pill-disabled {
	background: var( --dak-bg-subtle ) !important;
	color: var( --dak-muted ) !important;
	cursor: not-allowed !important;
}

.dak-status-pill-action {
	background: var( --dak-primary ) !important;
	color: #fff !important;
	border: none !important;
	cursor: pointer !important;
}

.dak-status-pill-action:hover {
	background: var( --dak-primary-dark ) !important;
}

/* Empty state */

.dak-patient-empty-appointments {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 0.75rem !important;
	padding: 2.5rem 1rem !important;
	text-align: center !important;
}

.dak-patient-empty-appointments svg {
	width: 3.5rem !important;
	height: 3.5rem !important;
	color: var( --dak-border ) !important;
}

.dak-patient-empty-appointments p {
	color: var( --dak-muted ) !important;
	margin: 0 !important;
}

/* "Don't miss your appointments" reminder banner */

.dak-patient-appt-reminder {
	display: flex !important;
	align-items: center !important;
	gap: 0.85rem !important;
	margin-top: 1.25rem !important;
	padding: 1rem 1.1rem !important;
	border-radius: var( --dak-radius-md ) !important;
	background: var( --dak-primary-tint ) !important;
}

.dak-patient-appt-reminder-icon {
	flex: 0 0 auto !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 2.5rem !important;
	height: 2.5rem !important;
	border-radius: 999px !important;
	background: var( --dak-bg-card ) !important;
	color: var( --dak-primary-dark ) !important;
}

.dak-patient-appt-reminder-icon svg {
	width: 1.2rem !important;
	height: 1.2rem !important;
}

.dak-patient-appt-reminder-body {
	flex: 1 1 auto !important;
	min-width: 0 !important;
}

.dak-patient-appt-reminder-body strong {
	display: block !important;
	font-size: 0.88rem !important;
	color: var( --dak-text ) !important;
}

.dak-patient-appt-reminder-body p {
	margin: 0.15rem 0 0 !important;
	font-size: 0.78rem !important;
	color: var( --dak-muted ) !important;
}

.dak-patient-appt-reminder .dak-button {
	flex: 0 0 auto !important;
}

@media ( max-width: 560px ) {
	.dak-patient-appt-reminder {
		flex-wrap: wrap !important;
	}
}

/* Profile summary */

.dak-patient-profile-summary-body {
	display: flex !important;
	align-items: center !important;
	gap: 0.75rem !important;
	margin-bottom: 1rem !important;
}

.dak-patient-profile-detail {
	font-size: 0.8rem !important;
	color: var( --dak-muted ) !important;
}

.dak-patient-missing-list {
	list-style: none !important;
	margin: 0.75rem 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 0.3rem !important;
}

.dak-patient-missing-list li {
	font-size: 0.8rem !important;
	color: var( --dak-muted ) !important;
	padding-left: 1rem !important;
	position: relative !important;
}

.dak-patient-missing-list li::before {
	content: '\2022' !important;
	position: absolute !important;
	left: 0 !important;
	color: var( --dak-primary ) !important;
}

.dak-patient-profile-completion-row {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 0.5rem !important;
	margin-bottom: 0.5rem !important;
}

.dak-patient-profile-percent {
	font-size: 0.82rem !important;
	font-weight: 700 !important;
	color: var( --dak-text ) !important;
}

.dak-patient-profile-summary .dak-progress-bar {
	margin-bottom: 0.5rem !important;
}

/* Recent activity */

.dak-patient-activity-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 0.7rem !important;
}

.dak-patient-activity-list li {
	display: flex !important;
	align-items: flex-start !important;
	gap: 0.6rem !important;
	padding-bottom: 0.7rem !important;
	border-bottom: 1px solid var( --dak-border ) !important;
}

.dak-patient-activity-list li:last-child {
	border-bottom: 0 !important;
	padding-bottom: 0 !important;
}

.dak-patient-activity-icon {
	flex: 0 0 auto !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 1.75rem !important;
	height: 1.75rem !important;
	border-radius: 999px !important;
	margin-top: 0.1rem !important;
}

.dak-patient-activity-icon svg {
	width: 0.85rem !important;
	height: 0.85rem !important;
}

.dak-patient-activity-icon.is-paid { background: var( --dak-tint-success ) !important; color: var( --dak-tint-success-text ) !important; }
.dak-patient-activity-icon.is-booked { background: var( --dak-tint-info ) !important; color: var( --dak-tint-info-text ) !important; }
.dak-patient-activity-icon.is-cancelled { background: var( --dak-tint-danger ) !important; color: var( --dak-tint-danger-text ) !important; }

.dak-patient-activity-text {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.1rem !important;
	min-width: 0 !important;
}

.dak-patient-activity-label {
	font-size: 0.84rem !important;
	color: var( --dak-text ) !important;
}

.dak-patient-activity-date {
	font-size: 0.74rem !important;
	color: var( --dak-muted ) !important;
}

/* Quick actions */

.dak-patient-quick-actions-grid {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 0.6rem !important;
}

.dak-patient-quick-action {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 0.5rem !important;
	padding: 0.85rem 0.75rem !important;
	border-radius: var( --dak-radius-md ) !important;
	border: 1px solid var( --dak-border ) !important;
	background: var( --dak-bg-card ) !important;
	color: var( --dak-text ) !important;
	font-size: 0.82rem !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	text-decoration: none !important;
}

.dak-patient-quick-action:hover {
	border-color: var( --dak-primary ) !important;
}

.dak-patient-quick-action .dak-nav-icon {
	width: 1.3rem !important;
	height: 1.3rem !important;
	color: var( --dak-primary-dark ) !important;
}

/* Mobile bottom nav + FAB */

.dak-patient-bottom-nav {
	display: none !important;
}

.dak-patient-fab {
	display: none !important;
}

@media ( max-width: 900px ) {
	.dak-patient-dashboard-grid {
		grid-template-columns: 1fr !important;
	}

	.dak-patient-stat-row {
		grid-template-columns: 1fr !important;
	}
}

@media ( max-width: 720px ) {
	.dak-patient-appt-row-top {
		flex-direction: column !important;
	}

	.dak-patient-appt-row-meta {
		align-items: flex-start !important;
		text-align: left !important;
	}

	body.dak-role-patient,
	.dak-patient-dashboard main.dak-dashboard-main {
		padding-bottom: 5.5rem !important;
	}

	.dak-patient-bottom-nav {
		display: flex !important;
		position: fixed !important;
		bottom: 0 !important;
		left: 0 !important;
		right: 0 !important;
		z-index: 900 !important;
		background: var( --dak-bg-card ) !important;
		border-top: 1px solid var( --dak-border ) !important;
		padding: 0.4rem 0 !important;
	}

	.dak-patient-bottom-nav a {
		flex: 1 1 0 !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		gap: 0.15rem !important;
		font-size: 0.68rem !important;
		font-weight: 600 !important;
		color: var( --dak-muted ) !important;
		text-decoration: none !important;
	}

	.dak-patient-bottom-nav a svg {
		width: 1.15rem !important;
		height: 1.15rem !important;
	}

	.dak-patient-bottom-nav a.is-active {
		color: var( --dak-primary-dark ) !important;
	}

}

/* Payments tab */

.dak-patient-payments-summary {
	display: flex !important;
	align-items: baseline !important;
	flex-wrap: wrap !important;
	gap: 0.5rem !important;
	margin-bottom: 1.25rem !important;
}

.dak-patient-payments-summary-label {
	font-size: 0.85rem !important;
	font-weight: 600 !important;
	color: var( --dak-muted ) !important;
}

.dak-patient-payments-summary-amount {
	font-size: 1.6rem !important;
	font-weight: 800 !important;
	color: var( --dak-text ) !important;
}

.dak-patient-payments-summary-count {
	font-size: 0.82rem !important;
	color: var( --dak-muted ) !important;
}

.dak-patient-payments-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 0.75rem !important;
}

.dak-patient-payment-row {
	display: flex !important;
	align-items: center !important;
	gap: 0.85rem !important;
	padding: 0.9rem 1rem !important;
	border: 1px solid var( --dak-border ) !important;
	border-radius: var( --dak-radius-md ) !important;
	scroll-margin-top: 1rem !important;
	transition: background-color 0.3s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.dak-patient-payment-row:hover {
	border-color: var( --dak-primary-tint ) !important;
	box-shadow: var( --dak-shadow ) !important;
}

/* Landed on from a notification link (e.g. "#dak-appointment-123") — briefly
   emphasized so it's obvious which row it's pointing at. */
.dak-patient-payment-row:target {
	background: var( --dak-primary-tint ) !important;
	border-color: var( --dak-primary ) !important;
}

.dak-patient-payment-info {
	display: flex !important;
	flex-direction: column !important;
	min-width: 0 !important;
	flex: 1 1 auto !important;
}

.dak-patient-payment-info strong {
	font-size: 0.9rem !important;
	color: var( --dak-text ) !important;
}

.dak-patient-payment-meta {
	font-size: 0.8rem !important;
	color: var( --dak-muted ) !important;
}

.dak-patient-payment-surcharge-note {
	color: var( --dak-primary-dark ) !important;
}

.dak-patient-payment-amount-wrap {
	flex: 0 0 auto !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-end !important;
	gap: 0.3rem !important;
}

.dak-patient-payment-amount {
	font-size: 1rem !important;
	font-weight: 700 !important;
	color: var( --dak-text ) !important;
	white-space: nowrap !important;
}

@media ( max-width: 560px ) {
	.dak-patient-payment-row {
		flex-wrap: wrap !important;
	}

	.dak-patient-payment-amount-wrap {
		align-items: flex-start !important;
		flex: 1 1 100% !important;
		flex-direction: row !important;
		justify-content: space-between !important;
	}
}

/* Appointments/Notifications filter bar moved to the shared
   doctor-ak-dashboard.css — see that file — since the admin dashboard
   (which doesn't load this stylesheet) now uses it too. */