/* =============================================================
   Xboard (cedar2025)  •  Fluent2 主题  v1.1  (bug-fix)
   Windows 11 / Fluent 2  (Mica + 亚克力 + Fluent 蓝)
   作者: weige2008
   -----------------------------------------------------------
   v1.1 修复:
   - 移除 .n-card overflow:hidden(内容被裁切) 与强制 color(破坏公告白字)
   - 修正选中菜单残留 NaiveUI teal -> Fluent 蓝
   - 标签蓝底蓝字对比过低 -> 加深文字
   ============================================================= */

.xb-theme-fluent2 {
  --fl-primary: #0078D4;
  --fl-primary-hover: #106EBE;
  --fl-primary-active: #005A9E;
  --fl-primary-soft: rgba(0,120,212,.12);
  --fl-primary-soft-2: rgba(0,120,212,.10);
  --fl-accent-2: #60CDFF;
  --fl-success: #107C10;
  --fl-warning: #F7630C;
  --fl-danger: #C50F1F;
  --fl-text: rgba(0,0,0,.90);
  --fl-text-2: rgba(0,0,0,.60);
  --fl-text-3: rgba(0,0,0,.45);
  --fl-bg-1: #ECECEC; --fl-bg-2: #F4F6FA; --fl-bg-3: #EAEEF3;
  --fl-acrylic-bg: rgba(252,252,252,.72);
  --fl-acrylic-blur: saturate(140%) blur(40px);
  --fl-stroke: rgba(0,0,0,.06);
  --fl-stroke-strong: rgba(0,0,0,.10);
  --fl-highlight: rgba(255,255,255,.70);
  --fl-shadow-2: 0 1px 2px rgba(0,0,0,.10), 0 0 1px rgba(0,0,0,.06);
  --fl-shadow-4: 0 2px 4px rgba(0,0,0,.08), 0 0 2px rgba(0,0,0,.06);
  --fl-shadow-8: 0 4px 8px rgba(0,0,0,.10), 0 0 2px rgba(0,0,0,.06);
  --fl-shadow-16: 0 8px 16px rgba(0,0,0,.12), 0 0 2px rgba(0,0,0,.08);
  --fl-shadow-64: 0 24px 48px rgba(0,0,0,.20), 0 0 8px rgba(0,0,0,.08);
  --fl-radius-sm: 4px; --fl-radius: 6px; --fl-radius-lg: 8px; --fl-radius-xl: 12px;
  --fl-ease: cubic-bezier(0.1,0.9,0.2,1);
}

/* ---------- 全局 / 字体 / Mica ---------- */
.xb-theme-fluent2 {
  font-family: "Segoe UI Variable","Segoe UI","Microsoft YaHei UI",-apple-system,
    BlinkMacSystemFont,"PingFang SC","Helvetica Neue",Arial,sans-serif !important;
  color: var(--fl-text);
  background: var(--fl-bg-1);
}
.xb-theme-fluent2 body,
.xb-theme-fluent2 #app {
  min-height: 100vh;
  color: var(--fl-text);
  background:
    radial-gradient(1200px 800px at 8% -10%, rgba(96,205,255,.10), transparent 60%),
    radial-gradient(1100px 700px at 110% 0%, rgba(0,120,212,.10), transparent 55%),
    radial-gradient(900px 700px at 50% 120%, rgba(135,100,220,.08), transparent 60%),
    linear-gradient(160deg, var(--fl-bg-2) 0%, var(--fl-bg-1) 45%, var(--fl-bg-3) 100%);
  background-attachment: fixed;
}
#fluent-mica {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 600px at var(--mx,12%) var(--my,8%), rgba(96,205,255,.14), transparent 60%),
    radial-gradient(820px 560px at 92% 4%, rgba(0,120,212,.16), transparent 58%),
    radial-gradient(760px 620px at 70% 112%, rgba(150,110,230,.12), transparent 60%),
    linear-gradient(160deg,#F5F7FB,#ECECEC 50%,#E7ECF2);
  filter: saturate(108%);
  transition: background 1.2s var(--fl-ease);
}

/* ---------- 布局 ---------- */
.xb-theme-fluent2 .n-layout { background: transparent !important; --n-color: transparent !important; }
.xb-theme-fluent2 .n-layout-sider,
.xb-theme-fluent2 .n-layout-header {
  background: var(--fl-acrylic-bg) !important;
  -webkit-backdrop-filter: var(--fl-acrylic-blur); backdrop-filter: var(--fl-acrylic-blur);
}
.xb-theme-fluent2 .n-layout-sider { border-right: 1px solid var(--fl-stroke); box-shadow: inset -1px 0 0 var(--fl-highlight); }
.xb-theme-fluent2 .n-layout-header { border-bottom: 1px solid var(--fl-stroke); box-shadow: inset 0 -1px 0 var(--fl-highlight); }
/* app 自带 <header class="bg-white">: 覆盖为亚克力 */
.xb-theme-fluent2 header.bg-white {
  background: var(--fl-acrylic-bg) !important;
  -webkit-backdrop-filter: var(--fl-acrylic-blur); backdrop-filter: var(--fl-acrylic-blur);
  border-bottom: 1px solid var(--fl-stroke);
  box-shadow: inset 0 -1px 0 var(--fl-highlight);
}
.xb-theme-fluent2 .n-layout-scroll-container { background: transparent !important; }

