#sidebar .offcanvas-body::-webkit-scrollbar,
#sidebar .sidebar-nav::-webkit-scrollbar {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
}

#sidebar .offcanvas-body,
#sidebar .sidebar-nav {
	-ms-overflow-style: none !important;
	scrollbar-width: none !important;
}

/* Theme switch related */

:root {
	--bs-form-focus-shadow-hsl: var(--bs-success-hsl);
	--bs-focus-ring-color: hsla(
		var(--bs-success-hsl),
		var(--bs-focus-ring-opacity)
	);
}

#toaster {
	bottom: 0;
	top: unset !important;
}

.ripple {
	position: fixed;
	border-radius: 40%;
	transform: scale(0);
	animation: ripple-animation 600ms ease-out;
	pointer-events: none;
	z-index: 10002 !important;
	width: 10px;
	height: 10px;
	filter: blur(1px);
}

@keyframes ripple-animation {
	to {
		border-radius: 50%;
		transform: scale(150);
		opacity: 0;
	}
}

@keyframes modalPopIn {
	0% {
		opacity: 0;
		transform: scale(0.9);
	}
	60% {
		opacity: 1;
		transform: scale(1.05);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes modalPopOut {
	0% {
		opacity: 1;
		transform: scale(1);
	}
	100% {
		opacity: 0;
		transform: scale(0.93);
	}
}

.modal.fade {
	opacity: 0;
	transform: scale(0.93);
}

.modal.fade.show {
	animation: modalPopIn 0.2s ease-out forwards;
}

.modal.fade:not(.show) {
	animation: modalPopOut 0.2s ease-in forwards;
}

.perfect-login-card {
	max-width: 400px;
	margin: 0 auto;
	user-select: none;
}

body:has(.perfect-login-card),
body:has(.blank) {
	background-image:
		radial-gradient(circle, rgba(0, 0, 0, 0.08) 1px, transparent 1px),
		radial-gradient(circle, rgba(0, 0, 0, 0.15) 1.5px, transparent 1.5px);
	background-size:
		20px 20px,
		100px 100px;
	background-position:
		0 0,
		0 0;
}

[data-bs-theme="dark"] body:has(.perfect-login-card),
[data-bs-theme="dark"] body:has(.blank) {
	background-image:
		radial-gradient(circle, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
		radial-gradient(circle, rgba(255, 255, 255, 0.08) 1.5px, transparent 1.5px);
	background-size:
		20px 20px,
		100px 100px;
	background-position:
		0 0,
		0 0;
}

/* End theme switch related */

.logo-img {
	-webkit-user-drag: none;
}

#logout:hover i.ph-duotone {
	color: var(--bs-danger) !important;
}

i.outside-link {
	font-size: 1rem;
	line-height: 1rem;
	vertical-align: text-top;
	translate: 0 -0.2rem;
	color: hsla(var(--bs-emphasis-color-hsl), 0.8);
	opacity: 0.5 !important;
}

li:has(i.outside-link):hover i.outside-link {
	opacity: 1 !important;
}

.card {
	-moz-background-clip: padding !important;
	-webkit-background-clip: padding-box !important;
	background-clip: padding-box !important;
}

.card .card-img-top {
	border-top-left-radius: 7px !important;
	border-top-right-radius: 7px !important;
	background-color: var(--bs-border-color);
	border-color: var(--bs-border-color);
}

.hoverable-li:hover {
	background-color: var(--bs-action-hover-bg) !important;
	cursor: pointer;
}

.hoverable-li:hover:last-child {
	border-bottom-left-radius: var(--bs-card-inner-border-radius) !important;
	border-bottom-right-radius: var(--bs-card-inner-border-radius) !important;
}

.nosel {
	user-select: none;
}

.pointer {
	cursor: pointer;
}

.checkbox-btn {
	box-sizing: border-box !important;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: var(--bs-action-bg) !important;
	border: 1px solid var(--bs-border-color-dark) !important;
	border-radius: var(--bs-border-radius-lg) !important;
	cursor: pointer;
	color: var(--bs-action-color) !important;
	font-size: var(--bs-action-font-size) !important;
	line-height: var(--bs-action-line-height) !important;
	padding: var(--bs-action-lg-padding-y) var(--bs-action-lg-padding-x) !important;
}

.checkbox-btn input {
	cursor: pointer;
}

.nav-item[disabled] {
	pointer-events: none !important;
	cursor: not-allowed !important;
}

.modal {
	backdrop-filter: blur(8px);
}

.text-muted {
	font-size: large;
}

.text-muted-sm {
	font-size: small;
}

.button-with-icon span {
	font-size: 1.2rem !important;
	padding-inline: 0% !important;
	padding-block: 0% !important;
	appearance: none !important;
	line-height: 1rem !important;
	text-box: trim-both ex alphabetic !important;
}

.lh14 {
	line-height: 1.4rem !important;
}

.register-overflow-wrapper {
	height: min(350px, 40dvh);
	border-radius: 0px !important;
	overflow: hidden !important;
	margin-right: 8px;
}

.pretty-reg-form {
	margin-right: 10px !important;
}

.register-overflow-content {
	height: 100%;
	overflow-y: auto;
}

.register-overflow-content::-webkit-scrollbar {
	width: 6px;
}

.register-overflow-content::-webkit-scrollbar-track {
	background: transparent;
	border-radius: 4px;
	width: 6px;
}

.register-overflow-content::-webkit-scrollbar-thumb {
	background: var(--bs-border-color);
	border-radius: 3px;
	transition: opacity 0.2s ease;
	cursor: pointer;
	opacity: 0.8;
}

.register-overflow-content::-webkit-scrollbar-thumb:hover {
	opacity: 1;
}

.no_scroll::-webkit-scrollbar {
	display: none;
	width: 0 !important;
	height: 0 !important;
}

.no_scroll {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.register-big-label {
	position: sticky;
	top: 0;
	z-index: 10 !important;
	background-color: var(--bs-card-bg) !important;
	border-radius: 0 !important;
	margin-bottom: 0px !important;
	padding-top: 8px !important;
	cursor: pointer;
}

#restore_button {
	margin-top: 8px !important;
}

#device_password_wrapper {
	margin-bottom: 8px !important;
}

.config-bar {
	border-bottom: var(--bs-border-width) solid var(--bs-content-border-color);
	background-color: #f9f9f9 !important;
}

[data-bs-theme="dark"] .config-bar {
	background-color: #1b1f23 !important;
}

.danger-hover:hover {
	color: var(--bs-danger) !important;
}

.warning-hover:hover {
	color: var(--bs-warning) !important;
}

.info-hover:hover {
	color: var(--bs-info) !important;
}

.primary-hover:hover {
	color: var(--bs-primary) !important;
}

.modal-header {
	border-bottom: 3px solid var(--bs-content-border-color) !important;
	border-width: 3px !important;
}

.modal-footer {
	border-top: 3px solid var(--bs-content-border-color) !important;
	border-width: 3px !important;
}

.success-hover:hover {
	color: hsla(var(--bs-success-hsl), var(--bs-bg-opacity, 1)) !important;
}

.success-hover-i:hover i {
	color: hsla(var(--bs-success-hsl), var(--bs-bg-opacity, 1)) !important;
}

.tag-fast-add {
	border-radius: var(--bs-border-radius-lg) !important;
}

.devices_table,
.dash_table,
.perms_table,
.streams_table,
.users_table {
	height: calc(100dvh - 154px) !important;
}

.devices_table > *,
.dash_table > *,
.perms_table > *,
.streams_table > *,
.users_table > * {
	overflow-y: visible !important;
	overflow-x: hidden !important;
}

.pretty-search-wrapper {
	position: relative;
	display: flex;
	align-items: center;
}

.pretty-search {
	height: 38px;
	padding-left: 36px;
	border-radius: 0.375rem;
	color: var(--bs-action-color) !important;
	background-color: var(--bs-action-bg) !important;
	border: 1px solid var(--bs-action-border-color) !important;
	font-size: 0.9rem;
	min-width: 220px;
	cursor: text;
}

@media screen and (max-width: 768px) {
	.pretty-search {
		width: calc(100dvw - 180px) !important;
	}
	.pretty-search[are-root="1"] {
		width: calc(100dvw - 310px) !important;
	}
}

.pretty-search::placeholder {
	opacity: 0.9;
}

.pretty-search-icon {
	position: absolute;
	left: 12px;
	font-size: 1rem;
	color: var(--bs-action-color);
	pointer-events: none;
}

.pretty-search[disabled] {
	pointer-events: none;
	cursor: not-allowed !important;
}

.cursor-help {
	cursor: help !important;
}

.no-scroll {
	overflow-x: hidden !important;
}

.link-default {
	color: black !important;
	cursor: context-menu !important;
}

[data-bs-theme="dark"] .link-default {
	color: white !important;
}

.tabulator-row.row-permself {
	background-color: #e3f2fd !important; /* very light primary */
}

.tabulator-row.tabulator-row-even.row-permself {
	background-color: #d6e9fc !important;
}

.tabulator-row.row-permself:hover {
	background-color: #c5defb !important;
}

.tabulator-row.tabulator-row-even.row-permself:hover {
	background-color: #b3d2fa !important;
}

[data-bs-theme="dark"] .tabulator-row.row-permself {
	background-color: #1e2a3b !important;
}

[data-bs-theme="dark"] .tabulator-row.tabulator-row-even.row-permself {
	background-color: #24314a !important;
}

[data-bs-theme="dark"] .tabulator-row.row-permself:hover {
	background-color: #2a3a5a !important;
}

[data-bs-theme="dark"] .tabulator-row.tabulator-row-even.row-permself:hover {
	background-color: #304268 !important;
}

[data-bs-theme="dark"] .search-active {
	background-color: var(--bs-darkgray-600) !important;
}

.search-active {
	background-color: var(--bs-lightgray-600) !important;
}

.modal-content {
	border-width: 3px !important;
}

.rounded-tag-list {
	border-radius: var(--bs-border-radius) !important;
}

.rounded-tag-list::-webkit-scrollbar {
	display: none !important;
}

.tag-list-edit {
	border-radius: var(--bs-border-radius-sm) !important;
}

.waylay {
	width: 100% !important;
	height: 100% !important;
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	z-index: 10000 !important;

	backdrop-filter: blur(0px) !important;
	opacity: 0;
	pointer-events: none;

	transition:
		backdrop-filter 0.3s ease,
		opacity 0.3s ease;
}

.waylay-visible {
	backdrop-filter: blur(8px) !important;
	opacity: 1;
	pointer-events: auto;
}

.waylay-hidden {
	backdrop-filter: blur(0px) !important;
	opacity: 0;
	pointer-events: none;
}

#sidebar,
.tooltip {
	z-index: 10001 !important;
}

#sidebar {
	box-shadow: none !important;
	border-top-right-radius: var(--bs-border-radius-lg) !important;
	border-bottom-right-radius: var(--bs-border-radius-lg) !important;
	height: calc(100dvh - 24px) !important;
	background-color: #f9f9f9 !important;
	margin-top: 12px !important;
	border: none !important;
}

