/*
 * MTC Lab 全局移动端响应式优化样式表
 * 作者: MTC Team
 * 版本: 1.0
 * 描述: 为整个网站提供移动端优化样式
 */

/* ============================= */
/* 基础响应式布局 */
/* ============================= */

/* 移动端视口优化 */
@media (max-width: 767px) {
    /* 容器内边距优化 */
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* 行间距优化 */
    .row {
        margin-left: -5px;
        margin-right: -5px;
    }

    .row > * {
        padding-left: 5px;
        padding-right: 5px;
    }
}

/* ============================= */
/* 导航栏优化 */
/* ============================= */

@media (max-width: 767px) {
    /* 导航栏品牌标志 */
    .navbar-brand {
        font-size: 1rem !important;
        padding: 0.25rem 0.5rem !important;
    }

    /* 导航菜单项 */
    .navbar-nav .nav-item {
        width: 100%;
        text-align: left;
    }

    .navbar-nav .nav-link {
        padding: 0.75rem 1rem !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    /* 下拉菜单 */
    .dropdown-menu {
        position: static !important;
        float: none !important;
        width: 100% !important;
        margin-top: 0 !important;
        background-color: #f8f9fa !important;
        border: none !important;
        box-shadow: none !important;
    }

    .dropdown-item {
        padding: 0.5rem 1.5rem !important;
        white-space: normal !important;
        line-height: 1.5;
    }
}

/* ============================= */
/* 表格响应式优化 */
/* ============================= */

/* 确保所有表格都可以水平滚动 */
.table-responsive {
    -webkit-overflow-scrolling: touch; /* iOS平滑滚动 */
}

@media (max-width: 767px) {
    /* 表格字体和间距 */
    .table {
        font-size: 0.875rem !important;
    }

    .table td, .table th {
        padding: 0.5rem !important;
        white-space: nowrap;
    }

    /* 表格中的按钮 */
    .table .btn {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.75rem !important;
        margin: 0.1rem !important;
    }

    /* 防止长文本溢出 */
    .table td {
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ============================= */
/* 卡片布局优化 */
/* ============================= */

@media (max-width: 767px) {
    /* 卡片间距 */
    .card {
        margin-bottom: 1rem !important;
    }

    .card-body {
        padding: 1rem !important;
    }

    .card-header {
        padding: 0.75rem 1rem !important;
    }

    .card-footer {
        padding: 0.75rem 1rem !important;
    }

    /* 卡片标题 */
    .card-title {
        font-size: 1.1rem !important;
    }
}

/* ============================= */
/* 表单优化 */
/* ============================= */

@media (max-width: 767px) {
    /* 表单组间距 */
    .form-group {
        margin-bottom: 1rem !important;
    }

    /* 输入框 */
    .form-control {
        font-size: 16px !important; /* 防止iOS缩放 */
    }

    /* 标签 */
    label {
        font-size: 0.9rem !important;
        margin-bottom: 0.25rem !important;
    }

    /* 帮助文本 */
    .form-text {
        font-size: 0.8rem !important;
    }
}

/* ============================= */
/* 按钮优化 */
/* ============================= */

@media (max-width: 767px) {
    /* 按钮组 */
    .btn-group {
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
    }

    .btn-group .btn {
        margin: 0.25rem !important;
    }

    /* 移动端全宽按钮 */
    .btn-mobile-block {
        width: 100% !important;
        display: block !important;
        margin-bottom: 0.5rem !important;
    }

    /* 小屏幕按钮尺寸 */
    .btn-mobile-sm {
        padding: 0.375rem 0.75rem !important;
        font-size: 0.875rem !important;
    }
}

/* ============================= */
/* 文字排版优化 */
/* ============================= */

@media (max-width: 767px) {
    /* 标题尺寸调整 */
    h1 {
        font-size: 1.75rem !important;
    }

    h2 {
        font-size: 1.5rem !important;
    }

    h3 {
        font-size: 1.3rem !important;
    }

    h4 {
        font-size: 1.15rem !important;
    }

    h5 {
        font-size: 1rem !important;
    }

    h6 {
        font-size: 0.9rem !important;
    }

    /* 段落文字 */
    p {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
    }

    /* 防止长单词溢出 */
    .text-break-mobile {
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }
}

/* ============================= */
/* 图片优化 */
/* ============================= */

@media (max-width: 767px) {
    /* 响应式图片 */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* 缩略图 */
    .thumbnail img {
        width: 100% !important;
        height: auto !important;
    }
}

/* ============================= */
/* 分页优化 */
/* ============================= */

@media (max-width: 767px) {
    /* 分页按钮 */
    .pagination {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    .pagination .page-link {
        padding: 0.375rem 0.5rem !important;
        font-size: 0.875rem !important;
    }

    .pagination .btn {
        padding: 0.375rem 0.75rem !important;
        font-size: 0.875rem !important;
        margin: 0.25rem !important;
    }
}

/* ============================= */
/* 模态框优化 */
/* ============================= */

@media (max-width: 767px) {
    /* 模态框对话框 */
    .modal-dialog {
        margin: 0.5rem !important;
        max-width: calc(100% - 1rem) !important;
    }

    .modal-content {
        border-radius: 0.25rem !important;
    }

    /* 模态框头部 */
    .modal-header {
        padding: 0.75rem !important;
    }

    .modal-title {
        font-size: 1.1rem !important;
    }

    /* 模态框主体 */
    .modal-body {
        padding: 1rem !important;
    }

    /* 模态框底部 */
    .modal-footer {
        padding: 0.75rem !important;
    }
}

/* ============================= */
/* 警告和提示框优化 */
/* ============================= */

@media (max-width: 767px) {
    .alert {
        padding: 0.75rem !important;
        font-size: 0.9rem !important;
    }

    .badge {
        font-size: 0.75rem !important;
        padding: 0.25rem 0.5rem !important;
    }
}

/* ============================= */
/* 工具类 */
/* ============================= */

@media (max-width: 767px) {
    /* 隐藏不重要的列 */
    .hide-mobile {
        display: none !important;
    }

    /* 仅在移动端显示 */
    .show-mobile {
        display: block !important;
    }

    /* 移动端文字居中 */
    .text-center-mobile {
        text-align: center !important;
    }

    /* 移动端全宽 */
    .w-100-mobile {
        width: 100% !important;
    }

    /* 移动端间距调整 */
    .p-mobile-2 {
        padding: 0.5rem !important;
    }

    .m-mobile-0 {
        margin: 0 !important;
    }
}

/* ============================= */
/* 平板设备优化 (768px - 991px) */
/* ============================= */

@media (min-width: 768px) and (max-width: 991px) {
    .container {
        max-width: 750px;
    }

    /* 平板设备隐藏 */
    .hide-tablet {
        display: none !important;
    }
}

/* ============================= */
/* 横向模式优化 */
/* ============================= */

@media (max-width: 767px) and (orientation: landscape) {
    /* 减少垂直空间占用 */
    .navbar {
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }

    .jumbotron {
        padding: 2rem 1rem !important;
    }
}

/* ============================= */
/* 动画和过渡 */
/* ============================= */

@media (max-width: 767px) {
    /* 减少动画以提高性能 */
    * {
        animation-duration: 0.3s !important;
        transition-duration: 0.3s !important;
    }
}

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

@media print {
    .no-print {
        display: none !important;
    }

    .container {
        width: 100% !important;
    }
}