/* v3-money.css — «Деньги» по design-canvas/Money.dc.html (1 в 1). */
.v3d { display: flex; flex-direction: column; gap: 14px; height: 100%; min-height: 0; }

/* ── Шапка ── */
.v3d-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 16px 16px 16px 24px; flex-shrink: 0; min-height: 74px;
  box-sizing: border-box; }
.v3d-head .v3-h1 { flex-shrink: 0; }
.v3d-tabs { display: flex; gap: 3px; padding: 3px; border-radius: 17px; background: var(--t-nested); border: 1px solid var(--t-line); }
.v3d-tabs button { white-space: nowrap; border: 0; display: flex; align-items: center; gap: 7px; padding: 7px 8px 7px 13px;
  border-radius: 14px; font: inherit; font-size: 13.5px; font-weight: 650; background: transparent; color: var(--t-ink-2); cursor: pointer; }
.v3d-tabs button.nc { padding: 7px 14px 7px 13px; }
.v3d-tabs button.on { background: var(--t-surface); color: var(--t-blue-ink); box-shadow: 0 1px 3px rgba(22,26,36,.16); }
.v3d-cnt { min-width: 22px; height: 22px; padding: 0 7px; box-sizing: border-box; border-radius: 11px; font-size: 12px; font-weight: 750;
  display: flex; align-items: center; justify-content: center; background: var(--t-nested); color: var(--t-ink-2); }