.offcanvas-body {
	background-color: #f9f9f9 !important;
}

[data-bs-theme="dark"] .offcanvas-body,
[data-bs-theme="dark"] #sidebar {
	background-color: #1b1f23 !important;
}

.offcanvas-header {
	border-top-right-radius: 10px !important;
}

.tag-clickable {
	padding-top: 4px !important;
	padding-bottom: 4px !important;
}

.cursor-alias {
	cursor: alias !important;
}

.no-drag {
	user-select: none !important;
	-webkit-user-drag: none !important;
	-webkit-user-select: none !important;
	-ms-user-select: none !important;
	-moz-user-select: none !important;
}

.fix-duotone::after {
	margin-left: -1.5em !important;
}

.no-grp-header > .tabulator-col-content {
	display: none;
}

.no-grp-header .tabulator-col-group-cols {
	border-top-width: 0px !important;
}

.manager:disabled,
.toggle_perm:disabled {
	filter: grayscale(35%) !important;
}

.offline_status::after {
	filter: grayscale(70%) !important;
	opacity: 0.5 !important;
}

.offline_status::before {
	opacity: 0 !important;
}

.tabulator-cell:has(.toggle_perm:disabled) {
	cursor: not-allowed !important;
}

.disabled:has(button:disabled) {
	cursor: not-allowed;
}

