/*
 * Premium dashboard polish — stat cards, the "Cases by Status" breakdown,
 * and topbar/avatar alignment, built on top of the vendored Annex CSS and
 * the Figma tokens rather than replacing either. Loaded on every portal
 * page (template-parts/header/header.php), but every selector here is
 * scoped to markup only the admin/practice dashboards or the shared
 * topbar actually render, so it has no effect elsewhere.
 */

/* ---- Logo (sidebar + auth pages) ---- */

.daligners-logo-img {
	display: block;
	width: auto;
	max-width: 100%;
	vertical-align: middle;
}

/*
 * Sidebar brand area: a dedicated header block above the nav menu, sized
 * and padded on its own terms rather than inheriting the vendored Annex
 * `.topbar-left`/`.logo` text-logo sizing (nothing in annex-style.css
 * actually targets a bare `.topbar-left` — its one rule is scoped
 * `.topbar .topbar-left`, a different navbar context — so this is a clean
 * surface, not an override fight). The logo sits directly on the sidebar
 * background — the source image is already a flat, opaque near-white
 * square, so it blends with `.side-menu`'s white background without a
 * card behind it.
 */
.daligners-brand {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 28px 16px 20px;
	box-sizing: border-box;
	border-bottom: 1px solid var(--color-border);
}

.daligners-brand-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
}

.daligners-logo-img-sidebar {
	height: 80px;
	max-height: 80px;
}

.daligners-brand-name {
	margin-top: 12px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 1px;
	color: var(--color-heading);
}

@media (max-width: 420px) {
	.daligners-brand {
		padding: 20px 12px 16px;
	}

	.daligners-logo-img-sidebar {
		height: 64px;
		max-height: 64px;
	}

	.daligners-brand-name {
		margin-top: 8px;
		font-size: 13px;
	}
}

/* ---- Stat cards (Admin + Practice dashboards) ---- */

.stat-card {
	border-radius: 12px;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.stat-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(17, 17, 17, 0.1);
}

.stat-card .card-body {
	padding: 1.5rem 1.35rem;
}

.stat-icon {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	margin-right: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 24px;
	color: var(--color-white);
}

.stat-icon-primary {
	background-color: var(--color-primary);
	box-shadow: 0 6px 14px rgba(11, 111, 112, 0.28);
}

.stat-icon-secondary {
	background-color: var(--color-secondary);
	box-shadow: 0 6px 14px rgba(0, 168, 181, 0.28);
}

.stat-icon-accent {
	background-color: var(--color-accent);
	color: var(--color-dark);
	box-shadow: 0 6px 14px rgba(167, 198, 0, 0.28);
}

.stat-icon-warning {
	background-color: #f5b225;
	color: var(--color-dark);
	box-shadow: 0 6px 14px rgba(245, 178, 37, 0.28);
}

.stat-icon-success {
	background-color: var(--color-success);
	box-shadow: 0 6px 14px rgba(34, 197, 94, 0.28);
}

.stat-info {
	min-width: 0;
}

.stat-value {
	margin: 0;
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-heading);
}

.stat-label {
	margin: 2px 0 0;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-body);
}

/* ---- Cases by Status breakdown ---- */

.status-breakdown-row {
	display: flex;
	align-items: center;
	padding: 10px 0;
}

.status-breakdown-row + .status-breakdown-row {
	border-top: 1px solid var(--color-border);
}

.status-breakdown-label {
	flex: 0 0 160px;
	display: flex;
	align-items: center;
	font-size: 0.9rem;
	color: var(--color-heading);
}

.status-dot {
	width: 10px;
	height: 10px;
	margin-right: 8px;
	border-radius: 50%;
	flex: 0 0 auto;
}

.status-breakdown-bar {
	flex: 1 1 auto;
	margin: 0 16px;
}

.status-breakdown-bar .progress {
	height: 8px;
	border-radius: 4px;
}

.status-breakdown-count {
	flex: 0 0 32px;
	text-align: right;
	font-weight: 600;
	color: var(--color-heading);
}

/* ---- Topbar / avatar ---- */

