/* ============================================================
   移动端适配样式  2026-09-14
   说明：在 <768px 屏幕上优化表格、表单、弹窗和页面留白，
   配合各页面已有的 viewport 即可获得较好的手机浏览效果。
   引用方式：<link rel="stylesheet" href="./css/mobile.css">
   （meeting 子目录内页面用 ../css/mobile.css）
   ============================================================ */

@media screen and (max-width: 768px) {

    html, body {
        overflow-x: hidden;
        -webkit-text-size-adjust: 100%;
    }

    /* ---- 主框架（index.html） ---- */
    /* 顶部条改为 flex：菜单按钮固定在最左，标题占剩余宽度 */
    .container {
        display: flex;
        align-items: center;
        padding: 0 6px;
        box-sizing: border-box;
    }
    .container .left_open {
        float: none;
        order: 1;
        flex: 0 0 auto;
        margin-left: 0;
        height: 45px;
    }
    /* 手机上把菜单按钮做成 40×40 的大热区并带"菜单"二字，避免找不到入口 */
    .container .left_open a {
        display: flex;
        align-items: center;
        height: 45px;
        text-decoration: none;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0.35);
    }
    .container .left_open i {
        width: 40px;
        height: 40px;
        line-height: 40px;
        margin-top: 0;
        font-size: 21px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.28);
    }
    .container .left_open a::after {
        content: '菜单';
        font-size: 13px;
        color: #fff;
        margin-left: 5px;
        white-space: nowrap;
    }
    .container .logo {
        float: none;
        order: 2;
        flex: 1 1 auto;
        min-width: 0;
        height: 45px;
    }
    .container .logo a {
        float: none;
        display: block;
        width: auto;
        padding-left: 6px;
        font-size: 15px;
        line-height: 45px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .container .right {
        float: none;
        order: 3;
        flex: 0 0 auto;
    }

    /* 菜单项加大点击高度，手指更好点 */
    .left-nav #nav li a {
        padding: 12px 0 !important;
    }
    .left-nav #nav li a cite {
        font-size: 15px;
    }
    .left-nav #nav li a .iconfont.left-nav-li {
        font-size: 18px;
    }

    /* 左侧导航里的 3D 地球与滚动字幕在手机上隐藏，避免占满整屏 */
    .left-nav .layui-tab-item,
    .left-nav marquee {
        display: none !important;
    }
    /* 首页横向滚动字幕容器宽 1800px，手机上必然撑破布局，整体隐藏 */
    #scroll {
        display: none !important;
    }
    .left-nav {
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.25);
        z-index: 1001;
    }
    .page-content-bg {
        z-index: 1000;
    }

    /* ---- 内容页通用 ---- */
    .layui-fluid {
        padding: 8px !important;
    }
    .layui-card-body {
        padding: 8px !important;
    }

    /* 数据表格：允许横向滑动、高度自适应，避免被固定高度截断 */
    .layui-table-view {
        height: auto !important;
        max-height: 65vh;
        margin: 0 !important;
    }
    .layui-table-box {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .layui-table th, .layui-table td {
        padding: 9px 10px !important;
        word-break: break-all;
    }
    /* 窄屏下列宽会被压到 80px 下限，4 字表头装不下；
       宽屏(xadmin.css)表头强制单行，这里放行让表头折行，保证文字完整可读 */
    .layui-table-view .layui-table th .layui-table-cell,
    .layui-table-view .layui-table-header .layui-table-cell {
        white-space: normal !important;
        text-overflow: clip !important;
    }

    /* 搜索/工具栏换行显示，防止溢出 */
    .layui-form-toolbar, .layui-table-tool {
        flex-wrap: wrap;
    }

    /* 弹窗自适应：layer 弹窗固定 600px 宽在手机上会溢出 */
    .layui-layer {
        max-width: 94vw !important;
    }
    .layui-layer iframe {
        width: 100% !important;
        max-width: 94vw;
    }
    .layui-layer-title {
        font-size: 14px !important;
        padding: 0 60px 0 12px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 表单控件加高，方便手指点击 */
    .layui-input, .layui-select, .layui-textarea {
        height: 40px !important;
        font-size: 15px !important;
    }
    .layui-btn {
        padding: 0 16px;
    }

    /* 统计卡片在窄屏改为两列 */
    .x-admin-backlog li {
        width: 50% !important;
        float: left;
    }

    /* 首页欢迎语和滚动提示字号微调 */
    .layui-elem-quote {
        font-size: 13px !important;
    }

    /* ---- 2026-09-15 追加：表单在窄屏的排布 ---- */
    /* 标签列收窄，输入框占满剩余宽度，避免 110px+190px 在 360px 宽屏上挤爆 */
    .layui-form-label {
        width: 88px !important;
        padding: 9px 6px !important;
        font-size: 13px !important;
        white-space: normal;
        word-break: break-all;
    }
    .layui-input-block {
        margin-left: 88px !important;
    }
    .layui-form-item .layui-input-inline {
        width: calc(100% - 100px) !important;
        min-width: 0 !important;
    }
    /* 表单底部按钮：加大点击区域并允许换行 */
    .layui-form-item .layui-btn {
        margin: 0 6px 8px 0;
    }
    /* 表格操作列里的按钮在手机上偏小，稍微放大并留出间隔 */
    .layui-table td .layui-btn-xs {
        padding: 0 8px;
        margin: 1px 2px;
        font-size: 12px;
    }
    /* 分页条居中，避免右侧按钮被挤出去 */
    .layui-table-page {
        text-align: center !important;
    }
    .layui-laypage {
        margin: 6px 0 !important;
    }
    /* 弹窗内容区支持惯性滚动 */
    .layui-layer-content {
        -webkit-overflow-scrolling: touch;
    }

    /* ============================================================
       2026-09-15 第二轮：基于真实手机截图的针对性优化
       ============================================================ */

    /* ---- 1) 表单：输入框紧跟标签，不再被固定 margin 顶出屏幕 ---- */
    .layui-form-item .layui-input-inline {
        margin-left: 98px !important;
        width: calc(100% - 108px) !important;
        min-width: 0 !important;
        box-sizing: border-box;
        float: none;
        display: block;
    }
    /* 单选/复选组与时间控件在剩余宽度内排布 */
    .layui-form-item .layui-input-inline .layui-form-radio {
        margin-right: 12px;
    }

    /* ---- 2) 表格：明示"可以左右滑动"，提示 5 秒后自动淡出 ---- */
    .layui-table-view {
        position: relative;
    }
    .layui-table-view::after {
        content: '← 左右滑动查看更多 →';
        position: absolute;
        top: 38px;
        right: 6px;
        font-size: 11px;
        line-height: 1;
        color: #666;
        background: rgba(255, 255, 255, 0.9);
        border: 1px solid #e0e0e0;
        border-radius: 12px;
        padding: 4px 10px;
        pointer-events: none;
        z-index: 999;
        animation: tblHintFade 1s ease 4.5s forwards;
    }
    @keyframes tblHintFade {
        to { opacity: 0; visibility: hidden; }
    }
    /* 滑动提示放在表头下方（表头高度 40px 的页面也适配） */
    .layui-table-tool + .layui-table-box .layui-table-view::after {
        top: 78px;
    }

    /* ---- 3) 首页公告：从 20px 大红字改为正常字号，不再占满首屏 ---- */
    .layui-elem-quote .x-red {
        font-size: 14px !important;
        line-height: 1.8;
        word-break: break-all;
    }

    /* ---- 4) 顶部面包屑栏收紧 ---- */
    .x-nav {
        padding: 0 8px !important;
        height: 40px !important;
        line-height: 40px !important;
    }

    /* ---- 5) 全面屏底部安全区，按钮不被手势条遮挡 ---- */
    .layui-btn-container,
    .layui-form-item:last-child {
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* ---- 6) 统计卡片数字不再被压小 ---- */
    .x-admin-backlog-body h3 {
        font-size: 13px !important;
    }
    .x-admin-backlog-body p cite {
        font-size: 22px !important;
    }

    /* ---- 7) 日期时间面板（2026-09-15）----
       laydate 默认把面板定位在输入框上/下方，手机上软键盘一弹（约占屏幕 1/3）
       面板就被盖住，看起来像"没有日期窗口"。两条措施：
         ① js/xadmin.js：窄屏给时间输入框加 readonly，不再弹软键盘（根本原因）
         ② 本处：面板内容超高时内部滚动，日期格子加大热区
       注意：不要用 transform 把面板强制居中 —— 会与 laydate 自身的定位逻辑打架，
       实测会导致面板创建后立刻被判定为"点击面板外部"而关闭（弹不出来）。 */
    .layui-laydate {
        max-width: 94vw;
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28) !important;
    }
    /* 面板内容超高时内部滚动，保证"确定"按钮始终能点到 */
    .layui-laydate .layui-laydate-content {
        max-height: 52vh;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* 加大日期/时间格子的点击热区，手指点得准 */
    .layui-laydate .layui-laydate-content td,
    .layui-laydate .layui-laydate-list > li {
        height: 34px;
    }
    /* 面板内"现在/确定/清空"按钮加大 */
    .layui-laydate .layui-laydate-footer span {
        min-width: 56px;
        padding: 0 10px;
    }
}