/*
 * DStatus · shadcn/ui Theme (Neutral)
 * 严格参照 shadcn/ui 源码: https://ui.shadcn.com/docs/theming
 *
 * 色系: Neutral (纯灰, chroma=0, 无蓝调)
 * 基础圆角: --radius = 0.625rem (10px)
 *   Card:    rounded-xl  = 0.75rem (12px)
 *   Button:  rounded-md  = calc(0.625rem - 2px) ≈ 0.5rem (8px)
 *   Input:   rounded-md  = 0.5rem (8px)
 *   Badge:   rounded-full = 9999px
 *   Popover: rounded-xl  = 0.75rem (12px)
 *
 * 阴影层级 (Tailwind v4):
 *   shadow-xs: 0 1px 2px 0 rgba(0,0,0,0.05)
 *   shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1)
 *
 * 覆盖范围: 前台 + 后台全覆盖
 * 注入方式: nginx sub_filter
 *
 * oklch → hex 映射 (Neutral, chroma=0):
 *   oklch(1     0 0)  = #ffffff
 *   oklch(0.985 0 0)  = #fafafa  (neutral-50)
 *   oklch(0.970 0 0)  = #f5f5f5  (neutral-100)
 *   oklch(0.922 0 0)  = #e5e5e5  (neutral-200)
 *   oklch(0.870 0 0)  = #d4d4d4  (neutral-300)
 *   oklch(0.708 0 0)  = #a3a3a3  (neutral-400)
 *   oklch(0.556 0 0)  = #737373  (neutral-500)
 *   oklch(0.439 0 0)  = #525252  (neutral-600)
 *   oklch(0.371 0 0)  = #404040  (neutral-700)
 *   oklch(0.269 0 0)  = #262626  (neutral-800)
 *   oklch(0.205 0 0)  = #171717  (neutral-900)
 *   oklch(0.145 0 0)  = #0a0a0a  (neutral-950)
 * ============================================================================= */

/* ========================================================================
   1) 日间模式 · Light
   shadcn 源码:
     --background:         oklch(1 0 0)       = #ffffff
     --foreground:          oklch(0.145 0 0)   = #0a0a0a
     --card:               oklch(1 0 0)       = #ffffff
     --card-foreground:     oklch(0.145 0 0)   = #0a0a0a
     --primary:            oklch(0.205 0 0)   = #171717
     --primary-foreground:  oklch(0.985 0 0)   = #fafafa
     --secondary:          oklch(0.97 0 0)    = #f5f5f5
     --muted:              oklch(0.97 0 0)    = #f5f5f5
     --muted-foreground:    oklch(0.556 0 0)   = #737373
     --accent:             oklch(0.97 0 0)    = #f5f5f5
     --border:             oklch(0.922 0 0)   = #e5e5e5
     --input:              oklch(0.922 0 0)   = #e5e5e5
     --ring:               oklch(0.708 0 0)   = #a3a3a3
     --sidebar:            oklch(0.985 0 0)   = #fafafa
   ======================================================================== */
:root:not(.dark) {
  /* --background: #ffffff */
  --light-bg-color: #ffffff;
  --light-bg-color-rgb: 255, 255, 255;

  /* --card: #ffffff */
  --light-card-bg-color: #ffffff;
  --light-card-bg-color-rgb: 255, 255, 255;
  --light-card-opacity: 1;

  /* --foreground: #0a0a0a */
  --light-text-color: #0a0a0a;
  /* --muted-foreground: #737373 */
  --light-secondary-text-color: #737373;

  /* --border: #e5e5e5 */
  --light-border-color: #e5e5e5;
  --light-border-color-rgb: 229, 229, 229;
  --light-border-hover-color: #d4d4d4;

  /* --accent / --secondary: #f5f5f5 */
  --light-hover-bg-color: #f5f5f5;
  --light-highlight-color: #f5f5f5;

  /* --muted: #f5f5f5 */
  --light-progress-bg-color: #f5f5f5;

  /* 进度条: 从 neutral 色阶中取有层次的灰度 */
  --light-progress-cpu-color: #171717;
  --light-progress-memory-color: #525252;
  --light-progress-swap-color: #737373;
  --light-progress-disk-color: #a3a3a3;
  --light-progress-network-color: #404040;

  /* --primary: #171717 (neutral-900) */
  --accent-base-color: #171717;
  --accent-runtime-color: #171717;
  --accent-ssr-color: #171717;
  --accent-color-rgb: 23, 23, 23;

  /* 语义色: shadcn destructive = oklch(0.577 0.245 27.325) ≈ #dc2626 */
  --success-color: #16a34a;
  --warning-color: #ca8a04;
  --error-color: #dc2626;
  --info-color: #2563eb;

  /* shadow-sm: Card 默认阴影 */
  --card-shadow-base-light: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  /* shadow-md: hover 阴影 */
  --card-shadow-hover-light: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);

  /* 节点状态色 */
  --status-online-color: #16a34a;
  --status-offline-color: #dc2626;
  --status-warning-color: #ca8a04;

  /* --ring: #a3a3a3 (用于 focus ring) */
  --shadcn-ring: #a3a3a3;
}

