/* ================================================
   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;
	--igps-release: "v3.30.78";
	--igps-drawer-gap: 0px;
	--igps-drawer-floor: 0px;
	/* Stay 0. The standalone script grows the page to screen.height
	   once. A non-zero hang on top of that growth shifts the bars twice. */
	--igps-stand-gap: 0px;
	/* Added to the sheet only, so the sheet meets the map. The map
	   inset does not include this, or the map would move down. */
	--igps-map-join: 0px;
}

* { box-sizing: border-box; }

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

body {
	/* No bottom inset. A reserved band left the last row, the Places
	   bar, and the Generate button short of the screen edge.
	   clip (not hidden) so a bar may paint into the installed-PWA
	   strip. hidden would turn the body into a scroll container and
	   cut that strip off. */
	padding: calc(60px + env(safe-area-inset-top, 0px)) 16px 0 16px;
	overflow-x: clip;
	overflow-y: visible;
	background: var(--bg);
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--text);
	font-size: 14px;
	line-height: 1.5;
}

/* The map page paints edge to edge. Side padding stays for the other pages.
   overflow must stay visible here: Safari clips a fixed sheet that reaches
   past the layout viewport when the body is a scroll container. */
html:has(#page_map:not([style*="display: none"]):not([style*="display:none"])) {
	overflow: visible;
	background: #fff;
}
body:has(#page_map:not([style*="display: none"]):not([style*="display:none"])) {
	padding-bottom: 0;
	overflow: visible;
	background: #fff;
}

/* The installed app's layout viewport can be shorter than the screen.
   The standalone script grows html and body to screen.height once and
   leaves --igps-stand-gap at 0. Do not paint a root layer over the
   objects drawer, and do not listen to resize to remeasure that strip. */

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: calc(64px + env(safe-area-inset-top, 0px));
	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: calc(56px + env(safe-area-inset-top, 0px));
	background: var(--primary) !important;
	background-color: var(--primary) !important;
	z-index: 1030;
	border: none !important;
	box-shadow: var(--shadow-md);
	padding: env(safe-area-inset-top, 0px) 0 0;
	min-height: calc(56px + env(safe-area-inset-top, 0px));
}

.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;
}

.nav-back-btn {
	display: none;
	align-items: center;
	gap: 6px;
	height: auto;
	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;
	flex-shrink: 0;
	text-decoration: none !important;
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}
.nav-back-btn:hover {
	background: rgba(255,255,255,0.25);
	border-color: rgba(255,255,255,0.5);
	color: #fff !important;
}

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

.igps-return-btn {
	display: none;
	align-items: center;
	height: 32px;
	margin: 0;
	padding: 0 12px;
	border: 0;
	border-radius: 50px;
	background: #fff;
	color: var(--primary, #1a73e8);
	font-size: 13px;
	font-weight: 700;
	line-height: 32px;
	flex-shrink: 0;
	cursor: pointer;
}

.igps-return-menu {
	display: none;
	width: calc(100% - 24px);
	margin: 8px 12px 0;
	padding: 12px 14px;
	border: 0;
	border-radius: 12px;
	background: var(--primary, #1a73e8);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	text-align: left;
	cursor: pointer;
}

.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: clip;
	overflow-y: auto;
	/* Home-indicator clearance only when the screen is already
	   covered. The installed strip is not padded again. */
	padding-bottom: max(0px, calc(env(safe-area-inset-bottom, 0px) - var(--igps-stand-gap, 0px)));
}

.page.page-enter {
	animation: igpsPageIn 0.28s ease;
}

.page.page-leave {
	animation: igpsPageOut 0.26s ease forwards;
}

/* Slide without transform. Transform made the fixed bottom bar use the
   page as its box, so it painted in the old form position and jumped
   to the screen edge when the slide ended. */
@keyframes igpsPageIn {
	from { margin-left: 100%; }
	to { margin-left: 0; }
}

@keyframes igpsPageOut {
	from { margin-left: 0; }
	to { margin-left: 100%; }
}

@keyframes igpsPageInFixed {
	from { left: 100%; right: auto; width: 100%; }
	to { left: 0; right: 0; width: auto; }
}

@keyframes igpsPageOutFixed {
	from { left: 0; right: 0; width: auto; }
	to { left: 100%; right: auto; width: 100%; }
}

#page_places.page-enter,
#page_objects.page-enter {
	animation-name: igpsPageInFixed;
}

#page_places.page-leave,
#page_objects.page-leave {
	animation-name: igpsPageOutFixed;
}

/* One column under the header. The map, the graph, and the route list
   share the top row. The objects sheet or the history bar is the bottom
   row. They meet on the grid line, so a phone does not need a measured gap. */
.page-map {
	padding: 0px;
	position: fixed;
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto;
	grid-template-columns: minmax(0, 1fr);
	top: calc(56px + env(safe-area-inset-top, 0px));
	/* An inline bottom used to lift this column and leave the white band. */
	bottom: 0 !important;
	left: 0;
	right: 0;
	overflow: hidden;
	min-width: 0;
	min-height: 0;
}
/* Packed switchPage shows this page with display:block. That drops the
   rows and the sheet no longer meets the map. none still hides it. */
.page-map[style*="display: block"],
.page-map[style*="display:block"] {
	display: grid !important;
}
.page-map > #map,
.page-map > #graph_panel,
.page-map > #details_panel,
.page-map > #bottom_panel,
.page-map > #history_playback {
	grid-column: 1;
	grid-row: 1;
	min-width: 0;
	min-height: 0;
}
.page-map > #objects_drawer,
.page-map > #history_navbar {
	grid-column: 1;
	grid-row: 2;
	min-width: 0;
	width: 100%;
}

/* The objects page is its own scrollport. Without a fixed height the virtual
   spacer makes the page as tall as every device, and the next paint builds
   all of those rows. */
#page_objects.page {
	position: fixed;
	top: calc(56px + env(safe-area-inset-top, 0px));
	right: 0;
	bottom: calc(-1 * var(--igps-stand-gap, 0px));
	left: 0;
	z-index: 2;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background: var(--bg, #f0f2f5);
}

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

