/**
 * Dashboard 2.0 Styles
 * Nxtgen blue color overrides for SB Admin 2 sidebar + custom header component
 */

/* ==============================================
   CSS Variables for Nxtgen Brand Colors
   ============================================== */

:root {
	--nxtgen-primary: #0066b2;
	--nxtgen-primary-dark: #0055a3;
	--nxtgen-primary-light: #0077cc;
	--nxtgen-accent: #00a0e9;
	--nxtgen-bg: #f0f8ff;
	--nxtgen-white-10: rgba(255, 255, 255, 0.1);
	--nxtgen-white-20: rgba(255, 255, 255, 0.2);
	--nxtgen-white-80: rgba(255, 255, 255, 0.8);
}

/* ==============================================
   Base Typography - Match v1 dashboard font sizing
   ============================================== */

.dashboard-v2 {
	font-family: 'Mulish', sans-serif;
	font-size: 0.875rem; /* 14px - matches v1 dashboard */
}

.dashboard-v2 h1, .dashboard-v2 h2, .dashboard-v2 h3 {
	margin: 0;
	padding: 0;
	line-height: inherit;
	font-family: inherit;
	font-weight: normal;
}

.dashboard-v2 h1 {
	font-size: 22px;
	font-weight: bold;
}

.dashboard-v2 h2 {
	font-size: 18px;
}

.dashboard-v2 h3 {
	font-size: 16px;
}

.dashboard-v2 div.grid {
	display: grid;
	grid-gap: 5px;
}

/* ==============================================
   Part 1: SB Admin 2 Sidebar Color Overrides
   ============================================== */

/* Sidebar background - override dark gray with Nxtgen blue gradient */
.dashboard-v2 .sidebar {
	background: linear-gradient(180deg, var(--nxtgen-primary) 10%, var(--nxtgen-primary-dark) 100%);
	width: 16rem !important;
}

/* Sidebar brand area */
.dashboard-v2 .sidebar .sidebar-brand {
	color: #fff;
	text-transform: none;
	font-weight: 500;
	font-size: 1.125rem;
}

.dashboard-v2 .sidebar .sidebar-brand:hover {
	color: #fff;
}

.dashboard-v2 .sidebar .sidebar-brand-text {
	text-transform: none;
	font-weight: 500;
}

/* Nav link default state */
.dashboard-v2 .sidebar .nav-item .nav-link {
	color: var(--nxtgen-white-80);
	padding: 0.8rem 0.7rem;
}

.dashboard-v2 .sidebar .nav-item .nav-link i {
	color: var(--nxtgen-white-80);
}

/* Nav link hover state */
.dashboard-v2 .sidebar .nav-item .nav-link:hover {
	background-color: var(--nxtgen-primary-dark);
	color: #fff;
}

.dashboard-v2 .sidebar .nav-item .nav-link:hover i {
	color: #fff;
}

/* Active nav item */
.dashboard-v2 .sidebar .nav-item.active > .nav-link {
	background-color: var(--nxtgen-primary-light);
	color: #fff;
	font-weight: 600;
}

.dashboard-v2 .sidebar .nav-item.active > .nav-link i {
	color: #fff;
}

/* Collapse inner background (submenu) - match parent background */
.dashboard-v2 .sidebar .collapse-inner {
	background-color: transparent;
	border: none;
}

/* Override SB Admin 2 collapse/collapsing margins */
.dashboard-v2 .sidebar .nav-item .collapse,
.dashboard-v2 .sidebar .nav-item .collapsing {
	margin: 0;
}

.dashboard-v2 .sidebar .nav-item .collapse .collapse-inner,
.dashboard-v2 .sidebar .nav-item .collapsing .collapse-inner {
	margin: 0;
	padding: 0.25rem 0;
}

/* Override SB Admin 2 collapse item text color, padding, and font weight */
.dashboard-v2 .sidebar .nav-item .collapse .collapse-inner .collapse-item,
.dashboard-v2 .sidebar .nav-item .collapsing .collapse-inner .collapse-item {
	color: var(--nxtgen-white-80);
	padding: 0.2rem 0.5rem 0.2rem 1rem;
	font-weight: normal;
}

.dashboard-v2 .sidebar .nav-item .collapse .collapse-inner .collapse-item:hover,
.dashboard-v2 .sidebar .nav-item .collapsing .collapse-inner .collapse-item:hover {
	color: #fff;
	background-color: var(--nxtgen-primary-dark);
}

/* Borders between main nav sections */
.dashboard-v2 .sidebar .nav-item {
	border-bottom: 1px solid var(--nxtgen-primary-dark);
}

/* Dashboard link button styling */
.dashboard-v2 .sidebar .dashboard-link-container {
	padding: 0.5rem;
	border-bottom: 1px solid var(--nxtgen-primary-dark);
}

.dashboard-v2 .sidebar .dashboard-link {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem;
	border-radius: 0.375rem;
	background-color: var(--nxtgen-primary-light);
	color: #fff;
	text-decoration: none;
	font-weight: 500;
}

.dashboard-v2 .sidebar .dashboard-link:hover {
	background-color: var(--nxtgen-primary-dark);
	color: #fff;
	text-decoration: none;
}

.dashboard-v2 .sidebar .dashboard-link i {
	color: #fff;
}


/* Collapse items - active state */
.dashboard-v2 .sidebar .collapse-item.active {
	background-color: var(--nxtgen-primary-light);
	color: #fff;
	font-weight: 600;
}

/* Subsection collapse toggle items */
.dashboard-v2 .sidebar .nav-item .collapse .collapse-inner .collapse-item[data-toggle="collapse"],
.dashboard-v2 .sidebar .nav-item .collapsing .collapse-inner .collapse-item[data-toggle="collapse"] {
	display: flex !important;
	align-items: center;
	flex-wrap: nowrap;
}

.dashboard-v2 .sidebar .collapse-item .subsection-chevron {
	transition: transform 0.2s ease-in-out;
	flex-shrink: 0;
}

.dashboard-v2 .sidebar .collapse-item.collapsed .subsection-chevron {
	transform: rotate(-90deg);
}

/* Subsection nested collapse */
.dashboard-v2 .sidebar .subsection-collapse {
	padding-left: 0.5rem;
}

/* Sidebar dividers */
.dashboard-v2 .sidebar .sidebar-divider {
	border-top: 1px solid var(--nxtgen-primary-dark);
	margin: 0;
}

/* Fix chevron icons - SB Admin 2 uses Font Awesome 5 Free, we use FA Pro 6 */
@media (min-width: 768px) {
	.dashboard-v2 .sidebar .nav-item .nav-link[data-toggle="collapse"]::after {
		font-family: 'Font Awesome 6 Pro';
		font-weight: 400;
		content: '\f078'; /* fa-chevron-down */
	}

	.dashboard-v2 .sidebar .nav-item .nav-link[data-toggle="collapse"].collapsed::after {
		content: '\f054'; /* fa-chevron-right */
	}
}