/* ========================================================================
   2) 夜间模式 · Dark
   shadcn 源码:
     --background:         oklch(0.145 0 0)       = #0a0a0a
     --foreground:          oklch(0.985 0 0)       = #fafafa
     --card:               oklch(0.205 0 0)       = #171717
     --card-foreground:     oklch(0.985 0 0)       = #fafafa
     --primary:            oklch(0.922 0 0)       = #e5e5e5
     --primary-foreground:  oklch(0.205 0 0)       = #171717
     --secondary:          oklch(0.269 0 0)       = #262626
     --muted:              oklch(0.269 0 0)       = #262626
     --muted-foreground:    oklch(0.708 0 0)       = #a3a3a3
     --accent:             oklch(0.371 0 0)       = #404040
     --border:             oklch(1 0 0 / 10%)     = rgba(255,255,255,0.1)
     --input:              oklch(1 0 0 / 15%)     = rgba(255,255,255,0.15)
     --ring:               oklch(0.556 0 0)       = #737373
     --sidebar:            oklch(0.205 0 0)       = #171717
   ======================================================================== */
:root.dark {
  /* --background: #0a0a0a (neutral-950) */
  --dark-bg-color: #0a0a0a;
  --dark-bg-color-rgb: 10, 10, 10;
  --dark-bg-opacity: 1;

  /* --card: #171717 (neutral-900) */
  --dark-card-bg-color: #171717;
  --dark-card-bg-color-rgb: 23, 23, 23;
  --dark-card-opacity: 1;

  /* --foreground: #fafafa */
  --dark-text-color: #fafafa;
  /* --muted-foreground: #a3a3a3 */
  --dark-secondary-text-color: #a3a3a3;

  /* --border: rgba(255,255,255,0.1) */
  --dark-border-color: rgba(255, 255, 255, 0.1);
  --dark-border-color-rgb: 255, 255, 255;
  /* --input hover */
  --dark-border-hover-color: rgba(255, 255, 255, 0.2);

  /* --accent: #404040, --secondary: #262626 */
  --dark-hover-bg-color: #262626;
  --dark-highlight-color: #262626;

  /* --muted: #262626 */
  --dark-progress-bg-color: #262626;

  /* 进度条: 亮色灰度 */
  --dark-progress-cpu-color: #fafafa;
  --dark-progress-memory-color: #a3a3a3;
  --dark-progress-swap-color: #737373;
  --dark-progress-disk-color: #d4d4d4;
  --dark-progress-network-color: #e5e5e5;

  /*
   * --primary 在 shadcn 中用于按钮背景 (#e5e5e5), 但 DStatus 的
   * --accent-color 同时用于 hover 文字 / focus ring / active 边框等,
   * 若设为 #e5e5e5 会与 text #fafafa 几乎不可区分.
   * 折中: 使用 neutral-300 (#d4d4d4), 兼顾可辨识度与中性美感.
   */
  --accent-base-color: #a3a3a3;
  --accent-runtime-color: #a3a3a3;
  --accent-ssr-color: #a3a3a3;
  --accent-color-rgb: 163, 163, 163;

  /* 语义色: shadcn dark destructive = oklch(0.704 0.191 22.216) ≈ #f87171 */
  --success-color: #4ade80;
  --warning-color: #facc15;
  --error-color: #f87171;
  --info-color: #60a5fa;

  /* 阴影: 暗色模式更深 */
  --card-shadow-base-dark: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
  --card-shadow-hover-dark: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4);

  /* --ring: #737373 */
  --shadcn-ring: #737373;
}

/* ========================================================================
   3) 页面背景: 纯色, 无渐变 (shadcn 无背景渐变)
   ======================================================================== */
body.bg-theme-body {
  background-image: none !important;
  background-color: var(--bg-color) !important;
}

:root.dark body.bg-theme-body {
  background-image: none !important;
}

/* ========================================================================
   4) 字体: shadcn 使用 Geist Sans + 系统回退, 开启抗锯齿
   ======================================================================== */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ========================================================================
   5) 卡片 · Card
   shadcn 源码: "rounded-xl border bg-card shadow-sm"
   rounded-xl = 0.75rem (12px), border = 1px solid var(--border), shadow-sm
   ======================================================================== */

/* 服务器卡片: 清除异形 clip-path */
[data-home-shell="1"] .server-card,
.server-card {
  clip-path: none !important;
  border-radius: 0.75rem !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1) !important;
}

:root.dark [data-home-shell="1"] .server-card,
:root.dark .server-card {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4) !important;
}

[data-home-shell="1"] .server-card:hover,
.server-card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1) !important;
}

:root.dark [data-home-shell="1"] .server-card:hover,
:root.dark .server-card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4) !important;
}

/* Dashboard 总览卡 */
.dashboard-card,
.region-container.dashboard-card {
  border-radius: 0.75rem !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1) !important;
  background: var(--card-bg-color) !important;
}

:root.dark .dashboard-card,
:root.dark .region-container.dashboard-card {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4) !important;
}

/* 通用卡片 */
.glass-card,
.surface-card,
.card,
.admin-card {
  border-radius: 0.75rem !important;
}

/* ========================================================================
   6) 按钮 · Button
   shadcn 源码:
     base:    "rounded-md text-sm font-medium"
     default: "bg-primary text-primary-foreground hover:bg-primary/90"
     outline: "border bg-background shadow-xs hover:bg-accent"
     ghost:   "hover:bg-accent hover:text-accent-foreground"
   rounded-md = calc(0.625rem - 2px) = 0.5rem (8px)
   h-9 = 36px, shadow-xs = 0 1px 2px 0 rgba(0,0,0,0.05)
   ======================================================================== */

