/* ═══════════════════════════════════════════════════════════════════════════
   VENDOR DISPUTES — the house style (S8).
   ═══════════════════════════════════════════════════════════════════════════

   THE SPEC IS RMS-Vendor-Disputes-Prototype-v2.html, which Hamza approved. v2
   was drawn from three live RMS screens — Saved Dimensions, Message Templates
   and Amazon Support Cases — so this module stops looking like the odd one out.
   S8 changed how it looks and nothing about what it does.

   HOUSE RULES THIS FILE OBEYS, and the reason each one exists:

     1. EVERYTHING IS SCOPED TO #vendorDisputes. This is a tab inside one big
        page; an unscoped rule here lands on somebody else's screen.

     2. THERE ARE TWO @media BLOCKS AND THAT IS CORRECT. The house rule is
        about MOBILE css, and there is exactly one of those — max-width:1180px,
        LAST in the file, so nothing can be written after it that wins at every
        width. The other is prefers-reduced-motion, which is not a screen size
        and is not a layout: it turns off the section fade for somebody who has
        asked their machine for less movement. Do not merge them and do not
        delete the second one.

     3. BUTTONS RESTATE background AND color. style.css:1 sets
        button{background:#03658e;color:white} for the whole app, and it bleeds
        into anything that only sets one of the two.

     4. INPUTS IN CONSTRAINED CONTAINERS CARRY min-width:0. The same global
        stylesheet gives every input min-width:170px, which pushes a table row
        off a phone screen.

     5. EVERY TABLE CARRIES .rk-ownmobile IN THE MARKUP so mobileEnhance.js
        does not cardify it. That is in the module JS, not here, but this file
        is where somebody will look for it.

   THE ONE PIECE OF BEHAVIOUR THIS FILE OWNS: switching section must not jump.
   .vd-headrow has a MINIMUM HEIGHT so the tab strip lands in the same place in
   every section, and .vd-view.on fades in over 180ms. The third part of that —
   not scrolling to the top unless the strip is actually off screen — is in the
   module JS.
   ═══════════════════════════════════════════════════════════════════════════ */

#vendorDisputes{
  --vd-ink:#0d2436; --vd-ink2:#33475b; --vd-muted:#6b7a89; --vd-faint:#8b98a5;
  --vd-teal:#0e6a86; --vd-teal-d:#0b5568; --vd-teal-l:#e6f1f5;
  --vd-line:#dbe4ec; --vd-hair:#eaf0f5; --vd-card:#ffffff;
  --vd-amber:#b45309; --vd-amberb:#fef6e7; --vd-amber-line:#f0b357;
  --vd-green:#047857; --vd-greenb:#d9f5e8;
  --vd-red:#b42318; --vd-redb:#fdecea;
  --vd-blue:#1e40af; --vd-blueb:#dbeafe;
  --vd-grey:#55636f; --vd-greyb:#eef2f6;
  --vd-r:12px; --vd-rs:9px;
  font:14px/1.5 "Segoe UI",system-ui,Arial,sans-serif;
  color:var(--vd-ink);
  /* The soft blue-grey wash, not flat grey. */
  background:linear-gradient(160deg,#e9eff7 0%,#f3f7fa 42%,#f6f9fb 100%);
  padding:26px 26px 70px;
}
#vendorDisputes *{box-sizing:border-box}

/* ---------- page head: eyebrow → title → one plain sentence --------------- */
#vendorDisputes .vd-eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;
 text-transform:uppercase;color:var(--vd-teal);margin-bottom:6px}
#vendorDisputes h2.vd-title{font-size:29px;line-height:1.15;font-weight:700;margin:0 0 9px;
 color:var(--vd-ink)}
#vendorDisputes .vd-lede{color:var(--vd-ink2);max-width:74ch;margin:0 0 22px;line-height:1.55}
/* THE MINIMUM HEIGHT IS LOAD-BEARING, AND ITS VALUE IS MEASURED, NOT COPIED.
   Without it a section whose sentence wraps to four lines puts the tab strip
   22px lower than one that wraps to three, and switching between them looks
   like the page jumped. v2 uses 118px because v2's three sentences happen to be
   the same length; ours are not, so a floor UNDER the tallest head does nothing
   at all. 196px is the Disputes head measured at 1181px — the narrowest desktop
   width, where the sentence wraps most — so every section clears it at every
   width above that. Below 1180px the mobile block zeroes it and the head stacks
   instead. If somebody edits one of those three sentences, re-measure. */
