/**
 * mobile.css —— 手机/小屏适配层
 * 仅在 <=767px 生效，不影响 PC 端任何样式。
 * 目标：字号与点击区域加大、查询区纵向排布、表格卡片视图可读、弹窗不超屏、登录页精简。
 * 依赖：bootstrap-table 1.24 自带卡片视图（ry-ui.js 默认 mobileResponsive: true 已开启）。
 */

@media (max-width: 767px) {

    /* ============ 1. 触摸目标与字号 ============
       输入类字号必须 >=16px，否则 iOS 聚焦输入框时页面会自动放大 */
    body {
        font-size: 14px;
        max-width: 100%;
        overflow-x: hidden;
    }
    .form-control {
        height: 40px;
        font-size: 16px;
        line-height: 1.4;
    }
    .btn { font-size: 14px; }
    .btn-xs, .btn-group-xs > .btn {
        padding: 6px 10px;
        font-size: 13px;
        min-height: 30px;
    }
    .btn-sm, .btn-group-sm > .btn {
        padding: 7px 12px;
        font-size: 14px;
        min-height: 34px;
    }
    .navbar-minimalize {
        padding: 12px 14px;
        font-size: 18px;
    }
    label, .control-label { font-size: 14px; }

    /* ============ 2. 查询区（select-list）：纵向排布、控件全宽 ============ */
    .select-list ul li {
        display: block;
        width: 100%;
        margin: 0 0 8px 0;
    }
    .select-list ul li > label {
        width: auto;
        margin-right: 6px;
        vertical-align: middle;
    }
    .select-list ul li input[type="text"],
    .select-list ul li select,
    .select-list ul li .form-control {
        width: 100% !important;
    }
    /* 日期区间：两个输入框并排各占一半，中间“至”隐藏 */
    .select-list ul li .time input { width: 48% !important; }
    .select-list ul li .time span { display: none; }
    .select-list .btn { margin-top: 2px; min-width: 96px; }

    /* ============ 3. 工具栏 / 分页：横向流式排布 ============ */
    /* 操作按钮：两三个一行流式排布，不再每个独占一整行 */
    #toolbar {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        float: none !important;
        width: 100% !important;
        margin-bottom: 4px;
    }
    #toolbar > .btn,
    #toolbar > .btn-group {
        margin: 0 !important;
        flex: 0 0 auto;
    }
    .fixed-table-toolbar { padding: 0; }
    .fixed-table-toolbar .bars,
    .fixed-table-toolbar .columns,
    .fixed-table-toolbar .search {
        margin-bottom: 6px;
        width: 100%;
    }

    /* 分页区：“共 N 条 / 每页 N 条”保持一行内联，页码可换行、加大触点 */
    .fixed-table-pagination { padding: 4px 0 8px; }
    .fixed-table-pagination .pagination-detail {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 12px;
        margin: 4px 0;
    }
    .fixed-table-pagination .page-list {
        display: inline-flex;
        align-items: center;
        margin: 0;
    }
    .fixed-table-pagination .pagination-info { white-space: nowrap; }
    .fixed-table-pagination ul.pagination {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin: 6px 0 0;
        justify-content: flex-start;
    }
    .fixed-table-pagination ul.pagination > li > a,
    .fixed-table-pagination ul.pagination > li > span {
        min-width: 38px;
        min-height: 38px;
        line-height: 36px;
        padding: 0 10px;
        text-align: center;
        border-radius: 4px;
    }
    /* 列选择/刷新等图标按钮加大 */
    .fixed-table-toolbar .columns .btn,
    .fixed-table-toolbar .search .btn {
        min-height: 38px;
    }

    /* ============ 4. 表格：卡片视图可读性 ============
       卡片由 bootstrap-table 的 mobileResponsive 自动开启，
       每个字段一行：左“标题”右“值”（span.card-view-title / span.card-view-value） */
    .fixed-table-body {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .fixed-table-body tbody tr {
        display: block;
        padding: 6px 0;
        border-bottom: 1px solid #e7eaec;
    }
    .fixed-table-body tbody tr td {
        display: block;
        width: 100% !important;
        border: none !important;
        padding: 6px 12px !important;
        font-size: 14px;
        line-height: 1.5;
        word-break: break-all;
    }
    .fixed-table-body .card-views .card-view {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        border-bottom: 1px dashed #e7eaec;
        padding: 5px 0;
    }
    .fixed-table-body .card-views .card-view:last-child { border-bottom: none; }
    .fixed-table-body .card-view .card-view-title {
        color: #888;
        white-space: nowrap;
        margin-right: 10px;
        font-size: 14px;
    }
    .fixed-table-body .card-view .card-view-value {
        flex: 1;
        text-align: right;
        word-break: break-all;
    }
    /* 卡片里的操作按钮：换行展示、足够大 */
    .fixed-table-body .card-view .btn { margin: 2px 4px 2px 0; }
    /* 兜底：若某页表格未启用卡片视图，仍允许横向滑动查看 */
    .fixed-table-body table { min-width: 100%; }

    /* ============ 5. 弹窗：不超屏 ============ */
    .modal-dialog { width: auto !important; margin: 10px; }
    .modal-content { max-height: 88vh; overflow-y: auto; }
    .layui-layer { max-width: 96vw !important; }
    .layui-layer-iframe iframe { width: 100% !important; max-width: 100% !important; }
    .layui-layer-btn a { min-height: 38px; line-height: 38px; }
    .layui-layer-title { font-size: 15px; }

    /* ============ 6. 表单（新增/编辑弹层内容页）============ */
    .form-horizontal .form-group { margin-bottom: 10px; }
    .form-horizontal .control-label {
        text-align: left;
        padding-top: 8px;
        padding-bottom: 2px;
    }
    .form-horizontal .radio, .form-horizontal .checkbox { margin-top: 0; }

    /* ============ 7. 顶部多标签：横向滚动 ============ */
    .page-tabs {
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .page-tabs a { display: inline-block; float: none; }

    /* ============ 8. 登录页：隐藏左侧介绍、表单全宽 ============ */
    body.signin .signinpanel {
        width: 100%;
        max-width: 420px;
        margin: 0 auto;
        padding: 20px 16px;
        box-shadow: none;
    }
    body.signin .signinpanel .col-sm-7 { display: none; }
    body.signin .signinpanel .col-sm-5 {
        width: 100%;
        float: none;
        padding: 0;
    }
    body.signin .signinpanel input.form-control {
        height: 44px;
        margin-bottom: 12px;
        font-size: 16px;
    }
    body.signin .signinpanel .btn-success.btn-block {
        height: 44px;
        font-size: 16px;
    }
    body.signin .signup-footer { text-align: center; }
}

/* ============================================================
   9. 左上角“三杠”菜单按钮：加大触摸区域、脱离贴角
   ------------------------------------------------------------
   PC 原样式（style.min.css）：padding 4px 12px、font-size 14px，
   实际只有约 22px 高，且 <=992px 时还会 float:right，手机上
   又小又贴角、点不住。此处用双 class 提高优先级强制覆盖。
   ============================================================ */
@media (max-width: 767px) {
    .navbar-minimalize.minimalize-styl-2 {
        float: left;
        width: 44px;
        height: 44px;
        line-height: 44px;
        padding: 0;
        margin: 12px 8px 4px 12px;
        font-size: 20px;
        text-align: center;
        border-radius: 6px;
        background: rgba(255, 255, 255, 0.15);
    }
    .navbar-minimalize.minimalize-styl-2:active {
        background: rgba(255, 255, 255, 0.3);
    }
    /* 顶部导航条加高，容纳 44px 按钮并使其明显下移、不再贴顶 */
    .navbar-static-top { min-height: 64px; }

    /* ---- 顶栏右侧链接（文档/锁屏/全屏/头像）：与三杠同一行，禁止换行重叠 ---- */
    .navbar-static-top .navbar-header {
        float: left;
        margin: 0;
    }
    .navbar-static-top .navbar-top-links {
        float: right;
        margin: 0;
        display: flex;
        align-items: center;
        white-space: nowrap;
    }
    .navbar-static-top .navbar-top-links > li {
        display: inline-block;
        float: none;
    }
    .navbar-static-top .navbar-top-links > li > a {
        padding: 0 8px;
        min-height: 64px;
        line-height: 64px;
        font-size: 14px;
    }
    /* 头像下拉菜单对齐右缘，避免弹到屏幕外/与内容重叠 */
    .navbar-top-links .dropdown-menu {
        left: auto;
        right: 0;
        max-width: 88vw;
    }
    /* “横向菜单”这类切换在手机上意义不大，隐藏以缩短下拉 */
    .navbar-top-links .dropdown-menu li a[onclick*="toggleMenu"] { display: none; }
}