/* ===========================================================================
   主題 token
   ---------------------------------------------------------------------------
   淺色是預設值（:root），深色只覆寫 :root[data-dv-theme="dark"] 這一份。
   刻意不寫 @media (prefers-color-scheme: dark) 的 token —— 三種偏好（自動切換／
   淺色／深色）都由兩個 Layout 的 head inline script 解析後寫進 data-dv-theme，
   CSS 只認已解析的結果。自動切換依裝置本地時間（18:00–05:59 深色），不看作業系統
   的深淺色設定，否則手機的系統主題會蓋掉排程與使用者的固定選擇。

   命名沿用既有慣例，沒有做全站改名：
   --dv-black  = 最強前景色（標題／強調字），不是字面上的黑，深色模式下是近白。
   --dv-surface= 卡片表面，深色模式下是深灰。
   兩者常被成對用在「反白元件」上（選中的 chip 等），會一起翻轉，語意仍成立。
   大面積的反白區塊另外用 --dv-hero-* ，避免深色模式變成刺眼白板。
   =========================================================================== */
:root {
  color-scheme: light;

  --dv-red: #e60012;
  --dv-brand-rgb: 230, 0, 18;
  --dv-red-dark: #c90010;
  --dv-red-soft: #fff0f1;
  --dv-black: #111111;
  --dv-text: #252525;
  /* 9/30：#737373 在 #f7f7f7 底只有 4.43:1、在淺色 tint 底 4.29:1，調深一階後都過 4.5:1。 */
  --dv-muted: #6b6b6b;
  /* #a0a0a0 在白卡上只有 2.6:1、在 #f7f7f7 上 2.4:1，但 11 處引用裡有 9 處是要讀的
     小字（側欄分組標籤、KPI 說明、時間軸操作人、placeholder…）。改成在兩種底色上
     都過 WCAG AA 的最淺灰：白底 5.02:1、#f7f7f7 底 4.69:1。
     它與 --dv-muted 的階層差異本來就靠字級與字重（10–11px/800 vs 12–13px/650）撐，
     不是靠色階，所以調深不影響既有視覺層次。 */
  --dv-subtle: #6f6f6f;
  --dv-bg: #f7f7f7;
  --dv-surface: #ffffff;
  --dv-border: #e8e8e8;
  --dv-border-strong: #d7d7d7;
  --dv-success: #219a5b;
  --dv-success-soft: #eaf8f0;
  --dv-warning: #e99216;
  --dv-warning-soft: #fff6e8;
  --dv-danger: #df3038;
  --dv-danger-soft: #fff0f1;
  --dv-info: #237ac1;
  --dv-info-soft: #ebf5fc;
  --dv-teal: #267d77;
  --dv-teal-soft: #e9f6f5;

  /* 淺色主題的狀態「墨色」：填色（--dv-success 等）直接當字色，在淺色 tint 上只有 2.3–4.4:1。
     徽章、審核標記、AI 標籤、alert、危險按鈕的字改用這組（底色不變）。
     深色主題有自己的 --dv-ink-*（見檔尾補丁區），列印另有一組。 */
  --dv-ink-warning: #9c620f;
  --dv-ink-success: #1b7e4b;
  --dv-ink-info: #2171b3;
  --dv-ink-danger: #cf2d34;
  --dv-ink-teal: #22706b;

  /* 品牌紅拆成「墨色」與「填色」：墨色要在底色上讀得清楚，填色要撐得住白字。
     淺色模式兩者相同，深色模式才分家。 */
  --dv-red-fill: #e60012;
  --dv-red-fill-hover: #c90010;
  --dv-on-accent: #ffffff;

  /* 原本散在檔案裡、只以 fallback 形式出現的 token，正式定義。 */
  --dv-surface-muted: #f7f7f5;
  --dv-accent: #b68a3a;
  --dv-loading-layer: 3000;
  --dv-celebrate-layer: 3200;

  /* 語意化表面 */
  --dv-chrome: rgba(255, 255, 255, .96);
  --dv-chrome-strong: rgba(255, 255, 255, .97);
  --dv-modal-surface: #ffffff;
  --dv-offcanvas-surface: #ffffff;
  --dv-table-head-bg: #fbfbfb;
  --dv-inverse-surface: #111111;
  --dv-inverse-text: #ffffff;
  --dv-selected-surface: var(--dv-inverse-surface);
  --dv-selected-text: var(--dv-inverse-text);
  --dv-hero-surface: #111111;
  --dv-hero-text: #ffffff;
  --dv-hero-text-muted: rgba(255, 255, 255, .68);
  --dv-hero-text-subtle: rgba(255, 255, 255, .62);
  --dv-hero-watermark: rgba(255, 255, 255, .055);

  /* 表單 */
  --dv-input-bg: #ffffff;
  --dv-input-disabled-bg: #f1f1f1;
  --dv-input-readonly-bg: #f7f7f7;
  --dv-input-border: #d7d7d7;
  --dv-control-border: #b8b8b8;
  --dv-focus-ring: rgba(var(--dv-brand-rgb), .08);
  --dv-focus-ring-strong: rgba(var(--dv-brand-rgb), .14);

  /* 影像相關：照片信箱底與照片上的覆蓋層，兩個主題都維持深色，不要跟著翻。 */
  --dv-photo-bg: #111111;
  --dv-media-bg: #ececec;
  --dv-overlay-ink: #ffffff;
  --dv-logo-plate: #ffffff;
  --dv-skeleton: #f1f1f1;
  --dv-skeleton-sheen: rgba(255, 255, 255, .42);

  --dv-radius-sm: 10px;
  --dv-radius-md: 16px;
  --dv-radius-lg: 22px;
  --dv-shadow: 0 8px 28px rgba(17, 17, 17, .045);
  --dv-shadow-raised: 0 14px 38px rgba(17, 17, 17, .08);
  --dv-scroll-hint: rgba(17, 17, 17, .13);
  --dv-content-max: 1320px;
  --dv-sidebar-width: 226px;
  --dv-bottom-nav-height: 70px;
  /* 底部導覽的實際高度。有 home 指示條時，8px 下內距直接被安全區取代，導覽只長到約 84px，
     不是 70＋34。貼在導覽上方的按鈕列、頁面底部留白都用這個值，才不會留縫或把內容蓋住。 */
  --dv-bottom-nav-offset: max(var(--dv-bottom-nav-height), calc(var(--dv-bottom-nav-height) - 20px + env(safe-area-inset-bottom, 0px)));
  --dv-visual-viewport-height: 100vh;
  --dv-visual-viewport-height: 100dvh;
  --dv-visual-viewport-top: 0px;
}

:root[data-dv-theme="dark"] {
  color-scheme: dark;

  /* 墨色紅在 #1b1d22 上約 5.5:1；填色紅維持深一階，白字在上面約 4.8:1。 */
  --dv-red: #ff5f66;
  --dv-brand-rgb: 255, 95, 102;
  --dv-red-dark: #ff8489;
  --dv-red-soft: #3a1d21;
  --dv-black: #f2f3f5;
  --dv-text: #dbdde2;
  --dv-muted: #9ba1ab;
  --dv-subtle: #878e99;
  --dv-bg: #121317;
  --dv-surface: #1b1d22;
  --dv-border: #2b2e35;
  --dv-border-strong: #3c414a;
  --dv-success: #4cc98a;
  --dv-success-soft: #16302a;
  --dv-warning: #f0a94a;
  --dv-warning-soft: #33271a;
  --dv-danger: #ff6b73;
  --dv-danger-soft: #3a1d21;
  --dv-info: #58a9e8;
  --dv-info-soft: #17293a;
  --dv-teal: #4fb3ac;
  --dv-teal-soft: #14302e;

  --dv-red-fill: #e11d2b;
  --dv-red-fill-hover: #c2121f;
  --dv-on-accent: #ffffff;

  --dv-surface-muted: #22242a;
  --dv-accent: #d3a95c;
  --dv-loading-layer: 3000;
  --dv-celebrate-layer: 3200;

  --dv-chrome: rgba(18, 19, 23, .92);
  --dv-chrome-strong: rgba(18, 19, 23, .95);
  --dv-modal-surface: #212429;
  --dv-offcanvas-surface: #1b1d22;
  --dv-table-head-bg: #22242a;
  --dv-inverse-surface: #f2f3f5;
  --dv-inverse-text: #16181c;
  --dv-selected-surface: var(--dv-inverse-surface);
  --dv-selected-text: var(--dv-inverse-text);
  /* hero 是大面積反白區塊：深色模式下若跟著 --dv-black 翻成近白會變刺眼白板，
     所以獨立成比頁面底色亮一階的深灰。 */
  --dv-hero-surface: #24272e;
  --dv-hero-text: #f2f3f5;
  --dv-hero-text-muted: rgba(242, 243, 245, .72);
  --dv-hero-text-subtle: rgba(242, 243, 245, .62);
  --dv-hero-watermark: rgba(255, 255, 255, .04);

  --dv-input-bg: #212429;
  --dv-input-disabled-bg: #26292f;
  --dv-input-readonly-bg: #1f2126;
  --dv-input-border: #3c414a;
  --dv-control-border: #5a616c;
  --dv-focus-ring: rgba(var(--dv-brand-rgb), .16);
  --dv-focus-ring-strong: rgba(var(--dv-brand-rgb), .26);

  --dv-photo-bg: #0d0e10;
  --dv-media-bg: #24272e;
  --dv-overlay-ink: #ffffff;
  /* logo 是深色墨的 PNG，白色底板在深色模式下反而才看得清楚，刻意不翻。 */
  --dv-logo-plate: #ffffff;
  --dv-skeleton: #24272e;
  --dv-skeleton-sheen: rgba(255, 255, 255, .07);

  --dv-shadow: 0 8px 28px rgba(0, 0, 0, .5);
  --dv-shadow-raised: 0 14px 38px rgba(0, 0, 0, .58);
  --dv-scroll-hint: rgba(0, 0, 0, .55);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  min-height: 100%;
  font-size: 16px;
  touch-action: manipulation;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  color: var(--dv-text);
  background: var(--dv-bg);
  font-family: Inter, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  touch-action: manipulation;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--dv-red); }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; }

:focus-visible {
  outline: 3px solid rgba(var(--dv-brand-rgb), .18);
  outline-offset: 2px;
}

.dv-topbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  height: 68px;
  overflow: visible;
  background: var(--dv-chrome);
  border-bottom: 1px solid var(--dv-border);
}
.dv-topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  backdrop-filter: blur(14px);
}
.dv-topbar-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: calc(var(--dv-content-max) + var(--dv-sidebar-width));
  height: 100%;
  margin: 0 auto;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dv-brand { display: inline-flex; align-items: center; gap: 11px; color: var(--dv-black); }
.dv-brand:hover { color: var(--dv-black); }
.dv-brand > span:last-child { display: flex; flex-direction: column; line-height: 1.1; }
.dv-brand strong { font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.dv-brand small { margin-top: 3px; color: var(--dv-muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }

.dv-logo-mark {
  width: 38px;
  height: 38px;
  display: block;
  flex: 0 0 auto;
  object-fit: contain;
  padding: 2px;
  background: var(--dv-logo-plate);
  border: 1px solid var(--dv-border);
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(17, 17, 17, .08);
}

.dv-logo-mark.is-large {
  width: 88px;
  height: 88px;
  padding: 6px;
  border-radius: 16px;
}
.dv-topbar-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.dv-branch-scope { min-width: 0; margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; color: var(--dv-muted); font-size: 9px; font-weight: 700; }
.dv-branch-scope form { margin: 0; }
.dv-branch-scope select { max-width: 168px; padding: 4px 24px 4px 7px; color: var(--dv-black); background: var(--dv-surface); border: 1px solid var(--dv-border); border-radius: 8px; font-size: 11px; font-weight: 750; }
.dv-branch-scope strong { max-width: 168px; overflow: hidden; color: var(--dv-black); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.dv-icon-button {
  width: 42px;
  height: 42px;
  position: relative;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 50%;
}
.dv-icon-button:hover { background: var(--dv-bg); border-color: var(--dv-border); color: var(--dv-black); }
.dv-icon-button svg, .dv-side-nav svg, .dv-bottom-nav svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dv-topbar-inner,
.dv-topbar-actions,
.dv-profile-button { overflow: visible; }
.dv-profile-button { display: flex; align-items: center; gap: 9px; padding: 4px; border-radius: var(--dv-radius-sm); }
.dv-profile-button:hover { color: var(--dv-black); background: var(--dv-bg); }
.dv-avatar, .dv-profile-avatar {
  display: grid;
  place-items: center;
  color: var(--dv-red);
  background: var(--dv-red-soft);
  border: 1px solid rgba(var(--dv-brand-rgb), .12);
  border-radius: 50%;
  font-weight: 800;
}
.dv-avatar { width: 36px; height: 36px; font-size: 14px; }
.dv-avatar-wrap {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: visible;
}
.dv-role-badge {
  position: absolute;
  right: -4px;
  bottom: -3px;
  width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}
.dv-role-badge svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.dv-role-badge--crown {
  transform-origin: 50% 88%;
  animation: dv-role-badge-sway 5.2s ease-in-out infinite;
}
.dv-role-badge--star {
  transform-origin: 50% 50%;
  animation: dv-role-badge-star 6.5s ease-in-out infinite;
  filter: drop-shadow(0 0 1.5px #ffe566) drop-shadow(0 0 3px rgba(255, 210, 74, .7));
}
.dv-role-badge--accounting {
  transform-origin: 50% 50%;
  animation: dv-role-badge-tick 3.8s ease-in-out infinite;
}
.dv-role-badge--sales {
  transform-origin: 32% 34%;
  animation: dv-role-badge-swing 5.8s ease-in-out infinite;
}
.dv-role-badge--purchase {
  transform-origin: 50% 50%;
  animation: dv-role-badge-gear 18s ease-in-out infinite;
}
@keyframes dv-role-badge-sway {
  0%, 42%, 100% { transform: rotate(0deg); }
  8% { transform: rotate(-5deg); }
  16% { transform: rotate(5deg); }
  24% { transform: rotate(-5deg); }
  32% { transform: rotate(5deg); }
}
@keyframes dv-role-badge-sway-mobile {
  0%, 42%, 100% { transform: rotate(0deg); }
  8% { transform: rotate(-3.5deg); }
  16% { transform: rotate(3.5deg); }
  24% { transform: rotate(-3.5deg); }
  32% { transform: rotate(3.5deg); }
}
@keyframes dv-role-badge-star {
  0% { transform: rotate(0deg); }
  68%, 100% { transform: rotate(360deg); }
}
@keyframes dv-role-badge-tick {
  0%, 22%, 100% { transform: translateY(0) scale(1); }
  8% { transform: translateY(1.5px) scale(.92); }
  14% { transform: translateY(0) scale(1.03); }
}
@keyframes dv-role-badge-tick-mobile {
  0%, 22%, 100% { transform: translateY(0) scale(1); }
  8% { transform: translateY(1px) scale(.94); }
  14% { transform: translateY(0) scale(1.02); }
}
@keyframes dv-role-badge-swing {
  0%, 40%, 100% { transform: rotate(0deg); }
  8% { transform: rotate(-7deg); }
  16% { transform: rotate(7deg); }
  24% { transform: rotate(-7deg); }
  32% { transform: rotate(7deg); }
}
@keyframes dv-role-badge-swing-mobile {
  0%, 40%, 100% { transform: rotate(0deg); }
  8% { transform: rotate(-4.9deg); }
  16% { transform: rotate(4.9deg); }
  24% { transform: rotate(-4.9deg); }
  32% { transform: rotate(4.9deg); }
}
@keyframes dv-role-badge-gear {
  0% { transform: rotate(0deg); }
  5.5%, 16.6% { transform: rotate(60deg); }
  22.2%, 33.3% { transform: rotate(120deg); }
  38.8%, 50% { transform: rotate(180deg); }
  55.5%, 66.6% { transform: rotate(240deg); }
  72.2%, 83.3% { transform: rotate(300deg); }
  88.8%, 100% { transform: rotate(360deg); }
}
/* 偶發短動作：用 class 暫時蓋過 idle，不改尺寸或排版。幅度壓在頭像旁空隙內。 */
.dv-topbar .dv-role-badge.is-trick-nod,
.dv-topbar .dv-role-badge.is-trick-peek,
.dv-topbar .dv-role-badge.is-trick-pop,
.dv-topbar .dv-role-badge.is-trick-wiggle {
  transform-origin: 50% 50%;
}
.dv-topbar .dv-role-badge.is-trick-nod {
  animation: dv-role-badge-trick-nod .8s ease-in-out 1;
}
.dv-topbar .dv-role-badge.is-trick-peek {
  animation: dv-role-badge-trick-peek .9s ease-in-out 1;
}
.dv-topbar .dv-role-badge.is-trick-pop {
  animation: dv-role-badge-trick-pop .7s ease-in-out 1;
}
.dv-topbar .dv-role-badge.is-trick-wiggle {
  animation: dv-role-badge-trick-wiggle .85s ease-in-out 1;
}
@keyframes dv-role-badge-trick-nod {
  0%, 100% { transform: translateY(0) scale(1); }
  35% { transform: translateY(2.5px) scale(.96); }
  60% { transform: translateY(-1px) scale(1.04); }
}
@keyframes dv-role-badge-trick-nod-mobile {
  0%, 100% { transform: translateY(0) scale(1); }
  35% { transform: translateY(1.5px) scale(.97); }
  60% { transform: translateY(-.6px) scale(1.03); }
}
@keyframes dv-role-badge-trick-peek {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  55% { transform: translateX(2.5px); }
  75% { transform: translateX(-1px); }
}
@keyframes dv-role-badge-trick-peek-mobile {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  55% { transform: translateX(1.6px); }
  75% { transform: translateX(-.7px); }
}
@keyframes dv-role-badge-trick-pop {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.12); }
  70% { transform: scale(.97); }
}
@keyframes dv-role-badge-trick-pop-mobile {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.08); }
  70% { transform: scale(.98); }
}
@keyframes dv-role-badge-trick-wiggle {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-10deg); }
  40% { transform: rotate(9deg); }
  60% { transform: rotate(-6deg); }
  80% { transform: rotate(4deg); }
}
@keyframes dv-role-badge-trick-wiggle-mobile {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-7deg); }
  40% { transform: rotate(6deg); }
  60% { transform: rotate(-4deg); }
  80% { transform: rotate(3deg); }
}
.dv-profile-copy { display: none; flex-direction: column; line-height: 1.1; }
.dv-profile-copy strong { max-width: 120px; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.dv-profile-copy small { margin-top: 4px; color: var(--dv-muted); font-size: 10px; }

.dv-app-shell { width: 100%; max-width: calc(var(--dv-content-max) + var(--dv-sidebar-width)); margin: 0 auto; }
.dv-sidebar { display: none; }
.dv-main { width: 100%; min-width: 0; padding: 24px 16px calc(var(--dv-bottom-nav-offset) + 42px); }

.dv-side-nav { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dv-side-nav > a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 46px;
  padding: 0 14px;
  color: var(--dv-muted);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 650;
}
.dv-side-nav > a svg { flex: 0 0 21px; }
.dv-side-nav > a span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dv-side-nav > a span.dv-task-badge {
  overflow: visible;
  text-overflow: unset;
}
.dv-side-nav > a:hover { color: var(--dv-black); background: var(--dv-surface); }
.dv-side-nav > a.is-active { color: var(--dv-red); background: var(--dv-red-soft); }
.dv-nav-label { padding: 20px 14px 5px; color: var(--dv-subtle); font-size: 10px; font-weight: 800; letter-spacing: .14em; }

.dv-bottom-nav {
  position: fixed;
  z-index: 1040;
  right: 0;
  bottom: 0;
  left: 0;
  min-height: var(--dv-bottom-nav-offset);
  padding: 8px max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
  background: var(--dv-chrome-strong);
  border-top: 1px solid var(--dv-border);
  box-shadow: 0 -8px 28px rgba(17, 17, 17, .05);
  backdrop-filter: blur(16px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}
.dv-bottom-nav a, .dv-bottom-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--dv-muted); background: transparent; border: 0; font-size: 10px; font-weight: 650; }
.dv-bottom-nav span { white-space: nowrap; }
.dv-bottom-nav a.is-active, .dv-bottom-nav button.is-active { color: var(--dv-red); }
.dv-bottom-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.dv-more-menu { height: auto !important; max-height: 80vh; border-radius: 22px 22px 0 0; }
.dv-more-menu .offcanvas-header, .dv-more-menu .offcanvas-body { max-width: 640px; width: 100%; margin: 0 auto; }
.dv-more-menu .offcanvas-body { overflow-y: auto; padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)); }
.dv-more-menu h2 { margin: 0; font-size: 20px; font-weight: 850; }
.dv-more-groups { display: grid; gap: 22px; }
.dv-more-group-title { margin: 0 0 4px; color: var(--dv-subtle); font-size: 11px; font-weight: 850; letter-spacing: .12em; }
.dv-report-desktop { display: none; }
.dv-report-mobile { display: grid; }
.dv-report-details summary { color: var(--dv-red); cursor: pointer; font-size: 13px; font-weight: 800; }
.dv-report-details[open] summary { margin-bottom: 8px; }
.dv-report-money { white-space: nowrap; font-variant-numeric: tabular-nums; }
.dv-report-table .dv-report-money { text-align: right; }
.dv-report-table tbody .dv-report-primary { color: var(--dv-black); font-weight: 800; }
.dv-report-table tbody .dv-report-secondary { color: var(--dv-muted); }
.dv-report-table tbody .dv-report-total { color: var(--dv-info); background: var(--dv-info-soft); border-left: 2px solid var(--dv-info); font-weight: 850; }
.dv-stat-card.dv-report-total-card { background: var(--dv-info-soft); border-color: var(--dv-info); }
.dv-stat-card.dv-report-total-card strong { color: var(--dv-info); }
.dv-info-list > div.dv-report-total-line { margin-top: 4px; padding: 12px 10px; color: var(--dv-info); background: var(--dv-info-soft); border-bottom: 0; border-left: 2px solid var(--dv-info); border-radius: 8px; }
.dv-info-list > div.dv-report-total-line strong { color: var(--dv-info); font-weight: 850; }
.dv-report-detail-panel { width: 360px; max-width: 100%; min-width: 0; padding: 14px; color: var(--dv-text); background: var(--dv-bg); border: 1px solid var(--dv-border); border-radius: 12px; text-align: left; }
.dv-report-detail-panel h4 { margin: 0 0 12px; color: var(--dv-black); font-size: 15px; font-weight: 850; }
.dv-report-detail-panel h5 { margin: 0 0 8px; color: var(--dv-muted); font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.dv-report-detail-toggle { padding: 4px 0; color: var(--dv-red); background: transparent; border: 0; font-size: 13px; font-weight: 800; white-space: nowrap; }
.dv-report-detail-toggle:hover { color: var(--dv-red-dark); text-decoration: underline; }
.dv-report-detail-toggle:focus-visible { outline: 2px solid var(--dv-red); outline-offset: 3px; border-radius: 3px; }
.dv-report-detail-row > td { padding: 0 !important; background: var(--dv-surface-muted); }
.dv-report-detail-surface { padding: 18px; border-bottom: 1px solid var(--dv-border); }
.dv-settlement-breakdown { display: grid; gap: 12px; text-align: left; }
.dv-settlement-breakdown-status { grid-column: 1 / -1; margin: 0; }
.dv-settlement-breakdown-section { min-width: 0; padding: 15px; background: var(--dv-surface); border: 1px solid var(--dv-border); border-radius: 12px; }
.dv-settlement-breakdown-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.dv-settlement-breakdown-heading h4 { margin: 1px 0 0; color: var(--dv-black); font-size: 15px; font-weight: 850; }
.dv-settlement-breakdown-heading > strong { color: var(--dv-black); font-size: 17px; font-weight: 850; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dv-settlement-total-row { margin-inline: -8px; padding-inline: 8px !important; background: var(--dv-bg); border-radius: 8px; }
.dv-settlement-total-row span, .dv-settlement-total-row strong { color: var(--dv-black); font-weight: 850; }
.dv-settlement-line-amount { color: var(--dv-black); font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dv-settlement-metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dv-settlement-metric-grid > div { min-width: 0; padding: 10px; display: grid; gap: 4px; background: var(--dv-bg); border-radius: 9px; }
.dv-settlement-metric-grid span { color: var(--dv-muted); font-size: 12px; }
.dv-settlement-metric-grid strong { color: var(--dv-black); font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dv-empty-inline { padding: 12px; color: var(--dv-muted); background: var(--dv-bg); border-radius: 9px; font-size: 13px; }
/* 分頁列預設換行，不靠橫向捲動把項目藏起來。
   報表分類在 390px 有 7 個分頁（品牌營運／收訂消訂／業務績效／我的成交試算／車輛結算／
   員工薪資／財務），nowrap 時 scrollWidth 735 對上 clientWidth 356 —— 後面四個完全在畫面外，
   而 scrollbar 又是隱藏的，手機上等於沒有入口能發現它們存在。換行多佔一列，換到的是
   「看得到就點得到」。真的要橫捲的（成交工作台快速導覽等）自己加 .dv-workspace-nav。 */
.dv-tabs { margin: -8px 0 20px; padding: 4px; display: flex; flex-wrap: wrap; gap: 4px; overflow-x: auto; background: var(--dv-bg); border: 1px solid var(--dv-border); border-radius: 12px; }
.dv-tabs a { min-width: max-content; padding: 9px 14px; color: var(--dv-muted); border-radius: 9px; font-size: 13px; font-weight: 750; text-decoration: none; }
.dv-tabs a.is-active { color: var(--dv-black); background: var(--dv-surface); box-shadow: var(--dv-shadow); }
/* 刻意保持單列橫捲的分頁列。捲軸是隱藏的，所以用兩層 local 漸層貼住內容兩端、
   兩層 scroll 陰影固定在容器兩側：捲到頭或捲到底時 local 那層剛好蓋掉該側的陰影，
   於是「這邊還有」只在真的還有的時候出現。純 CSS，不必去量 scrollWidth。 */
.dv-workspace-nav {
  --dv-tabs-edge: var(--dv-bg);
  margin: 0 0 16px;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background:
    linear-gradient(to right, var(--dv-tabs-edge), transparent) 0 0 / 22px 100% no-repeat local,
    linear-gradient(to left, var(--dv-tabs-edge), transparent) 100% 0 / 22px 100% no-repeat local,
    linear-gradient(to right, var(--dv-scroll-hint), transparent) 0 0 / 15px 100% no-repeat scroll,
    linear-gradient(to left, var(--dv-scroll-hint), transparent) 100% 0 / 15px 100% no-repeat scroll,
    var(--dv-tabs-edge);
}
.dv-workspace-nav::-webkit-scrollbar { display: none; }
/* 子分頁列（目前只有收款總覽／收款流水）。原本跟主分類長得一模一樣 —— 同樣的外框、
   同樣的填色、同樣的高度 —— 於是財務頁在手機上讀起來是「兩條平起平坐的導覽」而不是
   「一個分類底下的子頁」。拿掉外框與底色、縮排一格，讓它從屬於上面那列，順便省掉一層厚度。 */
.dv-tabs.is-sub {
  margin: -12px 0 12px;
  padding: 0 4px;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.dv-tabs.is-sub a { padding: 7px 12px; font-size: 12px; }
.dv-workspace-section { scroll-margin-top: 88px; }
.dv-narrow-section { max-width: 620px; }

.dv-page-header {
  margin-bottom: 22px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.dv-page-header > div:first-child { min-width: 0; flex: 1 1 auto; }
.dv-page-header h1 { margin: 3px 0 4px; color: var(--dv-black); font-size: clamp(25px, 5vw, 32px); font-weight: 800; letter-spacing: -.035em; }
.dv-page-header p { margin: 0; color: var(--dv-muted); font-size: 14px; }
.dv-page-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; justify-content: flex-end; flex: 0 0 auto; }
.dv-eyebrow, .dv-section-kicker { color: var(--dv-red); font-size: 12px; font-weight: 850; letter-spacing: .16em; }
/* 參數頁的資料代碼：保留但不當標題強調 */
.dv-item-code { color: var(--dv-muted); font-size: 12px; font-weight: 650; overflow-wrap: anywhere; }

.dv-card, .card {
  min-width: 0;
  background: var(--dv-surface);
  border: 1px solid var(--dv-border);
  border-radius: var(--dv-radius-md);
  box-shadow: var(--dv-shadow);
}
.dv-section-card { min-width: 0; margin-bottom: 16px; padding: 20px; }
.dv-section-heading { margin-bottom: 15px; display: flex; align-items: center; justify-content: space-between; gap: 14px; min-width: 0; }
.dv-section-heading > div { min-width: 0; }
.dv-section-heading h2, .dv-section-title { margin: 2px 0 0; color: var(--dv-black); font-size: 20px; font-weight: 800; letter-spacing: -.02em; overflow-wrap: anywhere; }
.dv-section-heading > a { color: var(--dv-red); font-size: 13px; font-weight: 700; }
.dv-section-heading-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }

.dv-btn-primary, .dv-btn-secondary, .dv-btn-danger, .btn-primary {
  min-height: 46px;
  padding: 10px 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.15;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.dv-btn-primary, .btn-primary {
  color: var(--dv-on-accent);
  background: var(--dv-red-fill);
  border: 1px solid var(--dv-red-fill);
}
.dv-btn-primary:hover, .btn-primary:hover { color: var(--dv-on-accent); background: var(--dv-red-fill-hover); border-color: var(--dv-red-fill-hover); box-shadow: 0 8px 22px rgba(var(--dv-brand-rgb), .17); }
.dv-btn-secondary {
  color: var(--dv-black);
  background: var(--dv-surface);
  border: 1px solid var(--dv-border-strong);
}
.dv-btn-secondary:hover { color: var(--dv-black); background: var(--dv-bg); border-color: var(--dv-black); }
.dv-btn-danger { color: var(--dv-danger); background: var(--dv-danger-soft); border: 1px solid rgba(223, 48, 56, .25); }
.dv-btn-danger:hover { color: var(--dv-surface); background: var(--dv-danger); }
.btn-sm { min-height: 36px; padding: 7px 12px; border-radius: 9px; font-size: 12px; }
.btn-link { color: var(--dv-text); font-weight: 700; text-decoration: none; }
.btn-link:hover { color: var(--dv-red); }
.dv-icon-cta { width: 46px; height: 46px; padding: 0; border-radius: 50%; font-size: 25px; }
button:disabled, .btn:disabled { opacity: .58; cursor: not-allowed; }

.dv-field { margin-bottom: 18px; min-width: 0; }
.dv-field label, .form-label { display: block; margin-bottom: 7px; color: var(--dv-text); font-size: 13px; font-weight: 720; }
/* 採購獎金：左邊選比例或固定金額，右邊只顯示對應的那一格。 */
.dv-purchase-bonus-control { display: grid; grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr); gap: 8px; }
.dv-purchase-bonus-control + .dv-help { margin-top: 6px; }
.dv-form-control, .form-control, .form-select {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 11px 14px;
  color: var(--dv-text);
  background-color: var(--dv-surface);
  border: 1px solid var(--dv-border-strong);
  border-radius: 12px;
  box-shadow: none;
  font-size: 16px;
  line-height: 1.25;
}
.form-select {
  padding-right: 2.5rem;
  text-overflow: ellipsis;
}
.form-select:not([multiple]):not([size]) {
  height: auto;
}
select.form-select[multiple],
select.form-select[size] {
  height: auto;
  min-height: 48px;
}
/* Safari／iOS 的原生日期控制項會照自己的內建尺寸排版，作者給的 height、padding、垂直置中
   都綁不住它：欄位會比同一排的元件高、值靠上、寬度撐出容器（PWA 上就是日期框凸出卡片）。
   關掉 appearance 之後它就跟一般文字欄位一樣吃 .dv-form-control 的盒模型。
   原本 .dv-field:has(input[type="date"]) 那條 overflow: hidden 就是為了遮這個溢位才加的，
   但它會連 focus 的 box-shadow 外框一起切掉，溢位源頭處理掉之後一併移除。

   刻意只用型別選擇器：舊寫法帶 .dv-form-control 是 (0,2,1)，會壓過
   .dv-history-costs-scroll .dv-form-control 這類 (0,2,0) 的縮小規則，害緊湊表格裡的
   日期欄位字級縮不下去（16px vs 隔壁 13px）。盒模型本來就由 .dv-form-control 給，
   這裡只留真正跟型別有關的重置。 */
input[type="date"],
input[type="month"],
input[type="datetime-local"],
input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
  overflow: hidden;
}
input[type="date"]::-webkit-datetime-edit,
input[type="month"]::-webkit-datetime-edit,
input[type="datetime-local"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  padding: 0;
}
input[type="date"]::-webkit-datetime-edit-fields-wrapper,
input[type="month"]::-webkit-datetime-edit-fields-wrapper,
input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper,
input[type="time"]::-webkit-datetime-edit-fields-wrapper {
  min-width: 0;
}
input[type="date"]::-webkit-date-and-time-value,
input[type="month"]::-webkit-date-and-time-value,
input[type="datetime-local"]::-webkit-date-and-time-value {
  min-width: 0;
  text-align: left;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  margin: 0 0 0 6px;
  padding: 0;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  cursor: pointer;
}
textarea.dv-form-control, textarea.form-control { min-height: 104px; }
.dv-form-control:focus, .form-control:focus, .form-select:focus {
  color: var(--dv-text);
  background-color: var(--dv-surface);
  border-color: var(--dv-red);
  box-shadow: 0 0 0 4px var(--dv-focus-ring);
  outline: 0;
}
.dv-field-error, .field-validation-error { display: block; margin-top: 6px; color: var(--dv-danger); font-size: 12px; }
/* display: block 會蓋掉 hidden 屬性，靠 JS 收起來的錯誤訊息要有這條才藏得住。 */
.dv-field-error[hidden], .field-validation-error[hidden] { display: none; }
.dv-radio-grid { display: grid; grid-template-columns: 1fr; gap: 9px; }
.dv-field label.dv-radio-option {
  position: relative;
  min-width: 0;
  min-height: 58px;
  margin: 0;
  padding: 11px 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--dv-surface);
  border: 1px solid var(--dv-border-strong);
  border-radius: 12px;
  cursor: pointer;
}
.dv-radio-option:hover { border-color: var(--dv-black); }
.dv-radio-option:has(input:checked) { background: var(--dv-red-soft); border-color: var(--dv-red); }
.dv-radio-option:has(input:focus-visible) { outline: 3px solid var(--dv-focus-ring-strong); outline-offset: 2px; }
.dv-radio-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}
.dv-radio-indicator {
  position: relative;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  background: var(--dv-surface);
  border: 2px solid var(--dv-border-strong);
  border-radius: 50%;
}
.dv-radio-option input:checked + .dv-radio-indicator { border-color: var(--dv-red); }
.dv-radio-option input:checked + .dv-radio-indicator::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: var(--dv-red);
  border-radius: 50%;
}
.dv-radio-copy { min-width: 0; display: grid; gap: 2px; }
.dv-radio-copy strong { overflow-wrap: anywhere; font-size: 14px; font-weight: 800; }
.dv-radio-copy small { color: var(--dv-muted); font-size: 11px; font-weight: 600; overflow-wrap: anywhere; }

