/**
 * 后台管理 - 移动端适配样式（增量覆盖层）
 *
 * 设计约束：
 *   1. 所有规则均限定在 (max-width: 991px)，>= 992px 的桌面端完全不受影响
 *   2. 本文件为纯增量文件，删除本文件或在 common/meta.html 中注释引入即可整层回滚
 *   3. 不修改任何业务样式文件，不覆盖业务逻辑，仅做布局与尺寸适配
 *
 * 引入位置：application/admin/view/common/meta.html
 *
 * 生效范围由 <link media="..."> 动态控制（判定脚本见 meta.html），本文件不含 @media 包裹：
 *   - 手机设备        => media="all"                （无论窗口宽度都启用移动布局）
 *   - 电脑设备        => media="(max-width: 991px)" （保留响应式）
 *   - 用户强制电脑版  => media="not all"            （整层禁用）
 *   - 用户强制手机版  => media="all"
 */

    /* ==================== 1. 基础 ==================== */

    /* 防止 iOS 聚焦输入框时页面自动放大（字号 < 16px 会触发） */
    input.form-control,
    select.form-control,
    textarea.form-control,
    .form-control {
        font-size: 16px;
    }

    /* 触摸目标最小高度 */
    .btn {
        min-height: 32px;
    }

    /* 内容区留白收窄 */
    .content {
        padding: 10px !important;
    }

    /* 面包屑在窄屏隐藏，节省竖向空间 */
    #ribbon {
        display: none !important;
    }

    .panel {
        margin-bottom: 10px;
    }

    /* ==================== 2. 框架壳 ==================== */

    /* 顶栏层级：必须高于抽屉(1050)与遮罩(1045)。
       否则抽屉展开 / 遮罩出现时，整个 header(默认 z-index:1030) 会被盖住，
       表现为「左上角汉堡按钮消失、被菜单挡住」，此时也无法再点击它关闭抽屉 */
    .main-header {
        z-index: 1060 !important;
    }

    /* 侧边栏 -> 抽屉（默认收起，body.sidebar-open 时滑出） */
    .main-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 240px !important;
        min-height: 0 !important;
        /* 顶栏高度：抽屉内容从顶栏下方开始，避免被提高到顶栏之上的 header 遮住 */
        padding-top: 50px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        -webkit-transform: translate3d(-100%, 0, 0) !important;
        transform: translate3d(-100%, 0, 0) !important;
        transition: -webkit-transform 0.25s ease, transform 0.25s ease;
        z-index: 1050 !important;
    }

    body.sidebar-open .main-sidebar {
        -webkit-transform: translate3d(0, 0, 0) !important;
        transform: translate3d(0, 0, 0) !important;
    }

    /* 抽屉遮罩 */
    #mobile-sidebar-mask {
        display: none;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 1045;
    }

    body.sidebar-open #mobile-sidebar-mask {
        display: block;
    }

    /* 抽屉展开时禁止背景滚动 */
    body.sidebar-open {
        overflow: hidden;
    }

    /* 内容区不再为侧边栏让位 */
    .content-wrapper,
    .main-footer {
        margin-left: 0 !important;
    }

    /* 顶栏：取消 logo 固定宽度与 navbar 的左侧偏移；
       padding-left 预留 52px 作为汉堡按钮的专属槽位，避免按钮压住站点名 */
    .main-header .logo {
        width: auto !important;
        min-width: 0 !important;
        padding: 0 12px 0 52px !important;
    }

    /* 顶栏站点名始终显示完整文本（避免 sidebar-collapse 残留导致的 logo 缩写态） */
    .main-header .logo .logo-lg {
        display: block !important;
    }

    .main-header .logo .logo-mini {
        display: none !important;
    }

    .main-header .navbar {
        margin-left: 0 !important;
    }

    /* 菜单图标（汉堡按钮）：
       1. position:fixed 固定在视口左上角——不参与顶栏任何流式布局，
          无论按钮在模板里位于哪个容器、容器如何被横向内容挤压，它都不会被挤走/盖住；
       2. 几何属性全部 !important，防止上游规则（含 ID 选择器）改动位置与尺寸；
       3. 深色底衬 + 白色图标，任何皮肤/底色下都可见 */
    .main-header .sidebar-toggle,
    #firstnav .sidebar-toggle {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        float: none !important;
        margin: 0 !important;
        width: 45px !important;
        min-width: 45px !important;
        max-width: 45px !important;
        height: 50px !important;
        line-height: 50px !important;
        padding: 0 !important;
        z-index: 1210 !important;
        color: #fff !important;
        background: rgba(0, 0, 0, 0.28) !important;
        text-align: center !important;
        text-decoration: none !important;
        pointer-events: auto !important;
    }

    .main-header .sidebar-toggle:before {
        content: "\f0c9";
        font-family: FontAwesome, fontAwesome, "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    .main-header .sidebar-toggle:hover,
    .main-header .sidebar-toggle:focus {
        color: #fff !important;
        background: rgba(0, 0, 0, 0.4);
    }

    /* 抽屉已展开：按钮切成关闭图标，提示可以再次点击收起
       （顶栏层级已高于抽屉与遮罩，此时按钮依然可见可点） */
    body.sidebar-open .main-header .sidebar-toggle:before {
        content: "\f00d";
    }

    /* 顶部多标签：横向滚动，避免换行挤压 */
    #firstnav .nav-addtabs.hidden-xs {
        display: flex !important;
        flex-wrap: nowrap;
        align-items: center;
        overflow-x: auto;
        overflow-y: hidden;
        max-width: calc(100% - 110px);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    #firstnav .nav-addtabs.hidden-xs::-webkit-scrollbar {
        display: none;
    }

    #firstnav .nav-addtabs.hidden-xs > li {
        flex: 0 0 auto;
        float: none;
    }

    /* 顶栏功能项间距收紧 */
    .navbar-custom-menu .navbar-nav > li > a {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* 移动端一级菜单（沿用已有 .mobilenav，统一尺寸） */
    .sidebar .mobilenav a.btn-app {
        min-height: 70px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    /* ==================== 3. 表格 ==================== */

    /* 解除 table-nowrap，允许换行，从根源上避免横向溢出。
       同时覆盖 bootstrap-table 生成的克隆表头（其 table 上没有 table-nowrap 类） */
    .fixed-table-container th,
    .fixed-table-container td,
    .table-nowrap > thead > tr > th,
    .table-nowrap > tbody > tr > td {
        white-space: normal !important;
        word-break: break-word;
    }

    /* 表格容器可横向滚动 */
    .fixed-table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* 工具栏按钮换行，避免被裁切 */
    .toolbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
    }

    .toolbar > .btn,
    .toolbar > .dropdown {
        margin-left: 0 !important;
    }

    /* 分页控件居中换行 */
    .fixed-table-pagination .pagination-detail,
    .fixed-table-pagination .pagination {
        float: none !important;
        text-align: center;
        margin: 5px 0;
    }

    /* 表格字号略降，提升信息密度 */
    .fixed-table-container .table > thead > tr > th,
    .fixed-table-container .table > tbody > tr > td {
        font-size: 13px;
    }

    /* ==================== 4. 表单 ==================== */

    /* form-horizontal 在窄屏改为纵向堆叠 */
    .form-horizontal .control-label {
        text-align: left !important;
        padding-bottom: 6px;
    }

    .form-horizontal [class*="col-sm-"] {
        float: none !important;
        width: 100% !important;
    }

    /* 行内表单换行 */
    .form-inline .form-group {
        margin-bottom: 8px;
    }

    /* 弹窗底部按钮条换行 */
    .layer-footer .btn {
        margin-bottom: 6px;
    }

    /* ==================== 5. 弹窗 ==================== */

    /* layer 弹窗宽度兜底（全屏由 JS 设置 Config.openArea 完成） */
    .layui-layer-page,
    .layui-layer-iframe {
        max-width: 100% !important;
    }

    /* ==================== 6. 数据概览（dashboard / agent_dashboard） ==================== */

    /* 排行榜 + 通知公告：.equal-height-row 自行使用了 flex，
       会绕过 Bootstrap 栅格在窄屏的自动堆叠，需显式改为纵向 */
    .equal-height-row > .col-md-6 {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }

    /* 图表高度收敛，避免单个图表占满整屏（页面为内联 height，需 !important） */
    #wechat_echart,
    #driver_echart,
    #pie-chart {
        height: 220px !important;
    }

    #smoothline-chart {
        height: 200px !important;
    }

    /* 指标数字字号收敛（提高优先级以覆盖页面内的同名规则） */
    #myTabContent .ibox-content h1 {
        font-size: 22px;
    }

    /* ==================== 7. 其它 ==================== */

    /* 二维码 / 图片自适应 */
    .qrcode-img-wrapper img {
        max-width: 100%;
        height: auto;
    }

    /* 横向滚动容器统一惯性滚动 */
    .tab-content,
    .tab-pane {
        -webkit-overflow-scrolling: touch;
    }

    /* ==================== 8. 订单改派（order/reassign） ==================== */

    /* 原为左右分栏 + 100vh 固定高度，窄屏改为纵向堆叠并交由页面滚动 */
    .reassign-container {
        flex-direction: column !important;
        height: auto !important;
        overflow: visible !important;
    }

    .left-panel {
        width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid #e5e5e5;
    }

    /* 订单信息置顶，形成「订单 → 司机 → 地图」的阅读顺序 */
    .left-panel .order-info-section {
        order: -1;
        border-top: none !important;
        border-bottom: 2px solid #eee;
    }

    /* 列表取消内部滚动，避免与页面滚动形成双滚动条 */
    .driver-list-section {
        flex: 0 0 auto !important;
        overflow-y: visible !important;
        padding: 12px 12px 0 !important;
    }

    /* 地图改为固定高度、铺满宽度 */
    .right-panel {
        width: 100% !important;
        height: 45vh !important;
        min-height: 260px;
    }

    /* 司机列表为 6 列，允许表头换行，避免窄屏横向溢出 */
    #driver-table {
        font-size: 12px;
    }

    #driver-table th {
        white-space: normal !important;
    }

    /* 分页条允许换行 */
    .pagination-bar {
        flex-wrap: wrap;
    }

    /* ==================== 9. 订单详情（order/details） ==================== */

    /* 顶部 tab 导航（通用）：窄屏横向滚动，避免多个 tab 换行挤压 */
    .content .nav-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .content .nav-tabs::-webkit-scrollbar {
        display: none;
    }

    .content .nav-tabs > li {
        float: none;
        flex: 0 0 auto;
    }

    /* 地图与订单信息由 7:5 并排改为纵向堆叠（col-xs-* 在任何宽度都并排） */
    .col-xs-7.map,
    .row.col-xs-5 {
        width: 100% !important;
        float: none !important;
    }

    /* 地图高度收敛（原为 80vh） */
    #container {
        height: 45vh !important;
        min-height: 260px;
    }

    /* 顶部时间轴：改为固定项宽 + 横向滚动，避免 max-content 撑破页面 */
    .top-flow {
        width: 100% !important;
        height: auto !important;
        min-height: 70px;
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px !important;
    }

    .top-flow > .col-xs-12 {
        float: none !important;
        display: inline-block !important;
        vertical-align: top;
        width: 84px !important;
    }

    /* 地图速度气泡宽度收敛 */
    .route_ticket {
        width: 110px !important;
    }

    /* ==================== 10. 订单新增（order/add） ==================== */

    /* 表单原为 30% 宽的绝对定位浮层（浮在地图上），窄屏改为整宽置于上方 */
    .form-box {
        position: static !important;
        width: 100% !important;
        float: none !important;
        z-index: auto !important;
        padding: 10px !important;
    }

    /* 地址提示气泡原为 22rem 最小宽度 + 固定定位，窄屏改为通栏 */
    .info {
        min-width: 0 !important;
        width: auto !important;
        left: 8px !important;
        right: 8px !important;
        top: 8px !important;
    }

    /* 圆形确认按钮：抬离底部，避免与浏览器工具栏重叠 */
    .confirm {
        bottom: 24px !important;
        right: 16px !important;
    }

    /* ==================== 11. 其余页面的通用收口 ==================== */

    /* 部分页面给下拉框写了内联固定宽度（如城市管理的 300px），窄屏统一改为自适应 */
    .content .form-group select[style*="width"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* bootstrap-select 的下拉面板可能超出屏幕宽度 */
    .bootstrap-select .dropdown-menu {
        max-width: calc(100vw - 20px);
    }

    /* 表格内的操作按钮紧凑一些，避免操作列被挤成多行 */
    .fixed-table-container .btn {
        padding: 3px 8px;
        font-size: 12px;
    }

    /* ==================== 12. 移动端卡片视图（bootstrap-table cardView） ==================== */

    /* 由 backend-mobile.js 在小屏时把表格切换为 cardView：
       每行展开成一张卡片、字段纵向排列，避免 20+ 列宽表格横向拖动 */

    .fixed-table-body .card-view {
        padding: 3px 10px;
        line-height: 1.7;
        word-break: break-word;
    }

    .fixed-table-body .card-view .title {
        min-width: 34%;
        font-weight: 600;
        vertical-align: top;
    }

    /* 卡片（每行一条）之间的分隔 */
    .fixed-table-body > table > tbody > tr + tr {
        border-top: 6px solid #f5f7fa;
    }

    /* 卡片内的操作按钮允许换行排布 */
    .fixed-table-body .card-view .btn {
        margin: 2px 2px 2px 0;
    }