/* ============================================
   IoT Monitoring - Custom UI overrides
   说明：从各页面 cshtml 的 <style> / @section Styles 抽离集中维护
   ============================================ */

/* ====== Shared / Global ====== */
/* (后续可把 _Layout 的内联样式也搬到这里) */

/* ====== Global: Checkbox / Radio unified style (Breeze template) ======
   目标：让项目里所有 .form-check-input（无论 input 与 label 是“兄弟”还是“包裹”结构）
   都呈现与 Document/后端html/pages/forms/basic_elements.html 中 Checkbox Controls 一致的外观。
*/

/* 1) 兄弟结构：<div class="form-check"><input ... class="form-check-input"><label class="form-check-label">...</label></div> */
.form-check > .form-check-input {
  position: absolute;
  opacity: 0;
  z-index: 1;
  cursor: pointer;
}

.form-check > .form-check-input + .form-check-label {
  position: relative;
  cursor: pointer;
  margin-bottom: 0;
  padding-left: 1.75rem; /* 给自绘方块留空间 */
  line-height: 1.5;
  display: inline-flex;
  align-items: center;
}

.form-check > .form-check-input + .form-check-label::before,
.form-check > .form-check-input + .form-check-label::after {
  position: absolute;
  top: 0;
  left: 0;
}

.form-check > .form-check-input[type="checkbox"] + .form-check-label::before {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 2px;
  border: solid #7057d2;
  border-width: 2px;
  margin-top: 2px;
  transition: all 250ms;
}

.form-check > .form-check-input[type="checkbox"] + .form-check-label::after {
  transition: all 250ms;
  font-family: Material Design Icons;
  opacity: 0;
  transform: scale(0);
  content: '\F12C';
  font-size: .9375rem;
  font-weight: bold;
  margin-top: 2px;
  color: #ffffff;
}

.form-check > .form-check-input[type="checkbox"]:checked + .form-check-label::before {
  background: #7057d2;
  border-width: 0;
}

.form-check > .form-check-input[type="checkbox"]:checked + .form-check-label::after {
  width: 18px;
  opacity: 1;
  line-height: 18px;
  transform: scale(1);
}

.form-check > .form-check-input[type="checkbox"]:disabled + .form-check-label::before {
  border-color: #ebedf2;
}

.form-check > .form-check-input[type="checkbox"]:disabled:checked + .form-check-label::before {
  background: #ebedf2;
}

/* radio */
.form-check > .form-check-input[type="radio"] + .form-check-label::before {
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: solid #3f50f6;
  border-width: 2px;
  margin-top: 1px;
  transition: all 250ms;
}

.form-check > .form-check-input[type="radio"] + .form-check-label::after {
  content: "";
  width: 8px;
  height: 8px;
  background: #ffffff;
  border-radius: 50%;
  top: 6px;
  left: 6px;
  transition: all 250ms;
  opacity: 0;
  transform: scale(0);
}

.form-check > .form-check-input[type="radio"]:checked + .form-check-label::before {
  background: #3f50f6;
  border-width: 0;
}

.form-check > .form-check-input[type="radio"]:checked + .form-check-label::after {
  opacity: 1;
  transform: scale(1);
}

.form-check > .form-check-input[type="radio"]:disabled + .form-check-label::before {
  border-color: #ebedf2;
}

.form-check > .form-check-input[type="radio"]:disabled:checked + .form-check-label::before {
  background: #ebedf2;
}

/* ====== Setting/Indicators.cshtml ====== */
/* 监测指标列表表格列宽控制，让整体宽度更稳定 */
#indicatorTableContainer table th,
#indicatorTableContainer table td {
  vertical-align: middle;
  padding: 14px 5px 5px 10px;
}

/* 序号列固定窄宽度 */
#indicatorTableContainer table th:nth-child(1),
#indicatorTableContainer table td:nth-child(1) {
  width: 60px;
  white-space: nowrap;
}

/* 多数短文本列不换行，避免撑高行高 */
#indicatorTableContainer table th:nth-child(2),
#indicatorTableContainer table td:nth-child(2),
#indicatorTableContainer table th:nth-child(3),
#indicatorTableContainer table td:nth-child(3),
#indicatorTableContainer table th:nth-child(4),
#indicatorTableContainer table td:nth-child(4),
#indicatorTableContainer table th:nth-child(6),
#indicatorTableContainer table td:nth-child(6),
#indicatorTableContainer table th:nth-child(7),
#indicatorTableContainer table td:nth-child(7),
#indicatorTableContainer table th:nth-child(8),
#indicatorTableContainer table td:nth-child(8),
#indicatorTableContainer table th:nth-child(10),
#indicatorTableContainer table td:nth-child(10),
#indicatorTableContainer table th:nth-child(11),
#indicatorTableContainer table td:nth-child(11),
#indicatorTableContainer table th:nth-child(12),
#indicatorTableContainer table td:nth-child(12) {
  white-space: nowrap;
}

