/* ==========================================================
 * Sun-Panel macOS 质感毛玻璃与高阶动效主题
 * ========================================================== */

/* 1. 全局背景与平滑滚动 */
html, body {
  scroll-behavior: smooth;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* 2. 顶部搜索框：通透磨砂玻璃质感 */
.search-box, .search-box-input, input.search-input {
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  background-color: rgba(25, 25, 25, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.search-box:hover, .search-box:focus-within {
  border-color: rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.45), 0 0 12px rgba(255, 255, 255, 0.1) !important;
  transform: translateY(-1px);
}

/* 3. 系统状态监控栏组件美化 */
.system-monitor {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-radius: 16px !important;
  padding: 10px 0 !important;
}

.system-monitor .generic-monitor-card,
.system-monitor [class*="icon-info-box"] > div,
.system-monitor [class*="icon-small-box"] > div {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  background-color: rgba(30, 30, 30, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 14px !important;
  transition: all 0.25s ease !important;
}

.system-monitor [class*="icon-info-box"] > div:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
}

/* 4. 项目卡片：磨砂玻璃、通透边框与上浮微动效 */
.sun-icon-item,
[class*="item-card-name-"] > div,
.icon-info-box > div,
.icon-small-box > div {
  backdrop-filter: blur(14px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
  background-color: rgba(32, 32, 32, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.2) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 鼠标悬浮微交互：卡片上浮 + 发光渐变阴影 */
.sun-icon-item:hover,
[class*="item-card-name-"] > div:hover,
.icon-info-box > div:hover,
.icon-small-box > div:hover {
  transform: translateY(-4px) scale(1.01) !important;
  background-color: rgba(45, 45, 45, 0.6) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.38), 0 0 10px rgba(255, 255, 255, 0.06) !important;
}

/* 5. 分组标题与图标微调 */
.group-title {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6) !important;
  letter-spacing: 0.5px !important;
}

/* 6. Docker 状态指示徽章呼吸灯动效 */
[class*="badge-running"],
.bg-\[\#18A058\] {
  box-shadow: 0 0 8px #18a058 !important;
  animation: pulse-green 2.5s infinite ease-in-out !important;
}

@keyframes pulse-green {
  0%, 100% {
    box-shadow: 0 0 6px rgba(24, 160, 88, 0.6);
  }
  50% {
    box-shadow: 0 0 14px rgba(24, 160, 88, 0.95);
  }
}

/* 7. 右下角快捷悬浮按钮（设置、环境切换等）美化 */
.float-btn {
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  background-color: rgba(30, 30, 30, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.2s ease !important;
}

.float-btn:hover {
  transform: scale(1.08) !important;
  background-color: rgba(50, 50, 50, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

/* 8. 滚动条美化 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.35);
}
::-webkit-scrollbar-track {
  background: transparent;
}