html, body {margin: 0; padding: 0; height: 100%; }
*, *::before, *::after {box-sizing: border-box; min-height: 0; }
.main {height: 100%; display: flex; flex-direction: column;}
.content {flex: 1;display: flex;flex-direction: column;}

.container {flex: 1;display: flex;width: 100%;padding: 10px;gap: 10px;overflow: hidden;}
.left-column {width: 30%;display: flex;flex-direction: column;}
.right-column {width: 70%;display: flex;flex-direction: column;gap: 10px;}
.left-column, .right-column { overflow: auto;}

.right-column {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.panel { padding: 20px; box-sizing: border-box; position: relative} 

.statsPanel { flex: 3; border: 1px solid #ccc; } 	

/* .updateButtonWrap { margin-top: 10px;} */

.importExportWrap {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

/* .importExportWrap button:nth-child(1) {
	grid-column: 1 / span 2;
} */


.mapCompareWrap {
    display: flex;
    gap: 12px;
    flex: 7;        /* same role mapPanel used to have */
    min-height: 0;  /* important for flex shrink */
}

.mapCompareWrap .mapPanel {
    flex: 1;
    min-height: 0;
}

.mapPanel.placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}

.placeholderInner {
    text-align: center;
}

.mapPanel.placeholder {
    border: 1px dashed #ccc;
    background: #fafafa;
}

.button {
	font-size: 1.2em;
	padding: 10px 30px;
	cursor: pointer;
	border: none;
	background-color: #007BFF;
	color: white;
	border-radius: 5px;
	width: 100%;
}

.button:hover {
	background-color: #0056b3;
}


.controlBar{
    margin-top:10px;
    padding:10px 14px;
    background:#f6f7f9;
    border:1px solid #ddd;
    border-radius:6px;

    display:flex;
    gap:20px;
    align-items:center;
}

.control{
    display:flex;
    align-items:center;
    gap:6px;
}

.control label{
    font-weight:600;
    color:#555;
}

.control select{
    padding:4px 8px;
    border:1px solid #ccc;
    border-radius:4px;
}

.nodeList { width: 100%; border: 1px solid #ccc; flex: 9; overflow: auto; } 

.mapControls { position: absolute; z-index: 20; vertical-align: middle; display: flex; gap: 0.1em; padding: 0.5em;}
.mapPanel { flex: 7; border: 1px solid #ccc; display: flex; flex-direction: column; padding: 0; }


.mapViewParent { width: 100%; height: 100%; overflow: hidden; }

.mapView { flex: 1; display: flex; align-items: stretch; justify-content: center; }
.mapView { transform-origin: 0 0; cursor: grab; position: relative;  }

.polygon_template { width: 900px; position: absolute; z-index: 5; }
/* .polygon_template_outline { width: 900px; position: absolute; z-index: 5; } */

.polygon_template_outline {
    width: 900px;
    position: absolute;
    z-index: 5;
    pointer-events: none;
}

.bordersOff .polygon_template polygon { stroke: none !important; }

.mapName { text-align: center; padding: 0.5em; font-weight: bold; }
.mapName { font-size: 24px; font-weight: 600;}


.statsPanel { flex: 3; border: 1px solid #ccc; }

.scale { background: linear-gradient(hsl(0,100%,50%), hsl(40,100%,50%) 45%, hsl(40,100%,100%)); height: 200px; width: 10px; border: solid 1px #ccc; position: absolute; top: 45px; left: 15px; }
	
.scaleMark { font-size: 10pt; position: absolute; left: calc(100% + 0.3em); }
.scaleLabel { font-size: 8pt; position: absolute; top: calc(100% + 1em); left: -1.3em; }

.scaleUnits {
	position: absolute;
	bottom: -25px;
	left: 0;
	width: 100%;
	text-align: center;
	font-size: 11px;
	color: #444;
}

.scale.categorical {
    background: none;
    border: none;
    width: auto;
}

.scale.categorical .scaleMark {
    position: relative;     /* stop absolute positioning */
    left: 0;
    top: auto !important;   /* ignore JS top offsets */
    margin-bottom: 6px;
}

.dialog {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    padding: 1em;
    border: 1px solid #ccc;
    z-index: 1000;
}


#updatingDialog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    background: rgba(238, 238, 238, 0.9);
    border: 1px solid #333;
    z-index: 9999;
    pointer-events: none;
}




.statsPanel {
	padding: 20px;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	font-family: system-ui, sans-serif;
}

.statsPanel {
	display: flex;
	flex-direction: column;
}

.statsSummary {
	display: flex;
	gap: 20px;
	margin-bottom: 20px;
}

.statCard {
	flex: 1;
	padding: 15px;
	background: #f6f8fb;
	border-radius: 6px;
}

.statGroupTitle{
	font-size:12px;
	font-weight:600;
	color:#666;
	margin-bottom:6px;
}

.statGrid{
	display: grid;
	grid-template-columns: auto auto;
	gap: 6px 12px;
	align-items: baseline;
}

.statPair{
	display: flex;
	align-items: baseline;
	gap: 6px;
}

.statLabel {
	font-size: 12px;
	color: #666;
	margin-bottom: 0;
}


.statValue {
	font-size: 20px;
	font-weight: 600;
	color: #222;
}

.statsChart {
	flex: 1;
	width: 100%;
	position: relative;
}

.statsChart canvas {
	width: 100% !important;
	height: 100% !important;
}


#tooltip {
    position: absolute;
    display: none;
    padding: 4px 8px;
    background: rgba(0,0,0,0.8);
    color: white;
    font-size: 12px;
    border-radius: 4px;
    pointer-events: none;
    z-index: 9999;
}


.dialogOverlay{
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.35);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

.dialogBox{
	background: white;
	padding: 20px;
	border-radius: 8px;
	width: 320px;
	box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.dialogSub{
	font-size: 13px;
	color: #666;
	margin-bottom: 12px;
}

.dialogButtons{
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 16px;
}

.btnPrimary{
	background: #2563eb;
	color: white;
	border: none;
	padding: 6px 14px;
	border-radius: 4px;
}

.btnSecondary{
	background: #eee;
	border: none;
	padding: 6px 14px;
	border-radius: 4px;
}



.nodeOptions {
    margin-top: 4px;
}

.nodeOption {
    display: block;
    line-height: 1.2;
    margin: 2px 0;
    cursor: pointer;
}

.nodeOption input {
    margin-right: 6px;
}


/* .session .mapView {
    pointer-events: none;
} */