/* ================================================================
   桌面布局
   移动端（<900px）完全不受影响：这份文件里的规则全部在媒体查询里。

   思路不是「把 480 的手机版拉宽」——那样只会得到一条被稀释的长栏。
   桌面上换一套骨架：底部标签栏变成左侧导航栏，内容保持一栏可读宽度，
   地图页则吃满整个工作区。
   ================================================================ */

@media (min-width: 900px) {
  :root { --rail-w: 92px; }

  body { background: var(--sunken); }

  .app {
    max-width: none;
    padding-left: var(--rail-w);
    padding-bottom: 0;
    min-height: 100vh; min-height: 100dvh;
    background: var(--canvas);
  }

  /* ---------------- 顶栏 ---------------- */
  .topbar {
    height: var(--topbar-h);
    padding: 0 28px;
    border-bottom: 1px solid var(--hairline);
  }
  .topbar h1 { font-size: 17px; }
  .topbar-act { font-size: 13px; padding: 8px 12px; border-radius: var(--r-pill); }
  .topbar-act:hover:not(:disabled) { background: var(--green-tint); }

  /* ---------------- 左侧导航栏 ---------------- */
  .tabbar {
    top: 0; bottom: 0; left: 0; right: auto;
    width: var(--rail-w); height: 100dvh; max-width: none; margin: 0;
    padding: calc(var(--topbar-h) + 18px) 0 0;
    flex-direction: column; gap: 6px;
    border-top: none; border-right: 1px solid var(--hairline-2);
    background: var(--seg-off);
  }
  .tabbar button {
    flex: none; height: 62px; margin: 0 10px; border-radius: 12px;
    gap: 5px; font-size: 11.5px;
  }
  .tabbar button:hover { background: rgba(31, 122, 77, .07); color: var(--green); }
  .tabbar button.on { background: var(--card); color: var(--green); box-shadow: var(--sh-card); }

  /* ---------------- 内容宽度 ----------------
     一栏文字撑到 1000px 就没法读了。车辆卡、我的页保持可读宽度居中，
     地图页是唯一例外：它越大越有用。 */
  .view { padding-bottom: 40px; }
  .view > div { max-width: 680px; margin: 0 auto; }
  /* 地图自己就要占满可用高度，多一寸留白就多一条白边 */
  #viewMap { padding-bottom: 0; }
  #viewMap > div, #viewMap .map-shell { max-width: none; }

  .empty { padding-top: 72px; }

  /* ---------------- 抽屉在桌面上是居中的对话框 ---------------- */
  .mask { align-items: center; }
  .sheet {
    max-width: 460px; max-height: 86vh; border-radius: 18px;
    padding: 0 22px calc(22px + env(safe-area-inset-bottom));
    animation: dsFadeUp .2s var(--ease);
  }
  .sheet-grip { display: none; }
  .sheet-head { padding-top: 20px; }

  @keyframes dsFadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
  }

  /* 鼠标有 hover，手机没有 —— 桌面上补齐这层反馈，界面才不像被拉宽的手机页 */
  button.row:hover { background: var(--sunken); }
  .btn:hover:not(:disabled) { filter: brightness(1.06); }
  .btn-sm:hover:not(:disabled) { filter: brightness(1.06); }
  .card { transition: box-shadow .18s var(--ease); }
  .card.veh:hover { box-shadow: 0 4px 18px rgba(0, 0, 0, .07); }
}

/* 宽屏：车辆页两栏。
   卡片之间是并列关系，不是阅读流，宽到这个程度还堆成一列就是在浪费屏幕。 */
@media (min-width: 1280px) {
  #vehiclesBody { max-width: 1080px; }
  #vehiclesBody .veh-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
  #vehiclesBody .veh-grid .card { margin-left: 0; margin-right: 0; }
}