/* Sidebar toggle button */
.dashboard-v2 .sidebar #sidebarToggle,
.dashboard-v2 .sidebar #sidebarToggleTop {
	background-color: var(--nxtgen-primary-dark);
}

.dashboard-v2 .sidebar #sidebarToggle:hover,
.dashboard-v2 .sidebar #sidebarToggleTop:hover {
	background-color: var(--nxtgen-primary);
}

.dashboard-v2 .sidebar #sidebarToggle::after {
	color: var(--nxtgen-white-80);
}

/* ==============================================
   Part 2: Custom Header Component
   ============================================== */

.dashboard-v2-header {
	background-color: var(--nxtgen-primary);
	color: #fff;
	padding: 0.75rem 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: sticky;
	top: 0;
	z-index: 100;
	min-height: 60px;
	width: 100%;
}

.dashboard-v2-header .header-left {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.dashboard-v2-header .header-right {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

/* Hamburger button (mobile sidebar toggle) */
.dashboard-v2-header .hamburger-btn {
	padding: 0.5rem;
	background: transparent;
	border: none;
	color: #fff;
	border-radius: 0.375rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.dashboard-v2-header .hamburger-btn:hover {
	background-color: var(--nxtgen-primary-dark);
}

.dashboard-v2-header .hamburger-btn:focus {
	outline: 2px solid var(--nxtgen-white-80);
	outline-offset: 2px;
}

/* Facility logo container */
.dashboard-v2-header .facility-logo {
	background-color: #fff;
	border-radius: 0.5rem;
	padding: 0.5rem 1rem;
	display: flex;
	align-items: center;
	text-decoration: none !important;
	justify-content: center;
	color: var(--nxtgen-primary);
	font-weight: 600;
	font-size: 0.9375rem;
	min-height: 80px; /* Match height as if logo image present */
}

.dashboard-v2-header .facility-logo img {
	max-height: 64px;
	max-width: 200px;
	object-fit: contain;
}

.dashboard-v2-header .facility-logo span {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 200px;
}

/* Header icon buttons */
.dashboard-v2-header .icon-btn {
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 50%;
	background: var(--nxtgen-white-10);
	border: none;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	cursor: pointer;
	transition: background-color 0.15s ease-in-out;
}

.dashboard-v2-header .icon-btn:hover {
	background: var(--nxtgen-white-20);
}

.dashboard-v2-header .icon-btn:focus {
	outline: 2px solid var(--nxtgen-white-80);
	outline-offset: 2px;
}

.dashboard-v2-header .icon-btn i {
	font-size: 1.125rem;
}

/* Alert active state (pulsing red) */
.dashboard-v2-header .icon-btn.alert-active,
.dashboard-v2-header .header-alerts-container .icon-btn.visible {
	background-color: #dc2626;
	animation: pulse-alert 2s infinite;
}

/* Warning state (amber) */
.dashboard-v2-header .icon-btn.warning {
	background-color: #f59e0b;
}

/* Header alerts container */
.dashboard-v2-header .header-alerts-container {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.dashboard-v2-header .header-alerts-container .icon-btn {
	display: none;
}

.dashboard-v2-header .header-alerts-container .icon-btn.visible {
	display: flex;
}

@keyframes pulse-alert {
	0% {
		box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7);
	}
	70% {
		box-shadow: 0 0 0 10px rgba(220, 38, 38, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);
	}
}

/* Badge on icon buttons */
.dashboard-v2-header .icon-btn .badge,
.dashboard-v2-header .icon-btn a .badge {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	font-size: 0.7rem;
	font-weight: 600;
	line-height: 18px;
	text-align: center;
	border-radius: 9px;
	background-color: #dc2626;
	color: #fff;
}

/* Ensure link inside icon-btn is positioned for badge */
.dashboard-v2-header .icon-btn a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	color: inherit;
	text-decoration: none;
}


/* User dropdown menu */
.dashboard-v2-header .user-dropdown {
	position: relative;
}

.dashboard-v2-header .user-dropdown-menu {
	position: absolute;
	top: calc(100% + 0.5rem);
	right: 0;
	background: #fff;
	border-radius: 0.5rem;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	min-width: 200px;
	display: none;
	z-index: 200;
	overflow: hidden;
}

.dashboard-v2-header .user-dropdown-menu.show {
	display: block;
}

.dashboard-v2-header .user-dropdown-menu .dropdown-header {
	padding: 0.75rem 1rem;
	background-color: #f8f9fa;
	border-bottom: 1px solid #e9ecef;
	font-size: 0.75rem;
	color: #6c757d;
}

.dashboard-v2-header .user-dropdown-menu .dropdown-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 1rem;
	color: #212529;
	text-decoration: none;
	font-size: 0.875rem;
}

.dashboard-v2-header .user-dropdown-menu .dropdown-item:hover {
	background-color: #f8f9fa;
}

.dashboard-v2-header .user-dropdown-menu .dropdown-item i {
	width: 1rem;
	text-align: center;
	color: #6c757d;
}

.dashboard-v2-header .user-dropdown-menu .dropdown-divider {
	height: 1px;
	background-color: #e9ecef;
	margin: 0;
}

/* ==============================================
   Part 3: Page Background & Content Area
   ============================================== */

.dashboard-v2 {
	min-height: 100vh;
}

.dashboard-v2 #content-wrapper {
	background-color: var(--nxtgen-bg);
	padding: 0;
}

.dashboard-v2-main {
	flex: 1;
	padding: 1rem;
	overflow-y: auto;
	position: relative;
	min-height: calc(100vh - 60px); /* Fill viewport minus header height */
}

/* Shift sign on and visitor sign in controls - vertical centering within main content */
.dashboard-v2-main .shift-sign-on-controls,
.dashboard-v2-main .visitor-sign-in-controls {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	max-width: 400px;
}

/* Big buttons for shift sign on controls */
.dashboard-v2-main .shift-sign-on-controls .btn,
.dashboard-v2-main .visitor-sign-in-controls .btn.btn-block {
	font-size: 18px;
	padding: 25px;
}

/* User controls (sign in forms, shift details, etc.) - centered with constrained width */
.dashboard-v2-main .user-controls {
	max-width: 500px;
	margin: 0 auto;
}

/* Panel styling for user controls */
.dashboard-v2-main .user-controls .panel {
	background: #fff;
	text-align: center;
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
	border-radius: 4px;
}

.dashboard-v2-main .user-controls .panel.narrow-panel {
	max-width: 400px;
	margin: 0 auto;
}

.dashboard-v2-main .user-controls .panel.padded-panel {
	padding: 15px;
}

/* Form styling within user controls */
.dashboard-v2-main .user-controls .form-group {
	text-align: left;
	margin-bottom: 15px;
}

