/*
 * UI v2 — the quotes screens (design "Mondigo képernyőterv 3": 20 Ajánlatok,
 * 21–21f Ajánlat részletei, 22 Beütemezés, 25 / 25b Kész a munka, 50 desktop).
 * Served and injected only with QQ_UI_V2; every selector is scoped under
 * html.ui-v2 (tools/ui-v2-flag-contract_test).
 *
 * Money is never animated. The only motion is the sheet's slide-in (0.22s),
 * switched off under prefers-reduced-motion.
 */

/* ---- the v2 screens replace the established quotes view ---- */
/* The legacy header, summary, follow-up box, search, triage list and the old
   detail panel stay in the DOM (their handlers keep working) but never show. */
html.ui-v2 body.v2-quotes #view-quotes > :where(:not(#v2-quotes):not(#v2q-sheet-host):not(#v2q-live)) { display: none !important; }
html.ui-v2 body.v2-quotes #quote-detail { display: none !important; }
html.ui-v2 body.v2-quotes #view-quotes { background: var(--mg-bg-page); color: var(--mg-text-primary); }
html.ui-v2 body.v2-quotes main:has(> #view-quotes:not(.hidden)) { padding: 0; }
html.ui-v2 .v2-quotes-root { display: block; }
html.ui-v2 #v2-quotes,
html.ui-v2 #v2-quotes *,
html.ui-v2 #v2q-sheet-host,
html.ui-v2 #v2q-sheet-host * { box-sizing: border-box; }
html.ui-v2 #v2-quotes button,
html.ui-v2 #v2-quotes input,
html.ui-v2 #v2-quotes textarea,
html.ui-v2 #v2q-sheet-host button,
html.ui-v2 #v2q-sheet-host input,
html.ui-v2 #v2q-sheet-host textarea { font: inherit; }
html.ui-v2 #v2-quotes svg,
html.ui-v2 #v2q-sheet-host svg { flex-shrink: 0; }
html.ui-v2 #v2-quotes :focus-visible,
html.ui-v2 #v2q-sheet-host :focus-visible { outline: 3px solid var(--mg-focus-ring, var(--mg-action)); outline-offset: 2px; }
html.ui-v2 #v2-quotes [tabindex="-1"]:focus { outline: none; }
/* mg.css draws these as links; here they are buttons: drop the browser's button face. */
html.ui-v2 #v2-quotes button.mg-qc__main,
html.ui-v2 #v2-quotes button.mg-qlist__row,
html.ui-v2 #v2-quotes button.mg-qlist__more,
html.ui-v2 #v2-quotes button.v2q-rw--old { background: transparent; border-left: 0; border-right: 0; border-bottom: 0; margin: 0; width: 100%; text-align: left; color: inherit; cursor: pointer; }
html.ui-v2 #v2-quotes button.mg-qc__main { border-top: 0; padding: 0; }
html.ui-v2 #v2-quotes button.mg-qlist__row:first-child { border-top: 0; }
html.ui-v2 #v2-quotes button.mg-qlist__more { display: flex; align-items: center; justify-content: space-between; min-height: var(--mg-touch-min); padding: var(--mg-space-10) var(--mg-space-14); font-size: 15px; font-weight: 600; }
html.ui-v2 #v2-quotes .mg-qcs > button.mg-qlist__more { border: 1px dashed var(--mg-border-control); border-radius: var(--mg-radius-card); background: var(--mg-bg-card); }
html.ui-v2 .v2q-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- phone: one column, list or details ---- */
html.ui-v2 .v2q-list,
html.ui-v2 .v2q-detail { max-width: var(--mg-content-max); margin: 0 auto; padding: 0 var(--mg-space-16) var(--mg-space-32); }
html.ui-v2 .v2q-list { display: flex; flex-direction: column; gap: var(--mg-space-12); }
html.ui-v2 .v2q-detail { display: none; }
html.ui-v2 .v2-quotes-root.v2q-on-detail .v2q-list { display: none; }
html.ui-v2 .v2-quotes-root.v2q-on-detail .v2q-detail { display: block; }
html.ui-v2 #v2q-list-head,
html.ui-v2 #v2q-list-body { display: flex; flex-direction: column; gap: var(--mg-space-12); }
html.ui-v2 .v2q-phone-top { margin: 0 calc(-1 * var(--mg-space-10)); }
html.ui-v2 .v2q-phone-top .mg-avatar { pointer-events: none; }
html.ui-v2 .v2q-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--mg-space-12); }
html.ui-v2 .v2q-head .mg-sub { margin: var(--mg-space-4) 0 0; }
html.ui-v2 .v2q-new { flex: none; display: inline-flex; align-items: center; gap: var(--mg-space-6); }
html.ui-v2 .v2q-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--mg-space-16)); padding: 2px var(--mg-space-16); scrollbar-width: none; }
html.ui-v2 .v2q-chips .mg-fchip { flex-shrink: 0; }
html.ui-v2 .v2q-moments:empty { display: none; }
html.ui-v2 .v2q-moments #quotes-moment:empty { display: none; }
html.ui-v2 .v2-quotes-root.v2q-on-detail .v2q-moments { display: none; }
html.ui-v2 #v2q-list-body .mg-group-head { margin-top: var(--mg-space-8); }
html.ui-v2 .v2q-empty { padding-top: var(--mg-space-32); }
html.ui-v2 .v2q-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-6); margin-top: var(--mg-space-4); }
html.ui-v2 .v2q-mt { color: var(--mg-text-muted); font-size: 14px; }
html.ui-v2 .v2q-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
html.ui-v2 .v2q-desk-amt { display: inline-flex; align-items: baseline; gap: var(--mg-space-6); }
html.ui-v2 .v2q-desk-amt s { font-size: 14px; }
html.ui-v2 .mg-qc[aria-current="true"] { box-shadow: 0 0 0 2px var(--mg-selected); }
/* V2-37: the quote just sent from screen 19, in view and marked (ink, D1). */
html.ui-v2 .mg-qc.v2q-hl,
html.ui-v2 .mg-desk-row.v2q-hl { box-shadow: 0 0 0 3px var(--mg-selected); background: var(--mg-selected-soft); transition: box-shadow 0.3s var(--mg-ease-out, ease-out), background-color 0.3s var(--mg-ease-out, ease-out); }
html.ui-v2 body.v2-quotes #sent-moment { display: none !important; }
html.ui-v2 .v2q-more { width: 100%; }
html.ui-v2 .v2q-amt-box { display: flex; flex-direction: column; align-items: flex-end; margin-left: auto; }
html.ui-v2 .v2q-amt-tax { font-size: 14px; color: var(--mg-text-muted); }
@media (prefers-reduced-motion: reduce) {
  html.ui-v2 .mg-qc.v2q-hl,
  html.ui-v2 .mg-desk-row.v2q-hl { transition: none; }
}