#map {
	position: relative !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	height: 100% !important;
	width: 100%;
	min-height: 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: relative !important;
	top: auto !important;
	right: auto !important;
	left: auto !important;
	width: auto !important;
	height: auto !important;
	align-self: end;
	justify-self: start;
	z-index: 5;
	margin: 0 0 8px 8px;
	bottom: auto !important;
	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 {
	--igps-drawer-row: 53px;
	position: relative !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	width: 100%;
	z-index: 2;
	display: flex;
	flex-direction: column;
	transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	/* The tab is one row. The home indicator pads this bar. */
	height: calc(56px + max(env(safe-area-inset-bottom, 0px), var(--igps-stand-gap, 0px)));
	padding-bottom: max(env(safe-area-inset-bottom, 0px), var(--igps-stand-gap, 0px));
	box-sizing: border-box;
	pointer-events: auto;
	border-radius: 14px 14px 0 0;
	overflow: hidden;
	background: var(--bg-card, #fff);
}

.objects-drawer.expanded {
	/* Header, search, and filters, then four and a half device rows.
	   A short screen stops at half the viewport so the map keeps the rest.
	   The list inside the sheet scrolls. */
	height: min(56px + 52px + 36px + 4.5 * var(--igps-drawer-row), 50dvh);
	bottom: auto;
	max-height: calc(100dvh + var(--igps-stand-gap, 0px) - 56px - env(safe-area-inset-top, 0px));
	padding-bottom: 0;
	box-shadow: 0 -4px 20px rgba(0,0,0,0.12);
	/* Keep the open sheet above the history bar and the playback chip. */
	z-index: 1102;
}

/* History form only. The row is as tall as the tab, the fields, and Show.
   A short screen caps it and the fields scroll. The map keeps the top row. */
.objects-drawer.expanded:has(#objects_drawer_history_view[style*="display: block"]),
.objects-drawer.expanded:has(#objects_drawer_history_view[style*="display:block"]) {
	height: auto;
	max-height: calc(100dvh - 56px - env(safe-area-inset-top, 0px) - 8rem);
	align-self: start;
	bottom: auto;
	padding-bottom: 0;
	background: var(--primary);
}
/* Any strip under the sheet, including the Android nav inset, stays
   the same blue as Show. The map page otherwise paints the body white. */
html:has(.objects-drawer.expanded:has(#objects_drawer_history_view[style*="display: block"])),
html:has(.objects-drawer.expanded:has(#objects_drawer_history_view[style*="display:block"])),
body:has(.objects-drawer.expanded:has(#objects_drawer_history_view[style*="display: block"])),
body:has(.objects-drawer.expanded:has(#objects_drawer_history_view[style*="display:block"])) {
	background: var(--primary);
}
.objects-drawer.expanded:has(#objects_drawer_detail_view[style*="display: block"]),
.objects-drawer.expanded:has(#objects_drawer_detail_view[style*="display:block"]) {
	height: 50dvh;
	max-height: 50dvh;
	bottom: auto;
}

/* Fullscreen mode when search is focused */
.objects-drawer.fullscreen {
	position: fixed !important;
	top: calc(56px + env(safe-area-inset-top, 0px)) !important;
	left: 0 !important;
	right: 0 !important;
	bottom: calc(-1 * var(--igps-stand-gap, 0px)) !important;
	height: auto !important;
	max-height: none !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;
	position: relative;
	z-index: 3;
	height: 56px;
	min-height: 56px;
	flex: 0 0 56px;
	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-user-select: none;
	-webkit-touch-callout: none;
	/* A press here is a tap or a resize, never a page scroll.
	   The browser reads this when the finger goes down. Changing it
	   after pointerdown does not apply to that press. */
	touch-action: none;
	-webkit-tap-highlight-color: transparent;
}
.objects-drawer-tab-left,
.objects-drawer-tab-left span,
#objects_drawer_title {
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}
.objects-drawer-tab.igps-resize-holding,
.objects-drawer-tab.igps-resize-holding * {
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: transparent;
}
.objects-drawer-tab.igps-resize-holding .objects-drawer-handle {
	background: rgba(36, 48, 68, 0.55);
}
.objects-drawer-tab.igps-resize-holding:active {
	background: var(--bg-card);
}
.objects-drawer-handle {
	position: absolute;
	top: 6px;
	left: 50%;
	width: 32px;
	height: 4px;
	margin-left: -16px;
	border-radius: 999px;
	background: rgba(36, 48, 68, 0.28);
	pointer-events: none;
}
.objects-drawer-tab.igps-resize-armed .objects-drawer-handle {
	background: rgba(36, 48, 68, 0.78);
}
.objects-drawer.igps-resizing {
	transition: none;
}
.objects-drawer-resize-cue {
	display: none;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	color: var(--primary);
}
.objects-drawer-resize-cue svg {
	display: block;
	width: 20px;
	height: 20px;
}
.objects-drawer-tab.igps-resize-armed .objects-drawer-resize-cue {
	display: inline-flex;
}
.objects-drawer-tab.igps-resize-armed .objects-drawer-arrow {
	display: none;
}
@keyframes igpsDrawerWobble {
	0% { transform: translateY(0); }
	25% { transform: translateY(-4px); }
	50% { transform: translateY(3px); }
	75% { transform: translateY(-2px); }
	100% { transform: translateY(0); }
}
.objects-drawer.igps-resize-armed {
	animation: igpsDrawerWobble 0.42s ease-in-out 1;
}
@media (prefers-reduced-motion: reduce) {
	.objects-drawer.igps-resize-armed {
		animation: none;
	}
}

/* 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;
	position: absolute;
	top: 56px;
	left: 0;
	right: 0;
	bottom: 0;
	flex: none;
	min-height: 0;
	overflow-y: auto;
	padding-bottom: 0;
	-webkit-overflow-scrolling: auto;
	/* A drag past the last row stays in the sheet. It must not pan the map. */
	overscroll-behavior: contain;
}

/* History fields scroll inside the sheet. Show stays on the bottom bar. */
.objects-drawer.expanded .objects-drawer-content:has(#objects_drawer_history_view[style*="display: block"]),
.objects-drawer.expanded .objects-drawer-content:has(#objects_drawer_history_view[style*="display:block"]) {
	display: flex;
	flex-direction: column;
	position: relative;
	top: auto;
	right: auto;
	bottom: auto;
	left: auto;
	flex: 1 1 auto;
	height: auto;
	min-height: 0;
	overflow: hidden;
	background: var(--bg-card, #fff);
}
#objects_drawer_history_view[style*="display: block"],
#objects_drawer_history_view[style*="display:block"] {
	display: flex !important;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	height: auto;
	max-height: 100%;
	overflow: hidden;
	background: var(--bg-card, #fff);
}

/* Search bar in drawer */
.objects-drawer-tools {
	position: sticky;
	top: 0;
	z-index: 2;
	background: var(--bg-card);
}

.objects-drawer-search {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 52px;
	box-sizing: border-box;
	padding: 8px 12px;
	background: var(--bg-card);
	border-bottom: 1px solid rgba(0,0,0,0.04);
}

.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;
	height: 34px;
	box-sizing: border-box;
	padding: 0 14px;
	font-size: 13px;
	line-height: 34px;
	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;
}

/* One empty row after the last device, the same height as a device row.
   The sheet height stays put. The last name can scroll clear of the glass. */
.objects-drawer-list:has(.objects-drawer-item)::after {
	content: "";
	display: block;
	height: var(--igps-drawer-row, 53px);
	pointer-events: none;
}
.objects-drawer-list.igps-virtual::after {
	content: none;
	display: none;
	height: 0;
}

#page_object_list.igps-virtual .list-group-item,
#page_object_list.igps-virtual .igps-object-group {
	height: 64px;
	box-sizing: border-box;
	overflow: hidden;
}

.objects-drawer-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--igps-drawer-row, 53px);
	box-sizing: border-box;
	padding: 0 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;
	line-height: 16px;
	font-weight: 500;
	color: var(--text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.objects-drawer-item-status {
	font-size: 11px;
	line-height: 14px;
	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;
}

.igps-address-slot {
	display: block;
	word-break: break-word;
}

.igps-address-show {
	appearance: none;
	background: none;
	border: 0;
	padding: 2px 0;
	margin: 0;
	min-height: 32px;
	color: var(--primary, #1a73e8);
	font: inherit;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.igps-address-show:disabled {
	opacity: 0.6;
}

.igps-address-missed {
	color: var(--text-muted, #9aa0a6);
}

.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;
}

.objects-drawer-status-idle {
	background: linear-gradient(to right, rgba(100, 116, 139, 0.18) 0%, rgba(100, 116, 139, 0.06) 35%, var(--bg-card) 70%) !important;
}
.objects-drawer-status-idle .objects-drawer-item-icon {
	background: rgba(100, 116, 139, 0.16);
}
.objects-drawer-status-idle .objects-drawer-item-icon svg {
	color: #64748b;
}

/* 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 — fields above the Show bar */
.objects-drawer-history-content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	height: auto;
	max-height: 100%;
	padding: 0;
	overflow: hidden;
	box-sizing: border-box;
	background: var(--bg-card, #fff);
}

.drawer-history-form {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 12px;
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 12px 16px 12px;
	box-sizing: border-box;
	background: var(--bg-card, #fff);
}

.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: #fff;
	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;
	min-width: 0;
}

.drawer-history-third {
	flex: 1;
	min-width: 0;
}

/* Same bar as Markers, Routes, and Zones: blue, rounded top, one white label. */
.drawer-history-actions {
	flex: 0 0 auto;
	background: var(--primary);
	border: none;
	border-radius: 16px 16px 0 0;
	box-shadow: 0 -4px 16px rgba(0,0,0,0.12);
	padding: 8px 8px max(8px, env(safe-area-inset-bottom, 0px));
}

.drawer-history-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	height: 44px;
	min-height: 44px;
	padding: 0 8px;
	border: none;
	border-radius: 12px;
	background: transparent;
	color: #fff;
	font-size: 20px;
	font-weight: 600;
	line-height: 24px;
	white-space: nowrap;
	cursor: pointer;
	transition: var(--transition);
}

.drawer-history-btn-show {
	background: transparent;
	color: #fff;
}

.drawer-history-btn-show:hover,
.drawer-history-btn-show:active {
	background: rgba(255,255,255,0.16);
	color: #fff;
	transform: none;
}

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

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

/* History bottom navigation. Same blue bar as Places: 60px plus the
   home indicator, rounded top, white labels. It is the bottom row of
   the map column, so the map meets it without a measured gap. */
.history-bottom-nav {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 0;
	background: var(--primary);
	border: none;
	border-radius: 16px 16px 0 0;
	box-shadow: 0 -4px 16px rgba(0,0,0,0.12);
	z-index: 3;
	min-height: calc(60px + env(safe-area-inset-bottom, 0px) + var(--igps-stand-gap, 0px));
	padding-top: 8px;
	padding-bottom: max(env(safe-area-inset-bottom, 0px), var(--igps-stand-gap, 0px));
	padding-left: max(8px, env(safe-area-inset-left, 0px));
	padding-right: max(8px, env(safe-area-inset-right, 0px));
}
.history-bottom-nav::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: var(--igps-stand-gap, 0px);
	background: var(--primary);
	pointer-events: none;
}
/* The collapsed objects tab is taller than this bar, so it would
   stick out over the route. Drop it while the bar is on screen.
   The open history sheet keeps its own height. */
#page_map:has(#history_navbar:not([style*="display: none"]):not([style*="display:none"])) .objects-drawer:not(.expanded) {
	height: 0;
	min-height: 0;
	padding: 0;
	overflow: hidden;
	border-width: 0;
	box-shadow: none;
	pointer-events: none;
}

/* Nav buttons row — same label row as Markers, Routes, and Zones */
.history-nav-items {
	display: flex;
	gap: 8px;
	margin: 0;
}

.history-nav-btn {
	flex: 1;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 44px;
	min-height: 44px;
	padding: 0 8px;
	border-radius: 12px;
	color: #fff;
	font-size: 20px;
	font-weight: 600;
	line-height: 24px;
	cursor: pointer;
	transition: var(--transition);
	background: transparent;
	border: none;
	white-space: nowrap;
}

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

.history-nav-btn:hover,
.history-nav-btn:active,
.history-nav-btn.active {
	background: rgba(255,255,255,0.16);
	color: #fff;
	border: none;
}

.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: relative !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	height: 100% !important;
	width: 100%;
	background: var(--bg-card);
	padding: 12px 12px 8px 12px;
	z-index: 20;
	overflow: hidden;
	flex-direction: column;
	box-sizing: border-box;
	gap: 8px;
}
/* Packed script shows the panel with display:block. Keep a column so the
   plot takes the space under the controls instead of covering them. */
.graph-panel[style*="display: block"],
.graph-panel[style*="display:block"] {
	display: flex !important;
}
.graph-panel-label {
	position: absolute;
	right: 16px;
	top: 58px;
	font-size: 12px;
	color: var(--text-secondary);
	z-index: 25;
	pointer-events: none;
}
.graph-panel-plot {
	flex: 1 1 auto;
	min-height: 0;
	height: auto;
	width: 100%;
	position: relative;
}
.graph-controls {
	margin: 0;
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	position: relative;
	z-index: 30;
	flex: 0 0 auto;
}
.graph-controls > div,
.graph-controls .graph-controls-left,
.graph-controls .graph-controls-right {
	display: flex;
	align-items: center;
	gap: 8px;
	float: none;
	vertical-align: middle;
}
.graph-controls-left {
	position: relative;
	z-index: 31;
	flex: 1 1 180px;
	flex-wrap: wrap;
	min-width: 0;
}
.graph-controls-right {
	flex: 0 0 auto;
	margin-left: auto;
	align-self: flex-start;
}

/* 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: relative !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	height: 100% !important;
	width: 100%;
	min-height: 0;
	background: var(--bg-card);
	padding: 12px 16px 16px 16px;
	z-index: 4;
	overflow-x: hidden;
	overflow-y: auto;
	box-sizing: border-box;
}

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

/* Phone bottom bars sit on the screen edge. The home-indicator
   and gesture insets are padding inside the bar, not a gap under it.
   --places-bar is that full height, so the + button and the list
   clear the bar without adding the inset a second time. */
/* The marker, route, and zone panels are absolute and fill this page.
   In normal flow the page was only the home-indicator padding, so the
   search sat under the header and the list was clipped to that band. */
#page_places.page {
	--places-bar: calc(60px + env(safe-area-inset-bottom, 0px));
	position: fixed;
	top: calc(56px + env(safe-area-inset-top, 0px));
	right: 0;
	bottom: calc(-1 * var(--igps-stand-gap, 0px));
	left: 0;
	z-index: 2;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: var(--bg, #f0f2f5);
}
#places_navbar {
	position: fixed !important;
	bottom: calc(-1 * var(--igps-stand-gap, 0px));
	left: 0;
	right: 0;
	min-height: calc(var(--places-bar) + var(--igps-stand-gap, 0px));
	background: var(--primary);
	border: none !important;
	border-radius: 16px 16px 0 0;
	box-shadow: 0 -4px 16px rgba(0,0,0,0.12);
	z-index: 1000;
	padding-top: 8px;
	padding-bottom: max(env(safe-area-inset-bottom, 0px), var(--igps-stand-gap, 0px));
	padding-left: max(8px, env(safe-area-inset-left, 0px));
	padding-right: max(8px, env(safe-area-inset-right, 0px));
	margin: 0 !important;
}
/* Paint past the layout edge so an installed phone does not show the
   page colour under the bar. Off-screen when the bar already sits flush. */
#places_navbar::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: var(--igps-stand-gap, 0px);
	background: var(--primary);
	pointer-events: none;
}
#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: 20px;
	font-weight: 600;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 44px;
	min-height: 44px;
	line-height: 24px;
	padding: 0 8px;
	margin: 0;
	border-radius: 12px;
	background: transparent !important;
	border: none !important;
	box-shadow: none;
	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: rgba(255,255,255,0.16) !important;
	box-shadow: none;
}
#places_navbar a svg {
	flex-shrink: 0;
	margin: 0;
}

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

/* Clear the bar, the gap above it, and the + button. */
#page_places .markers-panel,
#page_places .routes-panel,
#page_places .zones-panel {
	padding-bottom: calc(var(--places-bar) + 76px);
}

/* ================================================
   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: 12px 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: calc(-1 * var(--igps-stand-gap, 0px));
	width: 100%;
	height: auto;
	color: var(--text);
	z-index: 999999;
	background: var(--bg);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}

.page-menu .title-block {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: env(safe-area-inset-top, 0px) 16px 0;
	height: calc(56px + env(safe-area-inset-top, 0px));
	box-sizing: border-box;
	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 {
	flex: 1 1 auto;
	min-height: 0;
	padding: 14px 14px 8px;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 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;
	min-height: 0;
	height: 100%;
}

.page-menu ul li a {
	color: var(--text) !important;
	font-size: 13px;
	font-weight: 500;
	padding: 12px 8px;
	min-height: 112px;
	height: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: 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 {
	flex: none;
	margin: 4px 14px calc(14px + env(safe-area-inset-bottom, 0px));
	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);
}
.object-add-open { margin: 0 0 8px; }
.object-add-scan { margin-top: 8px; }
.object-add-expire {
	margin: 12px 0 0;
	color: var(--text-secondary, #5f6368);
	font-size: 13px;
	line-height: 1.4;
}
#object_add_sheet .cpanel-sheet-panel {
	max-height: 92dvh;
	overflow: auto;
}
#object_add_sheet { z-index: 10040; }
.object-scan-layer {
	position: fixed;
	inset: 0;
	z-index: 10050;
	background: #000;
}
.object-scan-layer video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: #000;
}
.object-scan-shade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 28px 16px calc(16px + env(safe-area-inset-bottom, 0px));
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.78) 30%);
	color: #fff;
}
.object-scan-shade p { margin: 0 0 8px; font-size: 14px; }
.object-scan-picks { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.object-scan-shade .btn { margin-top: 8px; }

#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: 12px 8px 0;
}
#page_object_list_header .form-group { margin-bottom: 10px; }
#page_object_list_header .searchable-select { margin-bottom: 0; }
#page_object_list_header .search-bar { margin: 0 0 12px 0; }
#page_object_list_header .igps-status-filters {
	padding: 0;
	margin: 0 0 10px;
	gap: 4px;
	scrollbar-width: none;
}
#page_object_list_header .igps-status-filters::-webkit-scrollbar {
	display: none;
	height: 0;
}
#page_object_list_header .igps-status-chip {
	padding: 4px 6px;
}
@media (min-width: 360px) {
	#page_object_list_header { padding: 12px 16px 0; }
	#page_object_list_header .igps-status-chip { padding: 6px 8px; }
}
#page_object_list_header .searchable-select-trigger {
	min-height: 44px;
	border-radius: var(--radius-sm);
	background: var(--bg-card, #fff);
}

/* Objects list matches Places: a white card on the gray page, inset
   by the same 16px as the search. The virtual stride stays 64px, so
   the card is the list itself. Do not add margin on the rows. */
#page_object_list {
	margin: 0 8px 24px;
	background: var(--bg-card, #fff);
	border-radius: 12px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
	overflow: hidden;
}
#page_object_list .list-group-item {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0 8px;
	border: 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 0;
	background: transparent;
}
#page_object_list .list-group-item:hover,
#page_object_list .list-group-item:first-child,
#page_object_list .list-group-item:last-child {
	border-radius: 0;
}
#page_object_list .row {
	display: flex;
	align-items: center;
	width: 100%;
	min-width: 0;
	height: 100%;
	margin: 0;
}
#page_object_list .row::before,
#page_object_list .row::after {
	display: none;
	content: none;
}
#page_object_list .list-group-item .icon {
	float: none;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	margin: 0 6px 0 0;
}
#page_object_list .list-group-item .icon img {
	width: 26px;
	height: 26px;
	max-width: 26px;
	object-fit: contain;
}
#page_object_list .object-list-item {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	width: auto;
	height: auto;
	min-width: 0;
	float: none;
}
#page_object_list .object-list-item .left {
	float: none;
	flex: 1 1 120px;
	width: auto;
	min-width: 0;
}
#page_object_list .object-list-item .status {
	font-size: 10px;
}
#page_object_list .object-list-item .right {
	display: flex;
	align-items: center;
	float: none;
	flex: 0 0 auto;
	height: auto;
}
#page_object_list .object-list-item .speed,
#page_object_list .object-list-item .engine,
#page_object_list .object-list-item .connection,
#page_object_list .object-list-item .visible,
#page_object_list .object-list-item .follow,
#page_object_list .object-list-item .details {
	display: flex;
	align-items: center;
	justify-content: center;
	float: none;
	flex: 0 0 22px;
	width: 22px;
	height: 44px;
	min-width: 22px;
	padding: 0;
}
#page_object_list .object-list-item .speed {
	flex: 0 1 auto;
	width: auto;
	min-width: 0;
	max-width: 64px;
	padding: 0 4px 0 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#page_object_list .igps-object-group {
	height: 64px;
	margin: 0;
	border: 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 0;
	background: #f7f8fa;
}
@media (min-width: 360px) {
	#page_object_list { margin: 0 16px 24px; }
	#page_object_list .object-list-item .status { font-size: 11px; }
}