.dashboard-v2-main .user-controls input[type="text"],
.dashboard-v2-main .user-controls input[type="tel"],
.dashboard-v2-main .user-controls input[type="password"] {
	outline: 0;
	background: #f2f2f2;
	border: 0;
	padding: 15px;
	box-sizing: border-box;
	color: #000;
}

/* Modal dialog header and text styling */
.dashboard-v2 .modal-content .modal-header .modal-title {
	color: #808084;
}

.dashboard-v2 .modal-body.user-controls > div:first-child {
	color: #808084;
	margin-bottom: 1rem;
}

.dashboard-v2-main .user-controls .btn,
.dashboard-v2 .modal-body.user-controls .btn {
	text-transform: uppercase;
	padding: 15px 10px;
	font-size: 14px;
	white-space: normal;
	position: relative;
	margin-bottom: 0.5rem;
}

/* Checkbox button - icon on left, text centered */
.dashboard-v2-main .user-controls .checkbox-button,
.dashboard-v2 .modal-body.user-controls .checkbox-button {
	display: flex;
	align-items: center;
}

.dashboard-v2-main .user-controls .checkbox-button i,
.dashboard-v2 .modal-body.user-controls .checkbox-button i {
	position: absolute;
	left: 15px;
}

.dashboard-v2-main .user-controls .checkbox-button span,
.dashboard-v2 .modal-body.user-controls .checkbox-button span {
	flex: 1;
	text-align: center;
}

/* Form group labels - left aligned, grey */
.dashboard-v2-main .user-controls .form-group label,
.dashboard-v2 .modal-body.user-controls .form-group label {
	display: block;
	text-align: left;
	margin-bottom: 0.5rem;
	color: #808084;
}

/* Signed in as text - lighter color */
.dashboard-v2-main .user-controls .signed-in-as {
	font-size: 1.1em;
	margin-bottom: 1rem;
	line-height: 28px;
	color: #808084;
}

.dashboard-v2-main .user-controls .signed-in-as .username {
	font-weight: bold;
}

/* Liveable info box - light blue background */
.dashboard-v2-main #shift-details-form .liveable-info,
.dashboard-v2-main .visitor-sign-in-controls .person-search-info {
	color: #2f6473;
	background-color: #def2f8;
	border-color: #d1edf6;
	border-radius: 0.25rem;
	padding: 0.5rem;
	line-height: 28px;
	margin-bottom: 0.5rem;
}

/* Assign Liveable Modal Dialog Styling */
.dashboard-v2 #assign-liveable-dialog .modal-body .form-group label {
	color: #808084;
}

.dashboard-v2 #assign-liveable-dialog #dynamic-liveable-selection {
	color: #2f6473;
	background-color: #def2f8;
	border-color: #d1edf6;
	border-radius: 0.25rem;
	padding: 0.5rem;
	line-height: 28px;
	margin-bottom: 0.5rem;
}

.dashboard-v2 #assign-liveable-dialog #assign-liveable-list .btn,
.dashboard-v2 #assign-liveable-dialog .current-liveable {
	font-size: 18px;
	padding: 25px;
	margin-bottom: 0.5rem;
}

/* Page header with breadcrumb */
.dashboard-v2-main .page-header {
	background-color: #00aeef;
	color: #fff;
	padding: 10px;
	margin: -1rem -1rem 1rem -1rem; /* Extend to edges of main content area */
	overflow: hidden; /* Contain floated children */
}

/* Hide page header when it has no meaningful content */
.dashboard-v2-main .page-header:empty,
.dashboard-v2-main .page-header:not(:has(.page-nav-root, .page-nav-breadcrumb *, .input-group *)) {
	display: none;
}

/* Page navigation (left side) */
.dashboard-v2-main .page-header .page-nav {
	float: left;
}

.dashboard-v2-main .page-header .page-nav-root {
	font-weight: bold;
	font-size: 1.3em;
	margin-right: 10px;
}

.dashboard-v2-main .page-header .page-nav-breadcrumb {
	font-size: 1.2em;
}

.dashboard-v2-main .page-header .page-nav i {
	margin-right: 7px;
}

.dashboard-v2-main .page-header a {
	color: #FFF;
}

.dashboard-v2-main .page-header a:hover {
	color: #e4701e;
}

.dashboard-v2-main .page-header a.selected-nav-item {
	font-weight: bolder;
	text-decoration: underline;
}

/* Generated at timestamp (right side) */
.dashboard-v2-main .page-header .generated-at {
	clear: both;
	float: right;
	font-size: 1.0em;
}

/* Header controls / input group (right side) */
.dashboard-v2-main .page-header .input-group {
	display: block;
	float: right;
	text-align: right;
	width: auto;
}

.dashboard-v2-main .page-header .input-group div {
	display: inline-block;
	margin: 0;
}

.dashboard-v2-main .page-header .input-group div.row {
	display: block;
	text-align: right;
}

.dashboard-v2-main .page-header .input-group div label {
	text-align: right;
}

.dashboard-v2-main .page-header .input-group button {
	margin-bottom: 4px;
}

.dashboard-v2-main .page-header .input-group input:not([type="submit"]),
.dashboard-v2-main .page-header .input-group select {
	line-height: 20px;
	color: #808084;
}

.dashboard-v2-main .page-header .input-group .dropdown-select {
	text-align: initial;
	z-index: 999;
}

/* Mobile row items in header */
.dashboard-v2-main .page-header .input-group .mobile-row {
	display: inline-block;
	margin: 0 5px;
}

.dashboard-v2-main .page-header .input-group .mobile-row label {
	margin-right: 5px;
}

/* Form group in header */
.dashboard-v2-main .page-header .input-group .form-group {
	display: inline-block;
	margin: 0 5px;
}

.dashboard-v2-main .page-header .input-group .form-group label {
	margin: 0 5px 0 0;
	white-space: nowrap;
}

/* Daterangepicker in page header */
.dashboard-v2-main .page-header .daterangepicker-input {
	background: #fff;
	color: #333;
	cursor: pointer;
	padding: 5px 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
}

/* Community map page - full screen map layout */
.community-map-page.dashboard-v2 .sidebar {
	display: none;
}

.community-map-page.dashboard-v2 .dashboard-v2-header .hamburger-btn {
	display: none;
}

.community-map-page .dashboard-v2-main .page-header {
	display: none;
}

.community-map-page .dashboard-v2-main {
	padding: 0;
}

.community-map-page section.community-map {
	height: 100%;
}

.community-map-page #floorplan-container {
	height: 100%;
}

/* Clearfix for floated children - required for pages that use floating layouts */
/* Exclude grid containers, dashboard columns, flex containers, and report containers */
.dashboard-v2-main div:not(.grid, .pre-wrap, .dashboard, .dashboard-column, .column-header, .report, .certified-community-card, .certified-community-header):before,
.dashboard-v2-main div:not(.grid, .pre-wrap, .dashboard, .dashboard-column, .column-header, .report, .certified-community-card, .certified-community-header):after {
	content: " ";
	display: table;
}