#vendorDisputes .vd-headrow{display:flex;justify-content:space-between;align-items:flex-start;
 gap:32px;min-height:196px}
#vendorDisputes .vd-actions{display:flex;gap:12px;flex-wrap:wrap}
#vendorDisputes .vd-headright{display:flex;flex-direction:column;align-items:flex-end;gap:8px}

/* ---------- buttons: filled teal pill primary, white pill secondary ------- */
#vendorDisputes button{font:inherit;font-weight:600;cursor:pointer;margin:0;box-shadow:none;
 background:var(--vd-card);color:var(--vd-ink);border:1px solid var(--vd-line);
 border-radius:999px;padding:9px 17px;white-space:nowrap;
 transition:background .12s,border-color .12s}
#vendorDisputes button:hover{background:#f5f9fb;color:var(--vd-ink);border-color:#c6d4e0}
#vendorDisputes button.vd-primary{background:var(--vd-teal);color:#fff;border-color:var(--vd-teal)}
#vendorDisputes button.vd-primary:hover{background:var(--vd-teal-d);color:#fff;
 border-color:var(--vd-teal-d)}
#vendorDisputes button.vd-sm,#vendorDisputes button.vd-quiet{padding:6px 14px;font-size:13px}
#vendorDisputes button.vd-linkbtn,#vendorDisputes button.vd-link,#vendorDisputes button.vd-back,
#vendorDisputes button.vd-id,#vendorDisputes button.vd-idbtn{background:none;border:0;padding:0;
 border-radius:0;color:var(--vd-teal);font-weight:600;cursor:pointer}
#vendorDisputes button.vd-linkbtn:hover,#vendorDisputes button.vd-link:hover,
#vendorDisputes button.vd-back:hover,#vendorDisputes button.vd-id:hover,
#vendorDisputes button.vd-idbtn:hover{background:none;color:var(--vd-teal-d);
 text-decoration:underline}
#vendorDisputes button.vd-id,#vendorDisputes button.vd-idbtn{font-weight:700}
#vendorDisputes button.vd-back{margin-bottom:14px}
#vendorDisputes button:disabled{opacity:.45;cursor:not-allowed}
#vendorDisputes button:disabled:hover{background:var(--vd-card);color:var(--vd-ink);
 border-color:var(--vd-line)}
#vendorDisputes button.vd-primary:disabled:hover{background:var(--vd-teal);color:#fff}
#vendorDisputes button:focus-visible{outline:2px solid var(--vd-teal);outline-offset:2px}
/* A download offered as a link still has to look like the buttons beside it. */
#vendorDisputes .vd-linkish{display:inline-flex;align-items:center;padding:9px 17px;
 border:1px solid var(--vd-line);border-radius:999px;background:var(--vd-card);
 color:var(--vd-ink);text-decoration:none;font-weight:600}
#vendorDisputes .vd-linkish:hover{background:#f5f9fb;border-color:#c6d4e0}

/* ---------- section tabs: raised, on a full-width hairline ---------------- */
#vendorDisputes .vd-sectiontabs{display:flex;gap:10px;align-items:flex-end;margin:6px 0 26px;
 padding:0 6px;border-bottom:1px solid var(--vd-line);position:relative;z-index:2}
#vendorDisputes .vd-stab{background:transparent;border:1px solid transparent;border-bottom:0;
 border-radius:10px 10px 0 0;padding:13px 26px;font-weight:600;color:var(--vd-ink2)}
#vendorDisputes .vd-stab:hover{background:rgba(255,255,255,.6);color:var(--vd-ink);
 border-color:transparent}
#vendorDisputes .vd-stab[aria-selected="true"]{background:var(--vd-card);border-color:var(--vd-line);
 color:var(--vd-teal);font-weight:700;margin-bottom:-1px;padding-bottom:14px}