/* 渐变按钮 → shadcn primary (纯色, 无渐变) */
button.bg-gradient-to-r,
a.bg-gradient-to-r,
[class*="gradient-primary"] {
  background: var(--accent-color) !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0.5rem !important;
  font-weight: 500;
  font-size: 0.875rem;
  transition: opacity 0.15s ease;
}

:root:not(.dark) button.bg-gradient-to-r,
:root:not(.dark) a.bg-gradient-to-r,
:root:not(.dark) [class*="gradient-primary"] {
  /* light: primary=#171717, primary-foreground=#fafafa */
  color: #fafafa !important;
}

:root.dark button.bg-gradient-to-r,
:root.dark a.bg-gradient-to-r,
:root.dark [class*="gradient-primary"] {
  /* dark: accent=#a3a3a3, 需要深色文字保证对比 */
  color: #0a0a0a !important;
}

button.bg-gradient-to-r:hover,
a.bg-gradient-to-r:hover,
[class*="gradient-primary"]:hover {
  opacity: 0.9;
}

/* ========================================================================
   7) 输入框 · Input
   shadcn 源码:
     "h-9 rounded-md border border-input bg-transparent shadow-xs"
     "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
     "dark:bg-input/30"
   rounded-md = 0.5rem, shadow-xs, focus ring 3px
   ======================================================================== */
.bg-theme-input,
input[type="text"],
input[type="search"],
input[type="number"],
input[type="password"],
input[type="email"],
textarea {
  border: 1px solid var(--border-color) !important;
  border-radius: 0.5rem !important;
  background: transparent !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
  color: var(--text-color);
  font-size: 0.875rem;
  transition: color 0.15s, box-shadow 0.15s;
}

/* dark 模式: bg-input/30 = rgba(255,255,255, 0.15*0.3) 约 rgba(255,255,255,0.045) */
:root.dark .bg-theme-input,
:root.dark input[type="text"],
:root.dark input[type="search"],
:root.dark input[type="number"],
:root.dark input[type="password"],
:root.dark input[type="email"],
:root.dark textarea {
  background: rgba(255, 255, 255, 0.045) !important;
}

/* Focus: shadcn 标准 — border-ring + 3px ring at ring/50% */
.bg-theme-input:focus,
input:focus,
textarea:focus {
  outline: none !important;
  border-color: var(--shadcn-ring, #a3a3a3) !important;
  box-shadow: 0 0 0 3px rgba(163, 163, 163, 0.5) !important;
}

:root.dark .bg-theme-input:focus,
:root.dark input:focus,
:root.dark textarea:focus {
  border-color: var(--shadcn-ring, #737373) !important;
  box-shadow: 0 0 0 3px rgba(115, 115, 115, 0.5) !important;
}

select,
.form-select {
  border: 1px solid var(--border-color) !important;
  border-radius: 0.5rem !important;
  background-color: transparent !important;
}

:root.dark select,
:root.dark .form-select {
  background-color: rgba(255, 255, 255, 0.045) !important;
}

/* ========================================================================
   8) 顶栏 · Navbar
   shadcn header: "sticky top-0 z-50 w-full bg-background"
   无 backdrop-filter, 无阴影, 仅底部边框
   ======================================================================== */
#main-navbar .bg-white\/95,
#main-navbar .dark\:bg-slate-900\/95,
#main-navbar [class*="bg-white"],
#main-navbar [class*="bg-slate-900"] {
  background: var(--bg-color) !important;
  border-bottom: 1px solid var(--border-color) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 导航链接: shadcn nav 风格 */
#main-navbar .nav-link {
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: color 0.15s ease, background 0.15s ease;
}

#main-navbar .nav-link:hover {
  background: var(--hover-bg-color);
}

#main-navbar .nav-link-active {
  color: var(--text-color);
  font-weight: 500;
}

/* Logo: 无渐变, 纯色前景 */
#main-navbar span.bg-gradient-to-r,
#main-navbar span[class*="bg-gradient"] {
  background-image: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: var(--text-color) !important;
  color: var(--text-color) !important;
  font-weight: 700;
}

/* ========================================================================
   9) Footer: bg-background + border-top
   ======================================================================== */
footer {
  border-top: 1px solid var(--border-color) !important;
  background: var(--bg-color) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

/* ========================================================================
   10) 弹出 / 下拉 · Popover / Dropdown
   shadcn popover: "rounded-xl border bg-popover shadow-md"
   rounded-xl = 0.75rem
   ======================================================================== */
.dropdown-menu,
.glass-dropdown {
  border: 1px solid var(--border-color) !important;
  border-radius: 0.75rem !important;
  background: var(--card-bg-color) !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1) !important;
}

:root.dark .dropdown-menu,
:root.dark .glass-dropdown {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4) !important;
}

/* 菜单项 hover: bg-accent */
.dropdown-menu__item:hover,
.dropdown-menu__item:focus-visible {
  background: var(--hover-bg-color) !important;
  border-radius: 0.375rem;
}

/* ========================================================================
   11) 网络质量页
   ======================================================================== */
.network-quality-page .dashboard-card,
.network-quality-page .glass-card,
.network-quality-page #nq-dashboard-hero-card {
  border-radius: 0.75rem !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1) !important;
}

/* ========================================================================
   12) 单节点详情
   ======================================================================== */
.stat-hero-surface {
  border-radius: 0.75rem !important;
  border: 1px solid var(--border-color) !important;
}