.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; }
	/* The vehicle picture is part of the row, including on a 360px phone. */
	#page_object_list .list-group-item .icon { display: flex; }
}

/* ================================================
   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: #fff;
	min-height: 100vh;
	min-height: 100dvh;
	overflow-x: hidden;
	overflow-y: auto;
}

.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;
	min-height: 100dvh;
	box-sizing: border-box;
	padding: calc(20px + env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) calc(20px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
}

.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 fills the phone. The logo and fields sit in the upper
   part of the screen, and the version rests above the home indicator. */
.login-container {
	width: 100%;
	min-height: 100vh;
	min-height: 100dvh;
	box-sizing: border-box;
	padding: calc(8px + env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
}

.login-card {
	width: 100%;
	max-width: 480px;
	min-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 16px);
	min-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 16px);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	background: transparent;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
}

.login-header {
	text-align: center;
	margin: clamp(36px, 8vh, 88px) 0 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;
	width: 100%;
	padding-top: 4px;
}
.login-page .language-select { width: 100%; }
.login-page .language-select select {
	width: 100%;
	height: 44px;
	border-radius: var(--radius-sm);
}

.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: auto;
	padding-top: 28px;
	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 .list-group-item {
	background: transparent !important;
	border: 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	box-shadow: none;
}
#page_object_list .objects-page-status-moving .row {
	background: linear-gradient(to right, rgba(34, 197, 94, 0.18) 0%, rgba(34, 197, 94, 0.06) 35%, #fff 70%) !important;
}
#page_object_list .objects-page-status-stationary .row {
	background: linear-gradient(to right, rgba(245, 158, 11, 0.20) 0%, rgba(245, 158, 11, 0.06) 35%, #fff 70%) !important;
}
#page_object_list .objects-page-status-offline .row {
	background: linear-gradient(to right, rgba(185, 28, 28, 0.18) 0%, rgba(185, 28, 28, 0.06) 35%, #fff 70%) !important;
}
#page_object_list .objects-page-status-idle .row {
	background: linear-gradient(to right, rgba(100, 116, 139, 0.18) 0%, rgba(100, 116, 139, 0.06) 35%, #fff 70%) !important;
}