/* ---- 21 details ---- */
html.ui-v2 .v2q-screen { display: flex; flex-direction: column; gap: var(--mg-space-12); }
html.ui-v2 .v2q-top { margin: 0 calc(-1 * var(--mg-space-10)); }
html.ui-v2 .v2q-ib-gap { width: var(--mg-touch-min); height: var(--mg-touch-min); flex: none; }
html.ui-v2 .v2q-menu { right: 0; }
html.ui-v2 .v2q-menu .v2q-danger-item { color: var(--mg-danger); font-weight: 600; }
html.ui-v2 .v2q-dhead-main { display: flex; flex-direction: column; align-items: flex-start; gap: var(--mg-space-8); }
html.ui-v2 .v2q-sub-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--mg-space-8); width: 100%; }
html.ui-v2 .v2q-sub { font-size: 15px; color: var(--mg-text-secondary); flex: 1 1 auto; min-width: 0; }
html.ui-v2 .v2q-amt { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; margin-left: auto; }
html.ui-v2 .v2q-amt--muted { color: var(--mg-text-muted); text-decoration: line-through; }
html.ui-v2 .v2q-ver { min-height: 24px; }
html.ui-v2 .v2q-loading { display: flex; align-items: center; gap: var(--mg-space-10); color: var(--mg-text-secondary); font-size: 15px; }
html.ui-v2 .v2q-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mg-space-8); }
html.ui-v2 .mg-next .mg-btn,
html.ui-v2 .mg-next .mg-btn-sec { width: 100%; }
html.ui-v2 .mg-next .v2q-small { font-size: 14px; }
html.ui-v2 .mg-next textarea { width: 100%; }
html.ui-v2 .v2q-stack { display: flex; flex-direction: column; gap: var(--mg-space-8); }
/* Section title: title-3 18/800 (D4 type scale). */
html.ui-v2 .v2q-card-title { display: flex; align-items: center; gap: var(--mg-space-8); font-size: 18px; font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; margin: 0; }
html.ui-v2 .v2q-green { color: var(--mg-done); display: inline-flex; }
html.ui-v2 .v2q-text { font-size: 15px; margin: 0; line-height: 1.45; }
html.ui-v2 .v2q-stack .v2q-mt { margin: 0; }
html.ui-v2 .v2q-pad { padding: 0 var(--mg-space-14); margin: 0 0 var(--mg-space-8); }
/* The customer's words (loss note, feedback): neutral like a customer message
   (.mg-msg__bubble). Clay and its stripe mark only what the professional said (D2/D3). */
