/* Factory portal — round 11: purchase orders (list, board, workspace), the five
 * restyled dialogs, the top bar "+ New" menu, the Products list Status column and
 * the Customers "their customers" cell.
 * Paired with /js/oms-rdf-po.js and /js/oms-rdf-r11.js. Loads after
 * oms-rd-factory.css and oms-rd-listfilters.css. No remote assets.
 *   1. PO list (#fpol): tabs, toolbar + toggles, table, bulk bar, row menu
 *   2. Board tweaks + overdue strip
 *   3. PO workspace: header on a phone, Stage card actions, Payments, Activity,
 *      the pinned Messages column
 *   4. Dialogs (.rdfr-dlg)
 *   5. Top bar "+ New"
 *   6. Products list Status column; Customers cell
 */

/* ======================================================================
   1. PO LIST
   ====================================================================== */
#page-purchase-orders.fpol-on .fpo-stats,
#page-purchase-orders.fpol-on .fpo-filterbar { display: none; }
#page-purchase-orders .fpo-board-page { margin-bottom: 14px; }
#page-purchase-orders .fpo-board-page .seg a { white-space: nowrap; }
.rd.fpol-rd { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
.rd.fpol-rd .ord-segrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.rd.fpol-rd .seg.ord-seg { flex-wrap: wrap; max-width: 100%; }
.rd.fpol-rd .seg.ord-seg a { cursor: pointer; user-select: none; white-space: nowrap; color: var(--ink-2); }
.rd.fpol-rd .seg.ord-seg a.on { color: var(--ink); }
.rd.fpol-rd .seg.ord-seg a .c { font-weight: 700; }
.rd.fpol-rd .fpol-card { position: relative; overflow: visible; padding: 0; }
/* Board view: the card keeps the filters only; the kanban sits below it. */
.rd.fpol-rd.is-board #fpol-listslot { display: none; }
.rd.fpol-rd.is-board .fpol-card .rlf-chips { border-bottom: 0; }
.rd.fpol-rd.is-board .fpol-bulk { display: none; }
.rd.fpol-rd .ord-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.rd.fpol-rd.is-board .ord-toolbar { border-bottom: 0; }
.rd.fpol-rd .ord-toolbar .search-input { height: 36px; min-width: 200px; flex: 1 1 220px; max-width: 360px; padding: 0 12px; font-family: inherit; font-size: 13.5px; border: 1px solid var(--line-2); border-radius: 9px; background: #fff; color: var(--ink); }
.rd.fpol-rd .ord-toolbar .search-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.rd.fpol-rd .ord-toolbar .filter-select { height: 36px; padding: 0 30px 0 10px; font-family: inherit; font-size: 13px; }

/* Themed switches (the factory page has no .toggle-switch of its own). */
.rd .toggle-switch { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; user-select: none; white-space: nowrap; margin: 0; }
.rd .toggle-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.rd .toggle-switch .track { position: relative; width: 36px; height: 20px; background: #CBD1E1; border-radius: 999px; transition: background .15s; flex-shrink: 0; }
.rd .toggle-switch .track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: left .15s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.rd .toggle-switch input:checked + .track { background: var(--accent); }
.rd .toggle-switch input:checked + .track::after { left: 18px; }
.rd .toggle-switch input:focus-visible + .track { box-shadow: 0 0 0 3px var(--accent-soft); }

/* Table */
.rd.fpol-rd .fpol-scroll { overflow-x: auto; }
.rd.fpol-rd .tbl.fpol-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.rd.fpol-rd .fpol-tbl th { background: var(--sunk); color: var(--muted); padding: 10px 12px; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; font-weight: 700; border-bottom: 1px solid var(--line); white-space: nowrap; text-align: left; }
.rd.fpol-rd .fpol-tbl th.num, .rd.fpol-rd .fpol-tbl td.num { text-align: right; }
.rd.fpol-rd .fpol-tbl th.rlf-th { cursor: pointer; }
.rd.fpol-rd .fpol-tbl td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.rd.fpol-rd .fpol-tbl tr:last-child td { border-bottom: 0; }
.rd.fpol-rd .fpol-tbl tr.fpol-row { cursor: pointer; }
.rd.fpol-rd .fpol-tbl tr.fpol-row:hover td { background: rgba(61,78,232,.035); }
.rd.fpol-rd .fpol-tbl tr.fpol-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.rd.fpol-rd .fpol-tbl tr.fpol-row.is-sel td { background: rgba(61,78,232,.06); }
.rd.fpol-rd .fpol-tbl tr.fpol-row.is-closed td { color: var(--muted); }
.rd.fpol-rd .fpol-tbl tr.fpol-group td { background: #fff; padding: 12px 12px 8px; font-size: 13px; border-bottom: 1px solid var(--line); cursor: default; }
.rd.fpol-rd .fpol-tbl tr.fpol-group:not(:first-child) td { border-top: 1px solid var(--line); }
.rd.fpol-rd .fpol-tbl tr.fpol-group b { font-weight: 800; color: var(--ink); }
.rd.fpol-rd .fpol-tbl .fpol-cb { width: 34px; padding-right: 0; }
.rd.fpol-rd .fpol-tbl .fpol-cb input { margin: 0; cursor: pointer; }
.rd.fpol-rd .fpol-poline { display: flex; align-items: center; gap: 7px; }
.rd.fpol-rd .fpol-po b { font-size: 13.5px; font-weight: 800; color: var(--ink); font-family: inherit; }
.rd.fpol-rd tr.fpol-row:hover .fpol-po b { color: var(--accent); }
/* Urgent: a quiet red dot and a word under the number — no filled row. */
.rd.fpol-rd .fpol-urg { width: 8px; height: 8px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); flex: none; }
.rd.fpol-rd .fpol-urgtxt { font-size: 11px; font-weight: 800; color: var(--bad); letter-spacing: .03em; margin: 2px 0 0 15px; }
.rd.fpol-rd .fpol-new { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 6px; background: var(--accent-soft); color: #2A37B8; font-size: 10.5px; font-weight: 800; }
.rd.fpol-rd .fpol-msg { display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 6px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--muted); font: 700 11px/1 inherit; cursor: pointer; font-family: inherit; }
.rd.fpol-rd .fpol-msg svg { width: 12px; height: 12px; }
.rd.fpol-rd .fpol-msg.on { color: #fff; background: var(--bad); border-color: var(--bad); }
.rd.fpol-rd .fpol-cust { white-space: normal; min-width: 180px; max-width: 320px; line-height: 1.35; font-size: 13px; }
.rd.fpol-rd .fpol-cust b { font-weight: 700; color: var(--ink); }
.rd.fpol-rd .fpol-cust .mono { font-size: 12px; }
.rd.fpol-rd .fpol-st .pill, .rd.fpol-rd .fpol-tbl td .pill { height: 22px; font-size: 11.5px; }
.rd.fpol-rd .fpol-flags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.rd.fpol-rd .fpol-flag.bad { background: var(--bad-soft); color: var(--bad); }
.rd.fpol-rd .fpol-flag.warn { background: var(--warn-soft); color: var(--warn); }
.rd.fpol-rd .fpol-due .due { min-width: 130px; max-width: 160px; gap: 4px; }
.rd.fpol-rd .fpol-due .due-t { font-size: 12.5px; }
.rd.fpol-rd .fpol-etd { font-size: 11.5px; color: var(--muted); font-weight: 600; margin-top: 3px; }
.rd.fpol-rd .fpol-noetd { font-size: 12.5px; }
.rd.fpol-rd .fpol-tot { font-weight: 700; font-variant-numeric: tabular-nums; }
.rd.fpol-rd .fpol-more { width: 44px; padding: 4px 8px; }
.rd.fpol-rd .fpol-dots { width: 30px; height: 30px; border: 0; background: transparent; cursor: pointer; color: var(--ink-2); }
.rd.fpol-rd .fpol-dots:hover { background: var(--sunk); }
.rd.fpol-rd .fpol-empty { text-align: center; color: var(--muted); padding: 40px 16px; white-space: normal; }
.rd.fpol-rd .ord-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); font-size: 13px; }
/* Bulk bar */
.rd.fpol-rd .fpol-bulk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 16px; background: var(--accent-soft); border-bottom: 1px solid #C9CEF9; font-size: 13px; color: #2A37B8; }
.rd.fpol-rd .fpol-bulk[hidden] { display: none; }
.rd.fpol-rd .fpol-bulk .btn { height: 32px; gap: 6px; background: #fff; }
.rd.fpol-rd .fpol-bulk .btn.ghost { background: transparent; }
.rd.fpol-rd .fpol-bulk .btn svg { width: 15px; height: 15px; }
/* The row menu floats over the page (the table scrolls and would clip it). */
#fpol-menuhost #fpol-menu { position: fixed; top: 0; left: 0; right: auto; width: 250px; z-index: 1200; }
#fpol-menuhost #fpol-menu[hidden] { display: none; }

/* ======================================================================
   2. BOARD
   ====================================================================== */
#page-purchase-orders .fpo-board { margin-top: 0; }
.fpo-board .fpo-card-cust { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.35; }
.fpo-board .fpo-urg-pill { background: var(--bad-soft); color: var(--bad); }
/* The overdue note is one slim line now, not a red slab. */
.fpo-board-page #fpo-overdue:empty { display: none; }
.fpo-board-page .fpo-odstrip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border: 1px solid #F4C3CA; border-radius: 10px; background: #fff; color: var(--bad); font-size: 13px; }
.fpo-board-page .fpo-odstrip > svg { flex: none; }
.fpo-board-page .fpo-odstrip > span:first-of-type { flex: 1; min-width: 200px; color: var(--ink-2); font-weight: 600; }
.fpo-board-page .fpo-odstrip b { color: var(--bad); font-weight: 800; }
.fpo-board-page .fpo-od-acts { display: flex; gap: 6px; }
.fpo-board-page .fpo-odstrip .btn { height: 30px; }

/* ======================================================================
   3. PO WORKSPACE
   ====================================================================== */
.fpo-ws-page .fpo-actions { flex-wrap: wrap; justify-content: flex-end; }
.fpo-ws-page .fpo-actions .btn svg { width: 16px; height: 16px; }
.fpo-ws-page .fpo-ro { height: 38px; display: flex; align-items: center; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--sunk); font-size: 13.5px; font-weight: 600; color: var(--ink-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
.fpo-ws-page .fpo-att-n { font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fpo-ws-page .fpo-unsub { justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.fpo-ws-page .col-b .btn svg { width: 15px; height: 15px; }
/* Stage card: the step's quick actions sit in its header and wrap. */
.fpo-ws-page .fpo-stagecard > .ch { flex-wrap: wrap; gap: 10px; }
.fpo-ws-page .fpo-stagecard .fpo-st-l { gap: 10px; flex-wrap: wrap; }
.fpo-ws-page .fpo-stagecard .fpo-st-r { gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.fpo-ws-page .fpo-stagecard .fpo-st-r .btn { gap: 6px; }
.fpo-ws-page .fpo-stagecard .fpo-st-r .btn svg { width: 15px; height: 15px; }
/* Payments (read only) */
.fpo-ws-page .fpo-pay-info { font-size: 12.5px; line-height: 1.45; }
.fpo-ws-page .fpo-pay-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.fpo-ws-page .fpo-pay-kpis > div { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--sunk); min-width: 0; }
.fpo-ws-page .fpo-pay-kpis b { font-size: 15px; font-weight: 800; }
.fpo-ws-page .fpo-pay-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.fpo-ws-page .fpo-pay-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 13px; }
.fpo-ws-page .fpo-pay-row:last-child { border-bottom: 0; }
.fpo-ws-page .fpo-pay-l { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fpo-ws-page .fpo-pay-l .muted { font-size: 12px; }
.fpo-ws-page .fpo-pay-row .num { font-weight: 700; white-space: nowrap; }
.rd .pill.fpo-tone, .rd .pill.rdfr-tone { background: var(--sunk); color: var(--ink-2); }
.rd .pill.fpo-tone.ok, .rd .pill.rdfr-tone.ok { background: var(--ok-soft, #DCF5E7); color: var(--ok, #12804A); }
.rd .pill.fpo-tone.warn, .rd .pill.rdfr-tone.warn { background: var(--warn-soft); color: var(--warn); }
.rd .pill.fpo-tone.bad, .rd .pill.rdfr-tone.bad { background: var(--bad-soft); color: var(--bad); }
.rd .pill.rdfr-tone.acc { background: var(--accent-soft); color: #2A37B8; }
/* Activity */
.fpo-ws-page .fpo-act { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.fpo-ws-page .fpo-act li { position: relative; display: flex; gap: 12px; padding: 0 0 14px; }
.fpo-ws-page .fpo-act li::before { content: ''; position: absolute; left: 4px; top: 12px; bottom: 0; width: 2px; background: var(--line); }
.fpo-ws-page .fpo-act li:last-child { padding-bottom: 0; }
.fpo-ws-page .fpo-act li:last-child::before { display: none; }
.fpo-ws-page .fpo-act .dt { width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid #AEB4CC; flex: none; margin-top: 4px; position: relative; z-index: 1; }
.fpo-ws-page .fpo-act li.ok .dt { border-color: var(--ok, #12804A); background: var(--ok, #12804A); }
.fpo-ws-page .fpo-act li.acc .dt { border-color: var(--accent); }
.fpo-ws-page .fpo-act li.warn .dt { border-color: var(--warn); }
.fpo-ws-page .fpo-act li.bad .dt { border-color: var(--bad); }
.fpo-ws-page .fpo-act .tx { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.4; overflow-wrap: anywhere; }
.fpo-ws-page .fpo-act .muted { font-size: 11.5px; margin-top: 1px; }
/* Messages: the right column is pinned to the viewport (as the merchant's PO
   workspace), the thread scrolls inside it and the composer stays at its foot. */
@media (min-width: 1101px) {
    .fpo-ws-page .fpo-cols { align-items: start; }
    .fpo-ws-page .fpo-col-r { position: sticky; top: 72px; height: calc(var(--rd-vh, 100vh) - 92px); min-height: 460px; }
    .fpo-ws-page .fpo-col-r .msgcol { flex: 1 1 auto; min-height: 260px; display: flex; flex-direction: column; }
}
.fpo-ws-page .fpo-col-r .msgcol { display: flex; flex-direction: column; }
.fpo-ws-page .fpo-col-r .fpo-thread-wrap { flex: 1 1 auto; }
.fpo-ws-page .fpo-composer textarea.input { resize: vertical; min-height: 64px; }

/* Phone: nothing wider than the screen. */
@media (max-width: 900px) {
    .fpo-ws-page { min-width: 0; max-width: 100%; }
    .fpo-ws-page .fpo-head-row { gap: 10px; }
    .fpo-ws-page .ws-head { flex-wrap: wrap; min-width: 0; gap: 6px 10px; }
    .fpo-ws-page .ws-head h1 { font-size: 22px; overflow-wrap: anywhere; }
    .fpo-ws-page .fpo-head-row2 { flex-direction: column; align-items: stretch; }
    .fpo-ws-page .fpo-chips { min-width: 0; }
    .fpo-ws-page .fpo-chips .chip { max-width: 100%; height: auto; min-height: 24px; white-space: normal; overflow-wrap: anywhere; }
    .fpo-ws-page .fpo-actions { justify-content: stretch; }
    .fpo-ws-page .fpo-actions > .btn { flex: 1 1 auto; white-space: normal; height: auto; min-height: 40px; line-height: 1.25; text-align: center; justify-content: center; }
    .fpo-ws-page .fpo-actions .menu { left: 0; right: 0; width: auto; }
    .fpo-ws-page .fpo-stagecard > .ch { align-items: stretch; }
    .fpo-ws-page .fpo-stagecard .fpo-st-r { justify-content: flex-start; width: 100%; }
    .fpo-ws-page .fpo-stagecard .fpo-st-r .btn { white-space: normal; height: auto; min-height: 34px; text-align: left; }
    .fpo-ws-page .wtabs { overflow-x: auto; max-width: 100%; }
    .fpo-ws-page .fpo-cols, .fpo-ws-page .fpo-col, .fpo-ws-page .col-card, .fpo-ws-page .col-b, .fpo-ws-page .card { min-width: 0; max-width: 100%; }
    .fpo-ws-page .s6 { min-width: 0; }
    .fpo-ws-page .s6 .sg b { overflow-wrap: anywhere; }
    .fpo-ws-page .tlb .lb { white-space: nowrap; font-size: 10.5px; }
    .fpo-ws-page .msgcol { min-height: 0; }
    .fpo-ws-page .fpo-thread-wrap { min-height: 320px; }
    .fpo-ws-page .pv-head { min-width: 0; }
    .fpo-ws-page .pv-title { min-width: 0; flex: 1 1 200px; }
    .fpo-ws-page .qwrap { max-width: 100%; }
    .fpo-ws-page .pv-strip { max-width: 100%; }
    .fpo-ws-page .fpo-prod-top .btn, .fpo-ws-page .fpo-prod-foot .btn { white-space: normal; height: auto; min-height: 34px; }
    .fpo-ws-page .fpo-pp { flex-direction: column; }
    .fpo-ws-page .fpo-pp-l { padding-top: 0; }
    .fpo-ws-page .fpo-scrollhint { display: none; }
    .rd.fpol-rd .ord-toolbar { padding: 10px 12px; }
}

/* ======================================================================
   4. DIALOGS (.rdfr-dlg) — propose change, field request, names & numbers,
      product notes, panel prints viewer
   ====================================================================== */
.rd.rdfr-dlg, .rdfr-ov .rdfr-dlg {
    background: #fff; border-radius: 16px; box-shadow: 0 30px 80px -20px rgba(20,24,45,.5);
    display: flex; flex-direction: column; font-size: 14px; color: var(--ink); width: 560px; max-width: calc(var(--rd-vw, 100vw) - 32px);
    max-height: calc(var(--rd-vh, 100vh) - 48px); overflow: hidden; font-family: inherit;
}
.rdfr-dlg .rdfr-mh { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); flex: none; }
.rdfr-dlg .rdfr-mt { min-width: 0; }
.rdfr-dlg .rdfr-mh h3 { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); overflow-wrap: anywhere; }
.rdfr-dlg .rdfr-sub { font-size: 12.5px; margin-top: 3px; overflow-wrap: anywhere; }
.rdfr-dlg .rdfr-x { width: 32px; height: 32px; cursor: pointer; flex: none; display: grid; place-items: center; }
.rdfr-dlg .rdfr-mb { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; min-height: 0; }
.rdfr-dlg .rdfr-mf { display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap; padding: 14px 20px; border-top: 1px solid var(--line); background: var(--sunk); flex: none; }
.rdfr-dlg .btn { cursor: pointer; }
.rdfr-dlg .rdfr-note { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.rdfr-dlg .rdfr-g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rdfr-dlg .rdfr-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; }
.rdfr-dlg .rdfr-f .lbl { font-size: 12.5px; font-weight: 700; color: var(--ink-2); text-transform: none; letter-spacing: 0; }
.rdfr-dlg .input { width: 100%; height: 38px; border: 1px solid var(--line-2); border-radius: 9px; padding: 0 12px; margin: 0; font-family: inherit; font-size: 13.5px; font-weight: 500; color: var(--ink); background: #fff; box-shadow: none; min-width: 0; box-sizing: border-box; }
.rdfr-dlg textarea.input { height: auto; padding: 10px 12px; line-height: 1.45; resize: vertical; }
.rdfr-dlg .input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.rdfr-dlg .rdfr-ro { min-height: 38px; display: flex; align-items: center; padding: 8px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--sunk); font-size: 13.5px; font-weight: 600; color: var(--ink-2); overflow-wrap: anywhere; box-sizing: border-box; }
.rdfr-dlg .rdfr-scroll { overflow: auto; }
.rdfr-dlg .rdfr-warn-t { color: var(--warn); font-weight: 800; }
@media (max-width: 600px) { .rdfr-dlg .rdfr-g2 { grid-template-columns: minmax(0, 1fr); } }

/* Propose change: the element is itself the fixed, centred dialog. */
#propose-modal.rdfr-dlg { width: 560px; max-width: calc(var(--rd-vw, 100vw) - 32px); padding: 0; border: 0; }
#propose-modal-backdrop { background: rgba(20,24,45,.45); }
/* Field request: its own overlay + backdrop. */
.rdfr-ov { position: fixed; inset: 0; z-index: 1001; display: flex; align-items: flex-start; justify-content: center; padding: calc(var(--rd-vh, 100vh) * .08) 16px 16px; }
.rdfr-ov .rdfr-bd { position: fixed; inset: 0; background: rgba(20,24,45,.45); }
.rdfr-ov .rdfr-dlg { position: relative; z-index: 1; }
/* Names & numbers, notes and the photo viewer live in the page's own overlays. */
#nn-modal, #product-notes-popup, #fpp-modal { background: rgba(20,24,45,.45); }
#nn-modal .rdfr-nn { width: 600px; }
#nn-modal .rdfr-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
#nn-modal .rdfr-tbl th { background: var(--sunk); color: var(--muted); padding: 9px 12px; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; font-weight: 700; text-align: left; border-bottom: 1px solid var(--line); position: sticky; top: -18px; }
#nn-modal .rdfr-tbl td { padding: 9px 12px; border-bottom: 1px solid var(--line); }
#nn-modal .rdfr-tbl tr:last-child td { border-bottom: 0; }
#product-notes-popup .rdfr-notes { width: 560px; }
#product-notes-popup .rdfr-notes-l { display: flex; flex-direction: column; gap: 10px; }
#product-notes-popup .rdfr-note-i { padding: 10px 12px; border-radius: 12px; background: var(--sunk); border: 1px solid var(--line); max-width: 92%; }
#product-notes-popup .rdfr-note-i.me { align-self: flex-end; background: var(--accent-soft); border-color: #C9CEF9; }
#product-notes-popup .rdfr-note-m { font-size: 11.5px; color: var(--muted); font-weight: 600; margin-bottom: 4px; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
#product-notes-popup .rdfr-note-m b { color: var(--ink-2); }
#product-notes-popup .rdfr-note-b { font-size: 13.5px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }
#product-notes-popup .rdfr-lnk { border: 0; background: none; padding: 0 2px; font: 700 11.5px/1.2 inherit; font-family: inherit; color: var(--accent); cursor: pointer; }
#product-notes-popup .rdfr-lnk.bad { color: var(--bad); }
#product-notes-popup .rdfr-compose { flex-wrap: nowrap; }
#product-notes-popup .rdfr-compose .input { flex: 1; }
/* Photo viewer: the page's .modal shell, redrawn. */
#fpp-modal .rdfr-pp { width: 1080px; max-width: calc(var(--rd-vw, 100vw) - 32px); border-radius: 16px; }
#fpp-modal .rdfr-pp .modal-header { padding: 16px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
#fpp-modal .rdfr-pp .modal-title { font-size: 16px; font-weight: 800; color: var(--ink); }
#fpp-modal .rdfr-pp #fpp-subtitle { font-size: 12.5px !important; color: var(--muted) !important; margin-top: 3px !important; }
#fpp-modal .rdfr-pp .modal-close { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--line); background: #fff; color: var(--ink-2); cursor: pointer; font-size: 18px; line-height: 1; }
#fpp-modal .rdfr-pp .modal-close:hover { background: var(--sunk); }
#fpp-modal .rdfr-pp-sum { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
#fpp-modal .rdfr-pp-sum:empty { display: none; }
#fpp-modal .rdfr-pp-round { margin-bottom: 22px; }
#fpp-modal .rdfr-pp-round h4 { margin: 0 0 10px; font-size: 13px; font-weight: 800; color: var(--ink); }
#fpp-modal .rdfr-pp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
#fpp-modal .rdfr-pp-c { margin: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
#fpp-modal .rdfr-pp-img { position: relative; height: 260px; background: var(--sunk); cursor: zoom-in; }
#fpp-modal .rdfr-pp-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
#fpp-modal .rdfr-pp-mk { position: absolute; left: 8px; bottom: 8px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: #fff; color: var(--ink-2); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
#fpp-modal .rdfr-pp-mk.ok { background: var(--ok, #12804A); color: #fff; }
#fpp-modal .rdfr-pp-mk.warn { background: #F59E0B; color: #fff; }
#fpp-modal .rdfr-pp-mk.acc { background: var(--accent); color: #fff; }
#fpp-modal .rdfr-pp-c figcaption { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
#fpp-modal .rdfr-pp-fn { font-weight: 700; color: var(--ink); overflow-wrap: anywhere; line-height: 1.35; }
#fpp-modal .rdfr-pp-note { background: var(--warn-soft); border-left: 3px solid #F59E0B; padding: 6px 8px; border-radius: 6px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }
#fpp-modal .rdfr-pp-up { border-top: 1px dashed var(--line); padding-top: 6px; font-size: 11px; }

/* ======================================================================
   5. TOP BAR "+ New"
   ====================================================================== */
#fx-topbar .rd-atb-new { position: relative; flex: none; }
#fx-topbar .rd-atb-new > .btn { height: 38px; gap: 6px; }
#fx-topbar .rd-atb-new > .btn svg { width: 16px; height: 16px; }
#fx-topbar .rd-atb-menu { top: calc(100% + 8px); right: 0; width: 250px; z-index: 5; }
#fx-topbar .rd-atb-menu[hidden] { display: none; }
#fx-topbar .rd-atb-ib { position: relative; }
@media (max-width: 900px) {
    #fx-topbar .rd-atb-newlbl { display: none; }
    #fx-topbar .rd-atb-new > .btn { width: 38px; padding: 0; justify-content: center; }
}

/* ======================================================================
   6. PRODUCTS LIST + CUSTOMERS
   ====================================================================== */
#rdf1-prod .rdf1-toolbar.ord-toolbar.rlf-bar { flex-wrap: nowrap; }
#rdf1-prod .rlf-chips { padding: 8px 16px 10px; }
#rdf1-prod .rdfr-st-td .pill { height: 22px; font-size: 11.5px; }
/* "Their customers" stays inside its column: two lines at most, then … */
#rdfc-root .tbl td.rdfc-theirs { white-space: normal; min-width: 180px; max-width: 300px; }
#rdfc-root .tbl td.rdfc-theirs > .muted { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
#rdfc-root .tbl td.rdfc-theirs > b { float: left; margin-right: 5px; }