/* ============================================================
 * 房飞布 · 专员列表页（过户员 / 贷款专员 / 法拍专员）
 * staff-beautify.css
 *
 * 作用域：body.staff-page
 *   覆盖 Index/anjie.html、Index/daikuan.html、Index/fp.html 三页
 *
 * 注意：.top_menu / .listBanner / .tj_* 都是 style.css 里的**全站共用类**，
 *   所以每条规则都必须带 body.staff-page 前缀，否则会污染其它页面。
 *
 * 本文件不含 @keyframes 等 `{xxx}` 块嵌套写法，符合项目模板引擎约束。
 * ============================================================ */

/* ---------- 0. 页面底色与横向留白 ---------- */
body.staff-page {
    background: #f5f6f8;
}

/* ---------- 1. 顶栏：灰底裸文字 → 白底 + 细阴影 ----------
 * 这三页是「返回 + 标题」的二级页，不是搜索页，
 * 用白底顶栏比橙色搜索栏更符合层级，也能让上面的橙色 banner 更突出。 */
body.staff-page .top_menu {
    height: 50px;
    line-height: 50px;
    background: #fff;
    color: #1f2733;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: .3px;
    border-bottom: none;
    box-shadow: 0 1px 0 #eef0f3, 0 2px 10px rgba(31, 39, 51, .05);
    box-sizing: border-box;
}
/* 返回箭头：放大并加深，让点击热区更明显 */
body.staff-page .top_menu a.left_return::before {
    width: 11px;
    height: 11px;
    border-left: 2px solid #1f2733;
    border-top: 2px solid #1f2733;
    left: 16px;
    top: 18px;
}

/* ---------- 2. 筛选区：裸文字 → 两个胶囊按钮 ---------- */
body.staff-page .search_block {
    display: flex;
    align-items: center;
    gap: 10px;
    height: auto;
    padding: 12px 15px;
    box-sizing: border-box;
    background: transparent;
}
body.staff-page .slecctdown {
    /* 原样式 25% 宽 + 右侧小箭头贴边，两个按钮离得太远且看不出可点 */
    width: auto;
    flex: 1 1 0;
    min-width: 0;
    height: 36px;
    line-height: 36px;
    padding: 0 30px 0 14px;
    background-color: #fff;
    background-image: url("../images/index_icon1.png");
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-size: 9px 5px;
    border: 1px solid #eef0f3;
    border-radius: 18px;
    box-sizing: border-box;
    font-size: 13.5px;
    font-weight: 500;
    color: #1f2733;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .15s, border-color .15s;
}
body.staff-page .slecctdown:active {
    background-color: #fff6ef;
    border-color: #ffd9b8;
}
/* 第一个是城市，用橙色描边强调它是「定位」而不是普通筛选 */
body.staff-page .slecctdown:first-child {
    flex: 0 0 auto;
    max-width: 130px;
    color: #ff6e00;
    border-color: #ffd9b8;
    background-color: #fff8f2;
}

/* ---------- 3. 顶部 Banner ---------- */
body.staff-page #box {
    /* ⚠️ style.css 里 #box 已经是 width: calc(100% - 30px); margin: 0 auto，
     * 相当于左右各让 15px。这里再加 padding 就会变成 30px/侧（实测只剩 330px）。
     * 所以只补 0，宽度交给 #box 原有规则。 */
    padding: 0;
    box-sizing: border-box;
}
body.staff-page #box > img {
    width: 100%;
    display: block;
    border-radius: 14px !important;
    box-shadow: 0 3px 14px rgba(31, 39, 51, .07);
}