.glass-card.surface-card.card-hover {
  border: 1px solid var(--border-color) !important;
  border-radius: 0.75rem !important;
}

/* stat-chip → shadcn Badge outline: "rounded-full border" */
.stat-chip {
  border: 1px solid var(--border-color) !important;
  border-radius: 9999px !important;
}

/* ========================================================================
   13) 账单报告
   ======================================================================== */
[data-billing-report-root="1"] .admin-card,
[data-billing-report-root="1"] .glass-card {
  border-radius: 0.75rem !important;
  border: 1px solid var(--border-color) !important;
}

/* ========================================================================
   14) 标签 · Badge
   shadcn Badge: "rounded-full border-transparent px-2 py-0.5 text-xs font-medium"
   default: "bg-primary text-primary-foreground"
   secondary: "bg-secondary text-secondary-foreground"
   outline: "border-border text-foreground"
   ======================================================================== */
[data-home-shell="1"] .dstatus-tag-chip {
  border: 1px solid var(--border-color) !important;
  border-radius: 9999px !important;
  background: var(--hover-bg-color) !important;
  font-size: 0.75rem;
  font-weight: 500;
}

/* ========================================================================
   15) 管理后台
   sidebar: shadcn "bg-sidebar border-r" (sidebar=#fafafa light, #171717 dark)
   ======================================================================== */

/* 侧边栏: --sidebar */
#admin-sidebar {
  border-right: 1px solid var(--border-color) !important;
}

:root:not(.dark) #admin-sidebar {
  background: #fafafa !important;
}

:root.dark #admin-sidebar {
  background: #171717 !important;
}

/* 后台卡片 */
.admin-layout-container .admin-card,
.admin-layout-container .glass-card,
.admin-layout-container .surface-card {
  border-radius: 0.75rem !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1) !important;
}

:root.dark .admin-layout-container .admin-card,
:root.dark .admin-layout-container .glass-card,
:root.dark .admin-layout-container .surface-card {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4) !important;
}

/* 后台表格: 圆角 + 文字规范 */
.admin-layout-container table {
  border-radius: 0.75rem;
  overflow: hidden;
}

.admin-layout-container th {
  font-weight: 500;
  font-size: 0.875rem;
  text-transform: none;
  letter-spacing: normal;
}

/* ========================================================================
   16) 登录页
   ======================================================================== */
.login-container,
[class*="login"] .card,
[class*="login"] .surface-card {
  border-radius: 0.75rem !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1) !important;
}

/* ========================================================================
   17) 通知 · Toast / Notification
   shadcn sonner: "rounded-xl border bg-card shadow-lg"
   ======================================================================== */
.notification-bubble {
  border-radius: 0.75rem !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: var(--card-bg-color) !important;
}

:root.dark .notification-bubble {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4) !important;
}

/* ========================================================================
   18) 进度条 · Progress
   shadcn progress: "rounded-full" 轨道和填充都是全圆角
   ======================================================================== */
.progress-fill-cpu,
.progress-fill-memory,
.progress-fill-swap,
.progress-fill-disk,
.progress-fill-network,
[class*="progress-fill"] {
  border-radius: 9999px !important;
}

[class*="progress-bg"],
.progress-bar-bg {
  border-radius: 9999px !important;
}

/* ========================================================================
   19) 分隔线 · Separator
   shadcn: "bg-border" (1px, 使用 border 色)
   ======================================================================== */
.border-theme-light,
.border-theme,
.dropdown-divider {
  border-color: var(--border-color) !important;
}

/* ========================================================================
   20) 滚动条: 极简, 与 shadcn 简洁风格一致
   ======================================================================== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #d4d4d4;
  border-radius: 9999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background: #a3a3a3;
  background-clip: content-box;
}

:root.dark ::-webkit-scrollbar-thumb {
  background: #404040;
  background-clip: content-box;
}

:root.dark ::-webkit-scrollbar-thumb:hover {
  background: #525252;
  background-clip: content-box;
}

/* ========================================================================
   21) 毛玻璃: shadcn 不使用 glassmorphism, 偏好实体背景
   保留但降低强度, 确保卡片背景为实色
   ======================================================================== */
html[data-glass="on"] .glass-card {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* ========================================================================
   22) 过渡: shadcn 用 transition-all, 持续时间短
   源码: "transition-[color,box-shadow]" 约 150ms
   ======================================================================== */
.server-card,
.dashboard-card,
.admin-card,
.glass-card,
button,
a {
  transition-duration: 0.15s !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ========================================================================
   23) 功能墙 / 升级提示
   ======================================================================== */
.feature-wall-overlay,
.feature-overlay {
  border-radius: 0.75rem !important;
}

/* ========================================================================
   24) 卡片分隔线 (server-card-handle 底部线)
   ======================================================================== */
#card-grid-container .server-card .server-card-handle,
#list-grid-container .server-card .server-card-handle {
  border-bottom-color: var(--border-color) !important;
}

/* ========================================================================
   24b) Dashboard 重要数字: accent 色在暗色下太暗淡, 提亮为 foreground
   涉及: 剩余总价值、已创造价值等 .text-theme-accent 大字
   ======================================================================== */
:root.dark .dashboard-card .text-theme-accent,
:root.dark [data-home-shell="1"] .text-theme-accent {
  color: #fafafa !important;
}

/* ========================================================================
   24c) expiry badge: 黄色背景 + 白色文字看不清, 改为深色文字
   ======================================================================== */
