/* ============================================================
   UI 2.0 设计层 — 私域引流宝控制台
   在 ylb.css 之后加载，统一重设计所有菜单页的视觉与移动端适配
   ============================================================ */

/* ---------- 设计变量 ---------- */
#app {
    --ui-brand: #3b5ee1;
    --ui-brand-600: #2e4dd0;
    --ui-brand-050: #eef2fe;
    --ui-brand-100: #e0e7fd;
    --ui-bg: #f4f6fb;
    --ui-surface: #ffffff;
    --ui-text: #1f2633;
    --ui-text-2: #3a4356;
    --ui-muted: #8a93a6;
    --ui-line: #e9edf5;
    --ui-radius: 16px;
    --ui-shadow: 0 1px 2px rgba(20, 30, 60, .04), 0 6px 24px rgba(20, 30, 60, .06);
    --ui-shadow-lg: 0 20px 60px rgba(20, 30, 60, .16);
}

/* ---------- 全局字体 ---------- */
#app, #app * {
    font-family: "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Helvetica Neue", system-ui, -apple-system, Arial, sans-serif;
}

body {
    background: var(--ui-bg, #f4f6fb);
}

/* ============================================================
   左侧导航
   ============================================================ */
#app .left {
    width: 232px;
    background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
    border-right: 1px solid var(--ui-line);
    box-shadow: none;
    overflow: hidden;
}

#app .left .dhview {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 22px 14px 16px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

#app .left .dhview .logo {
    width: 100%;
    height: 46px;
    margin-bottom: 24px;
    background-size: contain;
    background-position: left center;
    flex-shrink: 0;
}

#app .left .dhview ul {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #d7ddeb transparent;
}

#app .left .dhview ul::-webkit-scrollbar {
    width: 4px;
}

#app .left .dhview ul::-webkit-scrollbar-thumb {
    background: #d7ddeb;
    border-radius: 4px;
}

#app .left .dhview ul li {
    width: 100%;
    height: 42px;
    line-height: 42px;
    list-style: none;
    font-size: 15px;
    margin-bottom: 4px;
    border-radius: 10px;
    transition: background .18s, color .18s;
    box-sizing: border-box;
}

#app .left .dhview ul li:hover {
    cursor: pointer;
    background: #eef2fc;
    border-radius: 10px;
}

#app .left .dhview a {
    display: block;
    text-decoration: none;
    color: #45506a;
    border-radius: 10px;
    transition: .18s;
}

#app .left .dhview a:hover {
    color: var(--ui-brand);
}

/* 导航项内部布局 */
.nav-li {
    display: flex;
    align-items: center;
    height: 42px;
}

.icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    margin: 0 0 0 14px;
    flex-shrink: 0;
}

.nav-text {
    flex: 1;
    padding-left: 10px;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 选中态 */
#app .left .dhview a.selected {
    background: var(--ui-brand-050);
    color: var(--ui-brand);
    border-radius: 10px;
    position: relative;
    font-weight: 600;
}

#app .left .dhview a.selected::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 4px;
    background: var(--ui-brand);
}

/* 底部账号卡 */
#app .left .account {
    width: 100%;
    margin: 14px 0 0;
    background: #f4f6fc;
    border: 1px solid var(--ui-line);
    border-radius: 12px;
    text-align: center;
    font-size: 14px;
    position: static;
    padding: 10px 0;
    flex-shrink: 0;
    box-sizing: border-box;
}

#app .left .account .version {
    color: var(--ui-muted);
    font-size: 12px;
    margin-bottom: 3px;
}

#app .left .account .user_name {
    text-decoration: none;
    color: var(--ui-text-2);
    font-weight: 600;
}

#app .left .account .user_name .exitLogin {
    cursor: pointer;
    font-size: 13px;
    font-weight: 400;
    color: var(--ui-muted);
    margin-left: 4px;
}

#app .left .account .user_name .exitLogin:hover {
    color: #fa5151;
}

/* ============================================================
   右侧内容区
   ============================================================ */
