/* ============================================================
   premium.css —— 高级质感覆盖（仅布局与配色，不改任何功能逻辑）
   主题主色已由 JS 主题统一改为「科技蓝青」；
   本文件负责：高级渐变背景 / 字体 / 顶部毛玻璃 / 卡片质感 /
   按钮圆角与光影 / 底部栏精修 / 滚动条 / 残留色对齐等。
   深色模式通过 vueuse 在 <html> 上追加 .dark class 来区分。
   ============================================================ */

/* ---------- 1. 基础字体与渲染质量 ---------- */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    sans-serif;
  background-attachment: fixed;
  color-scheme: light;
}

/* ---------- 2. 高级渐变背景（浅色） ---------- */
body {
  background:
    radial-gradient(1100px 780px at 12% -8%, rgba(47, 109, 246, 0.10), transparent 55%),
    radial-gradient(900px 620px at 92% -4%, rgba(34, 211, 238, 0.10), transparent 50%),
    radial-gradient(1200px 900px at 50% 110%, rgba(47, 109, 246, 0.05), transparent 55%),
    linear-gradient(165deg, #f9fcff 0%, #eef4ff 46%, #e7f1ff 100%) !important;
}
/* 让布局表面透明，露出 body 的渐变背景 */
.n-config-provider,
.n-layout,
.n-layout-scroll-container,
.n-layout-sider {
  background: transparent !important;
}

/* ---------- 2b. 高级渐变背景（深色） ---------- */
html.dark body {
  color-scheme: dark;
  background:
    radial-gradient(1100px 780px at 12% -8%, rgba(107, 140, 255, 0.16), transparent 55%),
    radial-gradient(900px 620px at 92% -4%, rgba(34, 211, 238, 0.10), transparent 50%),
    radial-gradient(1300px 900px at 50% 112%, rgba(47, 109, 246, 0.08), transparent 55%),
    linear-gradient(180deg, #0c111d 0%, #0a0e17 55%, #0b1020 100%) !important;
}

/* ---------- 3. 顶部毛玻璃导航 ---------- */
.n-layout-header {
  position: sticky;
  top: 0;
  z-index: 120;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.55) 100%) !important;
  border-bottom: 1px solid rgba(47, 109, 246, 0.06);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.55), 0 2px 18px rgba(15, 34, 90, 0.04);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
html.dark .n-layout-header {
  background: linear-gradient(180deg, rgba(13, 20, 34, 0.82) 0%, rgba(13, 20, 34, 0.55) 100%) !important;
  border-bottom: 1px solid rgba(107, 140, 255, 0.10);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.03), 0 2px 18px rgba(0, 0, 0, 0.30);
}

/* ---------- 4. 卡片质感：圆角 + 柔和阴影 + 细分隔线 ---------- */
.n-card {
  border-radius: 18px !important;
  border: 1px solid rgba(47, 109, 246, 0.08) !important;
  box-shadow: 0 10px 34px rgba(15, 34, 90, 0.06) !important;
  transition: box-shadow 0.28s ease, transform 0.28s ease, border-color 0.28s ease;
}
.n-card:hover {
  box-shadow: 0 16px 44px rgba(15, 34, 90, 0.10) !important;
  border-color: rgba(47, 109, 246, 0.16) !important;
  transform: translateY(-2px);
}
html.dark .n-card {
  border-color: rgba(107, 140, 255, 0.12) !important;
  box-shadow: 0 12px 38px rgba(0, 0, 0, 0.40) !important;
}
html.dark .n-card:hover {
  border-color: rgba(107, 140, 255, 0.24) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.50) !important;
}
/* 卡片头部与主体间距更舒展 */
.n-card-header {
  padding: 18px 22px 10px 22px !important;
}
.n-card__content {
  padding: 14px 22px 22px 22px !important;
}

