/* ============================================================
   控制台系统 - 公共样式
   设计基调：纯白主色 + 灰色辅色 + 天空蓝点缀，磨砂玻璃质感，小圆角矩形
   ============================================================ */

:root {
  --color-bg: #f4f6f9;
  --color-surface: #ffffff;
  --color-surface-glass: rgba(255, 255, 255, 0.72);
  --color-border: #e5e8ee;
  --color-text-primary: #1f2430;
  --color-text-secondary: #6b7280;
  --color-text-muted: #9ca3af;
  --color-accent: #4f9dde;
  --color-accent-soft: #eaf3fc;
  --color-accent-dark: #3a7fbf;
  --color-success: #34a879;
  --color-warning: #e0a233;
  --color-danger: #e0605f;
  --radius-card: 14px;
  --radius-sm: 10px;
  --shadow-soft: 0 1px 2px rgba(20, 24, 33, 0.03), 0 2px 8px rgba(20, 24, 33, 0.03);
  --shadow-card-hover: 0 2px 4px rgba(20, 24, 33, 0.04), 0 6px 20px rgba(20, 24, 33, 0.05);
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

html {
  background: var(--color-bg);
}

body {
  min-height: 100%;
  background:
    radial-gradient(circle at 8% 8%, rgba(79, 157, 222, 0.06), transparent 45%),
    radial-gradient(circle at 92% 92%, rgba(79, 157, 222, 0.05), transparent 40%),
    var(--color-bg);
  background-attachment: fixed;
  color: var(--color-text-primary);
  font-family: "Inter", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* 磨砂玻璃基础组件 */
.glass-panel {
  background: var(--color-surface-glass);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(229, 232, 238, 0.8);
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
}

/* 内容区大卡片容器：page级外壳，四周留白已由外层padding实现。
   不带阴影，作为纯粹的浅色背景板，避免与内部小卡片的阴影相互叠加显得杂乱 */
.content-shell {
  background: #fafbfc;
  border: 1px solid var(--color-border);
  border-radius: 18px;
}

/* 扁平分区：用于大卡片容器内部的次级区块（筛选栏、表格外壳、表单分组等）。
   无阴影、纯白背景 + 细边框，与 content-shell 的浅灰底形成层次，同时避免阴影嵌套 */
.flat-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}

/* 滚动条美化 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-thumb {
  background: #d5dae2;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #b9c1cd;
}
::-webkit-scrollbar-track {
  background: transparent;
}

/* 导航项 */
.nav-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-size: 0.925rem;
  font-weight: 500;
  transition: background-color 0.15s ease, color 0.15s ease;
  cursor: pointer;
  user-select: none;
}
.nav-item:hover {
  background: rgba(79, 157, 222, 0.08);
  color: var(--color-text-primary);
}
.nav-item.active {
  background: var(--color-accent-soft);
  color: var(--color-accent-dark);
}
.nav-item .nav-icon {
  width: 1.15rem;
  font-size: 1rem;
  text-align: center;
  flex-shrink: 0;
}

/* 二级菜单分组：默认收起，展开时子菜单可见并旋转箭头 */
.nav-group-children {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
  padding-left: 0.5rem;
}
.nav-group.expanded .nav-group-children {
  max-height: 480px;
}
.nav-group.expanded .nav-group-arrow {
  transform: rotate(180deg);
}
.nav-group-arrow {
  transition: transform 0.2s ease;
}
.nav-item-sub {
  padding-left: 1.5rem;
  font-size: 0.875rem;
}
.nav-item-sub .nav-icon {
  font-size: 0.85rem;
  width: 1rem;
}

/* 页面切换过渡动画 */
.page-fade-enter {
  animation: pageFadeIn 0.28s ease both;
}
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 加载转圈动画 */
.spin-loader {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(79, 157, 222, 0.18);
  border-top-color: var(--color-accent);
  animation: spinLoader 0.75s linear infinite;
}
@keyframes spinLoader {
  to { transform: rotate(360deg); }
}

/* 模态框动画 */
.modal-backdrop {
  animation: modalBackdropIn 0.2s ease both;
}
@keyframes modalBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.modal-panel {
  animation: modalPanelIn 0.25s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}
