/* ==========================================================================
   flat-ui.css —— 平面简约风覆写层
   设计：清晰控制台 / 8px 微圆角 / 青绿色动作色 / 轻边界 / 零渐变
   覆盖：深色 + 浅色两套（跟随应用本身的 .dark 类）
   注入：nginx sub_filter 在 </head> 前插 <link>，不改前端源码
   ========================================================================== */

/* ---------------------------- 1. 浅色主题 ---------------------------- */
:root {
  --radius: 8px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 8px;
  --radius-xl: 8px;
  --radius-2xl: 8px;
  --radius-3xl: 8px;
  --radius-4xl: 8px;

  /* 中性灰阶 */
  --background: #f4f8f6;
  --foreground: #1e2b27;
  --card: #ffffff;
  --card-foreground: #1e2b27;
  --popover: #ffffff;
  --popover-foreground: #1e2b27;
  --muted: #edf3f0;
  --muted-foreground: #5b6d66;
  --secondary: #edf3f0;
  --secondary-foreground: #1e2b27;
  --accent: #e1eee8;
  --accent-foreground: #205143;

  /* 单一强调色（青绿色动作色） */
  --primary: #24745e;
  --primary-foreground: #ffffff;
  --ring: #24745e;

  /* 细实边框，替掉半透明描边 */
  --border: #d6e3dc;
  --input: #c7d7cf;

  --sidebar: #edf4f0;
  --sidebar-foreground: #253a32;
  --sidebar-border: #d6e3dc;
  --sidebar-accent: #dfede6;
  --sidebar-ring: #24745e;

  /* 图表去彩：单一强调色 + 灰阶，靠明度区分 */
  --chart-1: #24745e;
  --chart-2: #4f947b;
  --chart-3: #7cb39d;
  --chart-4: #a8cbbc;
  --chart-5: #d2e3da;
  --info: #24745e;
}

/* ---------------------------- 2. 深色主题 ---------------------------- */
.dark {
  --radius: 8px;
  --background: #0f1113;
  --foreground: #e6e8ea;
  --card: #15181a;
  --card-foreground: #e6e8ea;
  --popover: #171a1d;
  --popover-foreground: #e6e8ea;
  --muted: #1b1f22;
  --muted-foreground: #98a0a6;
  --secondary: #1b1f22;
  --secondary-foreground: #e6e8ea;
  --accent: #1f2427;
  --accent-foreground: #e6e8ea;

  --primary: #5bc19a;
  --primary-foreground: #ffffff;
  --ring: #5bc19a;

  --border: #262b2f;
  --input: #2c3236;

  --sidebar: #121517;
  --sidebar-foreground: #e6e8ea;
  --sidebar-border: #23272b;
  --sidebar-accent: #1c2124;
  --sidebar-ring: #5bc19a;

  --chart-1: #5f95ff;
  --chart-2: #98a0a6;
  --chart-3: #7b8490;
  --chart-4: #5c646d;
  --chart-5: #3f464d;
  --info: #4a86f7;
}

/* ------------------------ 3. 圆角统一成 8px ------------------------ */
[class*="rounded-sm"],
[class*="rounded-md"],
[class*="rounded-lg"],
[class*="rounded-xl"],
[class*="rounded-2xl"],
[class*="rounded-3xl"],
[class*="rounded-4xl"] {
  border-radius: 8px !important;
}
[class*="rounded-t-"] {
  border-top-left-radius: 8px !important;
  border-top-right-radius: 8px !important;
}
[class*="rounded-b-"] {
  border-bottom-left-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
}
[class*="rounded-l-"] {
  border-top-left-radius: 8px !important;
  border-bottom-left-radius: 8px !important;
}
[class*="rounded-r-"] {
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
}
/* rounded-full 保留：头像、开关滑块、徽标 pill 需要真圆 */

/* ------------------------ 4. 零阴影 / 零渐变 ------------------------ */
[class*="shadow-xs"],
[class*="shadow-sm"],
[class*="shadow-md"],
[class*="shadow-lg"],
[class*="shadow-xl"],
[class*="shadow-2xl"],
[class*="shadow-inner"] {
  box-shadow: none !important;
}

