/**
 * qm-theme.css — 奇门遁甲时盘入口页覆盖主题
 * 美学方向：堪舆台 · 古典命理视觉语言
 * 调色：深墨底 + 宣纸白 + 朱砂红 + 古铜金
 * 仅覆盖 v1/qm.html 的 Vue 组件渲染结果，不影响其他页面
 */

/* ─── 1. CSS 变量：在 #app 作用域内定义，不污染全局 ─────────── */
#app {
  /* 主题色 */
  --qm-ink:       #0f1923;   /* 深墨底色 */
  --qm-paper:     #faf8f3;   /* 宣纸白 */
  --qm-paper-alt: #f3efe6;   /* 次级宣纸（卡片背景） */
  --qm-vermilion: #b5281e;   /* 朱砂红（主操作色） */
  --qm-vermilion-light: rgba(181,40,30,0.08);
  --qm-gold:      #a07828;   /* 古铜金（装饰/边框） */
  --qm-gold-light: rgba(160,120,40,0.18);
  --qm-text:      #1c1a16;   /* 主文本 */
  --qm-text-muted:#6b6050;   /* 辅助文本 */
  --qm-border:    rgba(160,120,40,0.28); /* 金铜边框 */
  --qm-radius:    6px;

  /* 覆盖 wot-design 卡片变量 */
  --wot-card-bg:             var(--qm-paper-alt);
  --wot-card-radius:         var(--qm-radius);
  --wot-card-shadow:         0 2px 12px rgba(15,25,35,0.10), 0 0 0 1px var(--qm-border);
  --wot-card-margin-horizontal: 8px;
  --wot-card-margin-bottom:  16px;

  /* 覆盖 tab 颜色变量 */
  --my-bg-color:       var(--qm-paper);
  --my-text-color:     var(--qm-text);
  --my-text-color-grey: var(--qm-text-muted);
  --my-border-color:   var(--qm-border);

  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Serif SC", serif;
  background: var(--qm-paper);
  min-height: 100vh;
}

/* ─── 2. 全局背景 ──────────────────────────────────────────── */
body {
  background: var(--qm-paper) !important;
}

/*
 * 核心修复：uni-page-body 被 wot-design 框架注入了暗色模式变量
 * --wot-filled-oppo 在暗色下 = #000000，wd-card / wd-button 背景都依赖它
 * 在 #app 作用域内强制重置为亮色主题值，覆盖所有黑色背景
 */
#app uni-page-body,
#app .wot-theme-dark,
#app .wot-theme-dark .wd-root-portal {
  --wot-filled-oppo:   #FFFFFFFF !important;
  --wot-card-bg:       var(--qm-paper-alt) !important;
  --wot-base-black:    #1c1a16 !important;
  --wot-text-main:     var(--qm-text) !important;
  --wot-text-secondary: var(--qm-text-muted) !important;
  --wot-border-main:   var(--qm-border) !important;
  background-color: var(--qm-paper) !important;
}

/* 覆盖 UniApp 内置 .theme-dark 的黑色背景变量 */
.theme-dark,
.theme-dark uni-page-body,
.theme-dark #app {
  background-color: var(--qm-paper) !important;
  color: var(--qm-text) !important;
  --my-bg-color: var(--qm-paper) !important;
  --my-text-color: var(--qm-text) !important;
  --my-bg-color-grey: #d4cab8 !important;
}

/* ─── 3. 顶部 Tab 栏 ───────────────────────────────────────── */
.tab_box[data-v-014d5d7f],
.theme-dark .tab_box[data-v-014d5d7f] {
  background: #f9f8eb !important;
  height: 52px !important;
  border-bottom: 2px solid var(--qm-border) !important;
}

/* tab 文字：uni-text 是自定义元素，需要穿透到 span */
.tab_item[data-v-014d5d7f],
.tab_item[data-v-014d5d7f] uni-text,
.tab_item[data-v-014d5d7f] uni-text span {
  color: var(--qm-text-muted) !important;
  font-size: 15px !important;
  letter-spacing: 1.5px;
  font-weight: 400 !important;
}

/* 激活的 tab 文字 */
uni-text.tab_item_on[data-v-014d5d7f],
uni-text.tab_item_on[data-v-014d5d7f] span {
  color: var(--qm-vermilion) !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px;
}

/* 激活指示线：朱砂红 */
uni-text.tab_item_on[data-v-014d5d7f]::after {
  border-bottom-color: var(--qm-vermilion) !important;
  border-bottom-width: 3px !important;
}

/* ─── 3b. lunar-calendar 日期面板：公历/农历 Tab ──────────── */
/* 覆盖硬编码的 #007aff 蓝色 */

