/* ── Мобильная карточка объекта (.mdt-*) ─────────────────────────
   Договор, коммерческое предложение, этикетки QR. Разметка — components/mobile-detail.js.
   Плоский список разделов с разделителями вместо стопки карточек: на телефоне важнее ряд фактов и
   крупная цель для пальца, чем рамки. Все цвета — токены темы, поэтому тёмная тема работает без правок. */

.mdt { display: flex; flex-direction: column; gap: 16px; padding: 12px 16px calc(96px + env(safe-area-inset-bottom, 0px)); min-width: 0; }
.mdt * { box-sizing: border-box; }

/* Шапка */
.mdt-head { display: flex; flex-direction: column; gap: 6px; }
.mdt-back { align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; margin-left: -4px; padding: 0 4px; font-size: var(--text-sm); color: var(--accent-primary); text-decoration: none; }
.mdt-code { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .04em; color: var(--text-muted); }
.mdt-title { margin: 0; font-family: var(--font-display); font-size: 20px; line-height: 1.25; font-weight: var(--font-bold); color: var(--text-primary); overflow-wrap: anywhere; text-wrap: balance; }
.mdt-head__row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.mdt-amount { font-family: var(--font-display); font-size: 18px; font-weight: var(--font-semibold); font-variant-numeric: tabular-nums; color: var(--text-primary); }

/* Факты: подпись над значением, по два в ряд только когда значение короткое */
.mdt-facts { margin: 0; display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--border-default); }
.mdt-fact { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--border-subtle); }
.mdt-fact dt { flex: none; font-size: var(--text-sm); color: var(--text-muted); }
.mdt-fact dd a { color: var(--accent-primary); }
.mdt-fact dd { margin: 0; min-width: 0; text-align: right; font-size: var(--text-base); color: var(--text-primary); overflow-wrap: anywhere; }

/* Предупреждения (обязательства): ссылки-строки с точкой статуса */
.mdt-alerts { display: flex; flex-direction: column; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); }
.mdt-alert { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; color: var(--text-primary); text-decoration: none; font-size: var(--text-sm); }
button.mdt-alert { width: 100%; border: 0; background: none; font: inherit; font-size: var(--text-sm); text-align: left; cursor: pointer; }
.mdt-alert + .mdt-alert { border-top: 1px solid var(--border-subtle); }
.mdt-alert__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); }
.mdt-alert__dot--bad { background: var(--status-danger, var(--color-danger)); }
.mdt-alert__dot--warn { background: var(--status-warning, var(--color-warning)); }
.mdt-alert--ok { color: var(--status-success, var(--color-success)); }

/* Разделы-«гармошка» */
.mdt-secs { border-top: 1px solid var(--border-default); }
.mdt-sec { border-bottom: 1px solid var(--border-default); scroll-margin-top: 8px; }
.mdt-sec__sum { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 52px; cursor: pointer; font-size: var(--text-md); font-weight: var(--font-semibold); color: var(--text-primary); }
.mdt-sec__sum::-webkit-details-marker { display: none; }
.mdt-sec__sum::after { content: ''; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: rotate(45deg); transition: transform var(--transition-fast, .15s); }
.mdt-sec[open] > .mdt-sec__sum::after { transform: rotate(-135deg); }
.mdt-sec__sum:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.mdt-sec__count { min-width: 22px; padding: 1px 7px; border-radius: var(--radius-full); background: var(--accent-surface); color: var(--accent-primary); font-size: var(--text-xs); font-weight: var(--font-semibold); text-align: center; font-variant-numeric: tabular-nums; }
.mdt-sec__body { display: flex; flex-direction: column; gap: 10px; padding: 0 0 16px; }
.mdt-sec__action .btn { width: 100%; min-height: 44px; }
.mdt-empty { margin: 0; padding: 4px 0; font-size: var(--text-sm); color: var(--text-muted); }

