/* ================================================
   i-GPS Mobile — Modern Theme
   ================================================ */

:root {
	--primary: #1a73e8;
	--primary-dark: #1557b0;
	--primary-light: #e8f0fe;
	--accent: #34a853;
	--danger: #ea4335;
	--warning: #fbbc04;
	--bg: #f0f2f5;
	--bg-card: #ffffff;
	--bg-overlay: rgba(255, 255, 255, 0.95);
	--text: #1f1f1f;
	--text-secondary: #5f6368;
	--text-muted: #9aa0a6;
	--border: #e0e0e0;
	--border-light: #f0f0f0;
	--shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
	--shadow-md: 0 4px 12px rgba(0,0,0,0.1);
	--shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
	--radius: 12px;
	--radius-sm: 8px;
	--radius-xs: 6px;
	--transition: all 0.2s ease;
}

* { box-sizing: border-box; }

html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	padding: 60px 16px 16px 16px;
	background: var(--bg);
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--text);
	font-size: 14px;
	line-height: 1.5;
}

a, a:hover { text-decoration: none; color: var(--primary); }
b, strong { font-weight: 600; }

/* ================================================
   UTILITY CLASSES
   ================================================ */

.width10 { width: 10%; }
.width20 { width: 20%; }
.width33 { width: 33.33333%; }
.width40 { width: 40%; }
.width45 { width: 45%; }
.width50 { width: 50%; }
.width100 { width: 100%; }
.clearfix { display: table; width: 100%; }
.block1 { padding-right: 5px; }
.block2 { padding-left: 5px; }

/* ================================================
   LOADING PANELS
   ================================================ */

#loading_panel {
	background: transparent;
	position: fixed;
	top: 64px;
	bottom: auto;
	left: 0;
	right: 0;
	height: auto;
	z-index: 10020;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}
#loading_panel .loading-modern {
	flex-direction: row;
	gap: 8px;
	background: #fff;
	border-radius: 999px;
	padding: 8px 14px;
	box-shadow: var(--shadow-md);
}
#loading_panel .spinner-modern {
	width: 16px;
	height: 16px;
	border-width: 2px;
}

#loading_data_panel {
	background-color: rgba(255,255,255,0.85);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	position: fixed;
	top: 0; bottom: 0; left: 0; right: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.loader {
	width: 70px;
	display: block;
	margin: 25px auto;
}

.loader span {
	float: left;
	vertical-align: middle;
	width: 8px;
	height: 8px;
	margin-right: 3px;
	background: var(--primary);
	border-radius: 50%;
	opacity: 0.15;
	animation: loader 0.7s infinite alternate;
}
.loader span:nth-of-type(2) { animation-delay: 0.1s; }
.loader span:nth-of-type(3) { animation-delay: 0.2s; }
.loader span:nth-of-type(4) { animation-delay: 0.3s; }
.loader span:nth-of-type(5) { animation-delay: 0.4s; }
.loader span:nth-of-type(6) { animation-delay: 0.5s; }
.loader span:nth-of-type(7) { animation-delay: 0.6s; }

@keyframes loader {
	0% { opacity: 1; transform: scale(1.2); }
	100% { opacity: 0.15; transform: scale(1); }
}

/* Modern loading panel */
.loading-modern {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.spinner-modern {
	width: 40px;
	height: 40px;
	border: 3px solid var(--border-light);
	border-top-color: var(--primary);
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

.loading-text {
	font-size: 13px;
	color: var(--text-secondary);
	font-weight: 500;
}

.table { display: table; height: 100%; width: 100%; margin: 0; padding: 0; }
.table-cell { display: table-cell; margin: 0; padding: 0; }
.center-middle { vertical-align: middle; text-align: center; }

/* ================================================
   NAVBAR — TRACKING PAGE
   ================================================ */

.navbar { border-radius: 0; border: none; margin-bottom: 0; }
.navbar-default {
	background: var(--primary) !important;
	background-color: var(--primary) !important;
	border: none !important;
	box-shadow: var(--shadow-md);
}
.navbar-default .navbar-brand,
.navbar-default .navbar-brand:hover { color: #fff; }
.navbar-fixed-top { z-index: 1030; }

/* Modern Navbar (applied alongside Bootstrap .navbar-default) */
.navbar-modern {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 56px;
	background: var(--primary) !important;
	background-color: var(--primary) !important;
	z-index: 1030;
	border: none !important;
	box-shadow: var(--shadow-md);
	padding: 0;
	min-height: 56px;
}

.navbar-modern .navbar-modern-inner {
	display: flex;
	align-items: center;
	height: 56px;
	padding: 0 12px;
	gap: 8px;
}

.navbar-modern .navbar-btn-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-sm);
	color: #fff;
	transition: var(--transition);
	flex-shrink: 0;
}

.navbar-modern .navbar-btn-icon:hover {
	background: rgba(255,255,255,0.15);
	color: #fff;
}

.navbar-modern .navbar-title {
	flex: 1;
	min-width: 0;
	overflow: hidden;
}

.navbar-modern .navbar-title #page_title {
	color: #fff;
	font-size: 17px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 56px;
}

.navbar-modern .navbar-actions {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

/* My Location button in navbar */
.navbar-location-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: none;
	border-radius: var(--radius-xs);
	background: rgba(255,255,255,0.15);
	color: rgba(255,255,255,0.7);
	cursor: pointer;
	transition: var(--transition);
	flex-shrink: 0;
}
.navbar-location-btn:hover {
	background: rgba(255,255,255,0.25);
	color: #fff;
}
.navbar-location-btn.active {
	background: var(--primary);
	color: #fff;
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}

