/**
 * mobile-optimize.css
 * 全局移动端适配样式 - Bootstrap 3 + FastAdmin + AdminLTE
 * 创建时间：2026-04-29
 */

@media (max-width: 767px) {

    /* ========================================
       1. 表格响应式基础
       ======================================== */

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

    /* 表格字体压缩 */
    .bootstrap-table table {
        font-size: 12px;
    }

    .bootstrap-table table td,
    .bootstrap-table table th {
        padding: 4px 6px;
        line-height: 1.4;
    }

    /* 操作列按钮改为纯图标 */
    .btn-group .btn-xs {
        font-size: 0;
        padding: 6px 8px;
    }

    .btn-group .btn-xs > i,
    .btn-group .btn-xs > .fa,
    .btn-group .btn-xs > .glyphicon {
        font-size: 14px;
    }

    /* ========================================
       2. 工具栏响应式
       ======================================== */

    /* 工具栏自动换行 */
    .toolbar,
    .toolbar .form-inline,
    .fixed-table-toolbar .columns,
    .fixed-table-toolbar .search {
        display: flex !important;
        flex-wrap: wrap;
        gap: 6px;
    }

    /* 输入框和下拉框全宽 */
    .toolbar .form-control,
    .toolbar select,
    .toolbar input[type="text"],
    .toolbar .form-group {
        width: 100% !important;
        min-width: unset !important;
        max-width: 100% !important;
    }

    /* 按钮组在手机端等宽排列 */
    .toolbar .btn-group {
        display: flex;
        flex-wrap: wrap;
    }

    .toolbar .btn-group .btn {
        flex: 1;
        min-width: 0;
    }

    /* ========================================
       3. 弹窗适配
       ======================================== */

    .modal-dialog {
        max-width: 95vw !important;
        margin: 10px auto !important;
        width: auto !important;
    }

    .modal-body .form-horizontal .form-group {
        margin-left: 0;
        margin-right: 0;
    }

    .modal-body .form-horizontal .control-label {
        text-align: left;
        padding-bottom: 4px;
    }

    /* 表单在手机端改为单列 */
    .modal-body .col-sm-8,
    .modal-body .col-sm-9,
    .modal-body .col-sm-10 {
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }

    .modal-body .col-sm-2,
    .modal-body .col-sm-3,
    .modal-body .col-sm-4 {
        width: 100%;
    }

    /* ========================================
       4. 通用间距与触摸优化
       ======================================== */

    /* 减少面板内边距 */
    .panel-body {
        padding: 10px;
    }

    .panel-heading {
        padding: 8px 10px;
    }

    /* 按钮最小触摸区域 */
    .btn {
        min-height: 36px;
        min-width: 36px;
    }

    /* Tab 标签页滚动 */
    .panel-intro > .panel-heading .nav-tabs {
        white-space: nowrap;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .panel-intro > .panel-heading .nav-tabs > li {
        float: none;
        display: inline-block;
    }

    /* 搜索栏适配 */
    .fixed-table-toolbar .search input {
        width: 100% !important;
    }

    .fixed-table-toolbar .columns {
        margin-top: 6px;
    }

    /* ========================================
       5. 卡片视图样式优化
       ======================================== */

    .bootstrap-table .card-view .card-view-title {
        font-weight: 600;
        color: #555;
        min-width: 80px;
        display: inline-block;
    }

    .bootstrap-table .card-view .card-view-value {
        word-break: break-word;
        white-space: normal;
    }

    /* 卡片行间距 */
    .bootstrap-table .card-view tr + tr {
        border-top: 1px solid #f0f0f0;
    }

    /* 卡片中操作按钮横排 */
    .card-view .btn-group {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }

    .card-view .btn-group .btn-xs {
        font-size: 12px;
        padding: 4px 8px;
    }

    .card-view .btn-group .btn-xs > i,
    .card-view .btn-group .btn-xs > .fa {
        font-size: 12px;
    }

}

/* ========================================
   6. 超小屏幕（< 480px）额外优化
   ======================================== */
@media (max-width: 480px) {

    .bootstrap-table table {
        font-size: 11px;
    }

    .content-wrapper {
        padding: 5px;
    }

    .toolbar .btn {
        font-size: 12px;
        padding: 5px 8px;
    }

}