/* Guided Demo App — Custom CSS
   Bootstrap 5.3 handles all standard components via theme.json.
   Custom CSS below is ONLY for elements Bootstrap doesn't provide. */

/* ── Avatar — Bootstrap has no avatar component ─────────────── */
.avatar {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-ms-flex-negative: 0;
	    flex-shrink: 0;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	font-size: 0.75rem;
	font-weight: 600;
}

.avatar.avatar-sm {
	width: 1.75rem;
	height: 1.75rem;
	font-size: 0.625rem;
}

.avatar.avatar-lg {
	width: 3rem;
	height: 3rem;
	font-size: 1rem;
}

/* ── Icon box — square icon container for KPIs / features ──── */
.icon-box {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-ms-flex-negative: 0;
	    flex-shrink: 0;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--bs-border-radius);
	font-size: 1.125rem;
}

.icon-box.icon-box-sm {
	width: 2rem;
	height: 2rem;
	font-size: 0.875rem;
}

.icon-box.icon-box-lg {
	width: 3.5rem;
	height: 3.5rem;
	font-size: 1.25rem;
}

.icon-box.icon-box-xl {
	width: 5rem;
	height: 5rem;
	font-size: 2rem;
}

/* ── Sidebar — sticky desktop, offcanvas handles mobile ────── */
@media (min-width: 992px) {
	#sidebar.offcanvas-lg {
		position: sticky !important;
		top: 0;
		height: 100vh;
		overflow-y: auto;
		scrollbar-width: thin;
	}
}

#sidebar .nav-link {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: 0.625rem;
	border-radius: var(--bs-border-radius-sm);
	font-size: 0.875rem;
	margin: 1px 0.5rem;
	padding: 0.5rem 0.875rem;
}

#sidebar .nav-link i {
	width: 1.25rem;
	text-align: center;
	opacity: 0.55;
}

#sidebar .nav-link:hover:not(.active) {
	background-color: var(--bs-tertiary-bg);
}

#sidebar .nav-link.active i {
	opacity: 1;
}

/* ── Priority indicator ─────────────────────────────────────── */
.priority-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: inline-block;
	-ms-flex-negative: 0;
	    flex-shrink: 0;
}

/* ── Device explorer page ──────────────────────────────────── */
.device-shell {
	max-width: 1440px;
}

.device-stat-card {
	background: -webkit-gradient(linear, left top, left bottom, from(var(--bs-tertiary-bg)), to(var(--bs-body-bg)));
	background: linear-gradient(180deg, var(--bs-tertiary-bg) 0%, var(--bs-body-bg) 100%);
}

.device-kpi-value {
	font-size: clamp(1.25rem, 2vw, 2rem);
	font-weight: 700;
	line-height: 1.1;
	word-break: break-word;
}

.device-empty-state {
	border-style: dashed !important;
	border-width: 2px !important;
	border-color: var(--bs-border-color) !important;
	background-color: var(--bs-body-bg);
}

.device-message-table th,
.device-message-table td {
	white-space: nowrap;
	vertical-align: middle;
}

@media (max-width: 767.98px) {
	.device-message-table th,
	.device-message-table td {
		font-size: 0.875rem;
	}
}


/* ── Bottom Speed Graph Panel ─────────────────────────────── */
.speed-graph-panel {
	z-index: 1040;
	max-height: 300px;
}

.speed-graph-canvas {
	width: 100%;
	height: 220px;
}

.speed-graph-toggle {
	z-index: 1041;
}

@media (max-width: 991.98px) {
	.speed-graph-panel {
		left: 0;
		right: 0;
		max-height: 45vh;
	}
}

/* ── Device map modal — telemetry location preview ─────────── */
.device-map-modal {
	background-color: var(--bs-body-bg);
	min-height: 20rem;
}

.device-route-map-canvas,
.device-map-modal .leaflet-container {
	min-height: 30rem;
}

.device-map-popup {
	min-width: 12rem;
}

@media (max-width: 575.98px) {
	.device-route-map-canvas,
	.device-map-modal .leaflet-container {
		min-height: 22rem;
	}
}

.style1 {}

.style2 {}


/* ── Admin single client page ──────────────────────────────── */
.client-summary-card {
	border-left: 0.25rem solid var(--bs-primary);
}

/* ── Leaflet Map — Fix positioning and sizing issues ────── */
.leaflet-map-container {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 400px;
}