/* My Location blue dot on map */
.my-location-icon {
	background: transparent !important;
	border: none !important;
}
.my-location-dot {
	position: relative;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.my-location-dot-inner {
	width: 14px;
	height: 14px;
	background: var(--primary);
	border: 3px solid #fff;
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.my-location-dot-heading {
	position: absolute;
	top: -6px;
	left: 50%;
	margin-left: -6px;
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 10px solid var(--primary);
	opacity: 0;
	transform-origin: center 18px;
	transition: opacity 0.3s ease;
}

.form-select-modern {
	border: none;
	background: rgba(255,255,255,0.15);
	color: #fff;
	border-radius: var(--radius-xs);
	padding: 4px 8px;
	font-size: 13px;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}
.form-select-modern option { color: var(--text); background: #fff; }
.form-select-sm { padding: 2px 6px; font-size: 12px; }

.icon-only i {
	font-size: 18px;
	color: #ffffff;
	margin-top: 2px;
}

.show-menu {
	margin-top: 15px;
}

.container > .navbar-header,
.container-fluid > .navbar-header,
.container > .navbar-collapse,
.container-fluid > .navbar-collapse {
	margin-right: auto;
	margin-left: auto;
}

@media (min-width: 768px) {
	.navbar > .container .navbar-brand,
	.navbar > .container-fluid .navbar-brand {
		margin-left: 0;
	}
}

#map_layer {
	border: none;
	background: rgba(255,255,255,0.15);
	color: #fff;
	border-radius: var(--radius-xs);
	padding: 4px 8px;
	font-size: 13px;
}
#map_layer option { color: var(--text); background: #fff; }

#event_list_page { text-align: left; border: none; }
#event_list_page option { text-align: center; }

/* ================================================
   PAGES
   ================================================ */

.page {
	display: none;
	overflow-x: hidden;
	overflow-y: auto;
}

.page-map {
	padding: 0px;
	position: absolute;
	top: 56px;
	bottom: 0px;
	left: 0px;
	right: 0px;
}

/* ================================================
   MAP
   ================================================ */

#map { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }

/* Modern map controls — glass toolbar */
.leaflet-left .leaflet-control {
	margin-top: 10px;
	margin-left: 8px;
}

/* Base leaflet-bar — shared by zoom and view controls */
.leaflet-bar {
	border-radius: 10px !important;
	overflow: hidden;
	box-shadow: 0 1px 6px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.05) !important;
	border: none !important;
	background: rgba(255,255,255,0.95);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.leaflet-bar a,
.leaflet-bar a:hover {
	width: 28px !important;
	height: 28px !important;
	line-height: 28px !important;
	background-color: transparent !important;
	border-bottom: 1px solid rgba(0,0,0,0.06) !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease;
}
.leaflet-bar a:last-child {
	border-bottom: none !important;
}
.leaflet-bar a:hover {
	background-color: rgba(0,0,0,0.04) !important;
}
.leaflet-bar a:first-child {
	border-top-left-radius: 10px !important;
	border-top-right-radius: 10px !important;
}
.leaflet-bar a:last-child {
	border-bottom-left-radius: 10px !important;
	border-bottom-right-radius: 10px !important;
}

/* Icon spans inside toolbar — active = theme blue, inactive = grey */
.leaflet-bar a span {
	display: flex !important;
	width: 14px;
	height: 14px;
	background-size: 14px 14px;
	background-repeat: no-repeat;
	background-position: center center;
	transition: filter 0.15s ease, opacity 0.15s ease;
}
/* Active/enabled — tint icon to theme blue */
.leaflet-bar a span:not(.disabled) {
	opacity: 1;
	filter: var(--icon-active-filter, brightness(0) saturate(100%) invert(45%) sepia(98%) saturate(2000%) hue-rotate(196deg) brightness(1.05));
}
/* Disabled/off — light grey */
.leaflet-bar a span.disabled {
	opacity: 0.3;
	filter: none;
}

/* Zoom +/- */
.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	display: flex !important;
	align-items: center;
	justify-content: center;
	background-size: 12px 12px;
	background-repeat: no-repeat;
	background-position: center center;
}
.leaflet-control-zoom-in { background-image: url(images/plus.svg); }
.leaflet-control-zoom-out { background-image: url(images/minus.svg); }

/* ================================================
   HISTORY PLAYBACK
   ================================================ */

#history_playback {
	display: none;
	position: fixed;
	bottom: 120px;
	left: 8px;
	background: var(--bg-card);
	padding: 4px 8px;
	border-radius: var(--radius-sm);
	box-shadow: 0 2px 8px rgba(0,0,0,0.12);
	z-index: 1001;
	font-size: 11px;
}
#history_playback a {
	color: var(--text-secondary);
	margin: 2px 3px;
	transition: var(--transition);
}
#history_playback a svg,
#history_playback a img,
#history_playback a i {
	width: 16px;
	height: 16px;
}
#history_playback a:hover { color: var(--primary); }
#history_playback select,
#history_playback .form-select-modern {
	height: 24px;
	padding: 0 4px;
	border-radius: var(--radius-xs);
	border: 1px solid var(--border);
	font-size: 11px;
	color: var(--text) !important;
	background: var(--bg) !important;
	-webkit-appearance: auto;
	appearance: auto;
	min-width: 42px;
}

/* ================================================
   BOTTOM PANEL / DATALIST
   ================================================ */

#bottom_panel {
	position: absolute;
	bottom: 0; left: 0; right: 0;
	display: none;
	background: var(--bg-card);
	box-shadow: 0 -2px 12px rgba(0,0,0,0.1);
	border-radius: var(--radius) var(--radius) 0 0;
}

.datalist { padding: 10px; }

.datalist-object-name {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 8px 12px;
	background: var(--bg);
	font-weight: 600;
	font-size: 12px;
	border-radius: var(--radius) var(--radius) 0 0;
}

.datalist-object-name-close-icon {
	float: right;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 10px 10px;
	width: 16px;
	height: 16px;
	margin-left: 10px;
	cursor: pointer;
}

.datalist-item-list {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-content: flex-start;
	overflow-x: auto;
	height: 96px;
	font-size: 12px;
}

.data-item-text {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	font-size: 18px;
	text-align: center;
	vertical-align: middle;
	color: var(--text-muted);
}

.datalist-item {
	display: flex;
	float: left;
	width: 270px;
	min-width: 270px;
	margin-right: 15px;
	padding-left: 8px;
	padding-right: 8px;
	line-height: 26px;
}
.datalist-item.even { background-color: var(--bg); }
.datalist-item.odd { background-color: var(--bg-card); }

.datalist-item-icon {
	float: left;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 14px 14px;
	width: 24px;
	height: 24px;
}
.datalist-item-name {
	display: inline-block;
	width: 80px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--text-secondary);
}
.datalist-item-value {
	display: inline-block;
	width: 156px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: right;
	font-weight: 500;
}

/* ================================================
   OBJECTS DRAWER (map overlay)
   ================================================ */

.objects-drawer {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 900;
	display: flex;
	flex-direction: column;
	transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	height: 48px; /* collapsed: just the tab */
	pointer-events: auto;
	border-radius: 14px 14px 0 0;
	overflow: hidden;
}

.objects-drawer.expanded {
	height: 50vh;
	box-shadow: 0 -4px 20px rgba(0,0,0,0.12);
}

/* Fullscreen mode when search is focused */
.objects-drawer.fullscreen {
	position: fixed;
	top: 56px;
	left: 0;
	right: 0;
	bottom: 0;
	height: auto !important;
	border-radius: 0;
	z-index: 950;
}
.objects-drawer.fullscreen .objects-drawer-tab {
	border-radius: 0;
}

/* Tab bar — always visible */
.objects-drawer-tab {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 48px;
	min-height: 48px;
	padding: 0 16px;
	background: var(--bg-card);
	border-top: 1px solid var(--border);
	box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

/* When expanded, soften the tab's bottom edge into the content */
.objects-drawer.expanded .objects-drawer-tab {
	border-bottom: none;
	box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
	border-radius: 14px 14px 0 0;
}

.objects-drawer-tab:active {
	background: var(--bg);
}

.objects-drawer-tab-left {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--text);
	min-width: 0;
	flex: 1;
}

.objects-drawer-tab-left span {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

.objects-drawer-tab-left svg {
	color: var(--primary);
	flex-shrink: 0;
}

.objects-drawer-tab-back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--primary-light, rgba(37, 99, 235, 0.1));
	color: var(--primary) !important;
	text-decoration: none !important;
	flex-shrink: 0;
	transition: var(--transition);
}