@keyframes modalPanelIn {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-backdrop.closing {
  animation: modalBackdropOut 0.18s ease both;
}
@keyframes modalBackdropOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
.modal-panel.closing {
  animation: modalPanelOut 0.18s ease both;
}
@keyframes modalPanelOut {
  from { opacity: 1; transform: scale(1) translateY(0); }
  to { opacity: 0; transform: scale(0.96) translateY(8px); }
}

/* 抽屉侧边栏（移动端） */
.drawer-backdrop {
  animation: modalBackdropIn 0.2s ease both;
}
.drawer-panel {
  animation: drawerSlideIn 0.26s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}
@keyframes drawerSlideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
.drawer-panel.closing {
  animation: drawerSlideOut 0.2s ease both;
}
@keyframes drawerSlideOut {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

/* Toast 提示 */
.toast-item {
  animation: toastIn 0.25s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(-10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.toast-item.closing {
  animation: toastOut 0.18s ease both;
}
@keyframes toastOut {
  from { opacity: 1; }
  to { opacity: 0; transform: translateY(-6px); }
}

/* 数据中心：主IP hover展开多IP下拉
   下拉列表使用绝对定位，完全脱离卡片文档流，避免展开时把下一张服务器卡片向下顶动。
   下拉自身的 padding-top 负责鼠标从主IP行移动到列表时的过渡区域。 */
.ip-hover-wrap {
  position: relative;
}
.ip-hover-dropdown {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top center;
  transition: opacity 0.28s cubic-bezier(0.2, 0.8, 0.3, 1),
              transform 0.28s cubic-bezier(0.2, 0.8, 0.3, 1),
              visibility 0s linear 0.28s;
  pointer-events: none;
}
.ip-hover-wrap:hover .ip-hover-dropdown,
.ip-hover-dropdown:hover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition: opacity 0.22s cubic-bezier(0.2, 0.8, 0.3, 1),
              transform 0.22s cubic-bezier(0.2, 0.8, 0.3, 1),
              visibility 0s linear 0s;
  pointer-events: auto;
}
.ip-hover-dropdown .card {
  box-shadow: 0 8px 24px rgba(20, 24, 33, 0.10);
}

/* 表格行 hover */
.table-row-hover:hover {
  background-color: #fafbfd;
}

/* 状态徽标 */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
}
.badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.badge-success { background: #eaf7f1; color: var(--color-success); }
.badge-success .badge-dot { background: var(--color-success); }
.badge-warning { background: #fdf4e6; color: var(--color-warning); }
.badge-warning .badge-dot { background: var(--color-warning); }
.badge-danger { background: #fbebeb; color: var(--color-danger); }
.badge-danger .badge-dot { background: var(--color-danger); }
.badge-neutral { background: #f1f2f5; color: var(--color-text-secondary); }
.badge-neutral .badge-dot { background: var(--color-text-muted); }
.badge-accent { background: var(--color-accent-soft); color: var(--color-accent-dark); }
.badge-accent .badge-dot { background: var(--color-accent); }

/* 输入框统一样式 */
.form-input {
  width: 100%;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(79, 157, 222, 0.14);
}

/* 主按钮 */
.btn-primary {
  background: var(--color-accent);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 0.55rem 1.1rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background-color 0.15s ease, transform 0.1s ease;
}
.btn-primary:hover {
  background: var(--color-accent-dark);
}
.btn-primary:active {
  transform: scale(0.98);
}
.btn-secondary {
  background: #fff;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.55rem 1.1rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background-color 0.15s ease;
}
.btn-secondary:hover {
  background: #f7f8fa;
  color: var(--color-text-primary);
}
.btn-danger-ghost {
  background: transparent;
  color: var(--color-danger);
  border-radius: var(--radius-sm);
  padding: 0.55rem 1.1rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background-color 0.15s ease;
}
.btn-danger-ghost:hover {
  background: #fbebeb;
}

/* 开关组件 */
.switch-track {
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: #d8dce3;
  position: relative;
  transition: background-color 0.2s ease;
  cursor: pointer;
  flex-shrink: 0;
}
.switch-track.on {
  background: var(--color-accent);
}
.switch-thumb {
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.switch-track.on .switch-thumb {
  transform: translateX(16px);
}