/**
 * 移动端大字体布局修复样式
 * 针对系统字体设置过大导致的布局问题提供解决方案
 */

/* ========================================
   全局字体大小控制
   ======================================== */

/* 禁用文本缩放，保持布局稳定 */
* {
    -webkit-text-size-adjust: 100% !important;
    -moz-text-size-adjust: 100% !important;
    -ms-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
}

/* 强制使用标准字体大小 */
html {
    font-size: 16px !important;
    font-size: clamp(14px, 16px, 18px) !important;
}

body {
    font-size: 16px !important;
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* ========================================
   表格样式修复
   ======================================== */

/* 所有表格基础样式 */
table {
    table-layout: fixed !important;
    width: 100% !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    font-size: inherit !important;
}

/* 表格单元格修复 */
td, th {
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    hyphens: auto !important;
}

/* 九宫格表格特殊处理 */
#table3 {
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto !important;
    table-layout: fixed !important;
}

#table3 td {
    font-size: 15px !important;
    line-height: 1.4 !important;
    padding: 4px 3px !important;
    vertical-align: middle !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    height: auto !important;
    min-height: 55px !important;
}

/* ========================================
   输入控件修复
   ======================================== */

/* 所有输入控件 */
input, select, textarea, button {
    font-size: 15px !important;
    line-height: 1.5 !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
}

/* 下拉框特殊处理 */
select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-size: 12px !important;
}

select option {
    font-size: 14px !important;
    padding: 5px !important;
}

/* ========================================
   按钮修复
   ======================================== */

.customer-btn, button {
    font-size: 14px !important;
    line-height: 1.4 !important;
    padding: 10px 15px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-wrap: normal !important;
}

.customer-btn:hover, button:hover {
    font-size: 14px !important;
}

.customer-btn:active, button:active {
    font-size: 14px !important;
}

/* ========================================
   容器高度修复
   ======================================== */

/* 主容器 */
#fht {
    max-height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* 表单容器 */
#libiao2 {
    max-height: 80vh !important;
    overflow-y: auto !important;
}

/* 内容显示区域 */
#HTMLview1_scroller {
    max-height: 85vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

#HTMLview1 {
    max-height: 100% !important;
    overflow-y: auto !important;
}

/* ========================================
   响应式断点
   ======================================== */

/* 大屏幕（平板、PC） */
@media screen and (min-width: 769px) {
    #table3 td {
        font-size: 16px !important;
        padding: 5px 4px !important;
        min-height: 60px !important;
    }
    
    input, select, textarea {
        font-size: 16px !important;
    }
    
    .customer-btn, button {
        font-size: 15px !important;
        padding: 12px 18px !important;
    }
}

/* 中等屏幕 */
@media screen and (max-width: 768px) {
    #table3 {
        width: 95% !important;
        max-width: 380px !important;
    }
    
    #table3 td {
        font-size: 14px !important;
        padding: 4px 3px !important;
        min-height: 50px !important;
    }
    
    input, select, textarea {
        font-size: 14px !important;
    }
    
    .customer-btn, button {
        font-size: 13px !important;
        padding: 8px 12px !important;
    }
}

/* 小屏幕 */
@media screen and (max-width: 480px) {
    #table3 {
        width: 98% !important;
        max-width: 340px !important;
    }
    
    #table3 td {
        font-size: 13px !important;
        padding: 3px 2px !important;
        min-height: 45px !important;
        line-height: 1.3 !important;
    }
    
    input, select, textarea {
        font-size: 13px !important;
    }
    
    .customer-btn, button {
        font-size: 12px !important;
        padding: 7px 10px !important;
    }
}

/* 超小屏幕 */
@media screen and (max-width: 375px) {
    #table3 {
        width: 100% !important;
        max-width: 320px !important;
    }
    
    #table3 td {
        font-size: 12px !important;
        padding: 2px 1px !important;
        min-height: 40px !important;
        line-height: 1.3 !important;
    }
    
    input, select, textarea {
        font-size: 12px !important;
    }
    
    .customer-btn, button {
        font-size: 11px !important;
        padding: 6px 8px !important;
    }
}

/* ========================================
   横屏模式优化（增强版）
   ======================================== */

/* 横屏模式 - 小屏幕 */
@media screen and (orientation: landscape) and (max-height: 500px) {
    #table3 {
        max-width: 520px !important;
        width: 85vw !important;
        margin: 0 auto !important;
    }
    
    #table3 td {
        font-size: 13px !important;
        min-height: 48px !important;
        padding: 4px 5px !important;
        line-height: 1.3 !important;
        width: auto !important;
        max-width: none !important;
    }
    
    #fht {
        max-width: 100% !important;
        margin: 0 auto !important;
    }
    
    #HTMLview1_scroller {
        max-height: 70vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
}

/* 横屏模式 - 中等屏幕 */
@media screen and (orientation: landscape) and (min-height: 501px) and (max-height: 768px) {
    #table3 {
        max-width: 550px !important;
        width: 80vw !important;
        margin: 0 auto !important;
    }
    
    #table3 td {
        font-size: 14px !important;
        min-height: 52px !important;
        padding: 5px 6px !important;
        line-height: 1.4 !important;
        width: auto !important;
        max-width: none !important;
    }
    
    #fht {
        max-width: 95% !important;
        margin: 0 auto !important;
    }
    
    #HTMLview1_scroller {
        max-height: 75vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
}

/* 横屏模式 - 大屏幕 */
@media screen and (orientation: landscape) and (min-height: 769px) {
    #table3 {
        max-width: 600px !important;
        width: 75vw !important;
        margin: 0 auto !important;
    }
    
    #table3 td {
        font-size: 15px !important;
        min-height: 55px !important;
        padding: 6px 7px !important;
        line-height: 1.4 !important;
        width: auto !important;
        max-width: none !important;
    }
    
    #fht {
        max-width: 90% !important;
        margin: 0 auto !important;
    }
    
    #HTMLview1_scroller {
        max-height: 80vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
}

/* ========================================
   横屏强制优化（JS控制）
   ======================================== */

/* 当JS检测到大字体时启用 */
body.landscape-large-font #table3 {
    table-layout: fixed !important;
}

body.landscape-large-font #table3 td {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-all !important;
    hyphens: auto !important;
    text-align: center !important;
    vertical-align: middle !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* ========================================
   大字体特殊处理
   ======================================== */

/* 检测到大字体时（通过JS添加的类） */
.large-font-mode #table3 td {
    font-size: 13px !important;
    line-height: 1.3 !important;
    padding: 3px 2px !important;
}

.large-font-mode input,
.large-font-mode select,
.large-font-mode textarea {
    font-size: 13px !important;
    line-height: 1.4 !important;
}

.large-font-mode .customer-btn,
.large-font-mode button {
    font-size: 12px !important;
    padding: 7px 10px !important;
}

/* ========================================
   滚动条优化
   ======================================== */

/* 自定义滚动条 */
::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}

::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1 !important;
    border-radius: 3px !important;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8 !important;
}

/* ========================================
   防止文字溢出
   ======================================== */

/* 长文本截断 */
.text-ellipsis {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* 多行文本截断 */
.text-clamp-2 {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.text-clamp-3 {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* ========================================
   图片自适应
   ======================================== */

img {
    max-width: 100% !important;
    max-height: 100% !important;
    height: auto !important;
    display: block !important;
}

/* ========================================
   打印样式
   ======================================== */

@media print {
    body {
        font-size: 12pt !important;
    }
    
    #table3 td {
        font-size: 11pt !important;
    }
}