/* ---------- 4. 专员卡片 ---------- */
body.staff-page .listBanner {
    overflow: visible;
}
body.staff-page .listBanner ul {
    margin: 0;
    padding: 0;
}
body.staff-page .listBanner li.tj_list {
    position: relative;
    margin: 12px 0;
    padding: 16px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(31, 39, 51, .06);
    box-sizing: border-box;
    transition: transform .15s ease;
    overflow: hidden;
}
body.staff-page .listBanner li.tj_list:active {
    transform: scale(.985);
}
/* 头像：54px 圆形 + 浅橙底圈，尺寸保持不变避免改图 */
body.staff-page .tj_img {
    float: none;
    width: 54px;
    flex: 0 0 54px;
    margin: 0;
}
body.staff-page .tj_img img {
    width: 54px;
    height: 54px;
    margin: 0;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    background: #fff3e9;
    box-shadow: 0 0 0 2px #fff5ec, 0 2px 8px rgba(255, 110, 0, .12);
}
/* 中间信息区 */
body.staff-page .tj_middle {
    float: none;
    max-width: none;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 0 0 13px;
    text-align: left;
}
body.staff-page .tj_name {
    height: auto;
    line-height: 22px;
    font-size: 16px;
    font-weight: 600;
    color: #1f2733;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 名字后面那串「电话：xxx」是内联写死的，这里把它降为次要信息 */
body.staff-page .tj_name span {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #9aa0aa;
    margin-left: 10px !important;
}
body.staff-page .tj_detail {
    height: auto;
    line-height: 20px;
    margin: 5px 0 0;
    font-size: 12.5px;
    color: #6b7280;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 空标签块不再占位 */
body.staff-page .tj_label {
    margin: 0;
    height: 0;
    display: none;
}

/* 卡片主体改用 flex 布局（原来是 float + absolute，窄屏容易错位） */
body.staff-page .tj_list {
    display: flex;
    align-items: center;
}
body.staff-page .tj_list > .cl {
    display: none;
}

/* 电话按钮：浅灰小圆 → 橙色渐变圆钮 */
body.staff-page .tj_right {
    float: none;
    width: auto;
    flex: 0 0 auto;
    position: static;
}
/* 电话按钮：浅灰小圆 → 橙色渐变圆钮
 * ⚠️ call_mobile.png 本身是**橙色**图标（实测平均 RGB 255,95,0），
 *    铺在橙色底上等于隐形。这里不用它，改用 CSS 内联 SVG 画白色电话。 */
body.staff-page .tj_call {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    float: none;
    border-radius: 50%;
    background-color: #ff6e00;
    background-image: linear-gradient(135deg, #ff9a3c, #ff6e00);
    background-repeat: no-repeat;
    box-shadow: 0 3px 10px rgba(255, 110, 0, .3);
    -webkit-tap-highlight-color: transparent;
    transition: transform .14s;
    /* 用遮罩把 PNG/SVG 之外的东西清掉，仅保留我们画的白色听筒 */
    color: #fff;
    font-size: 0;
}
body.staff-page .tj_call::before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background-color: #fff;
    /* 白色电话听筒图形（纯 CSS mask，不依赖任何图片素材） */
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
/* 老 WebView 不支持 mask 时的兜底：退回原图标（虽然同色，但至少不是空白圆） */
@supports not ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
    body.staff-page .tj_call::before {
        display: none;
    }
    body.staff-page .tj_call {
        background-image: url("/Public/images/call_mobile.png");
        background-position: center center;
        background-size: 18px;
    }
}
body.staff-page .tj_call:active {
    transform: scale(.92);
}

/* ---------- 5. 空状态（法拍专员当前无数据） ----------
 * 后端 type=3 返回 0 条，页面上原本只剩一张 banner 和一片空白，
 * 用户会以为页面坏了。这里给一个明确的空状态 + 回退入口。 */
body.staff-page .staff-empty {
    /* ⚠️ 不要在这里写 display:none！
     * 该元素由 Vue 的 v-show="empty" 控制显隐：v-show 为真时会写内联 style=""
     * （即 display 回到默认），为假时写 display:none。
     * 若这里再写 display:none，会以“样式表规则”压过“inline 的默认值”，
     * 导致 empty=true 时依然不显示（实测踩过：empty 已为 true 但 display 仍是 none）。
     * 默认由 Vue 管，这里只负责“显示时”的样式。 */
    margin: 12px 0 0;
    padding: 48px 24px 52px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(31, 39, 51, .06);
    text-align: center;
    box-sizing: border-box;
}
body.staff-page .staff-empty .icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff7f1;
    border-radius: 50%;
    color: #ff9a3c;
}
body.staff-page .staff-empty .icon svg {
    width: 30px;
    height: 30px;
}
body.staff-page .staff-empty .title {
    font-size: 15px;
    font-weight: 600;
    color: #1f2733;
    line-height: 22px;
}
body.staff-page .staff-empty .desc {
    margin-top: 6px;
    font-size: 12.5px;
    color: #9aa0aa;
    line-height: 19px;
}
body.staff-page .staff-empty .action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 20px;
    height: 40px;
    padding: 0 22px;
    border-radius: 20px;
    background: linear-gradient(135deg, #ff9a3c, #ff6e00);
    box-shadow: 0 3px 12px rgba(255, 110, 0, .28);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}
body.staff-page .staff-empty .action:active {
    transform: scale(.97);
}

/* ---------- 6. 底部留白：避开底部导航 + 凸起发布按钮 ---------- */
body.staff-page #vue_box {
    padding-bottom: 120px;
    box-sizing: border-box;
}

/* ---------- 7. 区域选择抽屉（沿用全局思路，只做视觉统一） ---------- */
body.staff-page .select_area {
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -6px 28px rgba(0, 0, 0, .14);
    padding: 6px 0 env(safe-area-inset-bottom, 0px);
    -webkit-overflow-scrolling: touch;
}
body.staff-page .select_area > div {
    height: 48px;
    line-height: 48px;
    width: auto;
    margin: 0 20px;
    font-size: 14.5px;
    color: #1f2733;
    border-bottom: 1px solid #f2f4f7;
}
body.staff-page .select_area > div:first-child {
    color: #ff6e00;
    font-weight: 500;
}
body.staff-page .select_area > div:last-child {
    border-bottom: none;
}