.dashboard-v2-main div:not(.dashboard, .dashboard-column, .column-header, .report, .certified-community-card, .certified-community-header):after {
	clear: both;
}

/* Button container (used on calendar and other pages) */
.dashboard-v2-main div.btn-container {
	margin: 5px;
	padding: 5px;
}

/* Page header links (used on list pages like residents) */
.dashboard-v2-main div.left {
	float: left;
}

.dashboard-v2-main div.right {
	float: right;
}

.dashboard-v2-main div.page-header-links div.left {
	text-align: left;
}

.dashboard-v2-main div.page-header-links div.right {
	text-align: right;
}

.dashboard-v2-main div.page-header-links div.right > * {
	/* negative margin on the left to eliminate whitespace added from newlines between elements */
	margin: 4px 4px 4px -3px;
}

.dashboard-v2-main div.page-header-links div.left > * {
	/* negative margin on the right to eliminate whitespace added from newlines between elements */
	margin: 4px -3px 4px 4px;
}

/* ==============================================
   Part 4: Responsive Adjustments
   ============================================== */

/* Mobile/tablet (below 1024px) - sidebar hidden, hamburger menu */
@media (max-width: 1023px) {
	.dashboard-v2 .sidebar {
		position: fixed;
		left: 0;
		top: 0;
		height: 100vh;
		z-index: 1000;
		transform: translateX(-100%);
		transition: transform 0.3s ease-in-out;
	}

	.dashboard-v2 .sidebar.show {
		transform: translateX(0);
	}

	/* Mobile overlay when sidebar is open */
	.dashboard-v2 .sidebar-overlay {
		position: fixed;
		inset: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 999;
		display: none;
	}

	.dashboard-v2 .sidebar-overlay.show {
		display: block;
	}

	/* Mobile subnav fixes: solid background, full width, contained within sidebar */
	.dashboard-v2 .sidebar .nav-item .nav-link {
		width: 100%;
	}

	.dashboard-v2 .sidebar .nav-item .collapse,
	.dashboard-v2 .sidebar .nav-item .collapsing {
		position: static !important;
		width: 100%;
	}

	.dashboard-v2 .sidebar .collapse-inner {
		background-color: var(--nxtgen-primary-dark);
		border-radius: 0;
		width: 100%;
	}

	/* Adjust facility logo for smaller screens */
	.dashboard-v2-header .facility-logo {
		padding: 0.375rem 0.75rem;
		font-size: 0.875rem;
	}

	.dashboard-v2-header .facility-logo img {
		max-height: 32px;
		max-width: 140px;
	}

	.dashboard-v2-header .facility-logo span {
		max-width: 120px;
	}

	/* Smaller icon buttons on mobile */
	.dashboard-v2-header .icon-btn {
		width: 36px;
		height: 36px;
	}

	.dashboard-v2-header .icon-btn i {
		font-size: 1rem;
	}
}

/* Page header responsive - mobile/tablet controls */
@media (max-width: 585px) {
	.dashboard-v2-main .page-header .input-group {
		width: 100%;
	}

	.dashboard-v2-main .page-header .input-group button {
		margin-bottom: 2px;
	}

	.dashboard-v2-main .page-header .input-group .mobile-row {
		display: block;
		text-align: right;
	}
}

/* Page header links responsive - small screens */
@media (max-width: 481px) {
	.dashboard-v2-main div.page-header-links div.left,
	.dashboard-v2-main div.page-header-links div.right {
		display: block;
		float: none;
		text-align: left;
	}

	.dashboard-v2-main div.page-header-links div.left > *,
	.dashboard-v2-main div.page-header-links div.right > * {
		display: block;
		margin: 4px;
	}

	.dashboard-v2-main div.page-header-links div button {
		width: 100%;
	}
}

/* Large screens (1024px+) - sidebar always visible */
@media (min-width: 1024px) {
	/* Hide mobile hamburger button on desktop */
	.dashboard-v2-header .hamburger-btn {
		display: none;
	}

	/* More padding in header on larger screens */
	.dashboard-v2-header {
		padding: 0.75rem 1.5rem;
	}

	/* Larger facility logo */
	.dashboard-v2-header .facility-logo img {
		max-height: 48px;
		max-width: 220px;
	}

	.dashboard-v2-header .facility-logo span {
		max-width: 280px;
	}

	/* Override SB Admin 2 toggled sidebar behavior - keep sidebar always expanded on desktop */
	.dashboard-v2 .sidebar.toggled {
		width: 16rem !important;
		overflow: visible;
	}

	.dashboard-v2 .sidebar.toggled .sidebar-brand-text,
	.dashboard-v2 .sidebar.toggled .nav-item .nav-link span,
	.dashboard-v2 .sidebar.toggled .dashboard-link span {
		display: inline !important;
		opacity: 1 !important;
	}

	/* Prevent collapse menus from being positioned absolutely when toggled */
	.dashboard-v2 .sidebar.toggled .collapse {
		position: static !important;
	}
}

/* ==============================================
   Part 5: Accessibility Enhancements
   ============================================== */

/* Skip to main content link */
.dashboard-v2 .skip-link {
	position: absolute;
	top: -40px;
	left: 0;
	background: var(--nxtgen-primary);
	color: #fff;
	padding: 0.5rem 1rem;
	z-index: 9999;
	transition: top 0.2s;
}

.dashboard-v2 .skip-link:focus {
	top: 0;
}

/* Focus visible styles for keyboard navigation */
.dashboard-v2 .sidebar .nav-link:focus-visible,
.dashboard-v2 .sidebar .collapse-item:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -2px;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
	.dashboard-v2-header .icon-btn.alert-active {
		animation: none;
	}

	.dashboard-v2 .sidebar {
		transition: none;
	}
}

/* ==============================================
   Part 6: Scheduled Checks Widget
   ============================================== */

.dashboard-v2 .scheduled-checks-widget-list {
	background-color: #FFF;
	box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.46);
	color: #000;
	display: none;
	font-size: 0.9em;
	max-height: 550px;
	overflow-y: auto;
	padding: 5px !important;
	position: absolute;
	right: 5px;
	text-align: left;
	top: 70px; /* Adjusted for dashboard-v2 header height */
	width: 370px;
	z-index: 1000;
}

.dashboard-v2 .scheduled-checks-widget-list .header {
	font-size: 1.1em;
	margin-bottom: 5px;
}

.dashboard-v2 .scheduled-checks-widget-list .header label {
	font-weight: bold;
	font-size: 1.1em;
}

.dashboard-v2 .scheduled-checks-widget-list .toggle-mark-absent-controls {
	margin-bottom: 5px;
}

.dashboard-v2 .scheduled-checks-widget-list .current-check-items div.check-item {
	padding: 5px 2px;
	overflow: hidden; /* Contain floated children */
}