html.ui-v2 .v2q-quote { margin: 0; padding: var(--mg-space-10) var(--mg-space-12); background: var(--mg-bg-sunken); color: var(--mg-text-primary); border-radius: var(--mg-radius-input); font-size: 15px; line-height: 1.45; }
html.ui-v2 .v2q-details summary { min-height: var(--mg-touch-min); display: flex; align-items: center; cursor: pointer; color: var(--mg-text-secondary); font-size: 14px; font-weight: 600; }
html.ui-v2 .v2q-pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; max-height: 260px; overflow: auto; background: var(--mg-bg-subtle); padding: var(--mg-space-10); border-radius: var(--mg-radius-xs); margin: 0; }
html.ui-v2 .v2q-items { padding: var(--mg-space-4) 0; }
html.ui-v2 .v2q-rw { display: flex; justify-content: space-between; align-items: baseline; gap: var(--mg-space-12); padding: var(--mg-space-10) var(--mg-space-14); font-size: 15px; border: none; border-top: 1px solid var(--mg-divider); background: transparent; color: inherit; width: 100%; text-align: left; }
html.ui-v2 .v2q-rw:first-child { border-top: none; }
html.ui-v2 .v2q-rw > span { min-width: 0; overflow-wrap: anywhere; }
html.ui-v2 .v2q-rw--head { align-items: center; }
html.ui-v2 .v2q-rw--sum { font-weight: 700; }
html.ui-v2 .v2q-rw--sum b { font-size: 17px; }
html.ui-v2 .v2q-rw--old { min-height: var(--mg-touch-min); cursor: pointer; color: var(--mg-text-muted); }
html.ui-v2 .v2q-rw--old > span { display: flex; flex-direction: column; }
html.ui-v2 .v2q-link { min-height: var(--mg-touch-min); }
html.ui-v2 .v2q-center { align-self: center; }
html.ui-v2 .v2q-who { display: flex; flex-direction: column; gap: var(--mg-space-2); font-size: 16px; }
html.ui-v2 .v2q-select { user-select: text; overflow-wrap: anywhere; }
html.ui-v2 .v2q-stack a.mg-btn-sec { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--mg-space-6); }
html.ui-v2 .v2q-attention { border: 2px solid var(--mg-review); }
html.ui-v2 .v2q-rows { padding: 0; overflow: hidden; }
html.ui-v2 .v2q-rows .mg-row { width: 100%; }
html.ui-v2 .v2q-foot-link { display: flex; justify-content: center; }
html.ui-v2 .v2q-foot-link .mg-link { min-height: var(--mg-touch-min); display: inline-flex; align-items: center; }
html.ui-v2 .mg-thread__reply .mg-input { flex: 1; min-width: 0; }

/* ---- 25 / 25b close ---- */
html.ui-v2 .v2q-close-foot { display: flex; flex-direction: column; gap: var(--mg-space-8); }
html.ui-v2 .v2q-close-foot .mg-btn { width: 100%; }
html.ui-v2 .v2q-close-foot .mg-btn[disabled] { cursor: not-allowed; }
html.ui-v2 .mg-invoice .mg-field { display: flex; flex-direction: column; gap: var(--mg-space-4); }

/* ---- sheets (22 schedule, deposit, note, change orders, lost, confirm) ---- */
html.ui-v2 .v2q-backdrop { position: fixed; inset: 0; z-index: var(--mg-z-sheet, 46); overflow-y: auto; }
html.ui-v2 .v2q-sheet { max-height: calc(100vh - 24px); overflow-y: auto; animation: v2q-sheet-in 0.22s var(--mg-ease-out, ease-out); }
@keyframes v2q-sheet-in { from { transform: translateY(24px); opacity: 0.6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html.ui-v2 .v2q-sheet { animation: none; }
}
html.ui-v2 body.v2q-on-sheet { overflow: hidden; }
html.ui-v2 .v2q-sheet .mg-field { display: flex; flex-direction: column; gap: var(--mg-space-4); }
html.ui-v2 .v2q-sheet .mg-input,
html.ui-v2 .v2q-sheet .mg-textarea { width: 100%; }
/* Only a destructive confirm (withdraw, delete) is red, and without the green CTA shadow. */
html.ui-v2 .v2q-btn-danger { background: var(--mg-danger); color: var(--mg-white); box-shadow: none; }
html.ui-v2 .v2q-vars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--mg-space-8); }
html.ui-v2 .v2q-var { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--mg-space-8); padding: var(--mg-space-10) 0; border-bottom: 1px solid var(--mg-divider); font-size: 15px; }
html.ui-v2 .v2q-var-main { display: flex; flex-direction: column; min-width: 0; flex: 1; overflow-wrap: anywhere; }
html.ui-v2 .v2q-var-btn { width: 100%; }