.objects-drawer-tab-back:hover {
	background: var(--primary);
	color: #fff !important;
}

.objects-drawer-tab-back:active {
	transform: scale(0.92);
}

.objects-drawer-tab-back svg {
	color: inherit !important;
}

.objects-drawer-tab-right {
	display: flex;
	align-items: center;
}

.objects-drawer-arrow {
	color: var(--text-muted);
	transition: transform 0.3s ease;
}

.objects-drawer.expanded .objects-drawer-arrow {
	transform: rotate(180deg);
}

/* Content area — scrollable */
.objects-drawer-content {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	background: var(--bg-card, #fff);
	background: var(--bg-card);
	display: none;
}

.objects-drawer.expanded .objects-drawer-content {
	display: block;
}

/* When history view is visible, disable scrolling on content — drawer expands to fit */
.objects-drawer-content:has(#objects_drawer_history_view[style*="display: block"]),
.objects-drawer-content:has(#objects_drawer_history_view[style*="display:block"]) {
	overflow-y: visible;
}

/* Search bar in drawer */
.objects-drawer-search {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background: var(--bg-card);
	border-bottom: 1px solid rgba(0,0,0,0.04);
	position: sticky;
	top: 0;
	z-index: 2;
}

.objects-drawer-search-icon {
	color: var(--text-muted);
	flex-shrink: 0;
}

.objects-drawer-search-input {
	flex: 1;
	border: none;
	background: var(--bg);
	border-radius: 20px;
	padding: 8px 14px;
	font-size: 13px;
	color: var(--text);
	outline: none;
	transition: var(--transition);
}

.objects-drawer-search-input:focus {
	background: var(--bg);
	box-shadow: 0 0 0 2px var(--primary-light);
}

.objects-drawer-search-input::placeholder {
	color: var(--text-muted);
}

.objects-drawer-search-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	color: #fff;
	background: #dc2626;
	flex-shrink: 0;
	transition: var(--transition);
}

.objects-drawer-search-close:hover {
	background: #b91c1c;
	color: #fff;
}

/* Object list inside drawer */
.objects-drawer-list {
	padding: 0;
}

.objects-drawer-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 16px;
	background: var(--bg-card);
	border-bottom: 1px solid rgba(0,0,0,0.04);
	cursor: pointer;
	transition: background 0.2s ease;
	-webkit-tap-highlight-color: transparent;
}

.objects-drawer-item:active {
	background: var(--primary-light);
}

.objects-drawer-item:last-child {
	border-bottom: none;
}

.objects-drawer-item-left {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
	min-width: 0;
}

.objects-drawer-item-icon {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bg);
	border-radius: 50%;
	flex-shrink: 0;
}

.objects-drawer-item-icon img {
	width: 20px;
	height: 20px;
}

.objects-drawer-item-info {
	flex: 1;
	min-width: 0;
}

.objects-drawer-item-name {
	font-size: 13px;
	font-weight: 500;
	color: var(--text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.objects-drawer-item-status {
	font-size: 11px;
	color: var(--text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.objects-drawer-item-right {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

.objects-drawer-item-speed {
	font-size: 12px;
	color: var(--text-secondary);
	font-weight: 500;
}

.objects-drawer-item-detail-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--radius-xs);
	color: var(--primary);
	transition: var(--transition);
}

.objects-drawer-item-detail-btn:hover {
	background: var(--primary-light);
}

/* Detail view inside drawer */
.objects-drawer-detail-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px;
	background: var(--bg-card);
	border-bottom: 1px solid var(--border);
	position: sticky;
	top: 0;
	z-index: 1;
}

.objects-drawer-back-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px 12px 6px 8px;
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: 50px;
	color: var(--primary) !important;
	font-size: 13px;
	font-weight: 500;
	transition: var(--transition);
	text-decoration: none !important;
	flex-shrink: 0;
}

.objects-drawer-back-btn:hover {
	background: var(--primary-light);
	border-color: var(--primary);
}

.objects-drawer-back-btn:active {
	transform: scale(0.96);
}

.objects-drawer-detail-title {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1;
	min-width: 0;
}

.objects-drawer-detail-title svg {
	flex-shrink: 0;
	color: var(--text-secondary);
}

.objects-drawer-detail-name {
	font-size: 14px;
	font-weight: 600;
	color: var(--text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.objects-drawer-detail-content {
	padding: 0;
}

.objects-drawer-detail-content .panel {
	margin: 0;
	border-radius: 0;
	border: none;
	box-shadow: none;
}

.objects-drawer-detail-content .list-group-item {
	border-radius: 0;
	border-left: none;
	border-right: none;
	padding: 8px 16px;
	font-size: 13px;
}

.objects-drawer-detail-content .panel-heading {
	border-radius: 0;
	padding: 8px 16px;
	font-weight: 600;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--text-secondary);
	background: var(--bg);
}

/* Status color indicators on drawer items — gradient fade from left to right */
.objects-drawer-status-moving {
	background: linear-gradient(to right, rgba(34, 197, 94, 0.18) 0%, rgba(34, 197, 94, 0.06) 35%, var(--bg-card) 70%) !important;
}
.objects-drawer-status-moving .objects-drawer-item-icon {
	background: rgba(34, 197, 94, 0.18);
}
.objects-drawer-status-moving .objects-drawer-item-icon svg {
	color: #22c55e;
}
.objects-drawer-status-moving .objects-drawer-item-speed {
	color: #16a34a;
	font-weight: 600;
}

.objects-drawer-status-stationary {
	background: linear-gradient(to right, rgba(245, 158, 11, 0.20) 0%, rgba(245, 158, 11, 0.06) 35%, var(--bg-card) 70%) !important;
}
.objects-drawer-status-stationary .objects-drawer-item-icon {
	background: rgba(245, 158, 11, 0.18);
}
.objects-drawer-status-stationary .objects-drawer-item-icon svg {
	color: #f59e0b;
}

.objects-drawer-status-offline {
	background: linear-gradient(to right, rgba(185, 28, 28, 0.18) 0%, rgba(185, 28, 28, 0.06) 35%, var(--bg-card) 70%) !important;
}
.objects-drawer-status-offline .objects-drawer-item-icon {
	background: rgba(185, 28, 28, 0.14);
}
.objects-drawer-status-offline .objects-drawer-item-icon svg {
	color: #b91c1c;
}
.objects-drawer-status-offline .objects-drawer-item-name {
	color: var(--text-muted) !important;
}
.objects-drawer-status-offline .objects-drawer-item-status {
	color: #b91c1c;
}

/* Clickable object name */
.objects-drawer-item-name {
	cursor: pointer;
	text-decoration: none !important;
	color: var(--text) !important;
}
.objects-drawer-item-name:hover {
	color: var(--primary) !important;
}
.objects-drawer-item-name:active {
	color: var(--primary) !important;
}
a.objects-drawer-item-name {
	display: block;
}

/* History button (clock icon) next to hamburger */
.objects-drawer-item-history-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--radius-xs);
	color: var(--primary);
	transition: var(--transition);
}
.objects-drawer-item-history-btn:hover {
	background: var(--primary-light);
}

