html, body {
	height: 100%;
}

body {
	margin: 0;
	padding: 0;
	font-family: Arial, sans-serif;
	background-color: red;
}

.mainTitle {
	margin-top: 8px;
	margin-left: 2px;
	font-size: 1.5em;
	color: #aaa;
}

#editorLogo {
	margin-left: 12px;
	margin-right: 4px;
}

span.floorPlanTitle {
	color: black !important;
}

.btn-outline-secondary {
	border-color: silver;
}

#toolbar {
	padding: 10px;
	margin: 0 0 18px 0;
	background: #f0f0f0;
	border: 1px solid #e5e5e5;
	border-radius: 5px;
	box-shadow: 0 8px 16px -10px rgba(0, 0, 0, 0.6);
	z-index: 1;
}

.card {
	border: 1px solid #e5e5e5;
	box-shadow: 0 8px 16px -10px rgba(0, 0, 0, 0.6);
}

#properties-panel .card-header {
	padding: 0;
}

/* Highlight dropdowns with unsaved changes (sticky note yellow) */
.metadata-changed {
	background-color: #fff3cd !important;
	border-color: #ffc107 !important;
	box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25) !important;
}

.metadata-effective-card {
	padding: 0.65rem 0.75rem;
	border: 1px solid #dee2e6;
	border-radius: 0.5rem;
	background-color: #f8f9fa;
}

.sensor-type-card {
	padding: 0.65rem 0.75rem;
	border: 1px solid #dee2e6;
	border-radius: 0.5rem;
	background-color: #f8f9fa;
}

.sensor-overlap-card {
	padding: 0.65rem 0.75rem;
	border: 1px solid #dee2e6;
	border-radius: 0.5rem;
	background-color: #f8f9fa;
}

.sensor-overlap-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}


.sensor-overlap-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 0.5rem 0.65rem;
	border: 1px solid #d0d7de;
	border-radius: 0.5rem;
	background-color: #fff;
}

.sensor-overlap-zone-name {
	font-weight: 500;
}

.sensor-overlap-direction-group {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.sensor-overlap-zone {
	border: 1px solid #d0d7de;
	font-weight: 500;
}

.sensor-type-badge-everex {
	background-color: #3b99dc;
	color: #fff;
}

.sensor-type-badge-milesight {
	background-color: #a855f7;
	color: #fff;
}

	.metadata-effective-card .badge {
		font-weight: 500;
	}

.card-header {
	background: #e6e6e6;
	border: 1px solid #dadada;
	padding: 6px;
}

.card-header-tabs {
	margin: 0;
	border-bottom: none;
}

	.card-header-tabs .nav-link {
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		border: none;
		border-bottom: 2px solid transparent;
		color: #6c757d;
		padding: 0.75rem 1rem;
	}

		.card-header-tabs .nav-link:hover {
			border-bottom-color: #dee2e6;
			color: #495057;
		}

		.card-header-tabs .nav-link.active {
			color: #0d6efd;
			background-color: transparent;
			border-bottom-color: #0d6efd;
			font-weight: 500;
		}

button {
	padding: 8px 15px;
	cursor: pointer;
}

.tool-btn.active {
	color: #fff;
	background-color: #0d6efd;
	border-color: #0d6efd;
}

#canvas-container {
	border: 1px solid silver;
	display: inline-block;
	position: relative;
	cursor: crosshair;
	width: 100%;
	/* let flex decide height to avoid overflow */
	height: auto;
	max-width: none;
	max-height: none;
	flex: 1 1 auto;
	min-height: 400px;
	overflow: hidden;
}

	#canvas-container svg {
		display: block;
		width: 100%;
		height: 100%;
	}

.checker {
	background-color: #e0e0e0;
	background-image: linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
	background-size: 16px 16px;
	background-position: 0 0, 8px 8px;
}

#properties-panel {
	position: sticky;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	margin-bottom: 12px;
}

	#properties-panel .card-body {
		min-height: 0;
		padding: 0.75rem;
	}

	#properties-panel .tab-content {
		height: auto !important;
		min-height: 0;
	}

	#properties-panel .tab-pane {
		min-height: 0;
	}

		/* Ensure inactive tab panes don't take up space */
		#properties-panel .tab-pane:not(.active) {
			display: none;
		}

		#properties-panel .tab-pane.active {
			display: block;
		}

.sensor.selected {
	stroke: #ffb703 !important;
	stroke-width: 3px !important;
}

svg .sensor-override-indicator {
	fill: #ffd54f;
	stroke: #ffd54f;
	stroke-width: 1px;
}

