:root {
			--safe-top-inset: env(safe-area-inset-top, 0px);
			--viewport-top-offset: 0px;
			--navbar-height: 0px;
			--map-ui-top-offset: calc(var(--safe-top-inset) + var(--viewport-top-offset) + var(--navbar-height));
			--mobile-top-gap: 12px;
			--controls-stack-start: calc(var(--map-ui-top-offset) + 36px);
			--controls-stack-step: 50px;
		}

		#main-navbar {
			padding-top: var(--safe-top-inset) !important;
			min-height: calc(50px + var(--safe-top-inset));
		}

		html,
		body {
			height: 100%;
			margin: 0;
			padding-bottom: 0 !important;
			user-select: none;
		}

		input[type="file"] {
			display: none;
		}

		.custom-file-upload {
			display: block;
			cursor: pointer;
			height: 1em;
			color: red;
		}

		.hide-custom-file-upload {
			display: none;
		}

		.container-fluid {
			border: 0px solid red;
		}

		.back-button {
			border: 0px solid green;
			margin-top: 30px;
		}



		#trip-map {
			border: 0px solid orange;
			padding-top: 0;
			font-weight: bold;
			height: 100vh;
			height: 100dvh;
			min-height: 100vh;
			min-height: 100dvh;
		}

		#trip-roadbook {
			padding-top: 0;
		}

		.custom-context-control {
			position: absolute;
			left: 8px;
			top: var(--controls-stack-start);
			background: rgba(255, 255, 255, 0.8);
			border-radius: 4px;
			padding: 2px;
			z-index: 1000;
		}

		#context-menu-icon {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 40px;
			width: 40px;
			font-size: 1.25rem;
			line-height: 1;
			z-index: 1001;
			color: #1f2937;
			background: white;
			border: 1px solid #ccc;
			border-radius: 4px;
			cursor: pointer;
			pointer-events: auto;
		}

		#speed {
			font-size: 2.6em;
		}

        @media screen and (max-width: 768px) {
            .ol-zoom {
                font-size: 1.2em;
            }
            .control-btn {
                padding: 8px;
                font-size: 0.9em;
            }
        }

        @media screen and (max-width: 480px) {
            .ol-zoom {
                font-size: 1em;
            }
            .control-btn {
                padding: 6px;
                font-size: 0.8em;
            }
        }
        .custom-gps-control {
            position: absolute;
			/* JS logic removed, only CSS here */
            left: 8px;
			top: calc(var(--controls-stack-start) + (var(--controls-stack-step) * 1));
            background: rgba(255,255,255,0.8);
            border-radius: 4px;
            padding: 2px;
            z-index: 1000;
        }

        .gps-button {
            height: 40px;
            width: 40px;
            font-size: 1.5em;
            background: white;
            border: 1px solid #ccc;
            border-radius: 4px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .gps-button.active {
            background: #3399CC;
            color: white;
        }

        .custom-orientation-control {
            position: absolute;
            left: 8px;
			top: calc(var(--controls-stack-start) + (var(--controls-stack-step) * 2));
            background: rgba(255,255,255,0.8);
            border-radius: 4px;
            padding: 2px;
            z-index: 1000;
        }

        .orientation-button {
            height: 40px;
            width: 40px;
            font-size: 1.5em;
            background: white;
            border: 1px solid #ccc;
            border-radius: 4px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .orientation-button.active {
            background: #3399CC;
            color: white;
        }

        .custom-arrow-control {
            position: absolute;
            left: 8px;
			top: calc(var(--controls-stack-start) + (var(--controls-stack-step) * 3));
            background: rgba(255,255,255,0.8);
            border-radius: 4px;
            padding: 2px;
            z-index: 1000;
        }

        .arrow-button {
            height: 40px;
            width: 40px;
            font-size: 1.5em;
            background: white;
            border: 1px solid #ccc;
            border-radius: 4px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .arrow-button.active {
            background: #3399CC;
            color: white;
        }

        .custom-3d-control {
            position: absolute;
            left: 8px;
			top: calc(var(--controls-stack-start) + (var(--controls-stack-step) * 4));
            background: rgba(255,255,255,0.8);
            border-radius: 4px;
            padding: 2px;
            z-index: 1000;
        }

        .custom-routes-control {
            position: absolute;
            left: 14px;
			top: calc(var(--controls-stack-start) + (var(--controls-stack-step) * 5));
            background: rgba(255,255,255,0.8);
            border-radius: 4px;
            padding: 2px;
            z-index: 1000;
            display: flex;
            flex-direction: column;
            gap: 2px;
			z-index: 1001;
        }

		.custom-routes-control .routes-actions {
			display: none;
			flex-direction: column;
			gap: 2px;
		}

		.custom-routes-control.expanded .routes-actions {
			display: flex;
		}

		.routes-toggle-button {
			height: 40px;
			width: 40px;
			font-size: 0;
			background: white url('./route-icon.png') no-repeat center;
			background-size: 24px 24px;
			border: 1px solid #ccc;
			border-radius: 4px;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: background-color 0.2s, background-image 0.2s;
		}

		.routes-toggle-button:hover {
			background-color: #f0f0f0;
			background-image: url('./route-icon.png');
			background-size: 24px 24px;
		}

		.custom-routes-control.expanded .routes-toggle-button {
			background-color: #3399CC;
			background-image: url('./route-icon.png');
			background-size: 24px 24px;
		}

		.routes-button.routes-export-button {
			font-size: 0;
			background-image: url('./export-gpx-icon.png');
			background-repeat: no-repeat;
			background-position: center;
			background-size: 22px 22px;
		}

		.routes-button.routes-export-button:hover {
			background-color: #f0f0f0;
			background-image: url('./export-gpx-icon.png');
			background-repeat: no-repeat;
			background-position: center;
			background-size: 22px 22px;
		}

		.routes-button.routes-export-button:active {
			background-color: #3399CC;
			background-image: url('./export-gpx-icon.png');
			background-repeat: no-repeat;
			background-position: center;
			background-size: 22px 22px;
		}

		.routes-button.routes-vehicle-button {
			font-size: 0;
			background-image: url('./vehicle-profile-icon.svg');
			background-repeat: no-repeat;
			background-position: center;
			background-size: 22px 22px;
		}

		.routes-button.routes-vehicle-button:hover,
		.routes-button.routes-vehicle-button:active,
		.routes-button.routes-vehicle-button.active {
			background-image: url('./vehicle-profile-icon.svg');
			background-repeat: no-repeat;
			background-position: center;
			background-size: 22px 22px;
		}

		.routes-vehicle-menu {
			position: absolute;
			left: 48px;
			top: 44px;
			min-width: 172px;
			background: #fff;
			border: 1px solid #ccc;
			border-radius: 6px;
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
			padding: 4px;
			z-index: 1002;
		}

		.routes-vehicle-option {
			display: block;
			width: 100%;
			padding: 8px 10px;
			border: none;
			background: #fff;
			text-align: left;
			border-radius: 4px;
			cursor: pointer;
			font-size: 13px;
		}

		.routes-vehicle-option:hover {
			background: #f0f0f0;
		}

		.routes-vehicle-option.active {
			background: #e0f2ff;
			font-weight: 600;
		}

        .routes-button {
            height: 40px;
            width: 40px;
            font-size: 1.25em;
            background: white;
            border: 1px solid #ccc;
            border-radius: 4px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s, color 0.2s;
        }

        .routes-button:hover {
            background: #f0f0f0;
        }

        .routes-button:active {
            background: #3399CC;
            color: white;
        }

		@media screen and (max-width: 768px) {
			:root {
				--controls-stack-start: calc(var(--map-ui-top-offset) + 44px);
			}
		}

		@media screen and (max-width: 480px) {
			:root {
				--controls-stack-start: calc(var(--map-ui-top-offset) + 52px);
			}
		}

        .view-3d-button {
            height: 40px;
            width: 40px;
            font-size: 1.5em;
            background: white;
            border: 1px solid #ccc;
            border-radius: 4px;
            cursor: pointer;
			/* JS logic removed, only CSS here */
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .view-3d-button.active {
            background: #3399CC;
            color: white;
        }

        #cesiumContainer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
			/* JS logic removed, only CSS here */
            height: 100%;
            display: none;
            z-index: 0;
        }

		#trip-map,
		#trip-map .content-homepage,
		#trip-map .widget-area,
		#trip-map .row,
		#trip-map #title_list,
		#map {
			height: 100%;
			min-height: 0;
		}

		#map {
			position: relative;
			width: 100%;
		}

        #map .ol-viewport {
            position: relative;
            z-index: 1;
        }

		/* Keep zoom controls on the right side (also when Cesium overlays the map). */
		#map .ol-zoom {
			left: auto !important;
			right: 8px !important;
			top: calc(var(--map-ui-top-offset) + 6px) !important;
		}

		/* Cesium navigation controls (if enabled by plugin) on the right side. */
		#cesiumContainer .cesium-viewer-toolbar,
		#cesiumContainer .cesium-viewer-navigationContainer,
		#cesiumContainer .cesium-navigation-container {
			top: calc(var(--map-ui-top-offset) + 6px) !important;
			left: auto !important;
			right: 8px !important;
			z-index: 1002 !important;
			pointer-events: auto;
		}

		#cesiumContainer .cesium-viewer-toolbar *,
		#cesiumContainer .cesium-baseLayerPicker-dropDown,
		#cesiumContainer .cesium-baseLayerPicker-dropDown * {
			pointer-events: auto;
			z-index: 1003;
		}

        /* Ensure control buttons are above both 2D and 3D views */
        .custom-gps-control,
        .custom-orientation-control,
        .custom-arrow-control,
		.custom-3d-control,
		.custom-context-control {
            z-index: 1001;
        }

		/* Keep context dropdown above left control icons */
		#dt-dropdown,
		.dropdown-menu-context {
			z-index: 2002 !important;
		}

		/* Keep cruscottino HUD always above map/canvas layers when map mode is active */
		#cruscottino.cruscottino-mappa {
			z-index: 3500 !important;
			position: fixed !important;
			pointer-events: auto;
		}

		.mobile-cruscottino-sheet {
			position: static;
			z-index: auto;
		}

		.mobile-cruscottino-sheet__handle {
			display: none;
		}

		@media screen and (max-width: 768px) {
			.mobile-cruscottino-sheet {
				position: fixed;
				left: 0;
				right: 0;
				bottom: 0;
				z-index: 3600;
				background: rgba(255, 255, 255, 0.96);
				border-top-left-radius: 14px;
				border-top-right-radius: 14px;
				box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.18);
				transition: transform 0.25s ease;
				touch-action: none;
			}

			.mobile-cruscottino-sheet.mobile-cruscottino-sheet--expanded {
				transform: translateY(0);
			}

			   .mobile-cruscottino-sheet.mobile-cruscottino-sheet--collapsed {
				   /* Always show at least 70px (handle + first row), regardless of sheet height */
				   transform: translateY(calc(100% - 70px));
				   opacity: 0.98;
				   box-shadow: 0 -8px 32px rgba(0,0,0,0.28);
			   }

			.mobile-cruscottino-sheet.mobile-cruscottino-sheet--hidden {
				transform: translateY(100%);
				pointer-events: none;
			}

			.mobile-cruscottino-sheet__handle {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 28px;
				cursor: grab;
				touch-action: none;
			}

			.mobile-cruscottino-sheet__handle-bar {
				display: block;
				width: 52px;
				height: 5px;
				border-radius: 999px;
				background: rgba(55, 65, 81, 0.45);
			}

			.mobile-cruscottino-sheet__content {
				max-height: min(34vh, 260px);
				overflow-y: auto;
				padding-bottom: env(safe-area-inset-bottom, 0px);
			}

			#cruscottino.cruscottino-mappa {
				position: relative !important;
				z-index: auto !important;
				right: auto !important;
				left: auto !important;
				bottom: auto !important;
				top: auto !important;
			}
		}

		/* Desktop: sposta la bussola OpenLayers più in basso rispetto ai bottoni zoom */
		.ol-rotate {
			top: 70px !important;
			right: 8px !important;
		}

		/* Mobile: ancora più in basso se necessario */
		@media screen and (max-width: 768px) {
			.ol-rotate {
				top: 90px !important;
			}
		}
		@media screen and (max-width: 480px) {
			.ol-rotate {
				top: 110px !important;
			}
		}