.dashboard-v2 .scheduled-checks-widget-list .current-check-items div.check-item:nth-of-type(odd) {
	background: #F3F3F3;
}

.dashboard-v2 .scheduled-checks-widget-list .current-check-items div.check-item .person-details {
	float: left;
	line-height: 20px;
}

.dashboard-v2 .scheduled-checks-widget-list .current-check-items div.check-item .person-details .person-name {
	font-size: 1.1em;
	font-weight: bold;
}

.dashboard-v2 .scheduled-checks-widget-list .current-check-items div.check-item .check-due {
	float: left;
	margin-right: 5px;
	width: 40px;
}

.dashboard-v2 .scheduled-checks-widget-list .current-check-items div.check-item button {
	float: right;
	height: 40px;
}

.dashboard-v2 .scheduled-checks-widget-list .current-check-items div.check-item.warning {
	color: #C00;
}

.dashboard-v2 div.scheduled-checks-care-groups {
	margin-bottom: 10px;
}

/* Widget close button (shared by scheduled checks and resident daily check-ins) */
.dashboard-v2 div.header i.fa-times {
	cursor: pointer;
	float: right;
	font-size: 1.3em;
	padding: 2px 6px 2px 0;
}

/* Scheduled Checks Mobile Styles */
@media (max-width: 1023px) {
	.dashboard-v2 .scheduled-checks-widget-list {
		width: 98%;
		margin: 0 auto;
		right: 1%;
		font-size: 1.1em;
	}

	.dashboard-v2 .scheduled-checks-widget-list div.current-check-items div.check-item {
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.dashboard-v2 .scheduled-checks-widget-list .current-check-items div.check-item button {
		font-size: 1.0em;
		height: 70px;
	}

	.dashboard-v2 .scheduled-checks-widget-list div.person-details {
		width: 180px;
	}
}

/* ==============================================
   Part 7: Public Page Layout (non-authenticated)
   ============================================== */

.dashboard-v2.public-page {
	background: linear-gradient(135deg, var(--nxtgen-primary) 0%, var(--nxtgen-primary-dark) 100%);
	min-height: 100vh;
}

.dashboard-v2.public-page .public-page-container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	max-width: 500px;
	margin: 0 auto;
	padding: 20px;
}

.dashboard-v2.public-page .public-page-header {
	text-align: center;
	padding: 20px 0 30px 0;
}

.dashboard-v2.public-page .public-page-header .logo-link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: #fff;
}

.dashboard-v2.public-page .public-page-header .logo-link img {
	margin-right: 10px;
}

.dashboard-v2.public-page .public-page-header .logo-text {
	font-size: 1.5rem;
	font-weight: 600;
	color: #fff;
}

.dashboard-v2.public-page .public-page-main {
	flex: 1;
}