.v3d-cnt.red { background: #e0313f; color: #fff; }
.v3d-per { position: relative; }
.v3d-per .dd-menu { left: auto !important; right: 0 !important; min-width: 220px !important; }
.v3d-pbtn { display: flex; align-items: center; gap: 7px; white-space: nowrap; height: 40px; padding: 0 14px; border-radius: 20px;
  border: 1px solid var(--t-line); background: var(--t-surface); color: var(--t-ink); font: inherit; font-size: 14px; font-weight: 600;
  box-shadow: 0 1px 2px rgba(22,26,36,.06); cursor: pointer; }
.v3d-pbtn:hover { background: var(--t-row); }

.v3d-main { flex-grow: 1; min-height: 0; display: flex; gap: 14px; }
.v3d-main.is-empty { display: block; }
.v3d-main.is-empty .v3d-list { height: 100%; }
.v3d-main.is-empty .v3d-card { display: none; }

/* ── Список ── */
.v3d-list { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; container: v3dlist / inline-size; }
.v3d-lin { padding: 18px 16px; display: flex; flex-direction: column; gap: 14px; min-height: 0; flex-grow: 1; }
/* плитки: в ряд, в узком списке — по две; число не режется, а чуть уменьшается под ширину плитки */
.v3d-tiles { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; flex-shrink: 0; }
.v3d-tile { min-width: 0; padding: 14px 16px; border-radius: 22px; border: 1px solid var(--t-line);
  display: flex; flex-direction: column; gap: 3px; container-type: inline-size; }
.v3d-tile .k { font-size: 12.5px; font-weight: 700; color: var(--t-ink-3); }
.v3d-tile .v { font-size: clamp(17px, 18.2cqi, 26px); line-height: 1.25; font-weight: 760; letter-spacing: -.03em; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.v3d-tile .n { font-size: 12.5px; color: var(--t-ink-3); }
.v3d-tile.bad { background: rgba(224,49,63,.07); border: 1.5px solid rgba(224,49,63,.3); }
.v3d-tile.bad .k { color: #b3202e; }
.v3d-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex-shrink: 0; }
.v3d-chips button { white-space: nowrap; border-radius: 15px; padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 650;
  border: 1px solid var(--t-line); background: var(--t-nested); color: var(--t-ink); cursor: pointer; }
.v3d-chips button.on { border-color: var(--t-blue); background: var(--t-blue); color: #fff; }
.v3d-cols, .v3d-row { display: grid; grid-template-columns: 70px minmax(0, 1fr) 64px 70px 150px; gap: 12px; }
.v3d-pcols, .v3d-prow { grid-template-columns: 70px minmax(0, 1fr) 64px 96px 150px; }
.v3d-cols { padding: 0 17px; font-size: 11.5px; font-weight: 700; color: var(--t-ink-3); flex-shrink: 0; }
.v3d-rows { flex-grow: 1; overflow: auto; display: flex; flex-direction: column; gap: 6px; padding: 2px; scrollbar-width: none; }
.v3d-rows::-webkit-scrollbar { display: none; }
.v3d-row { flex-shrink: 0; width: 100%; align-items: center; padding: 12px 16px; border-radius: 20px; text-align: left;
  color: var(--t-ink); background: var(--t-surface); border: 1px solid var(--t-line); margin: 1px; box-sizing: border-box;
  cursor: pointer; font: inherit; }
.v3d-row:hover { background: var(--t-row); }
.v3d-row.on { background: var(--t-blue-soft); border: 2px solid var(--t-blue); margin: 0; }
.v3d-num { font-size: 12px; font-weight: 750; padding: 2px 8px; border-radius: 8px; background: #1c1c1e; color: #fff; justify-self: start;
  white-space: nowrap; font-variant-numeric: tabular-nums; max-width: 100%; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; }
.v3d-rt { display: flex; flex-direction: column; min-width: 0; }
.v3d-rt b { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v3d-rt span { font-size: 12.5px; color: var(--t-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v3d-rd { font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; }
.v3d-ra { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.v3d-mc { font-size: 11.5px; padding: 2px 8px; }
.v3d-rs { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; min-width: 0; }
.v3d-rs > span:last-child { font-size: 12px; color: var(--t-ink-3); white-space: nowrap; }
.v3d .v3-pill.plan { background: rgba(10,95,208,.1); color: var(--t-blue-ink); }
.v3d .v3-pill.v3d-today { background: rgba(255,178,60,.2); color: #6e4300; }
.v3d-empty { color: var(--t-ink-3); padding: 18px 8px; text-align: center; }
.v3d-empty-state { width: min(100%, 560px); margin: auto; padding: 28px 20px; display: flex; flex-direction: column;
  align-items: center; gap: 10px; text-align: center; color: var(--t-ink-2); }
.v3d-empty-state b { color: var(--t-ink); font-size: 18px; font-weight: 700; text-wrap: balance; }
.v3d-empty-state > span { max-width: 46ch; line-height: 1.5; text-wrap: pretty; }
.v3d-empty-state button, .v3d-load-error button { min-height: 42px; margin-top: 4px; padding: 0 16px; border: 0;
  border-radius: 15px; background: var(--t-blue); color: white; font: inherit; font-size: 14px; font-weight: 650; cursor: pointer;
  transition-property: background-color, transform; transition-duration: 150ms; }
.v3d-empty-state button:hover, .v3d-load-error button:hover { background: var(--t-blue-ink); }
.v3d-empty-state button:active, .v3d-load-error button:active { transform: scale(.96); }
.v3d-load-error { margin: auto; padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center; color: var(--t-ink-2); }
.v3d-load-error b { color: var(--t-ink); font-size: 18px; }
.v3d-load-error > span { max-width: 50ch; text-wrap: pretty; }

/* ── Карточка ── */
.v3d-card { width: clamp(300px, 33.05%, 440px); flex-shrink: 0; display: flex; flex-direction: column; overflow: hidden;
  container: v3dcard / inline-size; }
.v3d-cempty { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--t-ink-3); }
.v3d-chd { padding: 22px 22px 16px; display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid rgba(60,66,78,.1); }
.v3d-cp { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.v3d-cp > span:last-child { font-size: 12.5px; color: var(--t-ink-3); }
.v3d-chd h2 { margin: 4px 0 0; font-size: 23px; font-weight: 750; letter-spacing: -.02em; cursor: pointer; overflow-wrap: break-word; }
.v3d-cl { color: var(--t-ink-2); }
.v3d-cbd { padding: 16px 22px; display: flex; flex-direction: column; gap: 16px; overflow: auto; flex-grow: 1; }
.v3d-steps { display: flex; flex-direction: column; }
.v3d-step { display: flex; gap: 12px; }
.v3d-sl { display: flex; flex-direction: column; align-items: center; width: 16px; flex-shrink: 0; }
.v3d-sd { width: 14px; height: 14px; box-sizing: border-box; border-radius: 7px; margin-top: 2px; background: var(--t-surface);
  border: 2px solid var(--t-line-2); }
.v3d-step.on .v3d-sd { border: 0; background: var(--dc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dc) 20%, transparent); }
.v3d-sline { width: 2px; flex-grow: 1; margin: 3px 0; background: var(--t-line); }
.v3d-sb { display: flex; flex-direction: column; padding-bottom: 12px; flex-grow: 1; min-width: 0; }
.v3d-st { display: flex; gap: 8px; }
.v3d-st b { font-weight: 550; color: var(--t-ink-3); flex-grow: 1; }
.v3d-step.on .v3d-st b { font-weight: 700; color: var(--t-ink); }
.v3d-step.bad .v3d-st b { color: #b3202e; }
.v3d-st span { font-size: 12.5px; font-weight: 600; color: var(--t-ink-3); white-space: nowrap; }
.v3d-ss { font-size: 12.5px; color: var(--t-ink-3); }
.v3d-plan { display: flex; flex-direction: column; gap: 8px; }
.v3d-bl { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--t-ink-3); }
.v3d-opt { display: flex; align-items: center; gap: 12px; text-align: left; padding: 11px 14px; border-radius: 18px;
  color: var(--t-ink); border: 1px solid var(--t-line); background: var(--t-surface); margin: 1px; box-sizing: border-box;
  font: inherit; cursor: pointer; width: calc(100% - 2px); }
.v3d-opt:hover { background: var(--t-row); }
.v3d-opt.on { border: 2px solid var(--t-blue); background: var(--t-blue-soft); margin: 0; width: 100%; }
.v3d-od { width: 10px; height: 10px; border-radius: 5px; flex-shrink: 0; }
.v3d-ot { display: flex; flex-direction: column; flex-grow: 1; min-width: 0; }
.v3d-ot b { font-weight: 700; }
.v3d-ot span { font-size: 12.5px; color: var(--t-ink-2); }
.v3d-ok { font-weight: 760; white-space: nowrap; font-variant-numeric: tabular-nums; }
.v3d-wait { font-size: 13px; color: var(--t-ink-3); padding: 2px 2px; }
.v3d-manual { display: flex; gap: 8px; }
.v3d-manual > * { flex: 1 1 0; min-width: 0; }
.v3d-note { padding: 12px 14px; border-radius: 18px; background: var(--t-nested); font-size: 13px; color: var(--t-ink-2); line-height: 1.45; }
.v3d-sum { display: flex; flex-direction: column; gap: 4px; }
.v3d-sum b { font-size: 26px; font-weight: 760; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.v3d-kv { display: flex; flex-direction: column; border-radius: 18px; border: 1px solid var(--t-line); overflow: hidden; }
.v3d-kv > div { display: flex; gap: 12px; padding: 10px 14px; border-bottom: 1px solid rgba(60,66,78,.08); font-size: 13.5px; }
.v3d-kv > div:last-child { border-bottom: 0; }
.v3d-kv span { color: var(--t-ink-3); flex-grow: 1; }
.v3d-kv b { font-weight: 650; text-align: right; }
.v3d-foot { padding: 14px 18px 16px; border-top: 1px solid rgba(60,66,78,.1); display: flex; flex-wrap: wrap; gap: 8px; flex-shrink: 0; }
.v3d-go { display: flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; height: 40px; padding: 0 20px;
  border: 0; border-radius: 20px; background: var(--t-blue-grad); color: #fff; font: inherit; font-size: 14.5px; font-weight: 650;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 8px 20px -6px rgba(10,95,208,.85); cursor: pointer; }
.v3d-go:hover { background: linear-gradient(180deg, #5cb0ff, #1a7cea); }
.v3d-go:disabled { opacity: .6; cursor: default; }
.v3d-off { white-space: nowrap; height: 40px; padding: 0 16px; border-radius: 20px; border: 1px solid rgba(163,22,42,.25);
  background: rgba(198,42,56,.09); color: #a3162a; font: inherit; font-size: 14px; font-weight: 650; cursor: pointer; }
.v3d-off:hover { background: rgba(198,42,56,.15); }
.v3d-sec { white-space: nowrap; height: 40px; padding: 0 16px; border-radius: 20px; border: 1px solid var(--t-line);
  background: var(--t-surface); color: var(--t-ink); font: inherit; font-size: 14px; font-weight: 600;
  box-shadow: 0 1px 2px rgba(22,26,36,.06); cursor: pointer; }
.v3d-sec:hover { background: var(--t-row); }
/* узкая карточка (узкий компьютер): кнопки внизу компактнее, чтобы «Поставить выезд» и «Списать» стояли в ряд */
@container v3dcard (max-width: 340px) {
  .v3d-chd { padding: 20px 18px 14px; }
  .v3d-cbd { padding: 14px 18px; }
  .v3d-foot { padding: 12px 14px 14px; }
  .v3d-go, .v3d-off, .v3d-sec { padding: 0 14px; }
}
/* ── Список подстраивается под свою ширину ── */
@container v3dlist (max-width: 639px) {
  .v3d-tiles { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v3d-tile:nth-child(3):last-child { grid-column: 1 / -1; }
}
/* узкий список: строка в две линии — объект и статус сверху, номер, дата и машина (сумма) снизу */
@container v3dlist (max-width: 719px) {
  .v3d-cols { display: none; }
  .v3d-row, .v3d-prow { grid-template-columns: auto auto minmax(0, 1fr) auto; row-gap: 6px;
    grid-template-areas: "rt rt rt rs" "num rd c4 rs"; }
  .v3d-row > .v3d-num { grid-area: num; }
  .v3d-row > .v3d-rt { grid-area: rt; }
  .v3d-row > .v3d-rd { grid-area: rd; }
  .v3d-row > :nth-child(4) { grid-area: c4; justify-self: start; }
  .v3d-row > .v3d-rs { grid-area: rs; align-items: flex-end; text-align: right; align-self: start; }
}

[data-theme="dark"] .v3d-num { background: #3a3d45; }
[data-theme="dark"] .v3d-off { color: #ff9aa2; border-color: rgba(255,90,100,.3); background: rgba(255,90,100,.12); }
[data-theme="dark"] .v3d-tile.bad .k { color: #ff9aa2; }
[data-theme="dark"] .v3d .v3-pill.v3d-today { color: #ffcf85; background: rgba(255,178,60,.14); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .v3d-num { background: #3a3d45; }
  :root:not([data-theme]) .v3d-off { color: #ff9aa2; border-color: rgba(255,90,100,.3); background: rgba(255,90,100,.12); }
}

/* ══ Телефон: MobMoney.dc.html, 1 в 1 ══ */
@media (max-width: 860px) {
  .v3xd { display: flex; flex-direction: column; color: var(--t-ink); font-size: 15px; }
  .v3xd.has-act { padding-bottom: 92px; }
  .v3xd-top { padding: 16px 16px 10px; display: flex; flex-direction: column; gap: 8px; }
  .v3xd-title { font-size: 30px; font-weight: 760; letter-spacing: -.03em; line-height: 1.1; }
  .v3xd-body { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 10px; }
  .v3xd-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex-shrink: 0; }
  .v3xd-chips::-webkit-scrollbar { display: none; }
  .v3xd-chips button { flex-shrink: 0; white-space: nowrap; height: 36px; padding: 0 13px; border-radius: 18px; font: inherit;
    font-size: 14px; font-weight: 650; background: var(--t-surface); border: 1px solid var(--t-line); color: var(--t-ink); cursor: pointer; }
  .v3xd-chips button.on { background: var(--t-blue); color: #fff; border: 0; }
  /* широкий телефон и планшет (600–860): строки в две колонки, плитки и пустые подсказки — во всю ширину */
  .v3xd-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 10px; align-items: start; }
  .v3xd-list > :not(.v3xd-row) { grid-column: 1 / -1; }
  .v3xd-wait { color: var(--t-ink-3); padding: 18px 8px; text-align: center; }
  .v3xd .v3d-empty-state { grid-column: 1 / -1; width: auto; min-height: 180px; padding: 24px 18px; border-radius: 20px;
    background: var(--t-surface); }

  .v3xd-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .v3xd-tile { padding: 13px 14px; border-radius: 20px; background: var(--t-surface); border: 1px solid var(--t-line);
    display: flex; flex-direction: column; gap: 2px; min-width: 0; container-type: inline-size; }
  .v3xd-tile .k { font-size: 13px; font-weight: 700; color: var(--t-ink-3); }
  .v3xd-tile .v { font-size: clamp(16px, 20cqi, 24px); line-height: 1.25; font-weight: 760; letter-spacing: -.03em; white-space: nowrap;
    font-variant-numeric: tabular-nums; }
  .v3xd-tile .v:has(#v3d-psum) { font-size: clamp(15px, 15.5cqi, 24px); }   /* сумма бывает и семизначной — целиком */
  .v3xd-tile .n { font-size: 12.5px; color: var(--t-ink-2); }
  .v3xd-tile.bad { background: rgba(224,49,63,.07); border: 1.5px solid rgba(224,49,63,.3); }
  .v3xd-tile.bad .k { color: #b3202e; }

  /* строка-карточка; выбранная — синяя рамка 2px (тенью, чтобы строка не прыгала) */
  .v3xd-row { display: flex; flex-direction: column; gap: 6px; padding: 13px 14px; border-radius: 20px; background: var(--t-surface);
    color: var(--t-ink); border: 0; font: inherit; text-align: left; width: 100%; box-sizing: border-box; cursor: pointer; }
  .v3xd-row.on { box-shadow: inset 0 0 0 2px var(--t-blue); }
  .v3xd-row:active { background: var(--t-row); }
  .v3xd-r1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .v3xd-num { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 9px; white-space: nowrap; flex-shrink: 0;
    background: #1c1c1e; color: #fff; font-variant-numeric: tabular-nums; }
  .v3xd-name { font-size: 16px; font-weight: 700; flex-grow: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .v3xd-mc { font-size: 12px; padding: 2px 8px; flex-shrink: 0; }
  .v3xd-amt { font-size: 15px; font-weight: 700; white-space: nowrap; flex-shrink: 0; font-variant-numeric: tabular-nums; }
  .v3xd-r2 { font-size: 13.5px; color: var(--t-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .v3xd-r3 { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .v3xd-r3 > span:last-child { font-size: 13px; color: var(--t-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .v3xd .v3-pill.plan { background: rgba(10,95,208,.1); color: var(--t-blue-ink); }
  .v3xd .v3-pill.v3d-today { background: rgba(255,178,60,.2); color: #6e4300; }

  /* кнопка действия — над нижними вкладками (bottom уточняет v3-money.js по высоте вкладок) */
  .v3xd-act { position: fixed; left: 0; right: 0; bottom: calc(61px + env(safe-area-inset-bottom, 0px)); z-index: 40;
    padding: 10px 14px 26px; background: var(--t-nested); display: flex; flex-direction: column; gap: 8px; }
  .v3xd-act[hidden] { display: none; }
  .v3xd-go { display: flex; align-items: center; justify-content: center; gap: 8px; height: 56px; padding: 0 20px; border: 0;
    border-radius: 28px; background: var(--t-blue-grad); color: #fff; font: inherit; font-size: 17px; font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 8px 20px -6px rgba(10,95,208,.85); cursor: pointer; min-width: 0; }
  .v3xd-go span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* шторка «Поставить выезд» */
  .v3xd-sheet { display: flex; flex-direction: column; gap: 12px; }
  .v3xd-sheet .v3d-plan > .v3d-bl { display: none; }   /* то же, что заголовок шторки */
  .v3xd-sheet .v3d-opt { min-height: 56px; }
  .v3xd-sheet .v3d-manual > * { min-height: 44px; }
  .v3xd-link { align-self: flex-start; border: 0; background: none; padding: 12px 2px; margin: -8px 0 -12px; font: inherit;
    font-size: 15px; font-weight: 650; color: var(--t-blue); cursor: pointer; }
}
[data-theme="dark"] .v3xd-num { background: #3a3d45; }
[data-theme="dark"] .v3xd-tile.bad .k { color: #ff9aa2; }
[data-theme="dark"] .v3xd .v3-pill.v3d-today { color: #ffcf85; background: rgba(255,178,60,.14); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .v3xd-num { background: #3a3d45; }
  :root:not([data-theme]) .v3xd-tile.bad .k { color: #ff9aa2; }
}