/* =============================================
   推薪客 v4.1 — PC端桌面增强层 (1024px+)
   所有页面通用：引入本文件自动获得宽屏布局
   ============================================= */

@media (min-width: 1024px) {

  /* ── 固定限宽容器 ── */
  .container,
  .page,
  .navbar .navbar-inner,
  .tabbar .tabbar-inner {
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .page {
    max-width: 1100px;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  /* ── 导航栏桌面化 ── */
  .navbar {
    max-width: 100%;
    border-bottom: 1px solid var(--border-light);
  }

  .navbar .navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-6);
    max-width: 1100px;
    margin: 0 auto;
  }

  .navbar .navbar-left,
  .navbar .navbar-right {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  .navbar .navbar-btn {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
  }

  .navbar .navbar-title {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
  }

  /* ── TabBar 桌面化（隐藏或变成固定顶部标签） ── */
  .tabbar {
    display: none;
  }

  /* ── 桌面替代Tab导航（在页面顶部显示） ── */
  .desktop-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-card);
    padding: 0 var(--space-6);
    max-width: 1100px;
    margin: 0 auto;
  }

  .desktop-tab {
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: color var(--transition-fast), border-color var(--transition-fast);
    white-space: nowrap;
  }

  .desktop-tab:hover {
    color: var(--brand-500);
  }

  .desktop-tab.active {
    color: var(--brand-500);
    border-bottom-color: var(--brand-500);
  }

  .desktop-tab .tab-icon {
    margin-right: var(--space-1);
  }

  /* ── 网格优化 ── */
  .hr-stats {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
  }

  .broker-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }

  .hr-actions {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
  }

  /* ── 卡片间距 ── */
  .card-jobs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }

  .card {
    margin-bottom: var(--space-4);
  }

  /* ── 详情页双列 ── */
  .job-detail-page .job-main {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: var(--space-6);
  }

  .job-detail-page .job-sidebar {
    position: sticky;
    top: 80px;
    align-self: start;
  }

  /* ── 聊天窗口双面板 ── */
  .chat-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    height: calc(100vh - 120px);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  .chat-sidebar {
    border-right: 1px solid var(--border-light);
    overflow-y: auto;
  }

  .chat-main {
    display: flex;
    flex-direction: column;
  }

  /* ── 申请列表双列布局 ── */
  .app-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  /* ── 数据看板 ── */
  .stats-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
  }

  /* ── 经纪人的余额卡片加大 ── */
  .broker-balance {
    padding: var(--space-6);
  }

  .broker-balance .balance-amount {
    font-size: 48px;
  }

  /* ── 搜索栏放大 ── */
  .search-bar {
    max-width: 600px;
  }

  /* ── 职位卡片横排 ── */
  .job-card {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-5);
  }

  .job-card .job-card-left {
    flex: 1;
  }

  .job-card .job-card-right {
    flex-shrink: 0;
    text-align: right;
  }

  /* ── 底部留白 ── */
  .page {
    padding-bottom: var(--space-8);
  }

  /* ── 角色切换器在桌面端位置 ── */
  .role-switcher {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    cursor: pointer;
    background: var(--gray-50);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
  }

}

/* ── 1366px+ 宽屏增强 ── */
@media (min-width: 1366px) {
  .container,
  .page,
  .navbar .navbar-inner,
  .desktop-tabs {
    max-width: 1200px !important;
  }
}

/* ── 768-1023px 小屏平板 ── */
@media (min-width: 768px) and (max-width: 1023px) {
  .hr-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .card-jobs {
    grid-template-columns: repeat(2, 1fr);
  }

  .app-grid {
    grid-template-columns: repeat(1, 1fr);
  }
}