/* History view inside drawer — clean form */
.objects-drawer-history-content {
	padding: 16px;
}

.drawer-history-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.drawer-history-section {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.drawer-history-section-title {
	font-size: 11px;
	font-weight: 600;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.drawer-history-select,
.drawer-history-input {
	width: 100%;
	height: 38px;
	padding: 0 10px;
	font-size: 13px;
	color: var(--text);
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	outline: none;
	transition: border-color 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.drawer-history-select {
	background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	padding-right: 28px;
}

.drawer-history-select:focus,
.drawer-history-input:focus {
	border-color: var(--primary);
}

.drawer-history-row {
	display: flex;
	gap: 10px;
}

.drawer-history-half {
	flex: 1;
}

.drawer-history-third {
	flex: 1;
}

.drawer-history-actions {
	padding-top: 4px;
}

.drawer-history-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	height: 42px;
	border: none;
	border-radius: var(--radius-sm);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: var(--transition);
}

.drawer-history-btn-show {
	background: var(--primary);
	color: #fff;
}

.drawer-history-btn-show:active {
	background: #2563eb;
	transform: scale(0.98);
}

.drawer-history-btn-show svg {
	stroke: #fff;
}

/* ================================================
   HISTORY NAVBAR (bottom)
   ================================================ */

/* History bottom navigation (modern) */
.history-bottom-nav {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: var(--bg-card);
	border-top: 1px solid var(--border-light);
	box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
	z-index: 1000;
	padding: 12px 14px calc(env(safe-area-inset-bottom, 10px) + 12px);
	min-height: auto;
}

/* Nav buttons row — spread evenly */
.history-nav-items {
	display: flex;
	gap: 6px;
}

.history-nav-btn {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 9px 6px;
	border-radius: 20px;
	color: var(--text-secondary);
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
	background: var(--bg);
	border: 1px solid var(--border-light);
}

.history-nav-btn:hover {
	border-color: var(--border);
	color: var(--text);
}

.history-nav-btn.active {
	background: var(--primary);
	color: #fff;
	border-color: var(--primary);
}

.history-nav-btn.active svg {
	stroke: #fff;
}

.history-nav-btn svg {
	flex-shrink: 0;
}

/* Back button row — left-aligned below nav buttons */
.history-nav-bottom-row {
	display: flex;
	margin-top: 4px;
	padding-bottom: 2px;
}

.history-nav-back {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 10px 18px 10px 12px;
	border-radius: 22px;
	background: var(--bg);
	border: 1px solid var(--border);
	color: var(--primary);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.history-nav-back:hover {
	background: var(--primary-light);
	border-color: var(--primary);
}

.history-nav-back:active {
	transform: scale(0.96);
}

.history-nav-back svg {
	flex-shrink: 0;
}

/* Legacy compat — force all nav buttons visible regardless of gs.main.js display toggling */
#history_navbar_map { display: flex !important; }
#history_navbar_graph { display: flex !important; }
#history_navbar_details { display: flex !important; }

/* Playback controls (modern) */
.playback-controls {
	display: flex;
	align-items: center;
	gap: 4px;
}

.playback-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: var(--text-secondary);
	cursor: pointer;
	transition: var(--transition);
	border-radius: var(--radius-xs);
}

.playback-btn:hover {
	color: var(--primary);
	background: var(--primary-light);
}

/* ================================================
   GRAPH PANEL
   ================================================ */

.graph-panel {
	display: none;
	position: absolute;
	top: 0; bottom: 0; left: 0; right: 0;
	background: var(--bg-overlay);
	padding: 20px 16px 16px 16px;
	z-index: 20;
	overflow: visible;
}
.graph-panel-label {
	position: absolute;
	right: 25px;
	top: 75px;
	font-size: 12px;
	color: var(--text-secondary);
}
.graph-panel-plot {
	height: 100%;
	width: 100%;
}
.graph-controls {
	margin-bottom: 10px;
	display: table;
	width: 100%;
	position: relative;
	z-index: 30;
}
.graph-controls div { display: inline-block; vertical-align: middle; }
.graph-controls-left { float: left; position: relative; z-index: 31; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.graph-controls-right { float: right; }

/* Graph dropdown — override navbar white-on-transparent style */
.graph-controls-left select,
.graph-controls-left .form-select-modern {
	position: relative;
	z-index: 31;
	color: var(--text) !important;
	background: var(--bg) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius-sm) !important;
	padding: 0 10px !important;
	font-size: 13px;
	-webkit-appearance: auto;
	appearance: auto;
	min-width: 110px;
	height: 36px;
	box-sizing: border-box;
	margin: 0;
	vertical-align: middle;
}
/* Compare toggle — match exact select/dropdown sizing */
.graph-compare-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 500;
	color: var(--text) !important;
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
	padding: 6px 10px !important;
	border-radius: var(--radius-sm) !important;
	background: var(--bg) !important;
	border: 1px solid var(--border) !important;
	transition: var(--transition);
	height: 36px;
	box-sizing: border-box;
	position: relative;
	z-index: 31;
	margin: 0;
	vertical-align: middle;
}
.graph-compare-toggle:hover {
	border-color: var(--primary) !important;
	color: var(--primary) !important;
}
.graph-compare-toggle input[type="checkbox"] {
	accent-color: var(--primary);
	width: 16px;
	height: 16px;
	margin: 0;
	cursor: pointer;
}
.graph-compare-select {
	min-width: 100px;
}

.graph-controls a {
	margin: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--radius-xs);
	background: var(--bg);
	color: var(--text-secondary);
	transition: var(--transition);
}
.graph-controls a:hover { background: var(--primary-light); color: var(--primary); }

/* ================================================
   DETAILS PANEL (Route)
   ================================================ */

.details-panel {
	display: none;
	position: absolute;
	top: 0; bottom: 0; left: 0; right: 0;
	background: var(--bg-overlay);
	padding: 20px 16px 16px 16px;
	z-index: 20;
	overflow-x: hidden;
	overflow-y: auto;
}

/* ================================================
   PLACES NAVBAR
   ================================================ */

#places_navbar {
	position: fixed !important;
	bottom: 12px;
	left: 12px;
	right: 12px;
	min-height: 0px;
	background: var(--bg-card);
	border: none;
	border-radius: 16px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.12);
	z-index: 1000;
	padding: 8px;
	margin: 0;
}
#places_navbar .container-fluid {
	padding: 0;
}
#places_navbar .row {
	display: flex !important;
	margin: 0;
	gap: 8px;
}
#places_navbar .width33 {
	flex: 1;
}
#places_navbar a {
	color: #fff !important;
	font-size: 13px;
	font-weight: 600;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px 14px;
	border-radius: 12px;
	background: var(--primary) !important;
	border: none !important;
	box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
	transition: var(--transition);
	text-decoration: none !important;
	white-space: nowrap;
}
#places_navbar a svg {
	color: #fff !important;
}
#places_navbar a:hover,
#places_navbar a:active {
	background: var(--primary-hover, #1d4ed8) !important;
	box-shadow: 0 4px 10px rgba(37, 99, 235, 0.35);
}
#places_navbar a svg {
	flex-shrink: 0;
	margin: 0;
}