/* ---------- 5. 按钮：圆角与主按钮光影 ---------- */
.n-button {
  border-radius: 11px !important;
  font-weight: 500;
}
.n-button--primary-type {
  background-image: linear-gradient(180deg, #4d86f8 0%, #2f6df6 100%) !important;
  box-shadow: 0 4px 14px rgba(47, 109, 246, 0.22);
  transition: box-shadow 0.25s ease, filter 0.25s ease;
}
.n-button--primary-type:hover {
  box-shadow: 0 6px 18px rgba(47, 109, 246, 0.32);
  filter: saturate(1.12) brightness(1.03);
}
html.dark .n-button--primary-type {
  background-image: linear-gradient(180deg, #7a9bff 0%, #6b8cff 100%) !important;
  box-shadow: 0 5px 18px rgba(107, 140, 255, 0.28);
}
html.dark .n-button--primary-type:hover {
  box-shadow: 0 8px 22px rgba(107, 140, 255, 0.38);
}

/* ---------- 6. 输入框 / 下拉：统一圆角 ---------- */
.n-input,
.n-base-selection,
.n-input-number,
.n-input-group {
  border-radius: 11px !important;
}

/* ---------- 7. 底部栏精修 ---------- */
.footer-divider {
  margin-top: 26px;
  opacity: 0.65;
}
.n-layout-footer .n-space,
.n-layout-footer {
  color: var(--n-text-color-3, #6b7280);
  font-size: 13px;
  letter-spacing: 0.2px;
}

/* ---------- 8. 残留色对齐品牌蓝：未读圆点 / 悬停 / 徽标 ---------- */
.mail-summary-unread-dot {
  background: #2f6df6 !important;
  box-shadow: 0 0 0 3px rgba(47, 109, 246, 0.14);
}
.mail-title-unread::before {
  background: #2f6df6 !important;
}
html.dark .mail-summary-unread-dot {
  background: #6b8cff !important;
  box-shadow: 0 0 0 3px rgba(107, 140, 255, 0.18);
}
.mail-list-compact .n-list-item:not(.overlay):hover {
  background-color: rgba(47, 109, 246, 0.055) !important;
}
html.dark .mail-list-compact .n-list-item:not(.overlay):hover {
  background-color: rgba(107, 140, 255, 0.10) !important;
}
.mail-actions .n-badge-sup {
  background: #2f6df6 !important;
}
html.dark .mail-actions .n-badge-sup {
  background: #6b8cff !important;
}

/* ---------- 9. 细腻滚动条 ---------- */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(47, 109, 246, 0.26);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(47, 109, 246, 0.42);
  border: 2px solid transparent;
  background-clip: content-box;
}
html.dark ::-webkit-scrollbar-thumb {
  background: rgba(107, 140, 255, 0.32);
  background-clip: content-box;
}

/* ---------- 10. 选中文字与焦点光晕 ---------- */
::selection {
  background: rgba(47, 109, 246, 0.18);
  color: inherit;
}
html.dark ::selection {
  background: rgba(107, 140, 255, 0.26);
}

/* ============================================================
   移动端适配
   ============================================================ */

/* 防止整页横向滚动（表格等内部已自带横向滚动容器） */
html,
body {
  overflow-x: hidden;
}

/* 动态视口高度：修复移动端地址栏导致 100vh 溢出（dvh/svh 为现代浏览器兜底） */
.side[data-v-b1e9db22],
.main[data-v-b1e9db22] {
  height: 100vh !important;
  height: 100dvh !important;
}
.mail-list-scroll[data-v-c57b1792] {
  max-height: 100vh !important;
  max-height: 100dvh !important;
  min-height: 60vh;
  min-height: 60svh;
}
.fullscreen-mail-content[data-v-bb2b36c6] {
  height: calc(100vh - 120px) !important;
  height: calc(100dvh - 120px) !important;
  min-height: calc(100vh - 120px) !important;
  min-height: calc(100dvh - 120px) !important;
}
.mail-iframe[data-v-bb2b36c6],
.fullscreen-mail-content[data-v-bb2b36c6] .mail-iframe {
  min-height: calc(100vh - 120px) !important;
  min-height: calc(100dvh - 120px) !important;
}

/* 全面屏安全区：刘海/底部 Home 条留白 */
.n-layout-header {
  padding-top: env(safe-area-inset-top, 0px) !important;
}
@media (max-width: 640px) {
  .n-layout-header {
    padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
  }
  .footer-divider {
    margin-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* 小屏：卡片与页面间距更紧凑、触控更友好 */
@media (max-width: 640px) {
  .n-card-header {
    padding: 14px 16px 8px 16px !important;
  }
  .n-card__content {
    padding: 12px 16px 16px 16px !important;
  }
  /* 主要操作按钮在手机上保证足够触控高度 */
  .n-button--primary-type,
  .n-button--primary-type.n-button--large-type {
    --n-height: 42px !important;
    --n-font-size: 15px !important;
  }
  /* 输入控件至少 16px，避免 iOS 聚焦时自动放大页面 */
  :where(input, textarea, select, [contenteditable="true"]) {
    font-size: 16px !important;
  }
  /* 列表与分页底部留出安全区间距 */
  .n-pagination {
    margin: 12px 4px 16px 4px !important;
  }
}