.lunar-tools-tab-item[data-v-be7e8933] {
  border-color: var(--qm-gold) !important;
}

.lunar-tools-tab-item-text[data-v-be7e8933],
.lunar-tools-tab-item-text[data-v-be7e8933] span {
  color: var(--qm-gold) !important;
}

.lunar-tools-tab-item-active[data-v-be7e8933] {
  background-color: var(--qm-vermilion) !important;
  border-color: var(--qm-vermilion) !important;
}

.lunar-tools-tab-item-text-active[data-v-be7e8933],
.lunar-tools-tab-item-text-active[data-v-be7e8933] span {
  color: #fff !important;
}

.lunar-tools-btn-confirm[data-v-be7e8933] {
  color: var(--qm-vermilion) !important;
}

.lunar-tools-title-text[data-v-be7e8933] {
  color: var(--qm-text) !important;
}

.lunar-pannel[data-v-be7e8933] {
  background-color: var(--qm-paper) !important;
}

.lunar-col-selected[data-v-be7e8933] {
  background-color: var(--qm-vermilion) !important;
}

.lunar-col-current[data-v-be7e8933] {
  background-color: var(--qm-gold) !important;
}

/* ─── 4. 卡片背景：覆盖所有层级 ───────────────────────────── */
/*
 * wd-card 背景链：--wot-card-bg → --wot-filled-oppo → --wot-base-white
 * 暗色模式下 --wot-filled-oppo = #000，需要在变量和直接属性两层都覆盖
 * my-card 是宿主 custom element，.wd-card 是内部 div，两者都要覆盖
 */
#app wd-card,
#app wd-card.my-card,
#app .wd-card[data-v-fb669d6e],
#app .wd-card {
  --wot-card-bg: var(--qm-paper-alt) !important;
  --wot-filled-oppo: #FFFFFFFF !important;
  background-color: var(--qm-paper-alt) !important;
  box-shadow: 0 2px 12px rgba(15,25,35,0.08), 0 0 0 1px var(--qm-border) !important;
  border-radius: var(--qm-radius) !important;
}

/* wd-card__content 内容区：继承宣纸色背景 */
#app .wd-card__content[data-v-fb669d6e],
#app .wd-card__content {
  background-color: var(--qm-paper-alt) !important;
  color: var(--qm-text) !important;
}

/* wd-button is-primary：朱砂红，直接覆盖不走变量链 */
#app .wd-button.is-primary,
#app .wd-button.is-primary.is-medium,
#app .wd-button.is-primary.is-block {
  background: linear-gradient(135deg, var(--qm-vermilion) 0%, #8b1a12 100%) !important;
  border-color: var(--qm-vermilion) !important;
  color: #fff !important;
}

/* picker 遮罩：宣纸渐变替换白色 */
.uni-picker-view-mask {
  background-image:
    linear-gradient(180deg, rgba(243,239,230,0.97), rgba(243,239,230,0.50)),
    linear-gradient(0deg,   rgba(243,239,230,0.97), rgba(243,239,230,0.50)) !important;
}

/* picker 当前行指示线：金铜色 */
.uni-picker-view-indicator::before {
  border-top-color: var(--qm-gold) !important;
  border-top-width: 1.5px !important;
}
.uni-picker-view-indicator::after {
  border-bottom-color: var(--qm-gold) !important;
  border-bottom-width: 1.5px !important;
}

/* picker 文字颜色 */
.uni-picker-view-content > * {
  color: var(--qm-text);
  font-size: 17px;
}

/* ─── 5. 主操作按钮「开始排盘」 ────────────────────────────── */
/* wd-button type=primary */
uni-button[type=primary] {
  background: linear-gradient(135deg, var(--qm-vermilion) 0%, #8b1a12 100%) !important;
  color: #fff !important;
  border-radius: var(--qm-radius) !important;
  letter-spacing: 2px !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  height: 52px !important;
  box-shadow: 0 4px 16px rgba(181,40,30,0.32), 0 1px 4px rgba(0,0,0,0.15) !important;
  transition: opacity 0.18s, transform 0.12s !important;
  position: relative;
  overflow: hidden;
}

uni-button[type=primary]:active {
  opacity: 0.88 !important;
  transform: translateY(1px) !important;
  box-shadow: 0 2px 8px rgba(181,40,30,0.25) !important;
}

/* 排盘按钮 ripple 装饰（朱砂晕染效果） */
uni-button[type=primary]::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 120%, rgba(255,200,180,0.18) 0%, transparent 70%);
  pointer-events: none;
}