.places-bottom-nav .btn {
	border: none !important;
	background: transparent !important;
	width: 100%;
}

/* Ensure places page content doesn't get hidden behind the fixed nav */
#page_places .markers-panel,
#page_places .routes-panel,
#page_places .zones-panel {
	padding-bottom: 80px;
}

/* ================================================
   MARKERS, ROUTES, ZONES PANELS
   ================================================ */

.markers-panel,
.routes-panel,
.zones-panel {
	display: none;
	position: absolute;
	top: 0; bottom: 0; left: 0; right: 0;
	background: var(--bg);
	padding: 70px 16px 16px 16px;
	z-index: 10;
	overflow-x: hidden;
	overflow-y: auto;
}

/* ================================================
   MENU PANEL
   ================================================ */

.page-menu { display: none; }

.menu-block {
	position: fixed;
	top: 0; left: 0; bottom: 0;
	width: 100%;
	height: 100%;
	color: var(--text);
	z-index: 999999;
	background: var(--bg);
	overflow-y: auto;
}

.page-menu .title-block {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 16px;
	height: 56px;
	background: var(--primary) !important;
	background-color: var(--primary) !important;
}

.page-menu .page-title {
	font-size: 18px;
	font-weight: 600;
	color: #fff !important;
	background: transparent !important;
	background-color: transparent !important;
	line-height: 56px;
	padding: 0 !important;
}

.menu-back-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px 6px 10px;
	color: #fff !important;
	background: rgba(255,255,255,0.15);
	border: 1px solid rgba(255,255,255,0.3);
	border-radius: 50px;
	font-size: 15px;
	font-weight: 600;
	transition: var(--transition);
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	text-decoration: none !important;
}
.menu-back-btn:hover {
	background: rgba(255,255,255,0.25);
	border-color: rgba(255,255,255,0.5);
	color: #fff !important;
}
.menu-back-btn:active {
	background: rgba(255,255,255,0.1);
	transform: scale(0.96);
}
.menu-back-btn svg {
	flex-shrink: 0;
}

.menu-close-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	color: rgba(255,255,255,0.8) !important;
	background: rgba(255,255,255,0.1);
	border: 1px solid rgba(255,255,255,0.2);
	transition: var(--transition);
	cursor: pointer;
}
.menu-close-btn:hover {
	color: #fff !important;
	background: rgba(255,255,255,0.2);
	border-color: rgba(255,255,255,0.4);
}
.menu-close-btn:active {
	transform: scale(0.92);
	background: rgba(255,255,255,0.05);
}

.page-menu .title-block i {
	color: #ffffff;
	position: absolute;
	right: 16px;
	top: 20px;
}

.page-menu ul {
	padding: 16px;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	list-style: none;
}
/* Prevent clearfix pseudo-elements from becoming grid items */
.page-menu ul::before,
.page-menu ul::after {
	display: none;
}

.page-menu ul li {
	width: 100%;
	float: none;
	padding: 0;
}

.page-menu ul li a {
	color: var(--text) !important;
	font-size: 13px;
	font-weight: 500;
	padding: 20px 8px 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-bottom: 3px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	transition: var(--transition);
	cursor: pointer;
	-webkit-tap-highlight-color: rgba(26, 115, 232, 0.1);
	user-select: none;
}

.page-menu ul li a:hover {
	border-color: var(--primary);
	border-bottom-color: var(--primary);
	box-shadow: var(--shadow-md);
	transform: translateY(-1px);
	background: #f8faff;
}

.page-menu ul li a:active {
	transform: translateY(1px);
	border-bottom-width: 1px;
	margin-bottom: 2px;
	box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
	background: var(--primary-light);
}

.menu-icon-wrap {
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--primary-light);
	border-radius: 50%;
	color: var(--primary);
	transition: var(--transition);
}

.page-menu ul li a:hover .menu-icon-wrap {
	background: var(--primary);
	color: #fff;
}

.page-menu ul li a:active .menu-icon-wrap {
	background: var(--primary-dark);
	color: #fff;
	transform: scale(0.95);
}

.page-menu ul li a i {
	width: 100%;
	font-size: 24px;
	margin-bottom: 8px;
	color: var(--primary);
}

.page-menu .button-block {
	margin: 0 16px 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.page-menu .button-block a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px;
	border-radius: var(--radius-sm);
	font-size: 14px;
	font-weight: 500;
	transition: var(--transition);
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}
.page-menu .button-block a:active {
	transform: scale(0.98);
}

.desktop-btn {
	color: var(--text-secondary) !important;
	background: var(--bg-card);
	border: 1px solid var(--border);
}
.desktop-btn:hover { border-color: var(--primary); color: var(--primary) !important; }

.logout-btn {
	color: var(--danger) !important;
	background: #fce8e6;
}
.logout-btn:hover { background: #f8d7da; }

/* ================================================
   SEARCH BAR
   ================================================ */

.search-bar {
	position: relative;
	margin-bottom: 12px;
}

.search-bar .form-control {
	padding-left: 40px;
	padding-right: 36px;
	height: 44px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border);
	background: var(--bg-card);
	font-size: 14px;
	transition: var(--transition);
}

.search-bar .form-control:focus {
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.15);
}

.search-bar-icon {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--text-muted);
	z-index: 1;
}

.search-clear-btn {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	color: var(--text-muted);
	transition: var(--transition);
	z-index: 1;
}
.search-clear-btn:hover { color: var(--text); }

.search-clear {
	position: absolute;
	right: 25px;
	top: 80px;
	cursor: pointer;
	color: #ccc;
	z-index: 1;
}

/* ================================================
   LIST GROUP + OBJECT LIST
   ================================================ */

.list-group-btn { border: 0px; }
.list-group-item {
	padding: 8px 10px;
	font-size: 13px;
	border-color: var(--border-light);
	transition: var(--transition);
}
.list-group-item:hover { background: var(--bg); }
.list-group-item .icon { float: left; margin-top: 4px; margin-right: 10px; }
.list-group-item:first-child { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.list-group-item:last-child { border-radius: 0 0 var(--radius-sm) var(--radius-sm); }

.object-item { display: table; width: 100%; cursor: pointer; }

/* Objects page — actions row (visibility/follow icons) above the list */
.objects-page-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 14px;
	padding: 4px 0 6px;
}
.objects-page-actions .visible,
.objects-page-actions .follow {
	cursor: pointer;
	color: var(--text-muted);
	display: flex;
	align-items: center;
}
.objects-page-actions .visible.checked,
.objects-page-actions .follow.checked {
	color: var(--primary);
}

#page_object_list .visible,
#page_object_list .follow,
#page_object_list .details { cursor: pointer; }

#page_object_list a { color: inherit; }

