/* =============================================================
   房源页 PC 顶部排版（方案 A）— 生产外挂层
   全部规则包裹在 @media (min-width:769px) 内，
   窄屏下不匹配任何一条 → 手机端生产结构原样保留。
   回滚：删除 index.html 里对本文件与 houses-pc-top.js
       两个引用即可，不改动任何既有文件内容。

   数值全部取自已批准的预览 houses-pc-top-a，非重新估算。
   ============================================================= */

@media (min-width:769px){

  /* ==========================================================
     1) 标题区：只留右侧「房源列表 / 录入统计」紧凑 Tab
     —— 左侧 h1「房源列表」不生成（全局顶栏 #page-title 已有）。
     ========================================================== */
  #page-houses .hp2-head{
    display:flex !important; align-items:center !important;
    justify-content:flex-end !important;
    gap:16px !important; margin:0 0 8px !important;
    padding:0 !important; height:34px !important;
  }
  #page-houses .hp2-head-main{display:none !important}

  /* 右侧「房源列表 / 录入统计」紧凑 Tab —— 数值取自预览实测：
     两个 tab 各 99×33、字号 12.5px、左右内边距 14px、整体宽 211px。
     生产原样式是 68×39 + 上下 10px 内边距（偏窄偏挤），此处校正。 */
  #page-houses .sf-mode-tabs{
    display:inline-flex !important; align-items:center !important;
    gap:0 !important; height:33px !important;
  }
  #page-houses .sf-mode-tabs .sf-mode-tab{
    flex:0 0 auto !important;
    width:auto !important; min-width:0 !important;
    height:33px !important; line-height:33px !important;
    padding:0 14px !important;
    font-size:12.5px !important; font-weight:600 !important;
    display:inline-flex !important; align-items:center !important;
    gap:5px !important; white-space:nowrap !important;
    box-sizing:border-box !important;
    border-radius:9px !important;
    margin:0 !important;
  }
  #page-houses .sf-mode-tabs .sf-mode-tab:first-child{border-top-right-radius:0 !important;border-bottom-right-radius:0 !important}
  #page-houses .sf-mode-tabs .sf-mode-tab:last-child{border-top-left-radius:0 !important;border-bottom-left-radius:0 !important}

  /* 生产 .page-content 上内边距 20px，标题删除后显得空，收到 10px，
     使统计条整体上提（124 -> 107）。 */
  #page-houses .page-content{padding-top:10px !important}

  /* ==========================================================
     2) 五项统计 → 白色圆角大卡片（内分 5 格，格间浅灰间隙、无竖线）
     左侧浅色圆底图标 + 右侧「标签 / 数字 / 较上月」三行。
     配色取自预览实测：
       蓝 #1065fd/底#e5eefd  紫 #902cfb/底#f1ecfe
       红 #fe4d4d/底#fdeeee  绿 #0ac059/底#e6f9ed
       橙 #fd8707/底#fef2ec
     ========================================================== */
  #page-houses .ym-stats-bar.v3{
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:10px !important;
    background:transparent !important; border:0 !important;
    padding:0 !important; margin:0 0 12px !important;
    box-shadow:none !important; border-radius:0 !important;
    overflow:visible !important;
  }
  /* 每格 = 独立白卡：圆角 + 极浅边框 + 微阴影（无竖分割线） */
  #page-houses .ym-stats-bar.v3 .ym-stat-item{
    flex:none !important; min-width:0;
    display:flex !important; flex-direction:row !important;
    align-items:center !important; justify-content:flex-start !important;
    gap:12px !important; padding:12px 14px !important;
    background:#fff !important;
    background-image:none !important;
    border:1px solid #eef1f6 !important; border-radius:12px !important;
    box-shadow:0 1px 2px rgba(15,23,42,.045) !important;
    text-align:left !important; position:relative;
  }
  /* 关掉生产残留的伪元素（顶部色条 / 竖分割线） */
  #page-houses .ym-stats-bar.v3 .ym-stat-item:before,
  #page-houses .ym-stats-bar.v3 .ym-stat-item:after{
    display:none !important; content:none !important;
  }
  #page-houses .ym-stats-bar.v3 .ym-stat-item:hover{
    transform:none !important; background:#fff !important;
    border-color:#e2e8f0 !important;
  }
  #page-houses .ym-stats-bar.v3 .ym-stat-item:active{transform:none !important}

  /* 可点击的两项（空置/已租）保留手型与轻量悬停提示 */
  #page-houses .ym-stats-bar.v3 .ym-stat-vacant:hover .ym-stat-value,
  #page-houses .ym-stats-bar.v3 .ym-stat-rented:hover .ym-stat-value{filter:brightness(.82)}
  #page-houses .ym-stats-bar.v3 .ym-stat-item.active{
    background:#f5f8ff !important; box-shadow:none !important;
  }
  #page-houses .ym-stats-bar.v3 .ym-stat-item.active .ym-stat-label{color:#2563eb !important}
  #page-houses .ym-stats-bar.v3 .ym-stat-item.active .ym-stat-value{color:#1d4ed8 !important}

  /* 图标：浅色圆底 + 饱和色笔画
     圆直径 ≈ 卡片高度 1/3 → 48px，内部 SVG 24px，避免「圆大图小」。 */
  #page-houses .ym-stats-bar.v3 .ym-stat-icon{
    flex:0 0 auto !important;
    width:48px !important; height:48px !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    border-radius:50% !important;
    font-size:17px !important; line-height:1 !important;
    margin:0 !important; opacity:1 !important;
    background:#f1f5f9;
  }
  #page-houses .ym-stats-bar.v3 .ym-stat-icon svg{
    width:24px !important; height:24px !important;
    display:block;
  }
  #page-houses .ym-stats-bar.v3 .ym-stat-item:nth-child(1) .ym-stat-icon{background:#e5eefd}
  #page-houses .ym-stats-bar.v3 .ym-stat-item:nth-child(2) .ym-stat-icon{background:#f1ecfe}
  #page-houses .ym-stats-bar.v3 .ym-stat-item:nth-child(3) .ym-stat-icon{background:#fdeeee}
  #page-houses .ym-stats-bar.v3 .ym-stat-item:nth-child(4) .ym-stat-icon{background:#e6f9ed}
  #page-houses .ym-stats-bar.v3 .ym-stat-item:nth-child(5) .ym-stat-icon{background:#fef2ec}

  /* 右侧文字列：标签 → 数字 → 较上月
     .ym-stat-body / .ym-stat-sub 由 houses-pc-top.js 补建（生产不打这两个 class） */
  #page-houses .ym-stats-bar.v3 .ym-stat-body{
    display:flex !important; flex-direction:column !important;
    align-items:flex-start !important; justify-content:center !important;
    min-width:0; gap:1px;
  }
  /* 名称（第一行，浅灰） */
  #page-houses .ym-stats-bar.v3 .ym-stat-label{
    display:block !important; font-size:12px !important; font-weight:500 !important;
    color:#94a3b8 !important; letter-spacing:.02em !important;
    margin:0 !important; line-height:1.25 !important; order:1;
  }
  /* 大数字（第二行，深色加粗） */
  #page-houses .ym-stats-bar.v3 .ym-stat-value{
    display:block !important; font-size:19px !important; font-weight:700 !important;
    line-height:1.2 !important; color:#0f172a !important;
    font-variant-numeric:tabular-nums; order:2;
  }
  /* 颜色只落在数字上（空置红 / 已租绿 / 出租率蓝） */
  #page-houses .ym-stats-bar.v3 .ym-stat-vacant  .ym-stat-value{color:#ef4444 !important}
  #page-houses .ym-stats-bar.v3 .ym-stat-rented  .ym-stat-value{color:#16a34a !important}
  #page-houses .ym-stats-bar.v3 .ym-stat-rate    .ym-stat-value{color:#2563eb !important}
  #page-houses .ym-stats-bar.v3 .ym-stat-item:nth-child(1) .ym-stat-value{color:#0f172a !important}
  #page-houses .ym-stats-bar.v3 .ym-stat-item:nth-child(2) .ym-stat-value{color:#0f172a !important}

  /* 「较上月 —」占位（第三行）—— 后端未提供真实环比前只显示「—」，
     绝不写任何推测/假数字。后端字段到位后自动替换。 */
  #page-houses .ym-stats-bar.v3 .ym-stat-sub{
    display:block !important; font-size:11px !important;
    color:#b6c2d1 !important; margin:1px 0 0 !important;
    line-height:1.3 !important; order:3; white-space:nowrap;
  }
  #page-houses .ym-stats-bar.v3 .ym-stat-sub .hp2-mom-up  {color:#0ac059 !important;font-weight:600}
  #page-houses .ym-stats-bar.v3 .ym-stat-sub .hp2-mom-down{color:#ef4444 !important;font-weight:600}

  /* ==========================================================
     3) 列表底部「共 N 套房源…」汇总句隐藏（保留分页控件）
     ========================================================== */
  #page-houses #list-page-info{display:none !important}

}

/* 手机端 / 窄屏：上方全部规则都在 @media (min-width:769px) 内，
   窄屏下不匹配任何一条 —— 生产结构原样保留，不做任何复位，
   避免误改生产自身的 padding/结构。 */