#vendorDisputes .vd-stab .n{display:inline-block;background:var(--vd-teal-l);color:var(--vd-teal);
 border-radius:999px;padding:1px 8px;font-size:11px;font-weight:700;margin-left:7px}

/* ---------- status filters: inline underlined counts, inside the card -----
   These used to be a row of pills sitting above a second row of type pills.
   Two rows of pills was one row too many, and neither row said what it was
   counting. */
#vendorDisputes .vd-countfilters{display:flex;gap:38px;align-items:center;flex-wrap:wrap;
 padding:2px 22px;border-bottom:1px solid var(--vd-hair);overflow-x:auto}
#vendorDisputes .vd-cf{background:none;border:0;border-bottom:2px solid transparent;border-radius:0;
 padding:17px 2px;font-weight:600;color:var(--vd-ink2);white-space:nowrap}
#vendorDisputes .vd-cf:hover{background:none;color:var(--vd-ink);border-bottom-color:var(--vd-line)}
#vendorDisputes .vd-cf .n{color:var(--vd-faint);font-weight:700;margin-left:7px;
 font-variant-numeric:tabular-nums}
#vendorDisputes .vd-cf[aria-selected="true"]{color:var(--vd-teal);border-bottom-color:var(--vd-teal);
 font-weight:700}
#vendorDisputes .vd-cf[aria-selected="true"] .n{color:var(--vd-teal)}
#vendorDisputes .vd-cf.alert .n{color:var(--vd-amber)}
#vendorDisputes .vd-cfcount{margin-left:auto;padding-left:16px}

/* ---------- pills, badges, tags ------------------------------------------ */
#vendorDisputes .vd-count{display:inline-block;background:var(--vd-teal-l);color:var(--vd-teal);
 border-radius:999px;padding:5px 13px;font-size:12px;font-weight:700}
#vendorDisputes .vd-badge{display:inline-block;border-radius:999px;padding:4px 11px;font-size:11px;
 font-weight:700;white-space:nowrap;letter-spacing:.01em}
#vendorDisputes .vd-tag{display:inline-block;border-radius:7px;padding:3px 9px;font-size:11px;
 font-weight:700}
/* Both spellings: the module emits vd-b-*, v2's own markup uses b-*. */
#vendorDisputes .vd-b-blue,#vendorDisputes .b-blue{background:var(--vd-blueb);color:var(--vd-blue)}
#vendorDisputes .vd-b-green,#vendorDisputes .b-green{background:var(--vd-greenb);color:var(--vd-green)}
#vendorDisputes .vd-b-amber,#vendorDisputes .b-amber{background:var(--vd-amberb);color:var(--vd-amber)}
#vendorDisputes .vd-b-red,#vendorDisputes .b-red{background:var(--vd-redb);color:var(--vd-red)}
#vendorDisputes .vd-b-grey,#vendorDisputes .b-grey{background:var(--vd-greyb);color:var(--vd-grey)}

/* ---------- cards. .vd-panel/.vd-ph/.vd-pb ARE the card, so every panel the
   module already draws gets the new look without its markup changing. ------ */
#vendorDisputes .vd-panel,#vendorDisputes .vd-card{background:var(--vd-card);
 border:1px solid var(--vd-line);border-radius:var(--vd-r);margin-bottom:22px;overflow:hidden}
#vendorDisputes .vd-ph,#vendorDisputes .vd-ch{display:flex;justify-content:space-between;
 align-items:center;gap:16px;padding:18px 22px;border-bottom:1px solid var(--vd-hair)}
#vendorDisputes .vd-ph h3,#vendorDisputes .vd-ph h4,#vendorDisputes .vd-ch h3{margin:0;
 font-size:15px;font-weight:700}
#vendorDisputes .vd-ph .sub,#vendorDisputes .vd-ch .sub{font-size:12px;color:var(--vd-muted);
 font-weight:400;margin-left:8px}
#vendorDisputes .vd-pb,#vendorDisputes .vd-cb{padding:22px}
/* A card that sits directly under the tab strip squares off its top-left so it
   reads as the selected tab's body rather than as a separate box. */
#vendorDisputes .vd-tabbedcard{border-top-left-radius:0}