#page_object_list_header .row,
#page_object_list .row { margin-left: 0; margin-right: 0; }
#page_object_list_header { padding: 0 15px; }
#page_object_list_header .form-group { margin-bottom: 8px; }
#page_object_list_header .searchable-select { margin-bottom: 0; }
#page_object_list_header .search-bar { margin: 0 0 8px 0; }

.object-list-item {
	height: 36px;
	width: 100%;
}
.object-list-item .left { float: left; width: 120px; }
.object-list-item .right { display: table; height: 100%; float: right; }
.object-list-item .name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 500;
}
.object-list-item .status {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--text-muted);
	font-size: 11px;
}
.object-list-item .speed,
.object-list-item .engine,
.object-list-item .connection,
.object-list-item .visible,
.object-list-item .follow,
.object-list-item .details {
	display: table-cell;
	vertical-align: middle;
	height: 100%;
	text-align: center;
	padding: 3px;
}
.object-list-item .speed { max-width: 60px; text-overflow: ellipsis; overflow: hidden; }
.object-list-item .visible,
.object-list-item .follow { font-size: 16px; color: var(--text-muted); }
.object-list-item .details { padding-right: 0; font-size: 16px; color: var(--primary); }
.object-list-item .checked { color: var(--primary); }

@media only screen and (max-width: 400px) {
	.list-group-item .icon { display: none; }
}

/* ================================================
   FORMS
   ================================================ */

.form-label-col {
	font-size: 13px;
	font-weight: 500;
	color: var(--text-secondary);
}

.form-control {
	border-radius: var(--radius-xs);
	border-color: var(--border);
	box-shadow: none;
	font-size: 14px;
	height: 40px;
	transition: var(--transition);
}
.form-control:focus {
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.12);
}

.input-group-addon {
	border-radius: var(--radius-xs);
	border-color: var(--border);
	background: var(--bg);
}

.form-group { margin-bottom: 12px; }

.vertical-align {
	display: flex;
	align-items: center;
}

.settings-section-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--primary);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin: 24px 0 12px 0;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--primary-light);
}

.form-actions {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--border-light);
}

/* ================================================
   BUTTONS
   ================================================ */

a i, .btn i { margin-right: 5px; }
.btn {
	border-radius: var(--radius-xs);
	border-color: var(--border);
	overflow: hidden;
	font-weight: 500;
	transition: var(--transition);
}
.btn:active { transform: scale(0.98); }

.btn.btn-green { background-color: var(--accent); color: #fff; border-color: var(--accent); }
.btn.btn-blue { background-color: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; }
.btn.btn-blue:hover { background-color: var(--primary-dark) !important; }

.btn-modern-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	padding: 10px 16px;
	font-size: 14px;
	font-weight: 500;
	border-radius: var(--radius-sm);
	transition: var(--transition);
	cursor: pointer;
}
.btn-modern-action.btn-primary {
	background: var(--primary);
	color: #fff;
	border: none;
}
.btn-modern-action.btn-primary:hover { background: var(--primary-dark); }
.btn-modern-action.btn-outline {
	background: var(--bg-card);
	color: var(--text-secondary);
	border: 1px solid var(--border);
}
.btn-modern-action.btn-outline:hover { border-color: var(--primary); color: var(--primary); }

.btn.back-btn {
	margin-bottom: 16px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.btn.login-btn { margin-bottom: 15px; }
.btn.desktop-btn { margin-bottom: 15px; }
.btn-full { width: 100%; }

.btn-group { width: 100%; }
.dropdown-menu { min-width: auto; width: 100%; }
.dropdown-toggle { min-width: auto; width: 100%; }

.btn-primary,
.btn-primary:hover,
.btn-primary:focus {
	background-color: var(--primary);
	border: 1px solid var(--primary);
}

/* ================================================
   MODALS / PANELS
   ================================================ */

.modal-content { border-radius: var(--radius); }
.modal-body { padding: 20px 16px 16px 16px; }
.panel { border-radius: var(--radius-sm); border-color: var(--border-light); box-shadow: var(--shadow-sm); }

/* ================================================
   CHECKBOX (Bootstrap custom)
   ================================================ */

.form-group input[type="checkbox"] { display: none; }
.form-group input[type="checkbox"] + .btn-group > label span { width: 20px; }
.form-group input[type="checkbox"] + .btn-group > label span:first-child { display: none; }
.form-group input[type="checkbox"] + .btn-group > label span:last-child { display: inline-block; }
.form-group input[type="checkbox"]:checked + .btn-group > label span:first-child { display: inline-block; }
.form-group input[type="checkbox"]:checked + .btn-group > label span:last-child { display: none; }

/* ================================================
   DATEPICKER
   ================================================ */

.dtpicker-content { background: #fff; height: 200px; border-radius: var(--radius-sm); }
.dtpicker-components .dtpicker-comp { border: 1px solid var(--border); margin-right: 3px; border-radius: var(--radius-xs); }
.dtpicker-components .dtpicker-compValue { margin: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.dtpicker-buttonCont { margin: 10px 0; padding: 5px 0; }
.dtpicker-components .dtpicker-compButton,
.dtpicker-components .dtpicker-compButton:hover { background: var(--bg); color: var(--text); text-decoration: none; }
.dtpicker-components .dtpicker-compValue,
.dtpicker-components .dtpicker-compValue:hover { color: var(--text); }

/* ================================================
   LOGIN PAGE
   ================================================ */

.login-page {
	padding: 0;
	background: linear-gradient(135deg, #e8e8e8 0%, #f5f5f5 50%, #e0e0e0 100%);
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.login-page .navbar-brand { height: auto; }
.login-page .navbar-default { margin-left: -15px; margin-right: -15px; }

/* Install Prompt */
.install-prompt {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: 20px;
}

.install-prompt-inner {
	text-align: center;
	color: #333;
	max-width: 320px;
}

.install-prompt-inner h2 {
	font-size: 22px;
	font-weight: 600;
	margin: 16px 0 8px;
}

.install-prompt-inner p {
	font-size: 14px;
	opacity: 0.85;
	margin-bottom: 24px;
}

.install-icon { color: #d32f2f; }

#install-button,
.btn-modern.btn-modern-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 32px;
	background: #d32f2f;
	color: #fff;
	border: none;
	border-radius: 50px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: var(--transition);
	box-shadow: 0 4px 12px rgba(211, 47, 47, 0.3);
}

#install-button:hover,
.btn-modern.btn-modern-primary:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-lg);
}

/* Login Container */
.login-container {
	width: 100%;
	padding: 20px;
	display: flex;
	justify-content: center;
}

.login-card {
	width: 100%;
	max-width: 400px;
	background: var(--bg-card);
	border-radius: 20px;
	padding: 32px 24px;
	box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.login-header { text-align: center; margin-bottom: 28px; }

.login-logo {
	max-width: 180px;
	max-height: 80px;
	margin-bottom: 16px;
	object-fit: contain;
}

.login-title {
	font-size: 22px;
	font-weight: 700;
	color: var(--text);
	margin: 0 0 4px;
}

.login-subtitle {
	font-size: 14px;
	color: var(--text-secondary);
	margin: 0;
}

.login-form { display: flex; flex-direction: column; gap: 16px; }

.form-group-modern { display: flex; flex-direction: column; gap: 6px; }
.form-label-modern { font-size: 13px; font-weight: 500; color: var(--text-secondary); }

.input-with-icon {
	position: relative;
}

.input-icon {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--text-muted);
}

.form-input-modern {
	width: 100%;
	padding: 12px 14px 12px 44px;
	border: 1.5px solid var(--border);
	border-radius: var(--radius-sm);
	font-size: 16px;
	font-family: inherit;
	color: var(--text);
	background: var(--bg);
	transition: var(--transition);
	outline: none;
}

.form-input-modern:focus {
	border-color: var(--primary);
	background: var(--bg-card);
	box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.12);
}
.login-page .form-input-modern:focus {
	border-color: #d32f2f;
	box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.12);
}
.login-page .checkbox-modern input[type="checkbox"] {
	accent-color: #d32f2f;
}

select.form-input-modern { padding-left: 14px; }
.form-input-sm { font-size: 13px; padding: 8px 12px; }

.login-options {
	display: flex;
	align-items: center;
}

.checkbox-modern {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-size: 14px;
	color: var(--text-secondary);
	user-select: none;
}

.checkbox-modern input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--primary);
	cursor: pointer;
}

