:root
{
	--page-margin: 40px;
	--group-min-width: 350px;
	--grid-gap: 20px;

	--base-font-size: 1em;
	--bg: #000000;
	--accent: #33FF33;
	--error: #FF0000;
	--message: #00FF00;
}



body, html
{
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	overflow: hidden;
	background-color: #000000;
}

#map
{
/* 
background-color: #3a3a3a;
background-color: transparent;
background: 
	repeating-linear-gradient(0deg, #999999 0px 1px, transparent 1px 15px), 
	repeating-linear-gradient(90deg, #999999 0px 1px, transparent 1px 15px);
 */


/*
background-color: rgba(15, 10, 20, 1.0);
background-image: 
	radial-gradient(circle, transparent 20%, rgba(15, 10, 20, 0.9) 20%, rgba(15, 10, 20, 1.0) 80%, transparent 80%, transparent), 
	radial-gradient(circle, transparent 20%, rgba(15, 10, 20, 1.0) 20%, rgba(15, 10, 20, 0.8) 80%, transparent 80%, transparent), 
	linear-gradient(rgba(255, 255, 255, 0.4) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.3) 1px, rgba(15, 10, 20, 0.3) 1px);
*/

background-color: rgba(16.5, 16.5, 18.8, 1.0);
background-image: 
	radial-gradient(circle, transparent 20%, rgba(16.5, 16.5, 18.8, 0.9) 20%, rgba(16.5, 16.5, 18.8, 1.0) 80%, transparent 80%, transparent), 
	radial-gradient(circle, transparent 20%, rgba(16.5, 16.5, 18.8, 1.0) 20%, rgba(16.5, 16.5, 18.8, 0.8) 80%, transparent 80%, transparent), 
	linear-gradient(rgba(255, 255, 255, 0.4) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.3) 1px, rgba(16.5, 16.5, 18.8, 0.3) 1px);
background-position: 0 0, 25px 25px, 0 -1px, -1px 0;
background-size: 100px 100px, 70px 73px, 25px 25px, 16px 16px;
background-repeat: repeat, repeat, repeat, repeat;

	height: 100vh;
	width: 100vw;
}

#alert-modal
{
	display: none;
	position: fixed;
	z-index: 9999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.8);
}

.modal-content
{
	background-color: #222;
	color: #fff;
	margin: 15% auto;
	padding: 20px;
	border: 1px solid #444;
	width: 300px;
	text-align: center;
	font-family: sans-serif;
}


.leaflet-tile-container {
	/* Prevents the browser from hiding "overflow" tiles too early */
	will-change: transform; 
}

.leaflet-tile
{
	/* Simple CSS spinner using an SVG data URI */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 38 38' stroke='%23007bff'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(1 1)' stroke-width='2'%3E%3Ccircle stroke-opacity='0.5' cx='18' cy='18' r='18'/%3E%3Cpath d='M36 18c0-9.94-8.06-18-18-18'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 18 18' to='360 18 18' dur='1s' repeatCount='indefinite'/%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	//background-color: #3a3a3a; /* A dark color so it doesn't flash white */
	//visibility: hidden;
	visibility: visible !important;
	//transition: none !important;
	opacity: 1 !important;
}

/* keep tiles invisible until they are loaded */
.leaflet-tile-loaded
{
	opacity: 1 !important;
	//visibility: visible !important;
	background-image: none !important;
	//transition: opacity 0.3s;
}

.leaflet-tile:not(.leaflet-tile-loaded)
{
	opacity: 0;
}





/* The Debug Grid Tile */

.debug-tile
{
	display: flex;
	align-items: start;
	justify-content: end;
	text-align: center;
	background-color: transparent;
	outline: 1px solid rgba(0, 255, 0, 0.3); /* Faint neon green border */

	text-shadow: 1px 1px 2px #000; /* Makes text readable over bright images */
	pointer-events: none; /* Allows clicks to pass through to the map below */
}

.debug-tile div
{
	padding: 20px;
	font-family: 'Courier New', Courier, monospace;
	font-weight: bold;
	color: #00ff00;
	font-size: 18px;
}

/* Optional: Different color for the Zoom level to make it pop */
.debug-tile span
{
	color: #ffcc00;
	display: block;
}

.leaflet-control-custom a.logout
{
	background-color: color-mix(in srgb, var(--error), #ffffff 40%);
	width: auto;
	padding: 0 10px;
	text-align: center;
	line-height: 30px;
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
	color: #333;
}
			
.leaflet-control-custom a.logout:hover
{
	background-color: var(--error);
}

/* The Debug Grid Tile */





/* Modal Overlay (Background) */

.modal
{
	display: none;
	position: fixed;
	z-index: 1000;
	left: 0; top: 0;
	width: 100%; height: 100%;
	background-color: rgba(0,0,0,0.6); /* faded black */
}

/* modal header */
.modal-header
{
	font-size: 1.4em;
	text-transform: uppercase;
	margin-bottom: 20px;
	color: var(--accent);
	font-weight: bold;
}

/* modal content box */
.modal-content
{
	background-color: var(--bg);
	margin: 5% auto; /* 5% from top and centered */
	padding: 25px;
	border: 1px solid #333;
	width: 90%; /* mobile first */
	max-width: 500px; /* desktop cap */
	border-radius: 8px;
	position: relative;
	animation: modalIn 0.4s cubic-bezier(0.55,0.09,0.68,0.53) forwards;
}

.modal-content input[type="text"], 
.modal-content input[type="email"], 
.modal-content input[type="password"]
{
	width: 100%;
	padding: 12px;
	background-color: var(--bgvar2);
	border: 1px solid #444;
	color: white;
	font-size: 0.9em;
	border-radius: 4px;
	box-sizing: border-box;
	margin: 0px 0px 20px 0px;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

.modal-content input[type="password"]
{
	padding: 12px 50px 12px 12px; /* to allow for an eye toggle */
}

.modal-content button
{
	width: 100%;
	padding: 12px;
	background-color: var(--accent);
	border: none;
	color: white;
	cursor: pointer;
	border-radius: 4px;
	margin-top: 10px;
	font-size: 1.0em;
	font-weight: bold;
}

.modal-content.hide
{
	animation: modalOut 0.25s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
}

@keyframes modalIn
{
	from { opacity: 0; top: -300px; }
	to { opacity: 1; top: 0; }
}

@keyframes modalOut
{
	from { opacity: 1; top: 0px; }
	to { opacity: 0; top: -300px; }
}

/* modal content box title */
.modal-content .section-title
{
	color: #888;
	font-size: 1.2em;
	margin: 0 0px 6px 0px;
}

/* modal labels */
.modal-content label
{
	display: block;
	margin-bottom: 5px;
	font-size: 1.2em;
	text-transform: uppercase;
	color: #888;
}


.modal-content .message-container
{
	height: var(--base-font-size);
	overflow: hidden;
}

/* errors and messages */
.modal-content .error, 
.modal-content .message
{
	width: 100%;
	display: none;
	box-sizing: border-box;
	text-align: center;
}

.modal-content .error
{
	color: var(--error);
}

.modal-content .message
{
	color: var(--message);
}

/* modal footer */
.modal-footer
{
	margin-top: 20px;
	display: flex;
	gap: 10px;
	justify-content: flex-end;
}