/* ---------- banners ------------------------------------------------------- */
#vendorDisputes .vd-banner,#vendorDisputes .vd-sample{background:var(--vd-amberb);
 border:1px solid #f6e0bb;border-left:4px solid var(--vd-amber-line);border-radius:var(--vd-rs);
 padding:16px 19px;margin-bottom:24px;color:#7c4a12;line-height:1.55}
#vendorDisputes .vd-banner b,#vendorDisputes .vd-sample b{color:#6b3f0d}
#vendorDisputes .vd-note,#vendorDisputes .vd-internalnote{background:#f5f9fb;
 border:1px solid var(--vd-line);border-radius:var(--vd-rs);padding:12px 15px;color:var(--vd-ink2);
 line-height:1.55;margin-bottom:14px}
#vendorDisputes .vd-evwarn{background:var(--vd-amberb);border:1px solid #f6e0bb;
 border-left:4px solid var(--vd-amber-line);border-radius:var(--vd-rs);padding:12px 15px;
 color:#7c4a12;line-height:1.55;margin-top:10px;overflow-wrap:anywhere}
#vendorDisputes .vd-panelerr{background:var(--vd-redb);border:1px solid #f4cfcb;
 border-left:4px solid #e0837a;border-radius:var(--vd-rs);padding:13px 15px;color:#8f2d22;
 line-height:1.55}
/* "This is not built yet, and here is which piece of work adds it." */
#vendorDisputes .vd-soon{color:var(--vd-muted);font-size:12px;line-height:1.55;margin-top:8px}
#vendorDisputes .vd-stale{color:var(--vd-amber);font-size:12px}

/* ---------- KPI strip: white cards, big number, tiny uppercase label ------ */
#vendorDisputes .vd-kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;
 margin-bottom:24px}
#vendorDisputes .vd-kpi{background:var(--vd-card);border:1px solid var(--vd-line);
 border-radius:var(--vd-rs);padding:15px 16px}
#vendorDisputes .vd-kpi .n{font-size:25px;font-weight:700;line-height:1.1;
 font-variant-numeric:tabular-nums}
#vendorDisputes .vd-kpi .l{font-size:10px;font-weight:700;letter-spacing:.09em;
 text-transform:uppercase;color:var(--vd-muted);margin-top:7px}
#vendorDisputes .vd-kpi[aria-current="true"]{border-color:var(--vd-teal);
 box-shadow:0 0 0 2px var(--vd-teal-l)}
#vendorDisputes .vd-kpi.alert .n,#vendorDisputes .vd-kpi.warn .n{color:var(--vd-amber)}
#vendorDisputes .vd-kpi.bad .n{color:var(--vd-red)}

/* ---------- one white filter bar ----------------------------------------- */
#vendorDisputes .vd-filters,#vendorDisputes .vd-toolbar{background:var(--vd-card);
 border:1px solid var(--vd-line);border-radius:var(--vd-r);padding:16px 18px;display:flex;
 gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:20px}
#vendorDisputes .vd-search{flex:1;min-width:0;padding:10px 14px;border:1px solid var(--vd-line);
 border-radius:999px;font:inherit;background:#fbfdfe;color:var(--vd-ink)}
#vendorDisputes select,#vendorDisputes input[type=text],#vendorDisputes input[type=password],
#vendorDisputes input[type=number],#vendorDisputes textarea{padding:9px 13px;
 border:1px solid var(--vd-line);border-radius:var(--vd-rs);font:inherit;background:var(--vd-card);
 color:var(--vd-ink);min-width:0}
#vendorDisputes textarea{width:100%;line-height:1.65;resize:vertical}

/* ---------- tables -------------------------------------------------------- */
#vendorDisputes .vd-tablewrap{overflow-x:auto}
#vendorDisputes table{border-collapse:collapse;width:100%;min-width:1180px}
#vendorDisputes th{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
 color:var(--vd-muted);text-align:left;padding:15px 18px;border-bottom:1px solid var(--vd-line);
 white-space:nowrap}
