/**
 * Doctor AK Portal — Dashboard visual styles (doctor & patient).
 *
 * Loaded together with doctor-ak-auth.css, which provides the shared design
 * tokens (--dak-primary, --dak-border, etc.), the defensive text-transform
 * reset, and primitives (.dak-link, .dak-button). The base sidebar/nav/card
 * classes here are shared by both dashboards; classes prefixed with
 * dak-sidebar-*, dak-dashboard-topbar, dak-dashboard-greeting, dak-stat-icon
 * and dak-avatar are specific to the doctor dashboard's richer layout.
 */

.dak-dashboard {
	display: flex !important;
	align-items: flex-start !important;
	gap: 0 !important;
	min-height: 100vh !important;
	background: var( --dak-bg-page ) !important;
	transition: background-color 0.15s ease !important;
}

.dak-dashboard-sidebar-toggle {
	display: none !important;
	flex-direction: column !important;
	justify-content: space-between !important;
	width: 28px !important;
	height: 20px !important;
	border: 0 !important;
	background: none !important;
	cursor: pointer !important;
	padding: 0 !important;
}

.dak-dashboard-sidebar-toggle span {
	display: block !important;
	height: 2px !important;
	width: 100% !important;
	background: var( --dak-text ) !important;
}

/* Sidebar */
.dak-dashboard-sidebar {
	flex: 0 0 260px !important;
	position: sticky !important;
	top: 0 !important;
	align-self: flex-start !important;
	height: 100vh !important;
	background: var( --dak-bg-card ) !important;
	border-right: 1px solid var( --dak-border ) !important;
	padding: 1.5rem 1.25rem !important;
	box-sizing: border-box !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 1.5rem !important;
	overflow-y: auto !important;
}

/* Sidebar's only way back to the public site now that the dashboard pages
   render without the theme's header/footer (see Dashboard_Layout). */
.dak-sidebar-back-link {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.35rem !important;
	margin-bottom: 1rem !important;
	color: var( --dak-muted ) !important;
	font-size: 0.8rem !important;
	font-weight: 600 !important;
	text-decoration: none !important;
}

.dak-sidebar-back-link:hover {
	color: var( --dak-primary-dark ) !important;
	text-decoration: underline !important;
}

.dak-sidebar-brand {
	display: flex !important;
	align-items: center !important;
	gap: 0.65rem !important;
	margin-bottom: 1rem !important;
}

.dak-sidebar-brand-logo {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	width: 40px !important;
	height: 40px !important;
	border-radius: 50% !important;
	overflow: hidden !important;
	background: var( --dak-primary ) !important;
	color: #fff !important;
	font-size: 0.85rem !important;
	font-weight: 700 !important;
}

.dak-sidebar-brand-logo img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

.dak-sidebar-brand-text {
	display: flex !important;
	flex-direction: column !important;
	line-height: 1.3 !important;
}

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

.dak-sidebar-brand-text span {
	font-size: 0.78rem !important;
	color: var( --dak-muted ) !important;
}

.dak-sidebar-doctor-card {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 0.3rem !important;
	background: var( --dak-bg-subtle ) !important;
	border: 1px solid var( --dak-border ) !important;
	border-radius: var( --dak-radius-md ) !important;
	padding: 1rem !important;
}

.dak-sidebar-doctor-card .dak-specialty-tag.dak-sidebar-doctor-tagline {
	color: var( --dak-primary-dark ) !important;
	font-size: 0.72rem !important;
	margin-top: 0.3rem !important;
}

.dak-sidebar-doctor-name {
	display: block !important;
	font-size: 0.9rem !important;
	font-weight: 700 !important;
	color: var( --dak-text ) !important;
	margin-top: 0.5rem !important;
	line-height: 1.4 !important;
}

.dak-sidebar-doctor-block {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.35rem !important;
	width: 100% !important;
	margin-top: 0.15rem !important;
}

.dak-sidebar-doctor-block-label {
	font-size: 0.68rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
	color: var( --dak-muted ) !important;
}

.dak-specialty-tags {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 0.35rem !important;
}

.dak-specialty-tag {
	display: inline-flex !important;
	align-items: center !important;
	padding: 0.2rem 0.6rem !important;
	border-radius: 999px !important;
	background: var( --dak-primary-tint ) !important;
	color: var( --dak-primary-dark ) !important;
	font-size: 0.72rem !important;
	font-weight: 600 !important;
	line-height: 1.5 !important;
}

/* Higher specificity than .dak-specialty-tag above so a collapsed "+N"
   extra tag actually stays hidden — .dak-hidden alone is the same
   specificity tier and can lose the cascade depending on stylesheet load
   order (e.g. this file loading after doctor-ak-auth.css, which is where
   .dak-hidden is defined). */
.dak-specialty-tag.dak-hidden {
	display: none !important;
}

.dak-table-specialty-tags {
	max-width: 320px !important;
}

.dak-specialty-tag-more {
	border: none !important;
	cursor: pointer !important;
	background: var( --dak-bg-subtle ) !important;
	color: var( --dak-muted ) !important;
}

.dak-specialty-tag-more:hover,
.dak-specialty-tag-more.is-expanded {
	background: var( --dak-primary-tint ) !important;
	color: var( --dak-primary-dark ) !important;
}

.dak-sidebar-doctor-location {
	display: flex !important;
	align-items: center !important;
	gap: 0.35rem !important;
	margin-top: 0.15rem !important;
	font-size: 0.8rem !important;
	font-weight: 600 !important;
	color: var( --dak-text ) !important;
}

.dak-location-icon {
	display: inline-flex !important;
	flex-shrink: 0 !important;
	width: 15px !important;
	height: 15px !important;
	color: var( --dak-secondary ) !important;
}

.dak-location-icon svg {
	width: 100% !important;
	height: 100% !important;
}

.dak-sidebar-doctor-tags {
	margin-top: 0.5rem !important;
}

.dak-sidebar-doctor-status-row {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 0.5rem !important;
	width: 100% !important;
	margin-top: 0.6rem !important;
}

.dak-sidebar-doctor-status {
	flex-shrink: 0 !important;
}

.dak-sidebar-doctor-tagline {
	font-size: 0.78rem !important;
	color: var( --dak-muted ) !important;
	margin-top: 0.15rem !important;
}

.dak-sidebar-doctor-rating {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.3rem !important;
	font-size: 0.8rem !important;
	font-weight: 600 !important;
	color: var( --dak-text ) !important;
	margin-top: 0.2rem !important;
}

.dak-rating-icon {
	display: inline-flex !important;
	width: 13px !important;
	height: 13px !important;
	color: #f5b400 !important;
}

.dak-rating-icon svg {
	width: 100% !important;
	height: 100% !important;
}

.dak-avatar {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	border-radius: 50% !important;
	overflow: hidden !important;
	background: var( --dak-bg-subtle ) !important;
	color: var( --dak-muted ) !important;
}

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

.dak-avatar-md {
	width: 44px !important;
	height: 44px !important;
}

.dak-avatar-md svg {
	width: 22px !important;
	height: 22px !important;
}

.dak-avatar-sm {
	width: 36px !important;
	height: 36px !important;
	background: var( --dak-primary-tint ) !important;
	color: var( --dak-primary-dark ) !important;
	font-size: 0.8rem !important;
	font-weight: 700 !important;
}

.dak-avatar-sm svg {
	width: 16px !important;
	height: 16px !important;
}

.dak-avatar-lg {
	width: 64px !important;
	height: 64px !important;
	font-size: 1.1rem !important;
	font-weight: 700 !important;
	color: #fff !important;
	background: var( --dak-primary ) !important;
}