:root.dark .dashboard-node-expiry-badge[data-level="warning"] {
  color: #171717 !important;
}

/* ========================================================================
   24c) region-tag hover: 浅色模式加深
   原始 hover bg: var(--small-element-hover-surface-bg) = ~#f9fafb (太浅)
   修改为 neutral-200 #e5e5e5, 更明显的视觉反馈
   ======================================================================== */
:root:not(.dark) .region-tag:hover {
  background-color: #e5e5e5 !important;
}

:root.dark .region-tag:hover {
  background-color: #262626 !important;
}

/* active 态 */
:root:not(.dark) .region-tag.active {
  background-color: #e5e5e5 !important;
}

:root.dark .region-tag.active {
  background-color: #262626 !important;
}

/* ========================================================================
   25) Checkbox · ms-checkbox
   选中态: 背景用 accent, 勾用对比前景色
   shadcn Checkbox: "border-primary bg-primary text-primary-foreground"
   ======================================================================== */

/* Light: 深色背景 + 白勾 */
:root:not(.dark) .ms-checkbox-checked {
  background: #171717 !important;
  border-color: #171717 !important;
  color: #fafafa !important;
}

/* Dark: 浅色背景 + 深勾 */
:root.dark .ms-checkbox-checked {
  background: #fafafa !important;
  border-color: #fafafa !important;
  color: #0a0a0a !important;
}

/* 未选中态边框 */
.ms-checkbox {
  border-color: var(--border-color) !important;
  border-radius: 0.25rem !important;
}

/* 通用 checkbox / toggle 的 accent-color */
input[type="checkbox"],
input[type="radio"] {
  accent-color: #171717;
}

:root.dark input[type="checkbox"],
:root.dark input[type="radio"] {
  accent-color: #fafafa;
}

/* ========================================================================
   26) 硬编码 indigo 覆盖
   DStatus 的 style.min.css 中以下类使用了硬编码的 Tailwind indigo 色值,
   不走 CSS 变量, 必须用 !important 逐一覆盖为 neutral 色.

   原始值:
     indigo-50:  #eef2ff   → neutral-100: #f5f5f5
     indigo-100: #e0e7ff   → neutral-100: #f5f5f5
     indigo-200: #c7d2fe   → neutral-200: #e5e5e5
     indigo-300: #a5b4fc   → neutral-300: #d4d4d4
     indigo-400: #818cf8   → neutral-400: #a3a3a3
     indigo-600: #4f46e5   → neutral-900: #171717 (light) / neutral-50: #fafafa (dark)
     indigo-700: #4338ca   → neutral-950: #0a0a0a (light)
     indigo-900/30         → neutral-800: #262626 (dark)
   ======================================================================== */

/* --- 25a) .nav-link 导航链接 --- */

/* Light: hover */
.nav-link:hover {
  background-color: #f5f5f5 !important;
  color: #0a0a0a !important;
}

/* Dark: hover */
:root.dark .nav-link:hover,
.nav-link:hover:is(.dark *) {
  background-color: #262626 !important;
  color: #fafafa !important;
}

/* Light: active */
.nav-link-active {
  background-color: #f5f5f5 !important;
  color: #0a0a0a !important;
  --tw-ring-color: #e5e5e5 !important;
}

/* Dark: active */
:root.dark .nav-link-active,
.nav-link-active:is(.dark *) {
  background-color: #262626 !important;
  color: #fafafa !important;
  --tw-ring-color: rgba(255, 255, 255, 0.1) !important;
}

/* Light: active hover */
.nav-link-active:hover {
  background-color: #e5e5e5 !important;
}

/* Dark: active hover */
:root.dark .nav-link-active:hover,
.nav-link-active:hover:is(.dark *) {
  background-color: #404040 !important;
}

/* --- 25b) .btn-outline 轮廓按钮 --- */

/* Light: hover */
.btn-outline:hover {
  border-color: #d4d4d4 !important;
  background-color: #f5f5f5 !important;
  color: #0a0a0a !important;
}

/* Dark: hover */
:root.dark .btn-outline:hover,
.btn-outline:hover:is(.dark *) {
  border-color: #525252 !important;
  background-color: #404040 !important;
  color: #fafafa !important;
}

/* --- 25c) .filter-btn-active 筛选按钮激活态 --- */

/* Light: active */
.filter-btn-active {
  border-color: #d4d4d4 !important;
  background-color: #f5f5f5 !important;
  color: #0a0a0a !important;
}

/* Dark: active */
:root.dark .filter-btn-active,
.filter-btn-active:is(.dark *) {
  border-color: #525252 !important;
  background-color: #262626 !important;
  color: #fafafa !important;
}

/* --- 25d) Logo 渐变文字 (from-indigo-600 to-indigo-800) --- */
/* 已在第 8 节通过 background-image:none + text-fill-color 覆盖 */

/* --- 25e) 通用 Tailwind indigo 工具类覆盖 --- */
/* 仅覆盖在 DStatus 页面中实际使用的 hover/focus 类 */

.hover\:bg-indigo-50:hover {
  background-color: #f5f5f5 !important;
}

.hover\:bg-indigo-600:hover,
.hover\:bg-indigo-700:hover {
  background-color: #171717 !important;
}

:root.dark .hover\:bg-indigo-600:hover,
:root.dark .hover\:bg-indigo-700:hover {
  background-color: #404040 !important;
}