.add_to_device_perms,
#add_user,
#add_device_perms,
#add_device {
	cursor: copy !important;
}

.tags_helper {
	cursor: help !important;
}

input[type="date"]::-webkit-calendar-picker-indicator {
	cursor: pointer;
	opacity: 0.6;
	transition: opacity 0.3s;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover {
	opacity: 1;
	cursor: pointer;
}

select#perm_user,
select#perm_imei {
	font-family: "cascadia_mono", Courier, monospace;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

select#perm_user option,
select#perm_imei option {
	font-family: "cascadia_mono", Courier, monospace;
	font-size: 14px;
}

.tabulator-tableholder::-webkit-scrollbar {
	width: 0px;
	height: 0px;
}

.tabulator-row.tabulator-group {
	min-width: calc(100dvw - 98px) !important;
	max-width: calc(100dvw - 98px) !important;
	width: calc(100dvw - 98px) !important;
	box-sizing: border-box;
	position: sticky;
	left: 0;
	z-index: 10;
	display: flex;
}

.autofont {
	font-size: large;
}

.tabulator-row.tabulator-group {
	min-width: calc(100dvw - 98px) !important;
	max-width: calc(100dvw - 98px) !important;
	width: calc(100dvw - 98px) !important;
	box-sizing: border-box;
	position: sticky;
	left: 0;
	z-index: 10;
	display: flex;
}

