/* style_mobile.css - 钦定奇门遁甲系统 移动端响应式样式 */

@media screen and (max-width: 768px) {
    /* 第一层框架（最外层容器）：将左右边距压到最小，释放最大宽度 */
    .container {
        padding: 0 2px !important;
    }
    
    .top-control-bar {
        padding: 6px 8px;
        flex-wrap: wrap;
        gap: 6px;
    }
    .control-group-left, .control-group-right {
        width: 100%;
        justify-content: space-between;
    }
    .qm-select {
        flex: 1;
        font-size: 13px !important;
        height: 32px !important;
        line-height: 32px !important;
        padding: 0 12px 0 4px;
    }

    /* 第二层框架（核心排盘展示区）：清除电脑端的 15px 大内边距，彻底打通宽度限制 */
    #qimenCoreDisplayArea, .qimen-fp-display {
        padding: 8px 4px 16px 4px !important;
        border-radius: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 第三层框架（顶部四柱框、文字汇总框、九宫八卦框）：统一 100% 宽度，完美对齐 */
    .qimen-grid,
    .qimen-bazi-stepper,
    .qimen-info-box {
        width: 100% !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 九宫格整体宽度与高度放大，最小化间隙 */
    .qimen-grid {
        max-width: 100% !important;
        aspect-ratio: 1 / 1 !important;
        gap: 2px !important;
        margin-bottom: 10px !important;
    }
    
    .palace-cell {
        padding: 4px 3px !important;
        border-radius: 4px;
    }

    /* 🛡️ 核心调整：将九宫格主体文字（八神、九星、八门、地盘八神、天地盘干）增大至 14px，与上方值符/值使/旬首文字大小一致 */
    .cell-deity-tian, 
    .cell-star, 
    .cell-door, 
    .stem-dipan-shen,
    .stem-tian, 
    .stem-di {
        font-size: 14px !important;
    }

    /* 确保门迫、星门、地假等标识和文字绝不竖排换行 */
    .cell-door-box {
        flex-wrap: nowrap !important;
    }
    .badge-tag-pattern, .badge-tag {
        white-space: nowrap !important;
    }

    .cell-top-badges {
        gap: 1px !important;
    }

    /* 移动端四柱调节栏样式优化 */
    .qimen-bazi-stepper {
        padding: 8px 2px !important;
        gap: 4px;
        margin-bottom: 8px !important;
    }
    .pillar-box {
        flex: 1;
        padding: 0 2px;
    }
    .pillar-value-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 3px !important;
        margin: 4px 0 !important;
    }
    .pillar-value-row a:first-child {
        order: 3 !important; 
    }
    .pillar-value-row .val {
        order: 2 !important; 
        font-size: 16px !important;
    }
    .pillar-value-row a:last-child {
        order: 1 !important; 
    }
    .pillar-value-row .step-btn {
        width: 100% !important;
        max-width: 32px;
        height: 20px !important;
        line-height: 18px !important;
        font-size: 10px !important;
    }

    /* 移动端弹窗尺寸优化 */
    .qm-modal-card {
        max-width: 95% !important;
        margin: 10px;
        max-height: 85vh;
    }
    .qm-modal-body {
        padding: 12px;
    }

    /* 移动端选时弹窗表单整体结构 */
    .query-box .form-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }
    
    .query-box .form-label {
        font-size: 13px;
        color: var(--qm-gold);
        margin-bottom: 2px;
        font-weight: bold;
    }

    .query-box .form-control {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .query-box .input-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        width: 100% !important;
        gap: 6px !important;
        box-sizing: border-box;
    }

    .query-box.solar-box .form-control input[type="date"] {
        width: 100% !important;
        height: 32px !important;
        font-size: 13px !important;
    }
    .query-box.solar-box .form-control select {
        width: 100% !important;
        height: 32px !important;
        font-size: 13px !important;
    }

    .query-box input[type="text"],
    .query-box input[type="number"],
    .query-box select,
    .query-box .input-item input:not([type="checkbox"]),
    .query-box .input-item select {
        flex: 1 !important;
        width: auto !important;
        height: 32px !important;
        font-size: 13px !important;
        padding: 2px 4px !important;
        box-sizing: border-box !important;
        text-align: center !important;
        border: 1px solid #ccc !important;
        border-radius: 4px !important;
        background: #fff !important;
    }

    .query-box .input-item span,
    .query-box .form-control > span {
        font-size: 13px !important;
        color: var(--qm-gold) !important;
        font-weight: bold;
        flex: none !important;
        width: 24px;
        text-align: left;
        white-space: nowrap;
    }

    .query-box .input-item label {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        height: 32px !important;
        padding: 0 10px !important;
        background: #fdf8f0 !important;
        border: 1px solid var(--qm-border) !important;
        border-radius: 4px !important;
        font-size: 13px !important;
        color: #d32f2f !important;
        box-sizing: border-box !important;
        cursor: pointer;
        flex: none !important;
    }

    .query-box .qm-btn,
    .query-box button[type="submit"] {
        width: 100% !important;
        height: 36px !important;
        margin-top: 4px !important;
        font-size: 14px !important;
        font-weight: bold;
        border-radius: 6px !important;
    }

    .settings-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .settings-grid label {
        padding: 10px 12px;
        font-size: 14px;
    }
}


