/*!
 * Mofang Skin for Magic UI
 * 参考智简魔方（V10）官方模板视觉重绘：
 *   - 主色 #2b7cff 亮蓝，弱化紫色渐变
 *   - 卡片 12px 圆角、细边框，hover 上浮 + 蓝色描边
 *   - 导航胶囊式菜单项、按钮实心蓝 / 浅蓝次级
 *   - 表格浅灰表头、行 hover 浅蓝
 * 仅覆盖颜色与观感，不改变任何结构与交互；加载顺序在 theme.css 之后。
 */

/* ============================================================
   1. 设计令牌（向魔方官方配色对齐）
   注意：这里绝不能写 :root —— :root 在深色模式下也命中 <html>，
   会把下方浅色值盖回 theme.css 的深色令牌（本文件加载在其后），
   导致全站夜间模式背景变白。html 恒带 data-bs-theme 属性
   （header.tpl 初始 light + theme-init.js 切换），限定属性选择器即可。
   ============================================================ */
[data-bs-theme="light"] {
  --mf-primary: #2b7cff;
  --mf-primary-2: #3f8cff;
  --mf-primary-soft: rgba(43, 124, 255, 0.10);
  --mf-bg: #f6f8fb;
  --mf-bg-grad: linear-gradient(180deg, #f7f9fd 0%, #f6f8fb 320px);
  --mf-border: #e9edf3;
  --mf-border-strong: #dbe2ec;
  --mf-radius: 12px;
  --mf-radius-sm: 8px;
  --mf-shadow: 0 1px 2px rgba(31, 45, 61, 0.04);
  --mf-shadow-sm: 0 1px 2px rgba(31, 45, 61, 0.04);
  --mf-shadow-lg: 0 12px 32px -12px rgba(43, 124, 255, 0.18);
}

[data-bs-theme="dark"] {
  --mf-primary: #4d93ff;
  --mf-primary-2: #6ea8ff;
  --mf-primary-soft: rgba(77, 147, 255, 0.16);
  --mf-border: rgba(148, 163, 184, 0.16);
  --mf-border-strong: rgba(148, 163, 184, 0.30);
}

/* ============================================================
   2. 导航（白底、胶囊菜单项、魔方蓝激活）
   ============================================================ */
.navbar-mf { --bs-navbar-padding-y: 0; min-height: 62px; box-shadow: var(--mf-shadow-sm); }
.navbar-mf .container { min-height: 62px; }
.navbar-mf .brand-name { font-weight: 700; letter-spacing: .2px; }
.navbar-mf .nav-link {
  border-radius: 8px;
  padding: .45rem .85rem;
  font-weight: 500;
  color: var(--mf-text);
  background: transparent;
}
.navbar-mf .nav-link i { opacity: .75; }
.navbar-mf .nav-link:hover,
.navbar-mf .nav-link:focus { background: var(--mf-primary-soft); color: var(--mf-primary); }
.navbar-mf .nav-link.active {
  background: var(--mf-primary);
  color: #fff;
}
.navbar-mf .nav-link.active i { opacity: 1; }

/* ============================================================
   3. 按钮（主按钮魔方蓝实心、次按钮浅蓝底）
   ============================================================ */
.btn-gradient,
.btn-primary {
  background: var(--mf-primary) !important;
  background-image: none !important;
  border-color: var(--mf-primary) !important;
  border-radius: var(--mf-radius-sm);
  font-weight: 500;
}
.btn-gradient:hover, .btn-gradient:focus,
.btn-primary:hover, .btn-primary:focus {
  background: #1f6ff0 !important;
  border-color: #1f6ff0 !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -6px rgba(43, 124, 255, 0.5);
}
.btn-soft {
  background: var(--mf-primary-soft);
  color: var(--mf-primary);
  border: 1px solid transparent;
  border-radius: var(--mf-radius-sm);
  font-weight: 500;
}
.btn-soft:hover, .btn-soft:focus {
  background: rgba(43, 124, 255, 0.16);
  color: var(--mf-primary);
}
.btn-outline-secondary, .btn-outline-primary { border-radius: var(--mf-radius-sm); }

/* ============================================================
   4. 卡片（细边框、hover 上浮蓝描边）
   ============================================================ */
.mf-card {
  border: 1px solid var(--mf-border);
  border-radius: var(--mf-radius);
  box-shadow: var(--mf-shadow);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.mf-card:hover { border-color: rgba(43, 124, 255, 0.35); }
.mf-card-head { border-bottom: 1px solid var(--mf-border); }
.mf-card-title { font-weight: 600; }

/* 产品价格卡：魔方官方模板的「居中标题 + 大蓝价 + 通栏按钮」 */
.product-card { overflow: hidden; }
.product-card:hover {
  transform: translateY(-3px);
  border-color: var(--mf-primary);
  box-shadow: var(--mf-shadow-lg);
}
.product-card h3 { text-align: center; font-weight: 600; }
.cycle-price { color: var(--mf-primary); }
.cycle-price b { font-size: 1.65rem; }

/* 周期徽章（cycle-chip）选中态用实心蓝 */
.cycle-chip {
  border: 1px solid var(--mf-border-strong);
  border-radius: var(--mf-radius-sm);
  transition: all .15s ease;
}
.cycle-chip:hover { border-color: var(--mf-primary); }
.cycle-chip.on, .cycle-chip.active {
  background: var(--mf-primary);
  border-color: var(--mf-primary);
  color: #fff;
}
.cycle-chip.on .cycle-chip-name, .cycle-chip.on .cycle-chip-time,
.cycle-chip.active .cycle-chip-name, .cycle-chip.active .cycle-chip-time { color: #fff; }

/* ============================================================
   5. 表格（浅灰表头、行 hover 浅蓝）
   ============================================================ */
.table > thead th, .table th {
  background: #f7f9fc;
  color: var(--mf-muted);
  font-weight: 600;
  border-bottom: 1px solid var(--mf-border);
}
[data-bs-theme="dark"] .table > thead th, [data-bs-theme="dark"] .table th { background: rgba(148,163,184,.08); }
.table tbody tr { transition: background .12s ease; }
.table tbody tr:hover { background: rgba(43, 124, 255, 0.045); }

/* ============================================================
   6. 侧栏（激活项浅蓝底 + 左侧蓝条）
   ============================================================ */
.side-card .nav-link, .side-menu a {
  border-radius: 8px;
  transition: all .15s ease;
}
.side-card .nav-link.active, .side-menu a.active {
  background: var(--mf-primary-soft);
  color: var(--mf-primary);
  box-shadow: inset 3px 0 0 var(--mf-primary);
}

/* ============================================================
   7. 表单（focus 蓝描边 + 外发光）
   ============================================================ */
.form-control, .form-select {
  border-radius: var(--mf-radius-sm);
  border-color: var(--mf-border-strong);
}
.form-control:focus, .form-select:focus {
  border-color: var(--mf-primary);
  box-shadow: 0 0 0 3px rgba(43, 124, 255, 0.12);
}

/* ============================================================
   8. 徽章 / 分页 / 空状态
   ============================================================ */
.badge-soft-primary { background: var(--mf-primary-soft); color: var(--mf-primary); }
.pagination { --bs-pagination-color: var(--mf-primary); --bs-pagination-active-bg: var(--mf-primary); --bs-pagination-active-border-color: var(--mf-primary); --bs-pagination-border-radius: 8px; }
.empty-state i { color: var(--mf-primary); opacity: .55; }

/* ============================================================
   9. 登录/注册卡（居中白卡、顶部品牌色细节）
   ============================================================ */
.auth-wrap .mf-card { border-top: 3px solid var(--mf-primary); }
.auth-title { font-weight: 700; }

/* ============================================================
   10. 页脚（保留深色，但把主色引用同步）
   ============================================================ */
.footer-mf a:hover, .page-footer a:hover { color: var(--mf-primary); }

/* ============================================================
   11. 深色模式修正
   ============================================================ */
[data-bs-theme="dark"] .navbar-mf .nav-link.active { background: var(--mf-primary); color: #fff; }
[data-bs-theme="dark"] .product-card:hover { border-color: var(--mf-primary); box-shadow: 0 12px 32px -14px rgba(0,0,0,.7); }