/* =========================
   reset_base.css (优化后)
========================= */

/* 1. Reset & Global */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  height: 100%;
  /*
    保留 overflow:hidden => 整个页面无全局滚动条
    (由三列 .sidebar / .center-panel / .right-panel 内部自行滚动)
  */
  overflow: hidden;
}
body {
  font-family: "Helvetica", "Arial", sans-serif;
  background-color: #f9f9f9;
  color: #333;
}

/* d-flex 与 align-items-center */
.d-flex {
  display: flex;
}
.align-items-center {
  align-items: center;
}

/* 主题变量 */
:root {
  --primary-color: #2b6cf6;
  --secondary-color: #4fa3f7;

  --info-color: #3178c6;
  --warning-color: #ffa500;
  --error-color: #dc3545;
  --success-color: #28a745;
}

/* =========================
   氣泡 / 弹窗 / Toast 样式
========================= */

/* 1) Toast => 默认显示在中上方 => 由JS set top=80px; left=50% */
.toast-msg {
  position: fixed;
  /* 默认大小 => JS中再修正 transform */
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 14px;
  color: #fff;

  opacity: 0;
  display: none;
  z-index: 99999;
  transition: opacity 0.3s ease;
}
/* .show => 使之可见 */
.toast-msg.show {
  display: block;
  opacity: 1;
}
/* “×”按钮 */
.toast-close {
  cursor: pointer;
  float: right;
  margin-left: 8px;
}
.toast-close i {
  font-size: 16px;
}

/* 2) bubble-confirm-overlay (蒙层) */
.bubble-confirm-overlay {
  position: fixed;
  top: 0; left: 0; bottom: 0; right: 0;
  background: rgba(0,0,0,0.2);
  z-index: 9999;
}

/* 3) bubble-confirm => 在JS中自动设置 position、top、left => 中上方 or anchorEl下 */
.bubble-confirm {
  background: #fff;
  color: #333;
  padding: 14px;
  border-radius: 8px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.2);
  font-size: 14px;
  z-index: 10000;
  display: none;
  animation: fadeInScale 0.2s ease forwards; /* 进入动画 */
}
@keyframes fadeInScale {
  0% {
    transform: scale(0.9);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
/* 氣泡confirm 内部结构 */
.bubble-confirm-message {
  margin-bottom: 12px;
  line-height: 1.5;
  min-width: 140px; /* 避免太窄 */
}
.bubble-confirm-buttons {
  text-align: right;
}
.bubble-confirm-btn {
  margin-left: 8px;
  background: var(--secondary-color);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  display: inline-flex;
  align-items: center;
}
.bubble-confirm-btn:hover {
  background-color: #3e8bee;
}
.bubble-confirm-btn.cancel {
  background: #aaa; /* 取消按钮灰色 */
}

/* 4) bubble-tip => JS中自动定位 => 中上方 or anchorEl下 */
.bubble-tip {
  position: fixed;
  background: rgba(0, 0, 0, 0.80);
  color: #fff;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.4;
  z-index: 9999;

  display: none;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.bubble-tip.show {
  display: block;
  opacity: 1;
  animation: fadeInBubble 0.3s ease forwards; /* 进入动画 */
}
@keyframes fadeInBubble {
  from { transform: scale(0.8); opacity:0; }
  to   { transform: scale(1);   opacity:1; }
}