/* 次要按钮：green「下一步」 */
uni-button[type=default],
uni-button:not([type]) {
  background: var(--qm-paper) !important;
  color: var(--qm-text) !important;
  border: 1px solid var(--qm-border) !important;
  border-radius: var(--qm-radius) !important;
  font-size: 15px !important;
  box-shadow: none !important;
}

/* g-button 覆盖（自定义绿色按钮） */
/* 目标：color="#00aa00" 的「下一步」按钮 */
.g-button,
[class*="g-button"] {
  font-family: inherit !important;
  border-radius: var(--qm-radius) !important;
}

/* ─── 6. 输入框（干支输入） ────────────────────────────────── */
uni-input .uni-input-input,
uni-textarea .uni-textarea-textarea {
  color: var(--qm-text) !important;
  font-size: 16px !important;
  background: transparent !important;
}

.uni-input-placeholder,
.uni-textarea-placeholder {
  color: var(--qm-text-muted) !important;
  font-size: 15px !important;
}

/* ─── 7. 干支输入区的卡片容器 ──────────────────────────────── */
/* g-inputGZ 的外层 wd-card */
.my-card .wd-card__content[data-v-fb669d6e] {
  padding: 14px 14px !important;
}

/* 输入框行：带复制/清空图标的一行 */
.with-fun {
  display: flex;
  align-items: center;
  background: var(--qm-paper) !important;
  border: 1px solid var(--qm-border) !important;
  border-radius: var(--qm-radius) !important;
  padding: 0 12px !important;
  min-height: 44px !important;
}

/* 图标按钮 */
.uni-icon-download,
.uni-icon-trash {
  font-size: 20px !important;
  color: var(--qm-text-muted) !important;
  padding: 0 6px !important;
  cursor: pointer;
  flex-shrink: 0;
}

/* ─── 8. 单选列表（八字反查结果） ─────────────────────────── */
.uni-list-cell-pd {
  padding: 10px 4px !important;
  border-bottom: 1px solid var(--qm-border) !important;
}

.uni-list-cell-pd:last-child {
  border-bottom: none !important;
}

uni-radio .uni-radio-input {
  border-color: var(--qm-gold) !important;
}

uni-radio .uni-radio-input.uni-radio-input-checked {
  border-color: var(--qm-vermilion) !important;
  background: var(--qm-vermilion) !important;
}

/* ─── 9. 选择时间文字标签 ──────────────────────────────────── */
uni-text {
  color: var(--qm-text);
}

/* ─── 10. 滚动容器背景 ─────────────────────────────────────── */
.uni-scroll-view-content,
uni-scroll-view {
  background: var(--qm-paper) !important;
}

/* ─── 11. h-30 间距块 ──────────────────────────────────────── */
.h-30 {
  height: 30px !important;
}

/* ─── 12. 页面主容器 ───────────────────────────────────────── */
#app .global-ku-root,
#app uni-page-body,
#app > uni-view {
  background: var(--qm-paper) !important;
  min-height: 100vh;
}

/* main-box 容器 background: var(--qm-paper) !important;*/
#app .main-box {
   
}

/* ─── 13. 顶部装饰：标题区加细线 ──────────────────────────── */
#app .tab_box[data-v-014d5d7f]::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--qm-gold), transparent);
  pointer-events: none;
}

/* ─── 14. 卡片内容区域间距优化 ────────────────────────────── */
.wd-card[data-v-fb669d6e]:not(:last-child) {
  margin-bottom: 16px !important;
}

/* ─── 15. Toast / Modal ────────────────────────────────────── */
.uni-simple-toast__text {
  background: rgba(15,25,35,0.82) !important;
  border-radius: 6px !important;
  letter-spacing: 0.5px !important;
}

.uni-modal {
  border-radius: 8px !important;
  overflow: hidden !important;
}

.uni-modal__btn_primary {
  color: var(--qm-vermilion) !important;
}

/* ─── 16. 深色模式适配（跟随系统） ────────────────────────── */
@media (prefers-color-scheme: dark) {
  #app {
    --qm-paper:     #1a1714;
    --qm-paper-alt: #211e1a;
    --qm-text:      #e8e0d0;
    --qm-text-muted:#9a8e7a;
    --qm-border:    rgba(160,120,40,0.22);
  }

  body {
    background: #1a1714 !important;
  }

  .uni-picker-view-mask {
    background-image:
      linear-gradient(180deg, rgba(26,23,20,0.97), rgba(26,23,20,0.50)),
      linear-gradient(0deg,   rgba(26,23,20,0.97), rgba(26,23,20,0.50)) !important;
  }
}

/* ─── 17. 精细调整：页面整体边距 ──────────────────────────── */
#app uni-page-body > uni-view > uni-scroll-view > .uni-scroll-view-content {
  padding: 0 2px !important;
}