/**
 * Doctor AK Portal — Administrator dashboard (Users: Doctors/Patients).
 *
 * Loaded together with doctor-ak-auth.css and doctor-ak-dashboard.css, which
 * provide the shared design tokens, sidebar/nav layout (.dak-dashboard-nav,
 * .dak-nav-icon, .dak-stat-card, etc.), form field styles (.dak-field*),
 * button primitives (.dak-button*) and alert styles (.dak-alert*). This
 * stylesheet only adds what those don't already cover: grouped sidebar
 * section labels, the accounts table, status badges, row action buttons
 * and the "coming soon" placeholder card.
 */

.dak-nav-group {
	margin-bottom: 1rem !important;
}

.dak-nav-group-label {
	display: block !important;
	padding: 0 0.75rem !important;
	margin-bottom: 0.35rem !important;
	font-size: 0.7rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.06em !important;
	color: var( --dak-muted ) !important;
	opacity: 0.8 !important;
}

.dak-stat-value-pending {
	font-size: 0.95rem !important;
	font-weight: 600 !important;
	color: var( --dak-muted ) !important;
}

.dak-admin-placeholder-card {
	text-align: center !important;
	padding: 3rem 1.5rem !important;
}

.dak-admin-users-header {
	display: flex !important;
	align-items: flex-start !important;
	justify-content: space-between !important;
	gap: 1rem !important;
	flex-wrap: wrap !important;
}

.dak-admin-users-card {
	padding: 0 !important;
	overflow: hidden !important;
}

/* Card-style content (the Patients directory's accent-bar rows, the
   "Permission matrix"/"Locations" forms, etc.) needs real padding around
   its heading and rows — only a literal <table> layout (the Doctors list)
   stays edge-to-edge, since its th/td cells already carry their own
   padding. :has() lets one card-wrapper class serve both layouts. */
.dak-admin-users-card:has( > .dak-dashboard-card-header ) {
	padding: 1.5rem !important;
}

.dak-admin-users-card:has( > .dak-dashboard-card-header ) > .dak-dashboard-card-header {
	margin-bottom: 1.25rem !important;
}

#dak-role-permissions-form,
#dak-locations-form {
	padding: 24px !important;
	overflow: visible !important;
}

#dak-role-permissions-form h3 {
	margin: 24px 0 8px !important;
}

#dak-role-permissions-form h3:first-child {
	margin-top: 0 !important;
}

.dak-countries-rows {
	display: flex !important;
	flex-direction: column !important;
	gap: 1rem !important;
}

.dak-country-row {
	padding: 16px !important;
	border: 1px solid var( --dak-border ) !important;
	border-radius: 10px !important;
	background: var( --dak-bg-subtle ) !important;
}

.dak-country-row-header {
	display: flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
	margin-bottom: 0.75rem !important;
}

.dak-country-row-header .dak-country-name {
	flex: 1 1 auto !important;
	font-weight: 700 !important;
	font-size: 0.95rem !important;
}

.dak-cities-rows {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.6rem !important;
	margin-left: 1.25rem !important;
	padding-left: 0.75rem !important;
	border-left: 2px solid var( --dak-border ) !important;
}

.dak-city-row {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 0.5rem !important;
}

.dak-city-row .dak-city-name {
	flex: 0 1 200px !important;
	font-weight: 600 !important;
}

.dak-areas-rows {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 0.4rem !important;
	flex: 1 1 auto !important;
}

.dak-area-chip {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.15rem !important;
}

.dak-area-chip .dak-area-name {
	width: 130px !important;
	font-size: 0.82rem !important;
	padding: 0.35rem 0.55rem !important;
}

.dak-country-name,
.dak-city-name,
.dak-area-name {
	border: 1px solid var( --dak-border ) !important;
	border-radius: 8px !important;
	padding: 0.5rem 0.7rem !important;
	background: var( --dak-bg-card ) !important;
	color: inherit !important;
}

@media ( max-width: 600px ) {
	.dak-country-row {
		padding: 12px !important;
	}

	.dak-cities-rows {
		margin-left: 0.6rem !important;
		padding-left: 0.5rem !important;
	}

	.dak-city-row {
		flex-direction: column !important;
		align-items: stretch !important;
	}

	.dak-city-row .dak-city-name {
		flex: 1 1 auto !important;
	}

	.dak-areas-rows {
		width: 100% !important;
	}

	.dak-area-chip {
		flex: 1 1 auto !important;
	}

	.dak-area-chip .dak-area-name {
		width: auto !important;
		flex: 1 1 auto !important;
		min-width: 0 !important;
	}
}

.dak-back-link {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.35rem !important;
	margin-bottom: 0.5rem !important;
	color: var( --dak-muted ) !important;
	font-size: 0.85rem !important;
	font-weight: 600 !important;
	text-decoration: none !important;
}

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