/* ---- 50: desktop (≥900px) — list and details side by side ---- */
@media (min-width: 900px) {
  html.ui-v2 body.v2-quotes main:has(> #view-quotes:not(.hidden)) { max-width: none; }
  html.ui-v2 .v2-quotes-root { display: grid; grid-template-columns: 460px minmax(0, 1fr); align-items: start; min-height: calc(100vh - 64px); }
  html.ui-v2 .v2-quotes-root .v2q-list,
  html.ui-v2 .v2-quotes-root.v2q-on-detail .v2q-list { display: flex; position: sticky; top: 0; max-height: 100vh; overflow-y: auto; max-width: none; margin: 0; padding: var(--mg-space-16); border-right: 1px solid var(--mg-border-card); }
  html.ui-v2 .v2-quotes-root .v2q-detail,
  html.ui-v2 .v2-quotes-root.v2q-on-detail .v2q-detail { display: block; max-width: 880px; margin: 0; padding: var(--mg-space-24) var(--mg-space-32) var(--mg-space-32); }
  html.ui-v2 .v2-quotes-root .v2q-moments { display: block; }
  html.ui-v2 .v2-quotes-root .v2q-moments:empty { display: none; }
  html.ui-v2 .v2q-phone-top { display: none; }
  html.ui-v2 .v2q-detail .v2q-top { margin: 0; min-height: 0; }
  html.ui-v2 .v2q-detail .v2q-top .mg-top__title { display: none; }
  html.ui-v2 .v2q-detail .v2q-screen[data-screen="detail"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mg-space-16); align-items: start; }
  html.ui-v2 .v2q-detail .v2q-screen[data-screen="detail"] > .v2q-wide { grid-column: 1 / -1; }
  html.ui-v2 .v2q-detail .v2q-screen[data-screen="close"] { max-width: 600px; }
  /* The row is a box: its main button covers the whole row (::after), and
     the reminder action (N2) sits above it. */
  html.ui-v2 .mg-desk-row { position: relative; width: 100%; min-height: var(--mg-touch-min); }
  html.ui-v2 .mg-desk-row__main { display: flex; flex-direction: column; gap: var(--mg-space-6); width: 100%; margin: 0; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; }
  html.ui-v2 .mg-desk-row__main::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  html.ui-v2 .mg-desk-row__foot { position: relative; z-index: 1; justify-content: flex-end; }
  html.ui-v2 .mg-desk-row .mg-status { flex: none; }
  html.ui-v2 .v2q-sheet { border-radius: var(--mg-radius-sheet); margin-bottom: 10vh; }
  html.ui-v2 .v2q-backdrop { align-items: center; }
}
/* #797: the low dimensions on the negative-feedback next step */
html.ui-v2 .v2q-fb-dims { list-style: none; margin: var(--mg-space-4, 4px) 0; padding: 0; display: grid; gap: var(--mg-space-4, 4px); }
html.ui-v2 .v2q-fb-dims li { display: flex; justify-content: space-between; gap: var(--mg-space-10, 10px); }

/* #1073: a late payment's next-step card. D5: "Késik a fizetés" is danger.
   mg.css stays equal to the design-system bundle, so the variant lives here. */
html.ui-v2 .mg-next--danger { background: var(--mg-danger-tint); border: 1.5px solid var(--mg-danger); }
html.ui-v2 .mg-next--danger > .mg-eyebrow { color: var(--mg-danger); }

/* #1074/3 (Istvan 2026-10-10): clay spins only while Mondigo works on the
   professional's own material (dictation, price-list import). Loading the
   quote list is not that, so its spinner is neutral. */
html.ui-v2 .v2q-loading .mg-spin { border-color: var(--mg-ink-200); border-top-color: var(--mg-text-secondary); }
@media (prefers-reduced-motion: reduce) {
  html.ui-v2 .v2q-loading .mg-spin { border-top-color: var(--mg-ink-200); border-right-color: var(--mg-text-secondary); }
}