.btn-login {
	width: 100%;
	padding: 14px;
	background: #d32f2f !important;
	color: #fff !important;
	border: none;
	border-radius: var(--radius-sm) !important;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(211, 47, 47, 0.3);
}
.btn-login:hover { background: #b71c1c !important; }

.login-footer {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding-top: 12px;
}

.btn-modern-ghost {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	color: var(--text-secondary);
	background: transparent;
	border: 1px solid var(--border);
	border-radius: var(--radius-xs);
	font-size: 13px;
	transition: var(--transition);
}
.btn-modern-ghost:hover { border-color: var(--primary); color: var(--primary); }

.language-select select {
	padding-left: 12px;
}

.login-version {
	text-align: center;
	margin-top: 20px;
	font-size: 12px;
	color: var(--text-muted);
}

.login-page .buttons-block {
	padding-top: 20px;
	border-top: 1px solid var(--border-light);
}
.login-page .remember-me { padding-top: 6px; }
.login-page .btn-remember-me { padding-right: 10px; }

.logo { border: 0; max-width: 200px; height: auto; margin: 5px auto 20px; display: block; }

/* ================================================
   ICONS — SVG BACKGROUNDS
   ================================================ */

.icon-objects { background-image: url(images/object-arrow.svg); }
.icon-text { background-image: url(images/text.svg); }
.icon-marker { background-image: url(images/marker.svg); }
.icon-markers { background-image: url(images/markers.svg); }
.icon-routes { background-image: url(images/routes.svg); }
.icon-zones { background-image: url(images/zones.svg); }
.icon-kml { background-image: url(images/kml.svg); }
.icon-clusters { background-image: url(images/clusters.svg); }
.icon-traffic { background-image: url(images/traffic.svg); }
.icon-time { background-image: url(images/time.svg); }
.icon-warning { background-image: url(images/warning.svg); }
.icon-nearest-marker { background-image: url(images/nearest-marker.svg); }
.icon-nearest-zone { background-image: url(images/nearest-zone.svg); }
.icon-address { background-image: url(images/address.svg); }
.icon-altitude { background-image: url(images/altitude.svg); }
.icon-angle { background-image: url(images/angle.svg); }
.icon-speed { background-image: url(images/speed.svg); }
.icon-engine-hours { background-image: url(images/engine-hours.svg); }
.icon-odometer { background-image: url(images/odometer.svg); }
.icon-model { background-image: url(images/model.svg); }
.icon-plate-number { background-image: url(images/plate-number.svg); }
.icon-sim { background-image: url(images/sim.svg); }
.icon-vin { background-image: url(images/vin.svg); }
.icon-user { background-image: url(images/user.svg); }
.icon-trailer { background-image: url(images/trailer.svg); }
.icon-default-custom-fields { background-image: url(images/default-custom-fields.svg); }
.icon-default-sensor { background-image: url(images/default-sensor.svg); }
.icon-status { background-image: url(images/status.svg); }
.icon-battery-lev-0 { background-image: url(images/battery-lev-0.svg); }
.icon-battery-lev-1 { background-image: url(images/battery-lev-1.svg); }
.icon-battery-lev-2 { background-image: url(images/battery-lev-2.svg); }
.icon-battery-lev-3 { background-image: url(images/battery-lev-3.svg); }
.icon-di { background-image: url(images/di.svg); }
.icon-do { background-image: url(images/do.svg); }
.icon-fuel { background-image: url(images/fuel.svg); }
.icon-engine { background-image: url(images/engine.svg); }
.icon-gsm { background-image: url(images/gsm.svg); }
.icon-gps { background-image: url(images/gps.svg); }
.icon-temperature { background-image: url(images/temperature.svg); }
.icon-close { background-image: url(images/remove.svg); }

/* ================================================
   CUSTOM GLYPHICONS
   ================================================ */

@font-face {
	font-family: 'Glyphicons Halflings';
	src: url('../theme/fonts/custom/glyphicons-custom.eot');
	src: url('../theme/fonts/custom/glyphicons-custom.eot?#iefix') format('embedded-opentype'),
		url('../theme/fonts/custom/glyphicons-custom.woff2') format('woff2'),
		url('../theme/fonts/custom/glyphicons-custom.woff') format('woff'),
		url('../theme/fonts/custom/glyphicons-custom.ttf') format('truetype'),
		url('../theme/fonts/custom/glyphicons-custom.svg#glyphicons_halflingsregular') format('svg');
}

.glyphicon-desktop:before { content: "\e261"; }
.glyphicon-exit:before { content: "\e262"; }
.glyphicon-cheeckbook:before { content: "\e263"; }
.glyphicon-history:before { content: "\e264"; }
.glyphicon-openlock:before { content: "\e265"; }
/* ================================================
   Objects Page — Status gradient colors (same as drawer)
   ================================================ */
#page_object_list .objects-page-status-moving {
	background: linear-gradient(to right, rgba(34, 197, 94, 0.18) 0%, rgba(34, 197, 94, 0.06) 35%, transparent 70%) !important;
}
#page_object_list .objects-page-status-stationary {
	background: linear-gradient(to right, rgba(245, 158, 11, 0.20) 0%, rgba(245, 158, 11, 0.06) 35%, transparent 70%) !important;
}
#page_object_list .objects-page-status-offline {
	background: linear-gradient(to right, rgba(185, 28, 28, 0.18) 0%, rgba(185, 28, 28, 0.06) 35%, transparent 70%) !important;
}
#page_object_list .objects-page-status-idle {
	background: linear-gradient(to right, rgba(100, 116, 139, 0.18) 0%, rgba(100, 116, 139, 0.06) 35%, transparent 70%) !important;
}