.autofont {
	font-size: large;
}

@media (max-width: 1199.98px) {
	.tabulator-row.tabulator-group {
		min-width: calc(100dvw - 50px) !important;
		max-width: calc(100dvw - 50px) !important;
		width: calc(100dvw - 50px) !important;
	}

	.autofont {
		font-size: medium;
	}
}

@media (max-width: 575.98px) {
	.tabulator-row.tabulator-group {
		min-width: calc(100dvw - 34px) !important;
		max-width: calc(100dvw - 34px) !important;
		width: calc(100dvw - 34px) !important;
	}

	.autofont {
		font-size: small;
	}
}

@media (max-width: 299.98px) {
	.tabulator-row.tabulator-group {
		min-width: calc(100dvw - 34px) !important;
		max-width: calc(100dvw - 34px) !important;
		width: calc(100dvw - 34px) !important;
	}

	.autofont {
		font-size: x-small;
	}
}

button i.ph,
button i.ph-duotone {
	align-self: center !important;
}

button i.bad {
	padding-top: 1.5px !important;
}

.btn-cell {
	display: flex;
	align-items: center;
	justify-content: center;
}

.fakebtn {
	border: none !important;
	background: none !important;
	color: inherit !important;
	cursor: pointer !important;
	pointer-events: none !important;
}

.active-filter span {
	font-weight: bold;
}

#map_object {
	height: min(700px, 70dvh);
	width: 100%;
	border-radius: 6px !important;
	background-color: white !important;
}
[data-bs-theme="dark"] #map_object {
	background-color: var(--bs-action-bg) !important;
}

.custom-reverse-geo,
.custom-position-control {
	font-family: "overpass", Arial, Helvetica, sans-serif;
	padding: 6px 8px 4px 8px !important;
	backdrop-filter: blur(4px);
	text-transform: uppercase !important;
	font-weight: 400 !important;
	background-color: #0300005e !important;
	border-radius: 12px !important;
	border-width: 0px !important;
	border: none;
	max-width: min(400px, 50dvw);
	color: white !important;
}

.custom-position-control {
	margin-top: 10px !important;
	margin-left: 10px !important;
	padding: 8px !important;
}

.custom-reverse-geo strong {
	color: whitesmoke;
}

.pl_frame {
	border-radius: 8px !important;
	height: 100%;
	width: 100%;
	border: 2px solid var(--bs-content-border-color) !important;
	background-color: transparent !important;
}

[data-bs-theme="dark"] #oframeplayer_container {
	background-color: transparent;
}

.modal-fullscreen-lg-down.cammodal .modal-content {
	max-height: 85dvh;
	max-width: 85dvw;
	left: 50%;
	top: 0px;
	transform: translate(-50%);
	border-radius: var(--bs-border-radius-lg);
}