.zone.selected {
	stroke: red !important;
	stroke-width: 3px !important;
}

@keyframes blinklocation-selected {
	100%, 0% {
		opacity: 1;
	}

	50% {
		opacity: 0.35;
	}
}

.vip {
	fill: gold !important;
}

/* Class tags styling */
.class-tags-container {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 8px;
	border: 1px solid #ced4da;
	border-radius: 0.25rem;
	min-height: 38px;
	background-color: #fff;
}

.class-tag {
	display: inline-flex;
	align-items: center;
	background-color: #6c757d;
	color: white;
	padding: 4px 8px;
	border-radius: 12px;
	font-size: 0.875rem;
	gap: 6px;
}

.class-tag-text {
	user-select: none;
}

.class-tag-remove {
	background: none;
	border: none;
	color: white;
	cursor: pointer;
	padding: 0;
	margin: 0;
	width: 14px;
	height: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	line-height: 1;
	opacity: 0.8;
	transition: opacity 0.2s;
}

	.class-tag-remove:hover {
		opacity: 1;
	}

.class-input-wrapper {
	flex: 1;
	min-width: 100px;
}

.class-input {
	border: none;
	outline: none;
	padding: 4px;
	font-size: 0.875rem;
	width: 100%;
	background: transparent;
}

	.class-input::placeholder {
		color: #adb5bd;
	}

/* Checkerboard background pattern */
.checkerboard {
	background-color: #eee;
	background-image: linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
	background-size: 16px 16px;
	background-position: 0 0, 8px 8px;
}

/* Custom tooltip for sensor elements */
.sensor-tooltip {
	position: fixed;
	background-color: rgba(0, 0, 0, 0.75);
	color: white;
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 14px;
	pointer-events: none;
	z-index: 10000;
	white-space: nowrap;
	display: none;
}

/* Hierarchy view styling */
.hierarchy-list {
	max-height: 500px;
	overflow-y: auto;
}

.hierarchy-zone {
	padding: 8px;
	border-left: 3px solid #0d6efd;
	background-color: #f8f9fa;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.hierarchy-unassigned {
	padding: 8px;
	border-left: 3px solid #ffc107;
	background-color: #fff3cd;
	border-radius: 4px;
}

.hierarchy-sensor {
	border-left: 2px solid #e9ecef;
	padding-left: 8px;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

	.hierarchy-sensor:hover {
		background-color: #f8f9fa;
		border-left-color: #198754;
	}

.hierarchy-zone:hover {
	background-color: #e9ecef;
}

.hierarchy-toggle-btn {
	color: inherit;
	text-decoration: none;
}

.hierarchy-toggle-btn:hover,
.hierarchy-toggle-btn:focus {
	color: inherit;
	text-decoration: none;
}

.hierarchy-unassigned:hover {
	background-color: #ffecb5;
}

#hierarchy-stats .card {
	border: none;
}

/* Categories tab tree (read-only style) */
.category-tree {
	height: 100%;
	max-height: none;
	overflow-y: auto;
}

.category-tree-node {
	margin-bottom: 0.1rem;
}

.category-tree-row,
.department-tree-row {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.2rem 0.25rem;
	border-radius: 0.25rem;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

	.category-tree-row:hover,
	.department-tree-row:hover {
		background-color: #f8f9fa;
	}

.category-tree-bullet {
	width: 0.9rem;
	text-align: center;
	color: #212529;
	font-size: 1rem;
	line-height: 1;
}

.category-tree-name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@keyframes blinkzone {
	100%, 0% {
		stroke: red;
		fill: rgba(0, 0, 0, 0.4);
	}

	50% {
		stroke: darkred;
		stroke: #333;
		fill: rgba(0, 0, 0, 0.3);
	}
}

@keyframes blinklocation {
	100%, 0% {
		stroke: darkorange;
		fill: rgba(0, 0, 255, 1);
	}

	50% {
		stroke: #fff;
		fill: rgba(0, 0, 255, 0.5);
	}
}

svg .blink-location {
	animation: blinklocation 0.8s infinite;
}

svg .sensor.selected.blink-location {
	animation: blinklocation-selected 0.8s infinite !important;
}

svg .blink-zone {
	animation: blinkzone 0.8s infinite;
}

/* Hierarchy edit button styling */
.hierarchy-edit-btn,
.hierarchy-locate-btn {
	color: #6c757d;
	font-size: 0.875rem;
	opacity: 0;
	transition: opacity 0.2s ease, color 0.2s ease;
	text-decoration: none;
}

 .hierarchy-edit-btn:hover,
	.hierarchy-locate-btn:hover {
		color: #0d6efd;
		text-decoration: none;
	}

.hierarchy-zone:hover .hierarchy-edit-btn,
.hierarchy-zone:hover .hierarchy-locate-btn,
.hierarchy-sensor:hover .hierarchy-edit-btn,
.hierarchy-sensor:hover .hierarchy-locate-btn {
	opacity: 1;
}

/* Always show edit button on touch devices */
@media (hover: none) {
   .hierarchy-edit-btn,
	.hierarchy-locate-btn {
		opacity: 0.7;
	}
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
	background-color: #f0f0f0 !important;
}

/* Unsaved Changes Indicator - Simple red underline on save button */
#btn-save.pending-changes {
	box-shadow: inset 0 -2px 0 0 red;
}

