/* ===========================================================
 * 开发者中心（developer）模块移动端自适应
 * 仅在 developer/*.php 页面引入，不影响公共 CSS 及其他模块。
 * 断点：768px 及以下视为移动端。
 * =========================================================== */

@media (max-width: 768px) {
    /* 取消全站 body 的最小宽度限制，避免横向溢出 */
    body {
        min-width: 0 !important;
        overflow-x: hidden;
    }

    /* 顶部固定头部占位高度回落（new_header 移动端为 56px） */
    #mine_worksheet,
    .infomation {
        padding-top: 66px !important;
    }

    /* ---------- 整体布局：1200px / 1010px 改为流式 ---------- */
    .layout-component-main {
        display: block;
    }

    .main-wrapper {
        width: 100% !important;
        display: block;
        padding: 10px 0 24px;
        box-sizing: border-box;
    }

    .main-container {
        width: 100% !important;
        min-height: auto !important;
        box-sizing: border-box;
    }

    /* ---------- 左侧导航：横向滚动条 ---------- */
    #appmeber_left_nav {
        width: 100%;
    }

    .member-menu {
        flex: none !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 10px;
    }

    .member-menu-header {
        height: 48px;
        line-height: 48px;
        padding-left: 14px;
        font-size: 15px;
    }

    .member-menu-header a {
        font-size: 15px;
    }

    /* 菜单主体：横向一行滚动，纵向不再撑高 */
    .member-menu-body {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 6px;
        padding: 10px 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .member-menu-body::-webkit-scrollbar {
        height: 4px;
    }

    .member-menu-body::-webkit-scrollbar-thumb {
        background: #d4d4d4;
        border-radius: 4px;
    }

    .member-menu-body .menu-item {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 6px;
        margin-bottom: 0;
        overflow: visible;
    }

    /* 分组标题在横向条里作为分隔标签 */
    .member-menu-body .menu-item .menu-title {
        margin-bottom: 0;
        padding-top: 0;
        white-space: nowrap;
        font-size: 13px;
        color: #999;
    }

    .member-menu-body .menu-item .menu-title::before {
        margin-right: 6px;
    }

    .member-menu-body .menu-item .menu-children {
        padding: 0;
        margin-bottom: 0;
        white-space: nowrap;
    }

    .member-menu-body .menu-item .menu-children > a {
        display: inline-block;
        padding: 6px 12px;
        font-size: 13px;
        background: #f5f7fa;
        border-radius: 16px;
    }

    .member-menu-body .menu-item .menu-children.select > a {
        background: #e6f0ff;
        color: #007BFF;
    }

    /* ---------- 内容容器内边距 ---------- */
    .balance_list {
        padding: 0 10px 10px !important;
    }

    .balance_list .pane-label-content {
        left: auto;
        right: 10px;
        top: 10px;
    }

    /* ---------- 查询表单：取消右浮按钮，纵向排列 ---------- */
    .query-form {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
    }

    .query-form .el-button {
        margin-left: 0 !important;
    }

    .query-form .el-select,
    .query-form .el-select .el-input,
    .query-form .el-input {
        width: 100% !important;
        max-width: 100%;
        margin-left: 0 !important;
    }

    /* el-row 内的查询区也放开 */
    .el-row .el-form.query-form {
        margin-top: 8px;
    }

    /* ---------- Element 表格：容器横向滚动，避免列被压扁 ---------- */
    .order_list_item,
    .item-center {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .order_list_item .el-table,
    .item-center .el-table {
        min-width: 640px;
    }

    /* ---------- Element 弹窗：窄屏占满 ----------
     * 用 body 前缀提高特异性，确保覆盖各页内联 <style> 中
     * 带 !important 的自定义弹窗固定宽度（880/990/1200px）。 */
    body .el-dialog,
    body .remote_dialog .el-dialog,
    body .developer_dialog .el-dialog,
    body .solution-config-dialog.el-dialog,
    body .solution-config-dialog .el-dialog {
        width: 92% !important;
        max-width: 92% !important;
        margin-top: 10vh !important;
    }

    /* 超高弹窗在窄屏限制高度并允许内部滚动 */
    body .solution-config-dialog.el-dialog {
        height: auto !important;
        max-height: 84vh !important;
    }

    .el-dialog__body {
        max-height: 64vh;
        overflow-y: auto;
    }

    .remote_dialog .el-dialog .el-form-item {
        margin-left: 0;
    }

    .el-dialog .el-form-item__label {
        float: none;
        display: block;
        width: auto !important;
        text-align: left;
        padding: 0 0 4px;
    }

    .el-dialog .el-form-item__content {
        margin-left: 0 !important;
    }

    .el-message-box {
        width: 88% !important;
    }

    /* ---------- 应用卡片网格：每行自适应 ---------- */
    .application-list {
        justify-content: space-between;
    }

    .application-item {
        width: 48% !important;
        margin-right: 0 !important;
        margin-bottom: 16px;
    }

    .application-item:nth-child(4n) {
        margin-right: 0 !important;
    }

    /* ---------- 标签页 / 分页 ---------- */
    .el-tabs__nav-wrap {
        padding: 0 4px;
    }

    .page {
        margin-top: 14px;
        overflow-x: auto;
    }

    .el-pagination {
        white-space: nowrap;
    }

    /* ---------- 设置页表单（setting.php，my_infomation 样式） ---------- */
    .infomation-save {
        width: auto !important;
    }
}

/* 更窄的小屏（≤480px）：应用卡片单列 */
@media (max-width: 480px) {
    .application-item {
        width: 100% !important;
    }
}