/* Objects Page — Back button inline with controls */
.objects-page-back-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 5px 14px 5px 8px;
	border-radius: 20px;
	background: var(--primary);
	color: #fff !important;
	font-size: 13px;
	font-weight: 500;
	text-decoration: none !important;
	transition: all 0.2s ease;
	white-space: nowrap;
}
.objects-page-back-btn:hover {
	background: var(--primary-hover);
	color: #fff !important;
}
.objects-page-back-btn:active {
	transform: scale(0.96);
}
.objects-page-back-btn svg {
	flex-shrink: 0;
}

/* Page-level back button row — consistent across all pages */
.page-back-row {
	display: flex;
	align-items: center;
	padding: 8px 16px 4px;
}

/* ================================================
   Reports Page Styles
   ================================================ */

/* Reports loading overlay */
.reports-loading-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
}

.reports-loading-card {
	background: var(--bg-card);
	border-radius: var(--radius);
	padding: 30px 40px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	box-shadow: var(--shadow-lg);
	min-width: 220px;
}

.reports-spinner {
	width: 40px;
	height: 40px;
	border: 4px solid var(--border);
	border-top: 4px solid var(--primary);
	border-radius: 50%;
	animation: reports-spin 0.8s linear infinite;
}

@keyframes reports-spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.reports-loading-text {
	font-size: 15px;
	font-weight: 600;
	color: var(--text);
}

.reports-loading-sub {
	font-size: 12px;
	color: var(--text-secondary);
	text-align: center;
}

/* Reports form specific tweaks */
#page_reports .form-group {
	margin-bottom: 8px;
}
#page_reports .form-label-col {
	font-size: 13px;
	font-weight: 500;
	color: var(--text-secondary);
}

/* Data Items dropdown — normal document flow (pushes content down) */
.reports-di-panel {
	display: none;
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-xs);
	max-height: 280px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	margin: -4px 15px 8px 15px;
}
.reports-di-panel.open {
	display: block !important;
}
.reports-di-row {
	display: flex !important;
	align-items: center !important;
	gap: 10px;
	padding: 9px 12px;
	cursor: pointer;
	border-bottom: 1px solid #f0f0f0;
	-webkit-tap-highlight-color: transparent;
}
.reports-di-row:last-of-type {
	border-bottom: none;
}
.reports-di-row:active {
	background: #f5f8ff;
}
.reports-di-row-all {
	background: #f8f9fa;
	border-bottom: 1px solid var(--border) !important;
	position: sticky;
	top: 0;
	z-index: 1;
}
.reports-di-check {
	width: 18px;
	height: 18px;
	min-width: 18px;
	border-radius: 3px;
	border: 2px solid #ccc;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 12px;
	font-weight: 700;
	color: transparent;
	flex-shrink: 0;
	transition: all 0.15s ease;
	background: #fff;
	line-height: 1;
}
.reports-di-check.checked {
	background: var(--primary);
	border-color: var(--primary);
	color: #fff;
}
.reports-di-label {
	font-size: 13px;
	color: var(--text);
	line-height: 1.3;
}
#page_reports_data_items_trigger {
	border-color: var(--border);
}
#page_reports_data_items_trigger.open {
	border-color: var(--primary);
	border-radius: var(--radius-xs) var(--radius-xs) 0 0;
}

/* btn-full for full width buttons */
.btn-full {
	width: 100%;
	justify-content: center;
}

/* ================================================
   SEARCHABLE SELECT DROPDOWN
   ================================================ */
.searchable-select {
	position: relative;
}

.searchable-select-trigger {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	-webkit-appearance: none;
	user-select: none;
	min-height: 34px;
}

.searchable-select-trigger.open {
	border-color: var(--primary);
	border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.searchable-select-trigger.open svg {
	transform: rotate(180deg);
}

.searchable-select-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1;
}

.searchable-select-dropdown {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--bg-card);
	border: 1px solid var(--primary);
	border-top: none;
	border-radius: 0 0 var(--radius-sm) var(--radius-sm);
	z-index: 1050;
	max-height: 260px;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
	display: flex;
	flex-direction: column;
}

.searchable-select.open .searchable-select-dropdown {
	display: flex !important;
}

.searchable-select:not(.open) .searchable-select-dropdown {
	display: none !important;
}

.searchable-select-search-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border-bottom: 1px solid var(--border);
	background: var(--bg);
	flex-shrink: 0;
}

.searchable-select-search {
	flex: 1;
	border: none;
	background: transparent;
	font-size: 13px;
	color: var(--text);
	outline: none;
	font-family: inherit;
	padding: 2px 0;
}

.searchable-select-search::placeholder {
	color: var(--text-muted);
}

.searchable-select-options {
	overflow-y: auto;
	flex: 1;
	max-height: 200px;
}

.searchable-select-option {
	padding: 9px 12px;
	font-size: 13px;
	cursor: pointer;
	border-bottom: 1px solid var(--border-light, rgba(0,0,0,0.05));
	display: flex;
	align-items: center;
	gap: 10px;
	-webkit-tap-highlight-color: transparent;
}

.searchable-select-option:active {
	background: var(--primary-light);
}

.searchable-select-option.selected {
	background: var(--primary-light);
	color: var(--primary);
	font-weight: 500;
}

/* Multi-select checkmarks */
.searchable-select-multi .searchable-select-option .ss-check {
	width: 18px;
	height: 18px;
	border: 2px solid #ccc;
	border-radius: 3px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	color: transparent;
	flex-shrink: 0;
	transition: all 0.15s ease;
}

.searchable-select-multi .searchable-select-option.selected .ss-check {
	background: var(--primary);
	border-color: var(--primary);
	color: #fff;
}

.searchable-select-select-all {
	padding: 9px 12px;
	font-size: 13px;
	cursor: pointer;
	border-bottom: 1px solid var(--border);
	display: flex;
	align-items: center;
	gap: 10px;
	background: #f8f9fa;
	-webkit-tap-highlight-color: transparent;
	flex-shrink: 0;
}

/* Select-all checkbox in searchable-select */
.searchable-select-select-all .ss-check {
	width: 18px;
	height: 18px;
	border: 2px solid #ccc;
	border-radius: 3px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	color: transparent;
	flex-shrink: 0;
	transition: all 0.15s ease;
}
.searchable-select-select-all.selected .ss-check {
	background: var(--primary);
	border-color: var(--primary);
	color: #fff;
}

/* Reports page: Generate button fixed at bottom */
#page_reports {
	padding-bottom: 70px;
	position: relative;
}
#page_reports .form-actions {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1040;
	background: var(--bg-card);
	padding: 10px 15px;
	margin: 0;
	box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
	border-top: 1px solid var(--border);
}

/* Data Items dropdown: static position so it flows in page,
   JS dynamically calculates max-height to stop above Generate button */
#reports_data_items_searchable .searchable-select-dropdown {
	position: static;
	border: 1px solid var(--primary);
	border-top: none;
	border-radius: 0 0 var(--radius-sm) var(--radius-sm);
	max-height: none;
	box-shadow: none;
	overflow: visible;
}
#reports_data_items_searchable .searchable-select-options {
	overflow-y: auto;
	/* max-height set dynamically by JS */
}