.nav-user-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.15);
	color: var(--color-white);
	font-size: 18px;
	vertical-align: middle;
	overflow: hidden;
}

.nav-user-avatar img {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
}

/*
 * Profile dropdown: fixed-width right-anchored menus overflow the viewport
 * when the display name is one long unbreakable token (an email address,
 * most commonly, since practices/admins can log in with either). Bootstrap's
 * .dropdown-menu-right only anchors the box to the toggle's right edge — it
 * does nothing to stop content from spilling past the box itself, and the
 * vendored `html { overflow-x: hidden; }` rule then silently clips that
 * spill instead of showing a scrollbar, so the name (or the whole menu edge)
 * visually vanishes off the right side of the screen. Fixed by giving the
 * menu a bounded, responsive width and forcing the name into a single
 * ellipsis-truncated line that can never exceed its container, regardless
 * of content or viewport size.
 */
.profile-dropdown {
	right: 0;
	left: auto;
	width: 260px;
	max-width: calc(100vw - 24px);
	box-sizing: border-box;
	padding: 6px 0;
}

.profile-dropdown .noti-title {
	padding: 14px 20px;
}

.nav-user-welcome {
	display: flex;
	align-items: baseline;
	gap: 4px;
	min-width: 0;
	margin: 0;
	font-size: 14px;
}

.nav-user-welcome-prefix {
	flex: 0 0 auto;
	white-space: nowrap;
}

.nav-user-name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.profile-dropdown .dropdown-item {
	display: flex;
	align-items: center;
	min-width: 0;
}

.profile-dropdown .dropdown-item i {
	flex: 0 0 auto;
}

.profile-dropdown .dropdown-item-label {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---- Quick Actions (Practice Dashboard) ---- */

.daligners-quick-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* ---- Recent Patients / Recent Cases lists ---- */

.daligners-recent-list li {
	display: flex;
	align-items: center;
	padding: 10px 0;
}

.daligners-recent-list li + li {
	border-top: 1px solid var(--color-border);
}

.daligners-recent-list-link {
	display: flex;
	align-items: center;
	width: 100%;
	color: inherit;
}

.daligners-recent-list-link:hover {
	color: inherit;
	text-decoration: none;
}

.daligners-recent-list-link:hover .daligners-recent-list-title {
	color: var(--color-primary);
}

.daligners-recent-list-icon {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	margin-right: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: var(--color-light-gray);
	color: var(--color-primary);
	font-size: 16px;
}

.daligners-recent-list-body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.daligners-recent-list-title {
	font-weight: 500;
	color: var(--color-heading);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: color 0.15s ease;
}

.daligners-recent-list-link .badge {
	flex: 0 0 auto;
	margin-left: 12px;
}

/* ---- Latest Activity feed ---- */

.daligners-activity-feed li + li {
	border-top: 1px solid var(--color-border);
}

.daligners-activity-feed li a {
	display: flex;
	align-items: center;
	padding: 10px 0;
	color: inherit;
}

.daligners-activity-feed li a:hover {
	color: inherit;
	text-decoration: none;
}

.daligners-activity-feed li a:hover .daligners-activity-text {
	color: var(--color-primary);
}

.daligners-activity-icon {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	margin-right: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: var(--color-light-gray);
	color: var(--color-secondary);
	font-size: 15px;
}

.daligners-activity-text {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 0.9rem;
	color: var(--color-heading);
	transition: color 0.15s ease;
}

.daligners-activity-time {
	flex: 0 0 auto;
	margin-left: 12px;
	font-size: 0.75rem;
	color: var(--color-body);
	white-space: nowrap;
}

/* ---- Row actions (Patients / Cases tables) ---- */

.daligners-row-actions {
	display: flex;
	justify-content: flex-end;
	gap: 6px;
	flex-wrap: wrap;
}

.daligners-actions-col {
	white-space: nowrap;
}

.daligners-row-actions .btn[disabled] {
	cursor: not-allowed;
	opacity: 0.5;
}

/* ---- Filter toolbar (Cases table) ---- */

.daligners-filter-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	margin-bottom: 16px;
}