/* Right-side panel modal for change preview */
#changePreviewModal {
	pointer-events: none; /* Allow clicks to pass through to canvas */
}

	#changePreviewModal .modal-dialog {
		position: fixed;
		right: 0;
		top: 0;
		margin: 0;
		height: 100vh;
		max-width: 100%;
		transform: translateX(100%);
		transition: transform 0.3s ease-in-out;
		pointer-events: auto; /* Re-enable pointer events for the modal content */
		/* Width will be set dynamically by JavaScript to match properties panel */
	}

	#changePreviewModal.show .modal-dialog {
		transform: translateX(0);
	}

	#changePreviewModal .modal-content {
		height: 100vh;
		border-radius: 0;
		border-left: 2px solid #dee2e6;
		box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2);
	}

/* Building name on Index page */
.building-name {
	min-width: 200px;
	display: inline-block;
}

/* Selection list for bulk editing */
.selection-list {
	max-height: 150px;
	overflow-y: auto;
	border: 1px solid #dee2e6;
	border-radius: 0.25rem;
	background-color: #f8f9fa;
	margin-bottom: 0;
}

.selection-list-item {
	padding: 4px 8px;
	border-bottom: 1px solid #dee2e6;
	font-size: 0.8rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: background-color 0.15s ease;
}

	.selection-list-item:last-child {
		border-bottom: none;
	}

	.selection-list-item:hover {
		background-color: #e9ecef;
		cursor: pointer;
	}

	.selection-list-item.active {
		background-color: #d1e7ff;
		font-weight: 500;
	}

.selection-list-item-id {
	font-family: monospace;
	color: #495057;
	font-size: 0.75rem;
}

.selection-list-item-details {
	font-size: 0.7rem;
	color: #6c757d;
}

#toggle-selection-list {
	padding: 2px 8px;
	font-size: 0.875rem;
}

	#toggle-selection-list i {
		transition: transform 0.2s ease;
		font-size: 0.875rem;
	}

	#toggle-selection-list.expanded i {
		transform: rotate(180deg);
	}

#selection-list-container {
	margin-bottom: 0.75rem;
}

#multiple-elements-properties h6 {
	font-size: 0.95rem;
	margin-bottom: 0.75rem;
}

#multiple-elements-properties .mb-3 {
	margin-bottom: 0.75rem !important;
}

#multiple-elements-properties .form-label {
	font-size: 0.85rem;
	margin-bottom: 0.25rem;
}

#multiple-elements-properties .form-control,
#multiple-elements-properties .btn {
	font-size: 0.85rem;
}

#multiple-elements-properties .form-text {
	font-size: 0.75rem;
	margin-top: 0.15rem;
}


table.table th {
	background-color: #e8e8e8;
}

/* Table View: mixed sizing (some fixed columns, others auto) */
#sensors-table {
	table-layout: auto;
	width: 100%;
}

	#sensors-table th.col-id,
	#sensors-table td.col-id {
		width: 90px;
		min-width: 90px;
		max-width: 90px;
	}

	#sensors-table th.col-sensor-number,
	#sensors-table td.col-sensor-number {
		width: 130px;
		min-width: 130px;
		max-width: 130px;
	}

	#sensors-table th.col-actions,
	#sensors-table td.col-actions {
		width: 95px;
		min-width: 95px;
		max-width: 95px;
		white-space: nowrap;
	}

	#sensors-table td.col-id .form-control,
	#sensors-table td.col-sensor-number .form-control {
		min-width: 0;
	}

/* Change preview modal: remove border between sensor main row and metadata row */
#sensorChangesBody tr.sensor-change-main-row > td {
	border-bottom: 0;
}

#sensorChangesBody tr.sensor-change-meta-row > td {
	border-top: 0;
}

/* Used for sensor numbers and MAC addresses */
code {
	font-size: 1.05em;
}