.dak-admin-user-form-actions {
	display: flex !important;
	justify-content: flex-end !important;
	gap: 0.75rem !important;
	margin-top: 1.5rem !important;
	padding-top: 1.25rem !important;
	border-top: 1px solid var( --dak-border ) !important;
}

.dak-table-scroll {
	overflow-x: auto !important;
	-webkit-overflow-scrolling: touch !important;
}

.dak-admin-users-table {
	width: 100% !important;
	border-collapse: collapse !important;
}

.dak-admin-users-table th,
.dak-admin-users-table td {
	padding: 0.9rem 1.25rem !important;
	text-align: left !important;
	font-size: 0.88rem !important;
	border-bottom: 1px solid var( --dak-border ) !important;
	white-space: nowrap !important;
}

.dak-admin-users-table th {
	color: var( --dak-muted ) !important;
	font-weight: 700 !important;
	font-size: 0.78rem !important;
	text-transform: uppercase !important;
	letter-spacing: 0.03em !important;
	background: var( --dak-bg-subtle ) !important;
}

.dak-admin-users-table tbody tr {
	scroll-margin-top: 1rem !important;
	transition: background-color 0.15s ease !important;
}

.dak-admin-users-table tbody tr:hover {
	background: var( --dak-bg-subtle ) !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-users-table tbody tr:target {
	background: var( --dak-primary-tint ) !important;
}

.dak-admin-users-table td {
	color: var( --dak-text ) !important;
}

.dak-admin-users-table tbody tr:last-child td {
	border-bottom: 0 !important;
}

.dak-permission-matrix th:not( :first-child ),
.dak-permission-matrix td:not( :first-child ) {
	text-align: center !important;
}

.dak-permission-matrix th {
	text-transform: uppercase !important;
	font-size: 0.72rem !important;
	letter-spacing: 0.04em !important;
}

.dak-permission-matrix input[type='checkbox'] {
	width: 18px !important;
	height: 18px !important;
	accent-color: var( --dak-primary ) !important;
	cursor: pointer !important;
}

.dak-permission-matrix input[type='checkbox']:disabled {
	cursor: not-allowed !important;
	opacity: 0.7 !important;
}

/* The matrix has 5 columns (Capability + Admin/Doctor/Patient/Receptionist)
   — .dak-table-scroll already lets it scroll horizontally on a phone, but
   tighter padding and bigger touch targets mean less scrolling is needed
   and the checkboxes are easier to tap. */
@media ( max-width: 560px ) {
	.dak-permission-matrix th,
	.dak-permission-matrix td {
		padding: 0.6rem 0.75rem !important;
		font-size: 0.8rem !important;
	}

	.dak-permission-matrix th:first-child,
	.dak-permission-matrix td:first-child {
		white-space: normal !important;
		min-width: 110px !important;
	}

	.dak-permission-matrix input[type='checkbox'] {
		width: 22px !important;
		height: 22px !important;
	}
}

.dak-status-badge {
	display: inline-flex !important;
	align-items: center !important;
	padding: 0.25rem 0.65rem !important;
	border-radius: 999px !important;
	font-size: 0.76rem !important;
	font-weight: 700 !important;
}

.dak-status-badge.is-active {
	background: var( --dak-primary-tint ) !important;
	color: var( --dak-primary-dark ) !important;
}

.dak-status-badge.is-disabled {
	background: var( --dak-tint-danger ) !important;
	color: var( --dak-danger ) !important;
}

.dak-status-badge.is-pending {
	background: var( --dak-tint-amber ) !important;
	color: var( --dak-tint-amber-text ) !important;
}

.dak-status-badge.is-rescheduled {
	background: var( --dak-tint-info ) !important;
	color: var( --dak-tint-info-text ) !important;
}

.dak-admin-users-table .dak-status-badge {
	margin-left: 0.5rem !important;
}

.dak-admin-appt-details {
	display: flex !important;
	align-items: flex-start !important;
	gap: 0.6rem !important;
}

.dak-admin-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.85rem !important;
}

.dak-admin-filter-actions {
	display: flex !important;
	align-items: center !important;
	gap: 0.6rem !important;
	flex: 0 0 auto !important;
	margin-bottom: 1.1rem !important;
}

.dak-admin-users-actions-col {
	white-space: nowrap !important;
	width: 1% !important;
}

.dak-admin-users-actions {
	display: flex !important;
	align-items: center !important;
	gap: 0.4rem !important;
	flex-wrap: nowrap !important;
}

.dak-icon-button {
	flex: 0 0 auto !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 34px !important;
	height: 34px !important;
	border: 1px solid var( --dak-border ) !important;
	background: var( --dak-bg-card ) !important;
	color: var( --dak-muted ) !important;
	border-radius: var( --dak-radius-sm ) !important;
	padding: 0 !important;
	cursor: pointer !important;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease !important;
}

