/* ===== 对话框样式 ===== */

/* 日志导出对话框 */
.log-export-dialog-content {
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dialog-export-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dialog-export-label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* 对话框内的 Element Plus 组件样式覆盖 */
/* 日期选择器整体 */
.log-export-dialog :deep(.el-date-editor) {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(24, 144, 255, 0.4) !important;
  box-shadow: none !important;
}

.log-export-dialog :deep(.el-date-editor:hover) {
  border-color: rgba(24, 144, 255, 0.6) !important;
}

.log-export-dialog :deep(.el-date-editor.is-active) {
  border-color: rgba(24, 144, 255, 0.8) !important;
  box-shadow: 0 0 8px rgba(24, 144, 255, 0.3) !important;
}

/* 输入框包装器 */
.log-export-dialog :deep(.el-input__wrapper) {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(24, 144, 255, 0.4) !important;
  box-shadow: none !important;
  transition: all 0.3s ease;
}

.log-export-dialog :deep(.el-input__wrapper:hover),
.log-export-dialog :deep(.el-input__wrapper.is-focus) {
  border-color: rgba(24, 144, 255, 0.8) !important;
  box-shadow: 0 0 8px rgba(24, 144, 255, 0.3) !important;
}

/* 输入框文本 */
.log-export-dialog :deep(.el-input__inner) {
  color: #fff !important;
  background-color: transparent !important;
}

.log-export-dialog :deep(.el-input__inner::placeholder) {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* 日期范围分隔符 */
.log-export-dialog :deep(.el-range-separator) {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* 日期范围输入框 */
.log-export-dialog :deep(.el-range-input) {
  background-color: transparent !important;
  color: #fff !important;
}

.log-export-dialog :deep(.el-range-input::placeholder) {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* 下拉选择器 */
.log-export-dialog :deep(.el-select__wrapper) {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(24, 144, 255, 0.4) !important;
  box-shadow: none !important;
}

.log-export-dialog :deep(.el-select__wrapper:hover),
.log-export-dialog :deep(.el-select__wrapper.is-focused) {
  border-color: rgba(24, 144, 255, 0.8) !important;
  box-shadow: 0 0 8px rgba(24, 144, 255, 0.3) !important;
}

.log-export-dialog :deep(.el-select__placeholder) {
  color: rgba(255, 255, 255, 0.5) !important;
}

.log-export-dialog :deep(.el-select__selected-item) {
  color: #fff !important;
}

/* 图标颜色 */
.log-export-dialog :deep(.el-icon) {
  color: rgba(255, 255, 255, 0.7) !important;
}

.log-export-dialog :deep(.el-input__prefix-inner .el-icon),
.log-export-dialog :deep(.el-input__suffix-inner .el-icon) {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* 日期选择器图标 */
.log-export-dialog :deep(.el-input__prefix),
.log-export-dialog :deep(.el-input__suffix) {
  color: rgba(255, 255, 255, 0.7) !important;
}

.log-export-dialog :deep(.el-date-editor .el-icon),
.log-export-dialog :deep(.el-select .el-icon) {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* 下拉箭头图标 */
.log-export-dialog :deep(.el-select__caret) {
  color: rgba(255, 255, 255, 0.7) !important;
}

.log-export-dialog :deep(.el-select__caret:hover) {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* 分组列表对话框的日期选择器样式 */
.group-list-dialog-content :deep(.el-date-editor) {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(24, 144, 255, 0.4) !important;
  box-shadow: none !important;
}

.group-list-dialog-content :deep(.el-date-editor:hover) {
  border-color: rgba(24, 144, 255, 0.6) !important;
}

.group-list-dialog-content :deep(.el-date-editor.is-active) {
  border-color: rgba(24, 144, 255, 0.8) !important;
  box-shadow: 0 0 8px rgba(24, 144, 255, 0.3) !important;
}

.group-list-dialog-content :deep(.el-input__wrapper) {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(24, 144, 255, 0.4) !important;
  box-shadow: none !important;
}

.group-list-dialog-content :deep(.el-input__inner),
.group-list-dialog-content :deep(.el-range-input) {
  color: #fff !important;
  background-color: transparent !important;
}

.group-list-dialog-content :deep(.el-range-separator) {
  color: rgba(255, 255, 255, 0.7) !important;
}

.group-list-dialog-content :deep(.el-icon) {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* 分组列表对话框的日期选择器样式 - 调整宽度 */
.group-list-dialog-content .el-date-editor {
  width: 250px !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  max-width: 250px !important;
}

/* 日志导出对话框的下拉选择器样式 */
.log-export-dialog-content :deep(.el-select) {
  background-color: transparent !important;
}

.log-export-dialog-content :deep(.el-select .el-input__wrapper) {
  background: linear-gradient(135deg, rgba(24, 144, 255, 0.08) 0%, rgba(24, 144, 255, 0.03) 100%) !important;
  border: 1px solid rgba(24, 144, 255, 0.4) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.log-export-dialog-content :deep(.el-select .el-input__wrapper:hover) {
  border-color: rgba(24, 144, 255, 0.6) !important;
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.2) !important;
}

.log-export-dialog-content :deep(.el-select.is-focus .el-input__wrapper),
.log-export-dialog-content :deep(.el-select .el-input__wrapper.is-focus) {
  border-color: rgba(24, 144, 255, 0.8) !important;
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.2) !important;
}

.log-export-dialog-content :deep(.el-select .el-input__inner) {
  color: #fff !important;
  background-color: transparent !important;
}

.log-export-dialog-content :deep(.el-select .el-input__inner::placeholder) {
  color: rgba(255, 255, 255, 0.5) !important;
}

.log-export-dialog-content :deep(.el-select .el-select__caret) {
  color: rgba(255, 255, 255, 0.7) !important;
}

.log-export-dialog-content :deep(.el-select .el-select__caret:hover) {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* 对话框按钮样式 */
.log-export-dialog :deep(.el-button),
.group-list-dialog-content :deep(.el-button) {
  border-radius: 4px;
}

.log-export-dialog :deep(.el-button--default) {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

.log-export-dialog :deep(.el-button--default:hover) {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.5);
}

.log-export-dialog :deep(.el-button--primary) {
  background: linear-gradient(135deg, #1890ff 0%, #0d5cb6 100%);
  border-color: rgba(24, 144, 255, 0.5);
}

.log-export-dialog :deep(.el-button--primary:hover) {
  background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
  border-color: rgba(24, 144, 255, 0.8);
}

/* 调试面板样式 */
.debug-panel {
  position: fixed;
  bottom: 60px;
  right: 20px;
  background-color: rgba(23, 47, 75, 0.95);
  border: 1px solid rgba(24, 144, 255, 0.4);
  border-radius: 8px;
  padding: 15px;
  max-width: 400px;
  max-height: 500px;
  overflow-y: auto;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.debug-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(24, 144, 255, 0.3);
}

.debug-header h3 {
  color: #fff;
  margin: 0;
  font-size: 16px;
}

.debug-controls {
  display: flex;
  gap: 10px;
}

.debug-btn {
  padding: 5px 10px;
  background-color: #1890ff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.3s ease;
}

.debug-btn:hover {
  background-color: #40a9ff;
}

.debug-section {
  margin-bottom: 15px;
}

.debug-section h4 {
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 10px 0;
  font-size: 14px;
}

.debug-section p {
  color: rgba(255, 255, 255, 0.7);
  margin: 5px 0;
  font-size: 12px;
}

.debug-logs {
  max-height: 200px;
  overflow-y: auto;
  background-color: rgba(0, 0, 0, 0.2);
  padding: 10px;
  border-radius: 4px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.8);
}

.debug-logs div {
  margin: 3px 0;
  padding: 3px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.debug-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10000;
}

.debug-toggle-btn {
  padding: 8px 16px;
  background: linear-gradient(135deg, #1890ff 0%, #0d5cb6 100%);
  color: #fff;
  border: 1px solid rgba(24, 144, 255, 0.5);
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
  transition: all 0.3s ease;
}

.debug-toggle-btn:hover {
  background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.5);
  transform: translateY(-2px);
}