.dashboard-v2.public-page .public-page-main .card {
	border: none;
	border-radius: 8px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.dashboard-v2.public-page .public-page-main .card-body {
	padding: 30px;
}

.dashboard-v2.public-page .public-page-main h1,
.dashboard-v2.public-page .public-page-main h2 {
	color: var(--nxtgen-primary);
	margin-bottom: 20px;
}

.dashboard-v2.public-page .public-page-main .form-group label {
	font-weight: 500;
	color: #333;
}

.dashboard-v2.public-page .public-page-main .btn-primary {
	background-color: var(--nxtgen-primary);
	border-color: var(--nxtgen-primary);
}

.dashboard-v2.public-page .public-page-main .btn-primary:hover {
	background-color: var(--nxtgen-primary-dark);
	border-color: var(--nxtgen-primary-dark);
}

.dashboard-v2.public-page .public-page-footer {
	text-align: center;
	padding: 20px 0;
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.85rem;
}

/* Public page panel styles - ensure proper sizing */
.dashboard-v2.public-page .public-page-main .panel {
	font-size: 1rem;
}

.dashboard-v2.public-page .public-page-main .panel h1.panel-title {
	font-size: 1.6em;
}

.dashboard-v2.public-page .public-page-main .panel .message {
	font-size: 1rem;
}

.dashboard-v2.public-page .public-page-main .panel .message.error {
	width: 100%;
}

/* ==============================================
   Part 8: Dashboard Tiles/Bricks
   Card-like styling to match shadcn/ui Card component
   TODO: These tiles will be migrated to React islands
   See issues: #6980, #6984, #6993-#6998, #7000, #7001, #7003
   ============================================== */

/* Dashboard container - 3 column grid layout */
.dashboard-v2 .dashboard {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 1rem;
	padding: 1rem 0;
}

@media (min-width: 768px) {
	.dashboard-v2 .dashboard {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.dashboard-v2 .dashboard {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Staff Dashboard - single column, 66% centered */
.dashboard-v2 .dashboard.staff-dashboard {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	padding: 1rem 0;
}

.dashboard-v2 .dashboard.staff-dashboard section.tile {
	width: 66%;
	max-width: 600px;
}

@media (max-width: 768px) {
	.dashboard-v2 .dashboard.staff-dashboard section.tile {
		width: 100%;
	}
}

/* Dashboard columns */
.dashboard-v2 .dashboard .dashboard-column {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* Column headers */
.dashboard-v2 .dashboard .column-header {
	color: #fff;
	padding: 0.75rem;
	border-radius: 0.375rem;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	text-align: center;
}

.dashboard-v2 .dashboard .column-header h2 {
	font-size: 1rem;
	font-weight: 500;
	margin: 0;
	color: #fff;
}

/* Critical Workflow column - primary blue */
.dashboard-v2 .dashboard .column-header.critical-workflow {
	background-color: var(--nxtgen-primary);
}

/* Staff Performance column - accent blue */
.dashboard-v2 .dashboard .column-header.staff-performance {
	background-color: var(--nxtgen-accent);
}

/* Financial Optimization column - gray */
.dashboard-v2 .dashboard .column-header.financial-optimization {
	background-color: #808084;
}

/* Base tile styles - card-like appearance, horizontal layout */
.dashboard-v2 section.tile {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	display: flex;
	flex-direction: column;
	height: auto;
	min-height: auto;
	width: 100%;
	position: relative;
	transition: box-shadow 0.2s ease;
	padding: 1.5rem; /* p-6 in Tailwind = 24px */
}

.dashboard-v2 section.tile:hover {
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Wide tile for community m-factor with badge */
.dashboard-v2 section.tile.wide-tile {
	grid-column: span 2;
}

/* Tile link styles */
.dashboard-v2 section.tile.link a {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
	text-decoration: none;
	color: inherit;
}

.dashboard-v2 section.tile.link a:hover {
	text-decoration: none;
}

.dashboard-v2 section.tile.link a::after {
	display: none;
}

/* Tile header/title - placed at top of card */
.dashboard-v2 section.tile h2 {
	font-size: 0.875rem;
	font-weight: 500;
	color: #4b5563;
	text-align: center;
	padding: 0;
	margin: 0 0 0.75rem 0;
}

/* Tile contents - horizontal layout like mock */
.dashboard-v2 section.tile .brick-tile-contents {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 0;
	color: #6b7280;
}

/* Content area below title - horizontal layout */
.dashboard-v2 section.tile .brick-tile-contents > *:not(h2):not(.tooltip-icon):not(.brick-exclamation):not(.care-goal):not(.click-for-details) {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

/* Icon styling within tiles - left side */
.dashboard-v2 section.tile i.icon {
	color: #9ca3af;
	font-size: 2.5rem;
	margin: 0;
	flex-shrink: 0;
}

.dashboard-v2 section.tile img.icon {
	height: 50px;
	width: 50px;
	margin: 0;
	flex-shrink: 0;
}

/* Stats container in tiles - right side */
.dashboard-v2 section.tile div.stats-container {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.5rem;
	padding: 0;
	margin: 0;
	flex: 1;
}

.dashboard-v2 section.tile div.stats-container img {
	height: 50px;
}

.dashboard-v2 section.tile div.stats-container .stats {
	text-align: right;
}

/* Care goal and click for details */
.dashboard-v2 section.tile .care-goal,
.dashboard-v2 section.tile .click-for-details {
	font-size: 0.75rem;
	color: #9ca3af;
	margin-top: 0.5rem;
	text-align: center;
}

/* Exclamation icon */
.dashboard-v2 section.tile i.brick-exclamation {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	color: #f59e0b;
	font-size: 1rem;
}

/* Tooltip icon */
.dashboard-v2 section.tile .tooltip-icon {
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
	color: #9ca3af;
	font-size: 0.875rem;
}

/* Disabled tile state */
.dashboard-v2 section.tile.disabled {
	opacity: 0.5;
	pointer-events: none;
}

/* Wide tile inner layout */
.dashboard-v2 section.tile.wide-tile .wide-tile-contents {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
	padding: 1rem;
}

.dashboard-v2 section.tile.wide-tile .left-tile,
.dashboard-v2 section.tile.wide-tile .right-tile {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Certified community status badge in wide tile */
.dashboard-v2 section.tile .certified-community-status-badge img {
	width: 100px;
}

/* Certified Community Status Card (wraps header + tabs) */
.dashboard-v2 .certified-community-card {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	margin-bottom: 1rem;
}

/* Certified Community Status Header */
.dashboard-v2 .certified-community-header {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
	gap: 1rem;
	padding: 1rem;
	color: inherit;
}


/* Left side - Certified Community Status (links to care scorecard) */
.dashboard-v2 .certified-community-header .certified-left {
	display: flex;
	align-items: center;
	gap: 1rem;
	text-decoration: none;
	color: inherit;
	transition: opacity 0.2s ease;
}

.dashboard-v2 .certified-community-header .certified-left:hover {
	opacity: 0.8;
	text-decoration: none;
}

.dashboard-v2 .certified-community-header .certified-badge-container {
	flex-shrink: 0;
}

.dashboard-v2 .certified-community-header .certified-community-status-badge img {
	width: 80px;
	height: 80px;
}

.dashboard-v2 .certified-community-header .certified-text {
	display: flex;
	flex-direction: column;
}

.dashboard-v2 .certified-community-header .certified-title {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--nxtgen-primary);
	margin: 0;
}

.dashboard-v2 .certified-community-header .certified-subtitle {
	font-size: 1.25rem;
	font-weight: 500;
	color: #4b5563;
	margin: 0;
}

/* Right side - Intelligence Report (links to intelligence report) */
.dashboard-v2 .certified-community-header .intelligence-report-right {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-left: auto;
	text-decoration: none;
	color: inherit;
	transition: opacity 0.2s ease;
}

.dashboard-v2 .certified-community-header .intelligence-report-right:hover {
	opacity: 0.8;
	text-decoration: none;
}

/* Responsive: stack tiles on smaller screens */
@media (max-width: 767px) {
	.dashboard-v2 .dashboard {
		grid-template-columns: 1fr;
	}

	.dashboard-v2 section.tile.wide-tile {
		grid-column: span 1;
	}

	.dashboard-v2 section.tile.wide-tile .wide-tile-contents {
		flex-direction: column;
	}

	/* Hide certified community text on mobile, show only badge */
	.dashboard-v2 .certified-community-header .certified-text {
		display: none;
	}

	.dashboard-v2 .certified-community-header {
		justify-content: center;
	}
}

/* Date picker between certified header and dashboard columns */
.dashboard-v2 .dashboard-date-picker {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.dashboard-v2 .dashboard-date-picker .daterangepicker-input {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 0.375rem;
	padding: 0.5rem 0.75rem;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* ==============================================
   Part 9: Report Page Tiles/Cards
   Override v1 dashboard styling for inner report pages
   ============================================== */

/* Report container - use flexbox for consistent spacing */
.dashboard-v2 div.report {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

/* Inner wrapper divs in reports - also need flex layout */
.dashboard-v2 div.report > div {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	width: 100%;
}

/* Disable clearfix pseudo-elements on report inner divs */
.dashboard-v2 div.report > div:before,
.dashboard-v2 div.report > div:after {
	display: none;
}

/* Base section styling - card appearance instead of blue border */
.dashboard-v2 section {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	padding: 1rem;
	float: none; /* Override v1 float */
}

/* Staff Performance 360 view container */
.dashboard-v2 #view360-container {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	min-height: 450px;
}

/* Summary tiles on report pages - first one (Overview) is double-wide */
.dashboard-v2 section.summary-tile {
	width: calc(33.33% - 0.67rem);
	min-height: 250px;
	position: relative;
}


/* ==============================================
   Part 10: Gauges and Canvas Containers
   ============================================== */

div.gauge-legend {
	text-align: center;
}

div.gauge-legend div {
	display: inline-block;
	width: 120px;
	margin-top: 10px;
	text-align: left;
}

div.canvas-container {
	text-align: center;
	margin: 0 auto;
}

section.tile div.brick-gauge-content {
	margin-top: 5px;
	padding: 0px 20px;
}

section.tile div.canvas-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	justify-items: center;
}

section.tile div.canvas-container div.display-value {
	font-size: 2em;
	line-height: 1.1em;
}

section.summary-tile div.canvas-container {
	position: absolute;
	right: 20px;
	top: 15px;
}

section.summary-tile div.canvas-container canvas {
	margin: 0 auto;
}

section.summary-tile div.canvas-container div.display-value {
	margin-top: -15px;
}

section.summary-tile div.canvas-container div.display-value,
section.summary-tile div.canvas-container div.sub-display-value {
	font-size: 0.9em;
	line-height: 16px;
}

.dashboard-v2 section.summary-tile h2 {
	color: var(--nxtgen-primary);
	font-size: 1.125rem;
	font-weight: 600;
	margin: 0 0 0.75rem 0;
	text-align: center;
}

.dashboard-v2 section.summary-tile.link a {
	color: inherit;
	text-decoration: none;
}

.dashboard-v2 section.summary-tile.link a:hover {
	text-decoration: none;
}

/* Graph tiles on report pages */
.dashboard-v2 section.graph-tile {
	width: calc(33.33% - 0.67rem);
	height: 250px;
	position: relative;
}

.dashboard-v2 section.graph-tile-8 {
	width: calc(66.66% - 0.5rem);
	height: 250px;
	position: relative;
}

/* Medium-width graph tiles (4 grid units = 33% base) */
.dashboard-v2 section.graph-tile-md-4 {
	width: calc(33.33% - 0.67rem);
	height: 250px;
	position: relative;
}

/* Large-width graph tiles (8 grid units = 66% base) */
.dashboard-v2 section.graph-tile-lg-8 {
	width: calc(66.66% - 0.5rem);
	height: 250px;
	position: relative;
}

/* Tall graph tiles (for occupancy charts, etc.) */
.dashboard-v2 section.tall-graph-tile {
	height: 750px;
}

/* Large/expanded graph tile (toggled by graph-expander click) */
.dashboard-v2 section.graph-tile.large-graph-tile {
	width: 100%;
	height: 500px;
}

/* Full-width tiles */
.dashboard-v2 section.full-width,
.dashboard-v2 .full-width {
	width: 100%;
	min-height: inherit;
}

/* Care trend tiles */
.dashboard-v2 section.summary-tile.care-trend table {
	border-collapse: separate;
	border-spacing: 15px 0px;
	margin: 0 auto;
	text-align: left;
	width: 100%;
}

.dashboard-v2 section.summary-tile.care-trend dt {
	font-weight: normal;
}

.dashboard-v2 section.graph-tile h2 {
	color: var(--nxtgen-primary);
	font-size: 1rem;
	font-weight: 600;
	margin: 0 0 0.5rem 0;
	text-align: center;
}

/* Info table sections - full width, clear floats */
.dashboard-v2 section.info-table,
.dashboard-v2 .info-table {
	width: 100%;
	overflow: auto;
	min-height: 0;
	padding: 0;
}

.dashboard-v2 .info-table .info-table-header {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--nxtgen-primary);
	padding: 1rem;
	border-bottom: 1px solid #e5e7eb;
}

/* Care goal styling */
.dashboard-v2 section.summary-tile div.care-goal,
.dashboard-v2 section.tile div.care-goal {
	font-size: 0.75rem;
	color: #6b7280;
	text-align: center;
	margin-top: 0.5rem;
}

/* Definition list styling in summary tiles */
.dashboard-v2 section.summary-tile dl {
	margin-bottom: 0.5rem;
}

.dashboard-v2 section.summary-tile dt {
	font-weight: 600;
	color: #374151;
}

.dashboard-v2 section.summary-tile dd {
	color: #6b7280;
}

/* Comparison gauge layout (Community M-Factor page with date comparison) */
.dashboard-v2 section.summary-tile div.summary-header-comparison div.label {
	margin-top: 10px;
	margin-bottom: -15px;
	color: #cfcfcf;
	text-align: center;
	float: left;
	width: 33%;
}

.dashboard-v2 section.summary-tile div.summary-header-comparison div.comparison-gauges > div {
	float: left;
	width: 33%;
}

.dashboard-v2 section.summary-tile div.summary-header-comparison div.comparison-gauges div.change {
	padding: 20px 0px 20px 0px;
	font-size: 23px;
	margin-top: 23px;
	text-align: center;
}

.dashboard-v2 section.summary-tile div.summary-header-comparison div.canvas-container {
	margin-top: 10px;
	margin-bottom: 10px;
	position: static;
}

.dashboard-v2 section.summary-tile div.summary-header-comparison div.canvas-container div.display-value,
.dashboard-v2 section.summary-tile div.summary-header-comparison div.canvas-container div.sub-display-value {
	font-size: 1.0em;
}

/* Responsive adjustments for report tiles */
@media (max-width: 1199px) {
	.dashboard-v2 section.graph-tile-md-4,
	.dashboard-v2 section.graph-tile-lg-8 {
		width: calc(50% - 0.5rem);
	}
}

@media (max-width: 1023px) {
	.dashboard-v2 section.summary-tile {
		width: calc(50% - 0.5rem);
	}

	.dashboard-v2 section.graph-tile,
	.dashboard-v2 section.graph-tile-8 {
		width: 100%;
	}

	.dashboard-v2 section.graph-tile-md-4,
	.dashboard-v2 section.graph-tile-lg-8 {
		width: calc(50% - 0.5rem);
	}
}

@media (max-width: 767px) {
	.dashboard-v2 section.summary-tile {
		width: 100%;
	}

	.dashboard-v2 section.graph-tile,
	.dashboard-v2 section.graph-tile-8,
	.dashboard-v2 section.graph-tile-md-4,
	.dashboard-v2 section.graph-tile-lg-8,
	.dashboard-v2 section.tall-graph-tile {
		width: 100%;
	}

	.dashboard-v2 section.tall-graph-tile {
		height: 500px;
	}
}

/* ==============================================
   Error Page Styles
   ============================================== */

.dashboard-v2 .error-container {
	color: #374151;
	margin: 0 auto;
	text-align: center;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	padding: 2rem;
	max-width: 500px;
}

.dashboard-v2 .error-container.error {
	margin-top: 100px;
}

.dashboard-v2 .error-container h1 {
	font-size: 1.5rem;
	font-weight: normal;
	line-height: 1.1;
}

.dashboard-v2 .error-container p {
	font-size: 1rem;
	margin-top: 5px;
}

.dashboard-v2 .error-container #error-details {
	color: #000;
	text-align: left;
	display: none;
}

.dashboard-v2 .error-container #error-details #error-variables {
	display: none;
}

/* ==============================================
   React Island Brick Styles
   Dashboard 2.0 Brick Template System
   ============================================== */

/* Progress bar styling for React island bricks */
.dashboard-v2 section.tile .progress {
	background-color: #e5e7eb;
	border-radius: 9999px;
	overflow: hidden;
}

.dashboard-v2 section.tile .progress-bar {
	border-radius: 9999px;
}

/* Comparison layout styles */
.dashboard-v2 section.tile .progress-comparison {
	width: 100%;
}

/* Needs attention flag animation */
.dashboard-v2 section.tile .fa-flag.text-danger {
	animation: pulse-attention 2s infinite;
}

@keyframes pulse-attention {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
}

/* Brick icon container for React islands */
.dashboard-v2 section.tile .brick-icon {
	flex-shrink: 0;
}

/* React island brick content layout - exclude absolutely positioned elements */
.dashboard-v2 section.tile[data-island] > div:not(.position-absolute) {
	width: 100%;
}

.dashboard-v2 section.tile[data-island] .brick-content-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	flex: 1;
}

/* Disable clearfix pseudo-elements on all React island containers */
.dashboard-v2 section.tile[data-island] div::before,
.dashboard-v2 section.tile[data-island] div::after {
	display: none;
}

/* ==============================================
   Intelligence Report Card (React Island)
   ============================================== */

.dashboard-v2 .intelligence-report-card {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
}

.dashboard-v2 .intelligence-report-card .ir-header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}

.dashboard-v2 .intelligence-report-card .ir-title {
	font-size: 1.125rem;
	font-weight: 500;
	color: #4b5563;
}

.dashboard-v2 .intelligence-report-card .ir-icon {
	color: var(--nxtgen-accent);
	font-size: 1.5rem;
}

.dashboard-v2 .intelligence-report-card .ir-details {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.dashboard-v2 .intelligence-report-card .ir-latest {
	font-size: 0.875rem;
	color: #6b7280;
}

.dashboard-v2 .intelligence-report-card .ir-latest-value {
	color: var(--nxtgen-accent);
}

/* Status badge overrides - use Bootstrap badge-pill as base */
.dashboard-v2 .intelligence-report-card .badge-pill {
	padding: 6px 8px;
	font-size: 80%;
}

.dashboard-v2 .intelligence-report-card .badge-pill.badge-success {
	background-color: #dcfce7;
	color: #166534;
	border: 1px solid #bbf7d0;
}

.dashboard-v2 .intelligence-report-card .badge-pill.badge-warning {
	background-color: #fefce8;
	color: #a16207;
	border: 1px solid #fde047;
}

/* ==============================================
   Highlights / Actionable Insights Toggle
   ============================================== */

.dashboard-v2 .insights-toggle-section {
	padding: 0 1rem 1rem 1rem;
}

/* Segmented control container */
.dashboard-v2 .insights-toggle {
	display: flex;
	width: 100%;
	background-color: #f4f4f5;
	border-radius: 0.375rem;
	padding: 0.25rem;
	margin-bottom: 1rem;
}

.dashboard-v2 .insights-toggle .nav-item {
	flex: 1;
}

.dashboard-v2 .insights-toggle .nav-link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.5rem 0.75rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: #71717a;
	background-color: transparent;
	border: none;
	border-radius: 0.25rem;
	transition: all 0.15s ease-in-out;
}

.dashboard-v2 .insights-toggle .nav-link:hover {
	color: #52525b;
}

.dashboard-v2 .insights-toggle .nav-link.active {
	background-color: #fff;
	color: #18181b;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.dashboard-v2 .insights-toggle .nav-link i {
	font-size: 1rem;
}

/* Placeholder content */
.dashboard-v2 .insights-placeholder {
	padding: 2rem;
	text-align: center;
	background-color: #f9fafb;
	border-radius: 0.375rem;
	border: 1px dashed #e5e7eb;
}

.dashboard-v2 .insights-placeholder p {
	margin: 0;
}

/* ==============================================
   Highlights Grid & Cards
   ============================================== */

.dashboard-v2 .highlights-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1rem;
}

.dashboard-v2 .highlights-empty {
	padding: 2rem;
	text-align: center;
	background-color: #f9fafb;
	border-radius: 0.375rem;
	border: 1px dashed #e5e7eb;
}

.dashboard-v2 .highlights-empty p {
	margin: 0;
}

.dashboard-v2 .highlight-card-link {
	text-decoration: none;
	color: inherit;
	display: block;
}

.dashboard-v2 .highlight-card-link:hover {
	text-decoration: none;
}

.dashboard-v2 .highlight-card-link:hover .highlight-card {
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	transform: translateY(-1px);
}

.dashboard-v2 .highlight-card {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 1rem;
	border-radius: 0.5rem;
	border: 1px solid transparent;
	transition: box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out;
	height: 100%;
}

.dashboard-v2 .highlight-icon {
	flex-shrink: 0;
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}

.dashboard-v2 .highlight-icon i {
	font-size: 1.125rem;
}

.dashboard-v2 .highlight-content {
	flex: 1;
	min-width: 0;
}

.dashboard-v2 .highlight-title {
	font-size: 0.875rem;
	font-weight: 600;
	margin: 0 0 0.25rem 0;
}

.dashboard-v2 .highlight-description {
	font-size: 0.8125rem;
	color: #374151;
	margin: 0;
	line-height: 1.4;
}

/* Blue highlight (Community Status) */
.dashboard-v2 .highlight-blue {
	background-color: #eff6ff;
	border-color: #dbeafe;
}

.dashboard-v2 .highlight-icon-blue {
	background-color: #dbeafe;
}

.dashboard-v2 .highlight-icon-blue i {
	color: #2563eb;
}

.dashboard-v2 .highlight-blue .highlight-title {
	color: #1e40af;
}

/* Green highlight (Response Time) */
.dashboard-v2 .highlight-green {
	background-color: #f0fdf4;
	border-color: #dcfce7;
}

.dashboard-v2 .highlight-icon-green {
	background-color: #dcfce7;
}

.dashboard-v2 .highlight-icon-green i {
	color: #16a34a;
}

.dashboard-v2 .highlight-green .highlight-title {
	color: #166534;
}

/* Purple highlight (Scheduled Checks, Equipment) */
.dashboard-v2 .highlight-purple {
	background-color: #faf5ff;
	border-color: #f3e8ff;
}

.dashboard-v2 .highlight-icon-purple {
	background-color: #f3e8ff;
}

.dashboard-v2 .highlight-icon-purple i {
	color: #9333ea;
}

.dashboard-v2 .highlight-purple .highlight-title {
	color: #6b21a8;
}

/* Pink highlight (Birthday) */
.dashboard-v2 .highlight-pink {
	background-color: #fdf2f8;
	border-color: #fce7f3;
}

.dashboard-v2 .highlight-icon-pink {
	background-color: #fce7f3;
}

.dashboard-v2 .highlight-icon-pink i {
	color: #db2777;
}

.dashboard-v2 .highlight-pink .highlight-title {
	color: #9d174d;
}

/* Teal highlight (Activity) */
.dashboard-v2 .highlight-teal {
	background-color: #f0fdfa;
	border-color: #ccfbf1;
}

.dashboard-v2 .highlight-icon-teal {
	background-color: #ccfbf1;
}

.dashboard-v2 .highlight-icon-teal i {
	color: #0d9488;
}

.dashboard-v2 .highlight-teal .highlight-title {
	color: #115e59;
}

.dashboard-v2 .highlight-orange {
	background-color: #fff7ed;
	border-color: #fed7aa;
}

.dashboard-v2 .highlight-icon-orange {
	background-color: #fed7aa;
}

.dashboard-v2 .highlight-icon-orange i {
	color: #ea580c;
}

.dashboard-v2 .highlight-orange .highlight-title {
	color: #9a3412;
}