.dak-icon-button svg {
	width: 16px !important;
	height: 16px !important;
}

.dak-icon-button:hover {
	background: var( --dak-bg-subtle ) !important;
	color: var( --dak-text ) !important;
	transform: translateY( -1px ) !important;
}

.dak-icon-button:focus-visible {
	outline: 2px solid var( --dak-primary ) !important;
	outline-offset: 1px !important;
}

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

.dak-icon-button-warning:hover {
	background: var( --dak-tint-amber ) !important;
	color: var( --dak-tint-amber-text ) !important;
	border-color: var( --dak-tint-amber-text ) !important;
}

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

@media ( max-width: 782px ) {
	.dak-admin-users-table th,
	.dak-admin-users-table td {
		white-space: normal !important;
	}

	.dak-admin-users-actions-col,
	.dak-admin-users-actions {
		white-space: nowrap !important;
	}
}

/* Accent-bar record row (.dak-admin-record-row) and the Video Consultation
   pricing amounts (.dak-video-pricing-amounts etc.) moved to the shared
   doctor-ak-dashboard.css — reused by the doctor dashboard's own Patients
   and Video Consultation tabs, not just the admin dashboard. */

/* Clinic branding card (Settings section) */

.dak-clinic-branding-logo-row {
	display: flex !important;
	align-items: center !important;
	gap: 1rem !important;
	margin-bottom: 1.25rem !important;
}

.dak-clinic-branding-logo-row .dak-button .dak-nav-icon {
	width: 16px !important;
	height: 16px !important;
}

/* Notification preferences toggle switch */

.dak-toggle-switch {
	position: relative !important;
	display: inline-flex !important;
	flex-shrink: 0 !important;
	width: 2.6rem !important;
	height: 1.5rem !important;
	cursor: pointer !important;
}

.dak-toggle-switch input {
	position: absolute !important;
	opacity: 0 !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	cursor: pointer !important;
}

.dak-toggle-switch span {
	position: absolute !important;
	inset: 0 !important;
	border-radius: 999px !important;
	background: var( --dak-border ) !important;
	transition: background-color 0.15s ease !important;
}

.dak-toggle-switch span::before {
	content: '' !important;
	position: absolute !important;
	top: 0.15rem !important;
	left: 0.15rem !important;
	width: 1.2rem !important;
	height: 1.2rem !important;
	border-radius: 50% !important;
	background: #fff !important;
	box-shadow: 0 1px 3px rgba( 15, 23, 42, 0.25 ) !important;
	transition: transform 0.15s ease !important;
}

.dak-toggle-switch input:checked + span {
	background: var( --dak-primary ) !important;
}

.dak-toggle-switch input:checked + span::before {
	transform: translateX( 1.1rem ) !important;
}

.dak-toggle-switch input:focus-visible + span {
	box-shadow: 0 0 0 3px var( --dak-primary-tint ) !important;
}

/* Patients directory card row — simpler than the appointment row (no tags,
   no amount): avatar/name/ID, email, phone, a "Since ..." pill, and Edit. */
.dak-admin-patient-row {
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	row-gap: 0.85rem !important;
	column-gap: 1.25rem !important;
}

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

.dak-admin-patient-row-info strong {
	color: var( --dak-text ) !important;
	font-size: 0.94rem !important;
	font-weight: 700 !important;
}

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

.dak-admin-patient-row-email,
.dak-admin-patient-row-phone,
.dak-admin-patient-row-clinic {
	flex: 1 1 190px !important;
	font-size: 0.86rem !important;
	color: var( --dak-text ) !important;
}

.dak-admin-patient-row-since {
	flex: 0 0 auto !important;
	display: inline-flex !important;
	align-items: center !important;
	white-space: nowrap !important;
	padding: 0.25rem 0.7rem !important;
	border-radius: 999px !important;
	background: var( --dak-bg-subtle ) !important;
	color: var( --dak-muted ) !important;
	font-size: 0.76rem !important;
	font-weight: 600 !important;
}

/* Doctor Requests — "View Profile" modal */

.dak-doctor-profile-dialog {
	max-width: 640px !important;
	max-height: 85vh !important;
	overflow-y: auto !important;
}

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

.dak-doctor-profile-header-info {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.2rem !important;
}

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

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

.dak-doctor-profile-grid {
	display: grid !important;
	grid-template-columns: repeat( 2, 1fr ) !important;
	gap: 1rem !important;
	margin-bottom: 1rem !important;
}

.dak-doctor-profile-section {
	margin-bottom: 1rem !important;
}

.dak-doctor-profile-grid .dak-doctor-profile-section {
	margin-bottom: 0 !important;
}