.hover\:text-indigo-600:hover,
.hover\:text-indigo-700:hover {
  color: #0a0a0a !important;
}

:root.dark .hover\:text-indigo-600:hover,
:root.dark .hover\:text-indigo-700:hover {
  color: #fafafa !important;
}

.hover\:border-indigo-300:hover {
  border-color: #d4d4d4 !important;
}

:root.dark .hover\:border-indigo-300:hover {
  border-color: #525252 !important;
}

.focus\:ring-indigo-500\/50:focus {
  --tw-ring-color: rgba(163, 163, 163, 0.5) !important;
}

:root.dark .focus\:ring-indigo-500\/50:focus {
  --tw-ring-color: rgba(115, 115, 115, 0.5) !important;
}

/* --- 25f) Dark 模式 indigo 工具类覆盖 --- */
.dark\:border-indigo-400:is(.dark *),
.dark\:border-indigo-500:is(.dark *) {
  border-color: #525252 !important;
}

.dark\:border-indigo-500\/30:is(.dark *),
.dark\:border-indigo-700\/30:is(.dark *),
.dark\:border-indigo-700\/40:is(.dark *) {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.dark\:bg-indigo-400:is(.dark *) {
  background-color: #a3a3a3 !important;
}

.dark\:bg-indigo-400\/20:is(.dark *) {
  background-color: rgba(163, 163, 163, 0.2) !important;
}

.dark\:bg-indigo-800:is(.dark *) {
  background-color: #262626 !important;
}

.dark\:bg-indigo-900\/20:is(.dark *),
.dark\:bg-indigo-900\/30:is(.dark *),
.dark\:bg-indigo-900\/40:is(.dark *),
.dark\:bg-indigo-900\/5:is(.dark *) {
  background-color: rgba(38, 38, 38, 0.3) !important;
}

/* --- 25g) Light 模式 indigo 静态类覆盖 --- */
.text-indigo-500,
.text-indigo-600,
.text-indigo-700,
.text-indigo-900 {
  color: #171717 !important;
}

:root.dark .text-indigo-500,
:root.dark .text-indigo-600,
:root.dark .text-indigo-700,
:root.dark .text-indigo-900 {
  color: #a3a3a3 !important;
}

.bg-indigo-50,
.bg-indigo-100 {
  background-color: #f5f5f5 !important;
}

:root.dark .bg-indigo-50,
:root.dark .bg-indigo-100 {
  background-color: #262626 !important;
}

.bg-indigo-500,
.bg-indigo-600 {
  background-color: #171717 !important;
}

:root.dark .bg-indigo-500,
:root.dark .bg-indigo-600 {
  background-color: #a3a3a3 !important;
}

.border-indigo-200,
.border-indigo-300,
.border-indigo-400,
.border-indigo-500,
.border-indigo-600 {
  border-color: #e5e5e5 !important;
}

:root.dark .border-indigo-200,
:root.dark .border-indigo-300,
:root.dark .border-indigo-400,
:root.dark .border-indigo-500,
:root.dark .border-indigo-600 {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.ring-indigo-200,
.ring-indigo-400,
.ring-indigo-500 {
  --tw-ring-color: #e5e5e5 !important;
}

:root.dark .ring-indigo-200,
:root.dark .ring-indigo-400,
:root.dark .ring-indigo-500 {
  --tw-ring-color: rgba(255, 255, 255, 0.1) !important;
}

/* Gradient classes: from-indigo / to-indigo → neutral */
.from-indigo-50,
.from-indigo-100,
.from-indigo-50\/80 {
  --tw-gradient-from: #f5f5f5 !important;
}

.from-indigo-500,
.from-indigo-600 {
  --tw-gradient-from: #171717 !important;
}

:root.dark .from-indigo-500,
:root.dark .from-indigo-600 {
  --tw-gradient-from: #a3a3a3 !important;
}

.to-indigo-100,
.to-indigo-200,
.to-indigo-100\/60 {
  --tw-gradient-to: #e5e5e5 !important;
}

.to-indigo-600,
.to-indigo-800 {
  --tw-gradient-to: #0a0a0a !important;
}

:root.dark .to-indigo-600,
:root.dark .to-indigo-800 {
  --tw-gradient-to: #a3a3a3 !important;
}

.hover\:from-indigo-600:hover {
  --tw-gradient-from: #171717 !important;
}

.hover\:to-indigo-700:hover {
  --tw-gradient-to: #0a0a0a !important;
}

:root.dark .hover\:from-indigo-600:hover {
  --tw-gradient-from: #a3a3a3 !important;
}

:root.dark .hover\:to-indigo-700:hover {
  --tw-gradient-to: #a3a3a3 !important;
}

/* bg-indigo-50/30 半透明 */
.bg-indigo-50\/30 {
  background-color: rgba(245, 245, 245, 0.3) !important;
}

:root.dark .bg-indigo-50\/30 {
  background-color: rgba(38, 38, 38, 0.3) !important;
}

.bg-indigo-500\/20 {
  background-color: rgba(23, 23, 23, 0.2) !important;
}

:root.dark .bg-indigo-500\/20 {
  background-color: rgba(163, 163, 163, 0.2) !important;
}

.border-indigo-200\/50,
.border-indigo-200\/60 {
  border-color: rgba(229, 229, 229, 0.55) !important;
}

:root.dark .border-indigo-200\/50,
:root.dark .border-indigo-200\/60 {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ========================================================================
   27) 硬编码 primary-* 覆盖
   DStatus 自定义 primary 色阶 (蓝紫):
     primary-50:  浅底   → neutral-100 #f5f5f5
     primary-100: 浅底   → neutral-100 #f5f5f5
     primary-200: 文字   → neutral-300 #d4d4d4
     primary-400: 暗色文字 → neutral-400 #a3a3a3
     primary-500: 主色   → neutral-900 #171717 / dark: neutral-300 #d4d4d4
     primary-600: 主色   → neutral-900 #171717
     primary-700: hover  → neutral-950 #0a0a0a
     primary-800: 文字   → neutral-900 #171717
     primary-900: 暗底   → neutral-800 #262626
   ======================================================================== */

/* --- Text --- */
.text-primary-500,
.text-primary-600,
.text-primary-800 {
  color: #171717 !important;
}

:root.dark .text-primary-500,
:root.dark .text-primary-600,
:root.dark .text-primary-800 {
  color: #d4d4d4 !important;
}

.dark\:text-primary-200:is(.dark *) {
  color: #d4d4d4 !important;
}

.dark\:text-primary-400:is(.dark *) {
  color: #a3a3a3 !important;
}

/* --- Hover text --- */
.hover\:text-primary-600:hover {
  color: #0a0a0a !important;
}

.dark\:hover\:text-primary-400:hover:is(.dark *) {
  color: #fafafa !important;
}

/* --- Background --- */
.bg-primary-50,
.bg-primary-100 {
  background-color: #f5f5f5 !important;
}

:root.dark .bg-primary-50,
:root.dark .bg-primary-100 {
  background-color: #262626 !important;
}

.bg-primary-500,
.bg-primary-600 {
  background-color: #171717 !important;
}

:root.dark .bg-primary-500,
:root.dark .bg-primary-600 {
  background-color: #a3a3a3 !important;
}

.hover\:bg-primary-600:hover,
.hover\:bg-primary-700:hover {
  background-color: #0a0a0a !important;
}

:root.dark .hover\:bg-primary-600:hover,
:root.dark .hover\:bg-primary-700:hover {
  background-color: #404040 !important;
}

.dark\:bg-primary-900\/20:is(.dark *),
.dark\:bg-primary-900\/30:is(.dark *) {
  background-color: rgba(38, 38, 38, 0.25) !important;
}

/* --- Border --- */
.border-primary-500 {
  border-color: #171717 !important;
}

:root.dark .border-primary-500 {
  border-color: #a3a3a3 !important;
}

.hover\:border-primary-300:hover {
  border-color: #d4d4d4 !important;
}

.dark\:border-primary-400:is(.dark *) {
  border-color: #525252 !important;
}

.dark\:hover\:border-primary-600:hover:is(.dark *) {
  border-color: #a3a3a3 !important;
}

/* --- Focus ring --- */
.focus\:ring-primary-500:focus {
  --tw-ring-color: rgba(163, 163, 163, 0.5) !important;
}

/* --- Gradient --- */
.from-primary-500 {
  --tw-gradient-from: #171717 !important;
}
.from-primary-500\/20 {
  --tw-gradient-from: rgba(23, 23, 23, 0.2) !important;
}

:root.dark .from-primary-500 {
  --tw-gradient-from: #a3a3a3 !important;
}
:root.dark .from-primary-500\/20 {
  --tw-gradient-from: rgba(163, 163, 163, 0.2) !important;
}

.dark\:from-primary-400\/20:is(.dark *) {
  --tw-gradient-from: rgba(163, 163, 163, 0.2) !important;
}

.to-primary-600 {
  --tw-gradient-to: #0a0a0a !important;
}
.to-primary-600\/10 {
  --tw-gradient-to: rgba(10, 10, 10, 0.1) !important;
}

:root.dark .to-primary-600 {
  --tw-gradient-to: #a3a3a3 !important;
}
:root.dark .to-primary-600\/10 {
  --tw-gradient-to: rgba(163, 163, 163, 0.1) !important;
}

.dark\:to-primary-500\/10:is(.dark *) {
  --tw-gradient-to: rgba(163, 163, 163, 0.1) !important;
}

.hover\:from-primary-600:hover {
  --tw-gradient-from: #0a0a0a !important;
}

.hover\:to-primary-700:hover {
  --tw-gradient-to: #0a0a0a !important;
}

:root.dark .hover\:from-primary-600:hover {
  --tw-gradient-from: #a3a3a3 !important;
}

:root.dark .hover\:to-primary-700:hover {
  --tw-gradient-to: #737373 !important;
}

/* --- Badge / Button primary --- */
.badge-primary {
  background-color: #171717 !important;
  color: #fafafa !important;
}

.badge-primary:is(.dark *) {
  background-color: #a3a3a3 !important;
  color: #0a0a0a !important;
}

.btn-primary {
  background-color: #171717 !important;
  color: #fafafa !important;
}

.btn-primary:hover {
  background-color: #0a0a0a !important;
}

:root.dark .btn-primary {
  background-color: #a3a3a3 !important;
  color: #0a0a0a !important;
}

:root.dark .btn-primary:hover {
  background-color: #d4d4d4 !important;
}

/* --- Switch: primary + accent + focus --- */
.tw-switch-color-primary .tw-switch-input:checked+.tw-switch-track {
  background-color: #171717 !important;
}

:root.dark .tw-switch-color-primary .tw-switch-input:checked+.tw-switch-track {
  background-color: #fafafa !important;
}

.tw-switch-color-accent .tw-switch-input:checked+.tw-switch-track {
  background-color: #171717 !important;
}

:root.dark .tw-switch-color-accent .tw-switch-input:checked+.tw-switch-track {
  background-color: #fafafa !important;
}

.tw-switch-input:focus+.tw-switch-track {
  box-shadow: 0 0 0 2px rgba(163, 163, 163, 0.4) !important;
}

/* --- Input focus ring (input-base, input-error, sort-order-input) --- */
.input-base:focus {
  --tw-ring-color: #a3a3a3 !important;
  border-color: #a3a3a3 !important;
}

.input-base:focus:is(.dark *) {
  --tw-ring-color: #737373 !important;
  border-color: #737373 !important;
}

.input-error:focus {
  --tw-ring-color: #dc2626 !important;
}

.input-error:focus:is(.dark *) {
  --tw-ring-color: #f87171 !important;
}

.input-success:focus {
  --tw-ring-color: #16a34a !important;
}

.input-success:focus:is(.dark *) {
  --tw-ring-color: #4ade80 !important;
}

.sort-order-input:focus {
  --tw-ring-color: rgba(163, 163, 163, 0.5) !important;
  border-color: #a3a3a3 !important;
}

:root.dark .sort-order-input:focus {
  --tw-ring-color: rgba(115, 115, 115, 0.5) !important;
  border-color: #737373 !important;
}

/* --- Loading spinner --- */
.loading-spinner {
  border-top-color: #171717 !important;
}

:root.dark .loading-spinner {
  border-top-color: #fafafa !important;
  border-color: #404040 !important;
}

/* --- Card license hover border --- */
.card-license:hover {
  border-color: #d4d4d4 !important;
  --tw-shadow-color: rgba(229, 229, 229, 0.3) !important;
}

.card-license:hover:is(.dark *) {
  border-color: #525252 !important;
  --tw-shadow-color: rgba(0, 0, 0, 0.3) !important;
}

/* --- Progress bar glow (进度条发光效果) --- */
[class*="progress-fill"] {
  box-shadow: none !important;
}

/* --- Stat action button primary --- */
.stat-actions .stat-action-btn--primary {
  color: #171717 !important;
}

.stat-actions .stat-action-btn--primary:is(.dark *) {
  color: #a3a3a3 !important;
}

.stat-actions .stat-action-btn--primary:hover {
  background-color: #f5f5f5 !important;
  color: #0a0a0a !important;
}

.stat-actions .stat-action-btn--primary:hover:is(.dark *) {
  background-color: #262626 !important;
  color: #fafafa !important;
}

/* --- Quick tag editor primary btn --- */
#quick-tag-editor .qte-btn-primary {
  background-color: #171717 !important;
  color: #fafafa !important;
}

:root.dark #quick-tag-editor .qte-btn-primary {
  background-color: #a3a3a3 !important;
  color: #0a0a0a !important;
}