.daligners-filter-toolbar .form-group {
	margin-bottom: 0;
}

.daligners-filter-toolbar label {
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--color-body);
	margin-bottom: 4px;
}

/* ---- Status history timeline (Case Details) ---- */

.daligners-status-history {
	position: relative;
	margin: 0;
	padding-left: 28px;
}

.daligners-status-history li {
	position: relative;
	padding-bottom: 18px;
}

.daligners-status-history li:last-child {
	padding-bottom: 0;
}

.daligners-status-history li::before {
	content: '';
	position: absolute;
	left: -22px;
	top: 4px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: var(--color-primary);
}

.daligners-status-history li::after {
	content: '';
	position: absolute;
	left: -18px;
	top: 14px;
	bottom: -4px;
	width: 1px;
	background-color: var(--color-border);
}

.daligners-status-history li:last-child::after {
	display: none;
}

.daligners-status-history-label {
	font-weight: 500;
	color: var(--color-heading);
}

.daligners-status-history-meta {
	display: block;
	font-size: 0.8rem;
	color: var(--color-body);
	margin-top: 2px;
}

@media (max-width: 420px) {
	.status-breakdown-label {
		flex-basis: 120px;
	}

	.profile-dropdown {
		width: 220px;
	}

	.daligners-activity-time {
		display: none;
	}

	.daligners-filter-toolbar {
		flex-direction: column;
		align-items: stretch;
	}
}

/* ---- Practice Detail (Admin) ---- */

.daligners-practice-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
}

.daligners-practice-header-identity {
	display: flex;
	align-items: center;
	min-width: 0;
}

.daligners-practice-header-icon {
	width: 64px;
	height: 64px;
	font-size: 28px;
	margin-right: 20px;
}

.daligners-practice-header-info {
	min-width: 0;
}

.daligners-practice-header-name {
	margin: 0 0 4px;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--color-heading);
	overflow-wrap: anywhere;
}

.daligners-practice-header-contact {
	margin: 0 0 10px;
	font-size: 0.9rem;
	color: var(--color-body);
}

.daligners-practice-header-contact i {
	margin-right: 4px;
	color: var(--color-primary);
}

.daligners-practice-header-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
}

.daligners-practice-header-registered {
	font-size: 0.85rem;
	color: var(--color-body);
}

.daligners-practice-header-registered i {
	margin-right: 4px;
	color: var(--color-primary);
}

.daligners-practice-header-action {
	flex: 0 0 auto;
}

.daligners-detail-grid {
	margin-top: 4px;
}

.daligners-detail-item {
	display: flex;
	flex-direction: column;
	margin-bottom: 22px;
}

.daligners-detail-label {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-body);
	margin-bottom: 4px;
}

.daligners-detail-value {
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--color-heading);
}

.daligners-detail-value-wrap {
	overflow-wrap: anywhere;
	word-break: break-word;
}

.daligners-file-summary {
	display: flex;
	align-items: center;
	gap: 12px;
	white-space: nowrap;
	font-size: 0.85rem;
	color: var(--color-body);
}

.daligners-file-summary i {
	margin-right: 2px;
	color: var(--color-primary);
}

.daligners-empty-state {
	padding: 48px 16px;
	text-align: center;
}

.daligners-empty-state-icon {
	font-size: 2.5rem;
	color: var(--color-border);
}

.daligners-empty-state-text {
	margin: 12px 0 0;
	color: var(--color-body);
}

@media (max-width: 576px) {
	.daligners-practice-header {
		align-items: flex-start;
	}

	.daligners-practice-header-action {
		width: 100%;
	}

	.daligners-practice-header-action .btn {
		width: 100%;
	}

	.daligners-detail-item {
		margin-bottom: 18px;
	}
}

/* ---- Photo guide modal (Case Details — upload step) ---- */

.daligners-photo-guide-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

.daligners-photo-guide-item {
	text-align: center;
}

.daligners-photo-guide-icon {
	width: 100%;
	height: auto;
	max-width: 96px;
	color: var(--color-border);
}