.igps-status-filters {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 6px;
	height: 36px;
	box-sizing: border-box;
	overflow-x: auto;
	padding: 0 12px;
	-webkit-overflow-scrolling: touch;
}
.igps-status-chip {
	flex: 0 0 auto;
	border: 1px solid var(--border, #ddd);
	background: transparent;
	border-radius: 999px;
	padding: 4px 10px;
	font-size: 12px;
	line-height: 1.3;
	color: var(--text, #333);
}
.igps-status-chip.on {
	background: var(--primary, #2563eb);
	border-color: transparent;
	color: #fff;
}
.igps-object-group,
.objects-drawer-group {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	margin: 0;
	padding: 8px 12px;
	border: 0;
	border-bottom: 1px solid rgba(0,0,0,0.06);
	background: var(--bg, #f4f6f8);
	color: var(--text, #222);
	font-size: 13px;
	font-weight: 600;
	text-align: left;
}
.igps-object-group-caret {
	display: inline-block;
	transition: transform 0.15s ease;
}
.igps-object-group.shut .igps-object-group-caret,
.objects-drawer-group.shut .igps-object-group-caret {
	transform: rotate(-90deg);
}
.igps-object-group-count,
.objects-drawer-group .igps-object-group-count {
	margin-left: auto;
	color: var(--text-muted, #777);
	font-weight: 500;
	font-size: 12px;
}
.igps-object-empty {
	padding: 20px;
	text-align: center;
	color: var(--text-muted, #777);
	font-size: 13px;
}
#reports_result_container {
	margin: 12px 0 24px;
}
#reports_result_iframe {
	width: 100%;
	height: 70vh;
	border: 1px solid rgba(0,0,0,0.08);
	background: #fff;
}

/* 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;
	gap: 8px;
	cursor: pointer;
	-webkit-appearance: none;
	user-select: none;
	min-height: 42px;
	background: #fff;
}

.searchable-select-trigger.open {
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.15);
}

.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: calc(100% + 4px);
	left: 0;
	right: 0;
	background: #fff;
	border: 1px solid #d7dbe3;
	border-radius: 12px;
	z-index: 1050;
	max-height: 280px;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(20, 32, 51, 0.16);
	display: flex;
	flex-direction: column;
}

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

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

/* Open menus are moved onto the document so a scrolling page cannot clip them
   or grow to make room. Coordinates are set when the menu opens. */
.searchable-select-dropdown.is-floating {
	display: flex !important;
	position: fixed !important;
	right: auto !important;
	margin: 0;
	z-index: 5000;
	max-height: 320px;
	overflow: hidden;
	box-shadow: 0 12px 32px rgba(20, 32, 51, 0.22);
}

.searchable-select-search-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 8px;
	padding: 8px 10px;
	border: 1px solid #d7dbe3;
	border-radius: 10px;
	background: #f7f8fa;
	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,
.searchable-select-select-all .ss-check.checked {
	background: var(--primary);
	border-color: var(--primary);
	color: #fff;
}
.searchable-select-group {
	padding: 8px 12px 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #5c6b7a;
	background: #f4f6f8;
}

/* Reports Generate and Settings Save use the Places bar: blue,
   60px plus the home indicator, rounded top, one 44px label. */
#page_reports,
#page_settings {
	padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
	position: relative;
}
#page_reports .form-actions,
#page_settings .form-actions {
	position: fixed;
	bottom: calc(-1 * var(--igps-stand-gap, 0px));
	left: 0;
	right: 0;
	z-index: 1040;
	background: var(--primary);
	border: none;
	border-radius: 16px 16px 0 0;
	box-shadow: 0 -4px 16px rgba(0,0,0,0.12);
	min-height: calc(60px + env(safe-area-inset-bottom, 0px) + var(--igps-stand-gap, 0px));
	margin: 0 !important;
	padding: 8px max(8px, env(safe-area-inset-right, 0px)) max(env(safe-area-inset-bottom, 0px), var(--igps-stand-gap, 0px)) max(8px, env(safe-area-inset-left, 0px));
}
#page_reports .form-actions::after,
#page_settings .form-actions::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: var(--igps-stand-gap, 0px);
	background: var(--primary);
	pointer-events: none;
}
#page_reports .form-actions .row,
#page_settings .form-actions .row { margin: 0; }
#page_reports .form-actions [class*="col-"],
#page_settings .form-actions [class*="col-"] { padding-left: 0; padding-right: 0; }
#page_reports .form-actions .btn,
#page_settings .form-actions .btn {
	border-radius: 12px;
	height: 44px;
	min-height: 44px;
	margin: 0;
	border: none !important;
	background: transparent !important;
	color: #fff !important;
	font-size: 20px;
	line-height: 24px;
	font-weight: 600;
	box-shadow: none;
}
#page_reports .form-actions .btn:hover,
#page_reports .form-actions .btn:active,
#page_settings .form-actions .btn:hover,
#page_settings .form-actions .btn:active {
	background: rgba(255,255,255,0.16) !important;
}