.dak-avatar-lg svg {
	width: 30px !important;
	height: 30px !important;
}

.dak-dashboard-nav {
	flex: 1 1 auto !important;
}

.dak-dashboard-nav ul {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 0.3rem !important;
}

.dak-dashboard-nav a,
.dak-dashboard-nav li.is-disabled span {
	display: flex !important;
	align-items: center !important;
	gap: 0.65rem !important;
	padding: 0.6rem 0.75rem !important;
	border-radius: var( --dak-radius-sm ) !important;
	font-size: 0.88rem !important;
	font-weight: 600 !important;
	color: var( --dak-muted ) !important;
	text-decoration: none !important;
}

.dak-dashboard-nav a:hover {
	background: var( --dak-bg-subtle ) !important;
	color: var( --dak-text ) !important;
}

.dak-dashboard-nav li.is-active a {
	background: var( --dak-primary-tint ) !important;
	color: var( --dak-primary-dark ) !important;
}

.dak-dashboard-nav li.is-disabled span {
	cursor: default !important;
	opacity: 0.6 !important;
}

.dak-dashboard-nav li.is-disabled em {
	font-style: normal !important;
	font-size: 0.72em !important;
	margin-left: auto !important;
}

.dak-nav-icon {
	display: inline-flex !important;
	width: 17px !important;
	height: 17px !important;
	flex-shrink: 0 !important;
}

.dak-nav-icon svg {
	width: 100% !important;
	height: 100% !important;
}

.dak-sidebar-logout {
	display: flex !important;
	align-items: center !important;
	gap: 0.65rem !important;
	padding: 0.6rem 0.75rem !important;
	border-radius: var( --dak-radius-sm ) !important;
	font-size: 0.88rem !important;
	font-weight: 600 !important;
	color: var( --dak-muted ) !important;
	text-decoration: none !important;
}

.dak-sidebar-logout:hover {
	background: var( --dak-bg-subtle ) !important;
	color: var( --dak-danger ) !important;
}

.dak-theme-toggle {
	display: flex !important;
	align-items: center !important;
	gap: 0.65rem !important;
	width: 100% !important;
	padding: 0.6rem 0.75rem !important;
	margin-bottom: 0.25rem !important;
	border: 0 !important;
	border-radius: var( --dak-radius-sm ) !important;
	background: none !important;
	font-size: 0.88rem !important;
	font-weight: 600 !important;
	font-family: inherit !important;
	color: var( --dak-muted ) !important;
	cursor: pointer !important;
	text-align: left !important;
}

.dak-theme-toggle:hover {
	background: var( --dak-bg-subtle ) !important;
	color: var( --dak-text ) !important;
}

.dak-theme-icon {
	width: 20px !important;
	height: 20px !important;
	flex-shrink: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.dak-theme-icon svg {
	width: 100% !important;
	height: 100% !important;
}

.dak-theme-icon-moon {
	display: none !important;
}

.dak-dashboard[data-theme='dark'] .dak-theme-icon-sun {
	display: none !important;
}

.dak-dashboard[data-theme='dark'] .dak-theme-icon-moon {
	display: flex !important;
}

.dak-settings-section h2 {
	font-size: 1rem !important;
	font-weight: 700 !important;
	margin: 0 0 1rem !important;
	color: var( --dak-text ) !important;
}

.dak-settings-section + .dak-settings-section {
	margin-top: 1.75rem !important;
	padding-top: 1.75rem !important;
	border-top: 1px solid var( --dak-border ) !important;
}

.dak-settings-section-subtitle {
	margin: -0.6rem 0 1rem !important;
	color: var( --dak-muted ) !important;
	font-size: 0.85rem !important;
}

.dak-settings-row {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 1rem !important;
	padding: 1rem !important;
	border: 1px solid var( --dak-border ) !important;
	border-radius: var( --dak-radius-md ) !important;
}

.dak-settings-row-text strong {
	display: block !important;
	color: var( --dak-text ) !important;
	margin-bottom: 0.2rem !important;
}

.dak-settings-row-text p {
	margin: 0 !important;
	color: var( --dak-muted ) !important;
	font-size: 0.85rem !important;
}

.dak-settings-row .dak-theme-toggle {
	width: auto !important;
	flex-shrink: 0 !important;
	margin-bottom: 0 !important;
	border: 1px solid var( --dak-border ) !important;
	background: var( --dak-bg-subtle ) !important;
}

/* Main column */
.dak-dashboard-main {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	padding: 1.75rem 2rem 2.5rem !important;
	box-sizing: border-box !important;
}

.dak-dashboard-topbar {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 1rem !important;
	margin-bottom: 1.75rem !important;
}

.dak-dashboard-search {
	position: relative !important;
	flex: 1 1 auto !important;
	max-width: 420px !important;
}

.dak-dashboard-search-icon {
	position: absolute !important;
	top: 50% !important;
	left: 0.85rem !important;
	transform: translateY( -50% ) !important;
	width: 16px !important;
	height: 16px !important;
	color: var( --dak-muted ) !important;
	pointer-events: none !important;
}

.dak-dashboard-search-icon svg {
	width: 100% !important;
	height: 100% !important;
}

.dak-dashboard-search input {
	width: 100% !important;
	box-sizing: border-box !important;
	padding: 0.6rem 0.85rem 0.6rem 2.4rem !important;
	border: 1px solid var( --dak-border ) !important;
	border-radius: var( --dak-radius-sm ) !important;
	background: var( --dak-bg-card ) !important;
	color: var( --dak-text ) !important;
	font-size: 0.88rem !important;
}

.dak-dashboard-search input:focus {
	outline: none !important;
	border-color: var( --dak-primary ) !important;
	box-shadow: 0 0 0 3px var( --dak-primary-tint ) !important;
}

/* Topbar search results dropdown (see assets/js/doctor-ak-dashboard-search.js) */

.dak-search-results {
	position: absolute !important;
	top: calc( 100% + 0.4rem ) !important;
	left: 0 !important;
	right: 0 !important;
	z-index: 40 !important;
	max-height: 60vh !important;
	overflow-y: auto !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-hover ) !important;
	padding: 0.5rem !important;
}

.dak-search-results-group + .dak-search-results-group {
	margin-top: 0.5rem !important;
	padding-top: 0.5rem !important;
	border-top: 1px solid var( --dak-border ) !important;
}

.dak-search-results-group-label {
	padding: 0.3rem 0.6rem !important;
	font-size: 0.7rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
	color: var( --dak-muted ) !important;
}

.dak-search-result-item {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.1rem !important;
	padding: 0.5rem 0.6rem !important;
	border-radius: var( --dak-radius-sm ) !important;
	text-decoration: none !important;
}

.dak-search-result-item:hover,
.dak-search-result-item:focus-visible {
	background: var( --dak-bg-subtle ) !important;
	outline: none !important;
}

.dak-search-result-label {
	font-size: 0.88rem !important;
	font-weight: 600 !important;
	color: var( --dak-text ) !important;
}

.dak-search-result-sublabel {
	font-size: 0.78rem !important;
	color: var( --dak-muted ) !important;
}

.dak-search-results-empty {
	padding: 0.75rem 0.6rem !important;
	font-size: 0.85rem !important;
	color: var( --dak-muted ) !important;
	text-align: center !important;
}

.dak-dashboard-topbar-actions {
	display: flex !important;
	align-items: center !important;
	gap: 0.9rem !important;
	flex-shrink: 0 !important;
}

.dak-icon-button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	width: 38px !important;
	height: 38px !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 50% !important;
	background: var( --dak-bg-subtle ) !important;
	color: var( --dak-muted ) !important;
	cursor: pointer !important;
	line-height: 0 !important;
}

