/* ============================================================
   ZiloAPI 内页主题 —— 把 sub2api 默认青色（teal primary）整体改成
   登录页同款「赭陶 #C6613F + 奶油白 #FAF9F5 + 浅色极光」。
   由 Nginx sub_filter 注入，全局作用于登录后 dashboard / 侧栏 / 顶栏 /
   卡片 / 按钮 / 强调件。

   为什么用 !important 逐 class 覆盖：sub2api 的 primary 色阶是 Tailwind
   配置里写死的 hex（无 CSS 变量），编译进 .bg-primary-600 之类的 class，
   只能在注入 CSS 里按 class 覆盖，改不了源头变量。

   与登录皮肤解耦：登录/注册页样式 scope 在 body.zilo-auth（skin.css），
   色值与本文件一致，两者叠加不冲突；回滚本主题只需从 nginx sub_filter
   删掉本文件的 <link> 一行 + reload，登录皮肤不受影响。

   色值同 skin.css：赭陶 #C6613F / 深 #A8522F / 亮 #D9805A、奶油 #FAF9F5。
   ============================================================ */

/* ============ 1) 主色文字（链接 / 侧栏激活 / 强调数字）============ */
.text-primary-300,
.text-primary-400,
.text-primary-500,
.text-primary-600 { color: #C6613F !important; }
.text-primary-700 { color: #A8522F !important; }
.text-primary-800,
.text-primary-900 { color: #8F4A2E !important; }
.dark .dark\:text-primary-200,
.dark .dark\:text-primary-300,
.dark .dark\:text-primary-400 { color: #E0895F !important; }
.hover\:text-primary-500:hover,
.hover\:text-primary-600:hover,
.hover\:text-primary-700:hover { color: #A8522F !important; }

/* ============ 2) 主色背景（实心 + 浅色高亮底）============ */
.bg-primary-500,
.bg-primary-600 { background-color: #C6613F !important; }
.bg-primary-700 { background-color: #A8522F !important; }
.bg-primary-50  { background-color: #FBF1EC !important; }
.bg-primary-100 { background-color: #F6E2D9 !important; }
.bg-primary-200 { background-color: #EFCDBD !important; }
.dark .dark\:bg-primary-900\/20,
.dark .dark\:bg-primary-900\/30,
.dark .dark\:bg-primary-900\/40 { background-color: rgba(198, 97, 63, .16) !important; }
.dark .dark\:bg-primary-500\/10,
.dark .dark\:bg-primary-500\/20 { background-color: rgba(198, 97, 63, .14) !important; }

/* 侧栏激活项（若用语义 class） */
.sidebar-link-active,
.nav-item-active,
.router-link-active.is-active { background-color: #FBF1EC !important; color: #C6613F !important; }
.dark .sidebar-link-active,
.dark .nav-item-active { background-color: rgba(198, 97, 63, .16) !important; color: #E0895F !important; }

/* ============ 3) 边框 / focus ring ============ */
.border-primary-100 { border-color: rgba(198, 97, 63, .18) !important; }
.border-primary-200,
.border-primary-300 { border-color: rgba(198, 97, 63, .35) !important; }
.border-primary-400,
.border-primary-500,
.border-primary-600 { border-color: #C6613F !important; }
.ring-primary-400,
.ring-primary-500 { --tw-ring-color: rgba(198, 97, 63, .45) !important; }
.focus\:ring-primary-500:focus { --tw-ring-color: rgba(198, 97, 63, .35) !important; }
.focus\:border-primary-500:focus { border-color: #C6613F !important; }

/* ============ 4) 主按钮（teal 渐变 → 赭陶渐变）============ */
.btn-primary {
  background-image: linear-gradient(135deg, #C6613F, #A8522F) !important;
  box-shadow: 0 12px 26px -10px rgba(198, 97, 63, .5) !important;
}
.btn-primary:hover {
  background-image: linear-gradient(135deg, #B85736, #984820) !important;
}

/* ============ 5) 渐变 from/to/via（Tailwind gradient 变量）+ 文字渐变 ============ */
.from-primary-400,
.from-primary-500,
.from-primary-600 {
  --tw-gradient-from: #C6613F var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(198, 97, 63, 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.to-primary-400,
.to-primary-500,
.to-primary-600 { --tw-gradient-to: #A8522F var(--tw-gradient-to-position) !important; }
.via-primary-400,
.via-primary-500 {
  --tw-gradient-stops: var(--tw-gradient-from), #D9805A var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}
.text-gradient,
.bg-gradient-primary { background-image: linear-gradient(135deg, #C6613F, #A8522F) !important; }

/* ============ 6) 发光 / 阴影（teal glow → 赭陶 glow）============ */
.shadow-glow    { box-shadow: 0 0 20px rgba(198, 97, 63, .22) !important; }
.shadow-glow-lg { box-shadow: 0 0 40px rgba(198, 97, 63, .30) !important; }

/* ============ 7) 组件：badge / progress / switch / toast / 统计卡图标 ============ */
.badge-primary { background-color: #F6E2D9 !important; color: #A8522F !important; }
.dark .badge-primary { background-color: rgba(198, 97, 63, .18) !important; color: #E0895F !important; }
.progress-bar { background-image: linear-gradient(90deg, #C6613F, #D9805A) !important; }
.navigation-progress-bar { background-image: linear-gradient(90deg, rgba(198,97,63,0) 0%, #C6613F 55%, #D9805A 100%) !important; background-color: #C6613F !important; }
.switch-active { background-color: #C6613F !important; }
.toast-info { border-left-color: #C6613F !important; }
.stat-icon-primary { background-color: #F6E2D9 !important; color: #C6613F !important; }
.dark .stat-icon-primary { background-color: rgba(198, 97, 63, .18) !important; color: #E0895F !important; }

/* 表单原生控件强调色（复选框 / 单选 / range） */
input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color: #C6613F !important; }
::selection { background: rgba(198, 97, 63, .22); }

/* ============ 8) 页面背景：奶油 + 赭陶浅色极光（匹配登录页 aurora）============
   sub2api 内页根容器用 .bg-mesh-gradient（青色 radial 网格）叠在 bg-gray-50 上。
   整块换成登录同款极光（略降 alpha 保证内容可读），底色奶油白。 */
.bg-mesh-gradient {
  background-color: #FAF9F5 !important;
  background-image:
    radial-gradient(at 16% 18%, rgba(255, 176, 132, .30) 0px, transparent 46%),
    radial-gradient(at 82%  8%, rgba(198, 101, 63, .14) 0px, transparent 46%),
    radial-gradient(at 62% 84%, rgba(150, 200, 240, .18) 0px, transparent 44%),
    radial-gradient(at 28% 88%, rgba(150, 220, 190, .16) 0px, transparent 44%),
    radial-gradient(at 92% 62%, rgba(244, 180, 205, .16) 0px, transparent 46%) !important;
}