.dv-field label.dv-checkbox {
  width: fit-content;
  max-width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 10px 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--dv-text);
  background: var(--dv-bg);
  border: 1px solid var(--dv-border-strong);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.25;
  cursor: pointer;
  user-select: none;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
}
.dv-checkbox:hover {
  border-color: var(--dv-black);
  box-shadow: 0 0 0 3px rgba(17, 17, 17, .04);
}
.dv-checkbox:has(input:checked) {
  color: var(--dv-black);
  background: var(--dv-red-soft);
  border-color: var(--dv-red);
  box-shadow: none;
}
.dv-checkbox:has(input:focus-visible) {
  outline: 3px solid var(--dv-focus-ring-strong);
  outline-offset: 2px;
}
.dv-checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  flex: 0 0 auto;
  background: var(--dv-surface);
  border: 2px solid var(--dv-control-border);
  border-radius: 5px;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease;
}
.dv-checkbox:has(input:checked) input[type="checkbox"],
.dv-checkbox input[type="checkbox"]:checked {
  background-color: var(--dv-red-fill);
  border-color: var(--dv-red-fill);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2' d='M3.5 8.5 6.5 11.5 12.5 4.5'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 12px;
}
.dv-checkbox > span {
  min-width: 0;
  overflow-wrap: anywhere;
}
@media (min-width: 576px) {
  .dv-form-grid > .dv-field:has(> .dv-checkbox) {
    padding-top: calc(13px * 1.5 + 7px);
  }
}
.dv-validation-summary, .validation-summary-errors { margin-bottom: 16px; padding: 12px 14px; color: var(--dv-danger); background: var(--dv-danger-soft); border: 1px solid rgba(223, 48, 56, .15); border-radius: 12px; font-size: 13px; }
.dv-validation-summary:empty, .validation-summary-valid { display: none; }
.dv-validation-summary ul, .validation-summary-errors ul { margin: 0; padding-left: 18px; }
.dv-help { margin: 7px 0 0; color: var(--dv-muted); font-size: 12px; }
.dv-accounting-period .dv-form-grid { row-gap: 12px; }
.dv-combobox { position: relative; }
.dv-combobox.is-open { z-index: 40; }
.dv-combobox.is-ready [data-dv-combobox-select] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.dv-combobox-list {
  position: absolute;
  z-index: 41;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  max-height: 240px;
  margin: 0;
  padding: 6px;
  overflow: auto;
  list-style: none;
  background: var(--dv-surface);
  border: 1px solid var(--dv-border-strong);
  border-radius: 12px;
  box-shadow: var(--dv-shadow-raised);
}
.dv-combobox-option {
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--dv-black);
  font-size: 14px;
  font-weight: 750;
  cursor: pointer;
}
.dv-combobox-option.is-active,
.dv-combobox-option:hover,
.dv-combobox-option[aria-selected="true"] { background: var(--dv-red-soft); }
.dv-combobox-empty { padding: 10px 12px; color: var(--dv-muted); font-size: 13px; }
.dv-wan-hint { color: var(--dv-black); font-size: 13px; font-weight: 750; }
.dv-wan-hint[hidden] { display: none; }

/* 金額欄位的正／負切換：手機數字鍵盤沒有負號鍵，用分段按鈕代替。 */
.dv-sign-field { display: grid; gap: 8px; min-width: 0; }
.dv-sign-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  padding: 3px;
  background: var(--dv-bg);
  border: 1px solid var(--dv-border-strong);
  border-radius: 12px;
}
.dv-sign-btn {
  min-height: 40px;
  padding: 8px 6px;
  color: var(--dv-muted);
  background: transparent;
  border: 0;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}
.dv-sign-btn[aria-pressed="true"] { color: var(--dv-selected-text); background: var(--dv-selected-surface); }
.dv-sign-btn[data-dv-sign="-1"][aria-pressed="true"] { background: var(--dv-danger); }
.dv-sign-btn:focus-visible { outline: 2px solid var(--dv-black); outline-offset: 2px; }

.dv-form-shell { max-width: 940px; margin: 0 auto; }
.dv-form-section { margin-bottom: 16px; padding: 20px; background: var(--dv-surface); border: 1px solid var(--dv-border); border-radius: var(--dv-radius-md); box-shadow: var(--dv-shadow); }
.dv-form-section-header { margin-bottom: 18px; }
.dv-form-section-header h2 { margin: 2px 0 4px; color: var(--dv-black); font-size: 19px; font-weight: 800; }
.dv-form-section-header p { margin: 0; color: var(--dv-muted); font-size: 13px; }
.dv-form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 15px; min-width: 0; width: 100%; }
.dv-form-actions { position: sticky; bottom: 82px; z-index: 20; margin-top: 18px; padding: 12px; display: flex; gap: 9px; background: var(--dv-chrome); border: 1px solid var(--dv-border); border-radius: var(--dv-radius-md); box-shadow: var(--dv-shadow-raised); backdrop-filter: blur(12px); }
.dv-form-actions > * { flex: 1; }
.dv-money-field { position: relative; }
.dv-money-field .dv-money-prefix {
  position: absolute;
  left: 14px;
  top: 50%;
  color: var(--dv-muted);
  font-size: 14px;
  font-weight: 750;
  pointer-events: none;
  transform: translateY(-50%);
}
.dv-money-field .dv-form-control { padding-left: 52px; overflow: auto; }
.dv-case-header { margin-bottom: 16px; }
.dv-case-header h1 { margin: 4px 0 6px; color: var(--dv-black); font-size: clamp(22px, 5.4vw, 30px); font-weight: 850; letter-spacing: -.04em; line-height: 1.2; overflow-wrap: anywhere; word-break: break-word; }
.dv-case-header .dv-case-customer { margin: 0 0 8px; color: var(--dv-muted); font-size: 15px; overflow-wrap: anywhere; }
.dv-case-header .dv-case-meta { margin: 0 0 4px; color: var(--dv-muted); font-size: 13px; overflow-wrap: anywhere; }
.dv-case-header .dv-page-status { margin: 8px 0 10px; }


.dv-toast {
  position: relative;
  margin: 0 0 18px;
  padding: 13px 42px 13px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid;
  border-radius: 13px;
  box-shadow: var(--dv-shadow);
  font-size: 14px;
  font-weight: 650;
}
.dv-toast.is-success { color: var(--dv-success); background: var(--dv-success-soft); border-color: rgba(33,154,91,.16); }
.dv-toast.is-error { color: var(--dv-danger); background: var(--dv-danger-soft); border-color: rgba(223,48,56,.16); }
.dv-toast button { position: absolute; top: 50%; right: 11px; width: 28px; height: 28px; padding: 0; color: inherit; background: transparent; border: 0; transform: translateY(-50%); font-size: 20px; }

.alert { border: 1px solid var(--dv-border); border-radius: 13px; font-size: 14px; }
.alert-success { color: var(--dv-success); background: var(--dv-success-soft); border-color: rgba(33,154,91,.16); }
.alert-danger { color: var(--dv-danger); background: var(--dv-danger-soft); border-color: rgba(223,48,56,.16); }
.alert-warning { color: #85530b; background: var(--dv-warning-soft); border-color: rgba(233,146,22,.2); }
.alert-info { color: var(--dv-info); background: var(--dv-info-soft); border-color: rgba(35,122,193,.16); }
.alert-secondary { color: var(--dv-text); background: var(--dv-surface-muted); border-color: var(--dv-border); }

.dv-auth-body { background: var(--dv-surface); }
.dv-auth-main {
  min-height: 100vh;
  min-height: 100dvh;
}
.dv-login-shell {
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 460px;
  margin: 0 auto;
  padding: clamp(64px, 12vh, 120px) 22px 28px;
  padding: clamp(64px, 12dvh, 120px) 22px 28px;
  display: flex;
  flex-direction: column;
}
.dv-login-brand { margin-bottom: 48px; text-align: center; }
.dv-login-brand .dv-logo-mark { margin: 0 auto 17px; }
.dv-login-brand h1 { margin: 0; color: var(--dv-black); font-size: 29px; font-weight: 900; letter-spacing: -.045em; }
.dv-login-brand p { margin: 4px 0 0; color: var(--dv-muted); font-size: 12px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.dv-login-card { width: 100%; }
.dv-login-heading { margin-bottom: 25px; }
.dv-login-heading h2 { margin: 5px 0; color: var(--dv-black); font-size: 24px; font-weight: 800; letter-spacing: -.03em; }
.dv-login-heading p { margin: 0; color: var(--dv-muted); font-size: 14px; }
.dv-password-field { position: relative; }
.dv-password-field .dv-form-control { width: 100%; padding-right: 62px; }
.dv-password-field button { position: absolute; top: 50%; right: 10px; padding: 6px; color: var(--dv-muted); background: transparent; border: 0; transform: translateY(-50%); font-size: 12px; font-weight: 700; }
.dv-field label.dv-remember-me {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0;
  font-weight: 650;
  cursor: pointer;
}
.dv-remember-me input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--dv-black);
  flex-shrink: 0;
}
.dv-login-checks {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dv-login-button { width: 100%; min-height: 50px; margin-top: 4px; }
.dv-pwa-install { margin-top: 4px; }
.dv-login-or {
  margin: 22px 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--dv-muted);
  font-size: 12px;
  font-weight: 700;
}
.dv-login-or::before,
.dv-login-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--dv-border);
}
.dv-pwa-install-hint {
  margin: 0 0 12px;
  color: var(--dv-muted);
  font-size: 12px;
  font-weight: 650;
  text-align: center;
  line-height: 1.5;
}
.dv-pwa-install .dv-login-button { margin-top: 0; }
.dv-ios-install-steps {
  margin: 16px 0 0;
  padding-left: 22px;
  color: var(--dv-text);
  font-size: 14px;
  line-height: 1.7;
}
.dv-ios-install-steps li { margin-bottom: 6px; }
.dv-login-footer { margin: auto 0 0; padding-top: 48px; color: var(--dv-subtle); text-align: center; font-size: 11px; }

@media (max-width: 767.98px), (max-height: 700px) {
  .dv-login-shell {
    min-height: 100dvh;
    padding: max(16px, env(safe-area-inset-top)) 20px max(16px, env(safe-area-inset-bottom));
    justify-content: flex-start;
  }
  .dv-login-brand {
    margin-bottom: 14px;
  }
  .dv-login-brand .dv-logo-mark.is-large {
    width: 52px;
    height: 52px;
    margin-bottom: 8px;
    padding: 3px;
    border-radius: 12px;
  }
  .dv-login-brand h1 { font-size: 22px; }
  .dv-login-heading { margin-bottom: 12px; }
  .dv-login-heading p { display: none; }
  .dv-login-heading h2 {
    margin: 0;
    font-size: 18px;
  }
  .dv-login-card .dv-field { margin-bottom: 12px; }
  .dv-login-checks { gap: 8px; }
  .dv-login-button { min-height: 48px; }
  .dv-login-footer {
    margin-top: 18px;
    padding-top: 0;
  }
}
@media (max-height: 540px) {
  .dv-login-brand { display: none; }
  .dv-login-heading { margin-bottom: 10px; }
  .dv-login-card .dv-field { margin-bottom: 8px; }
  .dv-login-footer { display: none; }
}
@media (min-width: 768px) and (min-height: 701px) {
  .dv-login-shell { justify-content: center; }
  .dv-login-footer { margin-top: 56px; }
}