#vendorDisputes td{padding:18px;border-bottom:1px solid var(--vd-hair);vertical-align:middle}
#vendorDisputes tbody tr:last-child td{border-bottom:0}
#vendorDisputes tbody tr:hover{background:#f8fbfd}
#vendorDisputes tfoot td{border-top:2px solid var(--vd-line);border-bottom:0;padding-top:16px;
 font-weight:700}
#vendorDisputes .vd-primarycell{font-weight:700;color:var(--vd-ink)}
#vendorDisputes .vd-sub2{font-size:12px;color:var(--vd-muted);margin-top:3px}
#vendorDisputes .vd-num{font-variant-numeric:tabular-nums}
#vendorDisputes .vd-right{text-align:right}
#vendorDisputes .vd-muted{color:var(--vd-muted)}
#vendorDisputes .vd-ok{color:var(--vd-green);font-weight:700}
#vendorDisputes .vd-warn{color:var(--vd-amber);font-weight:700}
/* The Match column's reason, small and wrapping rather than stretching a
   column that is already narrow. */
#vendorDisputes .vd-matchwhy{margin-top:4px;font-size:11px;line-height:1.45;max-width:230px;
 overflow-wrap:anywhere;color:var(--vd-muted)}
#vendorDisputes td.vd-comment{max-width:210px;line-height:1.5}
#vendorDisputes tr.is-removed td{color:var(--vd-muted)}

/* ---------- empty, loading, error ---------------------------------------- */
#vendorDisputes .vd-empty{padding:56px 24px;text-align:center}
#vendorDisputes .vd-empty .ico{font-size:30px;margin-bottom:14px;line-height:1}
#vendorDisputes .vd-empty b{display:block;font-size:17px;margin-bottom:7px;color:var(--vd-ink)}
#vendorDisputes .vd-empty p{color:var(--vd-muted);margin:0 0 18px;line-height:1.6}
#vendorDisputes .vd-empty-inline{padding:26px 4px;text-align:left}
#vendorDisputes .vd-skel{height:13px;border-radius:6px;background:#eef2f6;margin:11px 0}

/* ---------- dispute detail ------------------------------------------------ */
#vendorDisputes .vd-facts,#vendorDisputes .vd-factstrip{display:flex;gap:11px;flex-wrap:wrap;
 margin-top:18px;margin-bottom:22px}
#vendorDisputes .vd-fact{background:#f5f9fb;border:1px solid var(--vd-line);border-radius:var(--vd-rs);
 padding:8px 13px;font-size:13px;color:var(--vd-muted)}
#vendorDisputes .vd-fact-k{color:var(--vd-muted)}
#vendorDisputes .vd-fact-v,#vendorDisputes .vd-fact b{color:var(--vd-ink);font-weight:700;
 margin-left:7px}
#vendorDisputes .vd-detail{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:22px;
 align-items:start}
#vendorDisputes .vd-detail-main,#vendorDisputes .vd-detail-side{min-width:0}
#vendorDisputes .vd-detail-side button{width:100%;margin-bottom:8px}
#vendorDisputes .vd-matchreason{line-height:1.6;margin-bottom:12px;overflow-wrap:anywhere}
#vendorDisputes .vd-matchbox{margin-top:14px;display:flex;flex-wrap:wrap;gap:9px;align-items:center}
#vendorDisputes .vd-matchbox input{min-width:0;width:230px}
#vendorDisputes .vd-mcard{border:1px solid var(--vd-line);border-radius:var(--vd-rs);padding:13px;
 background:#fbfdfe}
#vendorDisputes .vd-mcard .k{font-size:10px;font-weight:700;letter-spacing:.09em;
 text-transform:uppercase;color:var(--vd-muted)}
#vendorDisputes .vd-mcard b{display:block;margin-top:5px;font-size:15px}
#vendorDisputes .vd-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;
 margin-bottom:18px}
#vendorDisputes .vd-kv{display:flex;justify-content:space-between;gap:12px;padding:10px 0;
 border-bottom:1px solid var(--vd-hair)}
#vendorDisputes .vd-kv:last-child{border-bottom:0}
#vendorDisputes .vd-kv span{color:var(--vd-muted)}
#vendorDisputes .vd-statusbox{margin-top:14px;display:flex;flex-direction:column;gap:8px}
#vendorDisputes .vd-twostatus{margin-top:12px}