#reports_data_items_searchable .searchable-select-options {
	overflow-y: auto;
}

.section-banner {
	display: flex;
	gap: 8px;
	margin: 4px 0 12px;
}
.section-tab {
	flex: 1;
	border: 1px solid var(--border, #d7dbe3);
	background: var(--bg-card, #fff);
	color: var(--text, #243044);
	border-radius: 999px;
	padding: 8px 10px;
	font-size: 14px;
}
.section-tab.on {
	background: var(--primary, #1a73e8);
	border-color: transparent;
	color: #fff;
}
.section-tab:disabled {
	opacity: 0.45;
}
#page_cpanel {
	background: transparent;
	min-height: calc(100dvh - 76px - env(safe-area-inset-top, 0px));
	margin: 0;
	padding: 0 0 calc(88px + env(safe-area-inset-bottom, 0px));
	border: none;
	box-shadow: none;
}
#cpanel_banner {
	flex-wrap: nowrap;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	gap: 0;
	margin: 0 0 14px;
	padding: 4px;
	background: var(--bg-card, #fff);
	border: 1px solid var(--border, #e0e0e0);
	border-radius: 14px;
}
#cpanel_banner .section-tab {
	flex: 1 0 auto;
	min-height: 44px;
	white-space: nowrap;
	font-size: 15px;
	font-weight: 650;
	padding: 8px 12px;
	border: none;
	border-radius: 10px;
	background: transparent;
	color: var(--text-secondary, #5f6368);
}
#cpanel_banner .section-tab.on {
	background: var(--primary, #1a73e8);
	color: #fff;
}
.section-tab-count {
	display: inline-block;
	min-width: 1.4em;
	margin-left: 6px;
	padding: 0 6px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.08);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.7;
	vertical-align: 1px;
}
.section-tab-count:empty { display: none; }
#cpanel_banner .section-tab.on .section-tab-count {
	background: rgba(255, 255, 255, 0.24);
	color: #fff;
}
.cpanel-field { margin: 0 0 12px; }
.cpanel-label {
	display: block;
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 650;
	color: var(--text-secondary, #5f6368);
}
#page_cpanel .search-bar { margin-bottom: 12px; }
#page_cpanel .search-bar .form-control {
	height: 48px;
	padding-right: 48px;
	font-size: 16px;
}
#page_cpanel .search-clear-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	right: 2px;
	border: none;
	background: transparent;
	padding: 0;
}
#cpanel_manager_row .searchable-select-trigger {
	min-height: 48px;
	display: flex;
	align-items: center;
}
#cpanel_manager_row.is-set .searchable-select-trigger {
	border-color: var(--primary, #1a73e8);
	box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.15);
}
.cpanel-section {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 2px 2px 10px;
}
.cpanel-section-title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--text, #1f1f1f);
}
.cpanel-section-count {
	font-size: 14px;
	color: var(--text-secondary, #5f6368);
}
.cpanel-section-tools {
	display: flex;
	align-items: center;
	gap: 10px;
}
.push-count {
	margin: -4px 0 10px;
	color: var(--text-secondary, #5f6368);
	font-size: 12px;
	text-align: right;
}
.push-status {
	min-height: 18px;
	margin: 0 0 8px;
	color: var(--text, #1f1f1f);
	font-size: 13px;
	text-align: center;
}
.cpanel-list { display: flex; flex-direction: column; gap: 12px; }
.cpanel-card {
	display: block;
	background: var(--bg-card, #fff);
	border: 1px solid var(--border, #e0e0e0);
	border-radius: 16px;
	padding: 16px;
	box-shadow: var(--shadow-sm);
}
.cpanel-card-top {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}
.cpanel-avatar {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	border-radius: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.02em;
}
.cpanel-identity { flex: 1 1 auto; min-width: 0; }
.cpanel-name {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	overflow-wrap: anywhere;
	word-break: break-word;
}
.cpanel-role {
	margin-top: 2px;
	font-size: 14px;
	color: var(--text-secondary, #5f6368);
	overflow-wrap: anywhere;
}
.cpanel-more {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	margin: -8px -8px 0 0;
	border: none;
	border-radius: 22px;
	background: transparent;
	color: var(--text-secondary, #5f6368);
	font-size: 22px;
	line-height: 1;
}
.cpanel-more:active { background: var(--bg, #f0f2f5); }
.cpanel-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 12px;
	font-size: 14px;
	color: var(--text, #1f1f1f);
}
.cpanel-status { display: inline-flex; align-items: center; gap: 6px; }
.cpanel-status i {
	width: 8px;
	height: 8px;
	border-radius: 4px;
	background: #9aa0a6;
}
.cpanel-status.is-on i { background: var(--accent, #34a853); }
.cpanel-card-edit {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--border-light, #f0f0f0);
}
.cpanel-card-edit .btn { flex: 1 1 140px; }
.cpanel-card-edit .btn {
	min-height: 44px;
	padding: 8px 18px;
	font-size: 15px;
}
.cpanel-empty {
	margin-top: 8px;
	padding: 28px 16px;
	text-align: center;
	background: var(--bg-card, #fff);
	border: 1px solid var(--border, #e0e0e0);
	border-radius: 16px;
}
.cpanel-empty-title { font-size: 17px; font-weight: 700; }
.cpanel-empty-note {
	margin: 6px 0 14px;
	color: var(--text-secondary, #5f6368);
}
.cpanel-empty .btn { min-height: 44px; }
.cpanel-skel {
	height: 148px;
	border-radius: 16px;
	background: linear-gradient(90deg, #eceff3 0%, #f7f8fa 45%, #eceff3 100%);
	background-size: 200% 100%;
	animation: cpanelShimmer 1.2s ease-in-out infinite;
}
.cpanel-fab {
	position: fixed;
	right: max(16px, env(safe-area-inset-right, 0px));
	bottom: calc(16px + env(safe-area-inset-bottom, 0px) - var(--igps-stand-gap, 0px));
	z-index: 1100;
	width: 56px;
	height: 56px;
	border: none;
	border-radius: 28px;
	background: var(--primary, #1a73e8);
	color: #fff;
	font-size: 34px;
	line-height: 52px;
	box-shadow: 0 4px 14px rgba(26, 115, 232, 0.35);
}
.cpanel-sheet {
	position: fixed;
	inset: 0;
	z-index: 1300;
}
.cpanel-sheet-backdrop {
	position: absolute;
	inset: 0;
	border: none;
	background: rgba(15, 23, 32, 0.42);
}
.cpanel-sheet-panel {
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(-1 * var(--igps-stand-gap, 0px));
	padding: 16px 16px calc(16px + max(env(safe-area-inset-bottom, 0px), var(--igps-stand-gap, 0px)));
	background: var(--bg-card, #fff);
	border-radius: 18px 18px 0 0;
	box-shadow: var(--shadow-lg);
}
.cpanel-sheet-panel.is-scroll {
	max-height: 85dvh;
	overflow-y: auto;
}
.cpanel-sheet-title {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 700;
	overflow-wrap: anywhere;
}
.cpanel-sheet-action {
	display: block;
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 12px 4px;
	border: none;
	border-bottom: 1px solid var(--border-light, #f0f0f0);
	background: transparent;
	text-align: left;
	font-size: 16px;
	color: var(--text, #1f1f1f);
}
.cpanel-sheet-action.is-danger { color: var(--danger, #ea4335); }
.cpanel-sheet-cancel { margin-top: 12px; min-height: 48px; }
.cpanel-add-actions { margin-top: 14px; }
#cp_add_email { height: 48px; font-size: 16px; }
@media (min-width: 720px) {
	.cpanel-list { display: grid; grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
	.cpanel-list { grid-template-columns: 1fr 1fr 1fr; }
	.cpanel-card { max-width: 420px; }
}
@media (prefers-reduced-motion: reduce) {
	.cpanel-skel { animation: none; }
	.cpanel-sheet-panel { transition: none; }
}
@keyframes cpanelShimmer {
	from { background-position: 100% 0; }
	to { background-position: -100% 0; }
}
#page_cpanel .form-control { background: #fff; }
.igps-empty {
	text-align: center;
	color: var(--text-secondary, #667085);
	padding: 48px 16px;
}
.igps-note { color: var(--text-secondary, #667085); font-size: 13px; margin-top: 4px; }
.igps-card {
	position: relative;
	display: block;
	background: var(--bg-card, #fff);
	border-radius: 12px;
	padding: 10px 12px;
	margin: 8px 0;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.igps-card-head {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}
.igps-card-title {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 650;
	line-height: 1.3;
}
.igps-card .igps-note { margin: 4px 0 0; line-height: 1.35; }
.igps-card-detail {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.igps-row-actions { float: right; display: flex; flex-wrap: wrap; gap: 6px; }
.igps-card .igps-row-actions { float: none; flex: 0 0 auto; margin: 0; justify-content: flex-end; }
.igps-card .btn.igps-on {
	background: var(--primary, #1a73e8);
	border-color: transparent;
	color: #fff;
}
.igps-actions { display: flex; gap: 8px; }
.igps-actions .btn,
.igps-actions .btn-full { flex: 1; width: auto; }
.igps-toolbar { display: flex; gap: 8px; margin: 0 0 10px; }
.igps-block-title { font-weight: 700; margin: 16px 0 8px; }
.igps-check { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-weight: 500; }
.igps-priv-group {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	margin: 8px 0 0;
	padding: 10px 12px;
	border: 1px solid var(--border, #e0e0e0);
	border-radius: 10px;
	background: var(--bg, #f6f7f9);
	color: var(--text, #243044);
	font-weight: 700;
	text-align: left;
}
.igps-priv-body { padding: 2px 4px 8px 8px; }
.igps-priv-body .igps-check { border-bottom: 1px solid var(--border, #eee); }
.igps-readonly {
	min-height: 38px;
	padding: 8px 12px;
	background: #fff;
	border: 1px solid var(--border, #d7dbe3);
	border-radius: var(--radius-sm, 8px);
	color: var(--text, #243044);
}
.igps-required.igps-bad { border-color: #c62828; }
.igps-days { display: flex; flex-wrap: wrap; gap: 8px; }
.igps-days label {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 6px 10px;
	background: var(--bg-card, #fff);
	border: 1px solid var(--border, #e0e0e0);
	border-radius: 999px;
	font-weight: 600;
}
.igps-day-time { display: block; margin: 4px 0; }
.igps-day-time .form-control { display: inline-block; width: 38%; margin-left: 6px; }
.igps-condition { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; align-items: center; }
.igps-condition .searchable-select { flex: 1 1 100%; }
.igps-condition .ev-cn { flex: 0 0 88px; }
.igps-condition .ev-val { flex: 1 1 120px; }
#page_events, #page_cmd { padding-bottom: max(0px, calc(env(safe-area-inset-bottom, 0px) - var(--igps-stand-gap, 0px))); }
.places-add-btn {
	position: fixed;
	right: max(16px, env(safe-area-inset-right, 0px));
	bottom: calc(var(--places-bar, 60px) + 12px);
	z-index: 1100;
	width: 52px;
	height: 52px;
	border: none;
	border-radius: 26px;
	background: var(--primary, #1a73e8);
	color: #fff;
	font-size: 32px;
	line-height: 48px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}
.places-editor {
	position: fixed;
	z-index: 1200;
	top: calc(56px + env(safe-area-inset-top, 0px));
	left: 0;
	right: 0;
	bottom: calc(-1 * var(--igps-stand-gap, 0px));
	overflow: auto;
	background: var(--bg, #f4f6f8);
	padding: 12px 16px calc(24px + max(env(safe-area-inset-bottom, 0px), var(--igps-stand-gap, 0px)));
}
.leaflet-tooltip.igps-route-start {
	background: #fff;
	color: #1a3f8b;
	border: 1px solid #1a73e8;
	border-radius: 8px;
	white-space: nowrap;
	font-weight: 600;
	font-size: 13px;
	padding: 4px 8px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.leaflet-tooltip.igps-route-start.leaflet-tooltip-bottom:before {
	border-bottom-color: #1a73e8;
}
.places-pick-hint {
	position: fixed;
	z-index: 1300;
	left: max(12px, env(safe-area-inset-left, 0px));
	right: max(12px, env(safe-area-inset-right, 0px));
	bottom: calc(max(16px, env(safe-area-inset-bottom, 0px)) - var(--igps-stand-gap, 0px));
	background: var(--bg-card, #fff);
	color: var(--text, #243044);
	text-align: center;
	padding: 12px 14px;
	border-radius: 12px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
}


/* The theme hides every checkbox inside a form so an old yes/no
   button group can show instead. The new forms use real checkboxes. */
#events_setup_form input[type="checkbox"],
#reports_schedule_form input[type="checkbox"],
#cpanel_user_form input[type="checkbox"],
#cpanel_object_form input[type="checkbox"],
#places_editor input[type="checkbox"],
#page_object_edit input[type="checkbox"],
.igps-check input[type="checkbox"],
.igps-days input[type="checkbox"] {
	display: inline-block;
	width: 22px;
	height: 22px;
	margin: 0;
	flex: 0 0 22px;
	accent-color: var(--primary, #1a73e8);
	vertical-align: middle;
}
.igps-form .form-group > label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-weight: 500;
}
.igps-form:not(.places-editor) {
	background: #fff;
	border-radius: 12px;
	padding: 14px 12px 6px;
	margin-bottom: 12px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.igps-form .form-group { margin-bottom: 12px; }
.igps-form .form-group > .row {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 4px;
	margin-left: 0;
	margin-right: 0;
}
.igps-form .form-group > .row::before,
.igps-form .form-group > .row::after { display: none; }
.igps-form .form-label-col,
.igps-form .col-xs-8,
.igps-form .col-xs-6,
.igps-form .col-xs-4 {
	float: none;
	width: auto;
	padding-left: 0;
	padding-right: 0;
}
.igps-form .form-label-col {
	flex: none;
	width: 100%;
	font-size: 12px;
	font-weight: 650;
	color: #5c6b7a;
}
.igps-form .col-xs-8,
.igps-form .col-xs-4:not(.form-label-col),
.igps-form .col-xs-6 { flex: 1; min-width: 0; }
.searchable-select-trigger.drawer-history-select {
	background-color: #fff;
	background-image: none;
	padding-right: 10px;
}

.igps-icons { display: flex; flex-wrap: wrap; gap: 6px; }
.igps-icon {
	width: 40px;
	height: 40px;
	padding: 4px;
	border: 1px solid var(--border, #d7dbe3);
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
}
.igps-icon img { width: 100%; height: 100%; object-fit: contain; }
.igps-icon.on { border-color: var(--primary, #1a73e8); box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.25); }
.places-pick-hint .igps-actions { margin-top: 10px; }

.obj-edit-bar {
	padding: 10px 0 8px;
}
.obj-edit-bar .btn { width: 100%; }
#page_object_edit { padding-bottom: 8px; }
#page_object_edit .section-banner {
	flex-wrap: nowrap;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	gap: 6px;
	margin: 0 0 12px;
}
#page_object_edit .section-tab {
	flex: 0 0 auto;
	white-space: nowrap;
	font-size: 13px;
	padding: 8px 12px;
}
#page_object_edit .obj-field { margin: 0 0 12px; }
#page_object_edit .obj-field > label,
#page_object_edit .obj-subhead {
	display: block;
	margin: 0 0 4px;
	font-size: 12px;
	font-weight: 650;
	color: #5c6b7a;
}
#page_object_edit .obj-subhead {
	margin: 16px 0 8px;
	font-size: 15px;
	color: var(--primary, #1a73e8);
}
#page_object_edit .obj-note {
	margin: 0 0 10px;
	font-size: 12px;
	color: #5c6b7a;
}
#page_object_edit .obj-split {
	display: flex;
	gap: 8px;
	align-items: center;
}
#page_object_edit .obj-split > * { flex: 1; min-width: 0; }
#page_object_edit .obj-split > .obj-check,
#page_object_edit .obj-split > button { flex: 0 0 auto; }
/* A long switch label shares the row with its button and wraps instead
   of widening the page. */
#page_object_edit .obj-field > .obj-split { flex-wrap: wrap; }
#page_object_edit .obj-field > .obj-split > .obj-check {
	flex: 1 1 12rem;
	min-width: 0;
	max-width: 100%;
}
#page_object_edit .obj-check > span { min-width: 0; }
#page_object_edit .obj-check {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 12px;
	min-height: 44px;
	font-weight: 500;
}
#page_object_edit .obj-check input[type="checkbox"] { order: 2; flex: 0 0 22px; }
#page_object_edit .obj-split .obj-check { margin: 0; }
#page_object_edit input[type="color"] {
	width: 48px;
	height: 36px;
	padding: 2px;
	flex: 0 0 48px;
	border: 1px solid var(--border, #d7dbe3);
	border-radius: 8px;
	background: #fff;
}
#obj_icon_preview {
	width: 42px;
	height: 42px;
	object-fit: contain;
	border: 1px solid var(--border, #d7dbe3);
	border-radius: 8px;
	background: #fff;
}
#page_object_edit .obj-icon-x { align-self: center; }
.obj-card {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 8px 0;
	padding: 10px;
	background: #fff;
	border: 1px solid var(--border, #e6e8ee);
	border-radius: 12px;
}
.obj-card-title { font-weight: 650; flex: 1 1 auto; }
.obj-card-meta { width: 100%; color: #5c6b7a; font-size: 12px; }
.obj-card-actions { display: flex; gap: 8px; margin-top: 8px; }
.obj-empty { margin: 8px 0 12px; color: #5c6b7a; }
.obj-info-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--border, #e6e8ee);
}
.obj-info-name { color: #5c6b7a; flex: 0 1 46%; }
.obj-info-value { text-align: right; word-break: break-word; }
.obj-edit-actions {
	display: flex;
	gap: 8px;
	position: sticky;
	bottom: 0;
	z-index: 4;
	background: var(--bg, #f4f6f8);
	padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px));
}
.obj-edit-actions .btn { flex: 1; min-height: 44px; }

/* Phone add/edit. A checkbox sits on the row it changes. The value it
   enables is the next row and stays quiet until the box is checked.
   Ribbon blocks collapse behind a one-pixel divider. */
.igps-form .form-control,
.igps-form textarea.form-control,
.igps-form select.form-control,
#page_object_edit .form-control,
#page_object_edit select.form-control,
#page_object_edit textarea.form-control {
	font-size: 16px;
	min-height: 44px;
}
.igps-form .form-group > .row:has(input[type="checkbox"]) {
	flex-direction: row;
	align-items: center;
	min-height: 44px;
	gap: 12px;
}
.igps-form .form-group > .row:has(input[type="checkbox"]) > .form-label-col {
	width: auto;
	flex: 1 1 auto;
	font-size: 15px;
	font-weight: 500;
	color: var(--text, #243044);
}
.igps-form .form-group > .row:has(input[type="checkbox"]) > :has(input[type="checkbox"]) {
	flex: 0 0 44px;
	width: 44px;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.igps-form .form-group > label:has(> input[type="checkbox"]) {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 44px;
	font-size: 15px;
	font-weight: 500;
}
.igps-form .form-group > label:has(> input[type="checkbox"]) > input[type="checkbox"] {
	order: 1;
}
.igps-form .form-group:has(> label > input[type="checkbox"]:not(:checked)) > .form-control,
.igps-form .form-group:has(> label > input[type="checkbox"]:not(:checked)) > textarea,
.igps-form .form-group:has(> .row input[type="checkbox"]:not(:checked)) > .form-control,
.igps-form .form-group:has(> .row input[type="checkbox"]:not(:checked)) > #ev_day_times,
#cpanel_user_form:has(#cp_expire:not(:checked)) #cp_expire_dt,
#cpanel_object_form:has(#cp_obj_expire:not(:checked)) #cp_obj_expire_dt,
#events_setup_form:has(#ev_webhook:not(:checked)) #ev_webhook_url,
#events_setup_form:has(#ev_cmd:not(:checked)) #ev_cmd_gateway,
#events_setup_form:has(#ev_cmd:not(:checked)) #ev_cmd_type,
#events_setup_form:has(#ev_cmd:not(:checked)) #ev_cmd_string,
#page_object_edit .obj-field:has(input[type="checkbox"]:not(:checked)) > .obj-split > .form-control {
	opacity: 0.45;
}
#page_object_edit .obj-field:has(> label + .obj-split > .obj-check) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 44px;
	align-items: center;
	column-gap: 8px;
}
#page_object_edit .obj-field:has(> label + .obj-split > .obj-check) > label:first-child {
	grid-column: 1;
	grid-row: 1;
	margin: 0;
}
#page_object_edit .obj-field:has(> label + .obj-split > .obj-check) > .obj-split {
	display: contents;
}
#page_object_edit .obj-field:has(> label + .obj-split > .obj-check) > .obj-split > .obj-check {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
	min-height: 44px;
}
#page_object_edit .obj-field:has(> label + .obj-split > .obj-check) > .obj-split > .form-control {
	grid-column: 1 / -1;
	grid-row: 2;
}
.igps-days {
	flex-wrap: nowrap;
	gap: 4px;
}
.igps-days label {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	min-height: 44px;
	justify-content: center;
	padding: 0;
	border-radius: 8px;
	gap: 0;
}
#ev_week.igps-days input[type="checkbox"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
}
#ev_week.igps-days label:has(input:checked) {
	background: var(--primary, #1a73e8);
	color: #fff;
	border-color: var(--primary, #1a73e8);
}
@media (max-width: 319px) {
	.igps-days { flex-wrap: wrap; }
	.igps-days label { flex: 1 1 22%; }
}
.igps-fold {
	border-top: 1px solid var(--border, #e6e8ee);
	margin: 4px 0 0;
}
.igps-fold > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 44px;
	padding: 8px 2px;
	font-weight: 700;
	font-size: 15px;
	color: var(--primary, #1a73e8);
	cursor: pointer;
	list-style: none;
}
.igps-fold > summary::-webkit-details-marker { display: none; }
.igps-fold > summary::after {
	content: "";
	width: 8px;
	height: 8px;
	flex: 0 0 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
}
.igps-fold[open] > summary::after {
	transform: rotate(-135deg);
	margin-top: 4px;
}
.igps-fold-icon {
	width: 28px;
	height: 28px;
	object-fit: contain;
	margin-left: auto;
}
.igps-form .igps-actions .btn,
.igps-form .form-actions .btn { min-height: 44px; }
#page_object_edit .obj-subhead.igps-fold,
#page_object_edit details.igps-fold { margin-top: 8px; }