/* Production / department deliverable sheet (2026-06-19).
Columns: Person · Date · Client · Deliverable · Due Date · Status · (hover).
Sheet defaults to table-layout:auto so columns size to content and the
wrapper scrolls horizontally when cramped — content is never truncated. */
.prod-sheet-wrap {
padding: 24px;
display: flex;
flex-direction: column;
min-height: 0;
height: 100%;
/* Anchors the #186 month jump rail. Safe for the position:fixed bulk bar
that also lives in here — only transform/filter/contain would trap it. */
position: relative;
}
.prod-sheet-title {
font-size: 22px;
font-weight: 700;
margin: 0 0 4px;
}
.prod-sheet-count {
color: #666;
font-size: 13px;
margin-bottom: 12px;
}
/* Social-media dept "Open PostPilot" SSO bounce button (top of the sheet). */
.prod-sheet-actions {
margin: 0 0 12px;
}
.prod-sheet-postpilot-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
font-size: 14px;
font-weight: 600;
color: #fff;
background: #6366f1;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background .15s ease, box-shadow .15s ease;
}
.prod-sheet-postpilot-btn:hover {
background: #4f46e5;
}
.prod-sheet-postpilot-btn:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(99, 102, 241, .3);
}
.prod-sheet-postpilot-btn.is-loading {
opacity: .6;
pointer-events: none;
}
/* Design sheets' "New deliverable" button (top of the sheet) + its modal.
The modal reuses the Client List shell (.cl-modal-overlay / .cl-modal /
.cl-field / .cl-modal-actions, client-list.css) — only the fields that do not
exist there are styled here. */
.prod-sheet-new-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
font-size: 14px;
font-weight: 600;
color: #fff;
background: #16a34a;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background .15s ease, box-shadow .15s ease;
}
.prod-sheet-new-btn:hover { background: #15803d; }
.prod-sheet-new-btn:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(22, 163, 74, .3);
}
.prod-new-modal { width: 460px; }
/* The month / due-date popups are appended to AFTER the overlay, so this
sibling rule lifts them above it (.cal-popup is z-index 2000, the overlay 9999). */
.cl-modal-overlay ~ .cal-popup { z-index: 10001; }
.prod-new-clientlist {
max-height: 190px;
overflow-y: auto;
margin-top: 6px;
display: flex;
flex-direction: column;
gap: 2px;
font-size: 13px;
color: #6b7280;
}
.prod-new-clientopt {
text-align: left;
padding: 7px 10px;
border: none;
border-radius: 6px;
background: transparent;
font-size: 13.5px;
color: #111827;
cursor: pointer;
}
.prod-new-clientopt:hover { background: rgba(99, 102, 241, .1); }
.prod-new-fixed {
padding: 9px 12px;
border-radius: 8px;
background: rgba(15, 23, 42, .05);
font-size: 14px;
font-weight: 600;
color: #111827;
}
.prod-new-picker {
align-self: flex-start;
padding: 8px 14px;
border: 1px dashed rgba(15, 23, 42, .28);
border-radius: 8px;
background: #fff;
font-size: 13.5px;
color: #111827;
cursor: pointer;
}
.prod-new-picker:hover { border-color: #6366f1; color: #4f46e5; }
.prod-new-startsat { font-weight: 600; }
.prod-new-msg { min-height: 18px; margin: 0; }
.prod-new-msg.is-error { color: #dc2626; }
/* Phone widths: the modal fills the screen and its footer sits where the global
chat bubble floats, so keep the primary button clear of it. */
@media (max-width: 600px) {
.prod-new-modal { width: 100%; }
.prod-new-modal .cl-modal-actions { padding-right: 60px; }
}
/* Free-text search bar above the sheet. Flex row so the #188 Months filter
button sits beside the search input rather than under it. */
.prod-sheet-searchbar {
margin: 0 0 12px;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.prod-sheet-search {
width: 100%;
max-width: 360px;
box-sizing: border-box;
padding: 8px 12px;
font-size: 14px;
color: #1a1a1a;
border: 1.5px solid #e2e8f0;
border-radius: 8px;
background: #fff;
transition: border-color .15s ease, box-shadow .15s ease;
}
.prod-sheet-search:focus {
outline: none;
border-color: #6366f1;
box-shadow: 0 0 0 3px rgba(99, 102, 241, .12);
}
.prod-sheet-search::placeholder { color: #9ca3af; }
/* ── #188 Months filter button + checklist ─────────────────────────────── */
.prod-sheet-months-btn {
flex: 0 0 auto;
padding: 8px 14px;
font-size: 14px;
font-weight: 600;
color: #334155;
background: #fff;
border: 1.5px solid #e2e8f0;
border-radius: 8px;
cursor: pointer;
transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.prod-sheet-months-btn:hover { border-color: #cbd5e1; }
/* Filtered state is loud on purpose: an empty-looking sheet must never be a
mystery — the button says so. */
.prod-sheet-months-btn.is-active {
color: #4338ca;
border-color: #6366f1;
background: #eef2ff;
}
.prod-month-menu {
max-height: 340px;
overflow-y: auto;
min-width: 210px;
padding: 6px;
}
.prod-month-menu-actions {
display: flex;
gap: 6px;
padding: 2px 4px 6px;
border-bottom: 1px solid #e2e8f0;
margin-bottom: 4px;
}
.prod-month-menu-action {
flex: 1 1 auto;
padding: 4px 8px;
font-size: 12px;
font-weight: 600;
color: #475569;
background: #f1f5f9;
border: none;
border-radius: 6px;
cursor: pointer;
}
.prod-month-menu-action:hover { background: #e2e8f0; }
.prod-month-opt {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px;
font-size: 13px;
color: #1a1a1a;
border-radius: 6px;
cursor: pointer;
}
.prod-month-opt:hover { background: #f1f5f9; }
.prod-month-opt input { accent-color: #6366f1; cursor: pointer; }
.prod-month-opt-count {
margin-left: auto;
font-size: 11px;
font-weight: 600;
color: #94a3b8;
}
/* ── #186 month jump rail ──────────────────────────────────────────────── */
/* Pinned to the right edge of the sheet. The scroll container deliberately
hides its native scrollbar, and rows are lazy-loaded by month, so this rail
(not a scrollbar) is the fast way down: a tick re-anchors the lazy window. */
/* A HORIZONTAL strip in the toolbar, not a floating vertical rail.
It was vertical and absolutely positioned at first, which put it on top of
the table's last column. Reserving space with padding could not fix that:
the sheet's table already overflows its scroll container, so padding just
adds scrollable space past the end and the Status column keeps rendering
under the overlay. Sitting in the toolbar, it cannot occlude anything. */
.prod-month-rail {
display: flex;
flex-direction: row;
align-items: center;
gap: 2px;
margin: 0 0 10px;
padding: 4px 6px;
background: #f8fafc;
border: 1px solid #e5e7eb;
border-radius: 999px;
max-width: 100%;
overflow-x: auto;
scrollbar-width: none;
}
.prod-month-rail::-webkit-scrollbar { display: none; }
.prod-rail-tick {
padding: 3px 8px;
font-size: 11px;
font-weight: 600;
line-height: 1.4;
color: #64748b;
background: none;
border: none;
border-radius: 999px;
cursor: pointer;
white-space: nowrap;
transition: background .12s ease, color .12s ease;
}
.prod-rail-tick:hover { background: #eef2ff; color: #4338ca; }
.prod-rail-tick.is-current { background: #6366f1; color: #fff; }
/* A month hidden by the #188 filter stays on the rail but reads as off —
clicking it un-hides and jumps, which is the obvious way back. */
.prod-rail-tick.is-hidden-month { opacity: .38; text-decoration: line-through; }
.prod-sheet-status {
color: #666;
font-size: 14px;
margin-top: 12px;
}
/* Scroll container — body scrolls vertically (header pinned) and, when the
sheet is wider than the viewport, horizontally too. position:relative so
the hover action layers pin to its edges. We never truncate content. */
.prod-sheet-scroll {
flex: 1 1 auto;
min-height: 0;
max-height: calc(100vh - 220px);
overflow: auto;
border: 1px solid #e5e7eb;
border-radius: 8px;
position: relative;
/* Hide the scrollbar cross-browser; scrolling still works. */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* old Edge / IE */
}
.prod-sheet-scroll::-webkit-scrollbar { display: none; } /* Chrome/Safari */
.prod-sheet-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
table-layout: auto;
}
.prod-sheet-table thead th {
position: sticky;
top: 0;
z-index: 1;
background: #f8f9fb;
text-align: left;
font-weight: 600;
font-size: 12px;
letter-spacing: .03em;
text-transform: uppercase;
color: #6b7280;
padding: 10px 14px;
padding-right: 28px;
border-bottom: 1px solid #e5e7eb;
white-space: nowrap;
}
.prod-sheet-cell {
padding: 10px 14px;
padding-right: 28px;
border-bottom: 1px solid #f0f0f2;
text-align: left;
white-space: nowrap;
}
.prod-col-client { font-weight: 600; vertical-align: middle; }
/* When the Agri4All product-upload ▶ toggle is present, the cell content is
wrapped in an inner flex span so the toggle sits inline to the LEFT of the
client name/badge, vertically centered — WITHOUT flexing the itself, so
the cell keeps its normal table-cell box/height/baseline and stays aligned
with the sibling cells in the row. The toggle button (.prod-a4apu-expand)
keeps its existing 22px box; its margin-right supplies the gap to the name. */
.prod-client-toggle-wrap {
display: inline-flex;
align-items: center;
}
.prod-client-toggle-wrap > .prod-a4apu-expand { flex: 0 0 auto; }
/* Client cell with a rating badge sitting above-and-left of the name. */
.prod-client-rated {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
line-height: 1.2;
}
.prod-client-rated .rating-badge { height: 15px; font-size: 9px; padding: 1px 6px; }
.prod-client-rated .prod-client-name { display: block; }
.prod-col-date { color: #555; }
.prod-col-status { overflow: visible; }
.prod-col-due { overflow: visible; }
.prod-col-person { width: 1%; }
/* Agri4All Links sheet only: the Seller column sits between Deliverable and Due.
overflow:visible lets the seller-picker popup anchor without clipping. */
.prod-col-seller { overflow: visible; white-space: nowrap; vertical-align: middle; }
/* Deliverable cell: title + at-a-glance prop chips. Constrain the cell so the
chips/badges wrap WITHIN it and never spill into the Due Date column. The
chip strip is allowed to wrap (normal white-space); a max-width + a right gap
keep the content bounded and readable against the next column. */
.prod-col-deliverable {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
}
/* Per-row hover cascade. Each row owns its action elements (built in JS):
left icons live in the Person cell, right arrows in the Status cell. On
:hover the Person cell opens a left "drawer" (animated padding) and the icons
fade in; the right arrows fade into the Status cell's empty right area. Each
row transitions independently, so scrolling/scanning DOWN opens rows in a
cascade and passed rows hold briefly then slowly close. Opening is immediate;
closing waits .4s then eases over .7s (the trailing cascade). Leaving the
sheet adds .sheet-left → everything snaps shut fast. */
/* The padding-left "drawer" transition applies to BOTH the header th and the
tbody td so the whole Person column slides together. Only the tbody td gets
position:relative (it anchors the absolutely-positioned left-action drawer);
the th must keep the thead's position:sticky so the header stays pinned —
scoping position:relative to td.prod-col-person (not the bare class) avoids
un-pinning the sticky header. */
.prod-sheet-table th.prod-col-person,
.prod-sheet-table td.prod-col-person {
/* The hover gap glides in over 0.3s ease-in-out (the row slides right to expose
the left-action icons). padding-left is a layout property, so this reflows the
table each frame — but the sheet now renders only the CURRENT month up front
and lazy-loads the rest, so the rendered row count is small and the reflow is
cheap (the old full-table-rendered version was the source of the prior lag).
Leaving the sheet collapses fast via the .sheet-left override below. */
transition: background .12s ease, padding-left 0.3s ease-in-out;
}
.prod-sheet-table td.prod-col-person {
position: relative;
}
/* Hover anywhere on the SHEET → reserve the left gap on every row AND the month
header bands (one smooth .3s shift right, no per-row toggle/flicker). Only the
icons fade in per-row (below). */
.prod-sheet-table:hover .prod-col-person,
.prod-sheet-table:hover .prod-month-cell {
/* Default (non-production sheets): only the eye icon, so a small shift
(~28px icon + side padding ≈ 40px). */
padding-left: 40px;
}
/* Production sheet shows up to 3 left icons (eye + builder + portal), but ARTICLE
rows on the production sheet add a 4th (repeat-month) icon whose drawer right
edge reaches ~134px (10px offset + 4×28px icons + 3×4px gaps). Reserve enough
that the 4th icon clears the person avatar with breathing room (~140px). */
.prod-sheet-table.prod-has-left-icons:hover .prod-col-person,
.prod-sheet-table.prod-has-left-icons:hover .prod-month-cell {
padding-left: 140px;
}
/* Article sheets (eye + repeat-month button = 2 left icons): reserve a mid gap.
The eye+repeat drawer right edge is ~70px (10px offset + 28px eye + 4px gap +
28px repeat); pad to ~96px so the repeat button clears the person avatar with
comfortable breathing room instead of overlapping it. Keep this in lockstep
with the .prod-month-cell selector below or the month-band header misaligns. */
.prod-sheet-table.prod-has-repeat:hover .prod-col-person,
.prod-sheet-table.prod-has-repeat:hover .prod-month-cell {
padding-left: 96px;
}
.prod-col-status { position: relative; }
.prod-row-left-actions {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
display: flex;
gap: 4px;
opacity: 0;
pointer-events: none;
transition: opacity .2s ease;
}
/* .prod-row-right-actions removed 2026-08-06 with the advance/back/branch
arrows. Only the LEFT hover drawer survives. */
.prod-sheet-row:hover .prod-row-left-actions {
opacity: 1;
pointer-events: auto;
}
.prod-sheet-cell { transition: background .12s ease; }
.prod-sheet-row:hover > .prod-sheet-cell { background: #f6f8fc; }
/* Single-row slide-out: when a status change moves a row out of this sheet's
filter, just that collapses (fade + zero height) then is removed —
no full reload. */
.prod-sheet-row.is-removing > .prod-sheet-cell {
opacity: 0;
transition: opacity .25s ease, padding .25s ease;
padding-top: 0;
padding-bottom: 0;
}
/* Month group header rows — sheets are grouped by month, newest first; the
Date column is hidden and this band labels each group ("August 2026").
Sticky just under the (sticky) thead so the current month stays visible. */
.prod-month-row > .prod-month-cell {
padding: 9px 14px;
/* Match the row's 0.3s ease-in-out hover slide. NOTE: do NOT use transform to
animate this — the band is position:sticky (below) and a transform would
create a containing block and break the sticky pinning. padding-left keeps
sticky intact. */
transition: padding-left 0.3s ease-in-out;
background: #eef2f7;
color: #334155;
font-weight: 700;
font-size: 13px;
border-top: 1px solid #e2e8f0;
border-bottom: 1px solid #e2e8f0;
position: sticky;
top: 38px; /* sits just below the sticky header row */
z-index: 2;
}
/* #167 — month-scoped select box, inline at the head of the month band. Sits
on the band's own baseline (the band is sticky, so it scrolls with it). */
.prod-month-row > .prod-month-cell > .prod-month-cb {
width: 14px;
height: 14px;
margin: 0 10px 0 0;
vertical-align: -2px;
cursor: pointer;
accent-color: #2563eb;
}
/* Leaving the sheet → fast collapse (override the slow cascade timings). */
.prod-sheet-table.sheet-left .prod-col-person,
.prod-sheet-table.sheet-left .prod-month-cell,
.prod-sheet-table.sheet-left .prod-row-left-actions {
transition-duration: .15s;
transition-delay: 0s;
}
/* ── Person avatar ─────────────────────────────────────────────────── */
.prod-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
border: 1.5px solid transparent;
font-size: 11px;
font-weight: 700;
line-height: 1;
color: #fff;
cursor: pointer;
padding: 0;
user-select: none;
transition: transform .1s ease, border-color .1s ease;
}
.prod-avatar:hover { transform: scale(1.12); border-color: #6366f1; }
.prod-avatar.is-empty {
background: transparent;
border: 1.5px dashed #cbd5e1;
color: #94a3b8;
}
.prod-avatar.is-empty::before { content: '+'; font-size: 15px; font-weight: 400; }
.prod-avatar:disabled { opacity: .55; cursor: progress; }
/* ── Due-date button (no native input, no calendar glyph) ──────────── */
.prod-due-btn {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border: 1px solid transparent;
border-radius: 6px;
background: transparent;
color: #374151;
font: inherit;
font-size: 13px;
cursor: pointer;
white-space: nowrap;
transition: border-color .12s ease, background .12s ease, opacity .12s ease;
}
.prod-due-btn:hover { border-color: #e5e7eb; background: #fafafa; }
.prod-due-btn.is-saving { opacity: .55; cursor: progress; }
.prod-due-btn.is-error { border-color: #ef4444; background: #fef2f2; color: #b91c1c; }
/* Empty state: an obvious dashed, clickable "Set due date" placeholder chip. */
.prod-due-btn.is-empty {
border: 1px dashed #cbd5e1;
background: #f8fafc;
color: #64748b;
font-size: 12px;
gap: 4px;
}
.prod-due-btn.is-empty:hover { border-color: #94a3b8; background: #f1f5f9; color: #334155; }
/* ── Calendar popup (appended to , fixed-positioned) ─────────── */
.cal-popup {
position: fixed;
z-index: 2000;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 12px;
box-shadow: 0 12px 34px rgba(0, 0, 0, .16);
padding: 10px;
width: 248px;
box-sizing: border-box;
/* positionFloating clamps max-height to the space actually available, so a
calendar opened near the bottom of a short viewport MUST be able to scroll
— without this it silently clipped the last week of the month. */
overflow-y: auto;
}
.cal-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 6px;
}
.cal-title { font-size: 13px; font-weight: 700; color: #1f2937; }
.cal-nav {
width: 26px;
height: 26px;
border: 1px solid #e5e7eb;
border-radius: 7px;
background: #fff;
color: #475569;
font-size: 15px;
line-height: 1;
cursor: pointer;
}
.cal-nav:hover { border-color: #6366f1; color: #4338ca; background: #eef2ff; }
.cal-dow {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
margin-bottom: 2px;
}
.cal-dow span {
text-align: center;
font-size: 10px;
font-weight: 700;
color: #94a3b8;
text-transform: uppercase;
}
.cal-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
}
.cal-day {
height: 28px;
border: none;
border-radius: 7px;
background: transparent;
color: #1f2937;
font: inherit;
font-size: 12px;
cursor: pointer;
}
.cal-day.is-empty { visibility: hidden; cursor: default; }
.cal-day:hover:not(.is-empty) { background: #f1f5f9; }
.cal-day.is-today { font-weight: 700; color: #4338ca; }
.cal-day.is-selected { background: #6366f1; color: #fff; font-weight: 700; }
.cal-foot {
display: flex;
justify-content: flex-end;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid #f0f0f2;
}
.cal-clear {
border: 1px solid #e5e7eb;
border-radius: 7px;
background: #fff;
color: #64748b;
font-size: 12px;
font-weight: 600;
padding: 5px 12px;
cursor: pointer;
}
.cal-clear:hover { border-color: #ef4444; color: #ef4444; background: #fef2f2; }
/* ── Deliverable-month column + button (mirrors the due-date button) ── */
.prod-col-month { overflow: visible; }
.prod-month-btn {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border: 1px solid transparent;
border-radius: 6px;
background: transparent;
color: #374151;
font: inherit;
font-size: 13px;
cursor: pointer;
white-space: nowrap;
transition: border-color .12s ease, background .12s ease, opacity .12s ease;
}
.prod-month-btn:hover { border-color: #e5e7eb; background: #fafafa; }
.prod-month-btn.is-saving { opacity: .55; cursor: progress; }
.prod-month-btn.is-error { border-color: #ef4444; background: #fef2f2; color: #b91c1c; }
.prod-month-btn.is-empty {
border: 1px dashed #cbd5e1;
background: #f8fafc;
color: #64748b;
font-size: 12px;
gap: 4px;
}
.prod-month-btn.is-empty:hover { border-color: #94a3b8; background: #f1f5f9; color: #334155; }
/* ── Month picker popup (reuses .cal-popup shell, 3×4 month grid) ───── */
.month-popup { width: 220px; }
.month-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4px;
}
.month-cell {
height: 34px;
border: 1px solid #e5e7eb;
border-radius: 7px;
background: #fff;
color: #1f2937;
font: inherit;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: border-color .12s ease, background .12s ease;
}
.month-cell:hover { border-color: #6366f1; background: #eef2ff; }
.month-cell.is-selected { background: #6366f1; border-color: #6366f1; color: #fff; }
/* ── Status pill ───────────────────────────────────────────────────── */
.prod-status-pill,
.prod-dept-pill {
display: inline-flex;
align-items: center;
gap: 7px;
max-width: 100%;
padding: 4px 10px;
border: 1px solid var(--pill, #e5e7eb);
border-radius: 999px;
background: color-mix(in srgb, var(--pill, #e5e7eb) 12%, #fff);
color: #1f2937;
font: inherit;
font-size: 13px;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
white-space: nowrap;
transition: background .12s ease, border-color .12s ease, opacity .12s ease;
}
.prod-status-pill:hover:not(:disabled),
.prod-dept-pill:hover:not(:disabled) {
background: color-mix(in srgb, var(--pill, #e5e7eb) 22%, #fff);
}
.prod-status-pill.is-unset {
border-style: dashed;
border-color: #cbd5e1;
background: transparent;
color: #94a3b8;
font-weight: 500;
}
.prod-status-pill:disabled {
cursor: default;
border: none;
background: transparent;
color: #cbd5e1;
padding-left: 0;
}
.prod-status-pill.is-saving,
.prod-dept-pill.is-saving { opacity: .55; cursor: progress; }
.prod-status-pill.is-error,
.prod-dept-pill.is-error {
border-color: #ef4444 !important;
background: #fef2f2 !important;
color: #b91c1c;
}
.prod-status-dot {
flex: 0 0 auto;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--pill, transparent);
}
.prod-status-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.prod-status-chev {
flex: 0 0 auto;
display: inline-flex;
color: #9ca3af;
margin-left: 1px;
}
.prod-status-pill.is-unset .prod-status-dot { display: none; }
/* ── Status dropdown (appended to , fixed-positioned) ─────────── */
.prod-status-menu {
position: fixed;
z-index: 2000;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0, 0, 0, .14);
padding: 6px;
/* Floor under the inline clamp positionFloating sets, so a menu mounted
without positioning still scrolls rather than growing off-screen. */
max-height: 60vh;
overflow-y: auto;
/* .prod-status-option is white-space:nowrap, so a long status label would
otherwise add a horizontal scrollbar beside the vertical one. */
overflow-x: hidden;
}
.prod-status-option {
display: flex;
align-items: center;
gap: 9px;
width: 100%;
padding: 8px 10px;
border: none;
border-radius: 7px;
background: transparent;
color: #1f2937;
font: inherit;
font-size: 13px;
font-weight: 500;
text-align: left;
cursor: pointer;
white-space: nowrap;
}
.prod-status-option:hover { background: #f1f5f9; }
.prod-status-option.is-current { background: #eef2ff; font-weight: 600; }
.prod-status-option .prod-status-dot { width: 11px; height: 11px; }
/* ── Employee picker (reuses .prod-status-menu) ─────────────────────── */
.prod-emp-menu { min-width: 220px; }
.prod-emp-dot {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
font-size: 9px;
font-weight: 700;
line-height: 1;
color: #fff;
}
.prod-emp-option.prod-emp-me { font-weight: 600; }
.prod-emp-option.prod-emp-clear {
margin-top: 4px;
padding-top: 8px;
border-top: 1px solid #f0f0f2;
border-radius: 0 0 7px 7px;
color: #64748b;
}
.prod-emp-option.prod-emp-clear:hover { background: #fef2f2; color: #ef4444; }
/* Action buttons — reuse the legacy proagri look. */
.proagri-sheet-row-action-btn {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: none;
border-radius: 6px;
background: transparent;
color: #94a3b8;
cursor: pointer;
padding: 4px;
transition: background .15s ease, color .15s ease;
}
.proagri-sheet-row-action-btn:hover {
background: rgba(128, 128, 128, 0.15);
color: #333;
}
.proagri-sheet-row-action-btn svg {
width: 16px;
height: 16px;
fill: currentColor;
display: block;
}
.proagri-sheet-row-action-btn.action-view { color: #3b82f6; }
.proagri-sheet-row-action-btn.action-view:hover { background: rgba(59, 130, 246, 0.15); color: #2563eb; }
.proagri-sheet-row-action-btn.action-upload { color: #8b5cf6; }
.proagri-sheet-row-action-btn.action-upload:hover { background: rgba(139, 92, 246, 0.15); color: #7c3aed; }
/* .action-advance is still produced by pages/admin/proposal-page.js (the
proposal pipeline's Advance/Approve buttons) and by the video inbox's
"Schedule shoot ›" — it is NOT dead, do not remove it with the sheet arrows.
.action-undo / .action-branch had no producer left after 2026-08-06. */
.proagri-sheet-row-action-btn.action-advance { color: #3498db; }
.proagri-sheet-row-action-btn.action-advance:hover { background: rgba(52, 152, 219, 0.15); color: #2563eb; }
/* ── Agri4All product-uploads: synced website-URL field (Status cell) ──────
Writes metadata.website_url + metadata.no_website; mirrored by the dashboard
Website card so both surfaces stay in sync. */
.prod-website-field {
display: inline-flex;
align-items: center;
gap: 8px;
margin-left: 8px;
vertical-align: middle;
}
.prod-website-input {
font-size: 13px;
padding: 4px 8px;
border: 1px solid #cbd5e1;
border-radius: 6px;
min-width: 180px;
color: #111827;
background: #fff;
transition: border-color .15s ease, box-shadow .15s ease;
}
.prod-website-input:focus {
outline: none;
border-color: #6366f1;
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.18);
}
.prod-website-input:disabled {
background: #f3f4f6;
color: #9ca3af;
cursor: not-allowed;
}
.prod-nowebsite {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
color: #64748b;
white-space: nowrap;
cursor: pointer;
user-select: none;
}
.prod-nowebsite input { cursor: pointer; }
/* Saving / error state on the field. */
.prod-website-field.is-saving .prod-website-input { border-color: #6366f1; }
.prod-website-field.is-error .prod-website-input {
border-color: #ef4444;
box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.18);
}
/* ── Agri4All Links: SELLER column (chip / link button + picker popup) ──────
The cell shows a "👤 " chip when a seller is linked (click → re-pick) or
a dashed "Link seller" button when not. Both match the sheet's existing
chip/button look (mirrors .prod-due-btn / .prod-prop-chip). The picker reuses
the body-appended .prod-status-menu shell. */
.prod-seller-chip,
.prod-seller-link {
display: inline-flex;
align-items: center;
gap: 5px;
max-width: 180px;
padding: 4px 10px;
border: 1px solid transparent;
border-radius: 6px;
background: transparent;
color: #374151;
font: inherit;
font-size: 13px;
cursor: pointer;
white-space: nowrap;
transition: border-color .12s ease, background .12s ease, opacity .12s ease;
}
.prod-seller-chip:hover { border-color: #e5e7eb; background: #fafafa; }
.prod-seller-chip .prod-seller-ic { font-size: 12px; flex: 0 0 auto; line-height: 1; }
.prod-seller-chip .prod-seller-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Empty state: an obvious dashed, clickable "Link seller" placeholder chip. */
.prod-seller-link {
border: 1px dashed #cbd5e1;
background: #f8fafc;
color: #64748b;
font-size: 12px;
}
.prod-seller-link:hover { border-color: #94a3b8; background: #f1f5f9; color: #334155; }
.prod-seller-chip.is-saving,
.prod-seller-link.is-saving { opacity: .55; cursor: progress; }
.prod-seller-chip.is-error,
.prod-seller-link.is-error { border-color: #ef4444; background: #fef2f2; color: #b91c1c; }
/* Seller picker popup (extends .prod-status-menu — body-appended, fixed). */
.prod-seller-menu { padding: 8px; }
.prod-seller-search { margin-bottom: 6px; }
.prod-seller-input {
width: 100%;
box-sizing: border-box;
font-size: 13px;
padding: 6px 9px;
border: 1px solid #cbd5e1;
border-radius: 7px;
color: #111827;
background: #fff;
transition: border-color .15s ease, box-shadow .15s ease;
}
.prod-seller-input:focus {
outline: none;
border-color: #6366f1;
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.18);
}
.prod-seller-results {
max-height: 240px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 1px;
}
.prod-seller-hint {
padding: 10px 8px;
font-size: 12px;
color: #94a3b8;
text-align: center;
}
.prod-seller-option {
justify-content: space-between;
gap: 10px;
}
.prod-seller-option .prod-seller-opt-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.prod-seller-option .prod-seller-opt-src {
flex: 0 0 auto;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .03em;
color: #94a3b8;
background: #f1f5f9;
border-radius: 4px;
padding: 1px 6px;
}
/* Blocked-advance highlight on a row + transient reason bubble. */
.prod-sheet-row.is-blocked > .prod-sheet-cell {
background: rgba(239, 68, 68, 0.08);
transition: background .2s ease;
}
.prod-col-status { position: relative; }
.prod-block-msg {
position: absolute;
right: 8px;
bottom: calc(100% + 4px);
z-index: 5;
max-width: 320px;
/* The sheet cells force nowrap — without this the long gate message stays on
one line, overflows the 320px bubble and gets clipped by the sheet scroll
container (seen on the GA "setup checklist" gate). Let it wrap. */
white-space: normal;
width: max-content;
background: #1f2937;
color: #fff;
font-size: 12px;
line-height: 1.35;
padding: 7px 10px;
border-radius: 8px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
opacity: 0;
transform: translateY(4px);
transition: opacity .2s ease, transform .2s ease;
pointer-events: none;
}
.prod-block-msg.is-show { opacity: 1; transform: translateY(0); }
/* A status-menu option disabled by the advance gate. */
.prod-status-option.is-blocked-option {
opacity: 0.45;
cursor: not-allowed;
}
@media (max-width: 700px) {
.prod-sheet-wrap { padding: 14px; }
.prod-sheet-scroll { max-height: calc(100vh - 200px); }
.prod-sheet-table { font-size: 13px; }
/* The strip stays on phones — it scrolls sideways on its own and costs one
row of height, which is a fair trade for reaching December in one tap. */
.prod-month-rail { margin-bottom: 8px; }
}
/* ── Agri4All banners: Scheduled date+time field (Status cell) ───────────
Shown on the GA-upload statuses (ready_for_scheduling/scheduled/posted) of
an agri4all-banners row. A styled date + time pair; setting both auto-
advances the row to 'scheduled'. Mirrors .prod-website-field layout. */
.prod-scheduled-field {
display: inline-flex;
align-items: center;
gap: 6px;
margin-left: 8px;
vertical-align: middle;
}
.prod-scheduled-icon {
display: inline-flex;
align-items: center;
color: #0ea5e9;
}
.prod-scheduled-icon svg { width: 16px; height: 16px; display: block; }
.prod-scheduled-date,
.prod-scheduled-time {
font: inherit;
font-size: 13px;
padding: 4px 8px;
border: 1px solid #cbd5e1;
border-radius: 6px;
color: #111827;
background: #fff;
transition: border-color .15s ease, box-shadow .15s ease;
}
.prod-scheduled-time { width: 110px; }
/* flatpickr altInput inherits the original input's class, so it picks up the
sizing/border styles above. Keep readable widths for the formatted text. */
.prod-scheduled-field input.flatpickr-input.prod-scheduled-date { width: 130px; }
.prod-scheduled-field input.flatpickr-input.prod-scheduled-time { width: 100px; }
.prod-scheduled-field .flatpickr-input[readonly] { background: #fff; cursor: pointer; }
.prod-scheduled-date:focus,
.prod-scheduled-time:focus {
outline: none;
border-color: #0ea5e9;
box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.18);
}
.prod-scheduled-field.is-saving .prod-scheduled-date,
.prod-scheduled-field.is-saving .prod-scheduled-time { border-color: #0ea5e9; }
.prod-scheduled-field.is-error .prod-scheduled-date,
.prod-scheduled-field.is-error .prod-scheduled-time {
border-color: #ef4444;
box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.18);
}
/* ── Banner ▶ expand toggle (Deliverable cell) ─────────────────────────── */
.prod-banner-expand {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
margin-right: 6px;
padding: 0;
border: none;
border-radius: 6px;
background: transparent;
color: #64748b;
cursor: pointer;
vertical-align: middle;
transition: background .12s ease, color .12s ease, transform .15s ease;
}
.prod-banner-expand svg { width: 16px; height: 16px; display: block; transition: transform .15s ease; }
.prod-banner-expand:hover { background: rgba(14, 165, 233, 0.14); color: #0284c7; }
.prod-banner-expand.is-open svg { transform: rotate(90deg); }
/* ── Banner size sub-rows (expanded) ───────────────────────────────────── */
.prod-banner-subrow > .prod-banner-sub-cell {
padding: 0;
border-bottom: 1px solid #f0f0f2;
background: #f8fafc;
}
.prod-banner-sub-wrap {
padding: 8px 14px 8px 56px; /* indent past the Person column + expand toggle */
display: flex;
flex-direction: column;
gap: 6px;
}
.prod-banner-sub-empty {
font-size: 13px;
color: #94a3b8;
font-style: italic;
}
.prod-banner-sub-line {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.prod-banner-sub-label {
flex: 0 0 auto;
min-width: 120px;
font-size: 13px;
font-weight: 700;
color: #334155;
}
.prod-banner-sub-actions {
display: inline-flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.prod-banner-link {
font-size: 12px;
color: #2563eb;
text-decoration: none;
max-width: 360px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.prod-banner-link:hover { text-decoration: underline; }
.prod-banner-link.is-empty { color: #94a3b8; font-style: italic; }
.prod-banner-btn {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border: 1px solid #e5e7eb;
border-radius: 7px;
background: #fff;
color: #475569;
font: inherit;
font-size: 12px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.prod-banner-btn svg { width: 14px; height: 14px; display: block; }
.prod-banner-download:hover { border-color: #0ea5e9; color: #0284c7; background: #f0f9ff; }
.prod-banner-copy:hover { border-color: #6366f1; color: #4338ca; background: #eef2ff; }
.prod-banner-copy.is-copied {
border-color: #16a34a;
color: #15803d;
background: #f0fdf4;
}
.prod-banner-copy.is-copied span::after { content: ' ✓'; }
@media (max-width: 700px) {
.prod-banner-sub-wrap { padding-left: 24px; }
.prod-scheduled-field { flex-wrap: wrap; }
}
/* VIEW-ONLY magazine subtype badge — shown inline before the deliverable
title on the editorial/design sheets. Non-interactive: just a colored pill.
Color comes from the inline --mag / background set by magBadgeHtml(). */
.prod-mag-badge {
display: inline-block;
vertical-align: middle;
margin-right: 6px;
padding: 2px 8px;
border-radius: 999px;
background: var(--mag, #6b7280);
color: #fff;
font-size: 11px;
font-weight: 600;
line-height: 1.4;
white-space: nowrap;
letter-spacing: 0.2px;
pointer-events: none;
user-select: none;
}
/* ── WS-D: at-a-glance per-row property strip (Deliverable cell) ────────── */
.prod-prop-strip {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 5px;
margin-left: 8px;
max-width: 100%;
vertical-align: middle;
}
.prod-due-badge {
display: inline-flex;
align-items: center;
padding: 1px 7px;
border-radius: 999px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.3px;
line-height: 1.5;
white-space: nowrap;
pointer-events: none;
user-select: none;
}
.prod-due-badge.is-overdue {
background: #fef2f2;
color: #b91c1c;
border: 1px solid #fecaca;
}
.prod-due-badge.is-soon {
background: #fffbeb;
color: #b45309;
border: 1px solid #fde68a;
}
/* Status-specific informational chips (counts, stages, schedule, flags). */
.prod-prop-chip {
display: inline-flex;
align-items: center;
padding: 1px 8px;
border-radius: 999px;
background: #f1f5f9;
color: #475569;
border: 1px solid #e2e8f0;
font-size: 10px;
font-weight: 600;
line-height: 1.5;
white-space: nowrap;
pointer-events: none;
user-select: none;
}
.prod-prop-chip.is-warn { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.prod-prop-chip.is-info { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.prod-prop-chip.is-ok { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.prod-prop-chip.is-stage{ background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; }
.prod-prop-chip.is-muted{ background: #f8fafc; color: #94a3b8; border-color: #e2e8f0; }
/* ── WS-H: sortable column headers ─────────────────────────────────────── */
.prod-sort-th {
cursor: pointer;
user-select: none;
white-space: nowrap;
}
.prod-sort-th .prod-sort-label { display: inline; }
.prod-sort-th .prod-sort-caret {
display: inline-block;
width: 12px;
margin-left: 4px;
font-size: 9px;
color: #0ea5e9;
vertical-align: middle;
}
.prod-sort-th:hover { color: #0f172a; }
.prod-sort-th.is-sorted { color: #0284c7; }
/* ── WS-E2: CC ▶ expand toggle (mirrors the banner toggle) ─────────────── */
.prod-cc-expand {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
margin-right: 6px;
padding: 0;
border: none;
border-radius: 6px;
background: transparent;
color: #64748b;
cursor: pointer;
vertical-align: middle;
transition: background .12s ease, color .12s ease;
}
.prod-cc-expand svg { width: 16px; height: 16px; display: block; transition: transform .15s ease; }
.prod-cc-expand:hover { background: rgba(99, 102, 241, 0.14); color: #4338ca; }
.prod-cc-expand.is-open svg { transform: rotate(90deg); }
/* ── Agri4All Product-Uploads: expand toggle + per-image sub-rows ───────── */
.prod-a4apu-expand {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; margin-right: 6px; padding: 0;
border: none; border-radius: 6px; background: transparent; color: #64748b;
cursor: pointer; vertical-align: middle;
transition: background .12s ease, color .12s ease;
}
.prod-a4apu-expand svg { width: 16px; height: 16px; display: block; transition: transform .15s ease; }
.prod-a4apu-expand:hover { background: rgba(15, 118, 110, 0.14); color: #0f766e; }
.prod-a4apu-expand.is-open svg { transform: rotate(90deg); }
.prod-a4apu-subrow > .prod-a4apu-sub-cell {
padding: 0; border-bottom: 1px solid #f0f0f2; background: #f0fdfa;
}
.prod-a4apu-sub-wrap { padding: 10px 14px 10px 56px; display: flex; flex-direction: column; gap: 10px; }
.prod-a4apu-sub-empty { font-size: 13px; color: #94a3b8; font-style: italic; }
/* position:relative anchors the absolutely-positioned eye at the line's left
edge; the thumbnail slides right on hover to reveal it. */
.prod-a4apu-sub-line { position: relative; display: flex; align-items: center; gap: 12px; }
.prod-a4apu-thumb {
flex: 0 0 auto; width: 44px; height: 44px; padding: 0;
border: 1px solid #99f6e4; border-radius: 8px; background: #fff;
overflow: hidden; cursor: pointer; display: block;
transition: border-color .12s ease, box-shadow .12s ease, transform .18s ease;
}
/* On hover the thumbnail slides right, exposing the eye that sits beneath its
left edge (mirrors the .prod-row-left-actions opacity reveal pattern). */
.prod-a4apu-sub-line:hover .prod-a4apu-thumb { transform: translateX(38px); }
.prod-a4apu-thumb:hover { border-color: #0f766e; box-shadow: 0 0 0 2px rgba(15,118,110,0.18); }
.prod-a4apu-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prod-a4apu-thumb.is-empty { border: 1px dashed #cbd5e1; background: #f1f5f9; cursor: default; }
.prod-a4apu-sub-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.prod-a4apu-sub-head { font-size: 11px; font-weight: 700; color: #0f766e; letter-spacing: 0.2px; }
.prod-a4apu-sub-name { font-size: 12px; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The eye is hidden beneath the thumbnail's left edge by default, revealed when
the sub-line is hovered (the thumbnail slides right to expose it). */
.prod-a4apu-eye {
position: absolute; left: 0; top: 50%; transform: translateY(-50%);
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px; padding: 0; border: 1px solid #99f6e4; border-radius: 7px;
background: #fff; color: #0f766e; cursor: pointer;
opacity: 0; pointer-events: none; z-index: 1;
transition: background .12s ease, border-color .12s ease, opacity .18s ease;
}
.prod-a4apu-eye svg { width: 16px; height: 16px; display: block; }
.prod-a4apu-sub-line:hover .prod-a4apu-eye { opacity: 1; pointer-events: auto; }
.prod-a4apu-eye:hover { background: #ccfbf1; border-color: #0f766e; }
.prod-a4apu-chip {
flex: 0 0 auto; font-size: 11px; font-weight: 600; line-height: 1;
padding: 4px 8px; border-radius: 999px; white-space: nowrap;
}
.prod-a4apu-chip.is-done { background: #dcfce7; color: #15803d; }
/* is-busy covers all in-flight phases: Scraping… / Autofilling… / AI checking…
(plus the legacy Drafting…) — one amber pill for every working state. */
.prod-a4apu-chip.is-busy { background: #fef3c7; color: #b45309; }
.prod-a4apu-chip.is-failed { background: #fee2e2; color: #b91c1c; }
.prod-a4apu-chip.is-none { background: #f1f5f9; color: #64748b; }
/* Parent-row pipeline badge: the same amber busy pill, sitting inline beside
the status pill in the Status cell (not in a flex sub-line, so it needs its
own left gap + vertical alignment). Hidden via [hidden] when no phase. */
.prod-a4apu-parent-chip { display: inline-block; margin-left: 8px; vertical-align: middle; }
.prod-a4apu-parent-chip[hidden] { display: none; }
/* Post-to-Agri4All control: shown right of the chip once the image draft is
ready. The button posts the listing to the LIVE marketplace (lands pending). */
.prod-a4apu-post-btn {
flex: 0 0 auto; font-size: 11px; font-weight: 600; line-height: 1;
padding: 5px 10px; border: 0; border-radius: 6px; white-space: nowrap;
background: #0f766e; color: #fff; cursor: pointer;
transition: background .12s ease, opacity .12s ease;
}
.prod-a4apu-post-btn:hover { background: #0b5d56; }
.prod-a4apu-post-btn:disabled { opacity: 0.6; cursor: default; }
/* Static pill once an image has been posted (pending on Agri4All). */
.prod-a4apu-posted {
flex: 0 0 auto; font-size: 11px; font-weight: 600; line-height: 1;
padding: 4px 8px; border-radius: 999px; white-space: nowrap;
background: #dcfce7; color: #15803d;
}
/* Unsupported-country banner: sits ABOVE a product card's sub-line when the
item's target country isn't in Agri4All's location.country allow-list
(skipped_countries, populated server-side — see api/lib/country-codes.js).
Amber/red so it reads as an error, not a routine status. Text always wraps
(never truncated) so a long country list stays fully readable. */
.prod-a4apu-skip-banner {
font-size: 11px; font-weight: 600; line-height: 1.35; color: #b45309;
background: #fffbeb; border: 1px solid #fde68a; border-radius: 6px;
padding: 6px 10px; overflow-wrap: break-word; word-break: break-word;
}
/* Autofill-failure chip, shown inline beside the "No draft" chip only when
autofill actually failed (never for normal never-run/busy states). */
.prod-a4apu-autofill-err-chip {
flex: 0 0 auto; font-size: 11px; font-weight: 600; line-height: 1;
padding: 4px 8px; border-radius: 999px; white-space: nowrap;
background: #fee2e2; color: #b91c1c;
}
/* The FULL error text sits on its own block BELOW the sub-line (not inside
the flex row) so it always wraps and is never truncated/cut off. */
.prod-a4apu-autofill-err-text {
font-size: 11px; line-height: 1.35; color: #b91c1c;
padding: 0 0 0 56px; overflow-wrap: break-word; word-break: break-word;
white-space: normal;
}
/* ── Task 8: deliverable → image → country-links (3rd level) ───────────── */
/* Each image is its own column wrapper so its links list nests directly under
it. The wrap already gaps siblings; keep the image+links tight together. */
.prod-a4apu-img { display: flex; flex-direction: column; gap: 8px; }
/* Caret toggle beside the "Pending on Agri4All" pill. Mirrors the image-expand
caret: rotates 90° when open. */
.prod-a4apu-links-toggle {
flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
padding: 3px 8px; border: 1px solid #cbd5e1; border-radius: 6px;
background: #fff; color: #475569; cursor: pointer; font-size: 11px; font-weight: 600;
transition: background .12s ease, border-color .12s ease;
}
.prod-a4apu-links-toggle:hover { background: #f1f5f9; border-color: #94a3b8; }
.prod-a4apu-links-toggle svg { width: 12px; height: 12px; display: block; transition: transform .15s ease; }
.prod-a4apu-links-toggle.is-open svg { transform: rotate(90deg); }
/* Nested per-country links list, indented under the image's sub-line. */
.prod-a4apu-links {
display: flex; flex-direction: column; gap: 4px;
margin-left: 56px; padding: 6px 10px;
border-left: 2px solid #e2e8f0; background: #f8fafc; border-radius: 6px;
}
.prod-a4apu-link-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #475569; }
.prod-a4apu-link-country { font-weight: 600; color: #334155; min-width: 64px; }
.prod-a4apu-link-status {
font-size: 10px; font-weight: 600; line-height: 1; padding: 2px 6px;
border-radius: 999px; background: #e2e8f0; color: #64748b; white-space: nowrap;
}
.prod-a4apu-link-url { color: #0f766e; font-weight: 600; text-decoration: none; }
.prod-a4apu-link-url:hover { text-decoration: underline; }
.prod-a4apu-link-pending { color: #94a3b8; font-style: italic; }
.prod-a4apu-link-row.is-error .prod-a4apu-link-err { color: #b91c1c; font-weight: 600; }
.prod-a4apu-link-empty { font-size: 12px; color: #94a3b8; font-style: italic; }
/* Per-country link-row controls: an eye (open the image dashboard) + a teal
Post button (overwrite THIS country's live listing). The eye gets
margin-left:auto so it pushes both controls to the row's right edge — keeping
the row tidy: country | status | View listing | eye | Post. */
.prod-a4apu-link-eye {
flex: 0 0 auto; margin-left: auto;
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; padding: 0;
border: 1px solid #cbd5e1; border-radius: 6px;
background: #fff; color: #475569; cursor: pointer;
transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.prod-a4apu-link-eye:hover { background: #f1f5f9; border-color: #94a3b8; color: #0f766e; }
.prod-a4apu-link-eye svg { width: 13px; height: 13px; display: block; }
.prod-a4apu-link-post {
flex: 0 0 auto; font-size: 10px; font-weight: 600; line-height: 1;
padding: 5px 9px; border: 0; border-radius: 6px; white-space: nowrap;
background: #0f766e; color: #fff; cursor: pointer;
transition: background .12s ease, opacity .12s ease;
}
.prod-a4apu-link-post:hover { background: #0b5d56; }
.prod-a4apu-link-post:disabled { opacity: 0.6; cursor: default; }
/* ── WS-E2: CC per-post sub-rows ───────────────────────────────────────── */
.prod-cc-subrow > .prod-cc-sub-cell {
padding: 0;
border-bottom: 1px solid #f0f0f2;
background: #f8fafc;
}
.prod-cc-sub-wrap {
padding: 10px 14px 10px 56px;
display: flex;
flex-direction: column;
gap: 10px;
}
.prod-cc-sub-empty {
font-size: 13px;
color: #94a3b8;
font-style: italic;
}
.prod-cc-sub-line {
display: flex;
align-items: flex-start;
gap: 12px;
}
.prod-cc-thumb {
flex: 0 0 auto;
width: 52px;
height: 52px;
padding: 0;
border: 1px solid #e2e8f0;
border-radius: 8px;
background: #fff;
overflow: hidden;
cursor: pointer;
display: block;
transition: border-color .12s ease, box-shadow .12s ease;
}
.prod-cc-thumb:hover { border-color: #6366f1; box-shadow: 0 0 0 2px rgba(99,102,241,0.18); }
.prod-cc-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.prod-cc-thumb.is-empty {
flex: 0 0 auto;
width: 52px;
height: 52px;
border: 1px dashed #cbd5e1;
border-radius: 8px;
background: #f1f5f9;
display: block;
}
.prod-cc-sub-main {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.prod-cc-sub-head {
font-size: 11px;
font-weight: 700;
color: #64748b;
letter-spacing: 0.2px;
}
.prod-cc-caption {
display: block;
width: 100%;
text-align: left;
padding: 6px 10px;
border: 1px solid #e5e7eb;
border-radius: 7px;
background: #fff;
color: #334155;
font: inherit;
font-size: 13px;
line-height: 1.4;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition: border-color .12s ease, background .12s ease;
}
.prod-cc-caption:hover { border-color: #6366f1; background: #fafaff; }
.prod-cc-caption-empty { color: #94a3b8; font-style: italic; }
/* ── WI-2: auction per-item publish-state pill ─────────────────────────── */
/* Base pill look + posted/scheduled variants come from .prod-split-state in
deliverable-dashboard.css (globally loaded). The pills sit inside the
flex-column .prod-cc-sub-main — stop them stretching full-width. */
.prod-cc-sub-main .prod-split-state { align-self: flex-start; }
/* Interactive variant (button) — rendered only while the parent auction row
sits at 'approved'; advances pending → posted → archived on click. */
.prod-item-state {
font-family: inherit;
cursor: pointer;
transition: box-shadow .12s ease, border-color .12s ease;
}
.prod-item-state:hover { border-color: #94a3b8; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12); }
.prod-item-state.is-saving { opacity: 0.55; pointer-events: none; }
.prod-item-state.is-error { color: #b91c1c; background: #fef2f2; border-color: #fca5a5; }
/* Terminal archived state (base grey pill, struck through). */
.prod-split-state-archived { color: #94a3b8; text-decoration: line-through; }
/* ── WS-E2: caption rich-editor modal (window.mountRichEditor host) ─────── */
.prod-cc-editor-overlay {
position: fixed;
inset: 0;
z-index: 9000;
background: rgba(15, 23, 42, 0.45);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.prod-cc-editor-modal {
width: min(640px, 100%);
max-height: 90vh;
display: flex;
flex-direction: column;
background: #fff;
border-radius: 14px;
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
overflow: hidden;
}
.prod-cc-editor-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 18px;
border-bottom: 1px solid #eef2f6;
}
.prod-cc-editor-title { font-size: 15px; font-weight: 700; color: #0f172a; }
.prod-cc-editor-close {
border: none;
background: transparent;
color: #64748b;
font-size: 16px;
cursor: pointer;
width: 30px;
height: 30px;
border-radius: 7px;
transition: background .12s ease, color .12s ease;
}
.prod-cc-editor-close:hover { background: #f1f5f9; color: #0f172a; }
.prod-cc-editor-host {
flex: 1 1 auto;
min-height: 220px;
overflow: auto;
padding: 14px 18px;
}
.prod-cc-editor-foot {
display: flex;
justify-content: flex-end;
padding: 12px 18px;
border-top: 1px solid #eef2f6;
}
.prod-cc-editor-save {
padding: 8px 18px;
border: none;
border-radius: 8px;
background: #6366f1;
color: #fff;
font: inherit;
font-weight: 600;
cursor: pointer;
transition: background .12s ease;
}
.prod-cc-editor-save:hover { background: #4f46e5; }
@media (max-width: 700px) {
.prod-cc-sub-wrap { padding-left: 24px; }
.prod-prop-strip { margin-left: 6px; }
.prod-col-deliverable { max-width: 200px; }
}
/* ── Bulk selection (Agri4All sheets): checkbox column + floating bar ──
Ticket 40. The select column leads the row; the bar floats fixed at the
bottom center of the viewport (mirrors client-list's .cl-bulk-bar) so it
stays visible over the scrolling sheet, including at mobile widths. */
.prod-col-select {
width: 1%;
padding-right: 6px;
text-align: center;
vertical-align: middle;
}
.prod-bulk-cb,
.prod-bulk-master {
width: 15px;
height: 15px;
cursor: pointer;
accent-color: #6366f1;
vertical-align: middle;
}
.prod-bulk-bar {
position: fixed;
left: 50%;
bottom: 18px;
transform: translateX(-50%);
z-index: 1500;
display: flex;
align-items: center;
gap: 10px;
max-width: calc(100vw - 24px);
flex-wrap: wrap;
justify-content: center;
padding: 10px 16px;
background: #111827;
color: #f9fafb;
border-radius: 12px;
box-shadow: 0 12px 34px rgba(0, 0, 0, .28);
}
.prod-bulk-bar[hidden] { display: none; }
.prod-bulk-count {
font-size: 13px;
font-weight: 700;
white-space: nowrap;
}
.prod-bulk-btn {
padding: 6px 12px;
border: 1px solid #374151;
border-radius: 8px;
background: #1f2937;
color: #f9fafb;
font: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: background .12s ease, border-color .12s ease;
}
.prod-bulk-btn:hover { background: #374151; border-color: #4b5563; }
.prod-bulk-clear { background: transparent; border-color: transparent; color: #9ca3af; }
.prod-bulk-clear:hover { color: #f9fafb; background: rgba(255, 255, 255, .08); border-color: transparent; }
/* Bulk archive: danger-tinted, turns solid red once armed (first click). */
.prod-bulk-archive { background: transparent; border-color: #7f1d1d; color: #fca5a5; }
.prod-bulk-archive:hover { background: #3f1d1d; border-color: #b91c1c; color: #fecaca; }
.prod-bulk-archive.is-armed,
.prod-bulk-archive.is-armed:hover { background: #b91c1c; border-color: #b91c1c; color: #fff; }
.prod-bulk-link {
font-size: 13px;
font-weight: 600;
color: #a5b4fc;
text-decoration: none;
white-space: nowrap;
}
.prod-bulk-link:hover { color: #c7d2fe; text-decoration: underline; }
/* ── Suggested Due column (A4A product-uploads sheets, mirrors .prod-due-btn) ── */
.prod-col-sugg { overflow: visible; }
.prod-sugg-btn {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border: 1px solid transparent;
border-radius: 6px;
background: transparent;
color: #64748b;
font: inherit;
font-size: 13px;
font-style: italic;
cursor: pointer;
white-space: nowrap;
transition: border-color .12s ease, background .12s ease, opacity .12s ease;
}
.prod-sugg-btn:hover { border-color: #e5e7eb; background: #fafafa; }
.prod-sugg-btn.is-saving { opacity: .55; cursor: progress; }
.prod-sugg-btn.is-error { border-color: #ef4444; background: #fef2f2; color: #b91c1c; }
.prod-sugg-btn.is-empty {
border: 1px dashed #cbd5e1;
background: #f8fafc;
color: #94a3b8;
font-size: 12px;
font-style: normal;
gap: 4px;
}
.prod-sugg-btn.is-empty:hover { border-color: #94a3b8; background: #f1f5f9; color: #334155; }
/* ── Node grouping (view-level) ──────────────────────────────────────────
A node-parent row groups brand-variant deliverables (e.g. Designs, LinkedIn,
Newsletter Feature, Auctions). It renders as a NORMAL deliverable row (real
avatar + left actions, month/due buttons, status pill + arrows) — no special
grey fill — with the only difference being the Deliverable cell, which shows
the node label + a per-child status-pill summary. So it deliberately inherits
the plain .prod-sheet-row background + hover reveal (no overrides here). */
/* The node cell holds a label + wrapping brand pills — override the column's
nowrap/ellipsis clip so nothing gets cut off. */
.prod-node-deliverable {
white-space: normal;
overflow: visible;
text-overflow: clip;
}
.prod-node-label {
font-weight: 700;
color: #1e293b;
vertical-align: middle;
margin-right: 8px;
}
.prod-node-pills {
display: inline-flex;
flex-wrap: wrap;
gap: 4px;
vertical-align: middle;
}
.prod-node-pill {
display: inline-block;
padding: 1px 7px;
border-radius: 9px;
font-size: 11px;
font-weight: 600;
line-height: 1.5;
color: #fff;
white-space: nowrap;
}
.prod-node-brand {
display: inline-block;
margin-right: 6px;
font-size: 11px;
font-weight: 700;
color: #64748b;
letter-spacing: 0.2px;
}
/* ── #134 dark mode overrides ───────────────────────────────────────────────
Append-only. Every rule below repeats an existing selector prefixed with
html[data-theme="dark"], which raises specificity by (0,1,1) and so wins
without touching the light rules above.
Two invariants the sheet depends on:
- The two sticky surfaces (thead th, .prod-month-cell) stay OPAQUE. They
scroll over live rows; a translucent value would show the rows through.
- Status hues keep their meaning. Every coloured chip becomes a translucent
tint of the same hue plus a light saturated foreground, rather than being
flattened to grey.
--------------------------------------------------------------------------- */
/* Sheet chrome */
html[data-theme="dark"] .prod-sheet-count,
html[data-theme="dark"] .prod-sheet-status { color: #94a3b8; }
html[data-theme="dark"] .prod-sheet-scroll { border-color: #334155; }
/* Sticky header row — opaque surface, it covers scrolling rows. */
html[data-theme="dark"] .prod-sheet-table thead th {
background: #1e293b;
color: #94a3b8;
border-bottom-color: #334155;
}
html[data-theme="dark"] .prod-sheet-cell { border-bottom-color: rgba(148, 163, 184, 0.14); }
html[data-theme="dark"] .prod-col-date { color: #94a3b8; }
html[data-theme="dark"] .prod-sheet-row:hover > .prod-sheet-cell { background: #273449; }
/* Sticky month band — still has to read as a band, so it sits a step above the
surface rather than matching it. Opaque for the same reason as the thead. */
html[data-theme="dark"] .prod-month-row > .prod-month-cell {
background: #273449;
color: #cbd5e1;
border-top-color: #334155;
border-bottom-color: #334155;
}
/* New-deliverable modal */
html[data-theme="dark"] .prod-new-clientlist { color: #94a3b8; }
html[data-theme="dark"] .prod-new-clientopt { color: #e2e8f0; }
html[data-theme="dark"] .prod-new-clientopt:hover { background: rgba(99, 102, 241, 0.22); }
html[data-theme="dark"] .prod-new-fixed {
background: rgba(255, 255, 255, 0.06);
color: #e2e8f0;
}
html[data-theme="dark"] .prod-new-picker {
border-color: rgba(148, 163, 184, 0.38);
background: #273449;
color: #e2e8f0;
}
html[data-theme="dark"] .prod-new-picker:hover { border-color: #818cf8; color: #a5b4fc; }
html[data-theme="dark"] .prod-new-msg.is-error { color: #fca5a5; }
/* Search bar */
html[data-theme="dark"] .prod-sheet-search {
color: #e2e8f0;
border-color: #334155;
background: #273449;
}
html[data-theme="dark"] .prod-sheet-search::placeholder { color: #94a3b8; }
/* Person avatar */
html[data-theme="dark"] .prod-avatar.is-empty { border-color: #475569; }
/* Due-date / month buttons — same shape, so they share the override. */
html[data-theme="dark"] .prod-due-btn,
html[data-theme="dark"] .prod-month-btn { color: #cbd5e1; }
html[data-theme="dark"] .prod-due-btn:hover,
html[data-theme="dark"] .prod-month-btn:hover {
border-color: #475569;
background: #334155;
}
html[data-theme="dark"] .prod-due-btn.is-error,
html[data-theme="dark"] .prod-month-btn.is-error,
html[data-theme="dark"] .prod-sugg-btn.is-error {
background: rgba(239, 68, 68, 0.16);
color: #fca5a5;
}
html[data-theme="dark"] .prod-due-btn.is-empty,
html[data-theme="dark"] .prod-month-btn.is-empty {
border-color: #475569;
background: rgba(255, 255, 255, 0.04);
color: #94a3b8;
}
html[data-theme="dark"] .prod-due-btn.is-empty:hover,
html[data-theme="dark"] .prod-month-btn.is-empty:hover {
border-color: #64748b;
background: #334155;
color: #cbd5e1;
}
/* Suggested-due button */
html[data-theme="dark"] .prod-sugg-btn { color: #94a3b8; }
html[data-theme="dark"] .prod-sugg-btn:hover { border-color: #475569; background: #334155; }
html[data-theme="dark"] .prod-sugg-btn.is-empty {
border-color: #475569;
background: rgba(255, 255, 255, 0.04);
color: #94a3b8;
}
html[data-theme="dark"] .prod-sugg-btn.is-empty:hover {
border-color: #64748b;
background: #334155;
color: #cbd5e1;
}
/* Calendar + month popups (body-appended, so they float over the page) */
html[data-theme="dark"] .cal-popup {
background: #1e293b;
border-color: #334155;
box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55);
}
html[data-theme="dark"] .cal-title { color: #e2e8f0; }
html[data-theme="dark"] .cal-nav {
border-color: #334155;
background: #273449;
color: #cbd5e1;
}
html[data-theme="dark"] .cal-nav:hover {
border-color: #818cf8;
color: #a5b4fc;
background: rgba(99, 102, 241, 0.18);
}
html[data-theme="dark"] .cal-day { color: #e2e8f0; }
html[data-theme="dark"] .cal-day:hover:not(.is-empty) { background: #334155; }
html[data-theme="dark"] .cal-day.is-today { color: #a5b4fc; }
html[data-theme="dark"] .cal-foot { border-top-color: rgba(148, 163, 184, 0.14); }
html[data-theme="dark"] .cal-clear {
border-color: #334155;
background: #273449;
color: #94a3b8;
}
html[data-theme="dark"] .cal-clear:hover { background: rgba(239, 68, 68, 0.14); }
html[data-theme="dark"] .month-cell {
border-color: #334155;
background: #273449;
color: #e2e8f0;
}
html[data-theme="dark"] .month-cell:hover { border-color: #818cf8; background: rgba(99, 102, 241, 0.18); }
/* Status pill. --pill carries the status hue inline; the mix target flips
from white to the page so the tint darkens instead of washing out, and
the label goes light. */
html[data-theme="dark"] .prod-status-pill,
html[data-theme="dark"] .prod-dept-pill {
background: color-mix(in srgb, var(--pill, #334155) 22%, #0f172a);
color: #e2e8f0;
}
html[data-theme="dark"] .prod-status-pill:hover:not(:disabled),
html[data-theme="dark"] .prod-dept-pill:hover:not(:disabled) {
background: color-mix(in srgb, var(--pill, #334155) 34%, #0f172a);
}
html[data-theme="dark"] .prod-status-pill.is-unset {
border-color: #475569;
color: #94a3b8;
}
html[data-theme="dark"] .prod-status-pill:disabled { color: #64748b; }
html[data-theme="dark"] .prod-status-pill.is-error,
html[data-theme="dark"] .prod-dept-pill.is-error {
background: rgba(239, 68, 68, 0.18) !important;
color: #fca5a5;
}
html[data-theme="dark"] .prod-status-chev { color: #94a3b8; }
/* Status / employee dropdown (body-appended) */
html[data-theme="dark"] .prod-status-menu {
background: #1e293b;
border-color: #334155;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .prod-status-option { color: #e2e8f0; }
html[data-theme="dark"] .prod-status-option:hover { background: #334155; }
html[data-theme="dark"] .prod-status-option.is-current { background: rgba(99, 102, 241, 0.22); }
html[data-theme="dark"] .prod-emp-option.prod-emp-clear {
border-top-color: rgba(148, 163, 184, 0.14);
color: #94a3b8;
}
html[data-theme="dark"] .prod-emp-option.prod-emp-clear:hover {
background: rgba(239, 68, 68, 0.14);
color: #fca5a5;
}
/* #188 Months filter button + checklist, #186 jump rail. The rail sits over
live rows like the sticky bands do, so it stays OPAQUE in dark mode. */
html[data-theme="dark"] .prod-sheet-months-btn {
color: #e2e8f0;
background: #1e293b;
border-color: #334155;
}
html[data-theme="dark"] .prod-sheet-months-btn:hover { border-color: #475569; }
html[data-theme="dark"] .prod-sheet-months-btn.is-active {
color: #c7d2fe;
border-color: #6366f1;
background: rgba(99, 102, 241, 0.18);
}
html[data-theme="dark"] .prod-month-menu-actions { border-bottom-color: #334155; }
html[data-theme="dark"] .prod-month-menu-action {
color: #cbd5e1;
background: #334155;
}
html[data-theme="dark"] .prod-month-menu-action:hover { background: #475569; }
html[data-theme="dark"] .prod-month-opt { color: #e2e8f0; }
html[data-theme="dark"] .prod-month-opt:hover { background: #334155; }
html[data-theme="dark"] .prod-month-opt-count { color: #64748b; }
html[data-theme="dark"] .prod-month-rail {
background: #1e293b;
border-color: #334155;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .prod-rail-tick { color: #94a3b8; }
html[data-theme="dark"] .prod-rail-tick:hover {
background: rgba(99, 102, 241, 0.22);
color: #c7d2fe;
}
html[data-theme="dark"] .prod-rail-tick.is-current { background: #6366f1; color: #fff; }
/* Row action icons */
html[data-theme="dark"] .proagri-sheet-row-action-btn:hover {
background: rgba(255, 255, 255, 0.10);
color: #e2e8f0;
}
html[data-theme="dark"] .proagri-sheet-row-action-btn.action-view:hover,
html[data-theme="dark"] .proagri-sheet-row-action-btn.action-advance:hover { color: #93c5fd; }
html[data-theme="dark"] .proagri-sheet-row-action-btn.action-upload:hover { color: #c4b5fd; }
/* Website-URL field */
html[data-theme="dark"] .prod-website-input {
border-color: #475569;
color: #e2e8f0;
background: #273449;
}
html[data-theme="dark"] .prod-website-input:disabled {
background: #172033;
color: #64748b;
}
html[data-theme="dark"] .prod-nowebsite { color: #94a3b8; }
/* Scheduled date + time field */
html[data-theme="dark"] .prod-scheduled-date,
html[data-theme="dark"] .prod-scheduled-time {
border-color: #475569;
color: #e2e8f0;
background: #273449;
}
html[data-theme="dark"] .prod-scheduled-field .flatpickr-input[readonly] { background: #273449; }
/* Seller chip / link / picker */
html[data-theme="dark"] .prod-seller-chip,
html[data-theme="dark"] .prod-seller-link { color: #cbd5e1; }
html[data-theme="dark"] .prod-seller-chip:hover { border-color: #475569; background: #334155; }
html[data-theme="dark"] .prod-seller-link {
border-color: #475569;
background: rgba(255, 255, 255, 0.04);
color: #94a3b8;
}
html[data-theme="dark"] .prod-seller-link:hover {
border-color: #64748b;
background: #334155;
color: #cbd5e1;
}
html[data-theme="dark"] .prod-seller-chip.is-error,
html[data-theme="dark"] .prod-seller-link.is-error {
background: rgba(239, 68, 68, 0.16);
color: #fca5a5;
}
html[data-theme="dark"] .prod-seller-input {
border-color: #475569;
color: #e2e8f0;
background: #273449;
}
html[data-theme="dark"] .prod-seller-option .prod-seller-opt-src { background: #334155; }
/* Blocked-advance row + reason bubble. The bubble was near-black on a white
page; on dark it has to lift ABOVE the surface to stay legible as a tooltip. */
html[data-theme="dark"] .prod-sheet-row.is-blocked > .prod-sheet-cell {
background: rgba(239, 68, 68, 0.16);
}
html[data-theme="dark"] .prod-block-msg {
background: #475569;
color: #f1f5f9;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}
/* Due badges + property chips */
html[data-theme="dark"] .prod-due-badge.is-overdue {
background: rgba(239, 68, 68, 0.16);
color: #fca5a5;
border-color: rgba(239, 68, 68, 0.38);
}
html[data-theme="dark"] .prod-due-badge.is-soon {
background: rgba(245, 158, 11, 0.16);
color: #fcd34d;
border-color: rgba(245, 158, 11, 0.38);
}
html[data-theme="dark"] .prod-prop-chip {
background: rgba(148, 163, 184, 0.14);
color: #cbd5e1;
border-color: rgba(148, 163, 184, 0.22);
}
html[data-theme="dark"] .prod-prop-chip.is-warn {
background: rgba(249, 115, 22, 0.16);
color: #fdba74;
border-color: rgba(249, 115, 22, 0.34);
}
html[data-theme="dark"] .prod-prop-chip.is-info {
background: rgba(59, 130, 246, 0.16);
color: #93c5fd;
border-color: rgba(59, 130, 246, 0.34);
}
html[data-theme="dark"] .prod-prop-chip.is-ok {
background: rgba(34, 197, 94, 0.16);
color: #86efac;
border-color: rgba(34, 197, 94, 0.34);
}
html[data-theme="dark"] .prod-prop-chip.is-stage {
background: rgba(139, 92, 246, 0.18);
color: #c4b5fd;
border-color: rgba(139, 92, 246, 0.36);
}
html[data-theme="dark"] .prod-prop-chip.is-muted {
background: rgba(148, 163, 184, 0.10);
color: #94a3b8;
border-color: rgba(148, 163, 184, 0.18);
}
/* Sortable headers */
html[data-theme="dark"] .prod-sort-th:hover { color: #f1f5f9; }
html[data-theme="dark"] .prod-sort-th.is-sorted { color: #38bdf8; }
/* Expand toggles */
html[data-theme="dark"] .prod-banner-expand,
html[data-theme="dark"] .prod-cc-expand,
html[data-theme="dark"] .prod-a4apu-expand { color: #94a3b8; }
html[data-theme="dark"] .prod-banner-expand:hover {
background: rgba(14, 165, 233, 0.24);
color: #7dd3fc;
}
html[data-theme="dark"] .prod-cc-expand:hover {
background: rgba(99, 102, 241, 0.24);
color: #a5b4fc;
}
html[data-theme="dark"] .prod-a4apu-expand:hover {
background: rgba(45, 212, 191, 0.20);
color: #5eead4;
}
/* Banner size sub-rows */
html[data-theme="dark"] .prod-banner-subrow > .prod-banner-sub-cell {
border-bottom-color: rgba(148, 163, 184, 0.14);
background: #172033;
}
html[data-theme="dark"] .prod-banner-sub-label { color: #cbd5e1; }
html[data-theme="dark"] .prod-banner-link { color: #60a5fa; }
html[data-theme="dark"] .prod-banner-btn {
border-color: #334155;
background: #273449;
color: #cbd5e1;
}
html[data-theme="dark"] .prod-banner-download:hover {
border-color: #38bdf8;
color: #7dd3fc;
background: rgba(14, 165, 233, 0.16);
}
html[data-theme="dark"] .prod-banner-copy:hover {
border-color: #818cf8;
color: #a5b4fc;
background: rgba(99, 102, 241, 0.18);
}
html[data-theme="dark"] .prod-banner-copy.is-copied {
border-color: #4ade80;
color: #86efac;
background: rgba(34, 197, 94, 0.16);
}
/* Agri4All product-upload sub-rows. The teal tint is what tells this sub-row
apart from the banner/CC ones, so it is carried across rather than dropped. */
html[data-theme="dark"] .prod-a4apu-subrow > .prod-a4apu-sub-cell {
border-bottom-color: rgba(148, 163, 184, 0.14);
background: #15282c;
}
html[data-theme="dark"] .prod-a4apu-thumb {
border-color: rgba(45, 212, 191, 0.35);
background: #273449;
}
html[data-theme="dark"] .prod-a4apu-thumb:hover {
border-color: #2dd4bf;
box-shadow: 0 0 0 2px rgba(45, 212, 191, 0.25);
}
html[data-theme="dark"] .prod-a4apu-thumb.is-empty {
border-color: #475569;
background: #273449;
}
html[data-theme="dark"] .prod-a4apu-sub-head { color: #5eead4; }
html[data-theme="dark"] .prod-a4apu-sub-name { color: #94a3b8; }
html[data-theme="dark"] .prod-a4apu-eye {
border-color: rgba(45, 212, 191, 0.35);
background: #273449;
color: #5eead4;
}
html[data-theme="dark"] .prod-a4apu-eye:hover {
background: rgba(45, 212, 191, 0.22);
border-color: #2dd4bf;
}
html[data-theme="dark"] .prod-a4apu-chip.is-done,
html[data-theme="dark"] .prod-a4apu-posted {
background: rgba(34, 197, 94, 0.18);
color: #86efac;
}
html[data-theme="dark"] .prod-a4apu-chip.is-busy {
background: rgba(245, 158, 11, 0.18);
color: #fcd34d;
}
html[data-theme="dark"] .prod-a4apu-chip.is-failed,
html[data-theme="dark"] .prod-a4apu-autofill-err-chip {
background: rgba(239, 68, 68, 0.18);
color: #fca5a5;
}
html[data-theme="dark"] .prod-a4apu-chip.is-none {
background: rgba(148, 163, 184, 0.14);
color: #cbd5e1;
}
html[data-theme="dark"] .prod-a4apu-post-btn,
html[data-theme="dark"] .prod-a4apu-link-post { background: #0d9488; }
html[data-theme="dark"] .prod-a4apu-post-btn:hover,
html[data-theme="dark"] .prod-a4apu-link-post:hover { background: #0f766e; }
html[data-theme="dark"] .prod-a4apu-skip-banner {
color: #fcd34d;
background: rgba(245, 158, 11, 0.14);
border-color: rgba(245, 158, 11, 0.34);
}
html[data-theme="dark"] .prod-a4apu-autofill-err-text { color: #fca5a5; }
html[data-theme="dark"] .prod-a4apu-links-toggle,
html[data-theme="dark"] .prod-a4apu-link-eye {
border-color: #475569;
background: #273449;
color: #cbd5e1;
}
html[data-theme="dark"] .prod-a4apu-links-toggle:hover {
background: #334155;
border-color: #64748b;
}
html[data-theme="dark"] .prod-a4apu-link-eye:hover {
background: #334155;
border-color: #64748b;
color: #5eead4;
}
html[data-theme="dark"] .prod-a4apu-links {
border-left-color: #334155;
background: rgba(255, 255, 255, 0.03);
}
html[data-theme="dark"] .prod-a4apu-link-row { color: #cbd5e1; }
html[data-theme="dark"] .prod-a4apu-link-country { color: #e2e8f0; }
html[data-theme="dark"] .prod-a4apu-link-status {
background: #334155;
color: #cbd5e1;
}
html[data-theme="dark"] .prod-a4apu-link-url { color: #5eead4; }
html[data-theme="dark"] .prod-a4apu-link-row.is-error .prod-a4apu-link-err { color: #fca5a5; }
/* Content-calendar sub-rows */
html[data-theme="dark"] .prod-cc-subrow > .prod-cc-sub-cell {
border-bottom-color: rgba(148, 163, 184, 0.14);
background: #172033;
}
html[data-theme="dark"] .prod-cc-thumb {
border-color: #334155;
background: #273449;
}
html[data-theme="dark"] .prod-cc-thumb:hover { border-color: #818cf8; }
html[data-theme="dark"] .prod-cc-thumb.is-empty {
border-color: #475569;
background: #273449;
}
html[data-theme="dark"] .prod-cc-sub-head { color: #94a3b8; }
html[data-theme="dark"] .prod-cc-caption {
border-color: #334155;
background: #273449;
color: #cbd5e1;
}
html[data-theme="dark"] .prod-cc-caption:hover { border-color: #818cf8; background: #334155; }
/* Auction per-item publish-state pill */
html[data-theme="dark"] .prod-item-state:hover {
border-color: #64748b;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
html[data-theme="dark"] .prod-item-state.is-error {
color: #fca5a5;
background: rgba(239, 68, 68, 0.16);
border-color: rgba(239, 68, 68, 0.40);
}
/* Caption rich-editor modal */
html[data-theme="dark"] .prod-cc-editor-overlay { background: rgba(0, 0, 0, 0.62); }
html[data-theme="dark"] .prod-cc-editor-modal {
background: #1e293b;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
html[data-theme="dark"] .prod-cc-editor-head { border-bottom-color: #334155; }
html[data-theme="dark"] .prod-cc-editor-foot { border-top-color: #334155; }
html[data-theme="dark"] .prod-cc-editor-title { color: #e2e8f0; }
html[data-theme="dark"] .prod-cc-editor-close { color: #94a3b8; }
html[data-theme="dark"] .prod-cc-editor-close:hover { background: #334155; color: #e2e8f0; }
/* Floating bulk bar. It was a near-black slab on a white page; against #0f172a
that reads as a hole, so it moves UP to a raised surface and the shadow does
the separating instead of the value contrast. */
html[data-theme="dark"] .prod-bulk-bar {
background: #334155;
box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55);
}
html[data-theme="dark"] .prod-bulk-btn {
border-color: #64748b;
background: #475569;
}
html[data-theme="dark"] .prod-bulk-btn:hover { background: #64748b; border-color: #94a3b8; }
html[data-theme="dark"] .prod-bulk-clear { background: transparent; border-color: transparent; }
/* Node grouping */
html[data-theme="dark"] .prod-node-label { color: #e2e8f0; }
html[data-theme="dark"] .prod-node-brand { color: #94a3b8; }
/* === Production Clients (client-hub rebuild) === */
/* New Production landing page: one row per client (replaces the old
deliverable-row sheet). Reuses .prod-sheet-wrap/.prod-sheet-title/
.prod-sheet-count/.prod-sheet-searchbar/.prod-sheet-search and the existing
.prod-bulk-bar/.prod-bulk-btn/.prod-bulk-count/.prod-bulk-clear/
.prod-bulk-archive floating bar primitives (all defined earlier in this
file) rather than redefining them. Only genuinely new classes below. */
.prod-client-titlerow {
display: flex;
align-items: center;
gap: 10px;
}
.prod-client-count-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 7px;
border-radius: 999px;
background: #eef2ff;
color: #4f46e5;
font-size: 12px;
font-weight: 700;
}
.prod-client-table-host {
margin-top: 4px;
}
.prod-client-empty {
padding: 28px 12px;
text-align: center;
color: #6b7280;
font-size: 14px;
}
.prod-client-error { color: #b91c1c; }
.prod-client-table {
display: flex;
flex-direction: column;
border: 1px solid #e5e7eb;
border-radius: 8px;
overflow: hidden;
}
.prod-client-row {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
border-bottom: 1px solid #f1f5f9;
background: #fff;
transition: background .12s ease;
}
.prod-client-row:last-child { border-bottom: none; }
.prod-client-row:not(.prod-client-head):hover { background: #f8fafc; }
.prod-client-head {
background: #f9fafb;
font-size: 12px;
font-weight: 700;
color: #6b7280;
text-transform: uppercase;
letter-spacing: .04em;
}
.prod-client-cell { display: flex; align-items: center; }
.prod-client-cell-select { flex: 0 0 auto; width: 20px; }
.prod-client-cell-eye { flex: 0 0 auto; width: 30px; }
.prod-client-cell-name {
flex: 1 1 auto;
min-width: 0;
font-size: 14px;
font-weight: 600;
color: #111827;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.prod-client-cell-count { flex: 0 0 auto; width: 140px; }
.prod-client-cell-action { flex: 0 0 auto; width: 34px; justify-content: flex-end; }
.prod-client-checkbox {
width: 15px;
height: 15px;
cursor: pointer;
accent-color: #6366f1;
}
.prod-client-count-pill {
display: inline-flex;
align-items: center;
padding: 3px 9px;
border-radius: 999px;
background: #f1f5f9;
color: #475569;
font-size: 12px;
font-weight: 600;
white-space: nowrap;
}
.prod-client-muted { color: #9ca3af; }
.prod-client-icon-btn {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
padding: 0;
border: 1px solid #cbd5e1;
border-radius: 6px;
background: #fff;
color: #475569;
cursor: pointer;
transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.prod-client-icon-btn svg { width: 15px; height: 15px; display: block; }
.prod-client-eye-btn:hover { background: #f1f5f9; border-color: #94a3b8; color: #0f766e; }
.prod-client-archive-btn:hover { background: #fef2f2; border-color: #fca5a5; color: #b91c1c; }
.prod-client-restore-btn:hover { background: #f0fdf4; border-color: #86efac; color: #15803d; }
/* Dark mode overrides for the classes above only. */
html[data-theme="dark"] .prod-client-count-badge { background: #312e81; color: #c7d2fe; }
html[data-theme="dark"] .prod-client-empty { color: #94a3b8; }
html[data-theme="dark"] .prod-client-table { border-color: #334155; }
html[data-theme="dark"] .prod-client-row { background: #1e293b; border-bottom-color: #334155; }
html[data-theme="dark"] .prod-client-row:not(.prod-client-head):hover { background: #273449; }
html[data-theme="dark"] .prod-client-head { background: #0f172a; color: #94a3b8; }
html[data-theme="dark"] .prod-client-cell-name { color: #e2e8f0; }
html[data-theme="dark"] .prod-client-count-pill { background: #334155; color: #cbd5e1; }
html[data-theme="dark"] .prod-client-muted { color: #64748b; }
html[data-theme="dark"] .prod-client-icon-btn {
border-color: #475569;
background: #1e293b;
color: #cbd5e1;
}
html[data-theme="dark"] .prod-client-eye-btn:hover { background: #334155; border-color: #64748b; color: #5eead4; }
html[data-theme="dark"] .prod-client-archive-btn:hover { background: #3f1d1d; border-color: #b91c1c; color: #fecaca; }
html[data-theme="dark"] .prod-client-restore-btn:hover { background: #14321f; border-color: #22c55e; color: #86efac; }
/* ── Department column + status-chain edit pencil (2026-08-04) ──────────────
Department is an independent field on each deliverable, edited via its own
pill (which shares .prod-status-pill's shape/dark-theme rules — see the
grouped selectors above). The pencil beside a status pill opens that
deliverable TYPE's status-chain editor. */
.prod-col-department { white-space: nowrap; }
.prod-status-chain-edit {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
margin-left: 4px;
padding: 0;
border: 1px solid transparent;
border-radius: 6px;
background: transparent;
color: #94a3b8;
cursor: pointer;
vertical-align: middle;
opacity: 0;
transition: opacity .12s ease, background .12s ease, color .12s ease;
}
/* Revealed on row hover, and always available to keyboard users. */
.prod-sheet-row:hover .prod-status-chain-edit,
.prod-status-chain-edit:focus-visible { opacity: 1; }
.prod-status-chain-edit:hover {
background: #f1f5f9;
border-color: #e2e8f0;
color: #475569;
}
@media (hover: none) {
/* Touch devices get no hover, so never hide the control there. */
.prod-status-chain-edit { opacity: 1; }
}
html[data-theme="dark"] .prod-status-chain-edit { color: #64748b; }
html[data-theme="dark"] .prod-status-chain-edit:hover {
background: #1e293b;
border-color: #334155;
color: #cbd5e1;
}
/* Department edit pencil in a department drill-down sidebar. */
.nav-item.prod-dept-menu-edit {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
opacity: .8;
}
.nav-item.prod-dept-menu-edit:hover { opacity: 1; }
/* ── Editable property number cell (the Posts amount) ──────────────────────
2026-08-21. The first pass rendered a bare