.dv-phone-reminder {
  margin: 0 0 16px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  color: #85530b;
  background: var(--dv-warning-soft);
  border: 1px solid rgba(233,146,22,.24);
  border-radius: 13px;
  box-shadow: var(--dv-shadow);
  text-decoration: none;
}
.dv-phone-reminder:hover { color: #85530b; border-color: rgba(233,146,22,.48); transform: translateY(-1px); }
.dv-phone-reminder-icon { width: 30px; height: 30px; display: grid; place-items: center; color: var(--dv-surface); background: var(--dv-warning); border-radius: 10px; font-size: 16px; font-weight: 900; }
.dv-phone-reminder-copy { min-width: 0; display: grid; gap: 1px; }
.dv-phone-reminder-copy strong { font-size: 14px; font-weight: 800; }
.dv-phone-reminder-copy small { color: #9a6a25; font-size: 12px; }
.dv-phone-reminder-arrow { font-size: 18px; font-weight: 800; }

.dv-dashboard-section { margin-top: 27px; }
.dv-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 359.98px) {
  .dv-stat-grid.dv-report-summary { grid-template-columns: 1fr; }
}
.dv-stat-card {
  container: dv-stat / inline-size;
  min-width: 0;
  padding: 17px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  color: var(--dv-text);
  background: var(--dv-surface);
  border: 1px solid var(--dv-border);
  border-radius: var(--dv-radius-md);
  box-shadow: var(--dv-shadow);
}
.dv-stat-card:hover { color: var(--dv-text); border-color: var(--dv-border-strong); transform: translateY(-1px); }
.dv-stat-card > span:not(.dv-stat-icon) {
  grid-column: 1 / -1;
  margin: 14px 0 5px;
  color: var(--dv-muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.dv-stat-card strong {
  min-width: 0;
  max-width: 100%;
  color: var(--dv-black);
  font-size: clamp(14px, 3.2vw, 24px);
  font-size: clamp(14px, 12cqi, 24px);
  line-height: 1.15;
  font-weight: 850;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: normal;
  word-break: keep-all;
  white-space: nowrap;
}
.dv-stat-card small { align-self: end; color: var(--dv-subtle); font-size: 11px; }
/* 業績總覽依序顯示標題、總額、分項，避免明細占用主數字的欄位。 */
.dv-stat-grid.dv-report-summary.dv-sales-summary { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.dv-sales-summary .dv-stat-card {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  align-items: start;
  gap: 10px;
}
.dv-sales-summary .dv-stat-card > span { margin: 0; }
.dv-sales-summary .dv-stat-card > strong { font-size: clamp(20px, 12cqi, 26px); }
.dv-sales-summary-breakdown {
  display: grid;
  align-content: start;
  gap: 5px;
  margin: 2px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--dv-border);
  color: var(--dv-subtle);
  font-size: 12px;
  line-height: 1.5;
}
.dv-sales-summary-breakdown > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; }
.dv-sales-summary-breakdown dt { font-weight: 500; }
.dv-sales-summary-breakdown dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dv-stat-icon { width: 31px; height: 31px; display: grid; place-items: center; grid-column: 2; color: var(--dv-muted); background: var(--dv-bg); border-radius: 10px; font-weight: 800; }
.dv-stat-card.is-saleable .dv-stat-icon { color: var(--dv-success); background: var(--dv-success-soft); }
.dv-stat-card.is-repairing .dv-stat-icon { color: var(--dv-warning); background: var(--dv-warning-soft); }
.dv-stat-card.is-waiting .dv-stat-icon { color: var(--dv-info); background: var(--dv-info-soft); }
.dv-stat-card.is-delivered .dv-stat-icon { color: var(--dv-teal); background: var(--dv-teal-soft); }

.dv-filter-shell { margin-bottom: 18px; padding: 14px; min-width: 0; overflow-x: hidden; background: var(--dv-surface); border: 1px solid var(--dv-border); border-radius: var(--dv-radius-md); box-shadow: var(--dv-shadow); }
.dv-list-toolbar {
  margin-bottom: 18px;
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
  background: var(--dv-surface);
  border: 1px solid var(--dv-border);
  border-radius: var(--dv-radius-md);
  box-shadow: var(--dv-shadow);
}
.dv-sort-buttons { min-width: 0; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.dv-sort-button {
  min-height: 40px;
  padding: 8px 11px;
  flex: 1 1 auto;
  color: var(--dv-muted);
  background: var(--dv-bg);
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
}
.dv-sort-button:hover { color: var(--dv-black); border-color: var(--dv-border-strong); }
.dv-sort-button.is-active { color: var(--dv-selected-text); background: var(--dv-selected-surface); border-color: var(--dv-selected-surface); }
.dv-sort-button span { margin-left: 3px; font-size: 14px; font-weight: 900; }

.dv-customer-view-toggle {
  width: 46px;
  height: 46px;
  min-height: 46px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--dv-black);
  background: var(--dv-surface);
  border: 1px solid var(--dv-border-strong);
  border-radius: 12px;
}
.dv-customer-view-toggle svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dv-customer-view-toggle:hover { background: var(--dv-bg); border-color: var(--dv-black); }
html[data-dv-customer-view="1"] .dv-customer-view-toggle {
  color: var(--dv-selected-text);
  background: var(--dv-selected-surface);
  border-color: var(--dv-selected-surface);
}
html[data-dv-customer-view="1"] [data-dv-vehicle-privacy] .dv-record-amount,
html[data-dv-customer-view="1"] [data-dv-vehicle-privacy] .dv-commission-tier,
html[data-dv-customer-view="1"] [data-dv-vehicle-privacy] [data-dv-staff-sort],
html[data-dv-customer-view="1"] [data-dv-vehicle-privacy] [data-dv-staff-cost] {
  display: none;
}
.dv-filter-shell.is-collapsible { padding: 8px 12px 10px; }
.dv-filter-toggle-bar { width: 100%; min-height: 42px; padding: 6px 2px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--dv-black); background: transparent; border: 0; font-size: 14px; font-weight: 800; text-align: left; }
.dv-filter-toggle-bar:hover { color: var(--dv-red); }
.dv-filter-plus { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 30px; color: var(--dv-black); background: var(--dv-bg); border: 1px solid var(--dv-border-strong); border-radius: 8px; font-size: 18px; font-weight: 700; line-height: 1; }
.dv-filter-toggle-bar[aria-expanded="true"] .dv-filter-plus { color: var(--dv-selected-text); background: var(--dv-selected-surface); border-color: var(--dv-selected-surface); }
.dv-filter-body { padding-top: 8px; border-top: 1px solid var(--dv-border); }
.dv-search-row { display: flex; gap: 9px; }
.dv-search-box { position: relative; flex: 1; }
.dv-search-box svg { position: absolute; top: 50%; left: 14px; width: 18px; height: 18px; fill: none; stroke: var(--dv-muted); stroke-width: 2; transform: translateY(-50%); }
.dv-search-box input { width: 100%; padding-left: 42px; }
.dv-make-filter { min-width: 0; }
.dv-make-filter .form-select { min-height: 46px; }
.dv-vehicle-list-filters { min-width: 0; display: grid; grid-template-columns: 1fr; gap: 9px; }
.dv-vehicle-card[hidden] { display: none !important; }
.dv-filter-chips { margin-top: 13px; padding-bottom: 2px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.dv-filter-chips::-webkit-scrollbar { display: none; }
.dv-filter-chip { min-height: 36px; padding: 8px 13px; flex: 0 0 auto; color: var(--dv-muted); background: var(--dv-bg); border: 1px solid transparent; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
button.dv-filter-chip { cursor: pointer; font-family: inherit; line-height: inherit; }
.dv-filter-chip:hover { color: var(--dv-black); }
.dv-filter-chip.is-active { color: var(--dv-selected-text); background: var(--dv-selected-surface); }

.dv-due-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* 選擇器要壓過 .dv-field label（display:block／margin-bottom／color／font-weight），
   不然 inline-flex 與 gap 都不會生效，chip 也會多出 7px 的下緣留白。 */
.dv-due-chips .dv-due-chip {
  position: relative;
  min-height: 44px;
  margin: 0;
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--dv-muted);
  background: var(--dv-bg);
  border: 1px solid var(--dv-border);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
  user-select: none;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.dv-due-chip input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.dv-due-chip span { pointer-events: none; }
.dv-due-chip:hover { color: var(--dv-black); border-color: var(--dv-border-strong); }
.dv-due-chip:has(:checked),
.dv-due-chip.is-active {
  color: var(--dv-selected-text);
  background: var(--dv-selected-surface);
  border-color: var(--dv-selected-surface);
}
/* 勾勾掛在 label 上當獨立的 flex item，靠 gap 跟文字分開；接在 span 文字後面會擠成
   「不限✓」。未選取時 content 不生成，gap 也就不佔位。 */
.dv-due-chip:has(:checked)::after,
.dv-due-chip.is-active::after { content: "✓"; font-size: 12px; line-height: 1; }
.dv-due-chip:has(:focus-visible) { box-shadow: 0 0 0 3px rgba(17, 17, 17, .18); }

/* 常用貸款（Views/Loan/_LoanQuickPick.cshtml）：比到期日 chip 小一號，標題用說明字而不是欄位標籤。 */
.dv-field.dv-loan-quick { margin-bottom: 12px; }
.dv-loan-quick-title { margin: 0 0 6px; color: var(--dv-muted); font-size: 12px; font-weight: 700; }
.dv-loan-quick-options { display: flex; flex-wrap: wrap; gap: 8px; }
.dv-loan-quick-option {
  min-height: 36px;
  padding: 6px 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--dv-text);
  background: var(--dv-bg);
  border: 1px solid var(--dv-border);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.dv-loan-quick-option span { color: var(--dv-muted); font-size: 12px; font-weight: 600; }
.dv-loan-quick-option:hover { border-color: var(--dv-border-strong); }
.dv-loan-quick-option.is-active {
  color: var(--dv-selected-text);
  background: var(--dv-selected-surface);
  border-color: var(--dv-selected-surface);
}
.dv-loan-quick-option.is-active span { color: inherit; }
.dv-loan-quick-option:focus-visible { outline: 2px solid var(--dv-black); outline-offset: 2px; }

.dv-vehicle-grid { display: grid; grid-template-columns: 1fr; gap: 15px; }
.dv-vehicle-card {
  overflow: hidden;
  position: relative;
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  grid-template-rows: auto auto;
  background: var(--dv-surface);
  border: 1px solid var(--dv-border);
  border-radius: var(--dv-radius-md);
  box-shadow: var(--dv-shadow);
}
.dv-vehicle-card:hover { color: var(--dv-text); border-color: var(--dv-border-strong); box-shadow: var(--dv-shadow-raised); transform: translateY(-2px); }
.dv-vehicle-card-detail-link {
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: inherit;
}
.dv-vehicle-card-detail-link:focus-visible { outline: 3px solid var(--dv-black); outline-offset: -3px; }
.dv-vehicle-card-media {
  position: relative;
  display: block;
  grid-row: 1 / 3;
  width: 120px;
  aspect-ratio: 4 / 3;
  height: auto;
  align-self: start;
  overflow: hidden;
  background: #eeeeee;
}
.dv-vehicle-card-media .dv-image-shell { position: absolute; inset: 0; }
.dv-vehicle-card-media .dv-status-badge { position: absolute; top: 8px; left: 8px; z-index: 2; pointer-events: none; }
.dv-vehicle-card-body { padding: 12px 14px 8px; }
.dv-vehicle-card-eyebrow { display: flex; justify-content: space-between; gap: 12px; color: var(--dv-muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.dv-vehicle-card-tags { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.dv-commission-tier {
  min-height: 24px;
  max-width: 100%;
  padding: 5px 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
.dv-commission-tier svg { width: 13px; height: 13px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.dv-commission-tier.is-high { color: #8a5709; background: #fff4d8; border-color: rgba(201, 132, 16, .25); }
.dv-commission-tier.is-premium { color: #9e2132; background: #fff0f3; border-color: rgba(158, 33, 50, .22); }
.dv-commission-value { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.dv-vehicle-card h2 { margin: 7px 0 8px; overflow: hidden; color: var(--dv-black); font-size: 19px; font-weight: 800; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dv-vehicle-card-footer { position: relative; z-index: 2; padding: 0 14px 12px; display: flex; gap: 8px; }
.dv-vehicle-card-footer > * { flex: 1; }
.dv-saleable-page .dv-saleable-card-meta {
  margin-top: 6px;
  display: flex;
  align-items: baseline;
  gap: 4px 10px;
  flex-wrap: wrap;
  color: var(--dv-muted);
  font-size: 12px;
}
.dv-saleable-page .dv-saleable-card-mileage { color: var(--dv-text); font-weight: 750; }
.dv-saleable-page .dv-saleable-card-identity { min-width: 0; overflow-wrap: anywhere; }
.dv-saleable-page .dv-saleable-card-affordance { display: none; }
.dv-saleable-page .dv-vehicle-card-detail-link { z-index: 2; }
.dv-saleable-page [hidden] { display: none !important; }
.dv-saleable-page.is-share-selecting { padding-bottom: 140px; }
.dv-saleable-page.is-share-selecting .dv-saleable-card:hover { transform: none; }
.dv-saleable-page.is-share-selecting .dv-saleable-card-affordance { display: none; }
.dv-saleable-page .dv-saleable-card.is-share-selected {
  border-color: var(--dv-red);
  box-shadow: 0 0 0 2px var(--dv-red);
}
.dv-saleable-select-card {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}
.dv-saleable-select-card:focus-visible { outline: 3px solid var(--dv-red); outline-offset: -3px; }
.dv-saleable-select-check {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: rgba(17, 17, 17, .45);
  color: transparent;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .2);
  font-size: 20px;
  font-weight: 800;
}
.dv-saleable-select-card[aria-pressed="true"] .dv-saleable-select-check {
  background: var(--dv-red-fill);
  color: #fff;
}
.dv-saleable-share-bar {
  position: fixed;
  z-index: 1025;
  left: 0;
  right: 0;
  bottom: var(--dv-bottom-nav-offset);
  padding: 12px max(16px, env(safe-area-inset-right, 0px)) 12px max(16px, env(safe-area-inset-left, 0px));
  background: var(--dv-chrome-strong);
  border-top: 1px solid var(--dv-border);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .08);
}
.dv-saleable-share-controls { display: flex; align-items: center; gap: 8px; }
.dv-saleable-share-controls > button { min-height: 44px; padding-right: 13px; padding-left: 13px; white-space: nowrap; }
.dv-saleable-share-count { margin-right: auto; color: var(--dv-black); font-size: 13px; font-weight: 750; white-space: nowrap; }
.dv-saleable-share-message { margin: 0 0 12px; color: var(--dv-text); font-size: 14px; overflow-wrap: anywhere; }
.dv-saleable-share-preview { display: grid; gap: 16px; }
.dv-saleable-share-preview img { display: block; width: 100%; height: auto; border: 1px solid var(--dv-border); border-radius: 10px; }
.dv-saleable-share-modal .modal-dialog-scrollable .modal-content { overflow: hidden; }
.dv-saleable-share-modal .modal-header { padding-top: max(18px, env(safe-area-inset-top, 0px)); }
.dv-saleable-share-modal .modal-footer { flex-wrap: wrap; padding-bottom: max(14px, env(safe-area-inset-bottom, 0px)); }
.dv-saleable-share-modal .modal-footer > button { min-height: 44px; flex: 1 1 auto; }
.dv-infinite-loader {
  min-height: 84px;
  padding: 20px 0 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.dv-infinite-status { color: var(--dv-muted); font-size: 12px; font-weight: 650; }
.dv-infinite-loader.is-loading::before {
  content: "";
  width: 22px;
  height: 22px;
  border: 2px solid var(--dv-border-strong);
  border-top-color: var(--dv-red);
  border-radius: 50%;
  animation: dv-spin .7s linear infinite;
}
.dv-infinite-loader.is-loading [data-dv-load-more] { display: none; }
@keyframes dv-spin { to { transform: rotate(360deg); } }

.dv-loading-overlay,
.dv-busy {
  position: fixed;
  inset: 0;
  z-index: 2100;
  z-index: var(--dv-loading-layer, 3000);
  box-sizing: border-box;
  width: 100%;
  min-height: 100vh;
  height: 100dvh;
  display: grid;
  place-items: center;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: max(24px, env(safe-area-inset-top, 0px))
           max(16px, env(safe-area-inset-right, 0px))
           max(24px, env(safe-area-inset-bottom, 0px))
           max(16px, env(safe-area-inset-left, 0px));
  background: rgba(23, 23, 23, .54);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: wait;
  touch-action: none;
}
.dv-loading-overlay[hidden],
.dv-busy[hidden] { display: none !important; }
body.is-dv-loading,
body.is-dv-busy { overflow: hidden; touch-action: none; }
.dv-loading-panel,
.dv-busy-panel {
  width: min(360px, 100%);
  padding: 30px 26px 24px;
  display: grid;
  justify-items: center;
  gap: 18px;
  color: var(--dv-text);
  text-align: center;
  background: var(--dv-surface);
  border: 1px solid var(--dv-border);
  border-radius: var(--dv-radius-md);
  box-shadow: var(--dv-shadow-raised);
}
.dv-loading-spinner,
.dv-busy-ring {
  width: 42px;
  height: 42px;
  display: block;
  box-sizing: border-box;
  border: 3px solid rgba(var(--dv-brand-rgb), .16);
  border-top-color: var(--dv-red);
  border-radius: 50%;
  animation: dv-spin .72s linear infinite;
}
.dv-loading-copy {
  display: grid;
  justify-items: center;
  gap: 8px;
}
.dv-loading-title {
  margin: 0;
  color: var(--dv-black);
  font-size: 21px;
  font-weight: 850;
}
.dv-loading-message,
.dv-loading-detail,
.dv-loading-note { margin: 0; }
.dv-loading-message { color: var(--dv-text); font-size: 14px; font-weight: 700; }
.dv-loading-detail { color: var(--dv-muted); font-size: 13px; font-weight: 600; }
.dv-loading-note { color: var(--dv-muted); font-size: 12px; }
@media (min-width: 992px) {
  .dv-loading-panel,
  .dv-busy-panel { width: 380px; }
}

/* 里程碑慶祝動畫的畫布（實作在 dv-celebrate.js，元素由 JS 建立與移除）。
   永遠不吃點擊，所以疊在 loading 之上也不擋操作 —— 被遮住反而白畫一場。
   reduced-motion 的停用是在 JS 判斷的：canvas 動畫吃不到本檔最後那條
   把 animation-duration 歸零的全域規則。 */
.dv-celebrate-layer {
  position: fixed;
  inset: 0;
  z-index: var(--dv-celebrate-layer, 3200);
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.dv-image-shell {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: var(--dv-skeleton);
}
.dv-image-frame { position: relative; overflow: hidden; }
.dv-purchase-photo > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dv-image-shell[hidden], .dv-image-frame[hidden] { display: none !important; }
.dv-image-shell:not(.is-loaded)::before,
.dv-image-frame:not(.is-loaded)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(135deg, var(--dv-skeleton), var(--dv-surface-muted));
  pointer-events: none;
}
.dv-image-placeholder {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--dv-skeleton);
  background-image: linear-gradient(135deg, var(--dv-skeleton), var(--dv-surface-muted));
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 1;
  transition: opacity .18s ease;
}
.dv-image-shell:not(.is-loaded):not(.is-error):not(.is-empty) .dv-image-placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--dv-skeleton-sheen), transparent);
  transform: translateX(-100%);
  animation: dv-image-shimmer 1.2s ease-in-out infinite;
}
.dv-image-content {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  opacity: 0;
  transition: opacity .18s ease;
}
.dv-image-shell > img:not(.dv-image-content) {
  opacity: 0;
  transition: opacity .18s ease;
}
.dv-image-frame > img { opacity: 0; transition: opacity .18s ease; }
.dv-image-frame.is-loaded > img { opacity: 1; }
.dv-image-frame.is-error > img, .dv-image-frame.is-empty > img { opacity: 0; visibility: hidden; }
.dv-image-frame.is-contain > img { object-fit: contain; }
.dv-image-feedback {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 4px;
  color: var(--dv-text);
  text-align: center;
  pointer-events: none;
}
.dv-image-feedback[hidden] { display: none !important; }
.dv-image-shell:not(.is-error):not(.is-empty) > .dv-image-feedback,
.dv-image-frame:not(.is-error):not(.is-empty) > .dv-image-feedback { padding-top: 42px; }
.dv-image-feedback .dv-image-status { font-size: 11px; font-weight: 650; line-height: 1.35; }
.is-preview > .dv-image-feedback .dv-image-status { font-size: 14px; }
.dv-image-feedback .dv-image-retry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 3px 9px;
  border: 1px solid var(--dv-border-strong);
  border-radius: 7px;
  background: var(--dv-surface);
  color: var(--dv-text);
  font: inherit;
  font-size: 11px;
  line-height: 1.2;
  cursor: pointer;
  pointer-events: auto;
}
.dv-image-retry:focus-visible { outline: 2px solid var(--dv-red); outline-offset: 2px; }
.has-linked-retry { cursor: pointer; }
.is-compact:not(.is-empty) > .dv-image-feedback .dv-image-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.dv-image-shell.is-compact > .dv-image-feedback,
.dv-image-frame.is-compact > .dv-image-feedback { padding: 2px; }
.dv-image-shell.is-empty > img { opacity: 0; visibility: hidden; }
.dv-image-shell.is-loaded > img:not(.dv-image-content) { opacity: 1; }
.dv-image-shell.is-error > img:not(.dv-image-content) { opacity: 0; visibility: hidden; }
.dv-image-shell.is-contain > img:not(.dv-image-content) { object-fit: contain; }
.dv-image-shell.is-contain .dv-image-content { object-fit: contain; }
.dv-image-shell.is-loaded .dv-image-placeholder { opacity: 0; pointer-events: none; }
.dv-image-shell.is-loaded .dv-image-content { opacity: 1; }
.dv-image-shell.is-error .dv-image-content {
  opacity: 0;
  visibility: hidden;
}
@keyframes dv-image-shimmer {
  100% { transform: translateX(100%); }
}

.dv-status-badge { min-height: 28px; padding: 6px 10px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent; border-radius: 999px; font-size: 11px; font-weight: 800; line-height: 1; white-space: nowrap; }
.dv-status-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.dv-status-badge.is-draft, .dv-status-badge.is-neutral { color: #686868; background: #f0f0f0; }
.dv-status-badge.is-income { color: var(--dv-success); background: var(--dv-success-soft); }
.dv-status-badge.is-expense { color: var(--dv-danger); background: var(--dv-danger-soft); }
.dv-status-badge.is-repairing { color: var(--dv-warning); background: var(--dv-warning-soft); }
.dv-status-badge.is-saleable { color: var(--dv-success); background: var(--dv-success-soft); }
.dv-status-badge.is-wait-delivery, .dv-status-badge.is-processing { color: var(--dv-info); background: var(--dv-info-soft); }
.dv-status-badge.is-delivered { color: var(--dv-teal); background: var(--dv-teal-soft); }
.dv-status-badge.is-stopped { color: var(--dv-danger); background: var(--dv-danger-soft); }
.dv-status-badge.is-reserved { color: #7a57bd; background: #f3edff; }
.dv-lock-badge { align-self: flex-start; }
.dv-lock-badge::before { content: none; }
.dv-lock-badge svg { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dv-status-badge.dv-lock-badge.is-locked { color: var(--dv-teal); background: var(--dv-teal-soft); border-color: rgba(38, 125, 119, .28); }
/* --dv-warning 在淺底上對比不到 3:1，未鎖帳改用深一階的琥珀字。 */
.dv-status-badge.dv-lock-badge.is-unlocked { color: #8a5709; background: #fff4d8; border-color: rgba(201, 132, 16, .3); }

.dv-detail-hero { overflow: hidden; margin-bottom: 17px; background: var(--dv-surface); border: 1px solid var(--dv-border); border-radius: var(--dv-radius-lg); box-shadow: var(--dv-shadow); }
/* 手機版（<992px）文字在上、照片在下：DOM 就是這個順序；桌機用 order 把照片排回左欄。
   狀態徽章跟著車名（.dv-detail-heading），不再疊在照片上。 */
.dv-vehicle-hero { position: relative; min-width: 0; background: var(--dv-media-bg); border-top: 1px solid var(--dv-border); }
.dv-detail-summary { padding: 14px 16px 16px; }
.dv-detail-title-row { margin: 4px 0 10px; display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
/* vehicle-ai-content.css 把 .dv-detail-heading 設成 flex 列、h1 flex: 1；這裡提高特異性讓徽章能換行：
   車名短就跟徽章同一列，車名長（兩行）徽章自動掉到車名下方。 */
.dv-detail-title-row .dv-detail-heading { flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.dv-detail-title-row .dv-detail-heading h1 { flex: 0 1 auto; }
.dv-detail-title-row .dv-detail-heading .dv-status-badge { flex: 0 0 auto; }
.dv-detail-title-row h1 { margin: 0; min-width: 0; color: var(--dv-black); font-size: clamp(22px, 5.4vw, 30px); font-weight: 850; letter-spacing: -.04em; line-height: 1.2; overflow-wrap: anywhere; word-break: break-word; }
.dv-detail-price { min-width: 0; color: var(--dv-red); font-size: clamp(16px, 4.6vw, 24px); font-weight: 850; line-height: 1.2; overflow-wrap: anywhere; word-break: break-word; }
.dv-summary-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--dv-muted); font-size: 13px; }
.dv-detail-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.dv-user-detail { display: grid; gap: 16px; }
.dv-user-detail > .dv-section-card,
.dv-user-detail-side > .dv-section-card { margin-bottom: 0; }
.dv-user-detail-side { display: grid; gap: 16px; min-width: 0; }
.dv-user-detail .dv-info-list > div {
  grid-template-columns: 7.5rem minmax(0, 1fr);
  align-items: baseline;
}
.dv-metric-grid { margin-bottom: 17px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dv-metric-grid.is-stack { grid-template-columns: 1fr; }
.dv-metric-card { min-width: 0; padding: 16px; background: var(--dv-surface); border: 1px solid var(--dv-border); border-radius: 14px; box-shadow: var(--dv-shadow); }
.dv-metric-card span { display: block; margin-bottom: 7px; color: var(--dv-muted); font-size: 11px; font-weight: 700; }
.dv-metric-card strong { display: block; min-width: 0; overflow-wrap: anywhere; word-break: break-word; color: var(--dv-black); font-size: clamp(16px, 4.6vw, 24px); font-weight: 850; letter-spacing: -.025em; line-height: 1.15; }
.dv-metric-card.is-accent strong { color: var(--dv-red); }
.dv-info-list { display: grid; gap: 0; }
.dv-info-list > div { min-width: 0; padding: 12px 0; display: grid; grid-template-columns: minmax(92px, .75fr) minmax(0, 1.25fr); gap: 14px; border-bottom: 1px solid var(--dv-border); }
.dv-info-list > div:last-child { border-bottom: 0; }
.dv-info-list span { color: var(--dv-muted); font-size: 13px; }
.dv-info-list strong { min-width: 0; color: var(--dv-text); font-size: 14px; font-weight: 700; overflow-wrap: anywhere; text-align: right; }
.dv-certificate-link { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 5px 12px; color: var(--dv-black); background: var(--dv-surface); border: 1px solid var(--dv-border-strong); border-radius: 999px; font-size: 13px; font-weight: 750; line-height: 1.2; text-align: left; text-decoration: none; }
.dv-certificate-link:hover { color: var(--dv-red); border-color: var(--dv-red); }
.dv-certificate-link:focus-visible { outline: 2px solid var(--dv-info); outline-offset: 2px; }
.dv-info-list .dv-certificate-link span { color: inherit; font-size: inherit; }
.dv-info-list > div:has(.dv-certificate-link) { align-items: center; }
.dv-info-list strong.dv-report-money {
  overflow-wrap: normal;
  word-break: keep-all;
}
.dv-info-list > div.is-note { align-items: start; }
.dv-info-list > div.is-note strong {
  text-align: left;
  font-weight: 650;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.dv-review-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  vertical-align: 1px;
}
.dv-review-mark.is-pending {
  color: var(--dv-warning);
  background: var(--dv-warning-soft);
}
.dv-review-mark.is-confirmed {
  color: var(--dv-success);
  background: var(--dv-success-soft);
}
.dv-finance-status {
  display: inline-flex;
  flex: 0 0 24px;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: var(--dv-muted);
  background: var(--dv-bg);
  vertical-align: middle;
}
.dv-finance-status svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dv-finance-status.is-saleable { color: var(--dv-ink-success); background: var(--dv-success-soft); }
.dv-finance-status.is-repairing { color: var(--dv-ink-warning); background: var(--dv-warning-soft); }
.dv-finance-status.is-stopped { color: var(--dv-ink-danger); background: var(--dv-danger-soft); }
.dv-info-list > .dv-deal-financial-total { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.dv-deal-financial-total strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.dv-info-list .dv-review-mark,
.dv-summary-item .dv-review-mark {
  display: inline-flex;
}
/* 結算數字（_VehicleSettlement）右欄只有金額或筆數：金額欄只拿需要的寬度，其餘留給標籤，
   「業務獎金 40% · 林志豪」在手機上才放得進一行；放不下時比例與領取人整段換到下一行，不從中間拆。 */
[data-financial-summary] .dv-info-list > div { grid-template-columns: minmax(0, 1fr) auto; }
.dv-bonus-basis { font-size: 12px; white-space: nowrap; }
.dv-note { margin: 0; min-width: 0; color: var(--dv-text); font-size: 14px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }

.dv-document-list { display: grid; gap: 8px; }
.dv-attachment-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dv-attachment-row .dv-document-item { flex: 1; min-width: 0; }
.dv-attachment-row > form { margin: 0; flex: 0 0 auto; }
.dv-attachment-row > form .dv-btn-danger { min-height: 40px; padding: 8px 12px; }
.dv-attachment-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.dv-attachment-actions > form { margin: 0; }
.dv-attachment-actions .dv-btn-secondary, .dv-attachment-actions .dv-btn-danger { min-height: 40px; padding: 8px 12px; }
.dv-attachment-row.is-preview { align-items: stretch; flex-direction: column; }
.dv-attachment-row.is-preview > form .dv-btn-danger { width: 100%; }
.dv-document-item { padding: 12px; display: flex; align-items: center; gap: 11px; min-width: 0; max-width: 100%; background: var(--dv-bg); border-radius: 11px; }
.dv-document-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; color: var(--dv-red); background: var(--dv-red-soft); border-radius: 9px; font-size: 11px; font-weight: 850; }
.dv-document-item div { min-width: 0; }
.dv-document-item strong { display: block; overflow: hidden; color: var(--dv-text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.dv-document-item span { color: var(--dv-muted); font-size: 11px; }
.dv-deal-document-preview {
  width: 100%;
  border: 1px solid transparent;
  color: inherit;
  cursor: zoom-in;
  text-align: left;
}
.dv-deal-document-preview:hover,
.dv-deal-document-preview:focus-visible {
  border-color: var(--dv-border-strong);
  box-shadow: var(--dv-shadow);
}
.dv-deal-document-thumbnail {
  width: 88px;
  height: 64px;
  display: block;
  overflow: hidden;
  flex: 0 0 88px;
  background: var(--dv-photo-bg);
  border-radius: 9px;
}
.dv-deal-document-thumbnail img { width: 100%; height: 100%; display: block; object-fit: cover; }
.dv-deal-document-copy { min-width: 0; }
.dv-deal-document-download { min-height: 40px; flex: 0 0 auto; }
.dv-review-attachments { min-width: 0; max-width: 100%; }
.dv-review-attachments > summary {
  display: flex;
  align-items: center;
  cursor: pointer;
  list-style: none;
}
.dv-review-attachments > summary::-webkit-details-marker { display: none; }
.dv-review-attachments > summary::after {
  content: "＋";
  margin-left: auto;
  color: var(--dv-muted);
  font-size: 14px;
  font-weight: 850;
}
.dv-review-attachments[open] > summary::after { content: "－"; }
/* 加減號不進換行：字和標籤太長時符號留在右上角，不會掉到下一列。 */
.dv-agent-review-details > summary {
  position: relative;
  align-items: flex-start;
  padding-right: 1.6em;
  cursor: pointer;
  list-style: none;
}
.dv-agent-review-details > summary::-webkit-details-marker { display: none; }
.dv-agent-review-details > summary::after { content: "＋"; position: absolute; top: 0; right: 0; margin-left: 0; font-weight: 850; line-height: 1.4; }
.dv-agent-review-details[open] > summary::after { content: "－"; }
/* AI 意見手風琴：收起來時一行看到每家的態度（小標籤），展開後每家一段理由。
   標籤底色用 surface，放在任何顏色的 alert 上都讀得清楚；線與字色走 token，深淺主題都成立。 */
.dv-agent-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border: 1px solid currentColor; border-radius: 999px; background: var(--dv-surface); font-size: 12px; font-weight: 800; line-height: 1.4; white-space: nowrap; }
.dv-agent-chip.is-good { color: var(--dv-success); }
/* --dv-warning 在白底上對比不到 3:1；收起來時標籤只剩名字，改用跟 alert-warning 同一階的深琥珀。 */
.dv-agent-chip.is-warning { color: #85530b; }
.dv-agent-chip.is-neutral { color: var(--dv-muted); border-color: var(--dv-border-strong); }
/* 淺色主題：狀態字色改用 ink（深一階），底色不變。:where() 讓特異性維持跟原規則相同，
   頁面自己的覆寫（例如團隊進度的徽章色）仍然生效；:not() 排除深色主題，深色規則一條都不動。
   鎖帳徽章（.dv-lock-badge）有自己的顏色，不在這裡。 */
:where(:root:not([data-dv-theme="dark"])) .dv-status-badge.is-repairing,
:where(:root:not([data-dv-theme="dark"])) .dv-review-mark.is-pending { color: var(--dv-ink-warning); }
:where(:root:not([data-dv-theme="dark"])) .dv-status-badge.is-income,
:where(:root:not([data-dv-theme="dark"])) .dv-status-badge.is-saleable,
:where(:root:not([data-dv-theme="dark"])) .dv-review-mark.is-confirmed,
:where(:root:not([data-dv-theme="dark"])) .dv-agent-chip.is-good,
:where(:root:not([data-dv-theme="dark"])) .alert-success { color: var(--dv-ink-success); }
:where(:root:not([data-dv-theme="dark"])) .dv-status-badge.is-wait-delivery,
:where(:root:not([data-dv-theme="dark"])) .dv-status-badge.is-processing,
:where(:root:not([data-dv-theme="dark"])) .alert-info { color: var(--dv-ink-info); }
:where(:root:not([data-dv-theme="dark"])) .dv-status-badge.is-delivered { color: var(--dv-ink-teal); }
:where(:root:not([data-dv-theme="dark"])) .dv-status-badge.is-expense,
:where(:root:not([data-dv-theme="dark"])) .dv-status-badge.is-stopped,
:where(:root:not([data-dv-theme="dark"])) .dv-btn-danger { color: var(--dv-ink-danger); }
/* 結論只用圖示：通過打勾、攔下三角、要補件文件加號、不計票禁止符號；形狀不同，不只靠顏色。 */
.dv-agent-icon { width: 13px; height: 13px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dv-agent-title { display: inline-flex; align-items: center; gap: 6px; }
.dv-agent-title .dv-agent-icon { width: 17px; height: 17px; }
/* 各家標籤包成一組：手機寬度不夠時整組換到第二行，不會跟標題拆散。 */
.dv-agent-votes { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.dv-agent-seat-list { list-style: none; margin: 4px 0 0; padding: 0; }
.dv-agent-seat { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--dv-border-strong); min-width: 0; overflow-wrap: anywhere; }
.dv-agent-seat-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
/* 審核面板（_FinanceReviewPanel）：AI 意見下面接確認、退回那一列，各頁共用。
   做完會捲回這一筆（錨點），上方留出固定工具列的高度。 */
.dv-review-anchor { height: 0; scroll-margin-top: 88px; }
.dv-review-panel { scroll-margin-top: 88px; }
.dv-review-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 12px; }
.dv-review-actions form { margin: 0; }
.dv-review-decisions, .dv-review-side, .dv-review-maint { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dv-review-side, .dv-review-maint { gap: 4px 16px; }
.dv-review-side { margin-left: auto; }
.dv-review-maint form { margin: 0; display: flex; }
.dv-review-panel:not(.is-compact) .dv-review-actions { padding-top: 12px; border-top: 1px solid var(--dv-border); }
.dv-review-panel:not(.is-compact) .dv-review-decisions :is(.dv-btn-primary, .dv-btn-secondary) { min-height: 40px; padding: 8px 16px; }
.dv-review-panel.is-compact .dv-review-actions { margin-top: 0; gap: 6px; padding-top: 0; border-top: 0; justify-content: flex-end; flex-wrap: nowrap; }
.dv-review-panel.is-compact .dv-review-decisions { flex-wrap: nowrap; gap: 6px; }
.dv-review-panel.is-compact .dv-review-actions :is(.dv-btn-primary, .dv-btn-secondary, .dv-btn-danger) { min-height: 38px; padding: 8px 16px; width: auto; }
/* 車輛、成交把審核鈕和編輯／刪除收成同一列。面板本身不生盒子，加減號與按鈕才能跟維護文字並排。 */
.dv-review-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0; align-items: start; }
.dv-review-footer > .dv-review-panel { display: contents; }
.dv-review-footer .dv-review-anchor,
.dv-review-footer .dv-agent-review-details { grid-column: 1 / -1; }
.dv-review-footer .dv-review-actions { grid-column: 1; min-width: 0; padding-right: 12px; }
.dv-review-footer:not(:has(> .dv-review-maint)) .dv-review-actions { grid-column: 1 / -1; padding-right: 0; }
.dv-review-footer > .dv-review-maint { grid-column: 2; align-self: start; margin-top: 12px; padding: 12px 0 0 12px; border-top: 1px solid var(--dv-border); }
.dv-review-footer > .dv-review-maint .dv-text-action { min-height: 40px; }
.dv-review-footer:not(:has(.dv-review-actions)) > .dv-review-maint { grid-column: 1 / -1; justify-self: end; padding-left: 0; padding-right: 0; }
@media (max-width: 575.98px) {
  .dv-review-panel:not(.is-compact) .dv-review-actions { flex-direction: column; align-items: stretch; }
  .dv-review-panel:not(.is-compact) .dv-review-decisions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
  .dv-review-panel:not(.is-compact) .dv-review-decisions:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
  .dv-review-panel:not(.is-compact) .dv-review-decisions > *,
  .dv-review-panel:not(.is-compact) .dv-review-decisions button { width: 100%; }
  .dv-review-panel:not(.is-compact) .dv-review-decisions form { display: flex; }
  .dv-review-panel:not(.is-compact) .dv-review-decisions :is(.dv-btn-primary, .dv-btn-secondary) { min-height: 44px; }
  .dv-review-panel:not(.is-compact) .dv-review-side { margin-left: 0; }
  .dv-review-footer { grid-template-columns: minmax(0, 1fr); }
  .dv-review-footer .dv-review-actions,
  .dv-review-footer > .dv-review-maint { grid-column: 1 / -1; padding-right: 0; padding-left: 0; }
  .dv-review-footer:has(.dv-review-actions) > .dv-review-maint { border-top: 0; margin-top: 0; padding-top: 0; justify-self: start; }
  .dv-review-footer > .dv-review-maint .dv-text-action { min-height: 44px; }
}
/* 對話框裡推翻 AI 的提醒。 */
.dv-review-ai-note { padding: 10px 12px; border-left: 3px solid var(--dv-warning); border-radius: 6px; background: var(--dv-warning-soft); color: var(--dv-text); }
.dv-document-item.is-preview {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  cursor: zoom-in;
}
.dv-review-attachment-preview {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  height: 220px;
  overflow: hidden;
  background: var(--dv-photo-bg);
  border-radius: 10px;
  contain: layout paint;
}
.dv-review-attachment-preview > .dv-image-shell { position: absolute; inset: 0; }
.dv-review-attachment-preview img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}
/* 審核卡片的多張附件：每張預覽 220px 高，直排會把卡片撐得很長。桌機排成格子；
   手機改成一排左右滑，每張只佔 82% 寬，下一張露出一截就知道還能往右滑。 */
.dv-review-attachment-strip { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
@media (max-width: 767.98px) {
  .dv-review-attachment-strip {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .dv-review-attachment-strip::-webkit-scrollbar { display: none; }
  .dv-review-attachment-strip > .dv-document-item { flex: 0 0 82%; scroll-snap-align: start; }
}

.dv-timeline { position: relative; display: grid; gap: 0; min-width: 0; }
.dv-timeline::before { content: ""; position: absolute; top: 15px; bottom: 15px; left: 13px; width: 1px; background: var(--dv-border-strong); }
.dv-timeline-item { position: relative; min-width: 0; padding: 0 0 21px 39px; }
.dv-timeline-item:last-child { padding-bottom: 0; }
.dv-timeline-dot { position: absolute; z-index: 1; top: 5px; left: 7px; width: 13px; height: 13px; background: var(--dv-surface); border: 3px solid var(--dv-subtle); border-radius: 50%; }
.dv-timeline-item:first-child .dv-timeline-dot { border-color: var(--dv-red); box-shadow: 0 0 0 4px var(--dv-red-soft); }
.dv-timeline-card { min-width: 0; padding: 14px; background: var(--dv-bg); border-radius: 12px; }
.dv-timeline-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px 10px; flex-wrap: wrap; min-width: 0; }
.dv-timeline-card header .dv-section-kicker,
.dv-timeline-card header .dv-status-badge { max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
.dv-timeline-card header .dv-section-kicker { letter-spacing: .08em; }
.dv-activity-entity {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  overflow-wrap: anywhere;
}
.dv-timeline-card header .dv-activity-entity { flex: 1; }
.dv-activity-vehicle {
  display: block;
  max-width: 100%;
  color: var(--dv-text);
  font-weight: 750;
  letter-spacing: 0;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.dv-timeline-card time { color: var(--dv-muted); font-size: 11px; white-space: nowrap; }
.dv-timeline-card h3 { margin: 6px 0 0; min-width: 0; color: var(--dv-black); font-size: 14px; font-weight: 800; overflow-wrap: anywhere; word-break: break-word; }
.dv-timeline-card p { margin: 9px 0 0; color: var(--dv-muted); font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; word-break: break-word; white-space: pre-wrap; }
.dv-timeline-operator { margin-top: 7px; color: var(--dv-subtle); font-size: 11px; overflow-wrap: anywhere; word-break: break-word; }
.dv-activity-preview { display: grid; gap: 8px; }
.dv-activity-preview-item {
  min-width: 0;
  padding: 14px 16px;
  background: var(--dv-surface);
  border: 1px solid var(--dv-border);
  border-radius: 14px;
  box-shadow: var(--dv-shadow);
}
.dv-activity-preview-item header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 12px;
  min-width: 0;
  color: var(--dv-muted);
  font-size: 11px;
  font-weight: 700;
}
.dv-activity-preview-item header .dv-activity-entity { flex: 1; }
.dv-activity-preview-item header time { flex: 0 0 auto; font-weight: 650; }
.dv-activity-preview-item h3 {
  margin: 5px 0 0;
  overflow: hidden;
  color: var(--dv-black);
  font-size: 14px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dv-activity-detail-link {
  min-height: 34px;
  margin-top: 10px;
  padding: 0 12px 0 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--dv-red);
  background: var(--dv-red-soft);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .02em;
}
.dv-activity-detail-link:hover { color: var(--dv-red-dark); background: #ffe4e6; }
.dv-activity-detail-link svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dv-total-card { margin-bottom: 16px; padding: 20px; display: flex; align-items: end; justify-content: space-between; gap: 15px; color: var(--dv-hero-text); background: var(--dv-hero-surface); border-radius: var(--dv-radius-md); }
.dv-total-card span { display: block; margin-bottom: 4px; color: var(--dv-hero-text-subtle); font-size: 12px; }
.dv-total-card strong { font-size: clamp(28px, 8vw, 38px); font-weight: 850; letter-spacing: -.04em; }
.dv-total-card small { color: var(--dv-hero-text-subtle); font-size: 11px; }
.dv-cost-list { display: grid; gap: 11px; }
.dv-cost-card { padding: 16px; background: var(--dv-surface); border: 1px solid var(--dv-border); border-radius: 14px; box-shadow: var(--dv-shadow); }
.dv-cost-card-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
/* 項目名稱再長也只在左欄換行，金額固定一行不拆字（例：「#2373 16 白 Lancer io 車換車核底」曾把 $-50,000 擠成兩行）。 */
.dv-cost-card-head > div { flex: 1 1 auto; min-width: 0; }
.dv-cost-card-head > .dv-cost-amount { flex: 0 0 auto; white-space: nowrap; overflow-wrap: normal; word-break: normal; }
.dv-cost-card h3 { margin: 4px 0 3px; color: var(--dv-black); font-size: 16px; font-weight: 800; overflow-wrap: anywhere; }
.dv-cost-type { color: var(--dv-red); font-size: 12px; font-weight: 850; letter-spacing: .1em; }
.dv-cost-amount { min-width: 0; color: var(--dv-black); font-size: clamp(16px, 4.4vw, 19px); font-weight: 850; line-height: 1.2; overflow-wrap: anywhere; word-break: break-word; }
.dv-cost-meta { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px 13px; color: var(--dv-muted); font-size: 11px; }
.dv-cost-mobile .dv-cost-meta { align-items: center; }
.dv-cost-date, .dv-cost-registered { white-space: nowrap; }
.dv-cost-note { margin: 10px 0 0; padding-top: 10px; color: var(--dv-muted); border-top: 1px solid var(--dv-border); font-size: 12px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.dv-cost-actions { margin-top: 12px; display: flex; gap: 7px; }
.dv-reconditioning-costs { margin-bottom: 0; }
.dv-reconditioning-costs > .dv-section-heading { margin-bottom: 13px; }
.dv-reconditioning-costs .dv-cost-list {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  align-items: start;
}
.dv-reconditioning-costs .dv-cost-card { min-width: 0; }
.dv-cost-attachments {
  padding-top: 11px;
  border-top: 1px solid var(--dv-border);
}
.dv-cost-attachments-heading {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--dv-text);
  font-size: 12px;
  font-weight: 800;
}
.dv-cost-attachments-heading small { color: var(--dv-muted); font-size: 12px; font-weight: 650; }
.dv-cost-attachment-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 8px;
}
.dv-cost-attachment-tile {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: var(--dv-bg);
  border: 1px solid var(--dv-border);
  border-radius: 11px;
}
.dv-cost-attachment-tile > form { margin: 0; }
.dv-cost-attachment-preview {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  color: var(--dv-overlay-ink);
  background: #171717;
  cursor: zoom-in;
}
.dv-cost-attachment-preview > .dv-image-shell { position: absolute; inset: 0; }
.dv-cost-attachment-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: opacity .18s ease, transform .18s ease;
}
.dv-cost-attachment-preview:hover img { transform: scale(1.025); }
.dv-cost-attachment-preview > span {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  padding: 15px 8px 6px;
  color: var(--dv-overlay-ink);
  background: linear-gradient(transparent, rgba(0, 0, 0, .78));
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dv-cost-attachment-remove {
  position: absolute;
  z-index: 2;
  top: 6px;
  right: 6px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--dv-overlay-ink);
  background: rgba(17, 17, 17, .78);
  border: 1px solid rgba(255, 255, 255, .48);
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
}
.dv-cost-attachment-remove:hover { background: var(--dv-danger); }
.dv-cost-attachments .dv-document-list { margin-top: 8px; }
.dv-cost-attachments .dv-document-item { padding: 9px 10px; }
.dv-reconditioning-transition .dv-form-section-header { margin-bottom: 13px; }
.dv-reconditioning-action-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.dv-reconditioning-action-form .dv-field { margin-bottom: 0; }

.dv-upload-zone { position: relative; padding: 22px 16px; color: var(--dv-muted); background: var(--dv-bg); border: 1.5px dashed var(--dv-border-strong); border-radius: 13px; text-align: center; }
.dv-upload-zone:hover { border-color: var(--dv-red); background: var(--dv-red-soft); }
.dv-upload-zone input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.dv-upload-zone strong { display: block; color: var(--dv-black); font-size: 14px; }
.dv-upload-zone span { font-size: 11px; }
.dv-preview-grid { margin-top: 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dv-preview-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 9px; }
.dv-preview-item { position: relative; min-width: 0; }
.dv-preview-item.is-selectable { cursor: pointer; }
.dv-preview-item.is-cover {
  outline: 2px solid var(--dv-text);
  outline-offset: 2px;
  border-radius: 11px;
}
.dv-preview-item .dv-cover-badge,
.dv-cover-pick .dv-cover-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(17, 17, 17, .86);
  color: var(--dv-overlay-ink);
  font-size: 11px;
  font-weight: 800;
}
.dv-cover-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.dv-cover-pick {
  position: relative;
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 8px;
  background: var(--dv-bg);
  border: 1px solid var(--dv-border);
  border-radius: 14px;
}
.dv-cover-pick.is-cover { border-color: var(--dv-text); }
.dv-cover-pick .dv-image-shell { aspect-ratio: 4 / 3; border-radius: 10px; }
.dv-cover-pick form { margin: 0; }
.dv-cover-action,
.dv-cover-pick .dv-btn-danger { width: 100%; }
.dv-cover-action {
  appearance: none;
  border: 1px solid var(--dv-border-strong);
  border-radius: 10px;
  background: var(--dv-input-bg);
  color: var(--dv-text);
  font-size: 13px;
  font-weight: 800;
  min-height: 40px;
}
.dv-cover-order {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.dv-cover-order label {
  margin: 0;
  color: var(--dv-muted);
  font-size: 11px;
  font-weight: 700;
}
.dv-cover-order .dv-form-control {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  text-align: center;
}
.dv-cover-order-locked {
  min-height: 40px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--dv-border-strong);
  border-radius: 10px;
  background: var(--dv-input-bg);
  color: var(--dv-text);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}
.dv-cover-order-bar { margin-top: 14px; }
.dv-cover-order-bar .dv-btn-primary { width: 100%; }
.dv-preview-item { min-width: 0; padding: 6px; background: var(--dv-bg); border: 1px solid var(--dv-border); border-radius: 9px; text-align: center; }
.dv-preview-item strong { display: grid; min-height: 72px; place-items: center; color: var(--dv-red); font-size: 16px; }
.dv-preview-item span { display: block; margin-top: 5px; overflow: hidden; color: var(--dv-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }

.dv-modal .modal-content { overflow: visible; border: 0; border-radius: 18px; box-shadow: var(--dv-shadow-raised); }
.dv-modal .modal-header { padding: 18px 20px; border-bottom-color: var(--dv-border); }
.dv-modal .modal-title { margin: 0; color: var(--dv-black); font-size: 20px; font-weight: 800; }
.dv-modal .modal-body { padding: 20px; min-width: 0; }
.dv-modal .modal-body .dv-field { scroll-margin-bottom: 108px; }
.dv-modal .modal-body .dv-form-control,
.dv-modal .modal-body .form-control,
.dv-modal .modal-body .form-select {
  min-width: 0;
  max-width: 100%;
}
.dv-modal .modal-footer { padding: 14px 20px; gap: 8px; border-top-color: var(--dv-border); }
.dv-modal .modal-footer > * { margin: 0; }
.dv-task-complete-modal .modal-dialog { max-width: 480px; }
.dv-task-complete-modal .modal-content {
  display: flex;
  flex-direction: column;
  max-height: min(92vh, 720px);
}
.dv-task-complete-modal .modal-content > form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 100%;
}
.dv-task-complete-modal .modal-body {
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.dv-task-complete-photos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.dv-task-complete-add,
.dv-task-complete-thumb {
  position: relative;
  min-height: 72px;
  max-height: 96px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 10px;
}
.dv-task-complete-add {
  display: grid;
  place-items: center;
  color: var(--dv-muted);
  background: var(--dv-bg);
  border: 1px dashed var(--dv-border-strong);
  font-size: 12px;
  font-weight: 750;
  text-align: center;
  cursor: pointer;
}
.dv-task-complete-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dv-task-complete-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: var(--dv-overlay-ink);
  background: rgba(17, 17, 17, .72);
  border: 0;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
/* 車輛建檔／編輯的儲存前確認視窗。差異清單在手機上是兩行（欄位名一行、新舊值一行），
   桌機才並排——「售價 $688,000 → $650,000」這種值一橫排就會被擠到換行。 */
.dv-vehicle-confirm-subject {
  margin: 4px 0 0;
  color: var(--dv-muted);
  font-size: 13px;
  font-weight: 650;
  overflow-wrap: anywhere;
}
.dv-change-list { margin: 0; padding: 0; display: grid; gap: 8px; list-style: none; }
.dv-change-item {
  padding: 10px 12px;
  display: grid;
  gap: 2px;
  background: var(--dv-bg);
  border: 1px solid var(--dv-border);
  border-radius: 10px;
}
.dv-change-label {
  color: var(--dv-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
}
.dv-change-value {
  color: var(--dv-black);
  font-size: 14px;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.dv-change-value s { color: var(--dv-muted); font-weight: 650; }
.dv-change-value strong { font-weight: 850; }
.dv-change-empty {
  margin: 0;
  padding: 14px 12px;
  color: var(--dv-muted);
  background: var(--dv-bg);
  border-radius: 10px;
  font-size: 13px;
  text-align: center;
}
.dv-change-empty[hidden] { display: none; }
.dv-notify-preview {
  margin-top: 12px;
  padding: 12px;
  display: grid;
  gap: 4px;
  background: var(--dv-red-soft);
  border-left: 4px solid var(--dv-red);
  border-radius: 10px;
}
.dv-notify-preview-kicker {
  color: var(--dv-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
}
.dv-notify-preview strong { color: var(--dv-black); font-size: 14px; font-weight: 850; }
.dv-notify-preview span:not(.dv-notify-preview-kicker) {
  color: var(--dv-black);
  font-size: 13px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
@media (min-width: 576px) {
  .dv-change-item {
    grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
    align-items: baseline;
    gap: 4px 12px;
  }
}

.dv-task-report-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.dv-task-report-head h3 { margin: 0; font-size: 16px; }
.dv-task-report-head small { color: var(--dv-muted); }
.dv-task-report-head strong { flex: 0 0 auto; font-size: 13px; }
.dv-task-report-card time { color: var(--dv-muted); font-size: 12px; }
.dv-task-report-photos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.dv-task-report-photo {
  overflow: hidden;
  height: 72px;
  background: var(--dv-bg);
  border-radius: 10px;
}
.dv-task-report-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dv-modal .modal-body p { overflow-wrap: anywhere; }
.dv-vehicle-lock-modal .modal-dialog { max-width: min(1100px, calc(100vw - 24px)); }
.dv-vehicle-lock-modal .modal-content { overflow: hidden; }
.dv-vehicle-lock-modal .modal-header { align-items: flex-start; gap: 8px; }
.dv-vehicle-lock-modal .modal-header > div { min-width: 0; flex: 1 1 auto; }
.dv-vehicle-lock-modal .modal-header .btn-close { flex-shrink: 0; margin-top: 4px; }
.dv-vehicle-lock-modal .modal-title { font-size: 22px; overflow-wrap: anywhere; word-break: break-word; }
.dv-vehicle-lock-modal .dv-form-section-header { margin-bottom: 12px; }
.dv-vehicle-lock-modal .dv-form-section-header h2 { margin: 4px 0 0; font-size: 18px; }
.dv-vehicle-lock-modal .dv-modal-form {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  max-height: 100%;
  overflow: hidden;
}
.dv-vehicle-lock-modal .dv-modal-form .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.dv-vehicle-lock-modal .dv-modal-form .modal-footer { flex-shrink: 0; }
.dv-photo-preview-body { min-height: 220px; display: grid; place-items: center; background: var(--dv-photo-bg); }
.dv-photo-preview-body img { display: block; max-width: 100%; max-height: min(76vh, 860px); object-fit: contain; }

.dv-vehicle-gallery { min-width: 0; max-width: 100%; }
.dv-vehicle-gallery-main {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  /* 手機 3:2（比 4:3 矮約 30px）；桌機另設 16:9。 */
  aspect-ratio: 3 / 2;
  background: var(--dv-media-bg);
  cursor: zoom-in;
}
.dv-vehicle-gallery-main.is-empty { cursor: default; }
.dv-vehicle-gallery-main .carousel-inner,
.dv-vehicle-gallery-main .carousel-item,
.dv-vehicle-gallery-main .dv-image-shell {
  height: 100%;
}
.dv-vehicle-gallery-main .dv-image-shell { position: absolute; inset: 0; }
.dv-vehicle-gallery-main .carousel-control-prev,
.dv-vehicle-gallery-main .carousel-control-next {
  width: 2.75rem;
  opacity: 1;
}
.dv-vehicle-gallery-main .carousel-control-prev { justify-content: flex-start; padding-left: 8px; }
.dv-vehicle-gallery-main .carousel-control-next { justify-content: flex-end; padding-right: 8px; }
.dv-gallery-nav {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: rgba(17, 17, 17, .46);
  border-radius: 50%;
}
.dv-gallery-nav .carousel-control-prev-icon,
.dv-gallery-nav .carousel-control-next-icon {
  width: 14px;
  height: 14px;
}
.dv-vehicle-thumb-strip {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  max-width: 100%;
  padding: 6px 10px 8px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.dv-vehicle-thumb {
  position: relative;
  flex: 0 0 auto;
  /* 手機用精簡縮圖列 56×40；平板、桌機在下方的斷點放大。 */
  width: 56px;
  height: 40px;
  padding: 0;
  overflow: hidden;
  background: var(--dv-media-bg);
  border: 2px solid transparent;
  border-radius: 8px;
}
.dv-vehicle-thumb .dv-image-shell { position: absolute; inset: 0; }
.dv-vehicle-thumb:hover { border-color: var(--dv-border-strong); }
.dv-vehicle-thumb.is-active { border-color: #5f5f5f; box-shadow: 0 0 0 1px rgba(17, 17, 17, .06); }
.dv-vehicle-thumb:focus-visible { border-color: #5f5f5f; }
.dv-photo-manage-list { display: grid; gap: 8px; }
.dv-photo-manage-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px;
  background: var(--dv-bg);
  border-radius: 11px;
}
.dv-photo-manage-thumb {
  position: relative;
  width: 64px;
  height: 48px;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 8px;
}
.dv-photo-manage-thumb .dv-image-shell { position: absolute; inset: 0; }
.dv-photo-manage-item div { min-width: 0; }
.dv-photo-manage-item strong {
  display: block;
  overflow: hidden;
  color: var(--dv-text);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dv-photo-manage-item span { color: var(--dv-muted); font-size: 11px; }
.dv-photo-manage-item > form { margin: 0; flex: 0 0 auto; }
.dv-photo-modal { overflow-x: hidden; }
.dv-photo-modal .modal-dialog { max-width: min(1100px, calc(100vw - 24px)); }
.dv-photo-modal .modal-content { overflow: hidden; }
.dv-photo-modal .modal-body { padding: 0; overflow: hidden; background: var(--dv-photo-bg); }
.dv-photo-modal-frame {
  position: relative;
  width: 100%;
  height: min(85vh, 860px);
  max-height: 85vh;
  background: var(--dv-photo-bg);
}
.dv-photo-modal-frame .carousel,
.dv-photo-modal-frame .carousel-inner,
.dv-photo-modal-frame .carousel-item {
  height: 100%;
}
.dv-photo-modal-frame .dv-image-shell {
  position: absolute;
  inset: 0;
  background: var(--dv-photo-bg);
}
.dv-photo-modal-frame .dv-image-placeholder { background-size: contain; background-color: var(--dv-photo-bg); }
.dv-photo-modal .carousel-control-prev,
.dv-photo-modal .carousel-control-next {
  width: 3.25rem;
  opacity: 1;
}
.dv-photo-modal .dv-gallery-nav { width: 40px; height: 40px; }
.dv-photo-modal .modal-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.dv-photo-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
.dv-photo-action-share { display: none; }
.dv-photo-action-download { display: inline-flex; }
@media (hover: none) and (pointer: coarse) {
  .dv-photo-action-share { display: inline-flex; }
  .dv-photo-action-download { display: none; }
}

.dv-vehicle-gallery-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: var(--dv-surface);
  border-bottom: 1px solid var(--dv-border);
}
.dv-vehicle-gallery-title {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  color: var(--dv-black);
  font-size: 15px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dv-vehicle-gallery-toolbar-actions {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 8px;
}
.dv-gallery-select-button {
  min-height: 40px;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--dv-black);
  background: var(--dv-bg);
  border: 1px solid var(--dv-border);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.dv-gallery-select-button:hover,
.dv-gallery-select-button:focus-visible {
  border-color: var(--dv-border-strong);
}
.dv-gallery-select-button svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
/* hero 模式的「選照片」浮在照片右上角：深色半透明底＋白字，放在照片上，兩個主題都不跟著翻。 */
.dv-gallery-select-button.is-overlay {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 6;
  color: #ffffff;
  background: rgba(17, 17, 17, .6);
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(17, 17, 17, .18);
}
.dv-gallery-select-button.is-overlay:hover,
.dv-gallery-select-button.is-overlay:focus-visible {
  background: rgba(17, 17, 17, .74);
  border-color: rgba(255, 255, 255, .45);
}
.dv-vehicle-gallery-toolbar [data-dv-gallery-select-all] {
  flex: 0 0 auto;
  white-space: nowrap;
}
@media (hover: none) and (pointer: coarse) {
  .dv-vehicle-gallery-toolbar {
    padding: 6px 10px;
  }
  .dv-gallery-select-button {
    min-height: 44px;
  }
  .dv-vehicle-gallery-toolbar [data-dv-gallery-select-all] {
    min-height: 44px;
    padding: 8px 12px;
  }
}
/* 手機版的 hero 相簿：標題列只在選取模式出現（放「全選」），平常不佔第一屏。桌機與 strip 模式維持常駐。 */
@media (max-width: 991.98px) {
  .dv-vehicle-gallery.is-hero:not(.is-selecting) .dv-vehicle-gallery-toolbar { display: none; }
}
.dv-vehicle-gallery.is-selecting .dv-vehicle-gallery-main,
.dv-vehicle-gallery.is-selecting .dv-vehicle-thumb-strip {
  display: none;
}
.dv-detail-page:has(.dv-vehicle-gallery.is-selecting) [data-dv-vehicle-reserve],
.dv-detail-page:has(.dv-vehicle-gallery.is-selecting) .dv-primary-action:has([data-dv-vehicle-reserve]) {
  display: none !important;
}
.dv-photo-share-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 0 12px;
  padding: 16px;
  color: var(--dv-black);
  background: var(--dv-red-soft);
  border-radius: 12px;
  font-size: 15px;
  font-weight: 750;
  overflow-wrap: anywhere;
}
.dv-photo-share-loading[hidden] { display: none !important; }
.dv-photo-share-loading .dv-loading-spinner { width: 26px; height: 26px; flex: 0 0 26px; }
.dv-vehicle-gallery .is-opening-share::before,
.dv-saleable-share-modal .is-opening-share::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: dv-spin .72s linear infinite;
}
.dv-image-shell:not(.is-loaded):not(.is-error):not(.is-empty)::after,
.dv-image-frame:not(.is-loaded):not(.is-error):not(.is-empty)::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: calc(50% - 16px);
  left: calc(50% - 10px);
  width: 20px;
  height: 20px;
  border: 2px solid var(--dv-border-strong);
  border-top-color: var(--dv-red-fill);
  border-radius: 50%;
  pointer-events: none;
  animation: dv-spin .72s linear infinite;
}
.dv-image-shell.is-compact:not(.is-loaded):not(.is-error):not(.is-empty)::after,
.dv-image-frame.is-compact:not(.is-loaded):not(.is-error):not(.is-empty)::after { top: calc(50% - 10px); }
.dv-vehicle-select-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 8px 10px 10px;
}
.dv-vehicle-select-item {
  position: relative;
  min-width: 0;
  aspect-ratio: 4 / 3;
  padding: 0;
  overflow: hidden;
  background: var(--dv-media-bg);
  border: 2px solid transparent;
  border-radius: 10px;
}
.dv-vehicle-select-item .dv-image-shell { position: absolute; inset: 0; }
.dv-vehicle-select-check {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  width: 28px;
  height: 28px;
  display: none;
  place-items: center;
  color: var(--dv-on-accent);
  background: var(--dv-red-fill);
  border-radius: 50%;
  font-size: 15px;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(17, 17, 17, .28);
}
.dv-vehicle-select-item.is-selected {
  border-color: var(--dv-red);
}
.dv-vehicle-select-item.is-selected .dv-vehicle-select-check {
  display: grid;
}
.dv-vehicle-gallery-actions {
  padding: 10px 12px 12px;
  background: var(--dv-surface);
  border-top: 1px solid var(--dv-border);
}
.dv-vehicle-gallery-actions-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 8px;
  flex-wrap: nowrap;
}
.dv-vehicle-gallery-actions-count {
  margin: 0;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  color: var(--dv-black);
  font-size: 14px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dv-vehicle-gallery-message {
  margin: 0;
  padding: 8px 12px 0;
  color: var(--dv-text);
  font-size: 13px;
}
.dv-vehicle-gallery:not(.is-selecting) .dv-vehicle-gallery-message {
  display: none;
}
.dv-vehicle-gallery-actions-buttons {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
}
.dv-vehicle-gallery-actions-buttons > * {
  flex: 1 1 0;
  min-width: 0;
}
.dv-gallery-multi-share { display: none; }
.dv-gallery-multi-download { display: inline-flex; }
@media (hover: none) and (pointer: coarse) {
  .dv-gallery-multi-share { display: inline-flex; }
  .dv-gallery-multi-download { display: none; }
}
.dv-vehicle-gallery.is-share-unsupported .dv-gallery-multi-share { display: none !important; }
.dv-vehicle-gallery.is-share-unsupported .dv-gallery-multi-download { display: inline-flex !important; }

.dv-task-list { display: grid; gap: 10px; }
.dv-task-card { min-width: 0; padding: 15px; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: start; gap: 12px; background: var(--dv-surface); border: 1px solid var(--dv-border); border-radius: 14px; box-shadow: var(--dv-shadow); }
.dv-task-check { width: 20px; height: 20px; margin-top: 1px; border: 2px solid var(--dv-border-strong); border-radius: 50%; }
.dv-task-card.is-completed .dv-task-check { background: var(--dv-success); border-color: var(--dv-success); box-shadow: inset 0 0 0 4px var(--dv-surface); }
.dv-task-card.is-completed h3 { color: var(--dv-muted); text-decoration: line-through; }
.dv-task-content { min-width: 0; }
.dv-task-content h3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin: 0 0 4px;
  overflow: hidden;
  color: var(--dv-black);
  font-size: 14px;
  font-weight: 780;
}
.dv-task-content h3 a { color: inherit; text-decoration: none; }
.dv-task-content h3 a:hover { text-decoration: underline; }
.dv-task-content p { margin: 0 0 5px; overflow: hidden; color: var(--dv-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.dv-task-content time {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: var(--dv-subtle);
  font-size: 11px;
}
.dv-task-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.dv-task-due {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  color: var(--dv-muted);
  background: var(--dv-bg);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}
.dv-task-due.is-tomorrow {
  color: #8a5a12;
  background: var(--dv-warning-soft);
}
.dv-task-due.is-today {
  color: #8a4b00;
  background: #ffe8c7;
}
.dv-task-due.is-soon {
  color: #9a3b00;
  background: #ffd7a8;
  box-shadow: inset 0 0 0 1px rgba(233, 146, 22, .35);
}
.dv-task-due.is-overdue {
  color: var(--dv-danger);
  background: var(--dv-danger-soft);
}
.dv-task-complete-subject {
  margin: 4px 0 0;
  color: var(--dv-muted);
  font-size: 13px;
  font-weight: 650;
  overflow-wrap: anywhere;
}
.dv-task-complete-modal .modal-header { align-items: flex-start; }
.dv-task-page-header { align-items: flex-start; }
.dv-task-header-meta { margin-top: 9px; display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.dv-task-page-header .dv-priority { min-height: 28px; padding: 7px 10px; display: inline-flex; align-items: center; font-size: 11px; line-height: 1; }
.dv-task-status.is-pending { color: #805000; background: var(--dv-warning-soft); }
.dv-task-status.is-in-progress { color: var(--dv-info); background: var(--dv-info-soft); }
.dv-task-status.is-completed { color: var(--dv-success); background: var(--dv-success-soft); }
.dv-task-status.is-cancelled { color: var(--dv-danger); background: var(--dv-danger-soft); }
.dv-task-due.is-none { color: var(--dv-muted); background: #f0f0f0; }
.dv-page-header .dv-task-assignment-summary { margin-top: 10px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; color: var(--dv-muted); font-size: 13px; }
.dv-task-assignment-summary strong { color: var(--dv-black); font-weight: 800; }
.dv-task-assignment-progress { padding-left: 7px; border-left: 1px solid var(--dv-border-strong); }
.dv-task-detail { padding: clamp(16px, 2.5vw, 24px); display: grid; gap: 18px; }
.dv-task-instruction { padding: 19px 20px; background: var(--dv-red-soft); border-left: 4px solid var(--dv-red); border-radius: 12px; }
.dv-task-detail .dv-task-instruction-head { display: flex; align-items: center; justify-content: space-between; flex-direction: row; gap: 10px; }
.dv-task-instruction-head h2 { margin: 0; color: var(--dv-black); font-size: 15px; font-weight: 850; letter-spacing: -.01em; }
.dv-task-instruction-head .dv-task-topic { margin: 0; background: var(--dv-surface); }
.dv-task-detail .dv-task-instruction-text { margin: 12px 0 0; color: var(--dv-black); font-size: clamp(16px, 1.5vw, 18px); font-weight: 650; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.dv-task-detail .dv-task-instruction-empty { margin: 12px 0 0; color: var(--dv-muted); font-size: 14px; line-height: 1.65; }
.dv-task-detail > .dv-task-related { margin-top: 0; }
.dv-task-primary-actions { margin-top: 0; padding-top: 18px; border-top: 1px solid var(--dv-border); }

@media (max-width: 575.98px) {
  .dv-task-page-header .dv-page-actions { width: 100%; }
  .dv-task-page-header .dv-page-actions > a { flex: 1 1 0; justify-content: center; }
  .dv-task-instruction { padding: 16px; }
  .dv-task-detail .dv-task-instruction-text { line-height: 1.7; }
  .dv-task-primary-actions, .dv-task-primary-actions .dv-btn-primary { width: 100%; }
}

/* 待辦列表上的主題標籤，跟關聯資料同一行。 */
.dv-task-topic { margin-right: 6px; padding: 2px 8px; display: inline-block; color: var(--dv-black); background: var(--dv-bg); border-radius: 999px; font-size: 11px; font-weight: 800; }

/* 待辦詳情的關聯資料卡片。刻意沒有任何連往原頁面的連結：收件人不一定有那些頁面的權限，
   資料就在這裡看完。欄位沿用 TaskRelatedOption，不含進價／成本／毛利。 */
.dv-task-related { margin-top: 16px; }
.dv-task-related-kicker { display: block; margin-bottom: 6px; color: var(--dv-muted); font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.dv-task-related-card {
  padding: 12px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "thumb text" "badge badge";
  /* 車型／VIN 常常換到三行，縮圖跟著置中會浮在半空中，改成對齊標題。 */
  align-items: start;
  gap: 8px 12px;
  background: var(--dv-bg);
  border: 1px solid var(--dv-border);
  border-radius: 12px;
}
.dv-task-related-card > .dv-status-badge { grid-area: badge; justify-self: start; }
@media (min-width: 576px) {
  .dv-task-related-card { display: flex; align-items: center; gap: 12px; }
  .dv-task-related-card > .dv-status-badge { flex: 0 0 auto; white-space: nowrap; }
}
.dv-task-related-thumb { grid-area: thumb; width: 72px; height: 54px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--dv-muted); background: var(--dv-border); border-radius: 8px; font-size: 10px; font-weight: 700; }
.dv-task-related-thumb img { width: 100%; height: 100%; object-fit: cover; }
.dv-task-related-text { grid-area: text; min-width: 0; flex: 1 1 auto; display: grid; gap: 3px; }
.dv-task-related-text strong { color: var(--dv-black); font-size: 15px; font-weight: 800; overflow-wrap: anywhere; }
.dv-task-related-text span { color: var(--dv-muted); font-size: 12px; overflow-wrap: anywhere; }
.dv-task-related-text .dv-task-related-details { color: var(--dv-black); font-weight: 700; }
.dv-task-related-empty { margin: 0; padding: 14px 12px; color: var(--dv-muted); background: var(--dv-bg); border: 1px solid var(--dv-border); border-radius: 12px; font-size: 13px; }
.dv-task-confirmed-note { color: var(--dv-success); font-weight: 800; }
.dv-priority { padding: 5px 8px; color: var(--dv-muted); background: var(--dv-bg); border-radius: 999px; font-size: 10px; font-weight: 800; }
.dv-priority.is-high, .dv-priority.is-urgent { color: var(--dv-danger); background: var(--dv-danger-soft); }
.dv-priority.is-low { color: var(--dv-info); background: var(--dv-info-soft); }

.dv-field-hint { display: block; margin-top: 6px; color: var(--dv-muted); font-size: 12px; }

.dv-picker { background: var(--dv-surface); border: 1px solid var(--dv-border); border-radius: 12px; }
.dv-picker-bar { padding: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border-bottom: 1px solid var(--dv-border); }
.dv-picker-bar .dv-form-control { min-width: 0; flex: 1 1 180px; }
.dv-picker-count { color: var(--dv-black); font-size: 12px; font-weight: 800; white-space: nowrap; }
.dv-picker-chips { padding: 10px 10px 0; display: flex; flex-wrap: wrap; gap: 6px; }
.dv-picker-chips[hidden] { display: none; }
.dv-picker-chip { padding: 5px 10px; color: var(--dv-selected-text); background: var(--dv-selected-surface); border: 0; border-radius: 999px; font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.dv-picker-list { max-height: 320px; overflow-y: auto; }
.dv-picker-group { border-top: 1px solid var(--dv-border); }
.dv-picker-group:first-child { border-top: 0; }
.dv-picker-group[hidden] { display: none; }
.dv-picker-group-head { padding: 8px 12px; position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--dv-muted); background: var(--dv-bg); font-size: 11px; font-weight: 800; }
.dv-picker-group-toggle { padding: 0; color: var(--dv-red); background: none; border: 0; font-family: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.dv-picker .dv-picker-option { margin: 0; padding: 10px 12px; display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 400; cursor: pointer; }
.dv-picker .dv-picker-option[hidden] { display: none; }
.dv-picker .dv-picker-option:hover { background: var(--dv-bg); }
.dv-picker .dv-picker-option input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--dv-red); }
.dv-picker-name { min-width: 0; flex: 1 1 auto; overflow: hidden; color: var(--dv-black); font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.dv-picker-meta { color: var(--dv-muted); font-size: 12px; white-space: nowrap; }
.dv-picker-empty { margin: 0; padding: 18px 12px; color: var(--dv-muted); font-size: 13px; text-align: center; }
.dv-picker-empty[hidden] { display: none; }

/* 發送待辦的關聯資料選擇器：類型 chips + 常駐攤開的挑選面板 + 選定後收合的卡片。 */
.dv-related-picker { margin-top: 10px; display: grid; gap: 10px; }
.dv-related-picker[hidden] { display: none; }
.dv-related-panel { background: var(--dv-surface); border: 1px solid var(--dv-border); border-radius: 12px; }
.dv-related-panel[hidden] { display: none; }
.dv-related-panel-bar { padding: 10px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--dv-border); }
.dv-related-panel-bar .dv-form-control { min-width: 0; flex: 1 1 auto; }
.dv-related-count { color: var(--dv-black); font-size: 12px; font-weight: 800; white-space: nowrap; }
.dv-related-filters { margin: 0; padding: 10px 10px 2px; }
.dv-related-filters[hidden] { display: none; }
/* 清單改成常駐、就地捲動，不再是失焦就關掉的浮層——手機上捲一下比對不會把清單弄不見。 */
.dv-related-list {
  max-height: 320px;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  -webkit-overflow-scrolling: touch;
}
.dv-related-list[hidden] { display: none; }
.dv-related-option { min-height: 56px; padding: 8px 6px; display: flex; align-items: center; gap: 10px; border-radius: 8px; cursor: pointer; }
.dv-related-option.is-active, .dv-related-option:hover { background: var(--dv-red-soft); }
/* 按「更換」時清單會蓋在已選卡片下面，目前選的那一列要一眼看得出來。 */
.dv-related-option.is-picked { background: var(--dv-bg); box-shadow: inset 0 0 0 1px var(--dv-border-strong); }
/* 車輛的縮圖在選之前就給。沒照片時用灰底文字佔位，列高才不會忽高忽低。 */
.dv-related-option-thumb { width: 52px; height: 39px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--dv-muted); background: var(--dv-border); border-radius: 6px; font-size: 10px; font-weight: 700; }
.dv-related-option-thumb img { width: 100%; height: 100%; object-fit: cover; }
.dv-related-option-text { min-width: 0; flex: 1 1 auto; display: grid; gap: 2px; }
.dv-related-option-text strong { min-width: 0; overflow: hidden; color: var(--dv-black); font-size: 14px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.dv-related-option-meta { overflow: hidden; color: var(--dv-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.dv-related-option > .dv-status-badge { flex: 0 0 auto; }
.dv-related-empty { padding: 20px 11px; color: var(--dv-muted); font-size: 13px; text-align: center; }
.dv-related-foot { margin: 0; padding: 8px 12px 10px; color: var(--dv-muted); font-size: 12px; border-top: 1px solid var(--dv-border); }
/* 手機一列塞不下縮圖＋三行字＋徽章＋按鈕，狀態徽章改放自己一列，字才有寬度。 */
.dv-related-selected {
  padding: 10px 12px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "thumb text" "badge badge" "actions actions";
  align-items: center;
  gap: 8px 10px;
  background: var(--dv-bg);
  border: 1px solid var(--dv-border-strong);
  border-radius: 10px;
}
.dv-related-selected[hidden] { display: none; }
.dv-related-selected > .dv-status-badge { grid-area: badge; justify-self: start; }
.dv-related-selected-actions { grid-area: actions; display: flex; gap: 8px; }
.dv-related-selected-actions > button { flex: 1 1 auto; }
/* 徽章與按鈕不參與收縮，否則窄畫面會把「更換」擠成兩行。 */
.dv-related-selected > .dv-status-badge { flex: 0 0 auto; white-space: nowrap; }
@media (min-width: 576px) {
  .dv-related-selected { display: flex; gap: 10px; }
  .dv-related-selected-actions > button { flex: 0 0 auto; }
}
.dv-related-selected-text { grid-area: text; min-width: 0; flex: 1 1 auto; display: grid; gap: 2px; }
.dv-related-selected-text strong { overflow: hidden; color: var(--dv-black); font-size: 14px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.dv-related-selected-text span { overflow: hidden; color: var(--dv-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.dv-related-selected-text span[hidden] { display: none; }
/* 售價／里程／業務寧可換行也不要被截掉——手機上截掉等於白加這一行。 */
.dv-related-selected-text .dv-related-selected-details { overflow: visible; color: var(--dv-black); font-weight: 700; text-overflow: clip; white-space: normal; }
.dv-related-thumb { grid-area: thumb; width: 60px; height: 45px; flex: 0 0 auto; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--dv-border); border-radius: 8px; }
.dv-related-thumb[hidden] { display: none; }
.dv-related-thumb img { width: 100%; height: 100%; object-fit: cover; }
.dv-related-thumb img[hidden] { display: none; }
.dv-related-thumb span { color: var(--dv-muted); font-size: 10px; font-weight: 700; }
.dv-related-thumb span[hidden] { display: none; }
/* 手機：列高與縮圖放大到好按，清單本身矮一點，免得整張表單被它佔滿。 */
@media (max-width: 575.98px) {
  .dv-related-list { max-height: 268px; }
  /* 一列橫排時「車型 · 門市 · VIN」只分得到 154px，實測 390px 只看得完 52%、360px 只剩
     42%——而分辨兩台同款車靠的正是門市與 VIN。改成兩欄兩列：狀態徽章升到車牌那一行的
     右端，副標獨佔第二行整個寬度並可換兩行，兩種寬度都完整看得到。欄間距用 margin 而不是
     column-gap，客戶與成交沒有縮圖時左邊才不會多一段空白。 */
  .dv-related-option {
    min-height: 60px;
    padding: 9px 6px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "thumb title badge"
      "thumb meta  meta";
    align-items: center;
    column-gap: 0;
    row-gap: 2px;
  }
  .dv-related-option-thumb { grid-area: thumb; width: 56px; height: 42px; margin-right: 10px; }
  .dv-related-option-text { display: contents; }
  .dv-related-option-text > strong { grid-area: title; }
  .dv-related-option-meta {
    grid-area: meta;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
    text-overflow: clip;
    line-height: 1.35;
  }
  .dv-related-option > .dv-status-badge { grid-area: badge; justify-self: end; margin-left: 10px; }
  /* 「更換」是改選唯一的入口，btn-sm 的 36px 在手機上按起來太細。 */
  .dv-related-selected-actions > button { min-height: 42px; }
}
/* 待辦的車輛複選。清單裡被勾的車要一眼看得出來（單選時的 is-picked 只是淡淡一圈），
   所以多選模式改成紅框，並在縮圖角落打勾——不另外塞一個勾選框節點，手機那組
   grid-template-areas 才不會多出一格。 */
.dv-related-list.is-multi .dv-related-option.is-picked {
  background: var(--dv-red-soft);
  box-shadow: inset 0 0 0 2px var(--dv-red);
}
.dv-related-list.is-multi .dv-related-option-thumb { position: relative; }
/* 沒照片的車縮圖裡是「無照片」三個字，勾選後會從半透明的勾底下透出來。 */
.dv-related-list.is-multi .dv-related-option.is-picked .dv-related-option-thumb { color: transparent; }
.dv-related-list.is-multi .dv-related-option.is-picked .dv-related-option-thumb::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--dv-on-accent);
  background: rgba(var(--dv-brand-rgb), .72);
  font-size: 18px;
  font-weight: 900;
}
.dv-related-picks {
  padding: 10px 12px;
  display: grid;
  gap: 8px;
  background: var(--dv-bg);
  border: 1px solid var(--dv-border-strong);
  border-radius: 10px;
}
.dv-related-picks[hidden] { display: none; }
.dv-related-picks-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.dv-related-picks-head strong { color: var(--dv-black); font-size: 14px; font-weight: 850; }
.dv-related-picks-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dv-related-pick-list { margin: 0; padding: 0; display: grid; gap: 6px; list-style: none; }
/* 縮圖沿用 .dv-related-option-thumb，而它在手機上帶著 grid-area: thumb（挑選清單那組
   兩列版面用的）。這裡不把區域寫明，瀏覽器會為那個名字另開隱含格線，縮圖就掉到右下角。 */
.dv-related-pick {
  padding: 8px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "thumb text remove";
  align-items: start;
  gap: 10px;
  background: var(--dv-surface);
  border: 1px solid var(--dv-border);
  border-radius: 8px;
}
.dv-related-pick > .dv-related-option-thumb { grid-area: thumb; margin-right: 0; }
.dv-related-pick-text { grid-area: text; min-width: 0; display: grid; gap: 2px; }
.dv-related-pick-text strong { color: var(--dv-black); font-size: 14px; font-weight: 800; overflow-wrap: anywhere; }
.dv-related-pick-text span { color: var(--dv-muted); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.dv-related-pick-remove {
  grid-area: remove;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: var(--dv-muted);
  background: transparent;
  border: 1px solid var(--dv-border);
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.dv-related-pick-remove:hover { color: var(--dv-danger); border-color: var(--dv-danger); }
.dv-related-done-bar { padding: 0 10px 10px; display: flex; justify-content: flex-end; }
.dv-related-done-bar[hidden] { display: none; }
.dv-task-related-list { display: grid; gap: 8px; }
@media (max-width: 575.98px) {
  /* 手機上「移除」是唯一的減車入口，跟「更換」一樣放大到好按。 */
  .dv-related-pick-remove { width: 42px; height: 42px; }
  .dv-related-picks-actions { width: 100%; }
  .dv-related-picks-actions > button { flex: 1 1 0; min-height: 42px; }
  .dv-related-done-bar > button { width: 100%; min-height: 42px; }
}
.dv-status-badge.is-sm { min-height: 22px; padding: 4px 8px; font-size: 10px; }
/* inline-flex 會蓋掉 hidden 屬性，沒有狀態的類型要靠這條才藏得住徽章。 */
.dv-status-badge[hidden] { display: none; }

.dv-empty-state { padding: 38px 22px; display: grid; place-items: center; text-align: center; }
.dv-empty-state[hidden] { display: none; }
.dv-empty-icon { width: 46px; height: 46px; display: grid; place-items: center; color: var(--dv-muted); background: var(--dv-bg); border-radius: 50%; font-weight: 800; }
.dv-empty-state h3 { margin: 13px 0 5px; color: var(--dv-black); font-size: 16px; font-weight: 800; }
.dv-empty-state p { max-width: 330px; margin: 0; color: var(--dv-muted); font-size: 13px; }
.dv-empty-state .dv-btn-primary { margin-top: 16px; }

.dv-profile-hero { margin-bottom: 16px; padding: 21px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; overflow: visible; }
.dv-profile-hero .dv-avatar-wrap { width: 64px; height: 64px; }
.dv-profile-avatar { width: 64px; height: 64px; flex: 0 0 64px; font-size: 24px; }
.dv-profile-hero .dv-role-badge {
  right: -5px;
  bottom: -4px;
  width: 20px;
  height: 20px;
}
.dv-profile-hero-copy { min-width: 0; flex: 1 1 10rem; }
.dv-profile-hero h2 { margin: 0; color: var(--dv-black); font-size: 22px; font-weight: 850; }
.dv-profile-hero p { margin: 3px 0 9px; color: var(--dv-muted); font-size: 13px; }
.dv-profile-password { flex: 0 0 auto; margin-left: auto; white-space: nowrap; }
.dv-role-pill { padding: 5px 8px; color: var(--dv-red); background: var(--dv-red-soft); border-radius: 999px; font-size: 10px; font-weight: 850; }
.dv-action-list { display: grid; }
.dv-action-list a,
.dv-action-list button {
  width: 100%;
  min-height: 46px;
  padding: 13px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 0;
  border-bottom: 1px solid var(--dv-border);
  background: transparent;
  color: inherit;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
}
.dv-action-list form { margin: 0; }
.dv-action-list > :last-child,
.dv-action-list form:last-child button { border-bottom: 0; }
.dv-action-list .is-danger { color: var(--dv-danger); }
.dv-profile-logout { max-width: 420px; margin: 20px auto 0; }

.dv-mobile-card-list { display: grid; gap: 11px; }
.dv-record-card { min-width: 0; padding: 16px; background: var(--dv-surface); border: 1px solid var(--dv-border); border-radius: 14px; box-shadow: var(--dv-shadow); }
.dv-record-card header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8px 12px; }
.dv-record-card header > div { min-width: 0; flex: 1 1 12rem; }
.dv-record-card h3 { margin: 0; color: var(--dv-black); font-size: 16px; font-weight: 800; overflow-wrap: anywhere; }
.dv-section-card .dv-mobile-card-list { margin-top: 4px; }
.dv-record-card p { margin: 5px 0 0; color: var(--dv-muted); font-size: 12px; }
.dv-badge-row { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.dv-user-card { display: flex; flex-direction: column; }
.dv-user-card-tags { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dv-user-tag {
  max-width: 100%;
  min-height: 27px;
  padding: 6px 9px;
  display: inline-flex;
  align-items: center;
  color: var(--dv-text);
  background: var(--dv-bg);
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.dv-user-tag-label { margin-right: 5px; opacity: .62; font-weight: 700; }
.dv-user-tag.is-role { color: var(--dv-red); background: var(--dv-red-soft); }
.dv-user-tag.is-bonus { color: #7252a8; background: #f3edff; }
.dv-user-tag.is-access { color: var(--dv-info); background: var(--dv-info-soft); }
.dv-user-tag.is-active { color: var(--dv-success); background: var(--dv-success-soft); }
.dv-user-tag.is-inactive { color: var(--dv-danger); background: var(--dv-danger-soft); }
.dv-user-tag.is-muted { color: var(--dv-muted); background: var(--dv-bg); }
.dv-user-card-facts { margin-top: 11px; padding-top: 3px; border-top: 1px solid var(--dv-border); }
.dv-user-card-facts > div { padding: 8px 0; }
/* 三顆動作（明細／編輯／停用）在窄卡片裡要換行，不能各自壓縮到字被拆成兩行。 */
.dv-user-card .dv-cost-actions { margin-top: auto; padding-top: 12px; flex-wrap: wrap; }
.dv-user-card .dv-cost-actions > * { flex: 1 0 auto; }
.dv-user-card .dv-cost-actions form { display: flex; }
.dv-user-card .dv-cost-actions form > button { flex: 1 0 auto; }
.dv-subrecord-list { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--dv-border); }
.dv-subrecord { min-width: 0; padding: 11px 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--dv-bg); border-radius: 11px; }
.dv-subrecord-main { min-width: 0; display: grid; gap: 3px; }
.dv-subrecord-main strong { color: var(--dv-black); font-size: 13px; font-weight: 800; overflow-wrap: anywhere; }
.dv-subrecord-main span { color: var(--dv-muted); font-size: 12px; overflow-wrap: anywhere; }
.dv-subrecord > .dv-btn-secondary { flex: 0 0 auto; }
/* 薪資明細：桌機右側抽屜、手機全寬，清單不再撐開員工表格。 */
.dv-payroll-detail-toggle { display: flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 2px; }
.offcanvas.dv-payroll-drawer { width: 660px; max-width: 100%; border-left: 1px solid var(--dv-border); }
.dv-payroll-drawer-header { gap: 20px; padding: 24px 28px; border-bottom: 1px solid var(--dv-border); }
.dv-payroll-drawer-header > div { min-width: 0; }
.dv-payroll-drawer-header p { margin: 0 0 5px; color: var(--dv-muted); font-size: 13px; }
.dv-payroll-drawer-header h2 { margin: 0; color: var(--dv-black); font-size: 23px; font-weight: 850; overflow-wrap: anywhere; }
.dv-payroll-drawer-header .btn-close { flex-shrink: 0; width: 24px; height: 24px; padding: 10px; margin: -10px; }
.dv-payroll-drawer-body { padding: 26px 28px max(28px, env(safe-area-inset-bottom, 0px)); overscroll-behavior-y: contain; }
.dv-payroll-bonus-total { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; }
.dv-payroll-bonus-total > span { color: var(--dv-muted); font-size: 14px; }
.dv-payroll-bonus-total > strong { color: var(--dv-black); font-size: 32px; font-weight: 850; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dv-payroll-bonus-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 18px 0 28px; padding: 18px 0; border-block: 1px solid var(--dv-border); }
.dv-payroll-bonus-summary dt, .dv-payroll-bonus-amounts dt { color: var(--dv-muted); font-size: 12px; font-weight: 600; }
.dv-payroll-bonus-summary dd { margin: 6px 0 0; color: var(--dv-black); font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dv-payroll-section-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; }
.dv-payroll-section-heading h3 { margin: 0; color: var(--dv-black); font-size: 15px; font-weight: 800; }
.dv-payroll-section-heading > span { color: var(--dv-muted); font-size: 12px; }
.dv-payroll-bonus-list { margin: 4px 0 0; padding: 0; list-style: none; }
.dv-payroll-bonus-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--dv-border); }
.dv-payroll-bonus-vehicle { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.dv-payroll-bonus-vehicle > strong { margin-bottom: 3px; color: var(--dv-black); font-size: 14px; font-weight: 800; overflow-wrap: anywhere; }
.dv-payroll-bonus-vehicle > span { color: var(--dv-muted); font-size: 12px; }
.dv-payroll-bonus-amounts { display: grid; align-content: start; gap: 10px; margin: 0; text-align: right; }
.dv-payroll-bonus-amounts > div { display: flex; flex-direction: column-reverse; }
.dv-payroll-bonus-amounts dd { margin: 0 0 2px; color: var(--dv-black); font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dv-payroll-bonus-empty { margin: 16px 0 0; padding: 24px 16px; color: var(--dv-muted); background: var(--dv-bg); border-radius: 10px; text-align: center; }
.dv-payroll-compensation { margin-top: 24px; }
.dv-payroll-compensation summary { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px; min-height: 48px; padding: 10px 0; color: var(--dv-black); font-size: 14px; font-weight: 750; cursor: pointer; list-style: none; }
.dv-payroll-compensation summary::-webkit-details-marker { display: none; }
.dv-payroll-compensation summary:focus-visible { outline: 2px solid var(--dv-red); outline-offset: 4px; border-radius: 4px; }
.dv-payroll-compensation-total { display: flex; align-items: center; gap: 8px; color: var(--dv-muted); font-size: 13px; }
.dv-payroll-compensation-total strong { color: var(--dv-black); font-variant-numeric: tabular-nums; }
.dv-payroll-expand-icon::before { content: "+"; display: inline-block; width: 16px; text-align: center; font-size: 18px; }
.dv-payroll-compensation[open] .dv-payroll-expand-icon::before { content: "−"; }
.dv-payroll-compensation .dv-info-list { margin-top: 8px; border-top: 1px solid var(--dv-border); }
.dv-payroll-compensation .dv-info-list strong { font-variant-numeric: tabular-nums; }
@media (max-width: 575.98px) {
  .offcanvas.dv-payroll-drawer { width: 100%; border-left: 0; }
  .dv-payroll-drawer-header { padding: max(20px, env(safe-area-inset-top, 0px)) 20px 20px; }
  .dv-payroll-drawer-body { padding: 20px 20px max(24px, env(safe-area-inset-bottom, 0px)); }
  .dv-payroll-bonus-total > strong { font-size: 28px; }
  .dv-payroll-bonus-summary { gap: 8px; }
  .dv-payroll-bonus-summary dd { font-size: 15px; }
  .dv-payroll-bonus-row { gap: 12px; }
}
/* 報表「花費與開銷」：接在 subrecord 規則後面，同權重的覆寫才會生效。 */
.dv-expense-section { margin-top: 30px; scroll-margin-top: 84px; }
.dv-expense-section > .dv-section-heading { flex-wrap: wrap; align-items: flex-end; }
.dv-subrecord-list.dv-expense-lines { padding-top: 0; border-top: 0; }
.dv-expense-mobile-list { padding: 12px; }
.dv-subrecord-main .dv-expense-pending { color: var(--dv-warning); font-weight: 800; }
.dv-settlement-line-amount.is-credit { color: var(--dv-success); }
.dv-expense-table tfoot td, .dv-dealer-trade-table tfoot td { color: var(--dv-black); font-weight: 850; background: var(--dv-bg); }
/* 報表「同行盤車報表」：花費明細接在金額下面，丹佛表「費用明細」的寫法。 */
.dv-dealer-trade-costs { display: block; margin-top: 3px; color: var(--dv-muted); font-size: 12px; font-weight: 600; line-height: 1.45; }
.dv-dealer-trade-costs > span { display: block; }
.dv-dealer-trade-table .dv-dealer-trade-vehicle { min-width: 190px; }
.dv-dealer-trade-pending { color: var(--dv-warning); font-weight: 800; }
.dv-dealer-trade-note { min-width: 150px; max-width: 240px; white-space: normal; overflow-wrap: anywhere; }
.dv-record-meta > .dv-dealer-trade-note { min-width: 0; text-align: right; }
/* 統計卡的說明自成一行，兩欄的手機寬度才不會壓到金額（同財務總覽的 KPI 卡）。 */
.dv-stat-grid.dv-expense-summary .dv-stat-card small { grid-column: 1 / -1; margin-top: 6px; white-space: normal; }
@media (max-width: 575.98px) {
  .dv-expense-summary > :last-child { grid-column: 1 / -1; }
}
@media (min-width: 992px) {
  .dv-report-detail-surface .dv-subrecord-list.dv-expense-lines { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}
.dv-record-meta { margin-top: 13px; padding-top: 12px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 14px; border-top: 1px solid var(--dv-border); color: var(--dv-muted); font-size: 12px; }

.dv-list-summary {
  margin: -4px 0 12px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  color: var(--dv-muted);
  font-size: 12px;
}
.dv-list-summary strong { color: var(--dv-black); font-size: 13px; font-weight: 800; }
.dv-list-summary span { text-align: right; }
.dv-deal-list-card { align-self: start; }
.dv-deal-note {
  min-width: 0;
  margin-top: 12px;
  padding: 11px 12px;
  background: var(--dv-surface-muted);
  border-left: 3px solid var(--dv-border-strong);
  border-radius: 8px;
}
.dv-deal-note > span {
  display: block;
  margin-bottom: 4px;
  color: var(--dv-muted);
  font-size: 12px;
  font-weight: 800;
}
.dv-deal-note .dv-note { margin: 0; color: var(--dv-text); font-size: 14px; }
.dv-deal-list-filter .dv-form-grid { row-gap: 12px; }
.dv-deal-payment-overview {
  margin-top: 13px;
  padding-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  border-top: 1px solid var(--dv-border);
}
.dv-deal-payment-overview > div {
  min-width: 0;
  padding: 10px 11px;
  display: grid;
  gap: 3px;
  background: var(--dv-bg);
  border-radius: 10px;
}
.dv-deal-payment-overview span { color: var(--dv-muted); font-size: 11px; font-weight: 700; }
.dv-deal-payment-overview strong {
  min-width: 0;
  color: var(--dv-black);
  font-size: 15px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.dv-deal-loan-summary {
  margin-top: 10px;
  padding: 8px 10px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  color: var(--dv-muted);
  background: var(--dv-surface-muted);
  border-left: 3px solid var(--dv-border-strong);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.4;
}
.dv-deal-loan-summary strong { color: inherit; font-weight: 850; }
.dv-deal-loan-summary.is-warning {
  color: var(--dv-text);
  background: var(--dv-warning-soft);
  border-left-color: var(--dv-warning);
}
.dv-deal-loan-summary.is-danger {
  color: var(--dv-danger);
  background: var(--dv-danger-soft);
  border-left-color: var(--dv-danger);
}
.dv-deal-trial-toggle {
  width: 100%;
  min-height: 58px;
  margin-top: 13px;
  padding: 12px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--dv-text);
  background: transparent;
  border: 0;
  border-top: 1px solid var(--dv-border);
  font-family: inherit;
  text-align: left;
}
.dv-deal-trial-toggle:hover { color: var(--dv-black); }
.dv-deal-trial-toggle:focus-visible { outline: 2px solid var(--dv-red); outline-offset: 3px; }
.dv-deal-trial-copy { min-width: 0; flex: 1 1 auto; display: grid; gap: 2px; }
.dv-deal-trial-copy strong { color: var(--dv-black); font-size: 14px; font-weight: 850; }
.dv-deal-trial-copy small { color: var(--dv-muted); font-size: 11px; font-weight: 700; }
.dv-deal-trial-toggle[aria-expanded="false"] .is-expanded,
.dv-deal-trial-toggle[aria-expanded="true"] .is-collapsed { display: none; }
.dv-deal-trial-toggle[aria-expanded="true"] .dv-collapse-chevron { transform: rotate(180deg); }
.dv-deal-trial-content { padding-top: 4px; }
.dv-deal-trial-content > .dv-section-card {
  margin: 0 !important;
  padding: 15px;
  background: var(--dv-bg);
  box-shadow: none;
}
.dv-deal-trial-content .dv-section-heading { margin-bottom: 8px; }
.dv-deal-trial-content .dv-section-heading h2 { font-size: 17px; }
.dv-deal-trial-unavailable { margin-top: 13px !important; padding-top: 12px; border-top: 1px solid var(--dv-border); }
.dv-reservation-card { align-self: start; }
.dv-reservation-card.is-cancelled { border-color: #e6c7c7; }
.dv-reservation-cancel-note {
  margin-top: 13px;
  padding: 12px 13px;
  color: var(--dv-text);
  background: var(--dv-danger-soft);
  border-left: 3px solid var(--dv-danger);
  border-radius: 9px;
}

.dv-reservation-requirement-note {
  margin-top: 12px;
  padding: 11px 12px;
  background: var(--dv-surface-muted, #f7f7f5);
  border-left: 3px solid var(--dv-accent, #b68a3a);
  border-radius: 8px;
}
.dv-reservation-requirement-note > span {
  display: block;
  margin-bottom: 4px;
  color: var(--dv-muted);
  font-size: 11px;
  font-weight: 800;
}
.dv-reservation-requirement-note p {
  margin: 0;
  color: var(--dv-text);
  font-size: 13px;
  line-height: 1.55;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.dv-reservation-cancel-note > span {
  display: block;
  color: var(--dv-danger);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .06em;
}
.dv-reservation-cancel-note p {
  margin: 4px 0 3px;
  color: var(--dv-black);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.dv-reservation-cancel-note small { color: var(--dv-muted); font-size: 11px; }
.dv-reservation-expand-toggle {
  width: 100%;
  min-height: 44px;
  margin-top: 8px;
  padding: 8px 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  color: var(--dv-muted);
  background: transparent;
  border: 0;
  font-size: 12px;
  font-weight: 800;
}
.dv-reservation-expand-toggle:hover { color: var(--dv-black); }
.dv-reservation-expand-toggle[aria-expanded="false"] .is-expanded,
.dv-reservation-expand-toggle[aria-expanded="true"] .is-collapsed { display: none; }
.dv-reservation-expand-toggle[aria-expanded="true"] .dv-collapse-chevron { transform: rotate(180deg); }
.dv-reservation-detail-grid {
  margin: 0;
  padding: 13px 0 2px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  border-top: 1px solid var(--dv-border);
}
.dv-reservation-detail-grid > div { min-width: 0; }
.dv-reservation-detail-grid > div.is-wide { grid-column: 1 / -1; }
.dv-reservation-detail-grid dt {
  margin-bottom: 3px;
  color: var(--dv-muted);
  font-size: 11px;
  font-weight: 700;
}
.dv-reservation-detail-grid dd {
  margin: 0;
  color: var(--dv-black);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.table-responsive { border: 1px solid var(--dv-border); border-radius: var(--dv-radius-md); background: var(--dv-surface); box-shadow: var(--dv-shadow); }
.table { margin: 0; color: var(--dv-text); font-size: 13px; }
.table > :not(caption) > * > * { padding: 13px 15px; border-bottom-color: var(--dv-border); vertical-align: middle; }
.table thead th { color: var(--dv-muted); background: var(--dv-table-head-bg); font-size: 11px; font-weight: 800; letter-spacing: .04em; white-space: nowrap; }

.dv-management-brand-card { padding: 14px 17px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.dv-management-brand-card span { color: var(--dv-muted); font-size: 12px; font-weight: 700; }
.dv-management-brand-card strong { color: var(--dv-black); font-size: 16px; }
.dv-management-overview-stat {
  width: 100%;
  appearance: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.dv-management-overview-stat.is-active {
  border-color: var(--dv-black);
  box-shadow: 0 0 0 2px rgba(17, 17, 17, .08), var(--dv-shadow);
}
.dv-management-overview-filter { display: grid; gap: 9px; }
.dv-management-overview-result { color: var(--dv-muted); font-size: 12px; font-weight: 700; }
.dv-management-overview-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.dv-management-overview-group[hidden],
.dv-management-overview-item[hidden] { display: none !important; }
.dv-management-overview-group.is-attention { border-color: rgba(190, 32, 48, .24); }
.dv-management-overview-group.is-unassigned { border-color: rgba(41, 98, 146, .22); }
.dv-management-manager-heading { min-width: 0; display: flex; align-items: center; gap: 10px; }
.dv-management-manager-heading .dv-avatar { flex: 0 0 36px; }
.dv-management-manager-heading > div { min-width: 0; }
.dv-management-overview-tags {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.dv-management-bonus-table { min-width: 1120px; }
.dv-management-bonus-table td:first-child { min-width: 165px; }
.dv-management-bonus-table td:nth-child(2) { min-width: 220px; }
.dv-management-bonus-table td:nth-child(3) { min-width: 125px; }
.dv-management-bonus-table td:nth-child(4) { min-width: 190px; }
.dv-management-bonus-table td:nth-child(5) { min-width: 220px; }
.dv-management-bonus-table .form-select,
.dv-management-bonus-table .form-control { min-height: 42px; font-size: 13px; }
.dv-management-percent { min-width: 135px; }
.dv-management-editor-label { display: none; }
.dv-management-preview { margin-bottom: 7px; display: block; color: var(--dv-black); font-size: 12px; overflow-wrap: anywhere; }
.dv-management-change { align-items: flex-start; }
.dv-management-change-content { white-space: pre-line; }
.dv-management-change > small { flex: 0 0 auto; color: var(--dv-muted); font-size: 11px; text-align: right; white-space: nowrap; }

.dv-page-header.dv-team-progress-page-header { align-items: center; }
.dv-readonly-badge {
  min-height: 30px;
  padding: 7px 11px;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  color: var(--dv-red);
  background: var(--dv-red-soft);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}
.dv-team-progress-current-scope {
  padding: 14px 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.dv-team-progress-current-scope span { color: var(--dv-muted); font-size: 12px; font-weight: 700; }
.dv-team-progress-current-scope strong { color: var(--dv-black); font-size: 14px; text-align: right; }
.dv-team-mode-switch {
  padding: 4px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  background: var(--dv-surface);
  border: 1px solid var(--dv-border);
  border-radius: 12px;
  box-shadow: var(--dv-shadow);
}
.dv-team-mode-switch button {
  min-height: 44px;
  color: var(--dv-muted);
  background: transparent;
  border: 0;
  border-radius: 9px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 750;
}
.dv-team-mode-switch button[aria-selected="true"] {
  color: var(--dv-black);
  background: var(--dv-bg);
  box-shadow: 0 2px 8px rgba(17, 17, 17, .08);
}
[data-dv-team-panel][hidden],
.dv-team-progress-group[hidden],
.dv-team-progress-case[hidden] { display: none !important; }
.dv-team-progress-filters { display: grid; gap: 8px; }
.dv-team-progress-filters .dv-filter-chips { margin-top: 3px; }
.dv-team-progress-filters .dv-filter-chip[aria-pressed="true"] {
  color: var(--dv-selected-text);
  background: var(--dv-selected-surface);
}
.dv-team-progress-result { color: var(--dv-muted); font-size: 12px; font-weight: 700; }
.dv-team-person-scope {
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--dv-text);
  background: var(--dv-info-soft);
  border-radius: 9px;
  font-size: 12px;
}
.dv-team-person-scope[hidden] { display: none !important; }
.dv-team-person-scope button {
  padding: 5px 8px;
  color: #174f68;
  background: var(--dv-surface);
  border: 1px solid #b9d9e7;
  border-radius: 999px;
  font: inherit;
  font-weight: 800;
}
.dv-team-progress-groups { display: grid; gap: 22px; }
.dv-team-progress-group-heading {
  margin: 0 2px 10px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}
.dv-team-progress-group-heading > div { min-width: 0; }
.dv-team-progress-group-heading h2 { margin: 2px 0 0; color: var(--dv-black); font-size: 18px; font-weight: 850; }
.dv-team-progress-group-heading p { margin: 2px 0 0; color: var(--dv-muted); font-size: 12px; }
.dv-team-progress-case { max-width: 100%; overflow: hidden; }
.dv-team-progress-case header {
  min-width: 0;
  max-width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}
.dv-team-progress-case header > div {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.dv-team-progress-vehicle-name {
  width: 100%;
  max-width: 100%;
  display: -webkit-box;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.35;
  max-height: 2.7em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.dv-team-progress-reference { flex: 0 0 auto; color: var(--dv-muted); font-size: 11px; white-space: nowrap; }
.dv-team-progress-path { margin-top: 10px !important; color: var(--dv-text) !important; font-weight: 750; }
.dv-team-progress-updated {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 9px;
  margin-top: 5px;
  color: var(--dv-muted);
  font-size: 11px;
}
.dv-team-progress-updated strong { color: var(--dv-text); font-size: 12px; }
.dv-team-deal-note { border-left-color: var(--dv-info); }
.dv-team-progress-facts {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.dv-team-progress-facts > div {
  min-width: 0;
  padding: 10px;
  background: var(--dv-bg);
  border-radius: 10px;
}
.dv-team-progress-facts > .is-wide { grid-column: 1 / -1; }
.dv-team-progress-facts span { display: block; margin-bottom: 4px; color: var(--dv-muted); font-size: 11px; }
.dv-team-progress-facts strong { display: block; color: var(--dv-black); font-size: 12px; overflow-wrap: anywhere; }
.dv-team-attention-list { margin: 0; padding-left: 18px; font-size: 12px; font-weight: 750; line-height: 1.7; }
.dv-team-progress-checks { display: grid; gap: 8px; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--dv-border); }
.dv-team-progress-checks > div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; }
.dv-team-progress-checks dt { color: var(--dv-muted); font-size: 11px; font-weight: 650; }
.dv-team-progress-checks dd { margin: 0; color: var(--dv-text); font-size: 12px; font-weight: 700; overflow-wrap: anywhere; }
.dv-team-progress-checks dd small { display: block; margin-top: 4px; font-size: 12px; font-weight: 500; line-height: 1.6; }
.dv-team-progress-detail {
  margin-top: 12px;
  border: 1px solid var(--dv-border-strong);
  border-radius: 11px;
  overflow: hidden;
}
.dv-team-progress-detail summary {
  min-height: 44px;
  padding: 11px 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--dv-black);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  list-style: none;
}
.dv-team-progress-detail summary::-webkit-details-marker { display: none; }
.dv-team-progress-detail summary::after { content: "+"; color: var(--dv-muted); font-size: 18px; font-weight: 500; }
.dv-team-progress-detail[open] summary::after { content: "−"; }
.dv-team-progress-detail .dv-info-list { padding: 0 13px 5px; border-top: 1px solid var(--dv-border); }
.dv-team-people-list { display: grid; gap: 13px; }
.dv-team-people-caption { margin: 14px 0 0; color: var(--dv-muted); font-size: 12px; line-height: 1.6; }
.dv-team-person-entry { min-width: 0; padding-bottom: 12px; border-bottom: 1px solid var(--dv-border); }
.dv-team-person-entry:last-child { padding-bottom: 0; border-bottom: 0; }
.dv-team-person-phases { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 6px; margin-top: 8px; }
.dv-team-person-phases button {
  min-width: 0;
  min-height: 56px;
  padding: 9px 10px;
  color: var(--dv-text);
  background: var(--dv-bg);
  border: 1px solid var(--dv-border);
  border-radius: 9px;
  text-align: left;
  font: inherit;
}
.dv-team-person-phases button:not(:disabled):hover { border-color: var(--dv-red); }
.dv-team-person-phases button:focus-visible,
.dv-team-person-row:focus-visible { outline: 2px solid var(--dv-red); outline-offset: 2px; }
.dv-team-person-phases button:disabled { color: var(--dv-muted); cursor: default; }
.dv-team-person-phases span { display: block; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.dv-team-person-phases strong { display: block; margin-top: 3px; font-size: 16px; }
.dv-team-person-phases small { font-size: 10px; font-weight: 500; }
.dv-team-person-row {
  width: 100%;
  border: 0;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.dv-team-person-row:hover { background: var(--dv-surface); }
.dv-team-person-count { flex: 0 0 auto; color: var(--dv-red); font-size: 12px; font-weight: 800; text-align: right; }
.dv-team-person-count small { display: block; margin-top: 2px; color: #805000; font-size: 10px; }
[data-dv-team-progress] .dv-status-badge.is-repairing { color: #805000; }
[data-dv-team-progress] .dv-status-badge.is-saleable { color: #17633a; }
[data-dv-team-progress] .dv-status-badge.is-wait-delivery,
[data-dv-team-progress] .dv-status-badge.is-processing { color: #174f68; }
[data-dv-team-progress] .dv-status-badge.is-delivered { color: #0f5f5b; }
[data-dv-team-progress] .dv-status-badge.is-stopped { color: #9f1726; }
[data-dv-team-progress] .dv-status-badge.is-reserved { color: #5f3b9f; }
.dv-team-progress-stats .dv-stat-card:hover {
  border-color: var(--dv-border);
  transform: none;
}

@media (max-width: 991.98px) {
  .dv-management-bonus-editor {
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .dv-management-bonus-table {
    min-width: 0;
    display: block;
  }
  .dv-management-bonus-table thead { display: none; }
  .dv-management-bonus-table tbody {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .dv-management-bonus-table tbody tr {
    position: relative;
    min-width: 0;
    padding: 16px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
    grid-template-areas:
      "person person"
      "manager manager"
      "relation percent"
      "status status"
      "updated updated";
    gap: 14px 10px;
    background: var(--dv-surface);
    border: 1px solid var(--dv-border);
    border-radius: 14px;
    box-shadow: var(--dv-shadow);
  }
  .dv-management-bonus-table tbody td,
  .dv-management-bonus-table tbody td:first-child {
    position: static;
    min-width: 0;
    padding: 0;
    display: block;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .dv-management-bonus-person {
    grid-area: person;
    padding-right: 86px !important;
  }
  .dv-management-bonus-manager { grid-area: manager; }
  .dv-management-bonus-relation { grid-area: relation; }
  .dv-management-bonus-percent { grid-area: percent; }
  .dv-management-bonus-status {
    grid-area: status;
    padding-top: 13px !important;
    border-top: 1px solid var(--dv-border) !important;
  }
  .dv-management-bonus-updated {
    grid-area: updated;
    padding-top: 11px !important;
    color: var(--dv-muted);
    border-top: 1px solid var(--dv-border) !important;
    font-size: 12px;
  }
  .dv-management-editor-label {
    margin-bottom: 7px;
    display: block;
    color: var(--dv-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .03em;
  }
  .dv-management-person-copy strong {
    display: block;
    color: var(--dv-black);
    font-size: 16px;
    font-weight: 850;
    overflow-wrap: anywhere;
  }
  .dv-management-person-copy small { margin-top: 3px; font-size: 12px; }
  .dv-management-bonus-table .form-select,
  .dv-management-bonus-table .form-control { width: 100%; min-height: 46px; }
  .dv-management-percent { width: 100%; min-width: 0; }
  .dv-management-bonus-percent > small {
    margin-top: 6px;
    display: block;
    font-size: 11px;
    line-height: 1.35;
  }
  .dv-management-bonus-status .dv-status-badge {
    position: absolute;
    top: 16px;
    right: 16px;
  }
  .dv-management-bonus-status .dv-management-preview {
    margin: 0;
    padding: 10px 12px;
    background: var(--dv-bg);
    border-radius: 9px;
    line-height: 1.45;
  }
}

@media (max-width: 767.98px) {
  .dv-management-bonus-table tbody { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 419.98px) {
  .dv-management-bonus-table tbody tr {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "person"
      "manager"
      "relation"
      "percent"
      "status"
      "updated";
  }
}

@media (max-width: 575.98px) {
  .dv-report-summary[data-dv-management-summary] > :last-child { grid-column: 1 / -1; }
  .dv-management-change { align-items: stretch; flex-direction: column; }
  .dv-management-change > small { text-align: left; white-space: normal; }
  .dv-page-header.dv-team-progress-page-header { flex-direction: row; align-items: flex-start; }
  .dv-team-progress-stats {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .dv-team-progress-stats::-webkit-scrollbar { display: none; }
  .dv-team-progress-stats .dv-stat-card {
    min-width: 142px;
    padding: 13px;
    scroll-snap-align: start;
  }
  .dv-team-progress-stats .dv-stat-card small { grid-column: 1 / -1; margin-top: 5px; line-height: 1.35; }
  .dv-team-progress-group-heading { align-items: flex-start; }
  .dv-record-card.dv-team-progress-case header { flex-direction: row; align-items: flex-start; }
  .dv-management-overview-stat small {
    grid-column: 1 / -1;
    margin-top: 6px;
    line-height: 1.35;
  }
  .dv-management-overview-group > header > .dv-status-badge { align-self: flex-start; }
  .dv-management-overview-item {
    align-items: flex-start;
    flex-direction: column;
  }
  .dv-management-overview-tags { justify-content: flex-start; }
}

@media (max-width: 389.98px) {
  .dv-team-progress-facts { grid-template-columns: minmax(0, 1fr); }
  .dv-team-progress-current-scope { align-items: flex-start; flex-direction: column; }
  .dv-team-progress-current-scope strong { text-align: left; }
}

dl.row dt { color: var(--dv-muted); font-size: 13px; font-weight: 650; }
dl.row dd { color: var(--dv-text); font-size: 14px; }
.text-muted { color: var(--dv-muted) !important; }
.text-danger { color: var(--dv-danger) !important; }

@media (min-width: 576px) {
  .dv-profile-copy { display: flex; }
  .dv-main { padding-right: 24px; padding-left: 24px; }
  .dv-vehicle-list-filters { grid-template-columns: minmax(150px, .42fr) minmax(0, 1fr); }
  .dv-list-toolbar { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .dv-sort-buttons { justify-content: flex-end; flex-wrap: nowrap; }
  .dv-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dv-radio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dv-form-grid .is-wide { grid-column: 1 / -1; }
  .dv-vehicle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .dv-main { padding-top: 34px; }
  .dv-reservation-list { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .dv-stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dv-stat-grid.dv-report-summary { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .dv-team-progress-group .dv-mobile-card-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dv-team-people-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dv-management-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dv-management-overview-group.is-attention,
  .dv-management-overview-group.is-unassigned { grid-column: 1 / -1; }
  .dv-settlement-breakdown { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dv-settlement-breakdown-section.is-wide { grid-column: 1 / -1; }
  .dv-settlement-metric-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dv-stat-grid.dv-finance-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dv-metric-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dv-metric-grid.is-stack { grid-template-columns: 1fr; }
  .dv-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dv-detail-grid > .is-wide { grid-column: 1 / -1; }
  .dv-reconditioning-action-form { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .dv-reconditioning-action-form .dv-btn-primary { min-width: 132px; }
  .dv-user-detail {
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
    align-items: start;
  }
  .dv-form-actions { position: static; justify-content: flex-end; padding: 0; background: transparent; border: 0; box-shadow: none; }
  .dv-form-actions > * { flex: 0 0 auto; min-width: 132px; }
  .dv-vehicle-thumb { width: 104px; height: 72px; }
  .dv-vehicle-select-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dv-cover-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dv-cover-order-bar .dv-btn-primary { width: auto; min-width: 160px; }
}

@media (min-width: 992px) {
  .dv-report-desktop { display: block; }
  .dv-report-mobile { display: none; }
  .dv-app-shell { display: grid; grid-template-columns: var(--dv-sidebar-width) minmax(0, 1fr); }
  .dv-sidebar { position: sticky; top: 68px; height: calc(100vh - 68px); height: calc(100dvh - 68px); padding: 27px 16px; display: block; overflow-x: hidden; overflow-y: auto; border-right: 1px solid var(--dv-border); }
  .dv-main { max-width: var(--dv-content-max); padding: 38px 36px 64px; }
  .dv-bottom-nav { display: none; }
  .dv-vehicle-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dv-vehicle-grid.is-inventory { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dv-detail-hero { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(300px, 1.2fr); align-items: start; }
  /* 桌機維持照片在左、文字在右：DOM 是文字在前，用 order 把照片排回左欄。 */
  .dv-detail-hero > .dv-vehicle-hero { order: -1; }
  .dv-vehicle-hero { height: auto; min-height: 0; border-top: 0; }
  .dv-vehicle-gallery-main { aspect-ratio: 16 / 9; }
  .dv-vehicle-thumb { width: 112px; height: 80px; }
  .dv-detail-summary { padding: 20px 24px; align-self: stretch; }
}

@media (min-width: 1280px) {
  .dv-vehicle-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .dv-vehicle-grid.is-inventory { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dv-main { padding-right: 44px; padding-left: 44px; }
}

@media (max-width: 575.98px) {
  .dv-saleable-page .dv-saleable-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
  }
  .dv-saleable-page .dv-saleable-card:hover { transform: none; }
  .dv-saleable-page .dv-saleable-card .dv-vehicle-card-media {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    aspect-ratio: 16 / 9;
    align-self: auto;
  }
  .dv-saleable-page .dv-saleable-card .dv-vehicle-card-body {
    grid-column: 1;
    grid-row: 2;
    padding: 13px 14px 12px;
  }
  .dv-saleable-page .dv-saleable-card .dv-vehicle-card-eyebrow {
    min-height: 24px;
    align-items: center;
  }
  .dv-saleable-page .dv-saleable-card h2 {
    margin: 6px 0 8px;
    font-size: 20px;
    line-height: 1.25;
  }
  .dv-saleable-page .dv-saleable-card .dv-record-amount {
    margin-top: 0;
    overflow: hidden;
    font-size: clamp(22px, 6.2vw, 24px);
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dv-saleable-page .dv-saleable-card-meta {
    margin-top: 7px;
    display: grid;
    gap: 3px;
  }
  .dv-saleable-page .dv-saleable-card-mileage { font-size: 14px; }
  .dv-saleable-page .dv-saleable-card-identity {
    color: var(--dv-muted);
    font-size: 12px;
  }
  .dv-saleable-page .dv-saleable-card-affordance {
    margin-top: 10px;
    padding-top: 9px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--dv-muted);
    border-top: 1px solid var(--dv-border);
    font-size: 12px;
    font-weight: 750;
  }
  .dv-saleable-page .dv-saleable-card-affordance span:last-child {
    color: var(--dv-black);
    font-size: 19px;
    line-height: 1;
  }
}

@media (max-width: 575.98px) {
  .dv-info-list > div.is-note {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .dv-list-summary { align-items: flex-start; flex-direction: column; }
  .dv-list-summary span { text-align: left; }
  .dv-cover-picker { grid-template-columns: minmax(0, 1fr); }
  .dv-page-header { flex-direction: column; align-items: flex-start; }
  .dv-deal-cancelled-filter label.dv-checkbox {
    width: 100%;
    min-height: 52px;
    padding: 12px 14px;
  }
  .dv-page-actions { flex: 0 0 auto; }
  .dv-profile-password {
    width: 100%;
    margin-left: 0;
  }
  .dv-record-card header { flex-direction: column; align-items: stretch; gap: 6px; }
  .dv-record-card header > div { flex: none; }
  .table-responsive { overflow-x: auto; }
  .dv-cost-actions { flex-wrap: wrap; }
  .dv-reconditioning-costs { padding: 16px; }
  .dv-reconditioning-costs .dv-section-heading-actions,
  .dv-reconditioning-costs .dv-section-heading-actions .dv-btn-primary { width: 100%; }
  .dv-cost-card { padding: 14px; }
  .dv-cost-card-head { align-items: flex-start; }
  .dv-cost-attachment-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 手機的移除鈕：視覺 40px，點擊範圍靠 ::before 撐到 48px，跟預覽拉開距離避免誤觸。 */
  .dv-cost-attachment-remove { width: 40px; height: 40px; top: 4px; right: 4px; }
  .dv-cost-attachment-remove::before { content: ""; position: absolute; inset: -4px; }
  .dv-reconditioning-transition { padding: 16px; }
  .dv-reconditioning-action-form .dv-btn-primary { width: 100%; }
  .dv-attachment-row { align-items: stretch; flex-direction: column; }
  .dv-attachment-row > form, .dv-attachment-row > form .dv-btn-danger { width: 100%; }
  .dv-attachment-row > .dv-deal-document-download { width: 100%; justify-content: center; }
  .dv-attachment-row > .dv-attachment-actions { width: 100%; }
  .dv-attachment-actions > * { flex: 1 1 0; min-width: 0; }
  .dv-attachment-actions .dv-btn-secondary, .dv-attachment-actions .dv-btn-danger { width: 100%; justify-content: center; }
  .dv-section-heading { align-items: flex-start; flex-wrap: wrap; }
  .dv-section-heading-actions { width: 100%; align-items: stretch; flex-direction: column; }
  .dv-section-heading-actions .dv-btn-primary,
  .dv-section-heading-actions .dv-btn-secondary,
  .dv-section-heading-actions .dv-btn-danger { width: 100%; }
  .dv-timeline-card header { flex-direction: column; align-items: flex-start; gap: 4px; }
  .dv-timeline-card time { white-space: normal; }
  .dv-modal .modal-dialog { min-height: 100%; margin: 0; }
  .dv-modal .modal-content {
    min-height: 100vh;
    min-height: 100dvh;
    border-radius: 0;
  }
  .dv-modal .modal-body {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .dv-modal .modal-footer { position: sticky; bottom: 0; padding-bottom: max(14px, env(safe-area-inset-bottom, 0px)); background: var(--dv-surface); }
  .dv-modal .modal-body .dv-form-control,
  .dv-modal .modal-body .form-select {
    font-size: 16px;
  }
  .dv-vehicle-lock-modal .modal-dialog {
    max-width: none;
    width: 100%;
    height: 100%;
    margin: 0;
  }
  .dv-vehicle-lock-modal .modal-content,
  .dv-vehicle-lock-modal .dv-modal-form {
    min-height: 100vh;
    min-height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
  }
  .dv-vehicle-lock-modal .modal-header {
    padding: 14px 16px;
    padding-top: max(14px, env(safe-area-inset-top));
  }
  .dv-vehicle-lock-modal .modal-title { font-size: 18px; }
  .dv-vehicle-lock-modal .modal-body { padding: 16px; }
  .dv-vehicle-lock-modal .modal-footer {
    position: sticky;
    bottom: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 12px 16px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
  .dv-vehicle-lock-modal .modal-footer > * { width: 100%; margin: 0; }
  .dv-modal.is-compact .modal-dialog {
    min-height: calc(100% - 32px);
    margin: 16px;
    display: flex;
    align-items: center;
  }
  .dv-modal.is-compact .modal-content {
    min-height: 0;
    width: 100%;
    border-radius: 18px;
  }
  .dv-modal.is-compact .modal-footer {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }
  .dv-modal.is-compact .modal-footer > * { width: 100%; }
  .dv-photo-modal .modal-dialog {
    min-height: 0;
    max-width: calc(100% - 16px);
    margin: 8px;
  }
  .dv-photo-modal .modal-content {
    min-height: 0;
    max-height: calc(100dvh - 16px);
    overflow: hidden;
    border-radius: 16px;
  }
  .dv-photo-modal .modal-header { padding: 12px 14px; }
  .dv-photo-modal-frame { height: min(72vh, calc(100dvh - 88px)); max-height: min(72vh, calc(100dvh - 88px)); }
  .dv-photo-manage-item { align-items: stretch; flex-direction: column; }
  .dv-photo-manage-item > form, .dv-photo-manage-item > form .dv-btn-danger { width: 100%; }
}

@media (max-width: 430px) {
  .dv-topbar-inner { padding-right: 10px; padding-left: 10px; gap: 6px; }
  .dv-brand { gap: 7px; }
  .dv-brand small { display: none; }
  .dv-brand strong { font-size: 14px; }
  .dv-logo-mark { width: 34px; height: 34px; }
  .dv-branch-scope { width: min(148px, 42vw); align-items: stretch; }
  .dv-branch-scope select, .dv-branch-scope strong { max-width: none; width: 100%; }
  .dv-topbar-actions { gap: 6px; }
  .dv-icon-button { width: 44px; height: 44px; }
  .dv-profile-button { gap: 0; }
  .dv-avatar { width: 34px; height: 34px; }
  .dv-topbar .dv-role-badge {
    right: -3px;
    bottom: -2px;
    width: 13px;
    height: 13px;
  }
  .dv-topbar .dv-role-badge--crown {
    animation-name: dv-role-badge-sway-mobile;
    animation-duration: 6.1s;
  }
  .dv-topbar .dv-role-badge--star { animation-duration: 7.7s; }
  .dv-topbar .dv-role-badge--accounting {
    animation-name: dv-role-badge-tick-mobile;
    animation-duration: 4.5s;
  }
  .dv-topbar .dv-role-badge--sales {
    animation-name: dv-role-badge-swing-mobile;
    animation-duration: 6.8s;
  }
  .dv-topbar .dv-role-badge--purchase { animation-duration: 21s; }
  .dv-topbar .dv-role-badge.is-trick-nod { animation-name: dv-role-badge-trick-nod-mobile; }
  .dv-topbar .dv-role-badge.is-trick-peek { animation-name: dv-role-badge-trick-peek-mobile; }
  .dv-topbar .dv-role-badge.is-trick-pop { animation-name: dv-role-badge-trick-pop-mobile; }
  .dv-topbar .dv-role-badge.is-trick-wiggle { animation-name: dv-role-badge-trick-wiggle-mobile; }
}

@media (max-width: 390px) {
  .dv-branch-scope { width: min(132px, 38vw); }
  .dv-branch-scope select { font-size: 10px; padding: 4px 18px 4px 6px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .dv-busy-ring {
    animation-duration: .7s !important;
    animation-iteration-count: infinite !important;
  }
  .dv-role-badge--crown,
  .dv-role-badge--star,
  .dv-role-badge--accounting,
  .dv-role-badge--sales,
  .dv-role-badge--purchase,
  .dv-topbar .dv-role-badge.is-trick-nod,
  .dv-topbar .dv-role-badge.is-trick-peek,
  .dv-topbar .dv-role-badge.is-trick-pop,
  .dv-topbar .dv-role-badge.is-trick-wiggle {
    animation: none !important;
  }
}

.dv-pagination {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.25rem;
}
.dv-pagination-actions, .dv-page-size { align-items: center; display: flex; gap: .5rem; }
.dv-pagination-summary { color: var(--dv-muted, #6b7280); font-size: .9rem; }
.dv-page-size { margin: 0; white-space: nowrap; }
.dv-page-size .form-select { min-width: 5rem; }
.dv-pagination .disabled { opacity: .45; pointer-events: none; }

.dv-bell { position: relative; flex: 0 0 auto; }
.dv-bell-button {
  position: relative;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.dv-bell-badge,
.dv-task-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--dv-on-accent);
  background: var(--dv-red-fill);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  pointer-events: none;
}
.dv-bell-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 1;
  box-shadow: 0 0 0 1.5px var(--dv-surface);
}
.dv-icon-button .dv-task-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 1;
  box-shadow: 0 0 0 1.5px var(--dv-surface);
}
.dv-nav-task-icon {
  position: relative;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
}
.dv-nav-task-icon .dv-task-badge {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 9px;
  line-height: 1;
  z-index: 1;
  transform: translate(45%, -35%);
  box-shadow: 0 0 0 1.5px var(--dv-surface);
}
.dv-side-nav > a .dv-task-badge { margin-left: auto; }
.dv-action-list a .dv-task-badge {
  display: inline-grid;
  margin-left: 6px;
  vertical-align: middle;
}
.dv-bell-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  width: min(360px, calc(100vw - 24px));
  max-height: min(70vh, 480px);
  overflow: auto;
  background: var(--dv-surface);
  border: 1px solid var(--dv-border);
  border-radius: 16px;
  box-shadow: var(--dv-shadow-raised);
}
.dv-bell-panel-header, .dv-bell-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
}
.dv-bell-footer { border-top: 1px solid var(--dv-border); font-weight: 700; }
.dv-bell-empty { margin: 0; padding: 16px; color: var(--dv-muted); }
.dv-bell-item {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid var(--dv-border);
}
.dv-bell-item small, .dv-notify-card p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.dv-bell-item strong, .dv-notify-card h3 { display: block; overflow-wrap: anywhere; }
.dv-bell-item time, .dv-notify-card time { color: var(--dv-muted); font-size: 11px; }
.dv-unread-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  margin-top: 6px;
  border-radius: 50%;
  background: transparent;
}
.dv-bell-item.is-unread .dv-unread-dot,
.dv-notify-card.is-unread .dv-unread-dot { background: var(--dv-red); }
.dv-notify-list { display: grid; gap: 12px; }
.dv-notify-card {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.dv-notify-link {
  display: flex;
  min-width: 0;
  flex: 1 1 12rem;
  gap: 10px;
  color: inherit;
}
.dv-notify-link:hover { color: inherit; }
.dv-notify-card h3 { margin: 0 0 4px; }
.dv-notify-card p { margin: 0; color: var(--dv-muted); font-size: 13px; line-height: 1.45; }
.dv-notify-card form { margin: 0; }
.dv-notify-push-card { display: grid; gap: 14px; }
.dv-notify-push-card h2 { margin: 4px 0 6px; font-size: 18px; font-weight: 800; }
.dv-notify-push-card p { margin: 0; color: var(--dv-muted); font-size: 13px; }
.dv-setting-card { display: grid; gap: 12px; }
.dv-setting-toggles { display: grid; gap: 10px; }
.dv-setting-toggles label { display: flex; align-items: center; gap: 8px; margin: 0; }

@media (max-width: 991.98px) {
  .dv-bell-panel { display: none !important; }
}

.dv-breadcrumb {
  margin: 0 0 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: var(--dv-muted);
  font-size: 12px;
  font-weight: 650;
}
.dv-breadcrumb a { color: var(--dv-muted); }
.dv-breadcrumb a:hover { color: var(--dv-red); }
.dv-breadcrumb > span:last-child { color: var(--dv-text); }

.dv-detail-page { width: 100%; max-width: 880px; }
.dv-page-status { margin: 8px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.dv-summary-card {
  margin: 0 0 16px;
  padding: 18px;
  background: var(--dv-surface);
  border: 1px solid var(--dv-border);
  border-radius: var(--dv-radius-md);
  box-shadow: var(--dv-shadow);
}
.dv-summary-card > .dv-case-header { margin-bottom: 0; }
.dv-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
}
.dv-summary-item { min-width: 0; }
.dv-summary-item span {
  display: block;
  margin-bottom: 4px;
  color: var(--dv-muted);
  font-size: 12px;
  font-weight: 700;
}
.dv-summary-item strong {
  display: block;
  min-width: 0;
  color: var(--dv-black);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.dv-money-primary,
.dv-summary-item .dv-money-primary {
  color: var(--dv-red);
  font-size: clamp(20px, 5.4vw, 28px);
  font-weight: 850;
  letter-spacing: -.03em;
  line-height: 1.15;
}

.dv-state-hint {
  margin: 10px 0 0;
  padding: 7px 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #7a57bd;
  background: #f3edff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.dv-primary-action { margin: 0 0 10px; }
.dv-primary-action .dv-btn-primary,
.dv-primary-action .dv-btn-secondary,
.dv-primary-action form,
.dv-primary-action form .dv-btn-primary { width: 100%; }
.dv-review-batch-action {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.dv-review-batch-copy { min-width: 0; flex: 1 1 auto; }
.dv-review-batch-copy strong {
  display: block;
  color: var(--dv-black);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
}
.dv-review-batch-copy span {
  display: block;
  margin-top: 2px;
  color: var(--dv-muted);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.dv-primary-action.dv-review-batch-action .dv-btn-primary {
  flex: 0 0 auto;
  width: auto;
  min-width: 108px;
  min-height: 44px;
}
.dv-secondary-actions {
  margin: 0 0 16px;
  display: grid;
  gap: 8px;
}
.dv-secondary-actions .dv-btn-secondary,
.dv-secondary-actions .dv-btn-primary { width: 100%; }

.dv-notice-card { margin: 0 0 16px; padding: 14px 16px; }
.dv-notice-card h2 { margin: 0 0 10px; font-size: 15px; font-weight: 800; }
.dv-notice-list { display: grid; gap: 8px; }
.dv-notice-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: inherit;
  font-size: 14px;
  line-height: 1.45;
}
.dv-notice-item a { color: inherit; font-weight: 750; text-decoration: underline; }

.dv-contact-link { color: var(--dv-black); font-weight: 800; }
.dv-contact-link:hover { color: var(--dv-red); }

.dv-collapse-toggle {
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: inherit;
  background: transparent;
  border: 0;
  text-align: left;
}
.dv-collapse-toggle:hover { color: var(--dv-black); }
.dv-collapse-toggle .dv-section-heading { margin: 0; flex: 1; flex-wrap: nowrap; }
.dv-collapse-summary {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  min-width: 0;
  text-align: right;
}
.dv-collapse-summary span {
  color: var(--dv-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}
.dv-collapse-summary strong {
  color: var(--dv-red);
  font-size: 16px;
  font-weight: 850;
  letter-spacing: -.03em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.dv-collapse-chevron {
  flex: 0 0 auto;
  color: var(--dv-muted);
  font-size: 12px;
  transition: transform .15s ease;
}
.dv-collapse-toggle[aria-expanded="true"] .dv-collapse-chevron { transform: rotate(180deg); }
.dv-detail-section .collapse { padding-top: 4px; }
/* 車輛明細花費區的「＋ 新增花費」：展開後整列虛線按鈕，有花費時在清單上面、沒有時在空狀態下面。 */
.dv-cost-add { width: 100%; margin-bottom: 12px; border-style: dashed; }
.dv-empty-state + .dv-cost-add { margin: 4px 0 0; }

.dv-section-card.dv-record-stack { padding: 4px 16px; }
.dv-record-row + .dv-record-row { border-top: 1px solid var(--dv-border); }
.dv-record-row .dv-collapse-toggle {
  min-height: 48px;
  padding: 6px 0;
  gap: 10px;
  flex-wrap: nowrap;
}
.dv-record-row-label {
  flex: 0 0 auto;
  color: var(--dv-black);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.dv-record-row .dv-collapse-summary {
  flex: 1 1 auto;
  flex-direction: row;
  justify-content: flex-end;
  min-width: 0;
}
.dv-record-row .dv-collapse-summary span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dv-record-row .collapse { padding: 0 0 12px; }


.dv-action-list .dv-sheet-item { justify-content: flex-start; }
.dv-sheet-item > span:last-child { margin-left: auto; color: var(--dv-muted); }
.dv-sheet-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  color: var(--dv-red);
  background: var(--dv-red-soft);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 850;
}
.dv-sheet-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; text-align: left; }
.dv-sheet-copy strong { font-size: 15px; font-weight: 800; }
.dv-sheet-copy small { color: var(--dv-muted); font-size: 12px; font-weight: 650; line-height: 1.35; }

.dv-record-title { margin: 0; color: var(--dv-black); font-size: 17px; font-weight: 800; overflow-wrap: anywhere; }
.dv-record-sub { margin: 4px 0 0; color: var(--dv-muted); font-size: 13px; overflow-wrap: anywhere; }
.dv-record-amount {
  color: var(--dv-red);
  font-size: clamp(16px, 4.4vw, 22px);
  font-weight: 850;
  letter-spacing: -.03em;
  line-height: 1.15;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.dv-info-list .dv-record-amount { font-size: 16px; }

.dv-payment-amount {
  color: var(--dv-black);
  font-size: clamp(22px, 6vw, 28px);
  font-weight: 850;
  letter-spacing: -.03em;
  line-height: 1.1;
}
.dv-payment-amount.is-in { color: var(--dv-success); }
.dv-payment-amount.is-void { color: var(--dv-muted); text-decoration: line-through; }
/* 收款卡的兩種例外：退回不淡化（左側紅線＋原因區塊，對比正常）；作廢才淡底＋金額刪除線，字色仍維持正常對比。 */
.dv-record-card.is-rejected { border-left: 4px solid var(--dv-danger); }
.dv-record-card.is-void { background: var(--dv-bg); box-shadow: none; }
/* 淡底上的品牌紅只有 4.48:1，作廢卡裡的文字動作改用深一階的紅。 */
.dv-record-card.is-void .dv-text-action:not(.is-danger),
.dv-record-card.is-void .dv-section-kicker { color: var(--dv-red-dark); }
.dv-payment-rejected {
  margin: 10px 0 0;
  padding: 10px 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  color: var(--dv-text);
  background: var(--dv-danger-soft);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
}
.dv-payment-rejected strong { flex: 1 1 100%; color: var(--dv-black); font-weight: 800; }
.dv-payment-rejected span { flex: 1 1 100%; min-width: 0; overflow-wrap: anywhere; }
.dv-payment-rejected .dv-btn-secondary { min-height: 40px; }

a.dv-pending-link { color: inherit; text-decoration: none; }
a.dv-pending-link:hover { color: inherit; }
.dv-pending-link.is-due { border-left: 4px solid var(--dv-danger); }
.dv-pending-link.is-loan { border-left: 4px solid var(--dv-warning); }
.dv-pending-link.is-over { border-left: 4px solid #d97706; }
.dv-pending-link.is-void { border-left: 4px solid #444; }
.dv-pending-link.is-delivered { border-left: 4px solid var(--dv-info); }

@media (max-width: 389.98px) {
  .dv-stat-grid.dv-finance-kpi { grid-template-columns: 1fr; }
}

.dv-cost-disclaimer { max-width: 42rem; overflow-wrap: anywhere; }
.dv-finance-cost-amount {
  min-width: 0;
  color: var(--dv-black);
  font-size: clamp(22px, 6vw, 28px);
  font-weight: 850;
  letter-spacing: -.03em;
  line-height: 1.15;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.dv-stat-grid.dv-finance-kpi .dv-stat-card small {
  grid-column: 1 / -1;
  margin-top: 6px;
  overflow-wrap: anywhere;
  white-space: normal;
}
.dv-finance-month-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 12px;
  background: var(--dv-surface);
  border: 1px solid var(--dv-border);
  border-radius: 14px;
  box-shadow: var(--dv-shadow);
}
.dv-finance-month-switcher form {
  flex: 0 1 240px;
  min-width: 0;
  margin: 0;
}
.dv-finance-month-switcher label {
  display: block;
  margin-bottom: 5px;
  color: var(--dv-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
}
.dv-finance-month-switcher .dv-form-control { min-height: 42px; }
.dv-finance-month-arrow,
.dv-finance-month-current {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--dv-black);
  text-decoration: none;
  border: 1px solid var(--dv-border-strong);
  border-radius: 10px;
}
.dv-finance-month-arrow { width: 42px; font-size: 25px; line-height: 1; }
.dv-finance-month-current { padding: 0 14px; font-size: 13px; font-weight: 800; }
.dv-finance-month-arrow:hover,
.dv-finance-month-current:hover { color: var(--dv-red); border-color: var(--dv-red); }

.dv-stat-grid.dv-finance-overview-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dv-stat-grid.dv-finance-overview-kpis .dv-stat-card small {
  grid-column: 1 / -1;
  margin-top: 6px;
  white-space: normal;
}
.dv-finance-operation-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dv-finance-operation-links a {
  padding: 9px 12px;
  color: var(--dv-muted);
  text-decoration: none;
  background: var(--dv-surface);
  border: 1px solid var(--dv-border);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.dv-finance-operation-links a:hover { color: var(--dv-black); border-color: var(--dv-border-strong); }
.dv-finance-operation-links strong { margin-left: 4px; color: var(--dv-black); }

.dv-finance-chart-card { min-width: 0; padding: 18px; }
.dv-finance-bar-chart { display: grid; gap: 16px; margin-top: 16px; }
.dv-finance-bar-row { min-width: 0; }
.dv-finance-bar-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 7px;
}
.dv-finance-bar-heading > div:first-child { min-width: 0; }
.dv-finance-bar-heading strong { color: var(--dv-black); font-size: 14px; font-weight: 800; }
.dv-finance-bar-heading small {
  display: block;
  margin-top: 2px;
  color: var(--dv-muted);
  font-size: 11px;
}
.dv-finance-bar-value { flex: 0 0 auto; text-align: right; }
.dv-finance-bar-value strong { display: block; font-variant-numeric: tabular-nums; }
.dv-finance-bar-value span { color: var(--dv-muted); font-size: 11px; font-weight: 750; }
.dv-finance-bar-track {
  height: 10px;
  overflow: hidden;
  background: var(--dv-surface-muted);
  border-radius: 999px;
}
.dv-finance-bar-track > span {
  width: var(--dv-finance-bar-width);
  min-width: 5px;
  height: 100%;
  display: block;
  background: var(--dv-black);
  border-radius: inherit;
}
.dv-finance-bar-track > .is-deposit { background: var(--dv-success); }
.dv-finance-bar-track > .is-loan { background: var(--dv-info); }
.dv-finance-bar-track > .is-final { background: var(--dv-red); }
.dv-finance-bar-track > .is-other { background: var(--dv-warning); }
.dv-finance-bar-track > .is-commission { background: var(--dv-accent); }
.dv-finance-bar-track > .is-dealer-trade { background: var(--dv-teal); }
.dv-finance-bar-track > .is-purchase { background: var(--dv-black); }
.dv-finance-bar-track > .is-management { background: var(--dv-red); }
.dv-finance-bar-track > .is-vehicle { background: var(--dv-info); }
.dv-finance-bar-track > .is-brand { background: var(--dv-accent); }
.dv-finance-bar-track > .is-detail { background: var(--dv-teal); }
.dv-finance-bar-row.is-credit .dv-finance-bar-value strong { color: var(--dv-success); }
.dv-finance-bar-row.is-credit .dv-finance-bar-track > span { background: var(--dv-success); }
.dv-finance-chart-subsection {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--dv-border);
}
.dv-finance-chart-subsection h3 { margin: 0; color: var(--dv-black); font-size: 15px; }
.dv-finance-chart-empty {
  margin-top: 14px;
  padding: 24px 16px;
  color: var(--dv-muted);
  text-align: center;
  background: var(--dv-surface-muted);
  border-radius: 12px;
  font-size: 13px;
}
.dv-cost-recent .dv-cost-amount {
  text-align: right;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (min-width: 768px) {
  .dv-stat-grid.dv-finance-overview-kpis { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}

@media (max-width: 389.98px) {
  .dv-stat-grid.dv-finance-overview-kpis { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
  /* 收款流水在 390px 上，頁首＋主分類＋子分頁＋這條月份列就吃掉快半個畫面，
     第一筆收款才開始。這條只有「‹ 月份 ›」三個東西（本月在這個斷點是隱藏的），
     不需要跟卡片一樣的內距。 */
  .dv-finance-month-switcher { align-items: center; margin-top: 10px; padding: 8px 10px; }
  .dv-finance-month-switcher form { flex: 1 1 auto; }
  .dv-finance-month-current { display: none; }
  .dv-finance-bar-heading { align-items: flex-start; }
}

@media (min-width: 992px) {
  .dv-finance-list .dv-record-card { padding: 14px 18px; }
  .dv-finance-list .dv-record-title { font-size: 15px; }
  .dv-finance-list .dv-payment-amount { font-size: 22px; }
}
.dv-payment-type { margin-top: 6px; color: var(--dv-black); font-size: 15px; font-weight: 800; }
.dv-payment-meta { margin-top: 4px; color: var(--dv-muted); font-size: 13px; }
.dv-payment-card > header { flex-direction: row; flex-wrap: nowrap; }
.dv-payment-card > header > div:first-child { flex: 1 1 auto; }
.dv-payment-card > header > .dv-badge-row { flex: 0 0 auto; }
@media (max-width: 575.98px) {
  /* 金額留在類型旁，項目名稱使用整行，不被金額擠成窄欄。 */
  .dv-cost-mobile .dv-cost-card-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
  .dv-cost-mobile .dv-cost-card-head > div { display: contents; }
  .dv-cost-mobile .dv-cost-type { grid-column: 1; grid-row: 1; align-self: center; }
  .dv-cost-mobile .dv-cost-amount { grid-column: 2; grid-row: 1; align-self: center; }
  .dv-cost-mobile .dv-cost-card-head h3 { grid-column: 1 / -1; grid-row: 2; margin: 0; }
  .dv-cost-mobile .dv-cost-registered { flex-basis: 100%; }
}

.dv-deposit-state {
  margin-bottom: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}
.dv-deposit-state p {
  min-width: 0;
  margin: 0;
  color: var(--dv-black);
  font-size: 14px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.dv-vehicle-card-body .dv-record-amount { margin-top: 8px; }
.dv-vehicle-card-vin { margin-top: 6px; color: var(--dv-muted); font-size: 12px; overflow-wrap: anywhere; }
/* 標題與資訊列裡車名後面的 VIN 尾碼（UiDisplay.VehicleIdentityHtml）：只是輔助辨識，不跟車名搶。 */
.dv-vin-tag { display: inline-block; color: var(--dv-muted); font-size: max(12px, .6em); font-weight: 600; letter-spacing: .02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dv-guidebook-quotes {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  color: var(--dv-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}
.dv-guidebook-quotes.is-empty {
  display: block;
  font-weight: 600;
}
.dv-guidebook-quote {
  white-space: nowrap;
  color: var(--dv-text);
  font-variant-numeric: tabular-nums;
}
.dv-guidebook-quote small {
  margin-left: 1px;
  color: var(--dv-subtle);
  font-size: 12px;
  font-weight: 700;
}
.dv-info-list .dv-guidebook-quotes {
  margin-top: 0;
  justify-content: flex-end;
}
.dv-field .dv-guidebook-quotes {
  margin-top: 8px;
}
/* 手機也維持 12px（原本縮到 10px／9px，低於次要說明的下限）。 */
@media (max-width: 575.98px) {
  .dv-guidebook-quotes { gap: 3px 6px; }
}

@media (max-width: 991.98px) {
  .dv-primary-action:not(.is-inline) {
    position: fixed;
    z-index: 1035;
    right: 0;
    bottom: var(--dv-bottom-nav-offset);
    left: 0;
    margin: 0;
    padding: 10px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px));
    background: var(--dv-chrome-strong);
    border-top: 1px solid var(--dv-border);
    box-shadow: 0 -8px 24px rgba(17, 17, 17, .06);
    backdrop-filter: blur(14px);
  }
  .dv-main:has(.dv-primary-action:not(.is-inline)) {
    padding-bottom: calc(var(--dv-bottom-nav-offset) + 108px);
  }
  /* 主要連結補足 44px 觸控高度，用負邊距抵消，不撐高原本的列：
     電話連結（訂金卡、資訊列）與段落標題右側的「進入成交工作台」。 */
  .dv-contact-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; margin: -12px -4px; }
  .dv-section-heading > a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; margin: -10px -4px; }
  .dv-deal-customer-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; margin: -12px -2px; }
}

@media (min-width: 768px) {
  .dv-summary-grid.is-money { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
  .dv-primary-action,
  .dv-secondary-actions { max-width: 360px; }
  .dv-primary-action.dv-review-batch-action { max-width: none; }
  .dv-detail-hero .dv-primary-action,
  .dv-summary-card .dv-primary-action,
  .dv-summary-card .dv-secondary-actions { max-width: none; }
}

.dv-deal-quick-nav {
  overflow-x: auto;
  flex-wrap: nowrap;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.dv-deal-quick-nav::-webkit-scrollbar { display: none; }
.dv-deal-quick-nav a {
  min-height: 40px;
  white-space: nowrap;
}
.dv-deal-overview-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.dv-deal-overview-copy { min-width: 0; flex: 1 1 auto; }
.dv-deal-customer-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.dv-deal-customer-contact .dv-case-customer { margin: 0; }
.dv-deal-customer-contact button { min-height: 40px; padding: 7px 12px; }
/* 頁首：車名連到車輛明細、客戶名連到客戶明細。 */
.dv-deal-overview-copy h1 .dv-deal-vehicle-link { color: inherit; text-decoration: none; }
.dv-deal-overview-copy h1 .dv-deal-vehicle-link:hover { color: var(--dv-red); }
.dv-deal-customer-link { color: var(--dv-black); font-weight: 750; text-decoration: none; }
.dv-deal-customer-link:hover { color: var(--dv-red); }
.dv-deal-cover {
  flex: 0 0 88px;
  width: 88px;
  height: 66px;
  padding: 0;
  overflow: hidden;
  appearance: none;
  background: var(--dv-photo-bg);
  border: 1px solid var(--dv-border);
  border-radius: 10px;
  line-height: 0;
  cursor: zoom-in;
}
.dv-deal-cover .dv-image-shell { display: block; }
.dv-deal-cover:focus-visible {
  outline: 2px solid var(--dv-red);
  outline-offset: 2px;
}
.dv-deal-workspace .dv-section-card { margin-bottom: 24px; }
.dv-deal-workspace .dv-mobile-card-list { gap: 14px; }
.dv-section-action {
  min-height: 44px;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--dv-red);
  background: transparent;
  border: 0;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 750;
  white-space: nowrap;
}
.dv-section-action:hover { color: var(--dv-red-dark); background: var(--dv-red-soft); }
a.dv-section-action { color: var(--dv-red); }
.dv-record-footer {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.dv-text-action {
  min-height: 44px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  color: var(--dv-red);
  background: transparent;
  border: 0;
  font-size: 14px;
  font-weight: 750;
}
.dv-text-action:hover { color: var(--dv-red-dark); }
.dv-text-action.is-danger { color: var(--dv-danger); }
.dv-deal-workspace .dv-action-list .is-danger {
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid var(--dv-border);
  color: var(--dv-danger);
}
.dv-loan-next-step {
  margin: 0 0 12px;
  padding: 13px 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  background: var(--dv-warning-soft);
  border: 1px solid var(--dv-border);
  border-left: 4px solid var(--dv-warning);
  border-radius: var(--dv-radius-sm);
}
.dv-loan-next-step > div { min-width: 0; }
.dv-loan-next-step span {
  display: block;
  color: var(--dv-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
}
.dv-loan-next-step strong {
  display: block;
  margin-top: 2px;
  color: var(--dv-black);
  font-size: 16px;
  font-weight: 900;
}
.dv-loan-next-step p {
  margin: 3px 0 0;
  color: var(--dv-text);
  font-size: 12px;
  line-height: 1.45;
}
.dv-loan-next-step form { margin: 0; }
.dv-loan-next-step .dv-btn-secondary { min-width: 150px; }
/* 下一步卡的事實列：貸款公司 · 階段 · 金額。要蓋過上面「span 當眉標」的規則，特異性拉到兩層。 */
.dv-loan-next-step .dv-loan-next-step-facts { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--dv-text); font-size: 13px; font-weight: 650; }
.dv-loan-next-step .dv-loan-next-step-facts span { display: inline; color: inherit; font-size: inherit; font-weight: inherit; letter-spacing: 0; }
.dv-loan-next-step .dv-loan-next-step-facts span + span::before { content: "· "; color: var(--dv-muted); }
.dv-deal-actionbar,
.dv-case-actionbar {
  margin: 0 0 16px;
  display: grid;
  gap: 8px;
}
.dv-deal-actionbar.is-split,
.dv-case-actionbar.is-split { grid-template-columns: minmax(0, .35fr) minmax(0, .65fr); }
.dv-deal-actionbar.is-primary-only,
.dv-deal-actionbar.is-more-only,
.dv-case-actionbar.is-primary-only,
.dv-case-actionbar.is-more-only { grid-template-columns: minmax(0, 1fr); }
.dv-deal-actionbar form,
.dv-case-actionbar form { margin: 0; display: block; min-width: 0; }
.dv-deal-actionbar .dv-btn-primary,
.dv-deal-actionbar .dv-btn-secondary,
.dv-deal-actionbar form .dv-btn-primary,
.dv-case-actionbar .dv-btn-primary,
.dv-case-actionbar .dv-btn-secondary,
.dv-case-actionbar form .dv-btn-primary {
  width: 100%;
  min-height: 50px;
}
.dv-deal-actionbar .dv-deal-more-action,
.dv-case-actionbar .dv-case-more-action { min-height: 48px; }

@media (max-width: 991.98px) {
  .dv-deal-actionbar,
  .dv-case-actionbar {
    position: fixed;
    z-index: 1035;
    right: 0;
    bottom: var(--dv-bottom-nav-offset);
    left: 0;
    margin: 0;
    padding: 10px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px));
    background: var(--dv-chrome-strong);
    border-top: 1px solid var(--dv-border);
  }
  .dv-main:has(.dv-deal-actionbar),
  .dv-main:has(.dv-case-actionbar) {
    padding-bottom: calc(var(--dv-bottom-nav-offset) + 108px);
  }
}

@media (min-width: 992px) {
  .dv-deal-actionbar,
  .dv-case-actionbar { max-width: 420px; }
  .dv-deal-cover { flex-basis: 112px; width: 112px; height: 84px; }
}

@media (max-width: 575.98px) {
  .dv-loan-next-step { grid-template-columns: minmax(0, 1fr); }
  .dv-loan-next-step .dv-btn-secondary { width: 100%; }
  .dv-deal-workspace .dv-section-heading {
    align-items: center;
    flex-wrap: nowrap;
  }
  .dv-deal-workspace .dv-section-heading-actions {
    width: auto;
    flex-direction: row;
    align-items: center;
  }
  .dv-deal-workspace .dv-section-heading-actions .dv-section-action {
    width: auto;
  }
}

@media (max-width: 767.98px) {
  .dv-pagination { align-items: stretch; flex-direction: column; }
  .dv-pagination-actions { justify-content: space-between; }
  .dv-notify-page .dv-page-header {
    flex-direction: column;
    align-items: stretch;
  }
  .dv-notify-page .dv-page-actions,
  .dv-notify-push-card .dv-page-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    justify-content: stretch;
  }
  .dv-notify-page .dv-page-actions .dv-btn-secondary,
  .dv-notify-page .dv-page-actions .dv-btn-primary,
  .dv-notify-push-card .dv-page-actions .dv-btn-primary,
  .dv-notify-push-card .dv-page-actions .dv-btn-secondary {
    width: 100%;
  }
  .dv-notify-card { flex-direction: column; }
  .dv-notify-link { flex: 1 1 auto; }
  .dv-notify-card form,
  .dv-notify-card form .dv-btn-secondary { width: 100%; }
}
.dv-delivery-attachments,
.dv-delivery-attachment-grid,
.dv-delivery-attachment-card,
.dv-delivery-attachment-files,
.dv-delivery-file,
.dv-delivery-file-preview,
.dv-delivery-file-meta { min-width: 0; max-width: 100%; }
.dv-delivery-attachments-status { color: var(--dv-muted); font-size: 14px; font-weight: 800; }
.dv-delivery-attachment-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.dv-delivery-attachment-card { overflow: hidden; padding: 16px; background: var(--dv-bg); border: 1px solid var(--dv-border); border-radius: 14px; }
.dv-delivery-attachment-card.is-complete { border-color: var(--dv-success); background: var(--dv-success-soft); }
.dv-delivery-attachment-card.is-missing { border-color: var(--dv-border-strong); }
.dv-delivery-attachment-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-width: 0; }
.dv-delivery-attachment-card-head h3 { margin: 4px 0 0; min-width: 0; font-size: 17px; font-weight: 800; overflow-wrap: anywhere; }
.dv-delivery-attachment-flag { display: inline-block; color: var(--dv-muted); font-size: 12px; font-weight: 800; }
.dv-delivery-attachment-card.is-complete .dv-delivery-attachment-flag { color: var(--dv-success); }
.dv-delivery-attachment-files { margin-top: 12px; display: grid; gap: 10px; }
.dv-delivery-file { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 10px; align-items: center; overflow: hidden; padding: 10px; background: var(--dv-surface); border: 1px solid var(--dv-border); border-radius: 12px; }
.dv-delivery-file.is-uploading, .dv-delivery-file.is-failed { grid-template-columns: minmax(0, 1fr) auto; }
.dv-delivery-file-preview { position: relative; overflow: hidden; box-sizing: border-box; width: 72px; height: 72px; min-height: 0; max-width: 72px; max-height: 72px; display: grid; place-items: center; background: var(--dv-bg); border-radius: 10px; contain: layout paint; }
.dv-delivery-file-preview > .dv-image-shell { position: absolute; inset: 0; }
.dv-delivery-attachments .dv-delivery-file-preview > img { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; object-position: center; }
.dv-delivery-file-name, .dv-delivery-file-meta strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-delivery-file-meta { min-width: 0; }
.dv-delivery-file-meta span, .dv-delivery-file-status { color: var(--dv-muted); font-size: 12px; }
.dv-delivery-file.is-failed .dv-delivery-file-status { color: var(--dv-danger); }
.dv-delivery-file-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.dv-delivery-add-btn { width: 100%; min-height: 48px; margin-top: 12px; }
.dv-delivery-attachments.is-compact .dv-delivery-add-btn { min-height: 44px; }
@media (min-width: 992px) {
  .dv-delivery-attachment-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
  /* 手機：每份文件縮成三欄方格，一類有三份也只佔一排 */
  .dv-delivery-attachment-files { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .dv-delivery-attachment-files > p,
  .dv-delivery-file.is-uploading,
  .dv-delivery-file.is-failed { grid-column: 1 / -1; }
  .dv-delivery-file { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 6px; }
  .dv-delivery-file-preview { width: 100%; max-width: 100%; height: auto; max-height: none; aspect-ratio: 1 / 1; }
  .dv-delivery-file-meta strong, .dv-delivery-file-meta span { font-size: 11px; }
  .dv-delivery-file form, .dv-delivery-file .dv-btn-danger { width: 100%; }
  .dv-delivery-file .dv-btn-danger { min-height: 34px; padding: 4px 6px; font-size: 12px; }
}
.dv-audit-photo-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.dv-audit-photo-strip .dv-vehicle-thumb { position: relative; flex: 0 0 auto; width: 96px; height: 68px; overflow: hidden; border-radius: 10px; border: 1px solid var(--dv-border); }
.dv-audit-photo-strip .dv-image-shell { position: absolute; inset: 0; }

/* ---------- 稽核專區：以車為中心 ----------
   首頁一台車一張卡，老闆一眼看到是哪台（照片、車名）、哪裡有事、最近發生什麼；
   點進單台車頁逐筆處理，「全部確認」只在單台車頁出現。 */
.dv-audit-board-views {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.dv-audit-board-views a {
  min-width: 0;
  min-height: 76px;
  padding: 10px 6px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 2px;
  color: var(--dv-text);
  background: var(--dv-surface);
  border: 1px solid var(--dv-border);
  border-radius: 12px;
  box-shadow: var(--dv-shadow);
  text-align: center;
}
.dv-audit-board-views a:hover { color: var(--dv-text); border-color: var(--dv-border-strong); }
.dv-audit-board-views strong {
  color: var(--dv-black);
  font-size: 24px;
  font-weight: 850;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.dv-audit-board-views span { color: var(--dv-muted); font-size: 12px; font-weight: 750; line-height: 1.3; }
.dv-audit-board-views small { color: var(--dv-muted); font-size: 11px; font-weight: 700; line-height: 1.3; }
.dv-audit-board-views a.is-active { background: var(--dv-selected-surface); border-color: var(--dv-selected-surface); }
.dv-audit-board-views a.is-active strong,
.dv-audit-board-views a.is-active span,
.dv-audit-board-views a.is-active small { color: var(--dv-selected-text); }

.dv-audit-board-search { margin-top: 12px; }
.dv-audit-board-list { margin-top: 12px; display: grid; gap: 10px; }
.dv-audit-board-card {
  min-width: 0;
  padding: 12px;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  color: var(--dv-text);
  background: var(--dv-surface);
  border: 1px solid var(--dv-border);
  border-radius: 14px;
  box-shadow: var(--dv-shadow);
}
.dv-audit-board-card:hover { color: var(--dv-text); border-color: var(--dv-border-strong); }
/* 財務確認單台車頁的摘要：同樣幾行字，但沒有縮圖那一欄，所以不能借用上面那個 grid。 */
.dv-audit-board-summary {
  min-width: 0;
  padding: 12px;
  color: var(--dv-text);
  background: var(--dv-surface);
  border: 1px solid var(--dv-border);
  border-radius: 14px;
  box-shadow: var(--dv-shadow);
}
.dv-audit-board-card.is-unassigned { border-style: dashed; border-color: var(--dv-border-strong); }

.dv-audit-thumb {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--dv-muted);
  background: var(--dv-media-bg);
  border-radius: 12px;
}
.dv-audit-thumb.is-large { width: 76px; height: 76px; border-radius: 14px; }
.dv-audit-thumb img { width: 100%; height: 100%; object-fit: cover; }
.dv-audit-thumb svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.dv-audit-board-body { min-width: 0; display: grid; gap: 3px; }
.dv-audit-board-title { min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.dv-audit-board-title strong {
  min-width: 0;
  color: var(--dv-black);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.dv-audit-board-title .dv-status-badge { flex: 0 0 auto; }
.dv-audit-board-meta { margin-bottom: 2px; color: var(--dv-muted); font-size: 12px; font-weight: 700; overflow-wrap: anywhere; }
.dv-audit-board-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.dv-audit-board-line > span { min-width: 0; display: inline-flex; align-items: baseline; gap: 6px; overflow-wrap: anywhere; }
.dv-audit-board-line > span::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  align-self: center;
  background: var(--dv-warning);
  border-radius: 50%;
}
.dv-audit-board-line > strong { flex: 0 0 auto; color: var(--dv-black); font-weight: 800; }
.dv-audit-board-line.is-danger { color: var(--dv-danger); }
.dv-audit-board-line.is-danger > span::before { background: var(--dv-danger); }
.dv-audit-board-line.is-clear { color: var(--dv-muted); }
.dv-audit-board-line.is-clear > span::before { background: var(--dv-success); }
.dv-audit-board-recent {
  margin-top: 5px;
  padding-top: 6px;
  color: var(--dv-muted);
  border-top: 1px solid var(--dv-border);
  font-size: 12px;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.dv-audit-vehicle-head { padding: 14px 16px; display: grid; gap: 14px; }
.dv-audit-vehicle-head-main { min-width: 0; display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 14px; }
.dv-audit-vehicle-head-copy { min-width: 0; }
.dv-audit-vehicle-head-copy h1 {
  margin: 6px 0 0;
  color: var(--dv-black);
  font-size: 20px;
  font-weight: 850;
  letter-spacing: -.02em;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.dv-audit-vehicle-head-copy p { margin: 4px 0 0; color: var(--dv-muted); font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.dv-audit-vehicle-head-copy a { color: var(--dv-red); }
.dv-audit-vehicle-head-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dv-audit-vehicle-head-actions > :only-child { grid-column: 1 / -1; }
.dv-audit-missing { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dv-audit-missing .dv-btn-secondary { flex: 0 0 auto; min-height: 38px; padding: 6px 14px; }

.dv-audit-section-heading { margin: 22px 2px 10px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dv-audit-section-heading h2 { margin: 0; color: var(--dv-black); font-size: 18px; font-weight: 850; }
.dv-audit-section-heading span { color: var(--dv-muted); font-size: 13px; font-weight: 750; }

.dv-audit-collapsible { margin-top: 14px; }
.dv-audit-collapsible > summary {
  padding: 15px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--dv-black);
  cursor: pointer;
  font-size: 15px;
  font-weight: 800;
  list-style: none;
}
.dv-audit-collapsible > summary::-webkit-details-marker { display: none; }
.dv-audit-collapsible > summary span { margin-left: auto; color: var(--dv-muted); font-size: 13px; font-weight: 750; }
.dv-audit-collapsible > summary::after { content: "＋"; color: var(--dv-muted); font-weight: 700; }
.dv-audit-collapsible[open] > summary::after { content: "－"; }
.dv-audit-collapsible-body { padding: 0 12px 14px; }

@media (min-width: 768px) {
  .dv-audit-vehicle-head { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .dv-audit-vehicle-head-actions { grid-template-columns: repeat(2, auto); }
}

/* ---------- 歷史匯入工作台 ---------- */
.dv-history-upload { display: grid; gap: 14px; }
.dv-history-upload .dv-form-grid { align-items: end; }
.dv-history-sample { padding-top: 6px; border-top: 1px dashed var(--dv-border); }
.dv-history-sample .dv-btn-secondary { width: 100%; }

.dv-history-workbench { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.dv-history-list { display: grid; gap: 12px; padding: 14px; background: var(--dv-surface); border: 1px solid var(--dv-border); border-radius: var(--dv-radius-lg); box-shadow: var(--dv-shadow); }
.dv-history-list-head { display: grid; gap: 10px; }
.dv-history-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.dv-history-counts { margin: 0; color: var(--dv-muted); font-size: 12px; }
.dv-history-list-items { display: grid; gap: 8px; max-height: 60vh; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.dv-history-list-item { display: grid; gap: 4px; width: 100%; padding: 10px 12px; text-align: left; background: var(--dv-bg); border: 1px solid var(--dv-border); border-radius: var(--dv-radius-md); cursor: pointer; }
.dv-history-list-item:hover { border-color: var(--dv-border-strong); }
.dv-history-list-item.is-active { background: var(--dv-red-soft); border-color: var(--dv-red); }
.dv-history-item-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dv-history-item-model { color: var(--dv-text); font-size: 13px; overflow-wrap: anywhere; }
.dv-history-item-meta { display: flex; flex-wrap: wrap; gap: 10px; color: var(--dv-muted); font-size: 12px; }
.dv-history-warn-dot { color: var(--dv-warning); font-weight: 700; }

.dv-history-chip { padding: 2px 8px; font-size: 11px; font-weight: 800; border-radius: 999px; white-space: nowrap; }
.dv-history-chip.is-pending { color: var(--dv-muted); background: var(--dv-bg); border: 1px solid var(--dv-border); }
.dv-history-chip.is-ready { color: var(--dv-success); background: var(--dv-success-soft); }
/* 原本是 muted 字配 subtle 底，只有 2.02:1（既有缺陷）。改用虛線邊框與 is-pending 區隔，
   文字改 --dv-text，在 #f7f7f7 上約 14:1。 */
.dv-history-chip.is-skipped { color: var(--dv-text); background: var(--dv-bg); border: 1px dashed var(--dv-border-strong); }

.dv-history-detail { display: grid; gap: 16px; min-width: 0; }
.dv-history-detail-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.dv-history-detail-head h2 { margin: 2px 0 0; font-size: 20px; font-weight: 800; overflow-wrap: anywhere; }
.dv-history-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.dv-history-warnings { padding: 12px 14px; background: var(--dv-warning-soft); border: 1px solid var(--dv-warning); border-radius: var(--dv-radius-md); }
.dv-history-warnings strong { display: block; margin-bottom: 6px; font-size: 13px; }
.dv-history-warnings ul { margin: 0; padding-left: 18px; font-size: 13px; }

.dv-history-columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.dv-history-source dl { display: grid; gap: 0; margin: 0; }
.dv-history-source-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--dv-border); }
.dv-history-source-row:last-child { border-bottom: 0; }
.dv-history-source-row dt { color: var(--dv-muted); font-size: 12px; font-weight: 700; }
.dv-history-source-row dd { margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.dv-history-empty { color: var(--dv-muted); }
.dv-history-edit h4 { margin: 16px 0 8px; font-size: 13px; font-weight: 800; color: var(--dv-red); letter-spacing: .04em; }
.dv-history-edit h4:first-of-type { margin-top: 8px; }

.dv-history-costs-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.dv-history-costs-head h3 { margin: 0; font-size: 15px; }
.dv-history-costs-scroll { overflow-x: auto; }
.dv-history-costs-scroll table { min-width: 720px; }
.dv-history-costs-scroll .dv-form-control { min-width: 90px; padding: 6px 8px; font-size: 13px; }
.dv-history-cost-source { max-width: 220px; color: var(--dv-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-history-cost-remove { padding: 4px 10px; line-height: 1; }

.dv-history-income { padding: 10px 12px; margin-bottom: 12px; font-weight: 700; border-radius: var(--dv-radius-md); }
.dv-history-income.is-ok { color: var(--dv-success); background: var(--dv-success-soft); }
.dv-history-income.is-bad { color: var(--dv-danger); background: var(--dv-danger-soft); }
.dv-history-check tr.is-mismatch td, .dv-history-check tr.is-mismatch th { color: var(--dv-danger); font-weight: 700; }

@media (min-width: 992px) {
  .dv-history-workbench { grid-template-columns: 300px minmax(0, 1fr); }
  .dv-history-list { position: sticky; top: 16px; }
  .dv-history-list-items { max-height: calc(100vh - 260px); max-height: calc(100dvh - 260px); }
  .dv-history-columns { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); }
}
.dv-history-chip.is-imported { color: var(--dv-info); background: var(--dv-info-soft); }
.dv-history-chip.is-failed { color: var(--dv-danger); background: var(--dv-danger-soft); }
.dv-history-imported { padding: 12px 14px; background: var(--dv-info-soft); border: 1px solid var(--dv-info); border-radius: var(--dv-radius-md); }
.dv-history-imported strong { display: block; margin-bottom: 6px; font-size: 13px; }
.dv-history-imported ul { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; font-size: 12px; }
.dv-history-failed { padding: 12px 14px; background: var(--dv-danger-soft); border: 1px solid var(--dv-danger); border-radius: var(--dv-radius-md); }
.dv-history-failed strong { display: block; margin-bottom: 4px; font-size: 13px; }
.dv-history-failed p { margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.dv-history-bulk { width: 100%; }

/* iOS 會在可輸入控制項小於 16px 時自動放大。只補實際小於 16px 的表單欄位，不要動頂欄門市選單。 */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 991.98px) {
    .dv-management-bonus-table .form-control,
    .dv-management-bonus-table .form-select,
    .dv-history-costs-scroll .dv-form-control {
      font-size: 16px;
    }
  }
}

/* 軟體鍵盤打開時，避免 fixed/sticky 底部元件被頂到輸入區上方。 */
@media (max-width: 991.98px) {
  body.is-dv-keyboard-open .dv-bottom-nav,
  body.is-dv-keyboard-open .dv-primary-action:not(.is-inline):not(.is-form-submit),
  body.is-dv-keyboard-open .dv-deal-actionbar,
  body.is-dv-keyboard-open .dv-case-actionbar {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(calc(100% + env(safe-area-inset-bottom, 0px)));
  }

  body.is-dv-keyboard-open .dv-form-actions,
  body.is-dv-keyboard-open .dv-primary-action.is-form-submit {
    position: static;
    right: auto;
    bottom: auto;
    left: auto;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  body.is-dv-keyboard-open .dv-modal {
    top: var(--dv-visual-viewport-top, 0px);
    bottom: auto;
    height: var(--dv-visual-viewport-height, 100dvh);
  }

  body.is-dv-keyboard-open .dv-modal .modal-dialog {
    min-height: 0;
    height: var(--dv-visual-viewport-height, 100dvh);
    max-height: var(--dv-visual-viewport-height, 100dvh);
    margin-top: 0;
    margin-bottom: 0;
  }

  body.is-dv-keyboard-open .dv-modal .modal-content,
  body.is-dv-keyboard-open .dv-modal .modal-content > form,
  body.is-dv-keyboard-open .dv-vehicle-lock-modal .dv-modal-form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }

  body.is-dv-keyboard-open .dv-modal .modal-content {
    height: var(--dv-visual-viewport-height, 100dvh);
    max-height: var(--dv-visual-viewport-height, 100dvh);
  }

  body.is-dv-keyboard-open .dv-modal .modal-content > form,
  body.is-dv-keyboard-open .dv-vehicle-lock-modal .dv-modal-form {
    flex: 1 1 auto;
    height: 100%;
    max-height: 100%;
  }

  body.is-dv-keyboard-open .dv-modal .modal-header,
  body.is-dv-keyboard-open .dv-modal .modal-footer {
    flex-shrink: 0;
  }

  body.is-dv-keyboard-open .dv-modal .modal-body {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.is-dv-keyboard-open .dv-modal.is-compact .modal-dialog,
  body.is-dv-keyboard-open .dv-photo-modal .modal-dialog {
    min-height: 0;
    height: auto;
    margin-top: 8px;
    margin-bottom: 8px;
    max-height: var(--dv-visual-viewport-height, 100dvh);
  }

  body.is-dv-keyboard-open .dv-modal.is-compact .modal-content,
  body.is-dv-keyboard-open .dv-photo-modal .modal-content {
    height: auto;
    max-height: var(--dv-visual-viewport-height, 100dvh);
  }
}

/* ===========================================================================
   Bootstrap 5.1 缺口補齊
   ---------------------------------------------------------------------------
   Bootstrap 5.1 沒有 data-bs-theme（那是 5.3 才有的），這些元件的底色與圖示
   寫死在 bootstrap.min.css 裡。以下用 token 覆寫，淺色模式下值與原本相同，
   所以兩個主題共用一份規則，不會漂移。本次不升級 Bootstrap。
   =========================================================================== */

/* modal：BS 寫死 background-color:#fff、border:1px solid rgba(0,0,0,.2) */
.modal-content {
  color: var(--dv-text);
  background-color: var(--dv-modal-surface);
  border-color: var(--dv-border);
}
.dv-modal .modal-content { background-color: var(--dv-modal-surface); }
.modal-header, .modal-footer { border-color: var(--dv-border); }

/* offcanvas：BS 寫死 background-color:#fff。手機「車輛／銷售／更多」三個抽屜都吃這條 */
.offcanvas {
  color: var(--dv-text);
  background-color: var(--dv-offcanvas-surface);
}
.offcanvas-header, .offcanvas-body { color: var(--dv-text); }

/* 關閉鈕：BS 的圖示是內嵌 SVG data-URI、fill 寫死 %23000，深色模式下會整顆消失。
   改成明確帶色的 SVG，順帶把預設的 opacity:.5 拉高到看得見。 */
.btn-close {
  color: var(--dv-muted);
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23737373'%3E%3Cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3E%3C/svg%3E") center/1em auto no-repeat;
  opacity: .75;
}
.btn-close:hover { opacity: 1; }
.btn-close:focus-visible { outline: 2px solid var(--dv-red); outline-offset: 2px; box-shadow: none; }
:root[data-dv-theme="dark"] .btn-close {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239ba1ab'%3E%3Cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3E%3C/svg%3E");
}

/* form-select 的下拉箭頭：site.css 原本只覆寫 background-color，
   background-image 仍是 BS 寫死 stroke='%23343a40' 的深灰箭頭。 */
:root[data-dv-theme="dark"] .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23c9ccd3' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
}
/* option 在部分桌面瀏覽器會繼承 UA 白底，明確指定才不會出現白色下拉清單。 */
.form-select option, .form-control option { color: var(--dv-text); background-color: var(--dv-input-bg); }

/* 表單狀態：BS 的 disabled/readonly 底色寫死 #e9ecef */
.dv-form-control, .form-control, .form-select { background-color: var(--dv-input-bg); border-color: var(--dv-input-border); }
.dv-form-control:disabled, .form-control:disabled, .form-select:disabled,
.dv-form-control[readonly], .form-control[readonly] {
  color: var(--dv-muted);
  background-color: var(--dv-input-disabled-bg);
  border-color: var(--dv-border);
}
.form-control[readonly]:not(:disabled) { background-color: var(--dv-input-readonly-bg); }
.dv-form-control::placeholder, .form-control::placeholder { color: var(--dv-subtle); opacity: 1; }
.form-control::-webkit-file-upload-button, .form-control::file-selector-button {
  color: var(--dv-text);
  background-color: var(--dv-surface-muted);
  border-color: var(--dv-border);
}
.input-group-text { color: var(--dv-muted); background-color: var(--dv-surface-muted); border-color: var(--dv-input-border); }
.form-text { color: var(--dv-muted); }
.form-check-input { background-color: var(--dv-input-bg); border-color: var(--dv-control-border); }
.form-check-input:checked { background-color: var(--dv-red-fill); border-color: var(--dv-red-fill); }
.form-check-input:focus { border-color: var(--dv-red); box-shadow: 0 0 0 .25rem var(--dv-focus-ring); }

/* 深色模式下 Chrome 的自動填入會強制套用淺藍底＋黑字，用 inset shadow 蓋掉。 */
:root[data-dv-theme="dark"] input:-webkit-autofill,
:root[data-dv-theme="dark"] input:-webkit-autofill:hover,
:root[data-dv-theme="dark"] input:-webkit-autofill:focus,
:root[data-dv-theme="dark"] textarea:-webkit-autofill,
:root[data-dv-theme="dark"] select:-webkit-autofill {
  -webkit-text-fill-color: var(--dv-text);
  -webkit-box-shadow: 0 0 0 1000px var(--dv-input-bg) inset;
  caret-color: var(--dv-text);
}

/* ===========================================================================
   深色模式：剩餘硬編色補丁
   ---------------------------------------------------------------------------
   下面這些原本是「深色文字 ＋ 淺色 tint 底」的徽章／提示。tint 底已經隨 token
   翻成深色，但文字色是寫死的深色，不補會變成深底深字讀不到。
   照片上的黑色半透明 overlay 刻意不動，那在兩個主題下都正確。
   =========================================================================== */
:root[data-dv-theme="dark"] {
  --dv-ink-warning: #f4bd72;
  --dv-ink-warning-strong: #f7cf95;
  --dv-ink-info: #7cc0f0;
  --dv-ink-purple: #b79bf0;
  --dv-ink-neutral: #a8aeb8;
  --dv-tint-purple: #2a2340;
  --dv-tint-neutral: #26292f;
  --dv-tint-amber: #3a2c17;
  --dv-tint-amber-strong: #46331a;
}

:root[data-dv-theme="dark"] .alert-warning { color: var(--dv-ink-warning); }
:root[data-dv-theme="dark"] .dv-agent-chip.is-warning { color: var(--dv-ink-warning); }
:root[data-dv-theme="dark"] .dv-phone-reminder { color: var(--dv-ink-warning); }
:root[data-dv-theme="dark"] .dv-phone-reminder:hover { color: var(--dv-ink-warning-strong); }
:root[data-dv-theme="dark"] .dv-phone-reminder-copy small { color: var(--dv-ink-warning); }

:root[data-dv-theme="dark"] .dv-commission-tier.is-high { color: var(--dv-ink-warning); background: var(--dv-tint-amber); }
:root[data-dv-theme="dark"] .dv-commission-tier.is-premium { color: var(--dv-danger); background: var(--dv-danger-soft); }

:root[data-dv-theme="dark"] .dv-status-badge.is-draft,
:root[data-dv-theme="dark"] .dv-status-badge.is-neutral { color: var(--dv-ink-neutral); background: var(--dv-tint-neutral); }
:root[data-dv-theme="dark"] .dv-status-badge.is-reserved { color: var(--dv-ink-purple); background: var(--dv-tint-purple); }
:root[data-dv-theme="dark"] .dv-status-badge.dv-lock-badge.is-locked { border-color: rgba(79, 179, 172, .35); }
:root[data-dv-theme="dark"] .dv-status-badge.dv-lock-badge.is-unlocked { color: var(--dv-ink-warning); background: var(--dv-tint-amber); border-color: rgba(244, 189, 114, .35); }

:root[data-dv-theme="dark"] .dv-task-due.is-tomorrow { color: var(--dv-ink-warning); }
:root[data-dv-theme="dark"] .dv-task-due.is-today { color: var(--dv-ink-warning-strong); background: var(--dv-tint-amber); }
:root[data-dv-theme="dark"] .dv-task-due.is-soon { color: var(--dv-ink-warning-strong); background: var(--dv-tint-amber-strong); }
:root[data-dv-theme="dark"] .dv-task-due.is-none { color: var(--dv-muted); background: var(--dv-tint-neutral); }
:root[data-dv-theme="dark"] .dv-task-status.is-pending { color: var(--dv-ink-warning); }

:root[data-dv-theme="dark"] .dv-user-tag.is-bonus,
:root[data-dv-theme="dark"] .dv-state-hint { color: var(--dv-ink-purple); background: var(--dv-tint-purple); }
:root[data-dv-theme="dark"] .dv-reservation-card.is-cancelled { border-color: #5a3438; }
:root[data-dv-theme="dark"] .dv-activity-detail-link:hover { background: var(--dv-red-soft); }

:root[data-dv-theme="dark"] .dv-team-person-scope button { color: var(--dv-ink-info); border-color: #2f5570; }
:root[data-dv-theme="dark"] .dv-team-person-count small { color: var(--dv-ink-warning); }
:root[data-dv-theme="dark"] [data-dv-team-progress] .dv-status-badge.is-repairing { color: var(--dv-ink-warning); }
:root[data-dv-theme="dark"] [data-dv-team-progress] .dv-status-badge.is-saleable { color: var(--dv-success); }
:root[data-dv-theme="dark"] [data-dv-team-progress] .dv-status-badge.is-wait-delivery,
:root[data-dv-theme="dark"] [data-dv-team-progress] .dv-status-badge.is-processing { color: var(--dv-ink-info); }
:root[data-dv-theme="dark"] [data-dv-team-progress] .dv-status-badge.is-delivered { color: var(--dv-teal); }
:root[data-dv-theme="dark"] [data-dv-team-progress] .dv-status-badge.is-stopped { color: var(--dv-danger); }
:root[data-dv-theme="dark"] [data-dv-team-progress] .dv-status-badge.is-reserved { color: var(--dv-ink-purple); }

:root[data-dv-theme="dark"] .dv-vehicle-thumb.is-active,
:root[data-dv-theme="dark"] .dv-vehicle-thumb:focus-visible { border-color: #8b929d; }
:root[data-dv-theme="dark"] .dv-pending-link.is-over { border-left-color: var(--dv-warning); }
:root[data-dv-theme="dark"] .dv-pending-link.is-void { border-left-color: #6b7280; }
:root[data-dv-theme="dark"] .dv-history-chip.is-skipped { color: var(--dv-black); background: var(--dv-tint-neutral); }

/* 圖片占位使用主題色的 CSS 漸層，不再下載占位照片或壓暗狀態文字。 */

/* ===========================================================================
   列印：一律回到淺色
   ---------------------------------------------------------------------------
   報表與交車單不能印出黑底。除了 color-scheme 之外，token 本身也要復原，
   否則 data-dv-theme="dark" 的宣告仍會勝出。
   =========================================================================== */
@media print {
  :root, :root[data-dv-theme="dark"] {
    color-scheme: light;

    --dv-red: #b3000e;
    --dv-red-dark: #8f000b;
    --dv-red-soft: #fff0f1;
    --dv-black: #000000;
    --dv-text: #1a1a1a;
    --dv-muted: #444444;
    --dv-subtle: #595959;
    --dv-bg: #ffffff;
    --dv-surface: #ffffff;
    --dv-border: #cccccc;
    --dv-border-strong: #999999;
    --dv-success: #16663d;
    --dv-success-soft: #ffffff;
    --dv-warning: #7a4d09;
    --dv-warning-soft: #ffffff;
    --dv-danger: #a3131a;
    --dv-danger-soft: #ffffff;
    --dv-info: #14507f;
    --dv-info-soft: #ffffff;
    --dv-teal: #17544f;
    --dv-teal-soft: #ffffff;

    --dv-red-fill: #b3000e;
    --dv-red-fill-hover: #b3000e;
    --dv-on-accent: #ffffff;
    --dv-surface-muted: #ffffff;
    --dv-accent: #7a5a17;

    --dv-chrome: #ffffff;
    --dv-chrome-strong: #ffffff;
    --dv-modal-surface: #ffffff;
    --dv-offcanvas-surface: #ffffff;
    --dv-table-head-bg: #f2f2f2;
    --dv-inverse-surface: #000000;
    --dv-inverse-text: #ffffff;
    --dv-selected-surface: var(--dv-inverse-surface);
    --dv-selected-text: var(--dv-inverse-text);
    /* 交車單、報表列印時不要出現整塊黑底 */
    --dv-hero-surface: #ffffff;
    --dv-hero-text: #000000;
    --dv-hero-text-muted: #333333;
    --dv-hero-text-subtle: #444444;
    --dv-hero-watermark: transparent;

    --dv-input-bg: #ffffff;
    --dv-input-disabled-bg: #ffffff;
    --dv-input-readonly-bg: #ffffff;
    --dv-input-border: #999999;
    --dv-control-border: #666666;
    --dv-focus-ring: transparent;
    --dv-focus-ring-strong: transparent;

    --dv-photo-bg: #ffffff;
    --dv-media-bg: #ffffff;
    --dv-overlay-ink: #000000;
    --dv-logo-plate: #ffffff;
    --dv-skeleton: #ffffff;
    --dv-skeleton-sheen: transparent;

    --dv-shadow: none;
    --dv-shadow-raised: none;

    --dv-ink-warning: #7a4d09;
    --dv-ink-warning-strong: #7a4d09;
    --dv-ink-info: #14507f;
    --dv-ink-success: #16663d;
    --dv-ink-danger: #a3131a;
    --dv-ink-teal: #17544f;
    --dv-ink-purple: #4b2f8f;
    --dv-ink-neutral: #444444;
    --dv-tint-purple: #ffffff;
    --dv-tint-neutral: #ffffff;
    --dv-tint-amber: #ffffff;
    --dv-tint-amber-strong: #ffffff;
  }

  html, body { background: #ffffff !important; color: #1a1a1a !important; }
  body.dv-app-body, body.dv-public-body, body.dv-auth-body { background: #ffffff !important; }

  /* 深色模式下的補丁在列印時要收回來，否則會印出淺色底＋淺色字。 */
  :root[data-dv-theme="dark"] .dv-image-placeholder { filter: none; }
  :root[data-dv-theme="dark"] .btn-close { background-image: none; }

  /* 導覽與互動元素不需要印出來 */
  .dv-topbar, .dv-sidebar, .dv-bottom-nav, .dv-more-menu, .offcanvas, .offcanvas-backdrop,
  .modal-backdrop, .dv-form-actions, .dv-pagination-actions, .dv-filter-shell,
  .dv-list-toolbar, .dv-page-actions, .dv-secondary-actions,
  .dv-primary-action, .dv-deal-actionbar, .dv-case-actionbar, .dv-loading-overlay, .dv-busy, .dv-theme-picker,
  .dv-gallery-nav { display: none !important; }

  .dv-app-shell { display: block !important; }
  .dv-main { max-width: none !important; padding: 0 !important; }
  .dv-card, .dv-section-card, .table-responsive {
    background: #ffffff !important;
    border-color: #cccccc !important;
    box-shadow: none !important;
    break-inside: avoid;
  }
  .table thead th { background: #f2f2f2 !important; color: #1a1a1a !important; }
  a { color: inherit !important; text-decoration: none !important; }
}

/* ===========================================================================
   主題選擇器（我的帳戶 → 顯示設定）
   =========================================================================== */
.dv-theme-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.dv-theme-option {
  position: relative;
  min-width: 0;
  min-height: 92px;
  margin: 0;
  padding: 13px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--dv-text);
  background: var(--dv-surface);
  border: 1px solid var(--dv-border-strong);
  border-radius: 12px;
  cursor: pointer;
  text-align: center;
  transition: border-color .12s ease, background-color .12s ease;
}
.dv-theme-option:hover { border-color: var(--dv-black); }
.dv-theme-option:has(input:checked) { color: var(--dv-red); background: var(--dv-red-soft); border-color: var(--dv-red); }
.dv-theme-option:has(input:focus-visible) { outline: 3px solid var(--dv-focus-ring-strong); outline-offset: 2px; }
.dv-theme-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}
.dv-theme-option svg {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dv-theme-option strong { font-size: 13px; font-weight: 800; }
@media (max-width: 359.98px) {
  .dv-theme-picker { grid-template-columns: 1fr; }
  .dv-theme-option { min-height: 0; flex-direction: row; justify-content: flex-start; text-align: left; }
}

/* 錯誤紀錄（管理員） -------------------------------------------------------
   例外訊息、堆疊、追蹤編號都是等寬字才讀得動；堆疊自己捲，不要把版面撐開。 */
.dv-error-log-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  overflow-wrap: anywhere;
}
.dv-error-log-table td { vertical-align: top; }
.dv-error-log-message { display: inline-block; max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.dv-error-log-stack {
  max-height: 460px;
  margin: 0;
  padding: 13px;
  overflow: auto;
  color: var(--dv-text);
  background: var(--dv-surface-muted);
  border: 1px solid var(--dv-border);
  border-radius: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.65;
  white-space: pre;
  tab-size: 4;
}

/* ---------- 財務確認：依車輛分組 ----------
   跟稽核專區同一個概念：是哪台車寫在分組的標題上，卡片本身只講這筆錢。
   會計仍在同一頁處理，所以標題右邊放「確認這台車」，頁面底下保留「確認本頁」。 */
.dv-review-vehicle-group { display: grid; gap: 8px; }
.dv-review-vehicle-head {
  min-width: 0;
  padding: 12px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  color: var(--dv-text);
  background: var(--dv-surface);
  border: 1px solid var(--dv-border);
  border-radius: 14px;
  box-shadow: var(--dv-shadow);
}
.dv-review-vehicle-copy { min-width: 0; display: grid; gap: 4px; }
.dv-review-vehicle-copy .dv-audit-board-title strong a { color: inherit; text-decoration: none; }
.dv-review-vehicle-copy .dv-audit-board-title strong a:hover { text-decoration: underline; }
.dv-review-group-confirm { flex: 0 0 auto; white-space: nowrap; }

/* ---------- 收訂／消訂報表：沒收訂金怎麼分 ----------
   一個共用彈窗，上面是這筆訂金的來龍去脈，中間是業務／公司的分配條，下面是金額與快速比例。
   顏色只用 token：業務用 info、公司用 teal，深色模式自動跟著換。 */
.dv-report-forfeit-action { margin-top: 6px; }
.dv-forfeit-heading { min-width: 0; display: grid; gap: 2px; }
.dv-forfeit-case {
  margin: 0 0 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
}
.dv-forfeit-case > div { min-width: 0; }
.dv-forfeit-case dt { color: var(--dv-muted); font-size: 12px; font-weight: 650; }
.dv-forfeit-case dd { margin: 2px 0 0; color: var(--dv-black); font-weight: 700; overflow-wrap: anywhere; }
.dv-forfeit-split {
  padding: 16px;
  background: var(--dv-surface-muted);
  border: 1px solid var(--dv-border);
  border-radius: 14px;
}
.dv-forfeit-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dv-forfeit-total span { color: var(--dv-muted); font-size: 13px; font-weight: 700; }
.dv-forfeit-total strong {
  color: var(--dv-black);
  font-size: 26px;
  font-weight: 850;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.dv-forfeit-bar {
  height: 12px;
  margin: 12px 0 14px;
  display: flex;
  overflow: hidden;
  background: var(--dv-border);
  border-radius: 999px;
}
.dv-forfeit-bar span { height: 100%; transition: width .18s ease; }
.dv-forfeit-bar .is-sales { background: var(--dv-info); }
.dv-forfeit-bar .is-company { background: var(--dv-teal); }
.dv-forfeit-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dv-forfeit-legend > div { min-width: 0; padding-left: 12px; display: grid; gap: 2px; border-left: 3px solid var(--dv-border-strong); }
.dv-forfeit-legend > .is-sales { border-left-color: var(--dv-info); }
.dv-forfeit-legend > .is-company { border-left-color: var(--dv-teal); }
.dv-forfeit-legend span, .dv-forfeit-legend small { color: var(--dv-muted); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dv-forfeit-legend strong { color: var(--dv-black); font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.dv-forfeit-previous { margin: 12px 0 0; padding-top: 10px; color: var(--dv-muted); font-size: 12px; border-top: 1px dashed var(--dv-border-strong); }
.dv-forfeit-editor { margin-top: 18px; }
.dv-forfeit-editor .dv-form-control { font-size: 18px; font-weight: 750; font-variant-numeric: tabular-nums; }
.dv-forfeit-range { width: 100%; margin-top: 14px; accent-color: var(--dv-info); cursor: pointer; }
.dv-forfeit-presets { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.dv-forfeit-preset {
  min-height: 34px;
  padding: 6px 13px;
  color: var(--dv-text);
  background: var(--dv-surface);
  border: 1px solid var(--dv-border-strong);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.dv-forfeit-preset:hover { border-color: var(--dv-black); }
.dv-forfeit-preset:focus-visible { outline: 2px solid var(--dv-info); outline-offset: 2px; }
.dv-forfeit-preset[aria-pressed="true"] { color: var(--dv-info); background: var(--dv-info-soft); border-color: var(--dv-info); }
.dv-forfeit-modal .dv-forfeit-month,
.dv-forfeit-modal [data-dv-forfeit-reason] { margin-top: 16px; }
@media (max-width: 575.98px) {
  .dv-forfeit-total strong { font-size: 22px; }
  .dv-forfeit-legend strong { font-size: 16px; }
}

/* 新增花費視窗（_VehicleCostCreateModal）：類型按鈕、金額標籤列的正負切換、拍照區、附件類別、
   收起來的備註、按鈕旁的送出去向。label 都在 .dv-field 裡，元件規則要疊兩個 class 才壓得過 .dv-field label。 */
.dv-cost-create-modal .modal-header { align-items: flex-start; }
.dv-cost-create-heading { min-width: 0; }
.dv-cost-create-vehicle { margin: 3px 0 0; color: var(--dv-muted); font-size: 13px; font-weight: 650; line-height: 1.4; overflow-wrap: anywhere; }
.dv-cost-create-vehicle[hidden] { display: none; }
.dv-cost-again-note { margin-bottom: 16px; }

.dv-cost-type-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(50px, 1fr)); gap: 6px; }
.dv-cost-type-picker .dv-cost-type-option { position: relative; min-width: 0; margin: 0; display: block; cursor: pointer; }
.dv-cost-type-option input,
.dv-cost-kind-option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.dv-cost-type-option span {
  min-height: 44px;
  padding: 6px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dv-text);
  background: var(--dv-input-bg);
  border: 1px solid var(--dv-input-border);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.2;
  text-align: center;
  overflow-wrap: anywhere;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.dv-cost-type-option:hover span { border-color: var(--dv-black); }
.dv-cost-type-option input:checked + span { color: var(--dv-selected-text); background: var(--dv-selected-surface); border-color: var(--dv-selected-surface); }
.dv-cost-type-option input:focus-visible + span,
.dv-cost-kind-option input:focus-visible + span { outline: 2px solid var(--dv-info); outline-offset: 2px; }

/* 38px＝精簡版正負切換的高度；日期那欄用同一個高度，兩個輸入框才會對齊。 */
.dv-field .dv-cost-label-row { min-height: 38px; margin-bottom: 7px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dv-field .dv-cost-label-row label { margin: 0; }
.dv-sign-toggle.is-compact { display: inline-grid; gap: 2px; padding: 2px; border-radius: 10px; }
.dv-sign-toggle.is-compact .dv-sign-btn { min-height: 32px; padding: 4px 10px; border-radius: 8px; font-size: 12.5px; }
.dv-wan-hint.is-negative { color: var(--dv-ink-warning); }

.dv-cost-dropzone {
  position: relative;
  min-height: 72px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--dv-surface-muted);
  border: 1.5px dashed var(--dv-control-border);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.dv-cost-dropzone:hover { border-color: var(--dv-black); }
.dv-cost-dropzone:focus-within { border-color: var(--dv-black); box-shadow: 0 0 0 4px var(--dv-focus-ring-strong); }
/* 檔案欄蓋滿整塊、透明：點哪裡都開選檔，桌機也可以直接把檔案拖進來。 */
.dv-cost-dropzone input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.dv-cost-dropzone-icon { width: 44px; height: 44px; flex: none; display: grid; place-items: center; color: var(--dv-black); background: var(--dv-surface); border: 1px solid var(--dv-border); border-radius: 12px; }
.dv-cost-dropzone-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dv-cost-dropzone-text { min-width: 0; display: grid; gap: 2px; }
.dv-cost-dropzone-text strong { color: var(--dv-black); font-size: 15px; font-weight: 800; }
.dv-cost-dropzone-text small { color: var(--dv-muted); font-size: 12px; line-height: 1.45; }
.dv-cost-create-modal .dv-preview-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.dv-cost-create-modal .dv-preview-grid:empty { display: none; }

.dv-cost-attachment-kind { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--dv-muted); font-size: 13px; font-weight: 700; }
.dv-cost-attachment-kind[hidden] { display: none; }
.dv-cost-kind-picker { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; background: var(--dv-bg); border: 1px solid var(--dv-border-strong); border-radius: 10px; }
.dv-cost-kind-picker .dv-cost-kind-option { position: relative; margin: 0; display: block; cursor: pointer; }
.dv-cost-kind-option span { min-height: 32px; padding: 4px 11px; display: flex; align-items: center; color: var(--dv-muted); border-radius: 8px; font-size: 13px; font-weight: 750; white-space: nowrap; }
.dv-cost-kind-option input:checked + span { color: var(--dv-selected-text); background: var(--dv-selected-surface); }

/* 不能叫 .dv-cost-note：那是花費卡片上備註文字的樣式（上框線、pre-wrap）。 */
.dv-cost-create-note { margin-bottom: 12px; }
.dv-cost-create-note summary { min-height: 40px; display: inline-flex; align-items: center; color: var(--dv-black); font-size: 14px; font-weight: 750; cursor: pointer; list-style: none; }
.dv-cost-create-note summary::-webkit-details-marker { display: none; }
.dv-cost-create-note summary:focus-visible { outline: 2px solid var(--dv-info); outline-offset: 2px; border-radius: 6px; }
.dv-cost-create-note-open { display: none; }
.dv-cost-create-note[open] summary { min-height: 0; margin-bottom: 7px; color: var(--dv-text); font-size: 13px; font-weight: 720; }
.dv-cost-create-note[open] .dv-cost-create-note-closed { display: none; }
.dv-cost-create-note[open] .dv-cost-create-note-open { display: inline; }
.dv-cost-create-note textarea { min-height: 84px; }

.dv-cost-create-modal .modal-footer { justify-content: space-between; }
.dv-cost-review-note { flex: 1 1 260px; min-width: 0; margin: 0; display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; line-height: 1.4; }
.dv-cost-review-note[hidden] { display: none; }
/* 圖示畫在 ::before（跟財務狀態圖示同一組線條），文字直接接在標籤後面。 */
.dv-cost-review-note::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--dv-cost-review-icon) center / contain no-repeat;
  mask: var(--dv-cost-review-icon) center / contain no-repeat;
}
.dv-cost-review-note.is-pending {
  --dv-cost-review-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  color: var(--dv-ink-warning);
}
.dv-cost-review-note.is-confirmed { --dv-cost-review-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E"); }
.dv-cost-review-note.is-confirmed { color: var(--dv-success); }
:where(:root:not([data-dv-theme="dark"])) .dv-cost-review-note.is-confirmed { color: var(--dv-ink-success); }
.dv-cost-create-actions { display: flex; gap: 8px; }
@media (max-width: 767.98px) {
  .dv-cost-create-actions { flex: 1 1 100%; }
  .dv-cost-create-actions > * { flex: 1 1 0; }
}