/* ============================================================================
   弹窗「取消 / 确定」统一胶囊按钮
   2026-09-25 用户要求：命理占卜 / 时空医学 两个分类下所有工具的弹窗，
   右上角「确定」、左上角「取消」都要做成**胶囊状**，且**不要阴影**
   （原来有的"确定"是实底色块、视觉上像自带阴影，一并清掉）。

   覆盖四类弹窗（它们都挂在 body 上，故用 body[data-page="chart"] 限定作用域）：
     ① 时间弹窗（公历 / 农历 / 四柱）  .rolldate-container / .shizhudate-container
     ② 单列选择弹窗（七星取穴「问题经络」等） .app-picker-modal
     ③ 地区选择弹窗                    #city-picker-modal（.city-picker-*）
     ④ layui 通用弹层按钮              .layui-layer-btn
   统一：取消 = 浅色描边胶囊；确定 = 主题色实底胶囊；两者 box-shadow / text-shadow / filter 全清零。

   ⚠️ 为什么选择器写得这么长：
   `paipan-result-info-theme.css`（由 runtime-loader **动态后插**，加载晚于本文件）
   里有 `body[data-page="chart"] .rolldate-container .rolldate-confirm{…!important}`（0,3,1），
   已经把这两颗按钮改成"纯文字"了。同带 !important 时比的是特异性，与顺序无关，
   所以这里统一加 `html` 前缀 + 双类名，把特异性抬到 (0,4,2) 以上稳赢。
   ⚠️ 别把这段挪进 paipan.css：那份表的 `?v=` 与 `component_basic_data` 的组件版本
   被多个契约测试绑定（`chart.includes('paipan.css?v=' + componentVersion)`），
   改它会一次牵动三处版本串 —— 独立成文件就是为了避免这种横扫。
   ============================================================================ */
html body[data-page="chart"] .rolldate-container .rolldate-btn.rolldate-cancel,
html body[data-page="chart"] .rolldate-container .rolldate-btn.rolldate-confirm,
html body[data-page="chart"] .shizhudate-container .shizhudate-btn.shizhudate-cancel,
html body[data-page="chart"] .shizhudate-container .shizhudate-btn.shizhudate-confirm,
html body[data-page="chart"] .app-picker-cancel,
html body[data-page="chart"] .app-picker-confirm,
html body[data-page="chart"] .city-picker-cancel,
html body[data-page="chart"] .city-picker-confirm,
html body[data-page="chart"] .layui-layer-btn .layui-layer-btn0,
html body[data-page="chart"] .layui-layer-btn .layui-layer-btn1 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    padding: 8px 16px;
    font-size: 15px;
    line-height: 1;
    border-radius: 999px !important;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    /* 用户明确要求：不要阴影 —— 阴影类属性全部显式清零 */
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
}

/* ① 时间弹窗的两颗按钮原本是 `position:absolute; top:0; height:100%` 的整高纯文字
      （微信里还有 `.rolldate-container.wx .rolldate-btn{height:150%}`），
      做成胶囊后必须自己定高并垂直居中。 */
html body[data-page="chart"] .rolldate-container .rolldate-btn.rolldate-cancel,
html body[data-page="chart"] .rolldate-container .rolldate-btn.rolldate-confirm,
html body[data-page="chart"] .shizhudate-container .shizhudate-btn.shizhudate-cancel,
html body[data-page="chart"] .shizhudate-container .shizhudate-btn.shizhudate-confirm {
    position: absolute;
    top: 50%;
    height: auto !important;
    transform: translateY(-50%);
}
/* 原来 left:0 / right:0 是贴边的纯文字，做成胶囊会顶到面板边 → 左右各留 10px。
   ⚠️ 尺寸也要比其它弹窗小一档：时间弹窗面板宽 328px（居中），中间「公历 / 农历 / 四柱」
      三个切换按钮占 180px，左右各只剩约 73px。360 宽下若用 64px 宽的大胶囊会压住
      中间那组 3px（实测），所以这里收成 14px 字 + 13px 内距（约 56px 宽）。 */