.tabulator-cell:has(.unactual) {
	background-color: var(--bs-danger-bg-subtle) !important;
	filter: grayscale(50%) !important;
}

.list-group.border-2 li {
	border-left-width: 2px !important;
	border-right-width: 2px !important;
	border-top-width: 2px !important;
	border-bottom-width: 0px !important;
}

.list-group.border-2 li:last-child {
	border-bottom-width: 2px !important;
}

#cam_info .card {
	overflow-y: auto;
	height: 100%;
	max-height: calc(60dvh + 10px);
}

.pl_frame {
	min-height: min(592px, 60dvh) !important;
}

@media (max-width: 1200px) {
	.pl_frame {
		min-height: min(400px, 60dvh) !important;
	}
	#cam_info .card {
		max-height: 40dvh;
	}
	.cammodal .modal-content {
		max-width: 100dvw !important;
	}
}

.placeholder {
	border-radius: 4px !important;
}

.fs-xxs {
	font-size: x-small !important;
}

.desc-text {
	text-align: justify;
	text-justify: inter-word;
	font-weight: bold !important;
	color: gray !important;
}

.name-text {
	color: var(--bs-action-color) !important;
}

.cam-counter {
	font-weight: bold;
	color: whitesmoke !important;
}

#stream_preview_frame {
	height: 75dvh;
}

.black-bg {
	overflow: hidden !important;
	background-color: black !important;
}

#regenerate_layout {
	top: 10px !important;
	right: 13px !important;
	right: 13px !important;
	bottom: 10px !important;
	color: #ffffff22 !important;
	border-radius: 8px !important;
	background-color: #00000022 !important;
	backdrop-filter: blur(4px);
	border-color: #00000022 !important;
	padding: 1rem !important;
	transition: color 1s ease;
	transition: backdrop-filter 1s ease;
	transition: background-color 0.3s ease;
}

#regenerate_layout:hover {
	transition: backdrop-filter 1s ease;
	background-color: #00000066 !important;
	transition: background-color 0.3s ease;
	transition: color 1s ease;
	color: #ffffff !important;
}

.error-message-retry {
	font-size: 1.2rem !important;
	line-height: 10rem !important;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	align-items: center;
	color: #888 !important;
}

video::-webkit-media-controls-panel {
	background: #00000065 !important;
	position: absolute;
	border: 1px solid #00000022 !important;
	box-shadow: 0px 0px 10px 3px rgba(255, 255, 255, 0.12) !important;
	bottom: 12px;
	left: 50%;
	transform: translateX(-50%);
	width: calc(100% - 40%);
	min-width: fit-content !important;
	backdrop-filter: blur(4px);
	border-radius: 25px !important;
	align-items: center;
	transition: background 0.3s ease;
	transition: transform 0.3s ease;
	transition: backdrop-filter 1s ease;
}

video::-webkit-media-controls-panel:hover {
	transition: background 0.3s ease;
	transition: transform 0.3s ease;
	transition: backdrop-filter 1s ease;
	backdrop-filter: blur(8px);
}

.fs-small {
	font-size: 1rem !important;
}

@media screen and (max-width: 575.98px) {
	.fs-small {
		font-size: 0.9rem !important;
	}
}

@media screen and (max-width: 300.98px) {
	.fs-small {
		font-size: 0.8rem !important;
	}
}

@media screen and (min-width: 359.98px) {
	.d-xsm-block {
		display: block !important;
	}
}

.form-control[readonly] {
	color: var(--bs-form-disabled-color);
	background-color: var(--bs-form-disabled-bg);
	border-color: var(--bs-form-disabled-border-color);
	opacity: 1;
	user-select: none;
	pointer-events: none;
}

.form-control[readonly]:focus {
	box-shadow: none;
}

.form-control[readonly] ~ label {
	color: var(--bs-form-disabled-color);
}

.form-control[readonly] ~ label::after {
	display: none;
}

#maincontainer {
	max-height: calc(100dvh - 300px) !important;
}

/* ── Logbook welcome cards ── */
#logbook_table_buttons {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 0.75rem;
	padding: 0 1rem;
}

