/* Vendor Availability (.vav-*)
*
* Amazon Vendor Central's Product Availability page, inside RMS. VA2 builds the
* catalogue screen; setting a status arrives in VA4.
*
* Visual language is the teal-blue family shared with Evri Claim Generator
* (.ecg-), Message Templates (.mt-), Support Cases (.sc-) and Vendor Listing
* Builder (.vlb-). Structure copied from public/css/evriClaimGen.css, which is
* the closest match: a filtered table over many rows with per-row detail.
*
* FOUR RULES THIS FILE KEEPS
* 1. Mobile rules live ONLY inside @media (max-width:1180px) — the house
* standard. Every desktop rule below that line is byte-for-byte what it
* would be with no mobile block at all. (Do NOT copy the older .ec- block,
* which uses 880px and is out of step.)
* 2. Dark mode covers EVERY surface introduced here, not a sample of them.
* 3. Buttons state their own `background` and `color`. style.css sets an
* unscoped `button { color: white }` and polish.css:429 an unscoped
* `button.danger { background:#b42318 }` — both outrank a bare `.vav-btn`,
* and inheriting either paints an invisible label.
* 4. THE THREE STATES ARE THREE DIFFERENT LOOKS. "still loading", "not set"
* and Amazon's real "No Signal" must never render as the same grey dash.
* That is the single most likely bug on this screen, so it is designed for
* here rather than left to the renderer.
*/
:root {
--vav-primary: #0588b6;
--vav-primary-d: #03658e;
--vav-grad: linear-gradient(135deg, #03658e, #0588b6);
--vav-ink: #0f2740;
--vav-sub: #5b7183;
--vav-line: #e6edf5;
--vav-line-s: #cfdcea;
--vav-shadow: 0 10px 30px rgba(15, 23, 42, .06);
--vav-ok: #0f7b52;
--vav-warn: #9a6700;
--vav-bad: #b42318;
--vav-card: #fff;
--vav-bg-soft: #f6f9fc;
}
.vav-wrap { max-width: 1180px; margin: 0 auto; padding: 6px 4px 44px; }
/* ---------- Head ---------- */
.vav-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin: 4px 0 14px; }
.vav-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--vav-primary); }
.vav-title { font-size: 25px; font-weight: 800; color: var(--vav-ink); margin: 4px 0; line-height: 1.15; }
.vav-sub { font-size: 13.5px; color: var(--vav-sub); margin: 0; max-width: 680px; line-height: 1.5; }
.vav-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* ---------- Buttons ---------- */
.vav-btn { appearance: none; border: 1.5px solid var(--vav-line-s); background: #fff; color: #21506f; font-size: 13px; font-weight: 700; padding: 9px 15px; border-radius: 11px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: .15s; text-decoration: none; }
.vav-btn:hover:not(:disabled) { border-color: var(--vav-primary); color: var(--vav-primary); }
.vav-btn.primary { border: none; color: #fff; background: var(--vav-grad); box-shadow: 0 8px 18px rgba(5, 136, 182, .28); }
.vav-btn.primary:hover:not(:disabled) { color: #fff; filter: brightness(1.06); }
.vav-btn:disabled { opacity: .5; cursor: not-allowed; }
.vav-btn-sm { padding: 6px 11px; font-size: 12.5px; border-radius: 9px; }
/* ---------- Cards ---------- */
.vav-card { background: var(--vav-card); border: 1.5px solid var(--vav-line); border-radius: 18px; box-shadow: var(--vav-shadow); padding: 18px; margin-bottom: 16px; }
.vav-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.vav-card-head h3 { font-size: 15.5px; font-weight: 800; color: var(--vav-ink); margin: 0; }
.vav-card-head .vav-spacer { flex: 1; }
/* ---------- Summary strip ----------
A figure we could not read prints as an em dash and says so on hover; it must
never print as 0. "We could not count" and "there are none" are different
facts, and only one of them is a fault. */
.vav-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 11px; margin-bottom: 14px; }
.vav-stat { border: 1.5px solid var(--vav-line); border-radius: 13px; padding: 11px 13px; background: var(--vav-card); }
.vav-stat-l { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--vav-sub); }
.vav-stat-n { font-size: 21px; font-weight: 800; color: var(--vav-ink); margin-top: 3px; line-height: 1.1; }
.vav-stat-n.unknown { color: var(--vav-sub); font-size: 17px; font-weight: 700; }
/* ---------- Toolbar (search + filters) ---------- */
.vav-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 13px; }
.vav-search { position: relative; flex: 1; min-width: 220px; }
.vav-search-ico { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-size: 13px; opacity: .55; pointer-events: none; }
.vav-search input { width: 100%; box-sizing: border-box; border: 1.5px solid var(--vav-line-s); border-radius: 11px; padding: 9px 12px 9px 32px; font-size: 13.5px; font-family: inherit; color: var(--vav-ink); background: #fff; transition: .15s; }
.vav-search input:focus { outline: none; border-color: var(--vav-primary); box-shadow: 0 0 0 3px rgba(5, 136, 182, .13); }
.vav-select { border: 1.5px solid var(--vav-line-s); border-radius: 11px; padding: 9px 12px; font-size: 13.5px; font-family: inherit; color: var(--vav-ink); background: #fff; transition: .15s; }
.vav-select:focus { outline: none; border-color: var(--vav-primary); box-shadow: 0 0 0 3px rgba(5, 136, 182, .13); }
.vav-hint { font-size: 12px; color: var(--vav-sub); margin-top: 5px; line-height: 1.45; }
/* ---------- Chips ---------- */
.vav-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.vav-chip.ok { color: var(--vav-ok); background: #eaf7f1; border-color: #bde3d1; }
.vav-chip.warn { color: var(--vav-warn); background: #fff8e6; border-color: #f2dda0; }
.vav-chip.bad { color: var(--vav-bad); background: #fdf1f0; border-color: #f1c9c5; }
.vav-chip.neutral { color: #41607d; background: var(--vav-bg-soft); border-color: var(--vav-line-s); }
/* ================= THE THREE STATES =================
Distinct SHAPE, not just distinct colour, so they survive greyscale, a
colour-blind reader and a screenshot.
.loading a shimmering bar with NO text — there is no value to state yet
.unset a DASHED outline, italic — an empty slot waiting to be filled
.nosignal a SOLID amber chip — Amazon told us something, and this is it
A fourth look, .value, is the ordinary case.
Every one of them also carries readable text; none is a bare dash. */
.vav-state { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px; border: 1.5px solid transparent; white-space: nowrap; max-width: 100%; }
.vav-state.loading {
border-color: transparent; color: transparent; min-width: 74px; height: 20px; padding: 0;
background: linear-gradient(90deg, #eef3f8 25%, #e2eaf3 37%, #eef3f8 63%);
background-size: 400% 100%; animation: vav-sheen 1.3s ease infinite; border-radius: 999px;
}
.vav-state.unset { border-style: dashed; border-color: var(--vav-line-s); background: transparent; color: var(--vav-sub); font-weight: 700; font-style: italic; }
.vav-state.nosignal { border-color: #f2dda0; background: #fff8e6; color: var(--vav-warn); }
.vav-state.value { border-color: var(--vav-line-s); background: var(--vav-bg-soft); color: #41607d; }
.vav-state.value.ok { border-color: #bde3d1; background: #eaf7f1; color: var(--vav-ok); }
.vav-state.value.warn { border-color: #f2dda0; background: #fff8e6; color: var(--vav-warn); }
.vav-state.value.bad { border-color: #f1c9c5; background: #fdf1f0; color: var(--vav-bad); }
@keyframes vav-sheen { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .vav-state.loading, .vav-skel-l { animation: none; } }
/* The two columns are DIFFERENT FACTS and are labelled as such in the header.
A thin left rule on the intended-status cell keeps the split visible while
scanning a wide table. */
.vav-table td.vav-intended { box-shadow: inset 1px 0 0 var(--vav-line); }
/* ---------- Skeletons (per-card, never a full-screen blocker) ---------- */
.vav-skel { border: 1.5px solid var(--vav-line); border-radius: 14px; padding: 15px; background: #fff; }
.vav-skel-l { height: 11px; border-radius: 6px; background: linear-gradient(90deg, #eef3f8 25%, #e2eaf3 37%, #eef3f8 63%); background-size: 400% 100%; animation: vav-sheen 1.3s ease infinite; margin-bottom: 8px; }
.vav-skel-l.s { width: 40%; } .vav-skel-l.m { width: 68%; } .vav-skel-l.w { width: 88%; }
/* ---------- Table ---------- */
.vav-tablewrap { overflow-x: auto; border: 1.5px solid var(--vav-line); border-radius: 13px; -webkit-overflow-scrolling: touch; }
/* D-7 — `overflow: visible` UNDOES A GLOBAL RULE, and it is load-bearing.
* style.css:1 sets an unscoped `table { border-radius: 18px; overflow: hidden }`
* for rounded corners. `overflow: hidden` makes the TABLE a scroll container,
* and a sticky | then resolves against the table — which never scrolls — so
* the pinned actions column was inert with no warning. Measured: the cell sat
* at x=1931 against a scrollport edge of 1652. The rounding is not lost;
* .vav-tablewrap already carries the radius and does the clipping. */
.vav-table { border-collapse: collapse; width: 100%; min-width: 1180px; font-size: 12.5px; overflow: visible; }
/* D-3, third symptom. The shared 1180px min-width is sized for the CATALOGUE's
* eleven columns; the queue has nine and no two-line headers, so it inherited a
* width it does not need and overflowed its 1134px wrapper by 48px at rest —
* which is how the leading characters of the ASIN came to be cut off. It still
* scrolls inside the wrapper if a long value demands it; it just no longer
* starts out scrolled. */
.vav-table.vav-t-queue { min-width: 1060px; }
.vav-table th { text-align: left; padding: 9px 11px; background: var(--vav-bg-soft); color: var(--vav-ink); font-weight: 800; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; border-bottom: 1.5px solid var(--vav-line); white-space: nowrap; position: sticky; top: 0; }
.vav-table th small { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .02em; text-transform: none; color: var(--vav-sub); margin-top: 2px; }
.vav-table td { padding: 8px 11px; border-bottom: 1px solid var(--vav-line); color: var(--vav-ink); white-space: nowrap; max-width: 300px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.vav-table tbody tr:hover td { background: #f3f9fc; }
.vav-table td.empty { color: #9db0c2; }
/* D-6b — THE TITLE COLUMN GETS REAL ROOM, AND THE TITLE IS CLAMPED.
*
* Measured before this: the title cell rendered 87px wide, so a real product
* name ("10 x 3 x Coarse 4 x Medium 3 x Fine ... Grit Sandpaper") wrapped to
* nine lines and rows ran 70-228px tall, averaging 147px. Fifty of those is a
* table ~7,350px high — which is what put BOTH horizontal scrollbars off screen
* from the middle of the page and made a middle row impossible to scroll
* sideways. max-width alone never helped: under table-layout:auto it is only a
* ceiling, and the column was being squeezed nowhere near it.
*
* width + min-width give the column a floor to hold, and the clamp caps the
* height. The two together are the actual repair. */
.vav-table td.vav-title-cell, .vav-table th.vav-title-h { width: 290px; min-width: 250px; max-width: 320px; }
.vav-table td.vav-title-cell { white-space: normal; line-height: 1.35; }
/* Two lines, then an ellipsis. On an INNER SPAN, never on the cell: line-clamp
* needs display:-webkit-box, and that on a | stops it being a table cell —
* the D-3 defect exactly. The full name is one hover away (title attribute) and
* is shown complete in the Update modal, so nothing is lost. */
.vav-clamp2 { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.vav-mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; }
.vav-thumbcell { width: 46px; padding-right: 4px; }
.vav-thumb { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; border: 1px solid var(--vav-line); background: var(--vav-bg-soft); display: block; }
.vav-thumb-none { width: 34px; height: 34px; border-radius: 8px; border: 1px dashed var(--vav-line-s); background: var(--vav-bg-soft); display: flex; align-items: center; justify-content: center; font-size: 13px; opacity: .5; }
/* An identity-sync row with no vendor code cannot carry a status. Marked, not
hidden — hiding it would silently shrink the catalogue. */
.vav-table tr.vav-unsettable td:first-child { box-shadow: inset 3px 0 0 var(--vav-line-s); }
.vav-lock { font-size: 11px; color: var(--vav-sub); font-style: italic; }
/* ---------- Pager ---------- */
.vav-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 11px; font-size: 12.5px; color: var(--vav-sub); }
.vav-pager-btns { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.vav-pager-pos { font-weight: 700; color: var(--vav-ink); }
/* ---------- Banner (notices, errors) ---------- */
.vav-banner { border: 1.5px solid var(--vav-line-s); background: #eef7fb; color: #21506f; border-radius: 13px; padding: 11px 14px; font-size: 13px; margin-bottom: 14px; display: flex; align-items: flex-start; gap: 11px; flex-wrap: wrap; line-height: 1.45; }
.vav-banner.warn { border-color: #f2dda0; background: #fff8e6; color: #7a5200; }
.vav-banner.bad { border-color: #f1c9c5; background: #fdf1f0; color: var(--vav-bad); }
.vav-banner-body { flex: 1; min-width: 200px; }
.vav-banner-body b { display: block; margin-bottom: 3px; font-size: 13.5px; }
.vav-banner-body ul { margin: 5px 0 0; padding-left: 17px; }
.vav-banner-body li { margin-bottom: 2px; }
/* ---------- Readiness list (capabilities) ---------- */
.vav-caps { display: flex; flex-direction: column; gap: 9px; }
.vav-cap { border: 1.5px solid var(--vav-line); border-radius: 12px; padding: 10px 13px; background: var(--vav-card); }
.vav-cap-t { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; color: var(--vav-ink); flex-wrap: wrap; }
.vav-cap-r { font-size: 12.5px; color: var(--vav-sub); margin-top: 4px; line-height: 1.5; }
.vav-cap-s { font-size: 12.5px; color: #41607d; margin-top: 3px; line-height: 1.5; }
/* ---------- Empty state ---------- */
.vav-empty { text-align: center; padding: 34px 18px; color: var(--vav-sub); }
.vav-empty-ico { font-size: 30px; margin-bottom: 9px; }
.vav-empty h4 { margin: 0 0 6px; font-size: 15px; color: var(--vav-ink); font-weight: 800; }
.vav-empty p { margin: 0 auto 12px; font-size: 13px; line-height: 1.55; max-width: 480px; }
.vav-empty code { background: var(--vav-bg-soft); border: 1px solid var(--vav-line); border-radius: 5px; padding: 1px 5px; font-size: 12px; }
/* ---------- View tabs (Catalogue / Queue) ---------- */
.vav-tabs { display: inline-flex; gap: 6px; }
.vav-tab { appearance: none; border: 1.5px solid var(--vav-line-s); background: #fff; color: #4a6885; font-size: 13px; font-weight: 700; padding: 8px 15px; border-radius: 10px; cursor: pointer; transition: .15s; display: inline-flex; align-items: center; gap: 7px; }
.vav-tab:hover { border-color: var(--vav-primary); color: var(--vav-primary); }
.vav-tab.on { border-color: var(--vav-primary); background: var(--vav-grad); color: #fff; box-shadow: 0 6px 14px rgba(5, 136, 182, .24); }
.vav-tab.on .vav-chip { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.4); color: #fff; }
/* ---------- Selection + bulk bar ---------- */
.vav-table th.vav-tick, .vav-table td.vav-tick { width: 34px; min-width: 34px; text-align: center; padding-left: 8px; padding-right: 4px; }
.vav-table td.vav-tick input, .vav-table th.vav-tick input { width: 17px; height: 17px; }
.vav-bulk { border: 1.5px solid var(--vav-line-s); border-radius: 13px; padding: 11px 13px; margin-bottom: 13px; background: var(--vav-bg-soft); }
.vav-bulk-head { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; margin-bottom: 10px; font-size: 13px; color: var(--vav-ink); }
.vav-bulk-codes { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--vav-sub); }
.vav-bulk-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.vav-bulk-lbl { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--vav-sub); }
.vav-btn.danger { background: #fff; border-color: #f1c9c5; color: var(--vav-bad); }
.vav-btn.danger:hover:not(:disabled) { background: #fdf1f0; border-color: var(--vav-bad); color: var(--vav-bad); }
/* ---------- Row extras ---------- */
/* D-3 FIX. This was `display: flex` — ON A | .
*
* A table cell given display:flex stops being a table-cell: it is blockified,
* and the table has to wrap the surrounding cells in an anonymous row box to
* cope. Whether the flex box then stays in its row is ENGINE-DEPENDENT, which
* is why the live browser showed the actions drifting further out of line with
* every row while Chromium 151 here kept them put. It is not a rendering
* difference to design around — the construct is simply invalid, and it was the
* only structural anomaly in the row.
*
* It came from copying .ecg-rcard-acts / .vlb-acts, which are flex on a DIV
* inside a card. On a div that is correct. On a cell it is not.
*
* The same look without leaving the table model: the cell stays a cell, the
* buttons are already inline-flex, and the gap becomes a margin between them. */
/* D-7 — THE ACTIONS COLUMN IS PINNED TO THE RIGHT EDGE.
*
* A horizontal scrollbar was only ever a workaround for the controls being out
* of reach. The operator's actual need is to press Update or History on any
* row, and pinning the column removes the scrolling from that job entirely
* rather than making it easier.
*
* WHY THIS WORKS WHERE THE TOP BAR DID NOT. A sticky element resolves against
* its nearest scrolling ancestor. For the top bar that was the page, and
* `html, body { overflow-x: hidden }` (style.css:3720) had quietly turned html
* and body into scroll containers, so it pinned to the wrong scrollport and
* never moved — measured at top:-282px, i.e. scrolled straight off. This cell
* sticks inside .vav-tablewrap, which is a genuine, genuinely-scrolling
* container, so the page-level breakage cannot reach it. Verified in the
* browser, not assumed — including that the global `table { overflow: hidden }`
* in style.css does not disturb it.
*
* STICKY ON A | IS LEGITIMATE, unlike the display:flex of D-3: sticky does
* not change the box's display type, so the cell remains a table-cell and stays
* in its row.
*
* IT MUST BE OPAQUE. Scrolling columns pass underneath it, so a transparent
* cell would show two sets of text on top of each other. Background is set for
* the cell, the hover state and both themes; the left edge carries a shadow so
* it reads as a pinned layer rather than a rendering fault. */
td.vav-rowacts, .vav-rowacts { white-space: nowrap; text-align: right; max-width: none; overflow: visible; }
.vav-table td.vav-rowacts, .vav-table th.vav-acts-h {
position: sticky; right: 0; z-index: 2;
background: #fff; box-shadow: -8px 0 12px -8px rgba(15, 23, 42, .22);
}
/* The header of that column sticks in BOTH axes — down the page with the other
headers, and across with its own column. z-index above the body cells so the
two pinned layers do not fight where they cross. */
.vav-table th.vav-acts-h { z-index: 4; background: var(--vav-bg-soft); }
.vav-table tbody tr:hover td.vav-rowacts { background: #f3f9fc; }
html[data-theme="dark"] .vav-table td.vav-rowacts { background: #161f33; box-shadow: -8px 0 12px -8px rgba(0, 0, 0, .5); }
html[data-theme="dark"] .vav-table th.vav-acts-h { background: #1a2438; }
html[data-theme="dark"] .vav-table tbody tr:hover td.vav-rowacts { background: #1d2740; }
.vav-rowacts > * { vertical-align: middle; }
.vav-rowacts > * + * { margin-left: 7px; }
/* D-3 FIX, second fault. The generic td rule caps every cell at 300px and
* ellipsises the overflow, which silently ate the most important field in the
* queue: "Permanently unavailable → Temporarily unavailable" rendered as
* "Permanently unavailable → …", so the operator could not see what the item
* was being changed TO. It WRAPS instead of truncating — the row grows a line,
* which is free now that the actions cell is a real cell again, and the table
* stays narrow rather than pushing every other column off the side. */
.vav-table td.vav-change { max-width: 300px; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.9; }
.vav-linkbtn { appearance: none; background: none; border: none; padding: 0; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--vav-primary); text-decoration: underline; cursor: pointer; }
.vav-linkbtn:hover { color: var(--vav-primary-d); }
.vav-skus { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.vav-sku { font-size: 11.5px; }
/* ---------- Modal (the update form) ----------
A .vav-modal rather than ui-kit's uiPrompt: uiPrompt renders text inputs
only, and this form needs a radio group, two date fields and one of them
hidden conditionally. Every CONFIRM on this screen still comes from the kit. */
.vav-modal { position: fixed; inset: 0; z-index: 6000; display: flex; align-items: center; justify-content: center; padding: 18px; }
/* D-2. While a shared-kit confirm is open, OUR overlay steps below it.
* .ui-modal-ov is z-index 4100 (ui-kit.css:61) and this is 6000, so without
* this the confirmation renders behind our own backdrop: invisible, unclickable
* and unresolvable, which is exactly how the live screen locked. 4000 is below
* the kit and still above the page. The host div carries the class, so the
* whole overlay moves together and the backdrop cannot be left on top alone. */
#vavModalHost.vav-behind .vav-modal { z-index: 4000; }
.vav-modal-bg { position: absolute; inset: 0; background: rgba(9, 24, 40, .5); backdrop-filter: blur(2px); }
.vav-modal-shell { position: relative; background: #fff; border-radius: 19px; width: min(620px, 100%); max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 26px 70px rgba(9, 24, 40, .3); overflow: hidden; }
.vav-modal-head { display: flex; align-items: center; gap: 12px; padding: 15px 19px; border-bottom: 1.5px solid var(--vav-line); font-size: 15px; color: var(--vav-ink); }
.vav-modal-body { padding: 17px 19px; overflow-y: auto; }
.vav-modal-foot { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 19px; border-top: 1.5px solid var(--vav-line); background: #fff; }
.vav-modal-err { margin-top: 11px; border: 1.5px solid #f1c9c5; background: #fdf1f0; color: var(--vav-bad); border-radius: 10px; padding: 9px 12px; font-size: 12.5px; line-height: 1.45; }
.vav-prod { border: 1.5px solid var(--vav-line); border-radius: 13px; padding: 12px 14px; background: var(--vav-bg-soft); margin-bottom: 15px; }
.vav-prod-t { font-size: 14px; font-weight: 800; color: var(--vav-ink); line-height: 1.35; }
.vav-prod-m { font-size: 12px; color: var(--vav-sub); margin-top: 4px; line-height: 1.5; }
.vav-field { margin-bottom: 13px; }
.vav-label { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--vav-sub); margin-bottom: 5px; }
.vav-inp { width: 100%; box-sizing: border-box; border: 1.5px solid var(--vav-line-s); border-radius: 11px; padding: 9px 12px; font-size: 13.5px; font-family: inherit; color: var(--vav-ink); background: #fff; transition: .15s; }
.vav-inp:focus { outline: none; border-color: var(--vav-primary); box-shadow: 0 0 0 3px rgba(5, 136, 182, .13); }
.vav-textarea { min-height: 72px; resize: vertical; line-height: 1.5; }
.vav-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vav-radio { display: flex; align-items: flex-start; gap: 10px; border: 1.5px solid var(--vav-line-s); border-radius: 12px; padding: 10px 13px; margin-bottom: 8px; cursor: pointer; transition: .15s; }
.vav-radio:hover { border-color: var(--vav-primary); }
.vav-radio.on { border-color: var(--vav-primary); background: #f2fafd; }
.vav-radio input { margin-top: 2px; width: 17px; height: 17px; flex: 0 0 auto; }
.vav-radio b { display: block; font-size: 13.5px; color: var(--vav-ink); }
.vav-radio small { display: block; font-size: 12px; color: var(--vav-sub); margin-top: 2px; line-height: 1.45; }
/* ---------- The transfer sequence (VA3) ---------- */
.vav-banner.ok-banner { border-color: #bde3d1; background: #eaf7f1; color: var(--vav-ok); }
input[type="file"].vav-inp { padding: 8px 10px; font-size: 13px; }
/* ---------- History timeline ---------- */
.vav-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.vav-tl { display: flex; gap: 13px; align-items: flex-start; border-left: 2px solid var(--vav-line); padding-left: 13px; }
.vav-tl-w { font-size: 12px; color: var(--vav-sub); white-space: nowrap; flex: 0 0 auto; min-width: 130px; }
.vav-tl-b { font-size: 13px; color: var(--vav-ink); line-height: 1.5; }
.vav-tl-m { font-size: 12px; color: var(--vav-sub); margin-top: 2px; }
/* ================= DARK ================= */
html[data-theme="dark"] .vav-title,
html[data-theme="dark"] .vav-card-head h3,
html[data-theme="dark"] .vav-stat-n,
html[data-theme="dark"] .vav-pager-pos,
html[data-theme="dark"] .vav-empty h4,
html[data-theme="dark"] .vav-cap-t { color: #e6edf6; }
html[data-theme="dark"] .vav-sub,
html[data-theme="dark"] .vav-stat-l,
html[data-theme="dark"] .vav-hint,
html[data-theme="dark"] .vav-pager,
html[data-theme="dark"] .vav-cap-r,
html[data-theme="dark"] .vav-empty,
html[data-theme="dark"] .vav-lock { color: #94a9c0; }
html[data-theme="dark"] .vav-eyebrow { color: #6fc7e6; }
html[data-theme="dark"] .vav-card,
html[data-theme="dark"] .vav-stat,
html[data-theme="dark"] .vav-cap,
html[data-theme="dark"] .vav-skel { background: #161f33; border-color: #243049; }
html[data-theme="dark"] .vav-btn { background: #1a2438; border-color: #2f3d5a; color: #cfe3f1; }
html[data-theme="dark"] .vav-btn:hover:not(:disabled) { border-color: #6fc7e6; color: #6fc7e6; }
html[data-theme="dark"] .vav-btn.primary { color: #fff; }
html[data-theme="dark"] .vav-search input,
html[data-theme="dark"] .vav-select { background: #1a2438; border-color: #2f3d5a; color: #e6edf6; }
html[data-theme="dark"] .vav-tablewrap { border-color: #243049; }
html[data-theme="dark"] .vav-table th { background: #1a2438; color: #e6edf6; border-color: #243049; }
html[data-theme="dark"] .vav-table th small { color: #94a9c0; }
html[data-theme="dark"] .vav-table td { border-color: #243049; color: #e6edf6; }
html[data-theme="dark"] .vav-table tbody tr:hover td { background: #1d2941; }
html[data-theme="dark"] .vav-table td.empty { color: #66788c; }
html[data-theme="dark"] .vav-table td.vav-intended { box-shadow: inset 1px 0 0 #243049; }
html[data-theme="dark"] .vav-table tr.vav-unsettable td:first-child { box-shadow: inset 3px 0 0 #3a4a66; }
html[data-theme="dark"] .vav-thumb { border-color: #2f3d5a; background: #1a2438; }
html[data-theme="dark"] .vav-thumb-none { border-color: #2f3d5a; background: #1a2438; }
/* The three states, in dark. Each keeps its distinguishing SHAPE as well as a
distinguishable colour — a dashed outline stays dashed. */
html[data-theme="dark"] .vav-state.loading { background: linear-gradient(90deg, #1d2941 25%, #243049 37%, #1d2941 63%); background-size: 400% 100%; }
html[data-theme="dark"] .vav-state.unset { border-color: #3a4a66; color: #94a9c0; }
html[data-theme="dark"] .vav-state.nosignal { border-color: #4a3d1c; background: #2c2413; color: #e3c06a; }
html[data-theme="dark"] .vav-state.value { border-color: #2f3d5a; background: #1a2438; color: #cfe3f1; }
html[data-theme="dark"] .vav-state.value.ok { border-color: #1d5237; background: #10301f; color: #7ddcae; }
html[data-theme="dark"] .vav-state.value.warn { border-color: #4a3d1c; background: #2c2413; color: #e3c06a; }
html[data-theme="dark"] .vav-state.value.bad { border-color: #5b2a26; background: #2a1616; color: #f5a29a; }
html[data-theme="dark"] .vav-chip.ok { border-color: #1d5237; background: #10301f; color: #7ddcae; }
html[data-theme="dark"] .vav-chip.warn { border-color: #4a3d1c; background: #2c2413; color: #e3c06a; }
html[data-theme="dark"] .vav-chip.bad { border-color: #5b2a26; background: #2a1616; color: #f5a29a; }
html[data-theme="dark"] .vav-chip.neutral { border-color: #2f3d5a; background: #1a2438; color: #cfe3f1; }
html[data-theme="dark"] .vav-banner { background: #14283a; border-color: #244152; color: #b7d3e2; }
html[data-theme="dark"] .vav-banner.warn { background: #2c2413; border-color: #4a3d1c; color: #e3c06a; }
html[data-theme="dark"] .vav-banner.bad { background: #2a1616; border-color: #5b2a26; color: #f5a29a; }
html[data-theme="dark"] .vav-cap-s { color: #b7d3e2; }
html[data-theme="dark"] .vav-empty code { background: #1a2438; border-color: #2f3d5a; }
html[data-theme="dark"] .vav-skel-l { background: linear-gradient(90deg, #1d2941 25%, #243049 37%, #1d2941 63%); background-size: 400% 100%; }
/* VA4 surfaces — every one introduced above is covered here too. */
html[data-theme="dark"] .vav-tab { background: #1a2438; border-color: #2f3d5a; color: #cfe3f1; }
html[data-theme="dark"] .vav-tab:hover { border-color: #6fc7e6; color: #6fc7e6; }
html[data-theme="dark"] .vav-tab.on { color: #fff; }
html[data-theme="dark"] .vav-bulk { background: #1a2438; border-color: #2f3d5a; }
html[data-theme="dark"] .vav-bulk-head { color: #e6edf6; }
html[data-theme="dark"] .vav-bulk-codes, html[data-theme="dark"] .vav-bulk-lbl { color: #94a9c0; }
html[data-theme="dark"] .vav-btn.danger { background: #1a2438; border-color: #5b2a26; color: #f5a29a; }
html[data-theme="dark"] .vav-btn.danger:hover:not(:disabled) { background: #2a1616; border-color: #f5a29a; color: #f5a29a; }
html[data-theme="dark"] .vav-linkbtn { color: #6fc7e6; }
html[data-theme="dark"] .vav-linkbtn:hover { color: #9bd9ef; }
html[data-theme="dark"] .vav-modal-bg { background: rgba(0, 0, 0, .62); }
html[data-theme="dark"] .vav-modal-shell { background: #161f33; }
html[data-theme="dark"] .vav-modal-head, html[data-theme="dark"] .vav-modal-foot { border-color: #243049; background: #161f33; color: #e6edf6; }
html[data-theme="dark"] .vav-modal-err { background: #2a1616; border-color: #5b2a26; color: #f5a29a; }
html[data-theme="dark"] .vav-prod { background: #1a2438; border-color: #2f3d5a; }
html[data-theme="dark"] .vav-prod-t { color: #e6edf6; }
html[data-theme="dark"] .vav-prod-m { color: #94a9c0; }
html[data-theme="dark"] .vav-label { color: #94a9c0; }
html[data-theme="dark"] .vav-inp { background: #1a2438; border-color: #2f3d5a; color: #e6edf6; }
html[data-theme="dark"] .vav-radio { border-color: #2f3d5a; }
html[data-theme="dark"] .vav-radio:hover { border-color: #6fc7e6; }
html[data-theme="dark"] .vav-radio.on { border-color: #6fc7e6; background: #1d2941; }
html[data-theme="dark"] .vav-radio b { color: #e6edf6; }
html[data-theme="dark"] .vav-radio small { color: #94a9c0; }
html[data-theme="dark"] .vav-tl { border-color: #243049; }
html[data-theme="dark"] .vav-tl-w, html[data-theme="dark"] .vav-tl-m { color: #94a9c0; }
html[data-theme="dark"] .vav-tl-b { color: #e6edf6; }
/* VA3 surfaces. */
html[data-theme="dark"] .vav-banner.ok-banner { border-color: #1d5237; background: #10301f; color: #7ddcae; }
html[data-theme="dark"] input[type="file"].vav-inp { background: #1a2438; border-color: #2f3d5a; color: #e6edf6; }
/* ---------- Stranded batches (VA5 §1b) ---------- */
/* MOVED ABOVE THE MOBILE BLOCK IN VA6. These were written after it, which left
the screen-collapsing @media no longer last in the file. Nothing was visibly
broken — the mobile block carries no .vav-stranded rule today — but any that
were added later would have been silently overridden by these, at equal
specificity and a lower position. That is the exact failure the social module
hit and recorded. Desktop rules go above; the media query stays last. */
/* D-10 — THE BORDER WAS RED (#f1c9c5) AND IS NOT ANY MORE.
Nothing failed here: a file was generated and the loop was not closed. Red is
for something that broke, and it was being read as an error. Neutral card on
the amber banner, matching the sample-data treatment. */
.vav-stranded { border: 1.5px solid var(--vav-line-s); border-radius: 11px; padding: 10px 12px; margin-top: 9px; background: #fff; font-size: 12.5px; color: var(--vav-ink); }
/* A batch whose every change has been overtaken is quieter still — it is
tidying, not a task with a consequence attached. */
.vav-stranded.superseded { opacity: .82; border-style: dashed; }
.vav-stranded-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.vav-stranded-note { margin-top: 6px; font-size: 12px; line-height: 1.45; color: var(--vav-sub); }
.vav-stranded-acts { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 8px; }
html[data-theme="dark"] .vav-stranded { background: #1a2438; border-color: #2f3d5a; color: #e6edf6; }
html[data-theme="dark"] .vav-stranded-note { color: #94a9c0; }
/* ---------- The top horizontal scrollbar ----------
A slaved scrollbar directly above a wide table. overflow-x puts the real one
at the BOTTOM of the wrapper, which on a 50-row page is thousands of pixels
down — so the columns off the right-hand edge looked unreachable.
It is STYLED RATHER THAN LEFT TO THE PLATFORM on purpose: an overlay
scrollbar (macOS, and Windows 11's thin style) fades out when idle, and a
control nobody can see is the problem this element exists to solve. */
/* D-6b — STICKY, so it is reachable from any row.
*
* Clamping the titles cuts the table's height by roughly two thirds, but a long
* table still outruns the viewport, and a scrollbar that has scrolled off the
* top is no more use than one below the fold. It pins to the top of the
* scrolling area while its table is on screen.
*
* NO CONFLICT with what is already established: the .vav-table th rules use
* position:sticky too, but those stick INSIDE .vav-tablewrap (its own scroll
* container), whereas this element is a SIBLING of that wrapper and sticks to
* the page. Different containing blocks, so neither can capture the other. The
* z-index sits below .vav-modal (6000) and below the kit's confirm (4100), so
* it can never cover a dialog.
*
* D-5's behaviour is untouched: it still hides when the table fits, still
* re-measures on resize via ResizeObserver, and its two-way sync is still
* guarded against feedback. */
.vav-hscroll { overflow-x: auto; overflow-y: hidden; height: 12px; margin-bottom: 3px; scrollbar-width: thin; scrollbar-color: var(--vav-line-s) var(--vav-bg-soft);
position: sticky; top: 0; z-index: 3; background: var(--vav-card); padding-top: 2px; }
html[data-theme="dark"] .vav-hscroll { background: #161f33; }
.vav-hscroll-in { height: 1px; }
.vav-hscroll::-webkit-scrollbar { height: 10px; }
.vav-hscroll::-webkit-scrollbar-track { background: var(--vav-bg-soft); border-radius: 999px; }
.vav-hscroll::-webkit-scrollbar-thumb { background: var(--vav-line-s); border-radius: 999px; border: 2px solid var(--vav-bg-soft); }
.vav-hscroll::-webkit-scrollbar-thumb:hover { background: #a9bed3; }
html[data-theme="dark"] .vav-hscroll { scrollbar-color: #3a4a68 #131c2e; }
html[data-theme="dark"] .vav-hscroll::-webkit-scrollbar-track { background: #131c2e; }
html[data-theme="dark"] .vav-hscroll::-webkit-scrollbar-thumb { background: #3a4a68; border-color: #131c2e; }
/* ---------- D-8: what the returned workbook contains ---------- */
.vav-scope { margin-top: 12px; border: 1.5px solid var(--vav-line); border-radius: 12px; padding: 11px 13px; background: var(--vav-bg-soft); }
.vav-scope-t { font-size: 12.5px; font-weight: 800; color: var(--vav-ink); margin-bottom: 7px; }
.vav-scope-o { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; color: var(--vav-ink); line-height: 1.45; padding: 5px 0; cursor: pointer; }
.vav-scope-o input { margin-top: 2px; min-width: 0; flex: 0 0 auto; }
/* D-9 — the generate-without-uploading panel. It carries a background, so it
has a dark rule; `stale` recolours it to amber because an old template is a
warning rather than an error — the action still works, it is just riskier. */
.vav-tpl { margin-top: 13px; border: 1.5px solid var(--vav-line); border-radius: 12px; padding: 12px 14px; background: var(--vav-card); }
.vav-tpl.stale { border-color: #f2dda0; background: #fff8e6; }
.vav-tpl-t { font-size: 13px; font-weight: 800; color: var(--vav-ink); margin-bottom: 5px; }
.vav-tpl-warn { margin-top: 8px; border-left: 3px solid var(--vav-warn); padding: 7px 11px; background: #fff8e6; border-radius: 0 8px 8px 0; font-size: 12.5px; line-height: 1.5; color: #7a5200; }
html[data-theme="dark"] .vav-tpl { background: #161f33; border-color: #2f3d5a; }
html[data-theme="dark"] .vav-tpl.stale { background: #2a2415; border-color: #5c4a1e; }
html[data-theme="dark"] .vav-tpl-t { color: #e6edf6; }
html[data-theme="dark"] .vav-tpl-warn { background: #2a2415; color: #f0d99a; }
.vav-filescope { margin-top: 9px; font-size: 12.5px; line-height: 1.5; }
.vav-filelist { margin: 7px 0 0; padding-left: 18px; font-size: 12.5px; line-height: 1.7; }
html[data-theme="dark"] .vav-scope { background: #131c2e; border-color: #2f3d5a; }
html[data-theme="dark"] .vav-scope-t, html[data-theme="dark"] .vav-scope-o { color: #e6edf6; }
/* ---------- D-14: believed status, progress, routine copy ---------- */
/* A value WE set, not one Amazon has verified. A dotted underline and a
tooltip — legible when looked at, invisible at a glance. It must not read as
a warning: in the normal flow nothing is wrong. */
.vav-state.believed { border-bottom-style: dotted; border-bottom-width: 2px; }
.vav-routine { font-size: 13.5px; color: var(--vav-ink); line-height: 1.55; margin: 0 0 14px; }
.vav-agewarn { font-size: 12px; color: var(--vav-sub); margin: -4px 0 12px; line-height: 1.45; }
.vav-agewarn.stale { color: var(--vav-warn); }
html[data-theme="dark"] .vav-routine { color: #e6edf6; }
html[data-theme="dark"] .vav-agewarn { color: #94a9c0; }
/* ---------- VA6: pictures, mapping, stock-is-back ---------- */
/* The waiting frame is STILL. A spinner in a 34px cell that may never resolve
reads as broken; a dim frame that fills in reads as loading. */
.vav-thumb-wait { opacity: .28; }
.vav-note { font-size: 12.5px; color: var(--vav-ink-soft); margin: 0 0 11px; line-height: 1.5; }
.vav-inline { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vav-input { border: 1px solid var(--vav-line); border-radius: 8px; padding: 6px 9px; font: inherit; color: var(--vav-ink); background: #fff; }
.vav-input:focus-visible { outline: 2px solid var(--vav-accent); outline-offset: 1px; }
.vav-input-sm { width: 116px; font-size: 12.5px; padding: 4px 7px; }
html[data-theme="dark"] .vav-input { background: #1a2438; border-color: #2f3d5a; color: #e6edf6; }
html[data-theme="dark"] .vav-thumb-wait { opacity: .3; }
/* ================= MOBILE (additive only, gated at 1180px) ================= */
@media (max-width: 1180px) {
.vav-wrap { padding: 4px 2px 40px; }
.vav-title { font-size: 21px; }
.vav-card { padding: 14px; border-radius: 15px; }
.vav-head { flex-direction: column; gap: 11px; }
.vav-head-actions { width: 100%; }
.vav-head-actions .vav-btn { flex: 1; justify-content: center; }
.vav-stats { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 9px; }
/* The toolbar WRAPS rather than scrolling sideways, and every control keeps a
comfortable touch target. */
.vav-toolbar { flex-direction: column; align-items: stretch; gap: 9px; }
.vav-search { width: 100%; min-width: 0; }
.vav-select { width: 100%; }
/* A ten-column table cannot fit a phone; it scrolls INSIDE its own wrapper so
the page body never scrolls sideways. */
.vav-tablewrap { border-radius: 11px; }
.vav-table { min-width: 1040px; }
.vav-pager { flex-direction: column; align-items: stretch; gap: 9px; }
.vav-pager-btns { justify-content: space-between; }
.vav-btn { min-height: 40px; }
.vav-search input, .vav-select { min-height: 40px; }
/* VA4 surfaces. */
.vav-tabs { width: 100%; }
.vav-tab { flex: 1; justify-content: center; min-height: 40px; }
.vav-bulk-actions { flex-direction: column; align-items: stretch; }
.vav-bulk-actions .vav-btn { min-height: 40px; justify-content: center; }
.vav-table td.vav-tick input, .vav-table th.vav-tick input { width: 22px; height: 22px; }
/* D-3: stacking without flex, now that the cell is a real table cell again. */
.vav-rowacts > * { display: block; width: 100%; margin-left: 0; }
.vav-rowacts > * + * { margin-left: 0; margin-top: 5px; }
/* Sheet from the bottom, the house mobile modal shape. */
.vav-modal { padding: 0; align-items: flex-end; }
.vav-modal-shell { width: 100%; max-height: 94vh; border-radius: 19px 19px 0 0; }
.vav-modal-foot { position: sticky; bottom: 0; }
.vav-modal-foot .vav-btn { flex: 1; justify-content: center; }
.vav-row2 { grid-template-columns: 1fr; }
.vav-inp { min-height: 40px; }
.vav-tl { flex-direction: column; gap: 2px; }
.vav-tl-w { min-width: 0; }
/* VA5/VA6 surfaces. */
.vav-stranded { font-size: 12px; padding: 9px 10px; }
/* D-10 — two actions side by side do not fit a phone. */
.vav-stranded-acts { flex-direction: column; align-items: stretch; }
.vav-stranded-acts .vav-btn { width: 100%; justify-content: center; min-height: 40px; }
.vav-note { font-size: 12px; }
/* The mapping editor stacks: a 116px box beside two buttons does not fit a
phone, and the input has to stay a comfortable touch target. */
.vav-inline { width: 100%; }
.vav-input-sm { width: 100%; min-height: 40px; font-size: 15px; }
/* D-9 */
.vav-tpl { padding: 11px 12px; }
.vav-tpl .vav-btn { width: 100%; justify-content: center; min-height: 40px; }
.vav-inline .vav-btn { min-height: 40px; }
/* D-8 surfaces. */
.vav-scope-o { padding: 8px 0; }
.vav-filelist { padding-left: 15px; }
}
|