/* ========== 滚动容器：每行5列，无横向条 ========== */
.checkbox-scroll {
  max-height: 90px;
  overflow-y: auto;       /* 保留纵向滚动 */
  overflow-x: hidden;     /* 隐藏横向滚动条，消除“左右的拉框” */
  width: 100%;
  box-sizing: border-box;
  padding: 8px 0;         /* 上下留白，左右贴边 */
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  scrollbar-width: thin;
  scrollbar-color: #888 transparent;

  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px 12px;
  align-items: center;
}

.checkbox-scroll::-webkit-scrollbar {
  width: 5px;
}

.checkbox-scroll::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}

/* 彻底移除外边距，并防止子元素撑出横向滚动条 */
.checkbox-scroll .layui-form-checkbox {
  margin: 0 !important;
  min-width: 0;           /* 允许网格项收缩 */
  overflow: hidden;       /* 文字太长时截断，避免溢出 */
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 字体12px，白色 */
.layui-form-checkbox span {
  color: #fff !important;
  font-size: 12px !important;
}

.layui-form-checked[lay-skin="primary"] i::after {
  color: #fff !important;
}

/* 全选与右侧垂直居中对齐 */
.checkall-row-wrapper {
  display: flex;
  align-items: center;
}

.checkall-left {
  flex-shrink: 0;
}

.checkbox-scroll-wrapper {
  flex: 1;
  min-width: 0;
}

.checkbox-scroll {
  grid-template-columns: repeat(5, 1fr);
}

/* 平板（≤768px）：改为3列 */
@media screen and (max-width: 768px) {
  .checkbox-scroll {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px 10px;          /* 适当缩小间距 */
    max-height: 160px;      /* 可略增高以便显示更多 */
  }
  .layui-form-checkbox span {
    font-size: 11px !important; /* 略缩小字体 */
  }
}

/* 手机（≤480px）：改为2列 */
@media screen and (max-width: 480px) {
  .checkbox-scroll {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px 8px;
    max-height: 200px;
  }
  .layui-form-checkbox span {
    font-size: 10px !important;
  }
  /* 全选与复选框的间距可收窄 */
  .checkall-row-wrapper {
    gap: 6px;
  }
}

.button-grid {
  display: grid;
  gap: 10px 12px;
  /* 默认（小屏）使用自动填充 */
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  overflow-x: auto;          /* 允许水平滚动，内容超出时显示滚动条 */
  padding-bottom: 5px;       /* 为滚动条留出空间 */
}

/* ===== 电脑屏幕（≥ 992px）恢复为 4 列 ===== */
@media (min-width: 992px) {
  .button-grid {
    grid-template-columns: repeat(4, 1fr);  /* 固定 4 列，与原有设计一致 */
    overflow-x: visible;   /* 不再需要滚动，因为列数固定且自动换行 */
  }
}

.button-grid .layui-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;   /* 左对齐 */
  gap: 3px 5px;                /* 内部元素间距缩小 */
  padding: 3px 8px;            /* 上下内边距缩减，左右缩减 */
  font-size: 14px;             /* 字体缩小 */
  line-height: 1.2;            /* 行高收紧 */
  white-space: nowrap;
  box-sizing: border-box;
  margin: 0;
  border-color: #eee;
  background: #fff;
  height: auto;                /* 避免固定高度限制 */
  min-height: unset;           /* 清除可能存在的 min-height */
  border-radius: 14px;         /* 圆角可以随缩小略微收小（可选） */
}