.logbook-table-card {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem;
	background: var(--bs-body-bg);
	border: 1px solid var(--bs-content-border-color);
	border-radius: 0.3rem;
	cursor: pointer;
	transition:
		border-color 0.12s,
		background 0.12s;
}

.logbook-table-card:hover {
	background: var(--bs-lightgray-100);
}

[data-bs-theme="dark"] .logbook-table-card:hover {
	background: var(--bs-darkgray-800);
}

.logbook-card-icon {
	flex-shrink: 0;
	color: var(--bs-secondary-color);
	opacity: 0.6;
}

.logbook-card-body {
	flex: 1;
	min-width: 0;
}

.logbook-card-name {
	font-weight: 600;
	font-size: 1rem;
	color: var(--bs-body-color);
	margin-bottom: 0.2rem;
}

.logbook-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
	font-size: 0.78rem;
	color: var(--bs-secondary-color);
}

.logbook-card-meta i {
	font-size: 0.7rem;
}

.logbook-card-recent {
	border-left: 3px solid var(--bs-gray-500);
}

.logbook-card-today {
	border-left: 3px solid var(--bs-gray-500);
}

.logbook-card-week {
	border-left: 3px solidvar(--bs-gray-500);
}

.logbook-card-old {
	border-left: 3px solid var(--bs-gray-500);
}

[data-bs-theme="dark"] .logbook-card-old {
	border-left-color: var(--bs-gray-600);
}

/* ── Logbook jump picker ── */
.logbook-jump-picker {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 1060;
	padding: 1rem;
	background: var(--bs-body-bg);
	border: 1px solid var(--bs-content-border-color);
	border-radius: 0.625rem;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
	min-width: 300px;
	margin-top: 0.375rem;
}

.logbook-jump-picker.show {
	display: block;
}

.logbook-jump-row {
	display: flex;
	gap: 0.625rem;
	margin-bottom: 0.75rem;
}

.logbook-jump-field {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.logbook-jump-label {
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--bs-secondary-color);
	padding-left: 0.125rem;
}

.logbook-jump-go {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	padding: 0.4rem 0.75rem;
	font-size: 0.8rem;
	font-weight: 600;
}

/* ── Logbook jump badge ── */
.logbook-jump-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.2rem 0.5rem;
	background: var(--bs-primary);
	color: #fff;
	border-radius: 0.375rem;
	font-size: 0.8rem;
	white-space: nowrap;
}

.logbook-jump-badge .ph-x {
	font-size: 1rem;
	cursor: pointer;
}

/* ── Tabulator sticky group headers ── */
.tabulator {
	transform: none !important;
}

.tabulator .tabulator-tableholder .tabulator-row.tabulator-group {
	position: sticky;
	top: 0;
	z-index: 10;
	background: var(--bs-body-bg);
	display: flex;
	align-items: center;
}

.tabulator
	.tabulator-tableholder
	.tabulator-row.tabulator-group
	.logbook-group-clear {
	float: none;
	margin-left: auto;
	position: static;
	transform: none;
	line-height: 1;
}

#logbook_type_filter {
	min-width: 85px !important;
	max-width: 85px !important;
	width: 85px !important;
	font-size: small !important;
	font-family: "monospace" !important;
	text-align: left !important;
}

.mode-descpiption:hover {
	opacity: 1 !important;
	cursor: context-menu !important;
}

/* ── Sidebar base ── */
#sidebar ul,
#sidebar li {
	list-style: none;
}

#sidebar .nav-link {
	cursor: pointer;
	border-radius: var(--bs-border-radius);
	transition:
		background-color 0.15s ease,
		color 0.15s ease;
	padding: 0.5rem 0.75rem;
}

#sidebar .nav-link:hover {
	background-color: rgba(var(--bs-body-color-rgb), 0.05);
}

[data-bs-theme="dark"] #sidebar .nav-link:hover {
	background-color: rgba(var(--bs-body-color-rgb), 0.1);
}

/* ── Group background (active or expanded) ── */
#sidebar li.nav-item:has(> .nav-link.active-group) {
	background-color: rgba(var(--bs-success-rgb), 0.06);
	border-radius: var(--bs-border-radius);
	margin-bottom: 0.25rem;
}