.dak-doctor-profile-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.3rem !important;
}

.dak-doctor-profile-section p {
	margin: 0 !important;
	font-size: 0.9rem !important;
	color: var( --dak-text ) !important;
	line-height: 1.5 !important;
}

.dak-doctor-profile-awards {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 0.4rem !important;
}

.dak-doctor-profile-awards li {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 0.75rem !important;
	padding: 0.5rem 0.75rem !important;
	background: var( --dak-bg-subtle ) !important;
	border-radius: var( --dak-radius-sm ) !important;
	font-size: 0.88rem !important;
	color: var( --dak-text ) !important;
}

.dak-doctor-profile-awards li span {
	flex-shrink: 0 !important;
	color: var( --dak-muted ) !important;
	font-size: 0.8rem !important;
}

@media ( max-width: 480px ) {
	.dak-doctor-profile-grid {
		grid-template-columns: 1fr !important;
	}
}

/* Encounters — completed-visit log with an inline note per row */

.dak-encounter-row {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.85rem !important;
}

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

@media ( max-width: 680px ) {
	.dak-admin-patient-row {
		align-items: flex-start !important;
	}

	.dak-admin-patient-row-info,
	.dak-admin-patient-row-email,
	.dak-admin-patient-row-phone,
	.dak-admin-patient-row-clinic {
		flex-basis: 100% !important;
	}
}

/* Dashboard overview — Revenue trend (line) + Appointments (clustered bar)
   charts (see templates/dashboard/partials/admin-overview.php and
   admin-appointments-chart.php). Plain inline SVG — no charting library —
   so these stay theme-aware (light/dark) for free via the same --dak-*
   custom properties every other card already uses. */

.dak-dashboard-grid-charts {
	align-items: stretch !important;
}

.dak-dashboard-grid-charts > .dak-dashboard-card {
	display: flex !important;
	flex-direction: column !important;
}

.dak-chart-svg {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	overflow: visible !important;
}

.dak-chart-gridline {
	stroke: var( --dak-border ) !important;
	stroke-width: 1 !important;
	shape-rendering: crispEdges !important;
}

.dak-chart-axis-label {
	fill: var( --dak-muted ) !important;
	font-size: 10px !important;
	font-family: inherit !important;
}

.dak-chart-area {
	fill: var( --dak-primary ) !important;
	fill-opacity: 0.1 !important;
	stroke: none !important;
}

.dak-chart-line {
	fill: none !important;
	stroke: var( --dak-primary ) !important;
	stroke-width: 2 !important;
	stroke-linejoin: round !important;
	stroke-linecap: round !important;
}

.dak-chart-dot {
	fill: var( --dak-primary ) !important;
	stroke: var( --dak-bg-card ) !important;
	stroke-width: 2 !important;
}

.dak-chart-hit {
	fill: transparent !important;
}

.dak-chart-hit:hover + .dak-chart-dot,
.dak-chart-dot:hover {
	fill: var( --dak-primary-dark ) !important;
}

/* "Appointments" clustered bar chart (admin-appointments-chart.php) —
   Day/Week/Month toggle, one group of bars per bucket, one bar per status. */

.dak-chart-period-toggle {
	display: inline-flex !important;
	flex-shrink: 0 !important;
	border: 1px solid var( --dak-border ) !important;
	border-radius: 999px !important;
	overflow: hidden !important;
}

.dak-chart-period-btn {
	padding: 0.4rem 0.85rem !important;
	background: var( --dak-bg-card ) !important;
	color: var( --dak-muted ) !important;
	font-weight: 600 !important;
	font-size: 0.8rem !important;
	border: none !important;
	cursor: pointer !important;
}

.dak-chart-period-btn + .dak-chart-period-btn {
	border-left: 1px solid var( --dak-border ) !important;
}

.dak-chart-period-btn.is-active {
	background: var( --dak-primary ) !important;
	color: #fff !important;
	cursor: default !important;
}

.dak-chart-cluster-bar {
	transition: opacity 0.15s ease !important;
}

.dak-chart-cluster-bar:hover {
	opacity: 0.8 !important;
}

.dak-chart-legend {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 0.6rem 1rem !important;
	margin-top: 0.85rem !important;
	padding-top: 0.85rem !important;
	border-top: 1px solid var( --dak-border ) !important;
}

.dak-chart-legend-item {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.4rem !important;
	font-size: 0.78rem !important;
	color: var( --dak-muted ) !important;
}

.dak-chart-legend-swatch {
	display: inline-block !important;
	width: 9px !important;
	height: 9px !important;
	border-radius: 2px !important;
	flex-shrink: 0 !important;
}

@media ( max-width: 480px ) {
	#dak-appointments-chart .dak-dashboard-card-header {
		flex-wrap: wrap !important;
	}
}