dmx-leaflet-map,
[is="dmx-leaflet-map"] {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.leaflet-container {
	height: 100%;
	width: 100%;
	position: relative;
}

.client-stat-card {
	transition: -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
	-webkit-transition: -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	transition: transform 0.2s ease, box-shadow 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
}

.client-stat-card:hover {
	-webkit-transform: translateY(-2px);
	        transform: translateY(-2px);
	-webkit-box-shadow: var(--bs-box-shadow-sm);
	        box-shadow: var(--bs-box-shadow-sm);
}

.client-section-card {
	height: 100%;
}

.client-empty-state {
	min-height: 12rem;
}

.client-table-wrap {
	max-height: 28rem;
	overflow: auto;
}

/* ── Live tracking page ────────────────────────────────────── */
.live-tracking-shell {
	min-height: calc(100vh - 12rem);
}

.live-device-panel {
	min-height: 100%;
}

.live-device-list {
	max-height: calc(100vh - 18rem);
	overflow-y: auto;
}

.live-map-shell {
	height: clamp(28rem, 70vh, 52rem);
}

.live-map-card {
	min-width: 0;
}

.live-tracking-shell > #live_sidebar_col {
	transition: -webkit-box-flex 0.2s ease, flex 0.2s ease, max-width 0.2s ease;
	-webkit-transition: -webkit-box-flex 0.2s ease, flex 0.2s ease, max-width 0.2s ease;
	-webkit-transition: max-width 0.2s ease, -webkit-box-flex 0.2s ease;
	transition: max-width 0.2s ease, -webkit-box-flex 0.2s ease;
	transition: flex 0.2s ease, max-width 0.2s ease;
	transition: flex 0.2s ease, max-width 0.2s ease, -webkit-box-flex 0.2s ease, -ms-flex 0.2s ease;
}

.live-tracking-shell > #live_sidebar_col.live-sidebar-collapsed {
	-webkit-box-flex: 0;
	    -ms-flex: 0 0 4.5rem;
	        flex: 0 0 4.5rem;
	max-width: 4.5rem;
}

.live-tracking-shell > #live_sidebar_col.live-sidebar-collapsed .live-device-panel {
	border-width: 0;
}

.live-tracking-shell > #live_sidebar_col.live-sidebar-collapsed .card-header {
	-webkit-box-pack: center !important;
	    -ms-flex-pack: center !important;
	        justify-content: center !important;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}

.live-tracking-shell > #live_sidebar_col.live-sidebar-collapsed .card-header .min-w-0,
.live-tracking-shell > #live_sidebar_col.live-sidebar-collapsed .card-header .btn-group {
	display: none !important;
}

/* ── Live tracking state helpers ───────────────────────────── */
.mqtt-status-dot {
	display: inline-block;
	width: 0.625rem;
	height: 0.625rem;
	border-radius: 999px;
	background-color: var(--bs-secondary);
	-webkit-box-shadow: 0 0 0 0.25rem rgba(var(--bs-secondary-rgb), 0.15);
	        box-shadow: 0 0 0 0.25rem rgba(var(--bs-secondary-rgb), 0.15);
}

.mqtt-status-dot.is-online {
	background-color: var(--bs-success);
	-webkit-box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.15);
	        box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.15);
}

.mqtt-status-dot.is-warning {
	background-color: var(--bs-warning);
	-webkit-box-shadow: 0 0 0 0.25rem rgba(var(--bs-warning-rgb), 0.15);
	        box-shadow: 0 0 0 0.25rem rgba(var(--bs-warning-rgb), 0.15);
}

.mqtt-status-dot.is-offline {
	background-color: var(--bs-danger);
	-webkit-box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.15);
	        box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.15);
}

.style3 {}

@media (min-width: 1400px) {

.style4 {
		margin-bottom: 1px;
	}

.style5 {
		margin-bottom: 2px;
	}
}

/* ── Map Asset Info Panel — Bottom Offcanvas ────────────────── */
.map-asset-info-toggle {
	z-index: 999;
	font-size: 0.875rem;
	padding: 0.5rem 1rem;
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}

.map-asset-info-toggle:hover {
	-webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
	        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
	-webkit-transform: translateY(-2px);
	        transform: translateY(-2px);
}

.map-asset-info-panel {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	top: auto;
	z-index: 1040;
	margin: 0;
	max-height: 40vh;
	height: 320px;
	background: var(--bs-body-bg);
	border-top: 1px solid var(--bs-border-color);
	-webkit-box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
	        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}

.map-asset-info-panel .offcanvas-header {
	padding: 1rem;
	background: var(--bs-body-bg);
}

.map-asset-info-panel .offcanvas-body {
	padding: 1rem;
	overflow-y: auto;
}
/* Custom styling for your active asset card row */
.active-asset {
    background-color: #e0e7ff !important; /* Soft 10% indigo tint */
    border-left: 4px solid #4f46e5 !important; /* Sharp primary indigo bar on the left */
}

/* Ensure the GENERAL text and standard icons inside the active row remain sharp and dark */
.active-asset * {
    color: #1e293b; /* REMOVED !important so other classes can override this */
}

/* Ensure your text links or explicit color utility classes maintain priority */
.active-asset .text-success, 
.active-asset .text-success * {
    color: #22c55e !important; /* Forces your success/green theme color back onto the feet when active */
}

/* Make the asset name pop slightly more when active */
.active-asset .fw-bold, 
.active-asset h5,
.active-asset h6 {
    color: #4f46e5 !important; 
}