#right {
    height: auto;
    margin-left: 232px;
    margin-bottom: 80px;
    padding: 6px 32px 0;
    box-sizing: border-box;
    max-width: 1560px;
}

#right h3 {
    color: var(--ui-text);
    font-size: 22px;
    margin-top: 26px;
    font-weight: 700;
    letter-spacing: .5px;
}

#right h3 .mbx {
    color: var(--ui-muted);
    font-weight: 500;
}

#right h4 {
    color: var(--ui-text);
    margin-top: 30px;
}

#right .mianbaoxie_a {
    text-decoration: none;
    color: var(--ui-text);
    transition: .15s;
}

#right .mianbaoxie_a:hover {
    color: var(--ui-brand);
}

/* 内容卡片 */
#right .data-card {
    width: 100%;
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius);
    padding: 22px 24px;
    margin: 16px 0 0 0;
    box-shadow: var(--ui-shadow);
    box-sizing: border-box;
}

/* ============================================================
   按钮
   ============================================================ */
#app .default-btn {
    border: none;
    color: #fff;
    background: linear-gradient(135deg, #4a6ef5, var(--ui-brand));
    padding: 8px 18px;
    outline: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: .18s;
    box-shadow: 0 4px 14px rgba(59, 94, 225, .28);
}

#app .default-btn:hover {
    background: linear-gradient(135deg, var(--ui-brand), var(--ui-brand-600));
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(59, 94, 225, .34);
}

#app .default-btn:active {
    transform: translateY(0);
}

#app .tint-btn {
    border: none;
    color: #4a5568;
    background: #f0f2f8;
    padding: 8px 16px;
    outline: none;
    border-radius: 10px;
    font-size: 14px;
    cursor: pointer;
    transition: .18s;
}

#app .tint-btn:hover {
    color: #fff;
    background: var(--ui-brand);
}

#app .red-btn {
    border: none;
    color: #fff;
    background: #fa5151;
    padding: 8px 14px;
    outline: none;
    border-radius: 10px;
    font-size: 14px;
    cursor: pointer;
    transition: .18s;
}

#app .red-btn:hover {
    background: #e64340;
}

/* ============================================================
   表单
   ============================================================ */
#app input,
#app select,
#app textarea {
    color: var(--ui-text-2);
}

#app .form-control {
    border: 1px solid #dfe4ef;
    border-radius: 10px;
    color: var(--ui-text-2);
    transition: border-color .15s, box-shadow .15s;
}

#app .form-control:focus {
    border-color: #7c96f0;
    box-shadow: 0 0 0 3px rgba(59, 94, 225, .12);
}

#app select.form-control {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238a93a6' d='M1.4.6 6 5.2 10.6.6 12 2 6 8 0 2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

/* ============================================================
   表格
   ============================================================ */
#right .data-card .data-list {
    width: 100%;
    margin: 18px 0 0;
    font-size: 14px;
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid #f0f2f8;
    -webkit-overflow-scrolling: touch;
}

#app .data-list table,
#app .data-list .table {
    margin: 0;
    border-collapse: collapse;
}

#app .data-list .table thead th,
#app .data-list thead th {
    background: #f7f9fd;
    color: #7b869c;
    font-size: 13px;
    font-weight: 600;
    padding: 12px 14px;
    border-bottom: 1px solid var(--ui-line);
    white-space: nowrap;
}

#app .data-list .table td,
#app .data-list td {
    padding: 12px 14px;
    border-bottom: 1px solid #f2f4f9;
    color: var(--ui-text-2);
    font-size: 14px;
    vertical-align: middle;
    white-space: nowrap;
}

#app .data-list .table tbody tr,
#app .data-list tbody tr {
    transition: background .15s;
}

#app .data-list .table tbody tr:hover td,
#app .data-list tbody tr:hover td {
    background: #f8faff;
}

#app .data-list tbody tr:last-child td {
    border-bottom: none;
}

