/*!
 * LMI OneNet — workspace styles v2.6.0
 * Theme: Network IT Engineering Blueprint · LMI Corporation brand palette
 */
.lmi-on-root {
	--lmi-main: #E26C15;
	--lmi-main-dark: #c45a0c;
	--lmi-accent: #E89611;
	--lmi-bg: #8B8B8C;
	--lmi-navy: #042C71;
	--lmi-navy-2: #0a3a8c;
	--lmi-cyan: #2A9FC4;
	--lmi-ink: #1d2433;
	--lmi-muted: #5f6b7a;
	--lmi-line: #d5dce6;
	--lmi-panel: #ffffff;
	--lmi-stage: #eef3f9;
	--lmi-good: #1a7837;
	--lmi-warn: #b26b00;
	--lmi-bad: #b2182b;
	/* Theme tokens (light). Dark values are set by [data-lmi-theme] below. */
	--lmi-strong: #042C71;
	--lmi-surface: #ffffff;
	--lmi-surface-2: #fbfcfe;
	--lmi-surface-3: #f1f5fb;
	--lmi-tabs: #eef2f8;
	--lmi-row-alt: #f6f8fc;
	--lmi-row-line: #e3e8f0;
	--lmi-input-line: #c2ccda;
	--lmi-float: rgba(255, 255, 255, .94);
	--lmi-alert-bg: #fdecee;
	--lmi-alert-ink: #7a1020;
	--lmi-warn-bg: #fff4e0;
	--lmi-total-bg: #fdebd3;
	position: relative;
	width: 100%;
	height: var(--lmi-on-h, 820px);
	min-height: 520px;
	container: lmi-on / inline-size;
	font-family: Calibri, Carlito, "Segoe UI", Arial, sans-serif;
	font-size: 10pt;
	line-height: 1.35;
	color: var(--lmi-ink);
	outline: none;
	box-sizing: border-box;
}
.lmi-on-root *, .lmi-on-root *::before, .lmi-on-root *::after { box-sizing: border-box; }
.lmi-on-root:fullscreen { background: var(--lmi-surface); height: 100vh !important; }
.lmi-on-root.is-pseudo-full { position: fixed; inset: 0; z-index: 100000; height: 100vh !important; background: var(--lmi-surface); }
/* Full-width breakout from narrow theme content columns (16px gutter each side). */
/* !important: block themes force margin:auto !important on content children. */
.lmi-on-root.lmi-on-full {
	--lmi-on-vw: calc(100vw - var(--lmi-on-sbw, 0px));
	width: calc(var(--lmi-on-vw) - 32px) !important;
	max-width: none !important;
	margin-left: calc(50% - var(--lmi-on-vw) / 2 + 16px) !important;
	margin-right: 0 !important;
}
.lmi-on-root.lmi-on-full:fullscreen, .lmi-on-root.lmi-on-full.is-pseudo-full { width: 100vw; margin: 0; }
.lmi-on-loading { display: grid; place-items: center; height: 100%; color: var(--lmi-strong); }

.lmi-on-app {
	position: relative;
	display: grid;
	grid-template-rows: auto 1fr auto;
	height: 100%;
	border: 1px solid var(--lmi-line);
	border-radius: 8px;
	overflow: hidden;
	background: var(--lmi-panel);
}
.lmi-on-root button, .lmi-on-root input, .lmi-on-root select, .lmi-on-root textarea { font: inherit; color: inherit; letter-spacing: normal; text-transform: none; }