/* 首页那块 135deg 渐变英雄卡：拍平成纯色面 */
[class*="linear-gradient"],
[class*="radial-gradient"],
[class*="conic-gradient"],
[class*="bg-gradient-to-"] {
  background-image: none !important;
}
/* 定价页顶上那块装饰性光斑（pointer-events-none 的绝对定位 div）：直接抹掉 */
.pointer-events-none[class*="inset-x-0"][class*="absolute"] {
  background-image: none !important;
}
div[class*="linear-gradient"],
section[class*="linear-gradient"] {
  background-color: var(--card) !important;
}
/* 万一有按钮只靠渐变上色，兜底给个实心 */
button[class*="linear-gradient"],
a[class*="linear-gradient"],
button[class*="bg-gradient-to-"],
a[class*="bg-gradient-to-"] {
  background-color: var(--primary) !important;
  color: var(--primary-foreground) !important;
}

/* 顶部栏毛玻璃也去掉，换成实底 + 细边框 */
[class*="backdrop-blur"] {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ------------------------ 5. 边框：细、实、均匀 ------------------------ */
.border,
.border-t,
.border-b,
.border-l,
.border-r {
  border-color: var(--border);
}
[class*="border-border"],
[class*="border-input"] {
  border-color: var(--border) !important;
}

/* ------------------------ 6. 焦点态：去光晕，只变色 ------------------------ */
[class*="focus-visible:ring"]:focus-visible,
[class*="focus:ring"]:focus-visible,
[class*="focus-visible:ring"]:focus {
  box-shadow: none !important;
  outline: none !important;
  border-color: var(--ring) !important;
}

/* ------------------------ 7. 按钮：实心 / 细边，不做悬浮膨胀 ------------------------ */
.group\/button {
  transition-property: background-color, border-color, color !important;
  transition-duration: 120ms !important;
}
.group\/button:active {
  transform: none !important;
}
[class*="active:scale"]:active,
[class*="hover:scale"]:hover {
  transform: none !important;
}
/* 动效收短，平面风要"干" */
[class*="transition-all"],
[class*="transition-colors"],
[class*="transition-opacity"] {
  transition-duration: 120ms !important;
  transition-timing-function: ease-out !important;
}

/* ------------------------ 8. 表格：更像表格，不像卡片堆 ------------------------ */
thead th,
thead td {
  font-weight: 500 !important;
  letter-spacing: 0.02em;
}
thead tr {
  border-bottom: 1px solid var(--border);
}
tbody tr {
  border-bottom: 1px solid var(--border);
}
tbody tr:hover {
  background-color: var(--muted) !important;
}

/* ------------------------ 9. 卡片：靠边框分层，不靠阴影 ------------------------ */
.bg-card {
  background-color: var(--card);
}

/* ------------------------ 10. 滚动条：细、无色 ------------------------ */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 0;
}
*::-webkit-scrollbar-track {
  background: transparent;
}

/* ------------------------ 11. 选中文字用强调色 ------------------------ */
::selection {
  background: color-mix(in srgb, var(--primary) 28%, transparent);
}

/* ---------------------- 12. 清晰控制台工作区 ---------------------- */
body {
  background: var(--background);
  color: var(--foreground);
}

[data-slot='sidebar-inset'] {
  background: var(--background) !important;
}

[data-slot='sidebar'] {
  border-right: 1px solid var(--sidebar-border) !important;
}

[data-slot='sidebar-menu-button'][data-active='true'] {
  background: color-mix(in srgb, var(--primary) 12%, var(--sidebar)) !important;
  color: var(--primary) !important;
  font-weight: 600;
}

[data-slot='sidebar-group-label'] {
  color: color-mix(in srgb, var(--sidebar-foreground) 60%, transparent) !important;
  letter-spacing: 0.04em;
}

[data-slot='card'] {
  border-color: var(--border) !important;
  box-shadow: 0 2px 8px rgb(31 83 66 / 0.05) !important;
}

[data-slot='table'] thead {
  background: color-mix(in srgb, var(--muted) 72%, transparent);
}

[data-slot='table'] th {
  color: var(--muted-foreground) !important;
  font-size: 0.75rem;
  font-weight: 600 !important;
}

[data-slot='table'] td {
  color: var(--foreground);
}

@media (max-width: 767px) {
  [data-slot='sidebar-inset'] {
    border-radius: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}