/**
 * Carto Studio Styles
 * Following the design system from stitch_map_software
 */

:root {
	--carto-primary: #137fec;
	--carto-background-light: #f6f7f8;
	--carto-background-dark: #101922;
	--carto-text-dark: #111418;
	--carto-text-light: #617589;
}

body.carto-studio-page {
	font-family: "Inter", sans-serif;
	background-color: var(--carto-background-light);
	color: var(--carto-text-dark);
}

body.carto-studio-page.dark {
	background-color: var(--carto-background-dark);
	color: #fff;
}

/* Frosted glass effect (from design) */
.glass-panel {
	background-color: rgba(255, 255, 255, 0.75);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.3);
}

.dark .glass-panel {
	background-color: rgba(28, 28, 30, 0.75);
	border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Map container */
.carto-map-container {
	width: 100%;
	height: 100vh;
	position: relative;
}

.carto-map {
	width: 100%;
	height: 100%;
	z-index: 1;
}

/* Override Leaflet default styles to match design */
.leaflet-container {
	font-family: "Inter", sans-serif;
	background: var(--carto-background-light);
}

.dark .leaflet-container {
	background: var(--carto-background-dark);
}

.leaflet-popup-content-wrapper {
	border-radius: 0.75rem;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}

.leaflet-popup-content {
	margin: 12px 16px;
	font-size: 14px;
}

/* Custom marker colors */
.carto-marker-blue {
	color: #137fec;
}

.carto-marker-red {
	color: #FF3B30;
}

.carto-marker-orange {
	color: #FF9500;
}

.carto-marker-green {
	color: #10b981;
}

/* Loading state */
.carto-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
}

/* Utility classes */
.carto-rounded {
	border-radius: 0.75rem;
}

.carto-rounded-lg {
	border-radius: 1rem;
}

.carto-rounded-full {
	border-radius: 9999px;
}

/* Material Icons alignment */
.material-symbols-outlined {
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
	vertical-align: middle;
}