.daligners-photo-guide-label {
	margin: 8px 0 2px;
	font-weight: 600;
	font-size: 13px;
	color: var(--color-heading);
}

.daligners-photo-guide-caption {
	margin: 0;
	font-size: 12px;
	color: var(--color-muted, #6c757d);
}

@media (max-width: 420px) {
	.daligners-photo-guide-grid {
		grid-template-columns: 1fr;
	}
}

/* ---- Notification bell (topbar, both portals) ---- */

.daligners-notification-dropdown {
	width: 340px;
	padding: 0;
}

.daligners-notification-scroll {
	max-height: 320px;
	overflow-y: auto;
}

.notify-item.daligners-notify-unread {
	background-color: rgba(11, 111, 112, 0.06);
	border-left: 3px solid var(--color-primary, #0B6F70);
}

@media (max-width: 420px) {
	.daligners-notification-dropdown {
		width: 280px;
	}
}

/* ---- Auth pages (Login / Register) ---- */

/* Solid brand teal instead of the vendored dark bg-account.png image —
 * overrides annex-style.css's .accountbg (loaded earlier, same specificity,
 * so the later rule here wins). The `background` shorthand also clears the
 * inherited background-image, so no image shows through underneath. */
.accountbg {
	background: #006363;
}

/* Flex container, not text-align — .daligners-logo-img is display:block
 * (see the sidebar-brand rule above), and text-align only ever centers
 * inline-level content, so a block-level image inside a text-align:center
 * parent does NOT get centered. justify-content:center on the flex
 * container centers it correctly regardless of the image's own display type. */
.daligners-auth-logo {
	display: flex;
	justify-content: center;
	margin-bottom: 24px;
}

/* 260px is the fixed desktop width. max-width:100% is what makes it
 * "fully responsive" on tablets/phones — once the card itself (.wrapper-page,
 * annex-style.css) shrinks below 260px on a narrow viewport, the logo scales
 * down to fit its container instead of overflowing, and height:auto keeps
 * the aspect ratio intact at every size. No separate mobile breakpoint
 * needed for this rule to behave responsively. */
.daligners-logo-img-auth {
	width: 260px;
	height: auto;
	max-width: 100%;
}

.daligners-auth-card {
	border-radius: 14px;
	box-shadow: 0 14px 36px rgba(17, 17, 17, 0.14);
}

/* Register (or any future auth page passing $daligners_auth_hero) gets a
 * wider card than the plain Login card — .wrapper-page's own 460px max-width
 * (annex-style.css) stays untouched for Login. */
.wrapper-page-wide {
	max-width: 960px;
}

/* Sits inside the card, below the logo — dark-on-white to match the card
 * background it's actually on. */
.daligners-auth-hero {
	max-width: 640px;
	margin: 0 auto 20px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--color-border);
}

.daligners-auth-hero-eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-primary);
	margin-bottom: 8px;
}

.daligners-auth-hero-title {
	font-size: 22px;
	font-weight: 700;
	color: var(--color-heading);
	margin: 0 0 8px;
}

.daligners-auth-hero-subtitle {
	font-size: 14px;
	line-height: 1.6;
	color: var(--color-muted, #6c757d);
	margin: 0 auto;
}

@media (max-width: 420px) {
	.daligners-auth-hero-title {
		font-size: 20px;
	}
}

/* ---- Profile Photo card (Admin Settings / Practice Profile) ---- */

.daligners-avatar-preview-wrap {
	display: flex;
	justify-content: center;
	margin-bottom: 18px;
}

.daligners-avatar-preview {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--color-light-gray);
}

.daligners-avatar-preview-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-primary);
	color: var(--color-white);
	font-size: 48px;
}

.daligners-profile-photo-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.daligners-profile-photo-actions .form-control-file {
	max-width: 260px;
}

@media (max-width: 420px) {
	.daligners-avatar-preview,
	.daligners-avatar-preview-placeholder {
		width: 96px;
		height: 96px;
	}

	.daligners-avatar-preview-placeholder {
		font-size: 40px;
	}
}