/* ---------- 菜单 ---------- */
.xb-theme-fluent2 .n-menu { background: transparent !important; --n-color: transparent !important; }
.xb-theme-fluent2 .n-menu-item-content {
  border-radius: var(--fl-radius) !important; margin: 2px 8px !important;
  color: var(--fl-text) !important; background: transparent !important;
  transition: background 160ms var(--fl-ease), color 160ms var(--fl-ease) !important;
}
/* 关键: 菜单文字在 .n-menu-item-content-header 内,需单独着色 */
.xb-theme-fluent2 .n-menu-item-content-header,
.xb-theme-fluent2 .n-menu-item-content-header__title,
.xb-theme-fluent2 .n-menu-item-content__icon { color: var(--fl-text-2) !important; }
.xb-theme-fluent2 .n-menu-item-content:hover .n-menu-item-content-header,
.xb-theme-fluent2 .n-menu-item-content:hover .n-menu-item-content-header__title {
  color: var(--fl-primary) !important;
}
.xb-theme-fluent2 .n-menu-item-content:hover {
  background: var(--fl-primary-soft) !important;
}
.xb-theme-fluent2 .n-menu-item-content--selected,
.xb-theme-fluent2 .n-menu-item-content--child-active {
  background: var(--fl-primary-soft) !important; font-weight: 600;
  box-shadow: inset 2px 0 0 var(--fl-primary);
}
/* 选中项文字/图标 -> Fluent 蓝(覆盖 NaiveUI teal) */
.xb-theme-fluent2 .n-menu-item-content--selected .n-menu-item-content-header,
.xb-theme-fluent2 .n-menu-item-content--selected .n-menu-item-content-header__title,
.xb-theme-fluent2 .n-menu-item-content--selected .n-menu-item-content__icon,
.xb-theme-fluent2 .n-menu-item-content--child-active .n-menu-item-content-header,
.xb-theme-fluent2 .n-menu-item-content--child-active .n-menu-item-content__icon {
  color: var(--fl-primary) !important;
}
.xb-theme-fluent2 .n-menu-item-content--selected::before { display: none !important; }

/* ---------- 卡片(亚克力) —— 注意:不再设 overflow:hidden 与强制 color ---------- */
.xb-theme-fluent2 .n-card {
  background: var(--fl-acrylic-bg) !important;
  -webkit-backdrop-filter: var(--fl-acrylic-blur); backdrop-filter: var(--fl-acrylic-blur);
  border: 1px solid var(--fl-stroke) !important;
  border-radius: var(--fl-radius-lg) !important;
  box-shadow: var(--fl-shadow-4), inset 0 1px 0 var(--fl-highlight) !important;
  transition: transform 200ms var(--fl-ease), box-shadow 200ms var(--fl-ease), border-color 200ms var(--fl-ease) !important;
}
.xb-theme-fluent2 .n-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--fl-shadow-16), inset 0 1px 0 var(--fl-highlight) !important;
  border-color: var(--fl-stroke-strong) !important;
}
.xb-theme-fluent2 .n-card-header__main { font-weight: 600; }