/* ------------------------------------------------------------------ Header */
.lmi-on-header {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 8px 12px;
	color: #fff;
	background-color: var(--lmi-navy);
	background-image:
		linear-gradient(rgba(42, 159, 196, .2) 1px, transparent 1px),
		linear-gradient(90deg, rgba(42, 159, 196, .2) 1px, transparent 1px);
	background-size: 20px 20px;
	border-bottom: 4px solid var(--lmi-main);
}
.lmi-on-logo { background: #fff; border-radius: 6px; padding: 4px 8px; line-height: 0; flex: none; }
.lmi-on-logo img { height: 56px; width: auto; display: block; }
.lmi-on-brand { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.lmi-on-app-name { font-weight: 700; font-size: 15pt; line-height: 1.1; }
.lmi-on-app-sub { color: #d7ecf5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lmi-on-dirty { color: var(--lmi-accent); font-weight: 700; }
.lmi-on-mode { color: var(--lmi-accent); font-size: 9pt; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.lmi-on-header .lmi-on-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.lmi-on-header .lmi-on-btn { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .3); color: #fff; }
.lmi-on-header .lmi-on-btn:hover { background: rgba(255, 255, 255, .2); }
.lmi-on-header .lmi-on-btn-primary { background: var(--lmi-main); border-color: var(--lmi-main); }
.lmi-on-header .lmi-on-btn-primary:hover { background: var(--lmi-main-dark); }

/* ----------------------------------------------------------------- Buttons */
.lmi-on-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 32px;
	padding: 5px 12px;
	border: 1px solid var(--lmi-line);
	border-radius: 6px;
	background: var(--lmi-surface);
	color: var(--lmi-strong);
	cursor: pointer;
	text-decoration: none;
	line-height: 1.2;
	white-space: nowrap;
	transition: background .15s, border-color .15s;
}
.lmi-on-btn:hover { background: var(--lmi-surface-3); border-color: var(--lmi-input-line); }
.lmi-on-btn:focus-visible, .lmi-on-tool:focus-visible, .lmi-on-tab:focus-visible, .lmi-on-ftab:focus-visible { outline: 3px solid var(--lmi-cyan); outline-offset: 2px; }
.lmi-on-btn:disabled { opacity: .55; cursor: not-allowed; }
.lmi-on-btn-primary { background: var(--lmi-main); border-color: var(--lmi-main); color: #fff; }
.lmi-on-btn-primary:hover { background: var(--lmi-main-dark); border-color: var(--lmi-main-dark); }
.lmi-on-btn-danger { color: var(--lmi-bad); border-color: #e6b8bf; }
.lmi-on-btn-danger:hover { background: #fdf0f2; }
.lmi-on-btn-sm { min-height: 26px; padding: 3px 8px; font-size: 9pt; }
.lmi-on-icon-only span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.lmi-on-ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.lmi-on-mini { border: 1px solid var(--lmi-line); background: var(--lmi-surface); border-radius: 4px; width: 24px; height: 24px; cursor: pointer; line-height: 1; padding: 0; }
.lmi-on-mini:disabled { opacity: .4; cursor: default; }
.lmi-on-danger { color: var(--lmi-bad); }
.lmi-on-link { background: none; border: 0; padding: 0; color: var(--lmi-strong); text-decoration: underline; cursor: pointer; text-align: left; font-weight: 600; }

/* -------------------------------------------------------------------- Body */
.lmi-on-body { display: grid; grid-template-columns: 48px 1fr 360px; min-height: 0; }
.lmi-on-toolbar {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 8px 0;
	background: var(--lmi-navy);
	overflow-y: auto;
}
.lmi-on-tool, .lmi-on-root .lmi-on-tool {
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: #cfe2f3;
	cursor: pointer;
}
/* 2.2.0: ".lmi-on-root button { color: inherit }" made the icons inherit the dark text colour
 * in the light theme (dark on navy). Tool buttons always use light icons on the navy bar. */
.lmi-on-tool:hover, .lmi-on-root .lmi-on-tool:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.lmi-on-tool.is-active, .lmi-on-root .lmi-on-tool.is-active { background: var(--lmi-main); color: #fff; }
.lmi-on-tool .lmi-on-ico { width: 20px; height: 20px; }
.lmi-on-tool-sep { width: 24px; height: 1px; background: rgba(255, 255, 255, .25); margin: 4px 0; }

.lmi-on-stage {
	position: relative;
	overflow: hidden;
	min-height: 0;
	background-color: var(--lmi-stage);
	background-image:
		linear-gradient(rgba(42, 159, 196, .12) 1px, transparent 1px),
		linear-gradient(90deg, rgba(42, 159, 196, .12) 1px, transparent 1px);
	background-size: 24px 24px;
}
.lmi-on-canvas { position: absolute; inset: 0; touch-action: none; }
.lmi-on-hint {
	position: absolute;
	left: 10px;
	bottom: 52px;
	max-width: min(520px, calc(100% - 20px));
	padding: 6px 10px;
	border-radius: 6px;
	background: rgba(4, 44, 113, .88);
	color: #fff;
	font-size: 9pt;
	pointer-events: none;
}
.lmi-on-hint:empty { display: none; }
.lmi-on-viewbar {
	position: absolute;
	right: 10px;
	top: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	justify-content: flex-end;
	padding: 6px;
	border-radius: 8px;
	background: var(--lmi-float);
	box-shadow: 0 2px 10px rgba(4, 44, 113, .18);
	max-width: calc(100% - 20px);
}
.lmi-on-viewbar select { max-width: 230px; }
.lmi-on-seg { display: inline-flex; border: 1px solid var(--lmi-line); border-radius: 6px; overflow: hidden; }
.lmi-on-seg button { border: 0; background: var(--lmi-surface); padding: 5px 9px; cursor: pointer; color: var(--lmi-strong); }
.lmi-on-seg button + button { border-left: 1px solid var(--lmi-line); }
.lmi-on-seg button.is-active { background: var(--lmi-navy); color: #fff; }
.lmi-on-op { display: inline-flex; align-items: center; gap: 4px; color: var(--lmi-muted); font-size: 9pt; }
.lmi-on-op input { width: 80px; accent-color: var(--lmi-main); }
.lmi-on-floortabs { position: absolute; left: 10px; bottom: 10px; display: flex; gap: 4px; flex-wrap: wrap; max-width: calc(100% - 20px); }
.lmi-on-ftab {
	border: 1px solid var(--lmi-line);
	background: var(--lmi-surface);
	border-radius: 6px;
	padding: 5px 10px;
	cursor: pointer;
	color: var(--lmi-strong);
	box-shadow: 0 1px 4px rgba(4, 44, 113, .12);
}
.lmi-on-ftab.is-active { background: var(--lmi-navy); color: #fff; border-color: var(--lmi-navy); }
.lmi-on-ftab-add { display: grid; place-items: center; padding: 4px 8px; }
.lmi-on-tip {
	position: absolute;
	left: 0;
	top: 0;
	min-width: 220px;
	padding: 6px 9px;
	border-radius: 6px;
	background: rgba(29, 36, 51, .92);
	color: #fff;
	font-size: 9pt;
	pointer-events: none;
	z-index: 3;
}
.lmi-on-tip[hidden] { display: none; }
.lmi-on-empty {
	position: absolute;
	inset: 0;
	margin: auto;
	width: min(460px, 90%);
	height: fit-content;
	padding: 22px;
	border-radius: 10px;
	background: var(--lmi-surface);
	border-top: 5px solid var(--lmi-main);
	box-shadow: 0 6px 30px rgba(4, 44, 113, .18);
	text-align: center;
}
.lmi-on-empty h3 { margin: 0 0 8px; color: var(--lmi-strong); font-size: 14pt; }
.lmi-on-empty .lmi-on-row { justify-content: center; }
.lmi-on-banner {
	position: absolute;
	left: 10px;
	top: 10px;
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	padding: 8px 12px;
	border-radius: 8px;
	background: #fff7ec;
	border: 1px solid var(--lmi-accent);
	color: #6b3b00;
	box-shadow: 0 2px 10px rgba(4, 44, 113, .15);
	max-width: min(560px, calc(100% - 20px));
}
.lmi-on-empty[hidden], .lmi-on-banner[hidden] { display: none; }

/* ----------------------------------------------------------------- Sidebar */
.lmi-on-sidebar { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--lmi-line); background: var(--lmi-surface-2); }
.lmi-on-tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px 6px 0; background: var(--lmi-tabs); border-bottom: 1px solid var(--lmi-line); }
.lmi-on-tab { border: 0; background: transparent; padding: 7px 9px; border-radius: 6px 6px 0 0; cursor: pointer; color: var(--lmi-muted); font-weight: 600; }
.lmi-on-tab:hover { color: var(--lmi-strong); background: var(--lmi-surface-3); }
.lmi-on-tab.is-active { background: var(--lmi-surface-2); color: var(--lmi-strong); box-shadow: inset 0 3px 0 var(--lmi-main); }
.lmi-on-panel { flex: 1; overflow-y: auto; padding: 10px 12px 18px; }
.lmi-on-sec { margin-bottom: 14px; }
.lmi-on-sec h4 { margin: 0 0 8px; padding-bottom: 4px; color: var(--lmi-strong); font-size: 11pt; border-bottom: 2px solid var(--lmi-accent); }
.lmi-on-field { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; min-width: 0; }
.lmi-on-field > span { font-weight: 600; color: var(--lmi-strong); font-size: 9pt; }
.lmi-on-field small { color: var(--lmi-muted); font-size: 8.5pt; }
.lmi-on-field.is-check { flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 8px; }
.lmi-on-root input[type=text], .lmi-on-root input[type=number], .lmi-on-root input[type=search], .lmi-on-root input[type=url], .lmi-on-root select, .lmi-on-root textarea {
	width: 100%;
	min-height: 30px;
	padding: 4px 8px;
	border: 1px solid var(--lmi-input-line);
	border-radius: 5px;
	background: var(--lmi-surface);
	margin: 0;
	box-shadow: none;
}
.lmi-on-viewbar select { width: auto; }
.lmi-on-root input:focus, .lmi-on-root select:focus, .lmi-on-root textarea:focus { outline: 2px solid var(--lmi-cyan); outline-offset: 0; border-color: var(--lmi-cyan); }
.lmi-on-root .is-invalid { border-color: var(--lmi-bad) !important; background: var(--lmi-alert-bg); }
.lmi-on-root input[type=checkbox] { accent-color: var(--lmi-main); width: 16px; height: 16px; margin: 0; }
.lmi-on-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; margin: 0 10px 6px 0; }
.lmi-on-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
.lmi-on-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; }
.lmi-on-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 8px; }
.lmi-on-label { margin: 4px 0; font-weight: 600; color: var(--lmi-strong); font-size: 9pt; }
.lmi-on-muted { color: var(--lmi-muted); font-size: 9pt; margin: 4px 0 8px; }
.lmi-on-nowrap { white-space: nowrap; }
.lmi-on-layers { display: grid; grid-template-columns: 1fr 1fr; }
.lmi-on-req { margin: 4px 0 0 18px; padding: 0; color: var(--lmi-ink); }
.lmi-on-code { background: var(--lmi-surface-3); border: 1px dashed var(--lmi-input-line); border-radius: 6px; padding: 6px 8px; margin: 6px 0; font-size: 9pt; word-break: break-word; }
.lmi-on-code code { background: var(--lmi-surface); padding: 1px 4px; border-radius: 3px; }

.lmi-on-tablewrap { width: 100%; overflow-x: auto; margin: 4px 0 6px; }
.lmi-on-table { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
.lmi-on-table th { background: var(--lmi-navy); color: #fff; text-align: left; font-weight: 600; padding: 5px 6px; white-space: nowrap; }
.lmi-on-table td { padding: 4px 6px; border-bottom: 1px solid var(--lmi-row-line); vertical-align: middle; }
.lmi-on-table tr:nth-child(even) td { background: var(--lmi-row-alt); }
.lmi-on-table tr.is-current td { background: #fff3e6; }
.lmi-on-table tr.is-alert td { background: var(--lmi-alert-bg); color: var(--lmi-alert-ink); }
.lmi-on-table tr.is-off td { color: var(--lmi-muted); }
.lmi-on-table tr.is-total td { font-weight: 700; background: var(--lmi-total-bg); }
.lmi-on-table td input, .lmi-on-table td select { min-height: 26px; padding: 2px 4px; }

.lmi-on-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.lmi-on-stat { position: relative; overflow: hidden; padding: 6px 8px 8px; border: 1px solid var(--lmi-line); border-radius: 6px; background: var(--lmi-surface); }
.lmi-on-stat span { display: block; color: var(--lmi-muted); font-size: 8.5pt; }
.lmi-on-stat strong { font-size: 13pt; color: var(--lmi-strong); }
.lmi-on-stat i { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--lmi-cyan); }
.lmi-on-stat.is-good i { background: var(--lmi-good); }
.lmi-on-stat.is-warn i { background: var(--lmi-accent); }
.lmi-on-stat.is-bad i { background: var(--lmi-bad); }
.lmi-on-stat.is-bad strong { color: var(--lmi-bad); }

.lmi-on-matlist, .lmi-on-keys { list-style: none; margin: 0; padding: 0; }
.lmi-on-matlist li { display: grid; grid-template-columns: 14px 1fr auto; gap: 8px; align-items: center; padding: 3px 0; }
.lmi-on-matlist i { width: 14px; height: 6px; border-radius: 2px; }
.lmi-on-matlist small { color: var(--lmi-muted); }
.lmi-on-keys li { display: flex; gap: 8px; align-items: center; padding: 2px 0; }
.lmi-on-keys kbd { min-width: 74px; padding: 1px 6px; border: 1px solid var(--lmi-line); border-bottom-width: 2px; border-radius: 4px; background: var(--lmi-surface); font: 9pt Calibri, Arial, sans-serif; text-align: center; }

.lmi-on-models { display: flex; flex-direction: column; gap: 8px; }
.lmi-on-model { border: 1px solid var(--lmi-line); border-radius: 8px; padding: 8px 10px; background: var(--lmi-surface); }
.lmi-on-model.is-active { border-color: var(--lmi-main); box-shadow: inset 4px 0 0 var(--lmi-main); }
.lmi-on-model-head { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; color: var(--lmi-strong); }
.lmi-on-model ul { margin: 4px 0 0 16px; padding: 0; font-size: 9pt; }
.lmi-on-pill { padding: 1px 7px; border-radius: 10px; background: #e7f4f9; color: #15607a; font-size: 8.5pt; font-weight: 600; }
.lmi-on-pill-alt { background: #fdebd3; color: #8a4b05; }
.lmi-on-chart { width: 100%; height: auto; border: 1px solid var(--lmi-line); border-radius: 6px; background: var(--lmi-surface); }

/* ------------------------------------------------------------------ Status */
.lmi-on-status {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	align-items: center;
	padding: 5px 12px;
	background: var(--lmi-surface-3);
	border-top: 1px solid var(--lmi-line);
	color: var(--lmi-muted);
	font-size: 9pt;
}
.lmi-on-busy.is-busy { color: var(--lmi-main); font-weight: 700; }
.lmi-on-legend { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--lmi-ink); }
.lmi-on-legend strong { color: var(--lmi-strong); }
.lmi-on-lg-bar { display: inline-block; width: 160px; height: 10px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .1); }
.lmi-on-lg-chip { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .1); }

/* ------------------------------------------------------------------ Modals */
.lmi-on-overlay { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; background: rgba(4, 44, 113, .42); }
.lmi-on-overlay[hidden] { display: none; }
.lmi-on-modal { width: min(480px, 100%); max-height: 100%; display: flex; flex-direction: column; border-radius: 10px; background: var(--lmi-surface); box-shadow: 0 16px 50px rgba(0, 0, 0, .3); overflow: hidden; }
.lmi-on-modal.is-wide { width: min(860px, 100%); }
.lmi-on-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--lmi-navy); color: #fff; border-bottom: 3px solid var(--lmi-main); }
.lmi-on-modal-head h3 { margin: 0; font-size: 12pt; color: #fff; }
.lmi-on-x { border: 0; background: transparent; color: #fff; font-size: 20px; line-height: 1; cursor: pointer; width: 32px; height: 32px; border-radius: 6px; }
.lmi-on-x:hover { background: rgba(255, 255, 255, .15); }
.lmi-on-modal-body { padding: 14px; overflow-y: auto; }
.lmi-on-modal-body p { margin: 0 0 10px; }
.lmi-on-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--lmi-line); background: var(--lmi-surface-3); }
.lmi-on-openlist { margin-top: 10px; max-height: 50vh; overflow: auto; }

.lmi-on-menu { position: absolute; z-index: 15; display: flex; flex-direction: column; min-width: 230px; padding: 4px; border-radius: 8px; background: var(--lmi-surface); box-shadow: 0 8px 30px rgba(4, 44, 113, .25); border: 1px solid var(--lmi-line); }
.lmi-on-menu button { text-align: left; border: 0; background: transparent; padding: 8px 10px; border-radius: 5px; cursor: pointer; color: var(--lmi-strong); }
.lmi-on-menu button:hover, .lmi-on-menu button:focus-visible { background: var(--lmi-surface-3); outline: none; }

.lmi-on-toasts { position: absolute; right: 12px; bottom: 44px; z-index: 30; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; pointer-events: none; }
.lmi-on-toast { max-width: 420px; padding: 8px 12px; border-radius: 6px; background: var(--lmi-navy); color: #fff; box-shadow: 0 4px 16px rgba(0, 0, 0, .2); transition: opacity .4s, transform .4s; }
.lmi-on-toast-success { background: #13612b; }
.lmi-on-toast-error { background: var(--lmi-bad); }
.lmi-on-toast.is-out { opacity: 0; transform: translateY(6px); }

.lmi-on-gate { padding: 24px; border: 1px solid #d5dce6; border-top: 5px solid #E26C15; border-radius: 8px; text-align: center; font-family: Calibri, Carlito, Arial, sans-serif; font-size: 10pt; }
.lmi-on-gate img { height: 56px; width: auto; }
.lmi-on-gate-btn { display: inline-block; margin-top: 6px; padding: 7px 16px; border-radius: 6px; background: #E26C15; color: #fff !important; text-decoration: none; }

/* ------------------------------------------------------- Network & CCTV */
.lmi-on-modal.is-xwide { width: min(1240px, 100%); }
.lmi-on-specline { margin: 4px 0; font-size: 9pt; color: var(--lmi-ink); }
.lmi-on-chip { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: middle; border: 1px solid rgba(0, 0, 0, .15); }
.lmi-on-ok { color: var(--lmi-good); font-weight: 700; margin: 4px 0; }
.lmi-on-issues { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; }
.lmi-on-issues li { padding: 4px 6px 4px 10px; margin-bottom: 3px; border-radius: 4px; font-size: 9pt; }
.lmi-on-issues li.is-error { background: var(--lmi-alert-bg); border-left: 4px solid var(--lmi-bad); }
.lmi-on-issues li.is-warn { background: var(--lmi-warn-bg); border-left: 4px solid var(--lmi-accent); }
.lmi-on-issues .lmi-on-link { font-weight: 400; text-decoration: none; color: inherit; }
.lmi-on-issues .lmi-on-link:hover { text-decoration: underline; }
.lmi-on-pov { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 14px; align-items: start; }
.lmi-on-pov-main { min-width: 0; }
.lmi-on-pov-view { width: 100%; background: #10151f; border-radius: 6px; overflow: hidden; line-height: 0; min-height: 200px; }
.lmi-on-pov-canvas { width: 100%; height: auto; display: block; image-rendering: auto; }
.lmi-on-pov-info { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; font-size: 9.5pt; }
.lmi-on-pov-info strong { color: var(--lmi-strong); }
.lmi-on-pov-info em { display: inline-block; font-style: normal; margin: 0 8px 4px 0; padding: 1px 7px; border-left: 4px solid; background: var(--lmi-surface-3); border-radius: 3px; }
.lmi-on-pov-controls { display: flex; flex-direction: column; gap: 8px; }
.lmi-on-pov-slider { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; font-size: 9pt; color: var(--lmi-strong); font-weight: 600; }
.lmi-on-pov-slider input { grid-column: 1 / -1; width: 100%; accent-color: var(--lmi-main); }
.lmi-on-pov-slider output { font-weight: 400; color: var(--lmi-muted); }
@container lmi-on (max-width: 800px) {
	.lmi-on-pov { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------- Responsive */
/* Container queries: the layout adapts to the space the workspace is given, not the window. */
@container lmi-on (max-width: 1180px) {
	.lmi-on-body { grid-template-columns: 44px 1fr 300px; }
	.lmi-on-header .lmi-on-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.lmi-on-header .lmi-on-btn { padding: 5px 8px; }
}
@container lmi-on (max-width: 1180px) and (min-width: 801px) {
	.lmi-on-viewbar { left: 10px; right: auto; justify-content: flex-start; }
}
@container lmi-on (max-width: 800px) {
	.lmi-on-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(280px, 1fr) minmax(220px, 42%); }
	.lmi-on-toolbar { flex-direction: row; overflow-x: auto; padding: 4px 6px; }
	.lmi-on-tool-sep { width: 1px; height: 24px; margin: 0 4px; }
	.lmi-on-sidebar { border-left: 0; border-top: 1px solid var(--lmi-line); }
	.lmi-on-header { flex-wrap: wrap; }
	.lmi-on-brand { min-width: 140px; }
	.lmi-on-viewbar { left: 10px; right: 10px; justify-content: flex-start; }
	.lmi-on-viewbar select { max-width: 160px; }
	.lmi-on-legend { margin-left: 0; }
	.lmi-on-lg-bar { width: 100px; }
}
@media (max-width: 600px) {
	.lmi-on-root { height: max(var(--lmi-on-h, 820px), 760px); }
	.lmi-on-logo img { height: 40px; }
	.lmi-on-op { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.lmi-on-root * { transition: none !important; }
}

/* ---------- 2.1.0: workspaces, people, telecom rooms, cable routes ---------- */
.lmi-on-wschip { color: var(--lmi-accent); font-weight: 700; margin-right: 2px; }
.lmi-on-browser { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; min-height: 52vh; }
.lmi-on-browser.is-locked { grid-template-columns: minmax(0, 1fr); }
.lmi-on-wsnav { border-right: 1px solid var(--lmi-line); padding-right: 12px; display: flex; flex-direction: column; gap: 4px; max-height: 64vh; overflow: auto; }
.lmi-on-wsnav h4 { margin: 12px 0 4px; font-size: 9pt; text-transform: uppercase; letter-spacing: .04em; color: var(--lmi-muted); }
.lmi-on-wsitem { display: grid; grid-template-columns: 18px 1fr; column-gap: 8px; align-items: center; text-align: left; background: none; border: 1px solid transparent; border-radius: 6px; padding: 6px 8px; cursor: pointer; color: var(--lmi-ink); font: inherit; }
.lmi-on-wsitem .lmi-on-ico { width: 16px; height: 16px; grid-row: span 2; }
.lmi-on-wsitem small { grid-column: 2; color: var(--lmi-muted); font-size: 8.5pt; }
.lmi-on-wsitem:hover { background: var(--lmi-surface-3); }
.lmi-on-wsitem.is-active { background: #e8eefb; border-color: var(--lmi-navy); color: var(--lmi-strong); font-weight: 700; }
.lmi-on-wsnav > .lmi-on-btn { margin-top: 8px; align-self: flex-start; }
.lmi-on-wsmain { min-width: 0; }
.lmi-on-wshead h4 { margin: 0; font-size: 13pt; color: var(--lmi-strong); }
.lmi-on-wshead .lmi-on-row { flex-wrap: wrap; align-items: center; }
.lmi-on-wshead .lmi-on-code { display: inline-block; margin: 0; }
.lmi-on-wstitle { display: flex; gap: 10px; align-items: center; }
.lmi-on-rolechip { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 8.5pt; font-weight: 700; background: #e8eefb; color: var(--lmi-strong); white-space: nowrap; }
.lmi-on-rolechip.is-owner, .lmi-on-rolechip.is-admin { background: var(--lmi-navy); color: #fff; }
.lmi-on-rolechip.is-comanager { background: #fde7d6; color: #8a3c05; }
.lmi-on-rolechip.is-editor { background: #dff1f7; color: #0d5c76; }
.lmi-on-rolechip.is-viewer { background: #eceff3; color: var(--lmi-muted); }
.lmi-on-members h4 { margin: 14px 0 6px; color: var(--lmi-strong); }
.lmi-on-members input[type="search"] { width: 100%; }
.lmi-on-picker-results { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; min-height: 30px; }
.lmi-on-chipbtn { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--lmi-line); background: var(--lmi-surface); border-radius: 999px; padding: 3px 10px 3px 6px; cursor: pointer; font: inherit; color: var(--lmi-ink); }
.lmi-on-chipbtn:hover, .lmi-on-chipbtn:focus-visible { border-color: var(--lmi-main); color: var(--lmi-main-dark); }
.lmi-on-chipbtn .lmi-on-ico { width: 14px; height: 14px; }
.lmi-on-chipbtn small { color: var(--lmi-muted); }
.lmi-on-people { margin: 6px 0; }
.lmi-on-rack { overflow-x: auto; margin-top: 8px; background: var(--lmi-surface); border: 1px solid var(--lmi-line); border-radius: 6px; padding: 6px; }
.lmi-on-rack svg { display: block; max-width: none; height: auto; }
.lmi-on-alert { background: var(--lmi-alert-bg); color: var(--lmi-alert-ink); border-radius: 6px; padding: 6px 8px; margin: 6px 0; }
.lmi-on-manual { font-family: Calibri, Carlito, "Segoe UI", Arial, sans-serif; font-size: 10pt; line-height: 1.5; color: #1d2433; max-width: 980px; }
@container lmi-on (max-width: 760px) {
	.lmi-on-browser { grid-template-columns: minmax(0, 1fr); }
	.lmi-on-wsnav { border-right: 0; border-bottom: 1px solid var(--lmi-line); padding: 0 0 8px; max-height: 26vh; }
}

/* ---------- 2.1.0: dark theme ----------
 * data-lmi-theme="dark" forces it, "auto" follows the device. Brand colours stay; surfaces
 * become deep navy-grey and text light. The floor plan itself keeps its own colours. */
.lmi-on-root[data-lmi-theme="dark"] {
	color-scheme: dark;
	--lmi-ink: #e6ebf3;
	--lmi-muted: #9aa8bb;
	--lmi-line: #2c3a52;
	--lmi-panel: #141b28;
	--lmi-stage: #0d131d;
	--lmi-strong: #8cc8ff;
	--lmi-surface: #1b2434;
	--lmi-surface-2: #161e2c;
	--lmi-surface-3: #222d40;
	--lmi-tabs: #111827;
	--lmi-row-alt: #1e2838;
	--lmi-row-line: #2c3a52;
	--lmi-input-line: #3a4a64;
	--lmi-float: rgba(22, 30, 44, .94);
	--lmi-alert-bg: #3a1820;
	--lmi-alert-ink: #ffb8c2;
	--lmi-warn-bg: #3a2a10;
	--lmi-total-bg: #3d2a14;
	--lmi-good: #5fd38a;
	--lmi-bad: #ff7b8c;
}
@media (prefers-color-scheme: dark) {
	.lmi-on-root[data-lmi-theme="auto"] {
		color-scheme: dark;
		--lmi-ink: #e6ebf3;
		--lmi-muted: #9aa8bb;
		--lmi-line: #2c3a52;
		--lmi-panel: #141b28;
		--lmi-stage: #0d131d;
		--lmi-strong: #8cc8ff;
		--lmi-surface: #1b2434;
		--lmi-surface-2: #161e2c;
		--lmi-surface-3: #222d40;
		--lmi-tabs: #111827;
		--lmi-row-alt: #1e2838;
		--lmi-row-line: #2c3a52;
		--lmi-input-line: #3a4a64;
		--lmi-float: rgba(22, 30, 44, .94);
		--lmi-alert-bg: #3a1820;
		--lmi-alert-ink: #ffb8c2;
		--lmi-warn-bg: #3a2a10;
		--lmi-total-bg: #3d2a14;
		--lmi-good: #5fd38a;
		--lmi-bad: #ff7b8c;
	}
}
.lmi-on-root .lmi-on-themebtn .lmi-on-ico { width: 18px; height: 18px; }
.lmi-on-root[data-lmi-theme="dark"] .lmi-on-btn-danger:hover { background: #3a1820; }
.lmi-on-root[data-lmi-theme="dark"] .lmi-on-banner { background: #3a2a10; color: #ffd9a0; }
.lmi-on-root[data-lmi-theme="dark"] .lmi-on-table tr.is-current td { background: #3d2a14; }
.lmi-on-root[data-lmi-theme="dark"] .lmi-on-pill, .lmi-on-root[data-lmi-theme="dark"] .lmi-on-rolechip, .lmi-on-root[data-lmi-theme="dark"] .lmi-on-rolechip.is-editor { background: #16364a; color: #9ad8f0; }
.lmi-on-root[data-lmi-theme="dark"] .lmi-on-pill-alt, .lmi-on-root[data-lmi-theme="dark"] .lmi-on-rolechip.is-comanager { background: #3d2a14; color: #ffc98a; }
.lmi-on-root[data-lmi-theme="dark"] .lmi-on-rolechip.is-viewer { background: #263247; color: #b7c3d4; }
.lmi-on-root[data-lmi-theme="dark"] .lmi-on-wsitem.is-active { background: #1d2c47; border-color: #8cc8ff; }
.lmi-on-root[data-lmi-theme="dark"] .lmi-on-seg button.is-active, .lmi-on-root[data-lmi-theme="dark"] .lmi-on-ftab.is-active { border-color: #3a4a64; }
.lmi-on-root[data-lmi-theme="dark"] .lmi-on-overlay { background: rgba(0, 0, 0, .55); }
.lmi-on-root[data-lmi-theme="dark"] .lmi-on-rack { background: #eef1f6; }
.lmi-on-root[data-lmi-theme="dark"] .lmi-on-chart { filter: none; }
@media (prefers-color-scheme: dark) {
	.lmi-on-root[data-lmi-theme="auto"] .lmi-on-btn-danger:hover { background: #3a1820; }
	.lmi-on-root[data-lmi-theme="auto"] .lmi-on-banner { background: #3a2a10; color: #ffd9a0; }
	.lmi-on-root[data-lmi-theme="auto"] .lmi-on-table tr.is-current td { background: #3d2a14; }
	.lmi-on-root[data-lmi-theme="auto"] .lmi-on-pill, .lmi-on-root[data-lmi-theme="auto"] .lmi-on-rolechip, .lmi-on-root[data-lmi-theme="auto"] .lmi-on-rolechip.is-editor { background: #16364a; color: #9ad8f0; }
	.lmi-on-root[data-lmi-theme="auto"] .lmi-on-pill-alt, .lmi-on-root[data-lmi-theme="auto"] .lmi-on-rolechip.is-comanager { background: #3d2a14; color: #ffc98a; }
	.lmi-on-root[data-lmi-theme="auto"] .lmi-on-rolechip.is-viewer { background: #263247; color: #b7c3d4; }
	.lmi-on-root[data-lmi-theme="auto"] .lmi-on-wsitem.is-active { background: #1d2c47; border-color: #8cc8ff; }
	.lmi-on-root[data-lmi-theme="auto"] .lmi-on-seg button.is-active, .lmi-on-root[data-lmi-theme="auto"] .lmi-on-ftab.is-active { border-color: #3a4a64; }
	.lmi-on-root[data-lmi-theme="auto"] .lmi-on-overlay { background: rgba(0, 0, 0, .55); }
	.lmi-on-root[data-lmi-theme="auto"] .lmi-on-rack { background: #eef1f6; }
	.lmi-on-root[data-lmi-theme="auto"] .lmi-on-chart { filter: none; }
}

/* ---------- 2.1.0: layer switch ---------- */
.lmi-on-layerbtn[aria-expanded="true"] { background: var(--lmi-navy); color: #fff; border-color: var(--lmi-navy); }
.lmi-on-layerbox { position: absolute; top: calc(100% + 6px); right: 0; z-index: 6; width: min(340px, calc(100vw - 40px)); padding: 10px 12px; border-radius: 8px; background: var(--lmi-surface); border: 1px solid var(--lmi-line); box-shadow: 0 8px 24px rgba(4, 44, 113, .22); color: var(--lmi-ink); }
.lmi-on-layerbox[hidden] { display: none; }
.lmi-on-layerbox > strong { display: block; color: var(--lmi-strong); margin-bottom: 6px; }
.lmi-on-layerchips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.lmi-on-layerchip { border: 1px solid var(--lmi-line); background: var(--lmi-surface-3); color: var(--lmi-muted); border-radius: 999px; padding: 4px 12px; cursor: pointer; text-decoration: line-through; }
.lmi-on-layerchip.is-active { background: var(--lmi-navy); border-color: var(--lmi-navy); color: #fff; text-decoration: none; }
.lmi-on-layerchip:focus-visible { outline: 2px solid var(--lmi-cyan); outline-offset: 2px; }
.lmi-on-layermore { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; margin-bottom: 6px; }

/* ---------- 2.2.0 ---------- */
.lmi-on-termline { margin: 4px 0 0; font-size: 9pt; }
.lmi-on-root .lmi-on-multibar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 10px; margin-bottom: 8px; border: 1px solid var(--lmi-accent); border-radius: 6px; background: var(--lmi-warn-bg); color: var(--lmi-ink); }
.lmi-on-root .lmi-on-multibar strong { color: var(--lmi-strong); }

/* ---------------------------------------------------------------- 2.3.0 */
.lmi-on-root .lmi-on-topo { overflow: auto; max-height: 70vh; border: 1px solid rgba(42,159,196,.35); border-radius: 6px; background: #fff; padding: 8px; }
.lmi-on-root .lmi-on-topo svg { display: block; max-width: none; height: auto; }
.lmi-on-root .lmi-on-topo-node { cursor: pointer; }
.lmi-on-root .lmi-on-rackitem { cursor: grab; }
.lmi-on-root .lmi-on-rackitem.is-dragging { opacity: .55; cursor: grabbing; }
.lmi-on-root .lmi-on-rackitem:hover rect { filter: brightness(1.15); }
.lmi-on-root .lmi-on-guideopts { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.lmi-on-root .lmi-on-nfcc-note { color: #b2182b; font-weight: 700; margin: 0 0 6px; }
.lmi-on-root .lmi-on-gptable { width: 100%; }
.lmi-on-root .lmi-on-gptable input { width: 100%; max-width: 110px; }
.lmi-on-root .lmi-on-nfcc { background: #b2182b; color: #fff; font-weight: 700; padding: 4px 8px; border-radius: 4px; margin: 0 0 6px; }
.lmi-on-modal:has(.lmi-on-topo-large) { width: min(1200px, 100%); }
.lmi-on-modal .lmi-on-topo-large { max-height: 75vh; overflow: auto; }

/* ---------- 2.4.0: form fields keep their colours whatever the site theme does ----------
 * Some themes set `color-scheme: dark` or dark field backgrounds site-wide; in the light
 * theme that left fields and drop-down lists black with dark (invisible) text. */
.lmi-on-root { color-scheme: light; }
.lmi-on-root.lmi-on-root :is(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color], [type=button], [type=submit], [type=reset], [type=image], [type=hidden]), select, textarea) {
	background-color: var(--lmi-surface);
	color: var(--lmi-ink);
	-webkit-text-fill-color: var(--lmi-ink);
	border-color: var(--lmi-input-line);
}
.lmi-on-root.lmi-on-root :is(select option, select optgroup) { background-color: var(--lmi-surface); color: var(--lmi-ink); }
.lmi-on-root.lmi-on-root :is(input, textarea)::placeholder { color: var(--lmi-muted); -webkit-text-fill-color: var(--lmi-muted); opacity: 1; }
.lmi-on-root.lmi-on-root :is(input, select, textarea):disabled { opacity: .65; }

/* ---------------------------------------------------------------- 2.4.0 */
/* The stage grid is drawn on the canvas, aligned with the rulers. */
.lmi-on-stage.is-ruled { background-image: none; }
.lmi-on-toast-warn { background: #8a4b05; color: #fff; }
.lmi-on-root .lmi-on-guideopts .lmi-on-rulerunit { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }
.lmi-on-root .lmi-on-guideopts .lmi-on-rulerunit select { width: auto; flex: 1; }
.lmi-on-root .lmi-on-unitsel { width: auto; min-width: 54px; padding: 0 4px; height: 22px; font-size: 9pt; border-radius: 4px; }
/* Layer locks */
.lmi-on-locks { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.lmi-on-lockchip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 12px; border: 1px solid var(--lmi-input-line); background: var(--lmi-surface); color: var(--lmi-ink); font: inherit; font-size: 9pt; cursor: pointer; }
.lmi-on-lockchip.is-locked { background: #042C71; border-color: #042C71; color: #fff; }
.lmi-on-btn.has-locks, .has-locks { box-shadow: inset 0 -3px 0 #E26C15; }
/* Crop dialog */
.lmi-on-cropwrap { display: flex; justify-content: center; background: repeating-conic-gradient(#eef1f6 0% 25%, #fff 0% 50%) 50% / 16px 16px; border: 1px solid var(--lmi-line); border-radius: 6px; padding: 6px; }
.lmi-on-cropcanvas { max-width: 100%; height: auto; cursor: crosshair; touch-action: none; }
.lmi-on-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 8px; }
/* Wall legend */
.lmi-on-matlegend li { grid-template-columns: 44px 1fr auto; }
.lmi-on-matlegend li canvas { border-radius: 2px; display: block; }
.lmi-on-matlegend li span { display: flex; flex-direction: column; }
.lmi-on-matlegend li.is-active b { color: var(--lmi-main, #E26C15); }
.lmi-on-matlegend em { font-style: normal; font-size: 8.5pt; color: var(--lmi-muted); }
/* Ports table */
.lmi-on-portsbox { max-height: 360px; overflow: auto; }
.lmi-on-portsbox table { width: 100%; }
.lmi-on-portsbox td { padding: 2px 4px; vertical-align: middle; }
.lmi-on-portsbox input[type=text] { width: 100%; min-width: 64px; }
.lmi-on-portsbox select { width: 100%; min-width: 90px; }
.lmi-on-portsbox tr.is-used td:first-child { font-weight: 700; color: var(--lmi-strong, #042C71); }
.lmi-on-pill-stack { background: #7A3E9D; color: #fff; }
/* 2.5.0 — schedule (Gantt), racks of different sizes */
.lmi-on-root .lmi-on-gantt svg { display: block; max-width: none; height: auto; }
.lmi-on-root .lmi-on-wdays { display: flex; flex-wrap: wrap; gap: 2px 10px; }
.lmi-on-root .lmi-on-ok { background: #e7f6ec; color: #1f7a3a; border-radius: 6px; padding: 6px 8px; margin: 6px 0; }
.lmi-on-root .lmi-on-schedtable td { vertical-align: middle; }
.lmi-on-root .lmi-on-schedtable td small { display: block; }
.lmi-on-root .lmi-on-schedtable input[type=number] { width: 72px; min-width: 0; }
.lmi-on-root .lmi-on-schedtable tr.is-off td { opacity: .55; }
.lmi-on-root .lmi-on-phase { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; }
.lmi-on-root .lmi-on-addtask { display: grid; grid-template-columns: 2fr 80px 1.6fr auto; gap: 4px; margin: 6px 0; align-items: center; }
.lmi-on-root .lmi-on-racklist .lmi-on-rackrow { display: grid; grid-template-columns: 56px 1fr auto; gap: 6px; align-items: center; margin: 2px 0; }
.lmi-on-root .lmi-on-racklist .lmi-on-rackno { font-weight: 700; color: var(--lmi-strong, #042C71); }
.lmi-on-root .lmi-on-racklist > .lmi-on-btn { justify-self: start; margin-top: 4px; }

/* ======================================================= 2.6.0 workspace tools */
/* Collapse bar shared by the right pane, the floating view bar and the floor tabs. */
.lmi-on-collbar { display: flex; align-items: center; gap: 4px; flex: none; }
.lmi-on-collbar-title { font-size: 9pt; font-weight: 700; color: var(--lmi-strong); margin-right: auto; padding: 0 4px; }
.lmi-on-cb, .lmi-on-root .lmi-on-cb {
	display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0;
	border: 1px solid var(--lmi-line); border-radius: 6px; background: var(--lmi-surface);
	color: var(--lmi-strong); cursor: pointer; font-size: 10pt; line-height: 1;
}
.lmi-on-cb .lmi-on-ico { width: 15px; height: 15px; }
.lmi-on-cb:hover { border-color: var(--lmi-cyan); }
.lmi-on-cb.is-on, .lmi-on-cb[aria-pressed="true"] { background: var(--lmi-navy); border-color: var(--lmi-navy); color: #fff; }
.lmi-on-grip { cursor: grab; }
.lmi-on-grip:active { cursor: grabbing; }
.lmi-on-cb:focus-visible { outline: 3px solid var(--lmi-cyan); outline-offset: 2px; }

/* Right pane: collapsed = slim rail; auto = slides over the stage while the pointer is on it. */
.lmi-on-sidebar { position: relative; }
.lmi-on-sidebar > .lmi-on-collbar { padding: 4px 6px; border-bottom: 1px solid var(--lmi-line); background: var(--lmi-tabs); }
.lmi-on-body.is-side-collapsed { grid-template-columns: 48px 1fr 40px; }
.lmi-on-sidebar.is-collapsed { overflow: hidden; }
.lmi-on-sidebar.is-collapsed > :not(.lmi-on-collbar) { display: none; }
.lmi-on-sidebar.is-collapsed > .lmi-on-collbar { flex-direction: column; height: 100%; padding: 6px 4px; }
.lmi-on-sidebar.is-collapsed .lmi-on-collbar-title { display: none; }
.lmi-on-sidebar.is-collapsed.is-peek {
	position: absolute; right: 0; top: 0; bottom: 0; width: 360px; max-width: 90%; z-index: 30; overflow: auto;
	box-shadow: -6px 0 18px rgba(4, 44, 113, .28); background: var(--lmi-surface);
}
.lmi-on-sidebar.is-collapsed.is-peek > :not(.lmi-on-collbar) { display: revert; }
.lmi-on-sidebar.is-collapsed.is-peek > .lmi-on-collbar { flex-direction: row; height: auto; padding: 4px 6px; }
.lmi-on-sidebar.is-collapsed.is-peek .lmi-on-collbar-title { display: inline; }
.lmi-on-body { position: relative; }

/* Floating view bar: draggable, collapsible. */
.lmi-on-viewbar { flex-direction: column; align-items: stretch; flex-wrap: nowrap; z-index: 12; }
.lmi-on-viewbar.is-moved { right: auto; }
.lmi-on-vbody { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.lmi-on-viewbar.is-collapsed > .lmi-on-vbody { display: none; }
.lmi-on-viewbar.is-collapsed.is-peek > .lmi-on-vbody { display: flex; }
.lmi-on-layerextra { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* Floor tabs (lower left) + tool tips switch. */
.lmi-on-floorwrap {
	position: absolute; left: 10px; bottom: 10px; z-index: 11; display: flex; flex-direction: column; gap: 4px;
	max-width: calc(100% - 20px); padding: 4px; border-radius: 8px; background: var(--lmi-float);
	box-shadow: 0 2px 10px rgba(4, 44, 113, .18);
}
.lmi-on-floorwrap .lmi-on-floortabs { position: static; max-width: none; }
.lmi-on-floorwrap.is-collapsed > .lmi-on-floortabs { display: none; }
.lmi-on-floorwrap.is-collapsed.is-peek > .lmi-on-floortabs { display: flex; }
.lmi-on-stage.is-tips-off .lmi-on-hint { display: none; }
.lmi-on-stage .lmi-on-hint { bottom: 100px; left: 10px; }

/* Measure: live read-out and the Measurement Notes tab. */
.lmi-on-mlive { position: absolute; left: 50%; transform: translateX(-50%); bottom: 14px; z-index: 11; padding: 6px 12px; border-radius: 8px; background: rgba(4, 44, 113, .92); color: #fff; font-size: 10pt; pointer-events: none; }
.lmi-on-mtotal { font-weight: 700; color: var(--lmi-accent); }
.lmi-on-mdet { margin-top: 4px; font-size: 9pt; }
.lmi-on-mdet table { width: 100%; border-collapse: collapse; font-size: 9pt; }
.lmi-on-mdet th, .lmi-on-mdet td { padding: 3px 6px; border-bottom: 1px solid var(--lmi-row-line); text-align: left; }
.lmi-on-mrec { border: 1px solid var(--lmi-line); border-radius: 8px; padding: 8px; margin: 6px 0; background: var(--lmi-surface-2); }
.lmi-on-mrec-head { display: flex; gap: 6px; align-items: center; justify-content: space-between; }
.lmi-on-mrec-total { font-weight: 700; color: var(--lmi-strong); white-space: nowrap; }
.lmi-on-mrec-head input { flex: 1; min-width: 0; }
.lmi-on-muted { color: var(--lmi-muted); font-size: 9pt; }

/* Crop dialog (adjust / expand / lock). */
.lmi-on-crop, .lmi-on-cropwrap { max-width: 100%; }
.lmi-on-cropwrap { overflow: auto; border: 1px solid var(--lmi-line); border-radius: 6px; background: var(--lmi-surface-3); }
.lmi-on-cropcanvas { display: block; max-width: 100%; touch-action: none; }
.lmi-on-croplock { font-size: 11pt; }
.lmi-on-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.lmi-on-btn-sm { padding: 3px 8px; font-size: 9pt; }
.lmi-on-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.lmi-on-form { display: grid; gap: 8px; }
@media (max-width: 760px) {
	.lmi-on-body, .lmi-on-body.is-side-collapsed { grid-template-columns: 48px 1fr; }
	.lmi-on-sidebar.is-collapsed { display: none; }
}