:root {
	--top-height: 63px;
	/* 右侧工具栏宽度:宽屏取定值,窄屏按视口收缩避免挤占日志区 */
	--tools-width: min(560px, 42vw);
}
html,
body {
	height: 100%;
}
body {
	font-size: 0.875rem;
}
#main {
	height: calc(100% - var(--top-height));
}

#log-main {
	display: flex;
	flex-direction: column;
	height: 100%;
}
/* 标题不参与收缩,避免被右侧工具栏挤压成竖排两行;放不下时让工具栏整体换行 */
#log-main h1 {
	flex-shrink: 0;
	white-space: nowrap;
}
/* 中栏变窄时日志工具栏换行,行间右对齐保持整齐的右缘 */
#log-main .btn-toolbar {
	justify-content: flex-end;
	row-gap: 0.25rem;
}
#serial-logs {
	overflow-y: scroll;
	white-space: pre-wrap;
	word-break: break-all;
}
#serial-logs.ansi {
	background-color: #000;
	color: #fff;
}
#serial-options,
#serial-tools {
	position: relative;
}
/* 三栏式布局:左右侧栏与中间日志区用细线分隔,避免同色背景粘连成一片 */
#serial-options {
	border-right: 1px solid var(--bs-border-color);
}
#serial-tools {
	border-left: 1px solid var(--bs-border-color);
}
.toggle-button {
	align-items: center;
	background: none;
	border: 0;
	display: flex;
	flex: none;
	font-size: 20px;
	height: 100%;
	justify-content: center;
	width: 20px;
	z-index: 1;
	background-color: #f8f9fa;
}
.toggle-button:hover {
	background: rgba(228, 231, 242, 0.4);
}

#serial-tools {
	height: 100%;
}
/* 工具栏面板宽度统一由变量控制(替代原内联428px) */
#serial-tools > .collapse {
	width: var(--tools-width);
}
/* 功能页签保持单行:放不下时横向滚动而不是折行 */
#nav-tab {
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: thin;
}
#nav-tab .nav-link {
	font-size: 0.8125rem;
	padding: 0.4rem 0.5rem;
	white-space: nowrap;
}
#nav-tabContent {
	overflow: hidden;
}
/* d-flex工具类的display:!important会压过Bootstrap的.tab-pane{display:none},导致失活面板不隐藏、与激活面板叠放 */
#nav-tabContent > .tab-pane:not(.active) {
	display: none !important;
}
#serial-tools .collapse.show,
#nav-quick-send.show {
	height: 100%;
	display: flex;
	flex-direction: column;
}
#nav-code,
#nav-modbus,
#nav-ydn23,
#nav-dlt645 {
	height: 100%;
}
.ydn-table td,
.ydn-table th {
	padding: 0.15rem 0.35rem;
	white-space: nowrap;
}
.ydn-hist-item {
	border-bottom: 1px solid var(--bs-border-color);
	cursor: pointer;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding: 1px 2px;
}
.ydn-hist-item:hover {
	background: rgba(228, 231, 242, 0.4);
}
.dlt-table td,
.dlt-table th {
	padding: 0.15rem 0.35rem;
	white-space: nowrap;
}
.dlt-hist-item {
	border-bottom: 1px solid var(--bs-border-color);
	cursor: pointer;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding: 1px 2px;
}
.dlt-hist-item:hover {
	background: rgba(228, 231, 242, 0.4);
}
.modbus-table td,
.modbus-table th {
	padding: 0.15rem 0.35rem;
	white-space: nowrap;
}
.modbus-table .modbus-writable {
	color: var(--bs-blue);
	cursor: pointer;
}
.modbus-table .modbus-writable:hover {
	text-decoration: underline;
}
.modbus-table .modbus-err td {
	color: var(--bs-danger);
}
#serial-code-editor .CodeMirror {
	height: 100%;
}
.CodeMirror-readonly {
	background-color: var(--bs-light-rgb);
	cursor: not-allowed;
}
/* d-flex行内按钮文字与勾选标签不换行,避免被挤压成竖排 */
#serial-tools .d-flex .btn,
#serial-tools .form-check-label,
#serial-send {
	white-space: nowrap;
}
#serial-tools .d-flex > .btn,
#serial-send {
	flex-shrink: 0;
}
/* d-flex行内的输入组按内容收缩,数字输入框不再被撑宽留出大片空白 */
#serial-tools .d-flex > .input-group {
	width: fit-content;
}
/* 字典类下拉按最长选项自适应宽度,不占满整行留白 */
#dlt-ctrl,
#dlt-di,
#ydn-cid2 {
	min-width: 160px;
	max-width: 100%;
	width: fit-content;
}
/* 短选项下拉同样按内容自适应宽度 */
/* 顺带修复:裸select在d-flex行内flex-basis按width:100%解析为整行宽度,会挤扁同行其他控件(如电总版本/地址输入组) */
#ydn-cid1,
#ydn-profile,
#ydn-generic-mode,
#ydn-scale,
#dlt-version,
#dlt-fe {
	max-width: 100%;
	width: fit-content;
}
/* Modbus轮询行:下拉按最长选项自适应并收紧右侧箭头留白,窄面板放不下时整行换行 */
.modbus-group,
.modbus-group-head {
	flex-wrap: wrap;
	row-gap: 2px;
}
.modbus-group .form-select {
	width: fit-content;
	padding-right: 1.35rem;
	background-position: right 0.3rem center;
}
/* 电总/DLT645面板窄窗口时行内控件放不下整体换行,避免溢出被裁切 */
#nav-ydn23 .d-flex,
#nav-dlt645 .d-flex {
	flex-wrap: wrap;
}
/* 快捷发送:按钮组不参与收缩(被压缩后即使换行也不恢复宽度,按钮会溢出被裁) */
#serial-tools .btn-toolbar .btn-group {
	flex-shrink: 0;
}
/* 条目行放不下时整体换行兜底 */
.quick-item {
	flex-wrap: wrap;
	row-gap: 2px;
}
/* 快捷发送条目行:输入框可收缩,名称按钮过长时省略号截断(完整名称见悬停提示),窄面板保持单行 */
.quick-item .form-control {
	min-width: 0;
}
.quick-item .quick-send {
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	flex-shrink: 1 !important;
}
/* 中栏日志类型下拉按内容自适应 */
#serial-log-type {
	max-width: 100%;
	width: fit-content;
}
/* 字典/时间类参数行按内容收缩,不整行铺满留白;长内容手输行(INFO/密码/数据)保持整行方便输入 */
#ydn-param-remote,
#ydn-param-time,
#ydn-param-set .input-group,
#dlt-param-time,
#dlt-param-newaddr,
#dlt-param-baud {
	width: fit-content;
}