/* v3-modal.css — окна поверх экранов по дизайну 2.0, 1 в 1:
     правка       — design-canvas/ModalEdit.dc.html    (все .ovl > .modal платформы);
     подтверждение — design-canvas/ModalConfirm.dc.html (#m-ask: confirmDialog/promptDialog);
     фото          — design-canvas/ModalPhoto.dc.html   (#m-photo: фото водителя и объекта).
   Разметка окон прежняя: заголовок h2, строка .modal-sub, поля, .modal-foot с
   кнопками. Круглый «×» в шапке добавляет v3-modal.js. Только компьютер: на
   телефоне окно остаётся шторкой снизу (app.css, max-width: 860px). */
.v3m-x { display: none; }
@media (min-width: 861px) {
  /* ── Затемнение: без размытия, окно по центру (длинное — прокручивается сверху) ── */
  html .ovl { background: var(--t-scrim); -webkit-backdrop-filter: none; backdrop-filter: none; padding: 20px; }
  html .ovl.layer2 { background: rgba(20,22,28,.24); }
  html .ovl.on > .modal { margin: auto; }

  /* ── Окно правки ── */
  html .ovl .modal { position: relative; box-sizing: border-box; padding: 0 26px; border: 0; border-radius: 30px;
    background: var(--t-surface); color: var(--t-ink); box-shadow: 0 40px 90px -30px rgba(0,0,0,.5);
    -webkit-backdrop-filter: none; backdrop-filter: none; font-family: var(--t-font); }
  html .ovl .modal:not(:has(> h2)) { padding-top: 22px; }
  html .ovl .modal:not(:has(> .modal-foot)) { padding-bottom: 22px; }
  /* шапка: заголовок 22/750, под ним строка 13 серым, линия снизу */
  html .ovl .modal > h2 { margin: 0 -26px 20px; padding: 22px 70px 14px 26px; font: 750 22px/1.25 var(--t-font);
    letter-spacing: -.01em; color: var(--t-ink); border-bottom: 1px solid rgba(60,66,78,.1); }
  html .ovl .modal > h2:has(+ .modal-sub) { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
  html .ovl .modal > h2 + .modal-sub { margin: 0 -26px 20px; padding: 4px 70px 14px 26px; font-size: 13px;
    color: var(--t-ink-3); border-bottom: 1px solid rgba(60,66,78,.1); }
  /* круглый «×» — как в макете: 36, серый круг */
  html .ovl .modal > .v3m-x { position: absolute; top: 22px; right: 22px; z-index: 3; width: 36px; height: 36px; padding: 0;
    border: 0; border-radius: 18px; background: var(--t-nested); color: var(--t-ink-2); display: flex; align-items: center;
    justify-content: center; cursor: pointer; }
  html .ovl .modal > .v3m-x:hover { background: var(--t-hover); color: var(--t-ink); }
  /* низ: линия сверху, кнопки 40 справа */
  html .ovl .modal > .modal-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px;
    margin: 20px -26px 0; padding: 14px 22px 18px; border-top: 1px solid rgba(60,66,78,.1); background: none;
    position: static; box-shadow: none; }
  html .ovl .modal .modal-foot .btn { height: 40px; min-height: 40px; box-sizing: border-box; padding: 0 16px; border-radius: 20px;
    border: 1px solid var(--t-line); background: var(--t-surface); color: var(--t-ink); font: 600 14px var(--t-font);
    box-shadow: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; }
  html .ovl .modal .modal-foot .btn:hover { background: var(--t-row); }
  html .ovl .modal .modal-foot .btn.pri { padding: 0 20px; border: 0; background: var(--t-blue-grad); color: #fff;
    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); }
  html .ovl .modal .modal-foot .btn.pri:hover { background: linear-gradient(180deg, #5cb0ff, #1a7cea); }
  html .ovl .modal .modal-foot .btn.danger { color: var(--t-bad-ink); }
  html .ovl .modal .modal-foot .btn.pri.danger, html .ovl .modal .modal-foot .btn.danger:last-child {
    border: 0; color: #fff; background: linear-gradient(180deg, #f0525f, #c62a38);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 20px -6px rgba(198,42,56,.75); }
  html .ovl .modal .modal-foot .btn:disabled { opacity: .5; cursor: default; }

  /* ── Подтверждение (#m-ask): значок 48, заголовок 21, текст 14.5, кнопки справа ── */
  html #m-ask .modal { width: 440px; max-width: 440px !important; border-radius: 28px; padding: 24px 26px 0; }
  html #m-ask .modal > h2 { margin: 0; padding: 0; border: 0; font-size: 21px; display: flex; flex-direction: column; gap: 8px; }
  html #m-ask .modal > h2::before { content: ''; width: 48px; height: 48px; border-radius: 24px; flex-shrink: 0;
    background: rgba(10,95,208,.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%230a5fd0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3M12 17h.01'/%3E%3C/svg%3E") center / 22px no-repeat; }
  html #m-ask:has(#ask-ok.danger) .modal > h2::before {
    background: rgba(224,49,63,.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23e0313f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3C/svg%3E") center / 22px no-repeat; }
  html #m-ask .modal > h2 + .modal-sub { margin: 8px 0 0; padding: 0; border: 0; font-size: 14.5px; line-height: 1.45;
    color: var(--t-ink-2); white-space: pre-line; }
  html #m-ask #ask-input-fld { margin-top: 14px; }
  html #m-ask .modal > .modal-foot { margin: 8px -26px 0; padding: 16px 20px 20px; border-top: 0; }

  /* ── Фото (#m-photo): снимок слева на тёмном, справа панель 320 ── */
  html #m-photo .modal { width: 1100px; max-width: calc(100vw - 40px) !important; height: 760px; max-height: calc(100vh - 40px);
    padding: 0; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-rows: auto auto auto auto minmax(0, 1fr) auto; row-gap: 14px;
    background: linear-gradient(90deg, #111316 calc(100% - 320px), var(--t-surface) calc(100% - 320px));
    box-shadow: 0 40px 90px -30px rgba(0,0,0,.6); }
  html #m-photo .modal > h2 { grid-column: 2; grid-row: 1; margin: 0; padding: 22px 70px 0 22px; border: 0;
    font-size: 20px; line-height: 36px; }
  html #m-photo #photo-modal-body { display: contents; }
  html #m-photo #photo-modal-body > img { grid-column: 1; grid-row: 1 / -1; width: 100%; height: 100%; min-height: 0;
    object-fit: contain; border-radius: 0 !important; background: linear-gradient(170deg, #6d7a89, #2b323b); }
  html #m-photo #photo-modal-body > :not(img) { grid-column: 2; margin: 0 !important; padding: 0 22px; font-size: 14px;
    color: var(--t-ink); }
  /* подпись к снимку (время, координаты) — плашкой на фото, моноширинно */
  html #m-photo #photo-modal-body > .muted { grid-column: 1; grid-row: -2; align-self: end; justify-self: start; z-index: 1;
    margin: 18px !important; padding: 8px 12px; border-radius: 12px; background: rgba(0,0,0,.55); color: #fff;
    font: 600 14px/1.5 ui-monospace, Menlo, monospace; }
  html #m-photo .modal > .modal-foot { grid-column: 2; grid-row: -2; margin: 0; padding: 0 22px 22px; border: 0;
    flex-direction: column; align-items: stretch; gap: 8px; }
  html #m-photo .modal > .modal-foot .btn { justify-content: flex-start; padding: 0 18px; box-shadow: 0 1px 2px rgba(22,26,36,.06); }
}
[data-theme="dark"] .ovl .modal > h2, [data-theme="dark"] .ovl .modal > h2 + .modal-sub,
[data-theme="dark"] .ovl .modal > .modal-foot { border-color: var(--t-line); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .ovl .modal > h2, :root:not([data-theme]) .ovl .modal > h2 + .modal-sub,
  :root:not([data-theme]) .ovl .modal > .modal-foot { border-color: var(--t-line); }
}
/* Телефон: окно — шторка снизу (app.css). Кнопки низа делят ширину поровну,
   а если длинная подпись («Отменить заявку») на узком экране не влезает —
   кнопки встают друг под другом, а не вылезают за край. */
