/*
 * mobile.css - 全站移动端响应式适配
 * 通过 public_link.html 引入，所有页面自动生效
 */

/* ============================================
   手机端菜单切换按钮
   ============================================ */
.sidebar-toggle {
    display: none;
    width: 100%;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 500;
    color: #334155;
    cursor: pointer;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* 遮罩层基础样式（桌面端不显示） */
.sidebar-overlay {
    display: none;
}

.sidebar-toggle .toggle-icon {
    transition: transform 0.3s ease;
}

.sidebar-toggle .toggle-icon.open {
    transform: rotate(180deg);
}

/* ============================================
   主要响应式断点：<= 767px（手机端）
   ============================================ */
@media (max-width: 767px) {

    /* --- 菜单切换按钮显示 --- */
    .sidebar-toggle {
        display: flex;
    }

    /* --- 侧边栏默认折叠 --- */
    .left-nav-wrapper {
        display: none;
    }

    .left-nav-wrapper.show {
        display: block;
    }

    /* --- 容器内距缩小 --- */
    .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }

    .job_single_wrapper {
        margin-top: 10px !important;
        margin-bottom: 30px !important;
    }

    /* --- 卡片内距缩小 --- */
    .card-body {
        padding: 15px;
    }

    .card-header {
        padding: 15px;
    }

    .finance-card .card-header,
    .dashboard-card .card-header {
        padding: 15px;
    }

    .finance-card .card-body,
    .dashboard-card .card-body {
        padding: 15px;
    }

    .form-container {
        padding: 15px;
    }

    .latest_job_box {
        padding: 15px;
    }

    .jb_listing_single_overview {
        padding: 10px;
    }

    /* --- 表格：data-label 卡片式布局（覆盖my.css的600px到767px） --- */
    table {
        border: 0;
    }

    table thead {
        display: none;
    }

    table tr {
        margin-bottom: 10px;
        display: block;
        border-bottom: 2px solid #ddd;
    }

    table td {
        display: block;
        text-align: right;
        font-size: 14px;
        border-bottom: 1px dotted #ccc;
        padding: 10px 12px;
    }

    table td:last-child {
        border-bottom: 0;
    }

    table td:before {
        content: attr(data-label);
        float: left;
        text-transform: uppercase;
        font-weight: bold;
        color: #64748b;
    }

    /* 没有 data-label 的表格保持横向滚动 */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* --- 分页居中 --- */
    .pagination {
        justify-content: center !important;
        flex-wrap: wrap;
        gap: 4px;
        padding: 15px 10px;
    }

    .page-link {
        padding: 5px 10px;
        font-size: 13px;
    }

    /* --- Bootstrap Modal 宽度适配 --- */
    .modal-dialog {
        margin: 10px;
        max-width: calc(100vw - 20px);
    }

    .modal-body {
        padding: 15px;
    }

    /* --- Layer.js 弹窗适配 --- */
    .layui-layer {
        max-width: calc(100vw - 20px) !important;
        left: 10px !important;
        right: 10px !important;
    }

    .layui-layer-content {
        max-width: 100% !important;
    }

    .layui-layer-content img.resize {
        width: 100% !important;
    }

    /* --- 表单布局：纵向排列 --- */
    .flex-div {
        flex-direction: column;
        align-items: flex-start !important;
    }

    .flex-div .form-lable-text {
        margin-left: 0;
        margin-bottom: 5px;
    }

    .flex-div .col-sm-4 {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .filter-row {
        flex-direction: column;
        gap: 10px;
    }

    .filter-row .filter-group {
        width: 100%;
    }

    .filter-row .filter-group .form-control {
        width: 100%;
    }

    .filter-row .filter-group .btn-search {
        width: 100%;
    }

    /* form row 布局适配 */
    .row.mb-3 .col-sm-4,
    .row.mb-3 .col-sm-8 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .col-form-label {
        padding-bottom: 2px;
    }

    .form-control {
        max-width: 100% !important;
    }

    .input-group {
        max-width: 100% !important;
    }

    /* --- 操作按钮 --- */
    .btn-group {
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
    }

    .btn-group .btn {
        width: auto;
        min-width: 120px;
        margin-right: 0;
        font-size: 13px;
        padding: 8px 14px;
    }

    .action-buttons,
    .stat-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .action-buttons .btn,
    .stat-actions .btn,
    .action-button {
        font-size: 12px;
        padding: 5px 10px;
    }

    /* --- profile flex 区域 --- */
    .d-flex.flex-wrap.align-items-center {
        gap: 12px;
    }

    .profile-avatar {
        width: 50px;
        height: 50px;
        margin-right: 12px;
    }

    .profile-actions {
        width: 100%;
        margin-top: 8px;
    }

    .user-name {
        font-size: 17px;
    }

    /* balance 和 commission 卡片 */
    .balance-text {
        font-size: 22px;
    }

    .stat-row {
        gap: 16px;
        padding: 8px 10px;
    }

    .stat-value {
        font-size: 32px !important;
    }

    /* --- share-info-row 适配 --- */
    .share-info-row {
        gap: 20px !important;
    }

    .info-item {
        min-width: unset !important;
    }

    .info-item .info-value {
        font-size: 20px;
    }

    .share-link-group {
        flex-direction: column;
    }

    .share-link-group input {
        border-right: 1px solid #cbd5e1;
        border-radius: 6px 6px 0 0;
    }

    .share-link-group .input-group-append,
    .share-link-group .copy-btn {
        border-radius: 0 0 6px 6px;
        width: 100%;
        justify-content: center;
    }

    /* --- output2 (QR弹窗) 适配 --- */
    .output2 {
        width: auto !important;
        max-width: calc(100vw - 40px);
        left: 20px !important;
        right: 20px !important;
    }

    #output2 {
        max-width: calc(100vw - 40px);
    }

    /* --- commission-card 适配 --- */
    .commission-card .coin-icon {
        display: none;
    }

    /* --- 工单详情聊天消息适配 --- */
    .message p {
        max-width: 85%;
    }

    .icon-div {
        margin-right: 8px;
        margin-left: 8px;
    }

    /* textarea 自适应 */
    textarea.form-control {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* upload div */
    .upload-div {
        width: 100%;
        min-width: unset;
    }

    /* --- 公共头部/导航适配 --- */
    .jb_cover .container-fluid > .row > .col-lg-2 {
        margin-bottom: 0;
    }

    /* --- 按钮组在小屏幕上居中排列 --- */
    .d-flex.justify-content-center .btn-group {
        flex-direction: column;
        width: 100%;
    }

    .d-flex.justify-content-center .btn-group .btn {
        width: 100%;
        margin-bottom: 8px;
    }

    /* --- 减小 h5 标题字号 --- */
    .finance-card h5,
    .dashboard-card h5,
    .card-title {
        font-size: 16px;
    }

    /* --- table td padding 适配 --- */
    .table td {
        padding: 10px 12px;
    }

    /* --- 工单详情元数据纵向排列 --- */
    .form-group.flex-div[style*="flex-wrap"] > div {
        margin-left: 0 !important;
        margin-bottom: 4px;
    }
}

/* ============================================
   价格页手机端适配
   ============================================ */
@media (max-width: 767px) {
    .main_pdet {
        padding: 30px 20px;
    }

    .main_pdet:before,
    .main_pdet:after {
        display: none;
    }

    .pricing_box_wrapper h2 {
        font-size: 36px !important;
        line-height: 1 !important;
        padding-right: 0;
    }

    .monthly {
        float: none;
        top: 0;
        left: 0;
        display: block;
        text-align: center;
        margin-top: 5px;
    }

    .dollarr {
        font-size: 20px !important;
    }

    .pricing_plan_wrapper {
        padding: 30px 0;
    }
}

/* ============================================
   桌面端控制面板布局：侧边栏与内容居中对齐
   云电脑列表页 (.panel-wide) 保持全宽
   ============================================ */
@media (min-width: 992px) {
    .job_single_wrapper .container-fluid {
        max-width: 1400px;
        margin: 0 auto;
    }

    .job_single_wrapper.panel-wide .container-fluid {
        max-width: none;
    }
}

/* ============================================
   平板竖屏断点：<= 991px
   ============================================ */
@media (max-width: 991px) {
    /* 侧边栏切换按钮在平板端也显示 */
    .sidebar-toggle {
        display: flex;
    }

    .left-nav-wrapper {
        display: none;
    }

    .left-nav-wrapper.show {
        display: block;
    }

    /* 侧边栏遮罩层 */
    .sidebar-overlay {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: 999;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .sidebar-toggle {
        position: relative;
        z-index: 1001;
    }

    .left-nav-wrapper {
        position: relative;
        z-index: 1001;
    }
}