.dak-icon-button svg {
	display: block !important;
	width: 18px !important;
	height: 18px !important;
	flex-shrink: 0 !important;
}

.dak-icon-button:hover {
	background: var( --dak-primary-tint ) !important;
	color: var( --dak-primary-dark ) !important;
}

/* Topbar theme-toggle (compact variant of .dak-theme-toggle, used next to
   the settings-tab's full labelled row) and the notifications bell. */
.dak-theme-toggle.dak-icon-button {
	width: 38px !important;
	height: 38px !important;
	padding: 0 !important;
	margin-bottom: 0 !important;
	border-radius: 50% !important;
	background: var( --dak-bg-subtle ) !important;
	justify-content: center !important;
}

.dak-theme-toggle.dak-icon-button .dak-theme-icon {
	width: 18px !important;
	height: 18px !important;
}

.dak-topbar-bell {
	position: relative !important;
	text-decoration: none !important;
}

.dak-topbar-profile {
	position: relative !important;
}

.dak-topbar-profile-trigger {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	cursor: pointer !important;
	border-radius: 50% !important;
}

.dak-topbar-profile-menu {
	display: none !important;
	position: absolute !important;
	top: calc( 100% + 0.6rem ) !important;
	right: 0 !important;
	min-width: 210px !important;
	background: var( --dak-bg-card ) !important;
	border-radius: var( --dak-radius-md ) !important;
	box-shadow: var( --dak-shadow ) !important;
	padding: 0.5rem !important;
	z-index: 50 !important;
}

.dak-topbar-profile.is-open .dak-topbar-profile-menu {
	display: block !important;
}