/* ---------- 按钮 ---------- */
.xb-theme-fluent2 .n-button {
  height: 36px !important; border-radius: var(--fl-radius) !important; font-weight: 600 !important;
  color: var(--fl-text) !important;
  background: rgba(255,255,255,.60) !important;
  border: 1px solid var(--fl-stroke-strong) !important;
  box-shadow: var(--fl-shadow-2), inset 0 1px 0 var(--fl-highlight) !important;
  transition: background 150ms var(--fl-ease), border-color 150ms var(--fl-ease), box-shadow 150ms var(--fl-ease), transform 120ms var(--fl-ease) !important;
}
.xb-theme-fluent2 .n-button:hover {
  background: rgba(255,255,255,.85) !important; border-color: rgba(0,0,0,.20) !important;
  box-shadow: var(--fl-shadow-4), inset 0 1px 0 var(--fl-highlight) !important;
}
.xb-theme-fluent2 .n-button:active { transform: translateY(1px); }
.xb-theme-fluent2 .n-button.n-button--primary-type,
.xb-theme-fluent2 .n-button.n-button--info-type {
  background: var(--fl-primary) !important; border-color: var(--fl-primary) !important; color: #fff !important;
  box-shadow: var(--fl-shadow-2) !important;
}
.xb-theme-fluent2 .n-button.n-button--primary-type:hover,
.xb-theme-fluent2 .n-button.n-button--info-type:hover {
  background: var(--fl-primary-hover) !important; border-color: var(--fl-primary-hover) !important;
  box-shadow: var(--fl-shadow-8) !important;
}
.xb-theme-fluent2 .n-button.n-button--success-type { background: var(--fl-success) !important; border-color: var(--fl-success) !important; color:#fff !important; }
.xb-theme-fluent2 .n-button.n-button--warning-type { background: var(--fl-warning) !important; border-color: var(--fl-warning) !important; color:#fff !important; }
.xb-theme-fluent2 .n-button.n-button--error-type   { background: var(--fl-danger)  !important; border-color: var(--fl-danger)  !important; color:#fff !important; }

/* ---------- 输入 ---------- */
.xb-theme-fluent2 .n-input,
.xb-theme-fluent2 .n-input-wrapper,
.xb-theme-fluent2 .n-base-selection {
  background: rgba(255,255,255,.72) !important;
  border-radius: var(--fl-radius) !important;
  border: 1px solid var(--fl-stroke-strong) !important;
  transition: border-color 150ms var(--fl-ease), box-shadow 150ms var(--fl-ease), background 150ms var(--fl-ease) !important;
}
.xb-theme-fluent2 .n-input:hover,
.xb-theme-fluent2 .n-base-selection:hover { border-color: var(--fl-primary) !important; }
.xb-theme-fluent2 .n-input--focus,
.xb-theme-fluent2 .n-base-selection--focus,
.xb-theme-fluent2 .n-base-selection:focus-within {
  border-color: var(--fl-primary) !important; box-shadow: 0 0 0 1px var(--fl-primary) !important; background: #fff !important;
}
.xb-theme-fluent2 .n-switch.n-switch--active { background: var(--fl-primary) !important; }
.xb-theme-fluent2 .n-checkbox-box.n-checkbox-box--checked { background: var(--fl-primary) !important; border-color: var(--fl-primary) !important; }
.xb-theme-fluent2 .n-radio--checked .n-radio__dot { background: var(--fl-primary) !important; border-color: var(--fl-primary) !important; }

/* ---------- 表格 ---------- */
.xb-theme-fluent2 .n-data-table { background: transparent !important; border-radius: var(--fl-radius-lg) !important; }
.xb-theme-fluent2 .n-data-table-thead { background: rgba(0,0,0,.02) !important; }
.xb-theme-fluent2 .n-data-table-th { background: transparent !important; color: var(--fl-text-2) !important; font-weight: 600 !important; border-bottom: 1px solid var(--fl-stroke-strong) !important; }
.xb-theme-fluent2 .n-data-table-td { border-bottom: 1px solid var(--fl-stroke) !important; background: rgba(255,255,255,.45) !important; }
.xb-theme-fluent2 .n-data-table-tr:hover .n-data-table-td { background: var(--fl-primary-soft) !important; }

/* ---------- 模态 ---------- */
.xb-theme-fluent2 .n-modal .n-card,
.xb-theme-fluent2 .n-modal-container .n-card {
  background: var(--fl-acrylic-bg) !important;
  -webkit-backdrop-filter: var(--fl-acrylic-blur); backdrop-filter: var(--fl-acrylic-blur);
  border: 1px solid var(--fl-stroke) !important; border-radius: var(--fl-radius-xl) !important;
  box-shadow: var(--fl-shadow-64), inset 0 1px 0 var(--fl-highlight) !important;
}
.xb-theme-fluent2 .n-modal-mask { background: rgba(0,0,0,.30) !important; }
.xb-theme-fluent2 .n-dialog { background: var(--fl-acrylic-bg) !important; -webkit-backdrop-filter: var(--fl-acrylic-blur); backdrop-filter: var(--fl-acrylic-blur); border-radius: var(--fl-radius-xl) !important; box-shadow: var(--fl-shadow-64) !important; }

/* ---------- 标签页 ---------- */
.xb-theme-fluent2 .n-tabs-tab { color: var(--fl-text-2) !important; font-weight: 600 !important; }
.xb-theme-fluent2 .n-tabs-tab--active { color: var(--fl-primary) !important; }
.xb-theme-fluent2 .n-tabs-bar { background: var(--fl-primary) !important; height: 3px !important; border-radius: 2px !important; }

/* ---------- 标签 / 进度 —— 加深文字以提升对比 ---------- */
.xb-theme-fluent2 .n-tag {
  border-radius: var(--fl-radius-sm) !important;
  background: rgb(225, 240, 252) !important;
  color: var(--fl-primary-active) !important;
  font-weight: 600 !important; border: 1px solid transparent !important;
}
.xb-theme-fluent2 .n-tag.n-tag--success-type { background: rgb(222, 240, 222) !important; color: #0B6E0B !important; }
.xb-theme-fluent2 .n-tag.n-tag--error-type   { background: rgb(248, 222, 226) !important; color: #A30D1B !important; }
.xb-theme-fluent2 .n-tag.n-tag--warning-type { background: rgb(252, 232, 214) !important; color: #C44A06 !important; }
.xb-theme-fluent2 .n-progress .n-progress-graph-line-fill { background: var(--fl-primary) !important; }
.xb-theme-fluent2 .n-badge .n-badge-sup { background: var(--fl-danger) !important; }

/* ---------- 分页 / 下拉 ---------- */
.xb-theme-fluent2 .n-pagination-item,
.xb-theme-fluent2 .n-pagination .n-button { background: rgba(255,255,255,.55) !important; border: 1px solid var(--fl-stroke-strong) !important; border-radius: var(--fl-radius) !important; }
.xb-theme-fluent2 .n-pagination-item--active { border-color: var(--fl-primary) !important; color: var(--fl-primary) !important; background: var(--fl-primary-soft) !important; }
.xb-theme-fluent2 .n-base-select-menu,
.xb-theme-fluent2 .n-dropdown-menu,
.xb-theme-fluent2 .n-popover,
.xb-theme-fluent2 .n-popselect-menu {
  background: var(--fl-acrylic-bg) !important;
  -webkit-backdrop-filter: var(--fl-acrylic-blur); backdrop-filter: var(--fl-acrylic-blur);
  border: 1px solid var(--fl-stroke) !important; border-radius: var(--fl-radius-lg) !important; box-shadow: var(--fl-shadow-16) !important;
}
.xb-theme-fluent2 .n-base-select-option--selected,
.xb-theme-fluent2 .n-base-select-option:hover,
.xb-theme-fluent2 .n-dropdown-option:hover,
.xb-theme-fluent2 .n-dropdown-option--selected { background: var(--fl-primary-soft) !important; color: var(--fl-primary) !important; }

/* ---------- 滚动条 / 选区 / 链接 ---------- */
.xb-theme-fluent2 ::-webkit-scrollbar { width: 10px; height: 10px; }
.xb-theme-fluent2 ::-webkit-scrollbar-track { background: transparent; }
.xb-theme-fluent2 ::-webkit-scrollbar-thumb { background: rgba(0,0,0,.22); border: 3px solid transparent; background-clip: content-box; border-radius: 999px; }
.xb-theme-fluent2 ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.40); background-clip: content-box; }
.xb-theme-fluent2 ::selection { background: var(--fl-primary); color: #fff; }
.xb-theme-fluent2 a { color: var(--fl-primary); }
.xb-theme-fluent2 a:hover { color: var(--fl-primary-hover); }

/* 深色侧栏(theme_color=black/darkblue) */
.xb-theme-fluent2.xb-fl-dark .n-layout-sider { background: rgba(32,32,32,.80) !important; }
.xb-theme-fluent2.xb-fl-dark .n-layout-sider .n-menu-item-content-header,
.xb-theme-fluent2.xb-fl-dark .n-layout-sider .n-menu-item-content__icon { color: rgba(255,255,255,.85) !important; }
.xb-theme-fluent2.xb-fl-dark .n-layout-sider .n-menu-item-content:hover { background: rgba(255,255,255,.08) !important; }
.xb-theme-fluent2.xb-fl-dark .n-layout-sider .n-menu-item-content--selected { background: rgba(0,120,212,.30) !important; }

@media (max-width: 768px) {
  .xb-theme-fluent2 .n-card { border-radius: var(--fl-radius) !important; }
  .xb-theme-fluent2 .n-button { height: 34px !important; }
}

/* Xboard 登录页在窄屏下的 max-w-md 卡片会按内容最小宽度溢出。 */
@media (max-width: 600px) {
  .xb-theme-fluent2 #app > .n-config-provider > .wh-full.flex.items-center.justify-center > .n-card.max-w-md {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
  }

  .xb-theme-fluent2 #app > .n-config-provider > .wh-full.flex.items-center.justify-center > .n-card.max-w-md .n-card__content,
  .xb-theme-fluent2 #app > .n-config-provider > .wh-full.flex.items-center.justify-center > .n-card.max-w-md .p-6 {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .xb-theme-fluent2 #app > .n-config-provider > .wh-full.flex.items-center.justify-center > .n-card.max-w-md .p-6 {
    padding: 20px !important;
  }

  .xb-theme-fluent2 #app > .n-config-provider > .wh-full.flex.items-center.justify-center > .n-card.max-w-md .justify-between {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
}