#app .table .caozuo {
    font-size: 13px;
    padding: 5px 10px;
    font-weight: 500;
    color: #4a5568;
    background: #f0f2f8;
    border-radius: 8px;
    cursor: pointer;
    transition: .15s;
}

#app .table .caozuo:hover {
    background: var(--ui-brand);
    color: #fff;
}

/* ============================================================
   分页
   ============================================================ */
#right .fenye ul li button,
#right .data-list .fy ul li button {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: #f0f2f8;
    color: #4a5568;
    transition: .15s;
}

#right .fenye ul li button:hover,
#right .data-list .fy ul li button:hover {
    background: var(--ui-brand);
    color: #fff;
}

/* ============================================================
   标签
   ============================================================ */
.light-tag,
.table .light-tag {
    background: #f0f2f8;
    color: #4a5568;
    border-radius: 8px;
    transition: .15s;
}

.table .light-tag:hover {
    background: var(--ui-brand);
    color: #fff;
}

#right .dark-tag {
    background: var(--ui-brand-050);
    color: var(--ui-brand);
    border-radius: 8px;
}

/* ============================================================
   弹窗
   ============================================================ */
#app .modal-content {
    border: none;
    border-radius: 18px;
    box-shadow: var(--ui-shadow-lg);
    overflow: hidden;
}

#app .modal-header {
    border-bottom: 1px solid var(--ui-line);
    padding: 18px 22px;
}

#app .modal-header .modal-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--ui-text);
}

#app .modal-header .close {
    opacity: .4;
    font-size: 22px;
    outline: none;
}

#app .modal-header .close:hover {
    opacity: .9;
}

#app .modal-body {
    padding: 22px;
}

#app .modal-footer {
    border-top: 1px solid var(--ui-line);
    padding: 14px 22px;
}

/* ============================================================
   搜索栏
   ============================================================ */
#right .search-view {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 10px;
    vertical-align: middle;
}

#right .search-view .search-inp {
    width: 230px;
    height: 36px;
    font-size: 14px;
}

/* 上传控件统一观感 */
#app .input-group-text {
    border-radius: 10px;
}

/* ============================================================
   移动端顶栏 & 抽屉导航（由 getNavList.js 注入 DOM）
   ============================================================ */
.m-topbar {
    display: none;
}

.m-mask {
    display: none;
}