/* 监测内容列：固定最大宽度，超出用省略号 */
#indicatorTableContainer table th:nth-child(5),
#indicatorTableContainer table td:nth-child(5) {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* DataFormat 单元格：固定最大宽度，超出省略号 */
#indicatorTableContainer .indicator-dataformat-cell {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 适用监测物分类列：固定最大宽度，超出省略号 */
#indicatorTableContainer .indicator-allow-category-cell {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 编辑弹窗中“适用监测物分类”横向排列，并让 checkbox 与文字垂直居中 */
#indicatorAllowCategory {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
}
#indicatorAllowCategory .form-check {
  margin-bottom: 0;
  display: flex;
  align-items: center;
}
#indicatorAllowCategory .form-check-input {
  margin-top: 0;
  margin-right: 0;
}
#indicatorAllowCategory .form-check-label {
  padding-left: 1.75rem; /* 18px 方块 + 10px 间距（参考 Checkbox Controls） */
}
#indicatorAllowCategory .form-check-label {
  margin-bottom: 0;
  /* 与 Breeze 模板 Checkbox Controls 保持一致的文本行高与对齐 */
  line-height: 1.5;
  display: inline-block;
}

/* 操作列图标按钮尺寸统一为 26x26（主表） */
#indicatorTableContainer .btn-icon {
  width: 26px;
  height: 26px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  line-height: 1;
}
#indicatorTableContainer .btn-icon i {
  font-size: 16px;
  line-height: 1;
}

/* 数据源配置弹窗中的操作列图标按钮，同样统一为 26x26 */
#indicatorDataSourceModal .btn-icon {
  width: 26px;
  height: 26px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  line-height: 1;
}
#indicatorDataSourceModal .btn-icon i {
  font-size: 16px;
  line-height: 1;
}

/* 监测指标编辑弹窗：在默认基础上放大宽度，大约占视口宽度 50% */
#indicatorModal .modal-dialog {
  max-width: 50vw;
}

/* 指标数据源配置弹窗：适中宽度，避免过宽 */
#indicatorDataSourceModal .modal-dialog {
  max-width: 56vw; /* 约为之前 70vw 的 80% */
  width: 80%;
}
#indicatorDataSourceModal .modal-content {
  overflow-x: hidden;
}

/* 数据源详情模块边框与列表一致，稍加深并加浅底色，增强区块感 */
#indicatorDataSourceModal #dsDetailPanel {
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  background-color: #f8f9fa;
}

/* 数据源详情显示时的淡入动画 */
#indicatorDataSourceModal #dsDetailPanel.ds-detail-anim {
  animation: dsDetailFadeIn 1s ease;
}
@keyframes dsDetailFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 数据源配置列表行内边距，保持与主表一致，给操作列右侧留出空隙 */
#indicatorDataSourceModal table th,
#indicatorDataSourceModal table td {
  vertical-align: middle;
  padding: 8px 10px 8px 10px;
}

/* 数据源详情行表单高度对齐：select 与 input 一致 */
#indicatorDataSourceModal #dsDetailPanel .form-control-sm {
  height: 31px;
  padding: 0.25rem 0.5rem;
  line-height: 1.5;
  font-size: 0.875rem;
}

/* 下拉选项的行高与字号，尽量贴近 select 高度（受浏览器限制，精确度有限） */
#indicatorDataSourceModal #dsDetailPanel select.form-control-sm option {
  font-size: 0.875rem;
  line-height: 1.5;
  padding: 0.25rem 0.5rem;
}

/* 能力值定义表格行高度调整：减小 td 内边距 */
#indicatorModal #fieldTableBody td {
  padding: 0 0 0 25px;
}

/* ====== Device/Info.cshtml ====== */
/* 添加/编辑设备弹窗：横向稍大，避免出现横向滚动条 */
#dlgEditDevice .modal-dialog {
  max-width: 920px;
  width: 95%;
  overflow-x: hidden;
}
#dlgEditDevice .modal-content {
  overflow-x: hidden;
}
#dlgEditDevice .modal-body {
  overflow-x: hidden;
}

/* 设备列表表格行样式对齐监测指标页面 */
#tblDeviceBody tr > th,
#tblDeviceBody tr > td {
  vertical-align: middle;
  padding: 14px 5px 5px 10px;
}

/* 设备列表操作列按钮尺寸对齐监测指标页面（26x26, icon 16px） */
#tblDeviceBody .btn-icon {
  width: 26px;
  height: 26px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  line-height: 1;
}
#tblDeviceBody .btn-icon i {
  font-size: 16px;
  line-height: 1;
}