/* --- ds-btn-primary --- */
.ds-btn-primary {
  background-color: #171717 !important;
  color: #fafafa !important;
}

:root.dark .ds-btn-primary {
  background-color: #a3a3a3 !important;
  color: #0a0a0a !important;
}

/* ========================================================================
   28) Modal / Overlay 背景: 原始 #1e293b (slate-800) → neutral
   ======================================================================== */
:root.dark body.no-glassmorphism .bg-theme-overlay,
:root.dark .bg-theme-overlay {
  background-color: #171717 !important;
}

:root.dark body:not(.no-glassmorphism) .bg-theme-overlay {
  background-color: rgba(23, 23, 23, 0.92) !important;
}

html:not(.dark) body.no-glassmorphism .bg-theme-overlay {
  background-color: #ffffff !important;
}

/* ========================================================================
   29) form-control: 后台表单输入框/下拉框
   白底白字问题 — 确保有正确的背景和文字色
   ======================================================================== */
.form-control {
  background-color: var(--card-bg-color) !important;
  color: var(--text-color) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 0.5rem !important;
}

.form-control:focus {
  outline: none !important;
  border-color: var(--shadcn-ring, #a3a3a3) !important;
  box-shadow: 0 0 0 3px rgba(163, 163, 163, 0.5) !important;
}

:root.dark .form-control:focus {
  border-color: var(--shadcn-ring, #737373) !important;
  box-shadow: 0 0 0 3px rgba(115, 115, 115, 0.5) !important;
}

/* select 下拉: 确保 option 也有正确的背景 */
select.form-control,
.form-control option {
  background-color: var(--card-bg-color) !important;
  color: var(--text-color) !important;
}

/* form label */
.form-group label {
  color: var(--text-color);
  font-size: 0.875rem;
  font-weight: 500;
}

/* form hint */
.form-hint {
  color: var(--secondary-text-color);
}

/* form-checkbox */
.form-checkbox {
  accent-color: #171717;
}

:root.dark .form-checkbox {
  accent-color: #fafafa;
}

/* ========================================================================
   30) btn-secondary: 使用 --gradient-secondary 渐变 → 改为纯色
   ======================================================================== */
.btn-secondary {
  background: var(--hover-bg-color) !important;
  color: var(--text-color) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: none !important;
}

.btn-secondary:hover {
  background: var(--border-color) !important;
  box-shadow: none !important;
  transform: none !important;
}

:root.dark .btn-secondary {
  color: #fafafa !important;
}