/* comments */
#vendorDisputes .vd-thread{display:flex;flex-direction:column;gap:10px;margin-top:6px}
#vendorDisputes .vd-comment-row{background:#fffdf6;border:1px solid #f2e6c9;
 border-radius:var(--vd-rs);padding:13px 15px;line-height:1.6}
#vendorDisputes .vd-comment-row.is-removed{background:#fbfcfd;border-color:var(--vd-line)}
#vendorDisputes .vd-comment-body{overflow-wrap:anywhere;white-space:pre-line}
#vendorDisputes .vd-comment-meta{font-size:12px;color:var(--vd-muted);margin-top:7px;
 display:flex;gap:10px;flex-wrap:wrap;align-items:center}
#vendorDisputes .vd-addcomment{margin-top:16px;display:flex;flex-direction:column;gap:10px}

/* correspondence */
#vendorDisputes .vd-msgs{display:flex;flex-direction:column;gap:11px}
#vendorDisputes .vd-msg{border:1px solid var(--vd-line);border-radius:var(--vd-rs);padding:14px;
 background:#fbfdfe}
#vendorDisputes .vd-msg.is-out{background:var(--vd-teal-l);border-color:#c9e2ea}
#vendorDisputes .vd-msg-head{font-weight:700;margin-bottom:5px;display:flex;gap:10px;
 flex-wrap:wrap;align-items:baseline}
#vendorDisputes .vd-msg-body{line-height:1.65;white-space:pre-line;overflow-wrap:anywhere;
 max-height:260px;overflow:auto}
#vendorDisputes .vd-atts{margin-top:9px;display:flex;gap:7px;flex-wrap:wrap}
#vendorDisputes .vd-att,#vendorDisputes .vd-attach,#vendorDisputes .vd-file{display:inline-flex;
 align-items:center;gap:8px;border:1px solid var(--vd-line);border-radius:999px;padding:7px 14px;
 margin:0 7px 7px 0;background:var(--vd-card);font-size:13px;text-decoration:none;
 color:var(--vd-ink)}
#vendorDisputes .vd-attach.miss,#vendorDisputes .vd-file.miss{border-style:dashed;
 color:var(--vd-red);background:#fffbfb}
#vendorDisputes .vd-attachrow{margin-top:16px;display:flex;flex-wrap:wrap;gap:10px;
 align-items:center;padding-top:16px;border-top:1px solid var(--vd-hair)}
#vendorDisputes .vd-attachrow input{min-width:0;width:210px}

/* history */
#vendorDisputes .vd-timeline{border-left:2px solid var(--vd-hair);margin-left:6px;padding-left:20px}
#vendorDisputes .vd-tl-row{position:relative;margin-bottom:17px;line-height:1.5}
#vendorDisputes .vd-tl-row:last-child{margin-bottom:0}
#vendorDisputes .vd-tl-dot{position:absolute;left:-26px;top:5px;width:9px;height:9px;
 border-radius:50%;background:#b8c6d2;border:2px solid #fff;flex:none}

/* evidence rows */
#vendorDisputes .vd-evrow{padding:14px 0;border-bottom:1px solid var(--vd-hair)}
#vendorDisputes .vd-evrow:last-of-type{border-bottom:0}
#vendorDisputes .vd-evtop{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
#vendorDisputes .vd-evtop b{font-size:14px}
#vendorDisputes .vd-evreq{font-size:10px;text-transform:uppercase;letter-spacing:.09em;
 font-weight:700;color:var(--vd-muted)}
#vendorDisputes .vd-evfile{margin-top:6px;overflow-wrap:anywhere}
#vendorDisputes .vd-evwhy{margin-top:5px;font-size:12px;line-height:1.55;color:var(--vd-muted);
 overflow-wrap:anywhere}
#vendorDisputes .vd-evact{margin-top:8px}

/* the justification, and where each fact in it came from */
#vendorDisputes #vdJustBox,#vendorDisputes .vd-draft{width:100%;min-width:0;box-sizing:border-box;
 padding:16px;border:1px solid var(--vd-line);border-radius:var(--vd-rs);font:inherit;
 line-height:1.75;background:#fbfdfe;color:var(--vd-ink2);margin-top:12px;resize:vertical}