#sidebar li.nav-item:has(> ul.collapse.show) {
	background-color: rgba(var(--bs-success-rgb), 0.04);
}

/* Active group header */
#sidebar .nav-link.active-group {
	color: var(--bs-success);
	font-weight: 700;
}

/* ── Floating caret indicator ── */
#sidebar [data-bs-toggle="collapse"] .ph-caret-right,
#sidebar [data-bs-toggle="collapse"] .ph-caret-down {
	font-size: 0.6rem;
	width: 1.1rem;
	height: 1.1rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 0.2rem;
	background-color: var(--bs-border-color);
	opacity: 0.6;
	transition:
		transform 0.2s ease,
		opacity 0.2s ease,
		background-color 0.2s ease;
}

#sidebar [data-bs-toggle="collapse"]:hover .ph-caret-right,
#sidebar [data-bs-toggle="collapse"]:hover .ph-caret-down {
	opacity: 1;
	background-color: var(--bs-secondary-color);
	color: var(--bs-body-bg);
}

#sidebar [data-bs-toggle="collapse"][aria-expanded="true"] .ph-caret-right {
	transform: rotate(90deg);
	opacity: 1;
	background-color: var(--bs-secondary-color);
	color: var(--bs-body-bg);
}

/* ── Subgroup items ── */
#sidebar .sidebar-subgroup .nav-link {
	padding: 0.5rem 0.75rem 0.5rem 2rem;
	position: relative;
}

#sidebar .sidebar-subgroup .nav-link::before {
	content: "";
	position: absolute;
	left: 1rem;
	top: 0.45rem;
	bottom: 0.45rem;
	width: 1px;
	background: var(--bs-border-color);
	opacity: 0.35;
}

/* Active page highlight (both top-level pages and subgroups) */
#sidebar .nav-link.active {
	color: var(--bs-success);
	background-color: rgba(var(--bs-body-color-rgb), 0.05);
	font-weight: 600;
}

[data-bs-theme="dark"] #sidebar .nav-link.active {
	background-color: rgba(var(--bs-body-color-rgb), 0.1);
}

/* ── Sidebar bottom version — fixed footer ── */
#sidebar .sidebar-footer {
	flex-shrink: 0;
	background-color: hsla(var(--bs-black-hsl), 0.045) !important;
	border-top-color: var(--bs-content-border-color) !important;
}

/* ── Navbar vertical divider ── */
.navbar .vr-divider {
	height: 1.5rem;
	align-self: center;
	opacity: 0.25;
	margin: 0 0.5rem;
}

/* Navbar version label */
.navbar-version {
	font-size: 0.7rem;
	opacity: 0.4;
	margin-right: 0.5rem;
	align-self: center;
	white-space: nowrap;
}

/* ── Alerts badge ── */
.alert-level-critical {
	background-color: rgba(255, 87, 34, 0.7);
}
.alert-level-error {
	background-color: rgba(220, 53, 69, 0.7);
}
.alert-level-warning {
	background-color: rgba(255, 193, 7, 0.7);
}
.alert-level-info {
	background-color: rgba(13, 202, 240, 0.7);
}
.alert-level-default {
	background-color: rgba(108, 117, 125, 0.7);
}

[data-bs-theme="dark"] .alert-level-critical {
	background-color: rgba(255, 87, 34, 0.4);
}
[data-bs-theme="dark"] .alert-level-error {
	background-color: rgba(220, 53, 69, 0.4);
}
[data-bs-theme="dark"] .alert-level-warning {
	background-color: rgba(255, 193, 7, 0.4);
}
[data-bs-theme="dark"] .alert-level-info {
	background-color: rgba(13, 202, 240, 0.4);
}
[data-bs-theme="dark"] .alert-level-default {
	background-color: rgba(108, 117, 125, 0.4);
}

.bell-level-danger {
	background-color: rgba(220, 53, 69, 0.7);
}
.bell-level-warning {
	background-color: rgba(255, 193, 7, 0.7);
}
.bell-level-primary {
	background-color: rgba(13, 202, 240, 0.7);
}