/* 🛡️ 新增：手机端宫格详情面板适配 */
    .palace-detail-panel {
        max-width: 100% !important;
        margin-top: 8px !important;
        padding: 12px !important;
    }

    .detail-tabs {
        margin-bottom: 10px !important;
    }

    .detail-tab-btn {
        font-size: 13px !important;
        padding: 5px 8px !important;
    }

    .detail-sec-title {
        font-size: 13px !important;
    }

    .detail-sec-body {
        font-size: 12.5px !important;
        padding: 6px 8px !important;
    }
    
    
    /* =========================================
   自定义模拟下拉框样式 - 手机端触屏适配年命
   ========================================= */
.qm-custom-select {
    -webkit-tap-highlight-color: transparent; /* 去除手机端点击时自带的灰色/蓝色半透明高亮 */
}

.qm-select-options div {
    padding: 12px 0; /* 手机端适当增大上下内边距，扩大触摸面积防止误触 */
    font-size: 15px; /* 字体稍微放大，方便阅读 */
}

/* 手机端取消 hover，改用 active (手指按住时) 的状态反馈 */
.qm-select-options div:active { 
    background: #fdf8f0; 
    color: var(--qm-red, #8c1b1b); 
    font-weight: bold; 
}


/* =========================================
   高级搜局弹窗 (手机端适配)
   ========================================= */
.search-modal-card { width: 95% !important; margin: 10px auto; }
.search-modal-body { padding: 12px 10px !important; }

.search-section { padding: 10px; margin-bottom: 12px; }
.search-section .sec-title { font-size: 14px; }

/* 手机时间下拉缩窄 */
.time-row { flex-wrap: wrap; }
.time-row select { width: calc(50% - 20px) !important; margin-bottom: 5px; }

/* 网格改为单列 */
.grid-form-3, .grid-form-2 { grid-template-columns: 1fr; gap: 10px; }

/* 宫位胶囊布局换行适配 */
.palace-cb-row { flex-direction: column; margin-bottom: 12px; border-bottom: 1px dashed #eee; padding-bottom: 8px;}
.palace-cb-row .cb-label { width: 100%; margin-bottom: 6px; }
.pill-cb span { padding: 6px 14px; font-size: 13px; }

.search-submit-btn { width: 100%; border-radius: 8px; }


/* =========================================
   搜局弹窗：手机端时间双列带外框卡片布局
   ========================================= */
@media screen and (max-width: 768px) {
    /* 容器设为左右双列 */
    .search-time-group { 
        display: flex !important; 
        flex-direction: row !important; 
        gap: 10px !important; 
        justify-content: space-between !important; 
    }

    /* 左右独立边框卡片 */
    .s-time-row { 
        flex: 1 !important; 
        display: flex !important; 
        flex-direction: column !important; 
        border: 1px solid #dcdfe6 !important; 
        border-radius: 8px !important; 
        padding: 10px 8px !important; 
        background: #fafbfd !important; 
        box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important;
    }

    /* 卡片顶部的“起”与“止”标头 */
    .s-time-label { 
        width: 100% !important; 
        text-align: center !important; 
        font-size: 15px !important; 
        font-weight: bold !important; 
        color: #1e50a2 !important; 
        border-bottom: 1px dashed #dcdfe6 !important; 
        margin-bottom: 10px !important; 
        padding-bottom: 6px !important; 
        height: auto !important; 
    }

    /* 内部时间项纵向排列 */
    .s-time-items { 
        display: flex !important; 
        flex-direction: column !important; 
        gap: 8px !important; 
        width: 100% !important; 
    }

    /* 单行：下拉框 + 单位文字 */
    .s-t-item { 
        display: flex !important; 
        flex-direction: row !important; 
        align-items: center !important; 
        justify-content: space-between !important; 
        width: 100% !important; 
        font-size: 13px !important; 
        color: #555 !important; 
    }

    /* 手机端下拉框满宽居中 */
    .s-t-item select { 
        flex: 1 !important; 
        height: 34px !important; 
        margin-right: 4px !important; 
        padding: 0 4px !important; 
        text-align: center !important; 
        width: auto !important; 
        border-radius: 4px !important; 
        border: 1px solid #dcdfe6 !important; 
        font-size: 13px !important;
    }

    .s-t-item span {
        flex-shrink: 0 !important;
        font-weight: bold !important;
        color: #666 !important;
    }
}


/* ===== 搜局：移动端样式深度优化 ===== */
@media screen and (max-width: 768px) {
    
    /* 1. 修复局数选择框：强制加高、字号加大、防止被系统压扁 */
    #s_ju_type {
        height: 32px !important;
        min-height: 32px !important;
        font-size: 14px !important;
        padding: 0 12px !important;
        line-height: normal !important;
    }

    /* 2. 修复吉凶格双列：智能缩小字号和间距，强制绝对不换行 */
    .pattern-list-container {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* 保持双列 */
        gap: 12px 6px !important; /* 缩小列间距，为文字腾出空间 */
        padding: 12px 8px !important; /* 缩小左右内边距 */
        height: 180px !important; /* 列表微调加高，视野更好 */
    }

    .pattern-list-container .pattern-list-item {
        margin-bottom: 0 !important;
        font-size: 12.5px !important; /* 缩小移动端字号，确保一行能放下 */
        gap: 4px !important; /* 缩小复选框和文字之间的距离 */
        align-items: center !important; /* 让复选框和文字完美垂直居中对齐 */
    }
    
    /* 强制文字只在一行显示，超出极长部分自动变省略号 */
    .pattern-list-container .pattern-list-item span {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* 微调复选框大小，配合小字号 */
    .pattern-list-container .pattern-list-item input[type="checkbox"] {
        margin-top: 0 !important;
        width: 14px !important;
        height: 14px !important;
        flex-shrink: 0 !important;
    }
}