.dak-topbar-profile-menu-name {
	padding: 0.5rem 0.75rem !important;
	font-size: 0.85rem !important;
	font-weight: 700 !important;
	color: var( --dak-text ) !important;
	border-bottom: 1px solid var( --dak-border ) !important;
	margin-bottom: 0.35rem !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

.dak-topbar-profile-menu-item {
	display: flex !important;
	align-items: center !important;
	gap: 0.6rem !important;
	padding: 0.55rem 0.75rem !important;
	border-radius: var( --dak-radius-sm ) !important;
	color: var( --dak-text ) !important;
	text-decoration: none !important;
	font-size: 0.85rem !important;
	font-weight: 600 !important;
}

.dak-topbar-profile-menu-item svg {
	width: 16px !important;
	height: 16px !important;
	flex-shrink: 0 !important;
}

.dak-topbar-profile-menu-item:hover {
	background: var( --dak-bg-subtle ) !important;
}

.dak-topbar-profile-menu-item-danger {
	color: var( --dak-danger ) !important;
}

.dak-topbar-profile-menu-item-danger:hover {
	background: var( --dak-tint-danger ) !important;
}

.dak-topbar-bell-badge {
	position: absolute !important;
	top: -2px !important;
	right: -2px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 1.1rem !important;
	height: 1.1rem !important;
	padding: 0 0.3rem !important;
	border-radius: 999px !important;
	border: 2px solid var( --dak-bg-card ) !important;
	background: var( --dak-danger ) !important;
	color: #fff !important;
	font-size: 0.62rem !important;
	font-weight: 700 !important;
	line-height: 1 !important;
}

/* Plain section header (title + subtitle) — used by every section EXCEPT
   each portal's own "Dashboard" home, which gets .dak-hero-banner below. */
.dak-dashboard-greeting {
	margin-bottom: 1.75rem !important;
}

.dak-dashboard-greeting h1,
.dak-dashboard-greeting h1 span {
	font-size: 1.5rem !important;
	font-weight: 700 !important;
	margin: 0 0 0.35rem !important;
	color: var( --dak-text ) !important;
}

.dak-dashboard-greeting p {
	margin: 0 !important;
	color: var( --dak-muted ) !important;
	font-size: 0.92rem !important;
}

/* Hero greeting banner — brand-gradient card (same green used everywhere
   else in the portal), used only by each portal's "Dashboard" home
   (admin's "Clinic overview", doctor's "Welcome back…", patient's
   "Hello…") — every other section keeps the plain header above. */
.dak-hero-banner {
	background: linear-gradient( 135deg, var( --dak-primary ) 0%, var( --dak-primary-dark ) 100% ) !important;
	background-image:
		radial-gradient( circle at 94% 10%, rgba( 255, 255, 255, 0.14 ) 0, transparent 45% ),
		radial-gradient( circle at 4% 94%, rgba( 255, 255, 255, 0.1 ) 0, transparent 40% ),
		linear-gradient( 135deg, var( --dak-primary ) 0%, var( --dak-primary-dark ) 100% ) !important;
	border-radius: var( --dak-radius-lg ) !important;
	padding: 1.5rem 1.75rem !important;
	box-shadow: 0 10px 24px rgba( 127, 181, 45, 0.25 ) !important;
}

.dak-hero-banner h1,
.dak-hero-banner h1 span {
	color: #fff !important;
}

.dak-hero-banner p {
	color: rgba( 255, 255, 255, 0.85 ) !important;
}

.dak-hero-banner .dak-link {
	color: #fff !important;
	text-decoration: underline !important;
}

/* Section list headers ("+ Add Doctor/Patient/Appointment") — title +
   subtitle on the left, primary action button on the right. */
.dak-admin-users-header {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 1rem !important;
	flex-wrap: wrap !important;
}

/* Stat cards */
.dak-dashboard-statistics {
	display: grid !important;
	grid-template-columns: repeat( auto-fit, minmax( 200px, 1fr ) ) !important;
	gap: 1.25rem !important;
	margin-bottom: 1.75rem !important;
}

.dak-stat-card {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 0.5rem !important;
	background: var( --dak-bg-card ) !important;
	border: 0 !important;
	border-radius: var( --dak-radius-md ) !important;
	padding: 1.1rem 1.25rem !important;
	box-shadow: var( --dak-shadow ) !important;
	transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.dak-stat-card:hover {
	transform: translateY( -2px ) !important;
	box-shadow: 0 8px 24px rgba( 20, 30, 40, 0.1 ) !important;
}

.dak-stat-icon {
	width: 40px !important;
	height: 40px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: var( --dak-radius-sm ) !important;
}

.dak-stat-icon svg {
	width: 19px !important;
	height: 19px !important;
}

.dak-stat-icon-green {
	background: var( --dak-primary-tint ) !important;
	color: var( --dak-primary ) !important;
}

/* Give each stat card's icon chip a slightly different tint from the
   existing palette (green / teal / neutral / amber) instead of every card
   looking identical — a small touch of variety, still on-brand. */
.dak-stat-card:nth-child( 4n + 2 ) .dak-stat-icon {
	background: var( --dak-tint-teal ) !important;
	color: var( --dak-secondary ) !important;
}

.dak-stat-card:nth-child( 4n + 3 ) .dak-stat-icon {
	background: var( --dak-bg-subtle ) !important;
	color: var( --dak-muted ) !important;
}

.dak-stat-card:nth-child( 4n + 4 ) .dak-stat-icon {
	background: var( --dak-tint-amber ) !important;
	color: var( --dak-tint-amber-text ) !important;
}

.dak-stat-value {
	font-size: 1.6rem !important;
	font-weight: 700 !important;
	color: var( --dak-text ) !important;
}

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

.dak-stat-delta {
	font-size: 0.78rem !important;
	font-weight: 600 !important;
	color: var( --dak-tint-success-text ) !important;
}

/* Admin dashboard's "Pending doctor approvals" widget cards */
.dak-pending-doctor-card {
	padding: 1rem !important;
	margin-bottom: 0.85rem !important;
	background: var( --dak-bg-subtle ) !important;
	border-radius: var( --dak-radius-md ) !important;
}

.dak-pending-doctor-card:last-of-type {
	margin-bottom: 0 !important;
}

.dak-pending-doctor-header {
	display: flex !important;
	align-items: center !important;
	gap: 0.65rem !important;
	margin-bottom: 0.65rem !important;
}

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

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

.dak-pending-doctor-info span {
	font-size: 0.78rem !important;
	color: var( --dak-muted ) !important;
}

.dak-pending-doctor-card .dak-specialty-tags {
	margin-bottom: 0.85rem !important;
}

.dak-pending-doctor-actions {
	display: flex !important;
	gap: 0.6rem !important;
}

/* Dashboard cards (lists) */
.dak-dashboard-grid {
	display: grid !important;
	grid-template-columns: repeat( auto-fit, minmax( 320px, 1fr ) ) !important;
	gap: 1.25rem !important;
}

.dak-dashboard-grid-lists {
	align-items: start !important;
}

.dak-dashboard-card {
	min-width: 0 !important;
	background: var( --dak-bg-card ) !important;
	border: 1px solid var( --dak-border ) !important;
	border-radius: var( --dak-radius-md ) !important;
	padding: 1.25rem !important;
	box-sizing: border-box !important;
	box-shadow: var( --dak-shadow ) !important;
}

.dak-dashboard-card h2 {
	font-size: 1rem !important;
	font-weight: 700 !important;
	margin: 0 0 1rem !important;
	color: var( --dak-text ) !important;
}

.dak-dashboard-card-header {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 0.75rem !important;
	margin-bottom: 1rem !important;
}

.dak-dashboard-card-header h2 {
	margin-bottom: 0 !important;
}

.dak-dashboard-profile-form {
	max-width: 100% !important;
}

/* Briefly dims a live-filtered list/table while its AJAX refresh is in
   flight (see assets/js/doctor-ak-live-filters.js) — no spinner, just a
   quiet visual cue that something is happening. */
.dak-is-loading {
	opacity: 0.55 !important;
	pointer-events: none !important;
	transition: opacity 0.15s ease !important;
}

.dak-empty-state {
	font-style: normal !important;
	color: var( --dak-muted ) !important;
	font-size: 0.88rem !important;
	text-align: center !important;
	padding: 1.5rem 0 !important;
	margin: 0 !important;
}

.dak-dashboard-profile-nudge {
	margin: 1.25rem 0 0 !important;
	font-size: 0.85rem !important;
	color: var( --dak-muted ) !important;
}

/* Profile completion progress bar (used by the patient dashboard) */
.dak-progress-bar {
	width: 100% !important;
	height: 10px !important;
	border-radius: 999px !important;
	overflow: hidden !important;
	background: var( --dak-bg-subtle ) !important;
	margin-bottom: 0.5rem !important;
}

.dak-progress-bar-fill {
	height: 100% !important;
	background: var( --dak-primary ) !important;
}

/* Appointment/patient list rows (populated by future booking/records hooks) */
.dak-appointment-item,
.dak-patient-item {
	display: flex !important;
	align-items: center !important;
	gap: 0.85rem !important;
	padding: 0.75rem 0.85rem !important;
	margin-bottom: 0.5rem !important;
	background: var( --dak-bg-subtle ) !important;
	border-radius: var( --dak-radius-sm ) !important;
}

.dak-appointment-item:last-child,
.dak-patient-item:last-child {
	margin-bottom: 0 !important;
}

.dak-appointment-item-body,
.dak-patient-item-body {
	flex: 1 1 auto !important;
	min-width: 0 !important;
}

.dak-appointment-item-name,
.dak-patient-item-name {
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	row-gap: 0.3rem !important;
	column-gap: 0.5rem !important;
	font-size: 0.9rem !important;
	font-weight: 700 !important;
	color: var( --dak-text ) !important;
}

.dak-appointment-item-name-text {
	white-space: nowrap !important;
}

.dak-appointment-item-note,
.dak-patient-item-note {
	font-size: 0.8rem !important;
	color: var( --dak-muted ) !important;
	margin-top: 0.15rem !important;
}

.dak-tag {
	display: inline-flex !important;
	align-items: center !important;
	white-space: nowrap !important;
	font-size: 0.68rem !important;
	font-weight: 700 !important;
	padding: 0.15rem 0.5rem !important;
	border-radius: 999px !important;
	text-decoration: none !important;
	cursor: default !important;
}

.dak-tag-video {
	background: var( --dak-primary-tint ) !important;
	color: var( --dak-primary-dark ) !important;
}

.dak-tag-clinic {
	background: var( --dak-bg-subtle ) !important;
	color: var( --dak-muted ) !important;
}

.dak-tag-paid {
	background: var( --dak-tint-success ) !important;
	color: var( --dak-tint-success-text ) !important;
}

.dak-tag-pending-payment {
	background: var( --dak-tint-amber ) !important;
	color: var( --dak-tint-amber-text ) !important;
}

.dak-tag-join-call {
	background: var( --dak-primary ) !important;
	color: #fff !important;
	cursor: pointer !important;
}

.dak-tag-join-call:hover {
	background: var( --dak-primary-dark ) !important;
}

.dak-tag-join-call.is-disabled {
	background: var( --dak-bg-subtle ) !important;
	color: var( --dak-muted ) !important;
	cursor: not-allowed !important;
}

.dak-appointment-item-meta {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-end !important;
	gap: 0.35rem !important;
	flex-shrink: 0 !important;
}

.dak-appointment-item-time {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.3rem !important;
	font-size: 0.8rem !important;
	color: var( --dak-muted ) !important;
}

.dak-appointment-item-time svg {
	width: 13px !important;
	height: 13px !important;
}

.dak-sidebar-top-row {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 0.5rem !important;
}

/* Desktop sidebar collapse (icon-only), toggled via the button + persisted
   in localStorage — see doctor-ak-dashboard.js. Mobile keeps its own
   separate off-canvas drawer behaviour (.is-open, <=782px, below)
   untouched — this only applies above that breakpoint. */
@media ( min-width: 783px ) {
	.dak-sidebar-collapse-toggle {
		display: flex !important;
		flex-shrink: 0 !important;
		align-items: center !important;
		justify-content: center !important;
		width: 26px !important;
		height: 26px !important;
		border: 1px solid var( --dak-border ) !important;
		border-radius: 50% !important;
		background: var( --dak-bg-card ) !important;
		color: var( --dak-muted ) !important;
		cursor: pointer !important;
		padding: 0 !important;
		transition: transform 0.2s ease, color 0.15s ease, background-color 0.15s ease !important;
	}

	.dak-sidebar-collapse-toggle:hover {
		color: var( --dak-primary-dark ) !important;
		background: var( --dak-primary-tint ) !important;
	}

	.dak-sidebar-collapse-toggle svg {
		width: 13px !important;
		height: 13px !important;
	}

	.dak-dashboard-sidebar {
		transition: flex-basis 0.2s ease, width 0.2s ease !important;
	}

	.dak-dashboard-sidebar.is-collapsed .dak-sidebar-collapse-toggle svg {
		transform: rotate( 180deg ) !important;
	}

	.dak-dashboard-sidebar.is-collapsed {
		flex-basis: 78px !important;
		width: 78px !important;
		padding-left: 0.9rem !important;
		padding-right: 0.9rem !important;
	}

	.dak-dashboard-sidebar.is-collapsed .dak-sidebar-back-link,
	.dak-dashboard-sidebar.is-collapsed .dak-sidebar-brand-text,
	.dak-dashboard-sidebar.is-collapsed .dak-sidebar-doctor-name,
	.dak-dashboard-sidebar.is-collapsed .dak-sidebar-patient-name,
	.dak-dashboard-sidebar.is-collapsed .dak-sidebar-patient-badge,
	.dak-dashboard-sidebar.is-collapsed .dak-sidebar-doctor-location,
	.dak-dashboard-sidebar.is-collapsed .dak-sidebar-doctor-tags,
	.dak-dashboard-sidebar.is-collapsed .dak-sidebar-doctor-status-row,
	.dak-dashboard-sidebar.is-collapsed .dak-nav-group-label,
	.dak-dashboard-sidebar.is-collapsed .dak-nav-badge {
		display: none !important;
	}

	.dak-dashboard-sidebar.is-collapsed .dak-sidebar-top-row {
		justify-content: center !important;
	}

	.dak-dashboard-sidebar.is-collapsed .dak-sidebar-brand {
		justify-content: center !important;
	}

	.dak-dashboard-sidebar.is-collapsed .dak-sidebar-doctor-card,
	.dak-dashboard-sidebar.is-collapsed .dak-sidebar-patient-card {
		align-items: center !important;
		padding: 0.5rem !important;
	}

	/* The nav links'/logout's label text is a raw text node (no wrapping
	   span), so font-size: 0 collapses it to nothing without touching
	   markup — .dak-nav-icon is sized in px (not em) so the icon itself is
	   unaffected. */
	.dak-dashboard-sidebar.is-collapsed .dak-dashboard-nav a,
	.dak-dashboard-sidebar.is-collapsed .dak-sidebar-logout {
		font-size: 0 !important;
		justify-content: center !important;
		gap: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* Mobile: collapse sidebar behind a toggle */
@media ( max-width: 900px ) {
	.dak-dashboard-main {
		padding: 1.5rem !important;
	}
}

@media ( max-width: 782px ) {
	.dak-dashboard-sidebar-toggle {
		display: flex !important;
		flex-shrink: 0 !important;
	}

	/* Hamburger → X morph while the drawer is open (progressive
	   enhancement — :has() support is universal in current browsers; in
	   older ones the icon just stays a plain hamburger). */
	.dak-dashboard-sidebar-toggle span {
		transition: transform 0.2s ease, opacity 0.2s ease !important;
	}

	/* While open, the toggle becomes the drawer's close button — pinned to
	   a fixed spot instead of staying in its normal in-page position (which
	   would otherwise float wherever the page happened to be scrolled to,
	   landing awkwardly mid-drawer instead of at its top). */
	.dak-dashboard:has( .dak-dashboard-sidebar.is-open ) .dak-dashboard-sidebar-toggle {
		position: fixed !important;
		top: 1rem !important;
		left: calc( min( 300px, 85vw ) - 44px ) !important;
		z-index: 1001 !important;
	}

	.dak-dashboard:has( .dak-dashboard-sidebar.is-open ) .dak-dashboard-sidebar-toggle span:nth-child( 1 ) {
		transform: translateY( 9px ) rotate( 45deg ) !important;
	}

	.dak-dashboard:has( .dak-dashboard-sidebar.is-open ) .dak-dashboard-sidebar-toggle span:nth-child( 2 ) {
		opacity: 0 !important;
	}

	.dak-dashboard:has( .dak-dashboard-sidebar.is-open ) .dak-dashboard-sidebar-toggle span:nth-child( 3 ) {
		transform: translateY( -9px ) rotate( -45deg ) !important;
	}

	.dak-dashboard {
		flex-direction: column !important;
	}

	.dak-dashboard-sidebar {
		flex-basis: auto !important;
		width: 100% !important;
		position: static !important;
		height: auto !important;
		max-height: none !important;
		display: none !important;
		box-sizing: border-box !important;
	}

	/* Slide-in drawer with a dimmed backdrop — the backdrop is a single
	   oversized box-shadow (no extra markup/pseudo-element needed), which
	   doesn't add to the page's scrollable area the way a real full-screen
	   element would. */
	.dak-dashboard-sidebar.is-open {
		display: flex !important;
		position: fixed !important;
		inset: 0 auto 0 0 !important;
		width: 300px !important;
		max-width: 85vw !important;
		z-index: 1000 !important;
		border-radius: 0 var( --dak-radius-lg, 16px ) var( --dak-radius-lg, 16px ) 0 !important;
		box-shadow: 0 0 0 100vmax rgba( 15, 23, 42, 0.55 ), 8px 0 24px rgba( 15, 23, 42, 0.18 ) !important;
		animation: dak-sidebar-slide-in 0.22s ease !important;
	}

	.dak-dashboard-topbar {
		flex-wrap: wrap !important;
	}

	.dak-dashboard-search {
		max-width: none !important;
		flex: 1 1 100% !important;
		order: 2 !important;
	}
}

@keyframes dak-sidebar-slide-in {
	from {
		transform: translateX( -100% );
	}

	to {
		transform: translateX( 0 );
	}
}

/* Phones: tighter padding, and a denser, more colourful "creative" layout —
   a gradient hero banner for the page title, a 2-column stat grid with a
   distinct accent colour per card, and appointment/patient rows styled as
   small accent-bordered cards instead of plain list rows. */
@media ( max-width: 480px ) {
	.dak-dashboard-main {
		padding: 1rem !important;
	}

	.dak-dashboard-grid {
		grid-template-columns: 1fr !important;
	}

	.dak-dashboard-greeting {
		margin-bottom: 1.25rem !important;
	}

	.dak-dashboard-greeting h1 {
		font-size: 1.3rem !important;
	}

	.dak-hero-banner {
		padding: 1.25rem 1.35rem !important;
	}

	/* 2-column stat cards, each tinted a shade of the existing palette
	   (primary green / teal secondary / neutral / amber) — not new brand
	   colours, just spreading the tokens already used elsewhere (e.g. the
	   amber "Payment Pending" tag) across the grid for visual variety. */
	.dak-dashboard-statistics {
		grid-template-columns: 1fr 1fr !important;
		gap: 0.75rem !important;
	}

	.dak-stat-card {
		padding: 0.9rem !important;
		border-radius: 14px !important;
	}

	.dak-stat-value {
		font-size: 1.35rem !important;
	}

	.dak-stat-card:nth-child( 4n + 1 ) { background: var( --dak-primary-tint ) !important; }
	.dak-stat-card:nth-child( 4n + 2 ) { background: var( --dak-tint-teal ) !important; }
	.dak-stat-card:nth-child( 4n + 3 ) { background: var( --dak-bg-subtle ) !important; }
	.dak-stat-card:nth-child( 4n + 4 ) { background: var( --dak-tint-amber ) !important; }

	.dak-stat-card:nth-child( 4n + 1 ) .dak-stat-icon { background: var( --dak-bg-card ) !important; color: var( --dak-primary-dark ) !important; }
	.dak-stat-card:nth-child( 4n + 2 ) .dak-stat-icon { background: var( --dak-bg-card ) !important; color: var( --dak-secondary ) !important; }
	.dak-stat-card:nth-child( 4n + 3 ) .dak-stat-icon { background: var( --dak-bg-card ) !important; color: var( --dak-muted ) !important; }
	.dak-stat-card:nth-child( 4n + 4 ) .dak-stat-icon { background: var( --dak-bg-card ) !important; color: var( --dak-tint-amber-text ) !important; }

	/* Appointment/patient rows as small accent-bordered cards */
	.dak-appointment-item,
	.dak-patient-item {
		position: relative !important;
		align-items: center !important;
		background: var( --dak-bg-card ) !important;
		border: 0 !important;
		border-radius: 12px !important;
		padding: 0.85rem 0.85rem 0.85rem 1rem !important;
		margin-bottom: 0.6rem !important;
		box-shadow: 0 1px 3px rgba( 15, 23, 42, 0.08 ) !important;
	}

	.dak-appointment-item::before,
	.dak-patient-item::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-appointment-item:last-child,
	.dak-patient-item:last-child {
		margin-bottom: 0 !important;
	}

	/* Sidebar profile card: plain, neutral card (not a colour gradient) —
	   just a touch more rounded than desktop to fit the drawer's look. */
	.dak-sidebar-doctor-card,
	.dak-sidebar-patient-card {
		border-radius: 14px !important;
	}

	.dak-dashboard-nav li.is-active a {
		box-shadow: 0 1px 3px rgba( 127, 181, 45, 0.2 ) !important;
	}
}

/* Notifications tab (doctor, patient, and admin dashboards) */

.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-notifications-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 0.65rem !important;
}

.dak-notification-row {
	display: flex !important;
	align-items: flex-start !important;
	padding: 0 !important;
	background: var( --dak-bg-card ) !important;
	border-radius: var( --dak-radius-md ) !important;
	border: 1px solid transparent !important;
	box-shadow: var( --dak-shadow ) !important;
	overflow: hidden !important;
}

.dak-notification-row.is-unread {
	background: var( --dak-primary-tint ) !important;
	border-color: var( --dak-primary-tint ) !important;
	cursor: pointer !important;
}

.dak-notification-row-link {
	display: flex !important;
	align-items: flex-start !important;
	gap: 0.75rem !important;
	width: 100% !important;
	padding: 0.85rem !important;
	color: inherit !important;
	text-decoration: none !important;
}

a.dak-notification-row-link:hover {
	background: var( --dak-bg-subtle ) !important;
}

.dak-notification-icon {
	flex: 0 0 auto !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 2rem !important;
	height: 2rem !important;
	border-radius: 999px !important;
	background: var( --dak-bg-subtle ) !important;
	color: var( --dak-muted ) !important;
}

.dak-notification-icon svg {
	width: 1rem !important;
	height: 1rem !important;
}

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

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

.dak-notification-message {
	font-size: 0.88rem !important;
	color: var( --dak-text ) !important;
}

.dak-notification-row.is-unread .dak-notification-message {
	font-weight: 700 !important;
}

.dak-notification-date {
	font-size: 0.76rem !important;
	color: var( --dak-muted ) !important;
}

.dak-notification-dot {
	flex: 0 0 auto !important;
	width: 0.5rem !important;
	height: 0.5rem !important;
	margin-top: 0.4rem !important;
	border-radius: 999px !important;
	background: var( --dak-primary ) !important;
}

.dak-notification-chevron {
	flex: 0 0 auto !important;
	display: inline-flex !important;
	align-items: center !important;
	width: 1rem !important;
	height: 1rem !important;
	margin-top: 0.3rem !important;
	color: var( --dak-muted ) !important;
}

.dak-notification-chevron svg {
	width: 100% !important;
	height: 100% !important;
}

.dak-notifications-card-subtitle {
	margin: 0.15rem 0 0 !important;
	font-size: 0.78rem !important;
	color: var( --dak-muted ) !important;
	font-weight: 400 !important;
}

.dak-notifications-card-actions {
	display: flex !important;
	align-items: center !important;
	gap: 0.75rem !important;
	flex-wrap: wrap !important;
}

/* Overrides .dak-appt-filters-form's align-items: flex-end — this form's
   "Clear" link is a bare, unpadded <a> (no button chrome), so bottom-aligning
   it against the much taller date input made it look sunken/misaligned.
   The extra class in the selector (vs. a single-class override) guarantees
   this wins regardless of the two rules' order in the file. */
.dak-notifications-filter-form.dak-appt-filters-form {
	gap: 0.5rem !important;
	align-items: center !important;
}

.dak-notifications-filter-form .dak-field {
	margin-bottom: 0 !important;
	min-width: 0 !important;
}

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

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

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

/* Appointments/Notifications filter bar — shared by the doctor, patient,
   and admin dashboards (the admin Appointments table has its own simpler
   .dak-field-row filter form, but the Notifications filter added here uses
   this same layout everywhere for a consistent look). */

.dak-appt-filters-card {
	margin-bottom: 1.25rem !important;
}

.dak-appt-filters-form {
	display: flex !important;
	align-items: flex-end !important;
	flex-wrap: wrap !important;
	gap: 1rem !important;
}

.dak-appt-filters-form .dak-field {
	margin-bottom: 0 !important;
	min-width: 160px !important;
}

.dak-appt-filters-form .dak-button {
	white-space: nowrap !important;
}

/* Compact sizing for every filter bar (previously several admin/doctor
   pages still used the full-size registration-form field styling for a
   simple 2-4 field filter bar, making it look as tall/heavy as a whole
   signup form). */
.dak-appt-filters-card {
	padding: 0.9rem 1.1rem !important;
}

.dak-appt-filters-card .dak-dashboard-card-header {
	margin-bottom: 0.65rem !important;
}

.dak-appt-filters-card .dak-dashboard-card-header h2 {
	font-size: 0.78rem !important;
	text-transform: uppercase !important;
	letter-spacing: 0.03em !important;
	color: var( --dak-muted ) !important;
}

.dak-appt-filters-form .dak-field label {
	font-size: 0.78rem !important;
	margin-bottom: 0.25rem !important;
}

.dak-appt-filters-form .dak-field input,
.dak-appt-filters-form .dak-field select {
	padding: 0.45rem 0.65rem !important;
	font-size: 0.85rem !important;
}

.dak-appt-filters-form .dak-button {
	padding-top: 0.5rem !important;
	padding-bottom: 0.5rem !important;
	font-size: 0.85rem !important;
}

.dak-appt-filters-form .dak-admin-filter-actions {
	margin-bottom: 0 !important;
	gap: 0.5rem !important;
}

/* Appointments summary stat cards (Today / Awaiting payment / Time passed /
   Completed this week) — a 4-up grid above the filters card. */
.dak-appt-stats-grid {
	display: grid !important;
	grid-template-columns: repeat( 4, 1fr ) !important;
	gap: 1rem !important;
	margin-bottom: 1.25rem !important;
}

.dak-appt-stat-card {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.3rem !important;
	background: var( --dak-bg-card ) !important;
	border: 1px solid var( --dak-border ) !important;
	border-radius: var( --dak-radius-md ) !important;
	padding: 1rem 1.1rem !important;
	box-shadow: var( --dak-shadow ) !important;
}

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

.dak-appt-stat-value {
	font-size: 1.5rem !important;
	font-weight: 700 !important;
	color: var( --dak-text ) !important;
	line-height: 1.2 !important;
}

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

@media ( max-width: 900px ) {
	.dak-appt-stats-grid {
		grid-template-columns: repeat( 2, 1fr ) !important;
	}
}

/* Today/Tomorrow/Upcoming/Earlier sectioning above the appointment rows. */
.dak-appt-section {
	margin-bottom: 1.25rem !important;
}

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

.dak-appt-section-header {
	display: flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
	font-size: 0.8rem !important;
	font-weight: 700 !important;
	color: var( --dak-text ) !important;
	padding-bottom: 0.5rem !important;
	margin-bottom: 0.75rem !important;
	border-bottom: 1px solid var( --dak-border ) !important;
}

.dak-appt-section-count {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 1.35rem !important;
	height: 1.35rem !important;
	padding: 0 0.4rem !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;
}

/* Select-all + bulk actions toolbar shown above the sectioned rows. */
.dak-appt-bulk-toolbar {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	flex-wrap: wrap !important;
	gap: 0.75rem !important;
	margin-bottom: 1rem !important;
	padding-bottom: 0.85rem !important;
	border-bottom: 1px solid var( --dak-border ) !important;
}

.dak-appt-select-all {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.45rem !important;
	font-size: 0.85rem !important;
	color: var( --dak-text ) !important;
	cursor: pointer !important;
}

.dak-appt-bulk-actions {
	display: flex !important;
	align-items: center !important;
	gap: 0.6rem !important;
	padding: 0.4rem 0.75rem !important;
	background: var( --dak-primary-tint ) !important;
	border-radius: var( --dak-radius-md ) !important;
}

.dak-appt-bulk-actions #dak-appt-bulk-count {
	font-size: 0.82rem !important;
	font-weight: 600 !important;
	color: var( --dak-primary-dark ) !important;
	margin-right: 0.25rem !important;
}

.dak-appt-row-checkbox {
	display: flex !important;
	align-items: center !important;
	flex: 0 0 auto !important;
}

.dak-appt-row-checkbox input,
.dak-appt-select-all input {
	width: 16px !important;
	height: 16px !important;
	cursor: pointer !important;
}

/* Accent-bar record row — used wherever a plain table would otherwise be
   used (admin Appointments/Patients/Billing/Video Consultation, doctor
   Patients tab, etc.), matching the cards used everywhere else in the
   dashboard (Latest appointments, Pending doctor approvals, etc.). */
.dak-admin-record-row {
	position: relative !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: 1.1rem 1.25rem 1.1rem 1.5rem !important;
	margin-bottom: 0.85rem !important;
	scroll-margin-top: 1rem !important;
	transition: background-color 0.3s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;
}

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

/* A whole row rendered as an <a> (e.g. the Encounters list, where every row
   just opens that encounter's detail screen — no per-row action buttons) —
   <a> is inline by default, so this restores the block layout .dak-admin-
   record-row's flex children (.dak-admin-record-row-main etc.) expect. */
.dak-admin-record-row-link {
	display: block !important;
	color: inherit !important;
	text-decoration: none !important;
}

.dak-admin-record-row:last-child {
	margin-bottom: 0 !important;
}

.dak-admin-record-row::before {
	content: '' !important;
	position: absolute !important;
	top: 0.7rem !important;
	bottom: 0.7rem !important;
	left: 0 !important;
	width: 4px !important;
	border-radius: 999px !important;
	background: var( --dak-primary ) !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-admin-record-row:target {
	background: var( --dak-primary-tint ) !important;
}

/* Same as .dak-admin-record-row:target above, for the doctor dashboard's
   Clinics tab, which uses its own card layout instead of the shared
   admin-record-row list. */
.dak-clinic-card:target {
	background: var( --dak-primary-tint ) !important;
}

.dak-admin-record-row-main {
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	row-gap: 0.85rem !important;
	column-gap: 1.25rem !important;
}

.dak-admin-record-row-info {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.15rem !important;
	flex: 1 1 170px !important;
	min-width: 0 !important;
}

.dak-admin-record-row-info strong {
	color: var( --dak-text ) !important;
	font-size: 0.94rem !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

.dak-admin-record-row-id {
	font-size: 0.76rem !important;
	color: var( --dak-muted ) !important;
}

.dak-admin-record-row-meta {
	flex: 1 1 200px !important;
	font-size: 0.85rem !important;
	color: var( --dak-text ) !important;
	line-height: 1.45 !important;
}

.dak-admin-record-row-tags {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 0.4rem !important;
	flex: 1 1 220px !important;
}

.dak-admin-record-row-amount {
	flex: 0 0 auto !important;
	font-weight: 700 !important;
	font-size: 0.95rem !important;
	color: var( --dak-text ) !important;
	white-space: nowrap !important;
}

.dak-admin-record-row-actions {
	display: flex !important;
	align-items: center !important;
	gap: 0.35rem !important;
	flex: 0 0 auto !important;
	margin-left: auto !important;
	padding-left: 0.85rem !important;
	border-left: 1px solid var( --dak-border ) !important;
}

/* Video Consultation pricing row's price pair (original struck-through +
   discounted, or just the base price when there's no active discount). */
.dak-video-pricing-amounts {
	display: flex !important;
	align-items: baseline !important;
	gap: 0.5rem !important;
	flex: 0 0 auto !important;
	white-space: nowrap !important;
}

.dak-price-original {
	color: var( --dak-muted ) !important;
	font-size: 0.85rem !important;
}

.dak-price-sale {
	color: var( --dak-primary-dark ) !important;
	font-size: 0.95rem !important;
}

@media ( max-width: 680px ) {
	.dak-admin-record-row {
		padding: 1rem !important;
	}

	.dak-admin-record-row-main {
		align-items: flex-start !important;
	}

	.dak-admin-record-row-info,
	.dak-admin-record-row-meta,
	.dak-admin-record-row-tags {
		flex-basis: 100% !important;
	}

	.dak-admin-record-row-amount,
	.dak-admin-record-row-actions {
		margin-left: 0 !important;
	}

	.dak-admin-record-row-actions {
		flex-basis: 100% !important;
		justify-content: flex-start !important;
		flex-wrap: wrap !important;
		padding-left: 0 !important;
		padding-top: 0.6rem !important;
		border-left: 0 !important;
		border-top: 1px solid var( --dak-border ) !important;
	}
}

/* Admin Billing — one group per doctor (doctor name + "Download Statement"
   + that doctor's own clinic/video balance rows), visually separated so
   several doctors in a row don't run together. */
.dak-billing-doctor-group {
	margin-bottom: 1.5rem !important;
	padding-bottom: 1.5rem !important;
	border-bottom: 1px solid var( --dak-border ) !important;
}

.dak-billing-doctor-group:last-child {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
	border-bottom: 0 !important;
}

.dak-billing-doctor-header {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 0.75rem !important;
	margin-bottom: 0.75rem !important;
}

.dak-billing-doctor-header strong {
	font-size: 1rem !important;
	color: var( --dak-text ) !important;
}

@media ( max-width: 480px ) {
	.dak-billing-doctor-header {
		flex-direction: column !important;
		align-items: flex-start !important;
	}

	.dak-billing-doctor-header .dak-button {
		width: 100% !important;
		justify-content: center !important;
	}
}

/* Stat card grids with more than 4 cards (e.g. Billing's 6) still feel
   cramped at the existing 2-column/480px breakpoint on a small phone —
   drop to a single column below 400px specifically. Additive: doesn't
   change the 480-401px 2-column behaviour used elsewhere. */
@media ( max-width: 400px ) {
	.dak-dashboard-statistics {
		grid-template-columns: 1fr !important;
	}
}

/* Filter bars (.dak-appt-filters-form, used by Billing/Appointments/
   Notifications/etc.) — the 160px per-field min-width still leaves fields
   squeezed side-by-side on a small phone; stack every field full-width
   below 560px instead. */
@media ( max-width: 560px ) {
	.dak-appt-filters-form {
		gap: 0.75rem !important;
	}

	.dak-appt-filters-form .dak-field {
		min-width: 100% !important;
		flex-basis: 100% !important;
	}

	.dak-appt-filters-form .dak-admin-filter-actions {
		width: 100% !important;
	}

	.dak-appt-filters-form .dak-admin-filter-actions .dak-button {
		flex: 1 1 auto !important;
	}
}

/* Patient-list search box (Doctor dashboard's Patients tab card header) —
   a compact variant of the topbar's .dak-dashboard-search. */
.dak-patient-list-search {
	max-width: 260px !important;
	flex: 0 0 auto !important;
}

.dak-patient-list-search input {
	padding-top: 0.45rem !important;
	padding-bottom: 0.45rem !important;
}

/* Generic instant list-search box (doctor-ak-list-search.js) — same compact
   variant as .dak-patient-list-search above, reused across every list page
   that has no other filters (Services, Doctor Sessions, Clinic Locations,
   Doctor Requests, Encounters, Clinics, Medical History, …). */
.dak-list-search-box {
	max-width: 260px !important;
	flex: 0 0 auto !important;
}

.dak-list-search-box input {
	padding-top: 0.45rem !important;
	padding-bottom: 0.45rem !important;
}

/* Right-aligns a lone .dak-list-search-box where there's no card header with
   a title to pair it with (e.g. the doctor dashboard's Clinics tab, which
   uses a card-grid instead of .dak-dashboard-card-header). */
.dak-list-search-header {
	display: flex !important;
	justify-content: flex-end !important;
	margin-bottom: 0.75rem !important;
}

/* Doctor dashboard — Video Consultation tab */

.dak-video-pricing-sidebar {
	display: flex !important;
	flex-direction: column !important;
	gap: 1.25rem !important;
}

.dak-video-pricing-preview {
	background: var( --dak-primary-tint ) !important;
	border-radius: var( --dak-radius-md ) !important;
	padding: 1.25rem !important;
}

.dak-price-discount-badge {
	display: inline-flex !important;
	align-items: center !important;
	padding: 0.15rem 0.6rem !important;
	border-radius: 999px !important;
	background: var( --dak-tint-danger ) !important;
	color: var( --dak-danger ) !important;
	font-size: 0.72rem !important;
	font-weight: 700 !important;
	margin-bottom: 0.5rem !important;
}

.dak-video-pricing-preview .dak-price-original {
	color: var( --dak-muted ) !important;
	font-size: 0.9rem !important;
}

.dak-video-pricing-preview-sale {
	font-size: 1.8rem !important;
	font-weight: 700 !important;
	color: var( --dak-primary-dark ) !important;
	line-height: 1.2 !important;
}

.dak-video-pricing-preview-caption {
	margin: 0.2rem 0 0 !important;
	font-size: 0.82rem !important;
	color: var( --dak-muted ) !important;
}

.dak-video-pricing-preview-countdown {
	margin: 0.75rem 0 0 !important;
	font-size: 0.82rem !important;
	font-weight: 600 !important;
	color: var( --dak-tint-amber-text ) !important;
}

.dak-video-pricing-rule {
	display: flex !important;
	align-items: flex-start !important;
	gap: 0.75rem !important;
	padding: 0.75rem 0 !important;
	border-top: 1px solid var( --dak-border ) !important;
}

.dak-video-pricing-rule:first-of-type {
	border-top: 0 !important;
	padding-top: 0 !important;
}

.dak-video-pricing-rule-icon {
	flex-shrink: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 2rem !important;
	height: 2rem !important;
	border-radius: 50% !important;
	background: var( --dak-primary-tint ) !important;
	color: var( --dak-primary-dark ) !important;
}

.dak-video-pricing-rule-icon svg {
	width: 1rem !important;
	height: 1rem !important;
}

.dak-video-pricing-rule p {
	margin: 0 !important;
	font-size: 0.85rem !important;
	color: var( --dak-text ) !important;
	line-height: 1.4 !important;
}

/* Second line inside an accent-bar row (e.g. Doctors directory's "Clinics"
   tags, below the main name/specialization/status/actions line). */
.dak-admin-record-row-secondary {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 0.5rem !important;
	margin-top: 0.75rem !important;
	padding-top: 0.75rem !important;
	border-top: 1px solid var( --dak-border ) !important;
}

.dak-admin-record-row-secondary-label {
	flex-shrink: 0 !important;
	font-size: 0.72rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
	color: var( --dak-muted ) !important;
}

.dak-admin-record-row-secondary-empty {
	font-size: 0.85rem !important;
	color: var( --dak-muted ) !important;
}

/* Bold price shown next to a service's name in the doctor "Services" tab. */
.dak-service-row-price {
	font-weight: 700 !important;
	color: var( --dak-primary ) !important;
	font-size: 0.9rem !important;
}

/* Visit-note editor (doctor dashboard's completed appointments) and its
   read-only counterpart on the patient dashboard's Medical History tab —
   duplicated from doctor-ak-admin-dashboard.css (the admin Encounters
   section's original version) since that stylesheet isn't loaded here. */
.dak-encounter-note {
	padding-top: 0.85rem !important;
	border-top: 1px solid var( --dak-border ) !important;
}

.dak-encounter-note .dak-field-label {
	display: block !important;
	font-size: 0.7rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
	color: var( --dak-muted ) !important;
	margin-bottom: 0.4rem !important;
}

.dak-encounter-note-input {
	width: 100% !important;
	box-sizing: border-box !important;
	resize: vertical !important;
	padding: 0.6rem 0.75rem !important;
	border: 1px solid var( --dak-border ) !important;
	border-radius: var( --dak-radius-sm ) !important;
	background: var( --dak-bg-page ) !important;
	color: var( --dak-text ) !important;
	font-family: inherit !important;
	font-size: 0.88rem !important;
}

.dak-encounter-note-input:focus {
	outline: none !important;
	border-color: var( --dak-primary ) !important;
	box-shadow: 0 0 0 3px var( --dak-primary-tint ) !important;
}

.dak-encounter-note-actions {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 0.75rem !important;
	margin-top: 0.6rem !important;
}

.dak-encounter-note-status {
	font-size: 0.8rem !important;
	color: var( --dak-tint-success-text ) !important;
}

.dak-medical-history-note {
	padding-top: 0.85rem !important;
	margin-top: 0.75rem !important;
	border-top: 1px solid var( --dak-border ) !important;
}

.dak-medical-history-note .dak-field-label {
	display: block !important;
	font-size: 0.7rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
	color: var( --dak-muted ) !important;
	margin-bottom: 0.4rem !important;
}

.dak-medical-history-note p {
	margin: 0 !important;
	padding: 0.65rem 0.85rem !important;
	background: var( --dak-bg-subtle ) !important;
	border-radius: var( --dak-radius-sm ) !important;
	font-size: 0.88rem !important;
	line-height: 1.5 !important;
	color: var( --dak-text ) !important;
	white-space: pre-line !important;
}

.dak-medical-history-note-empty {
	background: transparent !important;
	border: 1px dashed var( --dak-border ) !important;
	font-size: 0.85rem !important;
	color: var( --dak-muted ) !important;
	font-style: italic !important;
}

.dak-medical-history-problem-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 0.4rem !important;
}

.dak-medical-history-problem-list li {
	padding: 0.65rem 0.85rem !important;
	background: var( --dak-bg-subtle ) !important;
	border-radius: var( --dak-radius-sm ) !important;
	font-size: 0.88rem !important;
	line-height: 1.5 !important;
	color: var( --dak-text ) !important;
}

.dak-medical-history-problem-notes {
	color: var( --dak-muted ) !important;
}

.dak-medical-history-links {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 1rem !important;
	margin-top: 0.75rem !important;
}

/* Encounter screen — Problems/Prescription/Bill inline add-forms and actions row. */
.dak-encounter-inline-form {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: flex-end !important;
	gap: 1rem !important;
	margin-top: 1rem !important;
	padding-top: 1rem !important;
	border-top: 1px solid var( --dak-border ) !important;
}

.dak-encounter-inline-form .dak-field {
	flex: 1 1 160px !important;
}

.dak-encounter-bill-total {
	margin-top: 1rem !important;
	font-size: 0.95rem !important;
	color: var( --dak-text ) !important;
}

.dak-encounter-actions {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 0.75rem !important;
}