@media (max-width: 860px) {
  html .ovl .modal .modal-foot { flex-wrap: wrap; }
  html .ovl .modal .modal-foot .btn { flex: 1 1 0; min-width: max-content; justify-content: center; text-align: center; }
}

/* Кнопки в окнах — подпись по центру. Кнопка — flex, и без этого «Создать» /
   «Отмена» в строке формы (.frow, окно договора и др.) прижимались к левому краю. */
html .ovl .modal .btn { justify-content: center; }

/* ── Редактор контактов (ctRender в app.js) — как в грузовых заявках полуавтомата:
   поле «Иван 8-999-888-77-66» + квадратная «×», под ними «+ Ещё контакт» ── */
.ct-list { display: flex; flex-direction: column; gap: 8px; }
.ct-row { display: flex; gap: 8px; align-items: center; }
.ct-row .inp { flex: 1; width: auto; min-width: 0; box-sizing: border-box; margin: 0; }
.ct-x { width: 40px; height: 40px; flex-shrink: 0; border-radius: 13px; border: 1px solid var(--t-line); background: var(--t-nested);
  color: var(--t-ink-2); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0;
  transition-property: background-color, color, scale; transition-duration: .15s; }
.ct-x:hover:not(:disabled) { background: var(--t-bad-soft); color: var(--t-bad-ink); }
.ct-x:active:not(:disabled) { scale: .96; }
.ct-x:disabled { opacity: .35; cursor: default; }
html .ct-add { margin: 10px 0 4px; display: inline-flex; align-items: center; gap: 6px; }

/* ── Сканы договора в окне договора ── */
.ct-flist { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 8px; }
.ct-frow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 12px; border-radius: 12px;
  background: var(--t-nested); font-size: 14px; }
.ct-fname { font-weight: 650; color: var(--t-blue); text-decoration: none; min-width: 0; overflow-wrap: anywhere; flex: 1 1 160px; }
.ct-fname:hover { text-decoration: underline; }
.ct-fact { border: 0; background: none; padding: 4px 2px; font: inherit; font-size: 13px; font-weight: 650; color: var(--t-blue);
  cursor: pointer; text-decoration: none; }
.ct-fact.danger { color: var(--t-bad-ink); }
html .ct-fadd { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }