/* Because chrome (topbar, menus, toolbar, panels) — the map canvas
 * itself is styled by argmap.css + the generated theme CSS. */
* { box-sizing: border-box; }
html, body {
	margin: 0;
	height: 100%;
	font-family: 'NotoSans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	color: #444;
	overflow: hidden;
}

#topbar {
	display: flex;
	align-items: center;
	gap: 14px;
	height: 44px;
	padding: 0 12px;
	background: #fff;
	border-bottom: 1px solid #e3e3e3;
}
.brand { display: flex; align-items: center; }
#map-title {
	font-size: 14px;
	font-weight: 700;
	color: #333;
	white-space: nowrap;
	max-width: 260px;
	overflow: hidden;
	text-overflow: ellipsis;
}
#menubar { display: flex; gap: 2px; }
.menu-title {
	padding: 6px 10px;
	font-size: 13px;
	color: #555;
	border-radius: 4px;
	cursor: pointer;
	user-select: none;
}
.menu-title:hover, .menu-title.open { background: #eef6fb; color: #1a86b8; }
#save-status {
	margin-left: auto;
	font-size: 12px;
	color: #aaa;
	white-space: nowrap;
}
#theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 30px;
	height: 30px;
	border: none;
	border-radius: 6px;
	background: transparent;
	color: #777;
	cursor: pointer;
	padding: 0;
}
#theme-toggle:hover { background: #eef6fb; color: #1a86b8; }