html body[data-page="chart"] .rolldate-container .rolldate-btn.rolldate-cancel,
html body[data-page="chart"] .rolldate-container .rolldate-btn.rolldate-confirm,
html body[data-page="chart"] .shizhudate-container .shizhudate-btn.shizhudate-cancel,
html body[data-page="chart"] .shizhudate-container .shizhudate-btn.shizhudate-confirm {
    min-width: 52px;
    padding: 7px 13px !important;
    font-size: 14px;
}
html body[data-page="chart"] .rolldate-container .rolldate-btn.rolldate-cancel,
html body[data-page="chart"] .shizhudate-container .shizhudate-btn.shizhudate-cancel {
    left: 10px !important;
    right: auto !important;
}
html body[data-page="chart"] .rolldate-container .rolldate-btn.rolldate-confirm,
html body[data-page="chart"] .shizhudate-container .shizhudate-btn.shizhudate-confirm {
    left: auto !important;
    right: 10px !important;
}

/* 取消：浅色描边胶囊 */
html body[data-page="chart"] .rolldate-container .rolldate-btn.rolldate-cancel,
html body[data-page="chart"] .shizhudate-container .shizhudate-btn.shizhudate-cancel,
html body[data-page="chart"] .app-picker-cancel,
html body[data-page="chart"] .city-picker-cancel,
html body[data-page="chart"] .layui-layer-btn .layui-layer-btn1 {
    color: var(--muted, #6d716d) !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 1px solid rgba(32, 35, 33, 0.18) !important;
}

/* 确定：主题色实底胶囊（无阴影） */
html body[data-page="chart"] .rolldate-container .rolldate-btn.rolldate-confirm,
html body[data-page="chart"] .shizhudate-container .shizhudate-btn.shizhudate-confirm,
html body[data-page="chart"] .app-picker-confirm,
html body[data-page="chart"] .city-picker-confirm,
html body[data-page="chart"] .layui-layer-btn .layui-layer-btn0 {
    color: #fff !important;
    background: var(--cinnabar, #b94132) !important;
    background-color: var(--cinnabar, #b94132) !important;
    background-image: none !important;
    border: 1px solid var(--cinnabar, #b94132) !important;
    font-weight: 600;
}

/* 暗色模式：描边与灰字要反过来变浅，否则深色底上根本看不见 */
html.dark body[data-page="chart"] .rolldate-container .rolldate-btn.rolldate-cancel,
html.dark body[data-page="chart"] .shizhudate-container .shizhudate-btn.shizhudate-cancel,
html.dark body[data-page="chart"] .app-picker-cancel,
html.dark body[data-page="chart"] .city-picker-cancel,
html.dark body[data-page="chart"] .layui-layer-btn .layui-layer-btn1 {
    color: #a9b0aa !important;
    border-color: rgba(233, 236, 233, 0.26) !important;
}

/*
   窄屏弹窗修复：动作按钮的胶囊宽度包含了左右内距，若仍允许默认
   中文断行，内容区只剩一个字的宽度时「取消 / 确定」会被拆成上下两行。
   这些按钮只承载短动作文字，必须保持横向且不能被 flex 压缩。
   标题则占用两颗按钮之间的剩余空间，长标题仍可正常换行。
*/
html body[data-page="chart"] .app-picker-header {
    gap: 8px;
}

html body[data-page="chart"] .app-picker-header > .app-picker-cancel,
html body[data-page="chart"] .app-picker-header > .app-picker-confirm {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 60px !important;
    white-space: nowrap !important;
    writing-mode: horizontal-tb !important;
    -webkit-writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    word-wrap: normal !important;
}

html body[data-page="chart"] .app-picker-header > .app-picker-title {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    text-align: center !important;
    writing-mode: horizontal-tb !important;
    -webkit-writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
}

/* 同一组约束覆盖日期、地区及 layui 通用弹层按钮，避免其它弹窗出现同样的
   单字竖排。日期按钮的定位规则仍由上面的专用规则负责。 */
html body[data-page="chart"] .rolldate-container .rolldate-btn,
html body[data-page="chart"] .shizhudate-container .shizhudate-btn,
html body[data-page="chart"] .city-picker-cancel,
html body[data-page="chart"] .city-picker-confirm,
html body[data-page="chart"] .layui-layer-btn .layui-layer-btn0,
html body[data-page="chart"] .layui-layer-btn .layui-layer-btn1 {
    white-space: nowrap !important;
    writing-mode: horizontal-tb !important;
    -webkit-writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    word-wrap: normal !important;
    flex-shrink: 0 !important;
}