/* ===== UIOT 设计令牌（全站统一主色，main.html/业务页均引用）===== */
:root {
  --uiot-primary: #0d6efd;
  --uiot-primary-10: rgba(13, 110, 253, 0.10);
  --uiot-primary-20: rgba(13, 110, 253, 0.20);
  --uiot-primary-30: rgba(13, 110, 253, 0.30);
}

/* 重置默认字体大小 */
body {
  margin: 0;
  padding: 0;
  font-family: "Microsoft YaHei", "微软雅黑", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
}

/* 自定义字体大小 */
.custom-font-size {
  font-size: 12px; /* 你可以根据需要调整这个值 */
}



/* 表格最小宽度，确保列多时能撑开父容器产生水平滚动 */
.my-table {
  min-width: 100%;
}

.my-table th {
  text-align: center;
  white-space: nowrap;
}

.my-table .fixed-column {
  width: 100px;
  position: sticky;
  right: 0;
  background-color: #fff;
  z-index: 2;
  box-shadow: -2px 0 4px rgba(0,0,0,0.08);
}
/* striped 表格中奇数行的固定列背景色需与条纹一致 */
.my-table.table-striped tbody tr:nth-of-type(odd) td.fixed-column {
  background-color: #f8f9fa;
}
/* thead 中固定列也需要不透明背景 */
.my-table thead th.fixed-column {
  background-color: #f8f9fa;
}


/*表格内容不折行 */
.my-table td {
  text-align: center;
  white-space: nowrap;
}

/* 指定列允许折行，覆盖全局 nowrap */
.my-table td.wrap-text,
.my-table th.wrap-text {
  white-space: normal;
  word-break: break-word;
}

/* 定时任务列表“任务信息”列：允许折行并限定最大宽度，避免整表被撑宽导致横向滚动 */
.my-table td.job-info-cell,
.my-table th.job-info-cell {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
  max-width: 360px;
}
 
/*表格内容不折行  */
.my-table tr {
  text-align: center;
  white-space: nowrap;
}

th, td {
  text-align: center; /* 设置单元格文本居中对齐 */
  vertical-align: middle; /* 设置单元格垂直居中对齐 */
  padding: 4px; /* 设置单元格内边距 */
}

.custom-td {
    display: flex;
    flex-direction: row;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}



.mybutton {
  background-color: transparent;
  border: none;
  color: black; 
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 15px;
  margin: 4px 2px;
  cursor: pointer;
}



.button-container {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-around;
  vertical-align: middle;
  padding: 0;
  line-height: 1;
}
.button-container > .btn {
  margin: 0 2px;
  float: none;
  vertical-align: middle;
}


.function-button-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  padding: 2px;

}

.hidden {
  display: none !important;
}


/*图片居中显示*/
.centered-image {
  display: block;
  margin: auto;
}

.dropdown-item:hover {
  background-color: rgba(13, 110, 253, 0.12);
}

/* 确保父元素.dropdown的位置是relative */
.dropdown {
  position: relative;
}

/* 居中下拉菜单 */
.center-dropdown {
  left: 50% !important; /* 覆盖默认的left值 */
  transform: translateX(-50%); /* 根据自身宽度调整位置，使其居中 */
  top: 100% !important; /* 确保菜单出现在按钮下方 */
}

.modal-dialog.custom-large {  
  width: 85%; /* 或者你想要的任何宽度，如 600px */  
  max-width: none; /* 如果需要的话，取消最大宽度的限制 */  
}

.modal-dialog.custom-big {  
  width: 70%; /* 或者你想要的任何宽度，如 600px */  
  max-width: none; /* 如果需要的话，取消最大宽度的限制 */  
}


.modal-dialog.custom-middle {  
  width: 50%; /* 或者你想要的任何宽度，如 600px */  
  max-width: none; /* 如果需要的话，取消最大宽度的限制 */  
}

.custom-shadow {
  box-shadow: 5px 5px 10px rgba(0,0, 0, 0.5); /* 设置阴影的水平偏移、垂直偏移、模糊度和颜色 */
}

.custom-icon {
  color: #fec025;    /* 橙色 */
  font-size: 12px;   /* 图标大小 */
  margin: 10px;      /* 外边距 */
}

  /* 自定义边框样式 */
        .custom-border-box {
            border: 1px solid #c4c0c0;
            border-radius: 8px;
            padding: 10px 10px 10px 10px;
            position: relative;
            margin-top: 20px;
            background-color: #fff;
        }

        /* 上框线名称标签 */
        .border-label {
            position: absolute;
            top: -12px;
            left: 20px;
            background-color: #fff;
            padding: 0 12px;
            font-weight: 600;
            color: #2b2a2a;
            letter-spacing: 1px;
        }

        /* 可选：带阴影效果 */
        .custom-border-box.shadow-box {
            box-shadow: 0 2px 12px rgba(13, 110, 253, 0.15);
        }

        /* 可选：不同颜色主题 */
        .custom-border-box.success-box {
            border-color: #198754;
        }
        .custom-border-box.success-box .border-label {
            color: #198754;
        }

        .custom-border-box.warning-box {
            border-color: #ffc107;
        }
        .custom-border-box.warning-box .border-label {
            color: #ffc107;
        }

        .custom-border-box.danger-box {
            border-color: #dc3545;
        }
        .custom-border-box.danger-box .border-label {
            color: #dc3545;
        }