.menu-dropdown {
	position: fixed;
	z-index: 900;
	min-width: 230px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 6px;
	box-shadow: 0 4px 14px rgba(0,0,0,0.13);
	padding: 4px 0;
}
.menu-item {
	padding: 7px 16px;
	font-size: 13px;
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
}
.menu-item:hover { background: #eef6fb; color: #1a86b8; }
.menu-sep { border-top: 1px solid #eee; margin: 4px 0; }

#toolbar {
	display: flex;
	align-items: center;
	gap: 2px;
	height: 40px;
	padding: 0 10px;
	background: #fafafa;
	border-bottom: 1px solid #e3e3e3;
}
.tb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: none;
	background: transparent;
	border-radius: 5px;
	cursor: pointer;
	padding: 0;
	color: #555; /* icon strokes use currentColor */
}
.tb-btn:hover { background: #e8f2f8; }
.tb-btn:active { background: #d8eaf4; }
.tb-sep {
	width: 1px;
	height: 22px;
	background: #ddd;
	margin: 0 7px;
}

#map-container {
	position: relative;
	height: calc(100% - 84px);
	width: 100%;
	background: #fff;
	overflow: hidden;
}
#map-container:focus { outline: none; }

.panel-overlay {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgba(0,0,0,0.35);
	display: flex;
	align-items: center;
	justify-content: center;
}
.panel {
	background: #fff;
	border-radius: 8px;
	max-width: 560px;
	max-height: 80vh;
	overflow: auto;
	padding: 22px 28px;
	box-shadow: 0 10px 40px rgba(0,0,0,0.25);
	font-size: 14px;
	line-height: 1.5;
}
.panel h2 { margin-top: 0; font-size: 18px; }
.panel a { color: #1a86b8; }
.panel-close { text-align: right; margin-top: 12px; }
.panel-close button {
	border: 1px solid #ccc;
	background: #f6f6f6;
	border-radius: 5px;
	padding: 6px 16px;
	cursor: pointer;
	font-size: 13px;
}
.panel-actions { text-align: right; margin-top: 18px; }
.panel-actions button {
	border: 1px solid #ccc;
	background: #f6f6f6;
	border-radius: 5px;
	padding: 6px 16px;
	margin-left: 8px;
	cursor: pointer;
	font-size: 13px;
}
.panel-actions button[data-act='save'] {
	background: #1a86b8;
	border-color: #1a86b8;
	color: #fff;
}
.connector-label-editor {
	position: absolute;
	z-index: 500;
	width: 220px;
	padding: 4px 8px;
	border: 1px solid #22aae0;
	border-radius: 5px;
	background: #fff;
	color: #333;
	font: 700 12px 'NotoSans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	box-shadow: 0 2px 10px rgba(0,0,0,0.2);
	outline: none;
}
body.dark .connector-label-editor {
	background: #2a2e33;
	color: #e2e5e7;
}
/* ---- loading overlay (large map opening; see loading.js) ---- */
.loading-overlay {
	position: fixed;
	inset: 0;
	z-index: 1100;
	background: rgba(255,255,255,0.72);
	display: flex;
	align-items: center;
	justify-content: center;
}
.loading-card {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #fff;
	border: 1px solid #e3e3e3;
	border-radius: 10px;
	padding: 16px 22px;
	box-shadow: 0 8px 30px rgba(0,0,0,0.12);
	font-size: 14px;
	color: #444;
}
.loading-spinner {
	width: 20px;
	height: 20px;
	border: 3px solid #d6eaf5;
	border-top-color: #1a86b8;
	border-radius: 50%;
	animation: loading-spin 0.8s linear infinite;
	/* keep the spin on the compositor: the layout pass blocks the main thread */
	will-change: transform;
}
@keyframes loading-spin { to { transform: rotate(360deg); } }
body.dark .loading-overlay { background: rgba(27,29,32,0.72); }
body.dark .loading-card {
	background: #2a2e33;
	border-color: #3d4248;
	color: #d3d7db;
}

/* ---- node style popover (right-click a node; node-style.js) ---- */
.node-style-popover {
	position: fixed;
	z-index: 950;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 8px;
	box-shadow: 0 6px 24px rgba(0,0,0,0.16);
	padding: 10px;
}
.ns-row { display: flex; align-items: center; gap: 6px; }
.ns-row + .ns-row { margin-top: 9px; }
.ns-swatch {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 1px solid rgba(0,0,0,0.18);
	cursor: pointer;
	padding: 0;
	background: #fff;
}
.ns-swatch:hover { transform: scale(1.12); }
.ns-swatch.current { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1a86b8; }
.ns-none {
	background:
		linear-gradient(to top left,
			transparent calc(50% - 1px), #d84a4a calc(50% - 1px),
			#d84a4a calc(50% + 1px), transparent calc(50% + 1px)) #fff;
}
.ns-custom {
	width: 24px;
	height: 24px;
	padding: 0;
	border: 1px solid rgba(0,0,0,0.18);
	border-radius: 50%;
	background: conic-gradient(#f66, #fc6, #ff6, #6f6, #6cf, #66f, #f6f, #f66);
	cursor: pointer;
}
.ns-custom::-webkit-color-swatch-wrapper { padding: 0; }
.ns-custom::-webkit-color-swatch { border: none; border-radius: 50%; opacity: 0; }
.ns-btn {
	min-width: 30px;
	height: 28px;
	border: 1px solid #ddd;
	border-radius: 5px;
	background: #fafafa;
	color: #444;
	font: 700 13px 'NotoSans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	cursor: pointer;
	padding: 0 7px;
}
.ns-btn:hover { background: #e8f2f8; color: #1a86b8; }
.ns-btn small { font-size: 10px; font-weight: 700; }
.ns-i { font-style: italic; }
.ns-u { text-decoration: underline; }
.ns-sep { width: 1px; height: 20px; background: #ddd; margin: 0 3px; }
body.dark .node-style-popover {
	background: #2a2e33;
	border-color: #3d4248;
	box-shadow: 0 6px 24px rgba(0,0,0,0.5);
}
body.dark .ns-swatch.current { box-shadow: 0 0 0 2px #2a2e33, 0 0 0 4px #6cc4ee; }
body.dark .ns-btn {
	background: #34393f;
	border-color: #4a5057;
	color: #d3d7db;
}
body.dark .ns-btn:hover { background: #3b4148; color: #6cc4ee; }
body.dark .ns-sep { background: #4a5057; }

/* ---- connector popover (click a connecting line; label-edit.js) ---- */
.connector-popover {
	position: fixed;
	z-index: 950;
	display: flex;
	gap: 4px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 8px;
	box-shadow: 0 6px 24px rgba(0,0,0,0.16);
	padding: 6px;
}
.cp-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	width: 66px;
	padding: 8px 4px 6px;
	border: none;
	border-radius: 6px;
	background: transparent;
	color: #1a86b8;
	font: 12px 'NotoSans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	cursor: pointer;
}
.cp-tile:hover { background: #1a86b8; color: #fff; }
body.dark .connector-popover {
	background: #2a2e33;
	border-color: #3d4248;
	box-shadow: 0 6px 24px rgba(0,0,0,0.5);
}
body.dark .cp-tile { color: #6cc4ee; }
body.dark .cp-tile:hover { background: #1a86b8; color: #fff; }

/* ---- first-visit welcome (intro.js) ---- */
.intro-panel { max-width: 480px; }
.intro-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 18px;
	font-size: 13px;
	color: #666;
}
.intro-footer label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.intro-start {
	border: 1px solid #1a86b8;
	background: #1a86b8;
	color: #fff;
	border-radius: 5px;
	padding: 7px 18px;
	cursor: pointer;
	font-size: 13px;
}
.intro-start:hover { background: #16749f; }
body.dark .intro-footer { color: #a7adb3; }

.kbd td { padding: 3px 12px 3px 0; }
kbd {
	background: #f3f3f3;
	border: 1px solid #ccc;
	border-bottom-width: 2px;
	border-radius: 4px;
	padding: 1px 7px;
	font-size: 12px;
	font-family: inherit;
	white-space: nowrap;
}

/* ---- dark mode (View > Dark mode; body.dark set by dark-mode.js) ---- */
body.dark {
	background: #1b1d20;
	color: #d3d7db;
	color-scheme: dark;
}
body.dark #topbar {
	background: #24272b;
	border-bottom-color: #34383d;
}
body.dark #map-title { color: #e2e5e7; }
body.dark .menu-title { color: #c3c8cd; }
body.dark .menu-title:hover, body.dark .menu-title.open {
	background: #31363c;
	color: #6cc4ee;
}
body.dark #save-status { color: #7c8288; }
body.dark #theme-toggle { color: #c3c8cd; }
body.dark #theme-toggle:hover { background: #31363c; color: #6cc4ee; }
body.dark .menu-dropdown {
	background: #2a2e33;
	border-color: #3d4248;
	box-shadow: 0 4px 14px rgba(0,0,0,0.5);
}
body.dark .menu-item { color: #d3d7db; }
body.dark .menu-item:hover { background: #31363c; color: #6cc4ee; }
body.dark .menu-sep { border-top-color: #3d4248; }
body.dark #toolbar {
	background: #24272b;
	border-bottom-color: #34383d;
}
body.dark .tb-btn { color: #c3c8cd; }
body.dark .tb-btn:hover { background: #32373d; }
body.dark .tb-btn:active { background: #3b4148; }
body.dark .tb-sep { background: #3d4248; }
body.dark #map-container { background: #1b1d20; }
body.dark .panel {
	background: #2a2e33;
	color: #d3d7db;
}
body.dark .panel a { color: #6cc4ee; }
body.dark .panel-close button,
body.dark .panel-actions button {
	background: #34393f;
	border-color: #4a5057;
	color: #d3d7db;
}
body.dark .panel-actions button[data-act='save'] {
	background: #1a86b8;
	border-color: #1a86b8;
	color: #fff;
}
body.dark kbd {
	background: #34393f;
	border-color: #4a5057;
	color: #d3d7db;
}

@media print {
	#topbar, #toolbar { display: none; }
	#map-container { height: 100%; background: #fff !important; }
}