[data-bs-theme="dark"] .bell-level-danger {
	background-color: rgba(220, 53, 69, 0.4);
}
[data-bs-theme="dark"] .bell-level-warning {
	background-color: rgba(255, 193, 7, 0.4);
}
[data-bs-theme="dark"] .bell-level-primary {
	background-color: rgba(13, 202, 240, 0.4);
}

.alerts-badge-single {
	min-width: 18px;
	height: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.55rem !important;
	padding: 0 !important;
}

/* Badge used inside alert-level column cells */
.badge.font-monospace {
	font-size: 0.7rem;
	letter-spacing: 0.03em;
}

/* Dismiss button cell — keep button constrained */
.alert-dismiss-one {
	line-height: 1;
}

/* IMEI last-5-digits: subtle highlight */
[data-bs-theme="dark"] .imei-last-digits {
	color: rgba(255, 255, 255, 0.82);
}
[data-bs-theme="light"] .imei-last-digits {
	color: rgba(0, 0, 0, 0.72);
}

/* ── Device info cards (sidebar-inspired) ── */
.device-card {
	border: 1px solid var(--bs-border-color);
	border-radius: var(--bs-border-radius);
	background: var(--bs-body-bg);
	box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.06);
}

.device-card > .card-header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background: none;
	border-bottom: 1px solid var(--bs-border-color);
	padding: 0.7rem 1rem 0.6rem;
	font-weight: 700;
	font-size: 0.92rem;
	color: var(--bs-body-color);
}

.device-card > .card-header > i {
	opacity: 0.7;
	line-height: 1;
	font-size: 1.4rem;
}

.device-card > .card-body {
	padding: 0.25rem 1rem;
}

.device-card .info-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.4rem 0;
	border-bottom: 1px solid rgba(var(--bs-body-color-rgb), 0.06);
}

.device-card .info-row:last-child {
	border-bottom: none;
}

.device-card .info-label {
	color: var(--bs-secondary-color);
	font-size: 0.82rem;
	font-weight: 500;
	white-space: nowrap;
}

.device-card .info-value {
	font-family: "cascadia_mono", monospace;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--bs-body-color);
	text-align: right;
	word-break: break-all;
	padding-left: 1rem;
}

.device-card > .card-footer {
	background: none;
	border-top: 1px solid var(--bs-border-color);
	padding: 0.45rem 1rem;
	font-size: 0.76rem;
	color: var(--bs-secondary-color);
	opacity: 0.8;
}

/* ── Device main: sortable cards ── */
.page-device-main .config-bar {
	display: none !important;
}

.device-card {
	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease;
}

/* drag handle cursor */
.drag-handle {
	cursor: grab;
	opacity: 0.5;
	transition: opacity 0.15s;
}

.drag-handle:active {
	cursor: grabbing;
}

.device-card:hover .drag-handle {
	opacity: 0.9;
}

/* original card in layout — dim while dragging */
.sortable-chosen .device-card {
	opacity: 0.4;
	cursor: grab !important;
}

/* floating element that follows mouse — subtle lift */
.sortable-fallback .device-card {
	filter: grayscale(20%);
	transform: scale(1.02) rotate(-0.7deg) !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
	opacity: 0.95;
}

/* subtle scale pulse on drop */
@keyframes card-wobble {
	0% {
		transform: scale(1.02);
	}
	50% {
		transform: scale(0.99);
	}
	100% {
		transform: scale(1);
	}
}

.device-card.card-wobble {
	animation: card-wobble 0.25s ease-out;
}

/* placeholder where card will land */
.sortable-ghost .device-card {
	background: transparent !important;
	box-shadow: none !important;
	outline: 2px dashed var(--bs-border-color);
	border-radius: 5px;
	outline-offset: -10px;
}

.sortable-ghost .device-card::after {
	position: absolute;
	top: 55px;
	margin-left: 10px;
	margin-right: 10px;
	left: 0;
	right: 0;
	z-index: -1;
	height: calc(100% - 55px - 35px);
	border-top: 2px dashed var(--bs-border-color);
	border-bottom: 2px dashed var(--bs-border-color);
	content: "";
}

.sortable-ghost .device-card .card-header,
.sortable-ghost .device-card .card-body,
.sortable-ghost .device-card .card-footer {
	visibility: hidden;
}