#vendorDisputes .vd-prov{margin-top:10px;font-size:12px}
#vendorDisputes .vd-prov summary{cursor:pointer;color:var(--vd-teal);font-weight:600}
#vendorDisputes .vd-provrow{padding:6px 0;border-bottom:1px solid var(--vd-hair);line-height:1.55;
 overflow-wrap:anywhere}
#vendorDisputes .vd-provrow:last-child{border-bottom:0}

/* ---------- the four-step wizard ----------------------------------------- */
#vendorDisputes .vd-wizgrid{display:grid;grid-template-columns:262px minmax(0,1fr);gap:22px;
 align-items:start}
#vendorDisputes .vd-steps{background:var(--vd-card);border:1px solid var(--vd-line);
 border-radius:var(--vd-r);padding:16px}
#vendorDisputes .vd-prog{height:6px;background:#eaf0f5;border-radius:999px;overflow:hidden;
 margin-bottom:8px}
#vendorDisputes .vd-prog i{display:block;height:100%;background:var(--vd-teal);border-radius:999px}
#vendorDisputes .vd-step{display:flex;gap:12px;align-items:flex-start;padding:12px;
 border-radius:var(--vd-rs);margin-top:7px}
#vendorDisputes .vd-step[aria-current="step"]{background:var(--vd-teal-l)}
#vendorDisputes .vd-step .no{width:24px;height:24px;border-radius:50%;background:#e7edf3;
 color:#5d6b78;display:grid;place-items:center;font-weight:700;font-size:12px;flex:none}
#vendorDisputes .vd-step[aria-current="step"] .no{background:var(--vd-teal);color:#fff}
#vendorDisputes .vd-step.done .no{background:var(--vd-greenb);color:var(--vd-green)}
#vendorDisputes .vd-step b{display:block;font-size:13px}
#vendorDisputes .vd-step span{font-size:12px;color:var(--vd-muted)}
#vendorDisputes .vd-opt{border:1px solid var(--vd-line);border-radius:var(--vd-rs);padding:15px;
 margin-bottom:10px;display:flex;gap:13px;cursor:pointer;background:var(--vd-card);line-height:1.55}
#vendorDisputes .vd-opt[aria-checked="true"]{border-color:var(--vd-teal);background:var(--vd-teal-l)}
#vendorDisputes .vd-opt[aria-disabled="true"]{cursor:default;opacity:.7;background:#fafbfc}
#vendorDisputes .vd-opt b{display:block;margin-bottom:3px}
#vendorDisputes .vd-field{margin-bottom:20px}
#vendorDisputes .vd-field > label{display:block;font-weight:700;margin-bottom:5px}
#vendorDisputes .vd-field .hint{color:var(--vd-muted);font-size:13px;margin-bottom:8px;
 line-height:1.55}
#vendorDisputes .vd-field input[type=text],#vendorDisputes .vd-field select{width:100%}
/* THE DISPUTE QUANTITY STAYS NARROW. The global min-width:170px would push
   this eight-column row off a phone screen on its own. */
#vendorDisputes .vd-qty{width:78px;min-width:0;padding:7px 9px;border:1px solid var(--vd-line);
 border-radius:var(--vd-rs);font:inherit;background:var(--vd-card);color:var(--vd-ink)}
#vendorDisputes .vd-wizfoot{display:flex;justify-content:space-between;gap:10px;padding:15px 18px;
 border-top:1px solid var(--vd-hair);background:#fbfdfe;flex-wrap:wrap;align-items:center}

/* ---------- settings and templates --------------------------------------- */
#vendorDisputes .vd-settings .vd-panel{max-width:980px}
#vendorDisputes .vd-row{display:flex;justify-content:space-between;align-items:center;gap:20px;
 padding:16px 0;border-bottom:1px solid var(--vd-hair)}