/* Запись внутри раздела (позиция, счёт, платёж, подписант) */
.mdt-rec { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); }
.mdt-rec__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.mdt-rec__main { min-width: 0; }
.mdt-rec__title { font-size: var(--text-base); font-weight: var(--font-medium); color: var(--text-primary); overflow-wrap: anywhere; }
.mdt-rec__sub { margin-top: 2px; font-size: var(--text-xs); color: var(--text-muted); overflow-wrap: anywhere; }
.mdt-rec__rows { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.mdt-rec__rows > div { display: flex; justify-content: space-between; gap: 12px; font-size: var(--text-sm); }
.mdt-rec__rows dt { flex: none; color: var(--text-muted); }
.mdt-rec__rows dd { margin: 0; min-width: 0; text-align: right; color: var(--text-primary); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.mdt-rec__actions { display: flex; gap: 8px; }
.mdt-rec__actions .btn { flex: 1; min-height: 44px; }

/* Свободный абзац внутри раздела (состояние согласования, примечание) */
.mdt-note { margin: 0; font-size: var(--text-sm); line-height: 1.5; color: var(--text-secondary); }
.mdt-note a { color: var(--accent-primary); font-weight: var(--font-semibold); }

/* Нижняя панель действий — над нижней навигацией */
.mdt-bar { position: fixed; left: 0; right: 0; bottom: calc(58px + env(safe-area-inset-bottom, 0px)); z-index: 205; display: flex; gap: 10px; padding: 10px 16px; background: var(--surface-elevated); border-top: 1px solid var(--border-default); }
body:not(.has-mobile-bottom-nav) .mdt-bar { bottom: env(safe-area-inset-bottom, 0px); }
.mdt-bar__main, .mdt-bar__more { min-height: 48px; border-radius: var(--radius-md); font: inherit; font-size: var(--text-md); font-weight: var(--font-semibold); cursor: pointer; }
.mdt-bar__main { flex: 1; border: 0; background: var(--accent-primary); color: var(--text-inverse); }
.mdt-bar__main:active { background: var(--accent-pressed); }
.mdt-bar__main--danger { background: var(--status-danger, var(--color-danger)); }
.mdt-bar__more { flex: 0 0 auto; min-width: 96px; padding: 0 16px; border: 1px solid var(--border-strong); background: var(--surface-primary); color: var(--text-primary); }
.mdt-bar__more:only-child { flex: 1; }
.mdt-bar button:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }

/* Лист «Ещё» */
.mdt-menu { display: flex; flex-direction: column; padding: 0 0 8px; }
.mdt-menu__item { min-height: 52px; padding: 0 4px; border: 0; border-bottom: 1px solid var(--border-subtle); background: none; font: inherit; font-size: var(--text-md); text-align: left; color: var(--text-primary); cursor: pointer; }
.mdt-menu__item:last-child { border-bottom: 0; }
a.mdt-menu__item { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-decoration: none; }
.mdt-menu__hint { font-size: var(--text-sm); color: var(--text-muted); }
.mdt-menu__item--danger { color: var(--status-danger, var(--color-danger)); }

/* Выбор из списка флажками (согласующие) и общая крупная форма на телефоне */
.mdt-pick { display: flex; flex-direction: column; max-height: 40vh; overflow-y: auto; border: 1px solid var(--border-default); border-radius: var(--radius-md); }
.mdt-pick__row { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 12px; font-size: var(--text-base); cursor: pointer; }
.mdt-pick__row + .mdt-pick__row { border-top: 1px solid var(--border-subtle); }
.mdt-pick__row input { flex: none; width: 20px; height: 20px; accent-color: var(--accent-primary); }
.mdt-pick__sub { display: block; font-size: var(--text-xs); color: var(--text-muted); }

/* Этикетки QR: строка с флажком, крупным кодом и действиями */
.mdt-qr { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); }
.mdt-qr__check { width: 22px; height: 22px; accent-color: var(--accent-primary); }
.mdt-qr__main { min-width: 0; }
.mdt-qr__name { font-size: var(--text-base); font-weight: var(--font-medium); overflow-wrap: anywhere; }
.mdt-qr__inv { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--accent-primary); }
.mdt-qr__loc { font-size: var(--text-xs); color: var(--text-muted); }
.mdt-qr__acts { grid-column: 1 / -1; display: flex; gap: 8px; }
.mdt-qr__acts .btn { flex: 1; min-height: 44px; }
.mdt-qrshow { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 4px 0 8px; }
.mdt-qrshow__code { width: min(78vw, 300px); aspect-ratio: 1; padding: 8px; background: #fff; border-radius: var(--radius-md); border: 1px solid var(--border-default); }
.mdt-qrshow__code svg { width: 100%; height: 100%; display: block; }
.mdt-search { width: 100%; min-height: 44px; }
.mdt-selbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: var(--text-sm); color: var(--text-muted); }
.mdt-selbar button { min-height: 44px; padding: 0 4px; border: 0; background: none; font: inherit; color: var(--accent-primary); font-weight: var(--font-semibold); cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .mdt-sec__sum::after { transition: none; }
}