@media (max-width: 900px) {

    /* 兜底：页面不再整体横向滚动（表格内部各自滚动） */
    html, body {
        overflow-x: hidden;
        max-width: 100%;
    }

    /* ---------- 顶栏 ---------- */
    .m-topbar {
        display: flex;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 54px;
        padding: 0 12px;
        background: rgba(255, 255, 255, .94);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--ui-line);
        z-index: 1030;
    }

    .m-burger {
        width: 40px;
        height: 40px;
        border: none;
        background: transparent;
        padding: 0;
        cursor: pointer;
        border-radius: 10px;
        flex-shrink: 0;
    }

    .m-burger:active {
        background: #f0f2f8;
    }

    .m-burger span {
        display: block;
        width: 20px;
        height: 2px;
        background: #2c3550;
        margin: 4px auto;
        border-radius: 2px;
        transition: transform .25s, opacity .25s;
    }

    body.m-nav-open .m-burger span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    body.m-nav-open .m-burger span:nth-child(2) {
        opacity: 0;
    }

    body.m-nav-open .m-burger span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    .m-topbar .m-title {
        flex: 1;
        text-align: center;
        font-size: 16px;
        font-weight: 600;
        color: var(--ui-text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 0 6px;
    }

    .m-topbar .m-spacer {
        width: 40px;
        flex-shrink: 0;
    }

    /* ---------- 遮罩 ---------- */
    .m-mask {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(15, 23, 42, .48);
        z-index: 1049;
        opacity: 0;
        pointer-events: none;
        transition: opacity .25s;
    }

    body.m-nav-open .m-mask {
        opacity: 1;
        pointer-events: auto;
    }

    /* ---------- 侧边栏变抽屉 ---------- */
    #app .left {
        width: 280px;
        transform: translateX(-102%);
        transition: transform .28s ease;
        z-index: 1051;
        box-shadow: none;
    }

    body.m-nav-open #app .left {
        transform: translateX(0);
        box-shadow: 12px 0 48px rgba(15, 23, 42, .18);
    }

    body.m-nav-open {
        overflow: hidden;
    }

    /* ---------- 内容区 ---------- */
    #right {
        margin-left: 0;
        padding: 66px 12px 0;
        margin-bottom: 40px;
    }

    #right h3 {
        margin-top: 12px;
        font-size: 18px;
        line-height: 1.5;
    }

    #right .data-card {
        padding: 14px;
        border-radius: 14px;
        margin-top: 12px;
    }

    /* ---------- 通用控件触控优化 ---------- */
    #app .form-control,
    #app select.form-control,
    #app textarea.form-control {
        font-size: 16px; /* 防止 iOS 聚焦自动放大 */
        min-height: 40px;
    }

    #app .default-btn,
    #app .tint-btn,
    #app .red-btn {
        min-height: 38px;
    }

    #app .modal-dialog {
        margin: 8px auto !important;
        width: auto !important;
        max-width: calc(100vw - 16px) !important;
    }

    /* 各页面弹窗里大量写死 width:650px / max-width:930px 的内联样式，这里强制收敛 */
    #app .modal-content {
        width: auto !important;
        max-width: 100% !important;
    }

    #app .modal-body {
        padding: 16px;
        max-height: 62vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #app .modal-header {
        padding: 14px 16px;
    }

    #app .modal-footer {
        padding: 10px 16px;
        flex-wrap: wrap;
        gap: 8px;
    }

    #app .modal-footer .footer-btn {
        display: flex;
        gap: 8px;
        width: 100%;
    }

    #app .modal-footer .footer-btn button {
        flex: 1;
    }

    /* 按钮区换行 */
    #right .data-card .button-view .flex-button-view {
        flex-wrap: wrap;
        gap: 8px;
    }

    #right .data-card .button-view .button-daohang,
    #right .data-card .button-view .button-gongneng {
        flex: 1 1 100%;
    }

    #right .data-card .button-view .button-gongneng .tint-btn {
        float: none;
        margin-left: 0;
    }

    #right .search-view {
        display: flex;
        margin-left: 0;
        margin-top: 10px;
        width: 100%;
    }

    #right .search-view .search-inp {
        flex: 1;
        width: 100%;
    }

    /* 表格容器吃满宽度，内部横向滚动 */
    #right .data-card .data-list {
        width: 100%;
        margin: 14px 0 0;
        border-radius: 10px;
    }

    /* 个别页面把 data-list 直接写在 <table> 上，块化后才能横向滚动 */
    table.data-list {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #app .data-list .table td,
    #app .data-list td {
        padding: 10px 12px;
        font-size: 13px;
    }

    #app .data-list .table thead th,
    #app .data-list thead th {
        padding: 10px 12px;
        font-size: 12px;
    }

    /* 表格左右滚动提示 */
    #right .data-card .data-list {
        background:
            linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)),
            linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) right,
            radial-gradient(farthest-side at 0 50%, rgba(31, 38, 51, .08), transparent) left,
            radial-gradient(farthest-side at 100% 50%, rgba(31, 38, 51, .08), transparent) right;
        background-repeat: no-repeat;
        background-size: 24px 100%, 24px 100%, 12px 100%, 12px 100%;
        background-attachment: local, local, scroll, scroll;
    }

    /* 面包屑不换行溢出 */
    #right h3 {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 安全区 */
    #app .left .account {
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    }
}

/* 中屏微调：窄桌面收窄内边距 */
@media (min-width: 901px) and (max-width: 1200px) {
    #right {
        padding: 6px 20px 0;
    }

    #right .data-card {
        padding: 18px 20px;
    }
}

/* 超小屏（<380px） */
@media (max-width: 380px) {
    #right {
        padding: 62px 8px 0;
    }

    #right .data-card {
        padding: 12px;
    }
}