/* 电脑版布局（U-274 第二期，10-21 用户：「市场经理，专员，运力调度等角色也需要补上 pc 端的界面，也就是所有角色既有原生的 pc 端界面也有 app 的移动端界面」）。
   市场经理（/）、现场专员（/zy）在电脑上打开：同一套功能换成桌面排法——左边导航栏，内容居中加宽，详情从右边滑出，底部弹层改成居中对话框。
   html.desk 由 shared/ui.js 加：屏幕宽 ≥ 900、没在「我的」里选手机版。 */
.desk-brand { display: none; }  /* 左边栏顶上的「谷朔 · 角色 · 姓名」只在电脑版显示 */
@media (min-width: 900px) {
  html.desk, html.desk body { height: 100%; }
  html.desk body { display: block; background: var(--page); overflow: hidden; }

  /* ── 经理 app（.phone）：外框去掉，底部导航栏变成左边栏 ── */
  html.desk .phone { width: 100%; height: 100%; border-radius: 0; border: 0; box-shadow: none; }
  html.desk .phone .view { left: 236px; padding: 34px max(36px, calc((100vw - 236px - 920px) / 2)) 56px; }
  html.desk .tabbar { position: absolute; left: 0; top: 0; bottom: 0; right: auto; width: 236px; height: auto; z-index: 50;
                      flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 4px; padding: 22px 14px 20px;
                      background: #241c15; border-top: 0; border-right: 1px solid rgba(255, 240, 220, .08); backdrop-filter: none; -webkit-backdrop-filter: none; }
  html.desk .tabbar > button { flex: none; height: 46px; flex-direction: row; justify-content: flex-start; gap: 12px; padding: 0 14px;
                               font-size: 15px; font-weight: 700; color: rgba(255, 240, 220, .7); border-radius: 12px; transition: background .15s, color .15s; }
  html.desk .tabbar > button svg, html.desk .tabbar > button.on svg { width: 22px; height: 22px; padding: 0; background: none; color: inherit; border-radius: 0; }
  html.desk .tabbar > button:hover { background: rgba(255, 240, 220, .07); color: #fbf3e8; }
  html.desk .tabbar > button.on { background: rgba(255, 240, 220, .12); color: #fffaf3; }
  html.desk .tabbar > button:active { transform: none; }
  html.desk .tabbar .fab { order: -1; align-self: stretch; width: auto; height: 48px; margin: 0 0 16px; border-radius: 14px; box-shadow: none;
                           display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15.5px; font-weight: 800; }
  html.desk .tabbar .fab svg { width: 20px; height: 20px; }
  html.desk .tabbar .fab::after { content: attr(data-label); }
  html.desk .tabbar .fab:hover { background: var(--accent-press); }
  html.desk .fab-label { display: none !important; }
  html.desk .desk-brand { order: -2; display: block; padding: 4px 10px 18px; color: #fbf3e8; font-size: 19px; font-weight: 800; letter-spacing: .02em; }
  html.desk .desk-brand small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 600; color: rgba(255, 240, 220, .55); letter-spacing: 0; }

  /* 详情、填拜访记录：从右边滑出，左边内容压暗，点暗处收起 */
  html.desk .phone > .push { left: auto; width: min(640px, 54vw); box-shadow: -40px 0 90px -40px rgba(31, 23, 16, .55); border-left: 1px solid var(--line); }
  html.desk .phone > .push:not(.on), html.desk .app > .push:not(.on) { box-shadow: none; }
  html.desk .phone > .push.fx-rv { clip-path: none !important; transform: translateX(100%) !important; transition: transform .34s var(--ease) !important; }
  html.desk .phone > .push.fx-rv.fx-rv-in { transform: none !important; }
  html.desk .phone::after { content: ''; position: absolute; inset: 0 0 0 236px; z-index: 55; background: rgba(31, 23, 16, .28); opacity: 0; pointer-events: none; transition: opacity .25s; }
  html.desk .phone:has(> .push.on)::after { opacity: 1; pointer-events: auto; cursor: pointer; }
  html.desk .push-head { padding-top: 14px; }
  html.desk .push-body { padding: 8px 28px 28px; }
  html.desk .push-foot { padding: 12px 28px 18px; }

  /* 底部弹层 → 居中对话框 */
  html.desk .phone > .sheet, html.desk .app > .sheet { left: 50%; right: auto; bottom: auto; top: 50%; width: min(560px, calc(100vw - 48px)); max-height: 86vh;
                     border-radius: 22px; padding: 22px 24px 22px; opacity: 0; pointer-events: none;
                     transform: translate(-50%, -46%) scale(.98); transition: transform .24s var(--ease), opacity .2s; }
  html.desk .phone > .sheet.on, html.desk .app > .sheet.on { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); }
  html.desk .sheet .grab { display: none; }
  html.desk .phone > .scrim { left: 0; }
  html.desk .phone > .toast { bottom: 28px; left: calc(50% + 118px); }

  /* 鼠标：可点的行有悬停 */
  html.desk .row:hover, html.desk .rows a.row:hover { background: var(--panel-2); }
  html.desk .btn-main:hover { background: var(--accent-press); }
  html.desk .btn-ghost:hover { background: var(--panel-2); }

  /* ── 专员录入页（.app）：一列居中，录一车从右边滑出 ── */
  html.desk .app { max-width: none; box-shadow: none; }
  html.desk .app > .view { left: 236px; padding: 30px max(36px, calc((100vw - 236px - 920px) / 2)) 64px; }  /* 左边是导航栏（U-297） */
  html.desk .app > .push { left: auto; width: min(660px, 56vw); box-shadow: -40px 0 90px -40px rgba(31, 23, 16, .55); border-left: 1px solid var(--line); z-index: 30; }
  html.desk .app::after { content: ''; position: absolute; inset: 0 0 0 236px; z-index: 25; background: rgba(31, 23, 16, .28); opacity: 0; pointer-events: none; transition: opacity .25s; }
  html.desk .app:has(> .push.on)::after { opacity: 1; pointer-events: auto; cursor: pointer; }
  html.desk .app > .tabbar { z-index: 33; }  /* 专员页左边栏：开弹层时一起压暗（U-297） */
  /* 录车页开着：左边栏点不了（点「登记」会冲掉正在录的车），淡一点；提示条对准内容区；「我的」红点贴着图标 */
  html.desk .app:has(> .push.on) > .tabbar { pointer-events: none; opacity: .55; }
  html.desk .app > .toast { left: calc(50% + 118px); }
  html.desk .app .tab-dot { left: 30px; top: 9px; box-shadow: 0 0 0 2px #241c15; }
  /* 原件对照（locate.css .cmp，录车时左边看单据）：放在左边栏右侧、录车页左侧的空处，不被左边栏盖住（U-297） */
  html.desk .app ~ .cmp:not([hidden]) { left: 252px; width: min(520px, calc(100vw - 236px - min(660px, 56vw) - 48px)); }
  html.desk .app > .scrim { z-index: 34; }
  html.desk .app > .sheet { z-index: 36; }
}

/* 左边栏底部「切换到手机版」（U-332）：只在电脑排法显示，排在最下面 */
.tabbar > .desk-ui { display: none; }
@media (min-width: 900px) {
  html.desk .tabbar > .desk-ui { display: flex; order: 99; margin-top: auto; height: 40px; padding: 0 14px; font-size: 13.5px; font-weight: 700; color: rgba(255, 240, 220, .62); background: none; border: 0; cursor: pointer; }
  html.desk .tabbar > .desk-ui:hover { color: #fbf3e8; background: rgba(255, 240, 220, .07); }
  html.desk .tabbar > .desk-ui:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
}