#vendorDisputes .vd-row:last-child{border-bottom:0}
#vendorDisputes .vd-row-txt b{display:block}
#vendorDisputes .vd-row-txt .vd-muted{margin-top:4px;font-size:13px;max-width:62ch;line-height:1.55}
#vendorDisputes .vd-toggle{width:46px;height:26px;border-radius:999px;background:#cbd8e2;
 position:relative;border:0;padding:0;flex:none;cursor:pointer}
#vendorDisputes .vd-toggle:hover{background:#bccbd7}
#vendorDisputes .vd-toggle:after{content:"";position:absolute;width:20px;height:20px;top:3px;
 left:3px;border-radius:50%;background:#fff;transition:left .15s}
#vendorDisputes .vd-toggle[aria-pressed="true"]{background:var(--vd-teal)}
#vendorDisputes .vd-toggle[aria-pressed="true"]:after{left:23px}
#vendorDisputes .vd-tplgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
#vendorDisputes .vd-tplgrid .vd-panel{margin:0}
#vendorDisputes .vd-drop{border:1px dashed #bccbd7;border-radius:var(--vd-rs);padding:20px;
 text-align:center;background:#fbfdfe;color:var(--vd-muted)}
#vendorDisputes .vd-warnlist{margin:0;padding-left:20px;line-height:1.7}

/* ---------- sections: one visible at a time, and it fades in -------------- */
#vendorDisputes .vd-view{display:none}
#vendorDisputes .vd-view.on{display:block;animation:vdIn .18s ease-out}
@keyframes vdIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* NOT A MOBILE BLOCK — see rule 2 in the header. Somebody who has asked their
   machine for less movement gets the section with no fade at all. */
@media (prefers-reduced-motion:reduce){
  #vendorDisputes .vd-view.on{animation:none}
  #vendorDisputes .vd-toggle:after{transition:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE — ONE BLOCK, AND IT IS THE LAST THING IN THIS FILE.
   A rule written below this wins at every width and quietly undoes the narrow
   layout. Anything new goes ABOVE it.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:1180px){
  #vendorDisputes{padding:18px 14px 60px}
  #vendorDisputes h2.vd-title{font-size:24px}
  #vendorDisputes .vd-headrow{display:block;min-height:0}
  #vendorDisputes .vd-actions{margin-top:14px}
  #vendorDisputes .vd-headright{align-items:stretch}
  #vendorDisputes .vd-kpis{grid-template-columns:repeat(2,1fr)}
  #vendorDisputes .vd-search{width:100%;flex:none}
  #vendorDisputes .vd-countfilters{gap:24px;padding:2px 16px}
  #vendorDisputes .vd-sectiontabs{gap:6px;overflow-x:auto}
  #vendorDisputes .vd-stab{padding:11px 16px}
  /* The dispute screen becomes one column: the decision, the timing and the
     history fall UNDER the correspondence rather than beside it. */
  #vendorDisputes .vd-detail,#vendorDisputes .vd-wizgrid{grid-template-columns:minmax(0,1fr)}
  #vendorDisputes .vd-summary,#vendorDisputes .vd-tplgrid{grid-template-columns:1fr}
  #vendorDisputes .vd-settings .vd-panel{max-width:none}
  #vendorDisputes .vd-row{display:block}
  #vendorDisputes .vd-row > :last-child{margin-top:12px}
  #vendorDisputes .vd-matchbox input,#vendorDisputes .vd-attachrow input{width:100%}
  #vendorDisputes .vd-matchwhy,#vendorDisputes .vd-evwhy{max-width:none}
  #vendorDisputes td.vd-comment{max-width:none}
  #vendorDisputes .vd-msg-body{max-height:none}
  /* The evidence row stacks: the label, then the badge, then the file. */
  #vendorDisputes .vd-evtop{display:block}
  #vendorDisputes .vd-evtop .vd-badge{margin-top:6px}
  #vendorDisputes .vd-wizfoot{display:block}
  #vendorDisputes .vd-wizfoot > div{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
  #vendorDisputes .vd-wizfoot button,#vendorDisputes .vd-wizfoot .vd-linkish{flex:1 1 auto}
  #vendorDisputes .vd-row input[type=text],#vendorDisputes .vd-row input[type=password],
  #vendorDisputes .vd-row input[type=number],#vendorDisputes .vd-row select{width:100%}
}