/* ============================================================================
 * Infwave · Sub2API Vue SPA 色系全覆盖 override
 * INFWAVE_STATIC_FILE_ROLE: SUB2API_OVERRIDE_REFERENCE_ONLY
 * 用途：线上 Sub2API Vue SPA runtime override 参考；不是 public shell CSS。
 * 当前 public action：#de6023 / #c94e18 / rgba(222, 96, 35, 0.22)。
 * ============================================================================ */

/* =========== 1. 按钮复合 class（登录/注册主按钮）=========== */
/* 默认：纯深墨冷色调，不走紫（去骚气） */
.btn-primary {
  background-image: linear-gradient(to right, #0f1730, #1e293b) !important;
  --tw-shadow-color: rgba(15, 23, 48, 0.25) !important;
}
/* hover：柔和橙点睛，仅在鼠标悬停时出现 */
.btn-primary:hover {
  background-image: linear-gradient(to right, #1e293b, #c94e18) !important;
  --tw-shadow-color: rgba(30, 41, 59, 0.3) !important;
}
.btn:focus {
  --tw-ring-color: rgba(51, 65, 85, 0.5) !important;
}

/* =========== 2. 输入框 focus（Linear/Vercel 含蓄风）=========== */
/* 深墨细边 + 极浅深墨 halo，替代原紫光晕 */
.input:focus {
  border-color: #0f1730 !important;
  box-shadow: 0 0 0 3px rgba(15, 23, 48, 0.06) !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-ring-offset-shadow: 0 0 #0000 !important;
}

/* =========== 3. "Infwave" 渐变标题 .text-gradient（冷色调，去紫）=========== */
.text-gradient {
  background-image: linear-gradient(to right, #0f1730, #334155) !important;
}

/* =========== 4. bg-primary 色阶（降阶到 slate 冷色，只有主按钮保留品牌色）=========== */
/* 浅色（card 底 / 图标占位 / badge 底）→ 近白偏冷，不再紫 */
.bg-primary-50  { background-color: #f8fafc !important; }
.bg-primary-100 { background-color: #f1f5f9 !important; }
.bg-primary-200 { background-color: #e2e8f0 !important; }
.bg-primary-300 { background-color: #cbd5e1 !important; }
.bg-primary-400 { background-color: #94a3b8 !important; }
/* 深色（头像 / 徽章 / 侧边栏深块）→ slate 冷灰，低调不抢眼 */
.bg-primary-500 { background-color: #334155 !important; }
.bg-primary-600 { background-color: #1e293b !important; }
.hover\:bg-primary-500:hover { background-color: #334155 !important; }
.hover\:bg-primary-600:hover { background-color: #1e293b !important; }
.hover\:bg-primary-700:hover { background-color: #0f172a !important; }
.peer-checked\:bg-primary-500 { background-color: #334155 !important; }

/* =========== 5. text-primary 色阶 =========== */
.text-primary-100 { color: #fce9df !important; }
.text-primary-200 { color: #f8cfbc !important; }
.text-primary-300 { color: #efaa85 !important; }
.text-primary-400 { color: #e3814c !important; }
.text-primary-500 { color: #de6023 !important; }
.text-primary-600 { color: #de6023 !important; }
.text-primary-700 { color: #c94e18 !important; }
.hover\:text-primary-500:hover { color: #ea580c !important; }
.hover\:text-primary-600:hover { color: #ea580c !important; }
.hover\:text-primary-700:hover { color: #ea580c !important; }
.group-hover\:text-primary-500 { color: #de6023 !important; }

/* =========== 6. 硬编码 teal（.text-teal / .bg-teal） =========== */
.text-teal-500 { color: #de6023 !important; }
.text-teal-600 { color: #de6023 !important; }
.text-teal-700 { color: #c94e18 !important; }
.bg-teal-100 { background-color: #f1f5f9 !important; }

/* =========== 7. border-primary 色阶 =========== */
.border-primary-100 { border-color: #f1f5f9 !important; }
.border-primary-200 { border-color: #e2e8f0 !important; }
.border-primary-300 { border-color: #cbd5e1 !important; }
.border-primary-400 { border-color: #94a3b8 !important; }
.border-primary-500 { border-color: #334155 !important; }
.border-primary-600 { border-color: #1e293b !important; }
.hover\:border-primary-500:hover { border-color: #334155 !important; }
.focus\:border-primary-500:focus { border-color: #de6023 !important; }
.peer-checked\:border-primary-500 { border-color: #334155 !important; }

/* =========== 8. ring + focus =========== */
.ring-primary-100 { --tw-ring-color: #fce9df !important; }
.ring-primary-500 { --tw-ring-color: #0f1730 !important; }
.focus\:ring-primary-500:focus { --tw-ring-color: rgba(222, 96, 35, 0.22) !important; }

/* =========== 9. gradient stops（from/to/via-primary）=========== */
/* 浅色 gradient → slate 冷色 */
.from-primary-50   { --tw-gradient-from: #f8fafc var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(248, 250, 252, 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.from-primary-400  { --tw-gradient-from: #94a3b8 var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(148, 163, 184, 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
/* 深色 gradient → slate 冷灰 */
.from-primary-500  { --tw-gradient-from: #334155 var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(51, 65, 85, 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.from-primary-500\/10 { --tw-gradient-from: rgba(51, 65, 85, 0.1) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(51, 65, 85, 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.from-primary-600  { --tw-gradient-from: #1e293b var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(30, 41, 59, 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.to-primary-100    { --tw-gradient-to: #f1f5f9 var(--tw-gradient-to-position) !important; }
.to-primary-500    { --tw-gradient-to: #334155 var(--tw-gradient-to-position) !important; }
.to-primary-600    { --tw-gradient-to: #1e293b var(--tw-gradient-to-position) !important; }
.to-primary-600\/5 { --tw-gradient-to: rgba(30, 41, 59, 0.05) var(--tw-gradient-to-position) !important; }
.via-primary-50\/30 { --tw-gradient-stops: var(--tw-gradient-from), rgba(248, 250, 252, 0.3) var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }
.to-teal-50        { --tw-gradient-to: #f8fafc var(--tw-gradient-to-position) !important; }

/* =========== 10. 杂项 primary 派生 =========== */
.badge-primary {
  background-color: #f1f5f9 !important;
  color: #de6023 !important;
}
.stat-icon-primary {
  background-color: #f1f5f9 !important;
  color: #de6023 !important;
}
.shadow-primary-500 {
  --tw-shadow-color: rgba(51, 65, 85, 0.2) !important;
  --tw-shadow: var(--tw-shadow-colored) !important;
}

/* =========== 11. 侧边栏激活态（独立 class，非 bg-primary-*）=========== */
/* 浓一档 slate-200 底色 + action-700 文字（橙点睛保留，底色不进紫避免骚气） */
.sidebar-link-active {
  background-color: #e2e8f0 !important;
  color: #de6023 !important;
  font-weight: 600 !important;
}
.sidebar-link-active:hover {
  background-color: #cbd5e1 !important;
  color: #c94e18 !important;
}

/* =========== 12. 带透明度的 bg-primary 变体 =========== */
.bg-primary-50\/50  { background-color: rgba(248, 250, 252, 0.5) !important; }
.bg-primary-50\/80  { background-color: rgba(248, 250, 252, 0.8) !important; }
.bg-primary-200\/50 { background-color: rgba(226, 232, 240, 0.5) !important; }
.bg-primary-300\/10 { background-color: rgba(203, 213, 225, 0.1) !important; }
.bg-primary-400\/10 { background-color: rgba(148, 163, 184, 0.1) !important; }
.bg-primary-400\/20 { background-color: rgba(148, 163, 184, 0.2) !important; }
.bg-primary-500\/10 { background-color: rgba(51, 65, 85, 0.1) !important; }
.bg-primary-500\/15 { background-color: rgba(51, 65, 85, 0.15) !important; }

/* =========== 13. hover 状态补漏 =========== */
.hover\:bg-primary-50:hover  { background-color: #f8fafc !important; }
.hover\:bg-primary-50\/50:hover { background-color: rgba(248, 250, 252, 0.5) !important; }
.hover\:bg-primary-100:hover { background-color: #f1f5f9 !important; }
.hover\:bg-primary-200:hover { background-color: #e2e8f0 !important; }
.hover\:bg-teal-200:hover    { background-color: #e2e8f0 !important; }

/* =========== 14. Emerald/Green 降饱和（保留绿调，降低刺眼度）===========
   原 emerald-500 #10b981 鲜绿 → #4d7a5f 苔藓绿（success 主色）
   色阶映射遵循"保留色相、降饱和"原则，视觉密度减半 */

/* ----- emerald 色阶 ----- */
.bg-emerald-50  { background-color: #f1f7f4 !important; }
.bg-emerald-100 { background-color: #dce7e0 !important; }
.bg-emerald-500 { background-color: #4d7a5f !important; }
.bg-emerald-600 { background-color: #3c6249 !important; }
.bg-emerald-200\/60 { background-color: rgba(181, 204, 190, 0.6) !important; }
.bg-emerald-500\/10 { background-color: rgba(77, 122, 95, 0.1) !important; }

.border-emerald-200 { border-color: #b5ccbe !important; }

.text-emerald-100 { color: #dce7e0 !important; }
.text-emerald-200 { color: #b5ccbe !important; }
.text-emerald-300 { color: #8eaf9b !important; }
.text-emerald-500 { color: #4d7a5f !important; }
.text-emerald-600 { color: #3c6249 !important; }
.text-emerald-600\/70 { color: rgba(60, 98, 73, 0.7) !important; }
.text-emerald-700 { color: #2e4d38 !important; }
.text-emerald-800 { color: #1f3525 !important; }

.from-emerald-50  { --tw-gradient-from: #f1f7f4 var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(241, 247, 244, 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.from-emerald-400 { --tw-gradient-from: #6a9379 var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(106, 147, 121, 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.from-emerald-500 { --tw-gradient-from: #4d7a5f var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(77, 122, 95, 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.to-emerald-500   { --tw-gradient-to: #4d7a5f var(--tw-gradient-to-position) !important; }
.to-emerald-600   { --tw-gradient-to: #3c6249 var(--tw-gradient-to-position) !important; }

.hover\:bg-emerald-50:hover  { background-color: #f1f7f4 !important; }
.hover\:bg-emerald-200:hover { background-color: #b5ccbe !important; }
.hover\:text-emerald-600:hover { color: #3c6249 !important; }
.group-hover\:text-emerald-500 { color: #4d7a5f !important; }

/* ----- green 色阶（同步降饱和） ----- */
.bg-green-50   { background-color: #f1f7f4 !important; }
.bg-green-100  { background-color: #dce7e0 !important; }
.bg-green-400  { background-color: #6a9379 !important; }
.bg-green-500  { background-color: #4d7a5f !important; }
.bg-green-600  { background-color: #3c6249 !important; }
.border-green-200 { border-color: #b5ccbe !important; }
.border-green-300 { border-color: #8eaf9b !important; }
.border-green-400 { border-color: #6a9379 !important; }
.border-green-500 { border-color: #4d7a5f !important; }

/* =========== 16. dropdown 下拉菜单 hover 底色（统一到 sidebar 激活态）=========== */
.dropdown-item:hover {
  background-color: #e2e8f0 !important;
}

/* =========== 17. Toast 通知左竖条更细（4px → 2px）=========== */
.toast {
  border-left-width: 2px !important;
}

/* =========== 15. 按钮 :active 状态（防按下瞬间还原绿色）=========== */
.btn-primary:active {
  background-image: linear-gradient(to right, #1e293b, #c94e18) !important;
}

/* =========== 18. Logo dark mode — swap SVG for dark background ===========
   NOTE: superseded by §19 below. The iOS dark-mode reset forces Sub2API back to
   light theme even when OS is in dark mode, so this swap is overridden by the
   `content: normal !important;` rule at the end of §19. Kept here for the case
   where Sub2API exposes an explicit light/dark toggle in the future. */
html.dark img[src*="infwave-logo-gateway"] {
  content: url('/infwave-logo-gateway-dark-v2.svg') !important;
}

/* =========== 19. iOS dark-mode reset — Sub2API SPA auto-adds html.dark when OS is in dark mode.
   Without this block, iPhone Safari renders /login etc. as a deep gray dark theme that doesn't
   match the Infwave light brand. Force everything back to light. =========== */
html.dark {
  color-scheme: light only !important;
  background: #f8fafc !important;
}
html.dark body,
html.dark .min-h-screen,
html.dark .bg-gray-900, html.dark .bg-gray-950,
html.dark .bg-slate-900, html.dark .bg-slate-950,
html.dark .dark\:bg-gray-900, html.dark .dark\:bg-gray-950,
html.dark .dark\:bg-slate-900, html.dark .dark\:bg-slate-950 {
  background: #f8fafc !important;
  color: #0f1730 !important;
}
html.dark .card,
html.dark .modal-box, html.dark .bg-base-100,
html.dark .dark\:bg-gray-800, html.dark .dark\:bg-slate-800,
html.dark [class*="dark:bg-gray-9"], html.dark [class*="dark:bg-slate-9"] {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 18px 46px rgba(15,23,48,.06) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html.dark .dark\:text-white,
html.dark .dark\:text-gray-100, html.dark .dark\:text-slate-100 {
  color: #0f1730 !important;
}
html.dark .dark\:text-gray-300, html.dark .dark\:text-gray-400,
html.dark .dark\:text-slate-300, html.dark .dark\:text-slate-400 {
  color: #4a5374 !important;
}
html.dark .dark\:border-gray-700, html.dark .dark\:border-slate-700 {
  border-color: #e2e8f0 !important;
}
/* Restore light-mode logo since dark mode is forced back to light */
html.dark img[src*="infwave-logo-gateway"] {
  content: normal !important;
}

/* =========== 20. Runtime language switcher — public v8 style for Sub2API auth/console ===========
   Keep language switching as one tiny global component instead of relying on
   the native flag dropdown, which makes public pages and console feel split. */
.ifw-runtime-lang-switch {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  color: #2a3456 !important;
  font: 600 16px/1 "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

.ifw-runtime-lang-switch::before {
  content: "" !important;
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  background: currentColor !important;
  opacity: 0.78 !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

.ifw-runtime-lang-switch:hover {
  color: #0f1730 !important;
}

.ifw-runtime-auth-lang-switch {
  position: fixed !important;
  top: 24px !important;
  right: 32px !important;
  z-index: 2147483000 !important;
  padding: 8px 10px !important;
}

/* =========== 21. Google OIDC + compliance links ===========
   Runtime-only polish for the upstream Sub2API auth/payment surfaces. */
.ifw-runtime-google-oauth-button {
  display: inline-flex !important;
  width: 100% !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  border: 1px solid #d8e1ee !important;
  border-radius: 14px !important;
  background: #fff !important;
  color: #0f1730 !important;
  font-weight: 650 !important;
  box-shadow: 0 10px 24px rgba(15, 23, 48, 0.06) !important;
}

.ifw-runtime-google-oauth-button:hover {
  border-color: rgba(222, 96, 35, 0.35) !important;
  box-shadow: 0 14px 28px rgba(15, 23, 48, 0.1) !important;
}

.ifw-runtime-google-oauth-icon {
  display: inline-flex !important;
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;
}

.ifw-runtime-google-oauth-icon svg {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
}

/* Hide SPA-rendered duplicate Google icon next to our runtime-injected brand SVG.
   Two SPA rendering patterns observed (2026-05-25 / 2026-05-26):
     - OIDC button: SPA wraps a letter-avatar inside <span class="...rounded-full bg-primary-100">G</span>
     - Native Google button: SPA inlines <svg class="h-5 w-5"> with the 4-color G brand
   We hide both, but MUST NOT hide the button label span (e.g. <span class="font-medium">使用 Google 登录</span>),
   which would happen with an overly broad `> span:not(.ifw-runtime-google-oauth-icon)` rule.
   Selectors:
     - `> span.rounded-full` matches OIDC letter-avatar pattern only (label span has font-medium, no rounded-full).
     - `> img`, `> svg` match Native pattern direct-child icon variants.
   Our own runtime icon lives inside <span class="ifw-runtime-google-oauth-icon">, so its nested <svg> is
   one level deeper and not hit by `> svg` direct-child selectors. */
.ifw-runtime-google-oauth-button > span.rounded-full,
.ifw-runtime-google-oauth-button > img,
.ifw-runtime-google-oauth-button > svg {
  display: none !important;
}

.ifw-google-oauth-hidden {
  display: none !important;
}

.ifw-auth-legal-links {
  margin: 12px auto 0 !important;
  max-width: 560px !important;
  color: #6a738b !important;
  font: 500 13px/1.7 "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif !important;
  text-align: center !important;
}

.ifw-auth-legal-links a,
.ifw-payment-legal-note a {
  color: #c94e18 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

.ifw-payment-legal-note {
  margin: 0 0 16px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(222, 96, 35, 0.2) !important;
  border-radius: 14px !important;
  background: rgba(222, 96, 35, 0.055) !important;
  color: #4a5374 !important;
  font: 500 14px/1.7 "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif !important;
}