/* ===========================================================================
* [dealPage26] — modern deal screen
* Scoped under .rcm-dp26 to avoid theme bleed. Modal classes (.rcm-modal,
* .rcm-modal-*) are reused from the commissions dashboard and stand on their
* own when attached to .
* =========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');
.rcm-dp26 {
--rcm-bg: #eef0ff;
--rcm-bg-2: #e7eaff;
--rcm-surface: #ffffff;
--rcm-ink: #1e2245;
--rcm-ink-soft: #3b3f6b;
--rcm-muted: #8b91b8;
--rcm-line: #ebedf8;
--rcm-line-soft: #f3f4fc;
--rcm-accent: #6366f1;
--rcm-accent-2: #4f46e5;
--rcm-accent-soft: #c7d2fe;
--rcm-accent-ghost:#eef0ff;
--rcm-warm: #f97316;
--rcm-warm-soft: #fed7aa;
--rcm-success: #10b981;
--rcm-danger: #ef4444;
--rcm-warning: #f59e0b;
--rcm-shadow: 0 1px 2px rgba(30,34,69,0.03), 0 4px 14px rgba(99,102,241,0.07);
--rcm-shadow-lg: 0 8px 24px rgba(99,102,241,0.10);
--rcm-radius: 16px;
--rcm-radius-md: 12px;
--rcm-radius-sm: 8px;
font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
color: var(--rcm-ink);
background: var(--rcm-bg);
padding: 1rem;
border-radius: var(--rcm-radius);
font-size: 12.5px;
line-height: 1.5;
overflow-x: clip;
max-width: 100%;
}
.rcm-dp26 *, .rcm-dp26 *::before, .rcm-dp26 *::after { box-sizing: border-box; }
@media (max-width: 720px) {
.rcm-dp26 { padding: 0.55rem; border-radius: 12px; }
}
.rcm-dp26-loading { padding: 2rem; text-align: center; color: var(--rcm-muted); }
.rcm-dp26-error { padding: 1rem; background: #fee2e2; color: #7f1d1d; border-radius: var(--rcm-radius-sm); }
/* ---------- hero header ---------- */
.rcm-dp26-header {
display: grid;
grid-template-columns: 1fr auto;
gap: 1rem 1.25rem;
align-items: center;
background: var(--rcm-surface);
border: 1px solid var(--rcm-line);
border-radius: var(--rcm-radius);
box-shadow: var(--rcm-shadow);
padding: 1rem 1.25rem;
margin-bottom: 1rem;
}
.rcm-dp26-header-left { min-width: 0; }
.rcm-dp26-back {
display: inline-flex; align-items: center; gap: 0.3rem;
font-size: 0.72rem; font-weight: 600; color: var(--rcm-muted);
text-decoration: none; margin-bottom: 0.35rem;
}
.rcm-dp26-back:hover { color: var(--rcm-accent); }
.rcm-dp26-title {
font-size: 1.45rem; font-weight: 700; margin: 0;
letter-spacing: -0.02em; color: var(--rcm-ink);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rcm-dp26-sub-name {
margin-top: 0.1rem; font-size: 0.85rem; font-weight: 500;
color: var(--rcm-muted, #8b91b8);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rcm-dp26-subtitle {
display: flex; flex-wrap: wrap; gap: 0.5rem 0.85rem;
margin-top: 0.4rem; align-items: center;
color: var(--rcm-muted); font-size: 0.78rem; font-weight: 500;
}
.rcm-dp26-subtitle .sep { color: var(--rcm-line); }
.rcm-dp26-subtitle strong { color: var(--rcm-ink); font-weight: 600; }
.rcm-dp26-price {
font-size: 0.95rem; font-weight: 700; color: var(--rcm-ink);
font-variant-numeric: tabular-nums;
}
.rcm-dp26-status {
display: inline-flex; align-items: center; gap: 0.3rem;
padding: 0.18rem 0.6rem; border-radius: 999px;
font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em;
}
.rcm-dp26-status::before {
content: ''; width: 6px; height: 6px; border-radius: 999px;
background: currentColor;
}
.rcm-dp26-status-active { background: #d1fae5; color: #047857; }
.rcm-dp26-status-paid { background: var(--rcm-accent-ghost); color: var(--rcm-accent-2); }
.rcm-dp26-status-open { background: #fef3c7; color: #92400e; }
.rcm-dp26-status-new { background: #fee2e2; color: #b91c1c; }
.rcm-dp26-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
/* Save-status pill — replaces the Save button on existing deals. */
.rcm-dp26-savepill {
display: inline-flex; align-items: center; gap: 0.35rem;
padding: 0.32rem 0.7rem; border-radius: 999px;
font-size: 0.72rem; font-weight: 600;
transition: background 0.18s ease, color 0.18s ease;
}
.rcm-dp26-savepill i { font-size: 0.72rem; }
.rcm-dp26-savepill a { color: inherit; text-decoration: underline; margin-left: 0.15rem; }
.rcm-dp26-savepill.is-saved { background: #d1fae5; color: #047857; }
.rcm-dp26-savepill.is-saving { background: var(--rcm-accent-ghost, #eef0ff); color: var(--rcm-accent, #6366f1); }
.rcm-dp26-savepill.is-dirty { background: #fef3c7; color: #92400e; }
.rcm-dp26-savepill.is-error { background: #fee2e2; color: #b91c1c; }
@media (max-width: 720px) {
.rcm-dp26-header {
grid-template-columns: 1fr;
padding: 0.85rem 0.95rem; gap: 0.7rem;
}
.rcm-dp26-title { font-size: 1.15rem; white-space: normal; }
.rcm-dp26-actions { justify-content: flex-start; }
.rcm-dp26-subtitle { font-size: 0.72rem; gap: 0.35rem 0.55rem; }
}
/* ---------- buttons ---------- */
.rcm-btn {
display: inline-flex; align-items: center; gap: 0.35rem;
padding: 0.5rem 1rem; border-radius: 999px;
border: 1px solid transparent; cursor: pointer; font-weight: 600;
font-size: 0.78rem; line-height: 1.2; transition: all 0.18s ease;
background: transparent; color: inherit;
font-family: inherit; text-decoration: none;
}
.rcm-btn:disabled { opacity: 0.6; cursor: wait; }
.rcm-btn-primary {
background: var(--rcm-accent); color: white; border-color: var(--rcm-accent);
box-shadow: 0 4px 12px rgba(99,102,241,0.25);
}
.rcm-btn-primary:hover { background: var(--rcm-accent-2); transform: translateY(-1px); }
.rcm-btn-outline { background: white; color: var(--rcm-ink); border-color: var(--rcm-line); }
.rcm-btn-outline:hover { background: var(--rcm-accent-ghost); border-color: var(--rcm-accent); color: var(--rcm-accent); }
.rcm-btn-sm { padding: 0.3rem 0.7rem; font-size: 0.78rem; }
/* Small neutral pill — for secondary actions sitting next to a primary CTA
* (e.g. Get Rates / Add Manual Shipment next to Create Shipment). */
.rcm-btn-pill {
background: var(--rcm-bg); color: var(--rcm-ink-soft); border-color: var(--rcm-line);
padding: 0.32rem 0.75rem; font-size: 0.72rem; font-weight: 600;
}
.rcm-btn-pill:hover { background: var(--rcm-bg-2); color: var(--rcm-ink); border-color: var(--rcm-line); }
.rcm-btn-pill i { font-size: 0.7rem; opacity: 0.7; }
/* "Refresh from QuickBooks" row under the customer search input. */
.rcm-qb-refresh-row {
display: flex; align-items: center; gap: 0.7rem;
margin: 0.5rem 0 0.6rem;
padding: 0.5rem 0.6rem;
background: var(--rcm-accent-ghost, #eef0ff);
border-radius: 8px;
font-size: 0.8rem;
}
.rcm-qb-refresh-hint { color: var(--rcm-muted, #8b91b8); font-style: italic; }
.rcm-btn-link {
background: transparent; color: var(--rcm-accent); padding: 0.3rem 0.65rem;
border-radius: 999px;
}
.rcm-btn-link:hover { background: var(--rcm-accent-ghost); }
.rcm-btn-danger.rcm-btn-link:hover { background: #fee2e2; color: var(--rcm-danger); }
/* ---------- cards grid: 2-column with stacked columns ---------- */
.rcm-dp26-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-auto-flow: row dense;
gap: 0.85rem;
align-items: start;
}
@media (max-width: 1024px) {
.rcm-dp26-grid { grid-template-columns: 1fr; }
}
/* On phones, promote the Financial Summary so it's the first card after the
* hero header. We dissolve the left/right column wrappers with display:contents
* (their card children become direct grid items) and use order:-1 to float
* Financials above the Deal Details card. */
@media (max-width: 720px) {
.rcm-dp26-grid { display: flex; flex-direction: column; gap: 0.7rem; }
.rcm-dp26-left-col, .rcm-dp26-right-col { display: contents; }
.rcm-dp26-grid > [data-card="financials"] { order: -1; }
}
.rcm-dp26-left-col,
.rcm-dp26-right-col {
display: flex; flex-direction: column; gap: 0.85rem;
min-width: 0;
}
.rcm-dp26-left-col .rcm-dp26-card,
.rcm-dp26-right-col .rcm-dp26-card { margin: 0; }
.rcm-sub-title {
font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.07em;
color: var(--rcm-muted); font-weight: 700;
margin: 0.8rem 0 0.45rem; padding-bottom: 0;
border-bottom: none;
}
.rcm-cell-desc {
max-width: 240px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rcm-warn { color: var(--rcm-warning); font-weight: 700; }
/* ---------- Live tracking pills (UPS + FedEx) ---------- */
.rcm-track-pill {
display: inline-flex; align-items: center; gap: 0.35rem;
padding: 0.15rem 0.55rem; border-radius: 999px;
font-size: 0.72rem; font-weight: 600;
background: var(--rcm-bg); color: var(--rcm-muted);
white-space: nowrap; line-height: 1.6;
}
.rcm-track-pill .rcm-track-ico { font-size: 0.7rem; }
.rcm-track-pill .rcm-track-when { font-weight: 500; opacity: 0.85; margin-left: 0.1rem; }
.rcm-track-pill.is-loading,
.rcm-track-pill.is-fetching { background: var(--rcm-accent-ghost); color: var(--rcm-ink-soft); }
.rcm-track-pill.is-delivered { background: #d1fae5; color: #047857; }
.rcm-track-pill.is-out_for_delivery { background: #ddd6fe; color: #6d28d9; }
.rcm-track-pill.is-in_transit { background: var(--rcm-accent-ghost); color: var(--rcm-accent-2); }
.rcm-track-pill.is-pending { background: #fef3c7; color: #92400e; }
.rcm-track-pill.is-exception,
.rcm-track-pill.is-error { background: #fee2e2; color: #b91c1c; }
.rcm-track-pill.is-unknown { background: var(--rcm-bg); color: var(--rcm-muted); }
.rcm-track-na { color: var(--rcm-muted); font-style: italic; font-size: 0.74rem; }
/* ---------- Shipments table: ultra-compact single-row layout ---------- */
.rcm-ship-table th, .rcm-ship-table td { vertical-align: middle; padding: 0.45rem 0.4rem; }
.rcm-ship-table .rcm-ship-expander { width: 24px; padding-right: 0; padding-left: 0.3rem; }
.rcm-ship-table .rcm-ship-date { white-space: nowrap; width: 1%; font-size: 0.78rem; }
.rcm-ship-table .rcm-ship-carrier { white-space: nowrap; width: 1%; padding-right: 0.25rem; }
.rcm-ship-table .rcm-ship-status { width: auto; white-space: nowrap; }
.rcm-ship-table .rcm-ship-details { width: 1%; white-space: nowrap; }
.rcm-ship-table .rcm-row-actions { width: 1%; white-space: nowrap; text-align: right; padding-right: 0.4rem; }
.rcm-ship-table .rcm-row-actions .rcm-btn { padding: 0.2rem 0.35rem; }
.rcm-ship-table .rcm-row-actions .rcm-btn i { font-size: 0.85rem; }
@media (max-width: 720px) {
/* Mobile shipment rows: drop the table grid and reflow each into a
* 2-line card — top line shows carrier · date · info · menu, bottom line
* is the full-width status pill so it can wrap naturally. */
.rcm-ship-table thead { display: none; }
.rcm-ship-table, .rcm-ship-table tbody { display: block; }
.rcm-ship-table tr {
display: grid;
grid-template-columns: auto 1fr auto auto;
grid-template-areas:
"carrier date info menu"
"status status status status";
gap: 0.4rem 0.55rem;
align-items: center;
padding: 0.65rem 0.7rem;
border-bottom: 1px solid var(--rcm-line);
}
.rcm-ship-table tr:last-child { border-bottom: none; }
.rcm-ship-table tr:hover { background: transparent; }
.rcm-ship-table td {
display: block; padding: 0; border: none; width: auto; white-space: normal;
}
.rcm-ship-table .rcm-ship-expander { display: none; }
.rcm-ship-table .rcm-ship-carrier { grid-area: carrier; }
.rcm-ship-table .rcm-ship-date { grid-area: date; font-size: 0.74rem; color: var(--rcm-muted); }
.rcm-ship-table .rcm-ship-details { grid-area: info; text-align: right; }
.rcm-ship-table .rcm-row-actions { grid-area: menu; text-align: right; padding: 0; }
.rcm-ship-table .rcm-ship-status { grid-area: status; }
.rcm-ship-table .rcm-ship-status .rcm-track-pill {
display: inline-flex; max-width: 100%;
white-space: normal; overflow-wrap: anywhere; line-height: 1.35;
padding: 0.3rem 0.7rem; font-size: 0.72rem;
border-radius: 8px;
}
.rcm-ship-table .rcm-ship-details .rcm-ship-details-btn { padding: 0.25rem 0.45rem; }
.rcm-ship-table .rcm-ship-details .rcm-ship-details-btn i { font-size: 1rem; }
/* Multi-package child rows: tint the whole card, drop the left-border tab. */
.rcm-ship-table tr.rcm-ship-grp-child { background: #fafbfc; border-left: 3px solid #ede9fe; padding-left: 0.55rem; }
.rcm-ship-table tr.rcm-ship-grp-child > td { background: transparent; border-left: none; }
}
/* ---------- Row-action 3-dot menu (used in Shipments table) ---------- */
.rcm-rowmenu { position: relative; display: inline-block; }
.rcm-rowmenu-trigger { padding: 0.2rem 0.4rem; color: var(--rcm-muted); }
.rcm-rowmenu-trigger:hover { color: var(--rcm-ink); background: var(--rcm-line-soft); border-radius: 6px; }
.rcm-rowmenu-trigger i { font-size: 0.95rem; }
.rcm-rowmenu-pop {
position: absolute; right: 0; top: calc(100% + 4px);
min-width: 180px; z-index: 50;
background: white; border: 1px solid var(--rcm-line);
border-radius: var(--rcm-radius-sm);
box-shadow: 0 6px 20px rgba(30,34,69,0.10), 0 1px 2px rgba(30,34,69,0.04);
padding: 0.25rem;
display: flex; flex-direction: column;
}
.rcm-rowmenu-item {
display: flex; align-items: center; gap: 0.55rem;
padding: 0.45rem 0.65rem; border: 0; background: transparent;
font: inherit; font-size: 0.78rem; color: var(--rcm-ink);
text-align: left; cursor: pointer; border-radius: 6px;
}
.rcm-rowmenu-item:hover { background: var(--rcm-accent-ghost); color: var(--rcm-accent-2); }
.rcm-rowmenu-item i { width: 14px; text-align: center; color: var(--rcm-muted); font-size: 0.78rem; }
.rcm-rowmenu-item:hover i { color: inherit; }
.rcm-rowmenu-item-danger { color: var(--rcm-danger); }
.rcm-rowmenu-item-danger:hover { background: #fee2e2; color: var(--rcm-danger); }
.rcm-rowmenu-item-danger i { color: var(--rcm-danger); opacity: 0.7; }
/* Tracking line inside the details modal: link + copy button on the same row. */
.rcm-tracking-line {
display: inline-flex; align-items: center; gap: 0.35rem;
}
.rcm-tracking-line + .rcm-tracking-line { margin-top: 0.25rem; }
.rcm-copy-btn { padding: 0.1rem 0.35rem; color: var(--rcm-muted); }
.rcm-copy-btn:hover { color: var(--rcm-accent); }
/* Carrier badge — small colored chip replacing the long carrier name text. */
.rcm-carrier-badge {
display: inline-flex; align-items: center; justify-content: center;
min-width: 36px; padding: 0.18rem 0.45rem; border-radius: 5px;
font-size: 0.62rem; font-weight: 800; letter-spacing: 0.04em;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
background: #1f2937; color: #fff;
}
.rcm-carrier-badge.rcm-rate-ups { background: #5a4a16; color: #fbbf24; } /* UPS brown/gold */
.rcm-carrier-badge.rcm-rate-fedex { background: #4b0082; color: #ff6f00; } /* FedEx purple/orange */
.rcm-carrier-badge.rcm-rate-usps { background: #112e51; color: #fff; } /* USPS navy */
/* "Details" trigger — opens the shipment-details modal (tracking, cost, items). */
.rcm-ship-details-btn {
display: inline-flex; align-items: center; gap: 0.3rem;
padding: 0.25rem 0.6rem; font-size: 0.75rem; font-weight: 600;
color: var(--rcm-accent);
}
.rcm-ship-details-btn i { color: var(--rcm-accent); }
.rcm-ship-details-btn:hover { background: var(--rcm-accent-ghost); }
/* Slimmer tracking pill (we dropped the relative-time piece). */
.rcm-track-pill { padding: 0.1rem 0.5rem; font-size: 0.68rem; }
.rcm-track-pill .rcm-track-refresh { font-size: 0.6rem; }
/* =========================================================================
* Shipment Details modal — "boarding pass" style: one combined card with
* carrier/tracking, status banner, route, and meta strip — then timeline.
* ========================================================================= */
.rcm-shipd { display: flex; flex-direction: column; gap: 0.9rem; }
.rcm-shipd-card {
background: white;
border: 1px solid var(--rcm-line);
border-radius: var(--rcm-radius-md);
box-shadow: var(--rcm-shadow);
padding: 0; overflow: hidden;
}
/* Top: carrier badge + tracking line + box chip */
.rcm-shipd-tophead {
display: flex; align-items: center; justify-content: space-between;
gap: 1rem; padding: 0.85rem 1rem;
border-bottom: 1px dashed var(--rcm-line);
}
.rcm-shipd-hero-l { display: flex; align-items: center; gap: 0.65rem; min-width: 0; }
.rcm-shipd-tn-stack { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.rcm-shipd-tn { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.88rem; }
.rcm-shipd-tn code { font-size: 0.8rem; }
.rcm-shipd-tn a {
display: inline-flex; align-items: center; gap: 0.3rem;
color: var(--rcm-accent); text-decoration: none; font-weight: 600;
}
.rcm-shipd-tn a:hover { color: var(--rcm-accent-2); }
.rcm-shipd-master { font-size: 0.7rem; color: var(--rcm-muted); }
.rcm-shipd-boxchip {
display: inline-flex; align-items: center; padding: 0.2rem 0.6rem;
background: var(--rcm-accent-ghost); color: var(--rcm-accent-2);
border-radius: 999px; font-size: 0.7rem; font-weight: 700; flex-shrink: 0;
}
/* Hero status band — full-width, colored by status. */
.rcm-shipd-statusband {
display: flex; align-items: center; gap: 0.85rem;
padding: 1.1rem 1.2rem;
font-size: 0.85rem; color: var(--rcm-ink-soft);
}
.rcm-shipd-statusband.is-loading { background: var(--rcm-bg); color: var(--rcm-muted); justify-content: center; padding: 0.7rem; font-size: 0.78rem; }
.rcm-shipd-statusband.is-error { background: #fee2e2; color: #b91c1c; justify-content: center; padding: 0.7rem; }
.rcm-shipd-statusband.is-delivered { background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); color: #064e3b; border-top: 1px solid #6ee7b7; border-bottom: 1px solid #6ee7b7; }
.rcm-shipd-statusband.is-out_for_delivery { background: linear-gradient(135deg, #f5f3ff 0%, #ddd6fe 100%); color: #4c1d95; border-top: 1px solid #c4b5fd; border-bottom: 1px solid #c4b5fd; }
.rcm-shipd-statusband.is-in_transit { background: var(--rcm-accent-ghost); color: var(--rcm-accent-2); border-top: 1px solid var(--rcm-accent-soft); border-bottom: 1px solid var(--rcm-accent-soft); }
.rcm-shipd-statusband.is-pending { background: #fef3c7; color: #92400e; border-top: 1px solid #fcd34d; border-bottom: 1px solid #fcd34d; }
.rcm-shipd-statusband.is-exception,
.rcm-shipd-statusband.is-unknown { background: #fef3c7; color: #92400e; }
.rcm-shipd-statusband-icon { font-size: 1.5rem; line-height: 1; flex-shrink: 0; }
.rcm-shipd-statusband-body { flex: 1; min-width: 0; }
.rcm-shipd-statusband-title {
font-size: 1.02rem; font-weight: 700; letter-spacing: -0.01em;
margin-bottom: 0.15rem;
}
.rcm-shipd-statusband-meta {
font-size: 0.78rem; display: flex; flex-wrap: wrap;
gap: 0.35rem; align-items: center;
}
.rcm-shipd-statusband-meta i { margin-right: 0.25rem; opacity: 0.85; }
.rcm-shipd-dot { opacity: 0.4; }
.rcm-shipd-manual {
display: inline-block; margin-left: 0.5rem;
padding: 0.1rem 0.5rem; border-radius: 999px;
background: rgba(255,255,255,0.55); color: inherit;
font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em;
vertical-align: middle; text-transform: uppercase;
}
.rcm-shipd-manual i { margin-right: 0.2rem; opacity: 0.8; }
.rcm-shipd-pod {
display: inline-flex; align-items: center; gap: 0.35rem;
padding: 0.42rem 0.85rem; background: white; border-radius: 999px;
color: currentColor; font-weight: 700; font-size: 0.75rem; text-decoration: none;
flex-shrink: 0; box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.rcm-shipd-pod:hover { transform: translateY(-1px); box-shadow: 0 3px 6px rgba(0,0,0,0.08); }
/* Route bar — origin → destination */
.rcm-shipd-routebar {
display: flex; align-items: center; justify-content: center; gap: 0.75rem;
padding: 0.7rem 1rem; font-size: 0.82rem; color: var(--rcm-ink);
background: var(--rcm-line-soft); border-bottom: 1px dashed var(--rcm-line);
}
.rcm-shipd-route-pt {
display: inline-flex; align-items: center; gap: 0.4rem;
font-weight: 600;
}
.rcm-shipd-route-pt i { color: var(--rcm-accent); font-size: 0.78rem; }
.rcm-shipd-route-arrow { color: var(--rcm-muted); font-size: 0.85rem; }
/* Inline meta strip — single row of compact key facts. */
.rcm-shipd-meta {
display: flex; flex-wrap: wrap; gap: 0.4rem 1.15rem;
padding: 0.7rem 1rem; font-size: 0.78rem; color: var(--rcm-ink-soft);
}
.rcm-shipd-meta > span {
display: inline-flex; align-items: center; gap: 0.4rem;
font-variant-numeric: tabular-nums;
}
.rcm-shipd-meta i { color: var(--rcm-muted); }
/* Items collapsible — only when there's a packing breakdown to show. */
.rcm-shipd-itemsdetails {
padding: 0 1rem 0.85rem;
font-size: 0.82rem;
}
.rcm-shipd-itemsdetails summary {
cursor: pointer; padding: 0.4rem 0; color: var(--rcm-accent);
font-weight: 600; font-size: 0.78rem;
list-style: none;
}
.rcm-shipd-itemsdetails summary::-webkit-details-marker { display: none; }
.rcm-shipd-itemsdetails summary::before {
content: '▸ '; display: inline-block; margin-right: 0.25rem;
transition: transform 0.15s ease;
}
.rcm-shipd-itemsdetails[open] summary::before { transform: rotate(90deg); }
.rcm-shipd-items {
list-style: none; margin: 0.3rem 0 0; padding: 0;
background: var(--rcm-bg); border-radius: var(--rcm-radius-sm);
padding: 0.5rem 0.75rem;
}
.rcm-shipd-items li {
display: flex; justify-content: space-between; align-items: baseline;
padding: 0.25rem 0; border-bottom: 1px dashed var(--rcm-line);
}
.rcm-shipd-items li:last-child { border-bottom: none; }
.rcm-shipd-item-name { color: var(--rcm-ink); }
.rcm-shipd-item-qty { color: var(--rcm-muted); font-variant-numeric: tabular-nums; font-size: 0.78rem; }
/* Timeline card */
.rcm-shipd-timeline-card { padding: 0.85rem 1rem 0.5rem; }
.rcm-shipd-section-title {
font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.06em; color: var(--rcm-muted); margin-bottom: 0.6rem;
}
/* Vertical event timeline with bigger dots + cleaner connecting line */
.rcm-shipd-events {
list-style: none; margin: 0; padding: 0.25rem 0 0 0.5rem;
max-height: 320px; overflow-y: auto;
position: relative;
}
.rcm-shipd-events::before {
content: ''; position: absolute; left: 8px; top: 0.65rem; bottom: 0.65rem;
width: 2px; background: var(--rcm-line); border-radius: 1px;
}
.rcm-shipd-evt {
position: relative;
padding: 0.55rem 0 0.55rem 1.5rem;
}
.rcm-shipd-evt-dot {
position: absolute; left: 1px; top: 0.85rem;
width: 14px; height: 14px; border-radius: 999px;
background: white; border: 2px solid var(--rcm-line);
box-shadow: 0 0 0 3px white;
z-index: 1;
}
.rcm-shipd-evt.is-current .rcm-shipd-evt-dot {
background: var(--rcm-accent); border-color: var(--rcm-accent);
box-shadow: 0 0 0 4px var(--rcm-accent-ghost);
}
.rcm-shipd-evt-desc { font-size: 0.88rem; font-weight: 600; color: var(--rcm-ink); }
.rcm-shipd-evt-meta {
font-size: 0.72rem; color: var(--rcm-muted);
display: flex; gap: 0.7rem; margin-top: 0.2rem; flex-wrap: wrap;
}
.rcm-shipd-evt-time { font-variant-numeric: tabular-nums; }
.rcm-shipd-evt-loc i { margin-right: 0.2rem; }
.rcm-shipd-cached {
font-size: 0.68rem; color: var(--rcm-muted); font-style: italic;
padding: 0.6rem 0 0.2rem; text-align: center;
border-top: 1px dashed var(--rcm-line-soft); margin-top: 0.5rem;
}
/* Multi-tracking-number container in a shipment row */
.rcm-track-numbers { display: flex; flex-direction: column; gap: 0.15rem; }
.rcm-track-numbers a { font-size: 0.78rem; }
.rcm-track-pills { display: flex; flex-direction: column; gap: 0.2rem; align-items: flex-start; }
.rcm-track-refresh {
border: none; background: transparent; cursor: pointer;
color: inherit; opacity: 0.6; padding: 0 0.15rem; font: inherit;
display: inline-flex; align-items: center; transition: opacity 0.15s ease, transform 0.4s ease;
}
.rcm-track-refresh:hover { opacity: 1; }
.rcm-track-pill.is-fetching .rcm-track-refresh,
.rcm-track-pill.is-loading .rcm-track-refresh { display: none; }
.rcm-track-spinner {
width: 10px; height: 10px; border-radius: 999px;
border: 2px solid currentColor; border-right-color: transparent;
animation: rcm-spin 0.7s linear infinite;
}
@keyframes rcm-spin { to { transform: rotate(360deg); } }
/* ---------- Rate-shop modal ---------- */
.rcm-rate-form fieldset {
border: 1px solid var(--rcm-line); border-radius: var(--rcm-radius-md);
padding: 0.7rem 0.95rem; margin-bottom: 0.7rem;
}
.rcm-rate-form fieldset legend {
font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.06em; color: var(--rcm-muted); padding: 0 0.3rem;
}
.rcm-rate-form input,
.rcm-rate-form select {
width: 100%; padding: 0.42rem 0.6rem;
font-family: inherit; font-size: 0.85rem; color: var(--rcm-ink);
background: white; border: 1px solid var(--rcm-line);
border-radius: var(--rcm-radius-sm); margin-bottom: 0.35rem;
}
.rcm-rate-form input:focus, .rcm-rate-form select:focus {
outline: none; border-color: var(--rcm-accent);
box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
}
.rcm-rate-addr-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem;
}
@media (max-width: 720px) { .rcm-rate-addr-grid { grid-template-columns: 1fr; } }
.rcm-rate-3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 0.35rem; }
.rcm-rate-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; align-items: center; }
.rcm-rate-check { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; color: var(--rcm-ink-soft); }
.rcm-rate-check input { width: auto; margin: 0; }
.rcm-rate-pkg-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.4rem; }
.rcm-rate-pkg-grid label { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.65rem; color: var(--rcm-muted); font-weight: 600; }
/* Preset picker spans the whole row above the weight/dimensions fields. */
.rcm-rate-pkg-grid .rcm-rate-pkg-preset { grid-column: 1 / -1; }
.rcm-rate-pkg-grid .rcm-rate-pkg-preset select { padding: 0.4rem 0.55rem; }
@media (max-width: 720px) { .rcm-rate-pkg-grid { grid-template-columns: 1fr 1fr; } }
.rcm-rate-actions { display: flex; justify-content: flex-end; margin: 0.4rem 0; }
.rcm-rate-results { margin-top: 0.55rem; }
.rcm-rate-loading {
display: inline-flex; align-items: center; gap: 0.45rem;
font-size: 0.85rem; color: var(--rcm-muted); padding: 0.5rem 0;
}
.rcm-rate-error {
margin: 0.35rem 0; padding: 0.45rem 0.7rem; border-radius: var(--rcm-radius-sm);
background: #fee2e2; color: #b91c1c; font-size: 0.8rem;
}
.rcm-rate-table .is-cheapest { background: #d1fae5; }
.rcm-rate-carrier {
font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
padding: 0.12rem 0.5rem; border-radius: 999px;
}
.rcm-rate-carrier.rcm-rate-ups { background: #341b14; color: white; }
.rcm-rate-carrier.rcm-rate-fedex { background: linear-gradient(135deg, #4d148c 0%, #ff6600 100%); color: white; }
.rcm-rate-carrier.rcm-rate-usps { background: #004b87; color: white; }
.rcm-rate-best {
display: inline-block; margin-left: 0.4rem;
font-size: 0.58rem; font-weight: 800; letter-spacing: 0.05em;
background: var(--rcm-success); color: white;
padding: 0.08rem 0.45rem; border-radius: 999px;
}
/* ---------- Create Shipment modal ---------- */
.rcm-cs-form .rcm-cs-service { margin-top: 0.5rem; }
.rcm-cs-svc-grid {
display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 0.4rem;
}
.rcm-cs-svc-grid label {
display: flex; flex-direction: column; gap: 0.15rem;
font-size: 0.65rem; color: var(--rcm-muted); font-weight: 600;
}
.rcm-cs-svc-grid input, .rcm-cs-svc-grid select {
padding: 0.4rem 0.55rem; border: 1px solid var(--rcm-border, #d1d5db);
border-radius: 4px; font-size: 0.85rem; background: white;
}
.rcm-cs-svc-grid .rcm-cs-contents { grid-column: 1 / -1; }
@media (max-width: 720px) { .rcm-cs-svc-grid { grid-template-columns: 1fr 1fr; } }
.rcm-cs-actions {
display: flex; justify-content: flex-end; gap: 0.4rem; margin: 0.75rem 0 0.3rem;
}
.rcm-cs-status {
margin: 0.35rem 0; padding: 0.5rem 0.7rem; border-radius: 4px;
font-size: 0.82rem; min-height: 1.4em;
}
.rcm-cs-status.is-loading { background: #eff6ff; color: #1e3a8a; }
.rcm-cs-status.is-ok { background: #d1fae5; color: #065f46; }
.rcm-cs-status.is-error { background: #fee2e2; color: #991b1b; }
.rcm-cs-status:empty { display: none; }
.rcm-cs-result-card {
margin-top: 0.6rem; padding: 0.85rem; background: #f9fafb;
border: 1px solid #e5e7eb; border-radius: 6px;
display: flex; flex-direction: column; gap: 0.35rem;
font-size: 0.88rem;
}
.rcm-cs-result-card code {
background: #fff; padding: 0.05rem 0.35rem; border-radius: 3px;
border: 1px solid #e5e7eb; font-family: 'SFMono-Regular', Consolas, monospace;
}
.rcm-cs-printstat {
margin-top: 0.2rem; padding: 0.4rem 0.6rem; border-radius: 4px;
font-size: 0.8rem; background: #fef3c7; color: #92400e;
}
.rcm-cs-printstat.is-ok { background: #d1fae5; color: #065f46; }
.rcm-cs-printstat.is-error { background: #fee2e2; color: #991b1b; }
.rcm-cs-result-actions {
display: flex; gap: 0.4rem; justify-content: flex-end; margin-top: 0.5rem;
}
/* ---------- Phase 4: multi-package modal additions ---------- */
.cs-pkg-stack { display: flex; flex-direction: column; gap: 0.55rem; }
.cs-pkg { position: relative; padding: 0.55rem 0.7rem 0.4rem; background: #fcfcfd; border: 1px solid #e5e7eb; border-radius: 6px; }
.cs-pkg > legend {
font-size: 0.72rem; font-weight: 700; color: var(--rcm-muted, #6b7280);
padding: 0 0.35rem; letter-spacing: 0.03em; text-transform: uppercase;
display: inline-flex; align-items: center; gap: 0.6rem;
}
.cs-pkg-remove {
font-size: 0.7rem; color: #b91c1c; padding: 0;
}
.cs-pkg-remove:disabled { opacity: 0.35; cursor: not-allowed; color: var(--rcm-muted, #6b7280); }
.cs-pkg .rcm-rate-pkg-grid { grid-template-columns: 2fr 0.9fr 0.7fr 0.7fr 0.7fr 1fr; }
.cs-pkg .cs-pkg-contents-lbl { grid-column: 1 / -1; }
@media (max-width: 720px) { .cs-pkg .rcm-rate-pkg-grid { grid-template-columns: 1fr 1fr; } }
.cs-pkg-stack-actions {
display: flex; align-items: center; gap: 0.6rem; margin: 0.55rem 0 0.35rem;
}
.cs-pkg-hint { font-size: 0.72rem; color: var(--rcm-muted, #6b7280); }
.cs-items { margin-top: 0.45rem; border-top: 1px dashed #e5e7eb; padding-top: 0.4rem; }
.cs-items > summary {
cursor: pointer; list-style: none;
font-size: 0.78rem; font-weight: 600; color: #1f2937;
display: flex; align-items: center; gap: 0.45rem; padding: 0.15rem 0;
}
.cs-items > summary::-webkit-details-marker { display: none; }
.cs-items > summary::before {
content: '\25B6'; font-size: 0.6rem; color: var(--rcm-muted, #6b7280);
transition: transform 0.15s ease;
}
.cs-items[open] > summary::before { transform: rotate(90deg); }
.cs-items-count { margin-left: auto; font-size: 0.72rem; font-weight: 500; color: var(--rcm-muted, #6b7280); }
.cs-items-body { padding: 0.4rem 0 0.1rem; display: flex; flex-direction: column; gap: 0.45rem; }
.cs-items-empty { font-size: 0.78rem; color: var(--rcm-muted, #6b7280); font-style: italic; }
.cs-items-group-label {
font-size: 0.68rem; font-weight: 700; color: var(--rcm-muted, #6b7280);
letter-spacing: 0.04em; text-transform: uppercase;
margin-bottom: 0.2rem;
}
.cs-item {
display: grid; grid-template-columns: auto 1fr auto; gap: 0.45rem;
align-items: center; padding: 0.18rem 0.3rem; border-radius: 4px;
cursor: pointer; font-size: 0.8rem;
}
.cs-item:hover { background: #f3f4f6; }
.cs-item.is-disabled { opacity: 0.45; cursor: not-allowed; }
.cs-item.is-disabled:hover { background: transparent; }
.cs-item-name { color: #111827; }
.cs-item-qty { font-size: 0.7rem; color: var(--rcm-muted, #6b7280); font-variant-numeric: tabular-nums; }
.cs-unassigned-warn {
margin: 0.45rem 0; padding: 0.5rem 0.7rem; border-radius: 4px;
font-size: 0.78rem; background: #fef3c7; color: #92400e;
border: 1px solid #fde68a;
}
/* Per-package result rows after a successful create-shipment POST. */
.rcm-cs-result-list { display: flex; flex-direction: column; gap: 0.35rem; margin: 0.4rem 0; }
.rcm-cs-result-row {
display: grid; gap: 0.4rem;
grid-template-columns: auto 1fr auto 1.4fr auto;
align-items: center;
padding: 0.4rem 0.55rem; background: white;
border: 1px solid #e5e7eb; border-radius: 4px;
font-size: 0.78rem;
}
.rcm-cs-result-row-label { font-weight: 700; color: #374151; }
.rcm-cs-result-row-tn code {
font-size: 0.78rem; padding: 0.05rem 0.4rem;
background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 3px;
}
.rcm-cs-result-row-cost { font-variant-numeric: tabular-nums; color: #047857; font-weight: 600; }
.rcm-cs-result-row .rcm-cs-printstat {
margin-top: 0; padding: 0.25rem 0.45rem; font-size: 0.72rem;
}
.rcm-btn-sm { font-size: 0.72rem; padding: 0.25rem 0.55rem; }
/* "Box 2 of 3" badge in the deal-page Shipments table. */
.rcm-ship-box-badge {
display: inline-block; margin-left: 0.45rem;
font-size: 0.6rem; font-weight: 700; letter-spacing: 0.05em;
background: #ede9fe; color: #5b21b6;
padding: 0.08rem 0.45rem; border-radius: 999px;
text-transform: uppercase;
}
.rcm-ship-group-toggle {
display: inline-flex; align-items: center; justify-content: center;
width: 18px; height: 18px;
background: transparent; border: 0; color: var(--rcm-muted, #6b7280);
cursor: pointer; padding: 0; margin-right: 0.2rem;
}
.rcm-ship-group-toggle:hover { color: #111827; }
.rcm-ship-grp-child > td { background: #fafbfc; }
.rcm-ship-grp-child > td:first-child { border-left: 3px solid #ede9fe; }
/* ---------- collapsible accordion (Item Shipment Status) ---------- */
.rcm-card-collapsible { padding: 0; }
.rcm-accordion > .rcm-accordion-summary {
display: flex; align-items: center; gap: 0.75rem;
list-style: none; cursor: pointer;
padding: 0.6rem 0.85rem;
user-select: none;
}
.rcm-accordion > .rcm-accordion-summary::-webkit-details-marker { display: none; }
.rcm-accordion-title {
margin: 0; padding: 0; border: none; flex-shrink: 0;
}
.rcm-accordion-counts {
display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
flex: 1; min-width: 0;
}
.rcm-count {
display: inline-flex; align-items: center; gap: 0.25rem;
padding: 0.08rem 0.5rem;
border-radius: 999px;
font-size: 0.74rem; font-weight: 500;
white-space: nowrap;
}
.rcm-count strong { font-weight: 700; font-variant-numeric: tabular-nums; }
.rcm-count-ok { background: #dcfce7; color: #166534; }
.rcm-count-warn { background: #fef3c7; color: #92400e; }
.rcm-count-neg { background: #fee2e2; color: #991b1b; }
.rcm-count-complete {
background: white; color: #047857;
font-weight: 700; letter-spacing: 0.01em;
padding: 0.18rem 0.7rem;
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.rcm-count-complete i { color: #047857; font-size: 0.78rem; }
/* Whole accordion header turns green when the deal has shipped complete. */
.rcm-accordion.is-complete > .rcm-accordion-summary {
background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
border-left: 4px solid #10b981;
border-radius: var(--rcm-radius-md) var(--rcm-radius-md) 0 0;
}
.rcm-accordion.is-complete:not([open]) > .rcm-accordion-summary {
border-radius: var(--rcm-radius-md);
}
.rcm-accordion.is-complete .rcm-accordion-title { color: #065f46; }
.rcm-accordion.is-complete .rcm-accordion-chev { color: #065f46; }
/* Action toolbar at the top of the Shipments accordion body */
.rcm-ship-actions {
display: flex; gap: 0.5rem; flex-wrap: wrap;
padding: 0.65rem 0.85rem;
background: var(--rcm-bg);
border-bottom: 1px solid var(--rcm-line);
}
.rcm-ship-actions .rcm-btn { white-space: nowrap; }
@media (max-width: 720px) {
/* Get Rates / Create Shipment / Add Shipment are workstation actions —
* we don't print labels from a phone. Hide the whole toolbar on mobile. */
.rcm-ship-actions { display: none; }
}
.rcm-accordion-chev {
color: var(--rcm-muted); font-size: 0.7rem;
transition: transform 0.15s ease;
flex-shrink: 0;
}
.rcm-accordion[open] .rcm-accordion-chev { transform: rotate(180deg); }
.rcm-accordion[open] > .rcm-accordion-summary {
border-bottom: 1px solid var(--rcm-line);
}
.rcm-accordion > table { width: calc(100% - 0px); }
.rcm-accordion > table thead th { padding: 0.32rem 0.85rem; }
.rcm-accordion > table tbody td { padding: 0.32rem 0.85rem; }
.rcm-dp26-card {
background: var(--rcm-surface);
border: 1px solid var(--rcm-line-soft);
border-radius: var(--rcm-radius-md);
box-shadow: var(--rcm-shadow);
padding: 1rem 1.15rem;
min-width: 0;
max-width: 100%;
overflow-wrap: break-word;
}
@media (max-width: 720px) {
.rcm-dp26-card { padding: 0.8rem 0.85rem; }
}
.rcm-dp26-grid > .rcm-card-wide { grid-column: 1 / -1; }
.rcm-dp26-card-title {
font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em;
color: var(--rcm-ink); text-transform: none;
margin: 0 0 0.7rem; padding-bottom: 0;
border-bottom: none;
}
.rcm-dp26-card-head-with-action {
display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;
margin-bottom: 0.7rem;
}
.rcm-dp26-card-head-with-action .rcm-dp26-card-title { margin: 0; border: none; padding: 0; }
.rcm-dp26-hint { color: var(--rcm-muted); font-size: 0.74rem; margin: 0 0 0.5rem; font-weight: 500; }
.rcm-card-hint {
font-size: 0.55rem; font-weight: 700; letter-spacing: 0.05em;
padding: 0.08rem 0.5rem; border-radius: 999px;
background: var(--rcm-accent-ghost); color: var(--rcm-accent-2);
text-transform: uppercase; vertical-align: middle; margin-left: 0.4rem;
cursor: help;
}
/* ---------- form grid (Deal Details — new-deal create flow only) ---------- */
.rcm-dp26-form-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.3rem 0.6rem;
}
/* ---------- Deal Details (existing deals) — clean grouped layout ----------
* Top strip: Attachments (customer · NCES · sales · serials) as visual identity.
* Below: 3 semantic groups — Order, References, Lead — each a small card.
*/
.rcm-dp26-coredetails { padding: 0; }
.rcm-dp26-detail-attachments {
display: flex; flex-wrap: wrap; gap: 0.7rem 1.1rem;
padding: 0.9rem 1.1rem;
background: linear-gradient(135deg, #ffffff 0%, var(--rcm-accent-ghost) 100%);
border-bottom: 1px solid var(--rcm-line);
border-radius: var(--rcm-radius-md) var(--rcm-radius-md) 0 0;
min-width: 0;
}
/* Each attachment group becomes a self-contained chip: label above, pill(s) below. */
.rcm-dp26-detail-attachments .rcm-attach-group {
display: flex; flex-direction: column; gap: 0.25rem;
position: relative; padding-right: 1.5rem; /* room for the edit pencil */
min-width: 0; max-width: 100%;
}
.rcm-dp26-detail-attachments .rcm-attach-sublabel {
font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.07em;
color: var(--rcm-muted); font-weight: 700;
}
/* Allow long customer / school names to wrap inside the pill instead of
* forcing the whole card wider than the viewport. */
.rcm-dp26-detail-attachments .rcm-attach-pill {
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
max-width: 100%;
line-height: 1.35;
}
.rcm-dp26-detail-attachments .rcm-field-edit-btn {
position: absolute; top: 1.3rem; right: 0;
opacity: 0; transition: opacity 0.12s ease;
}
.rcm-dp26-detail-attachments .rcm-attach-group:hover .rcm-field-edit-btn { opacity: 1; }
/* Mobile: stack groups vertically so each pill gets the full row width and
* the edit pencil is always reachable rather than hidden behind hover. */
@media (max-width: 720px) {
.rcm-dp26-detail-attachments {
flex-direction: column; align-items: stretch;
gap: 0.55rem; padding: 0.75rem 0.85rem;
}
.rcm-dp26-detail-attachments .rcm-attach-group { padding-right: 1.75rem; }
.rcm-dp26-detail-attachments .rcm-field-edit-btn { opacity: 0.6; top: auto; bottom: 0.05rem; }
}
.rcm-dp26-detail-groups {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.85rem; padding: 0.9rem 1.1rem;
}
@media (max-width: 1100px) { .rcm-dp26-detail-groups { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) {
.rcm-dp26-detail-groups { grid-template-columns: 1fr; padding: 0.75rem 0.85rem; gap: 0.7rem; }
}
.rcm-dp26-detail-group {
background: #ffffff;
border: 1px solid var(--rcm-line);
border-radius: var(--rcm-radius-sm);
padding: 0;
box-shadow: 0 1px 2px rgba(30,34,69,0.03);
overflow: hidden;
display: flex; flex-direction: column;
}
.rcm-dp26-detail-grouptitle {
display: flex; align-items: center; gap: 0.45rem;
font-size: 0.66rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.07em; color: var(--rcm-accent-2);
padding: 0.55rem 0.85rem;
background: var(--rcm-accent-ghost);
border-bottom: 1px solid var(--rcm-line);
}
.rcm-dp26-detail-grouptitle i { font-size: 0.78rem; opacity: 0.75; }
.rcm-dp26-detail-fields {
display: flex; flex-direction: column;
padding: 0.55rem 0.85rem;
}
/* Inline label · value rows with subtle row dividers for visual rhythm. */
.rcm-dp26-detail-fields .rcm-field {
display: grid; grid-template-columns: 96px 1fr; align-items: baseline;
gap: 0.55rem; min-width: 0;
padding: 0.32rem 0; border-bottom: 1px dashed var(--rcm-line-soft);
}
.rcm-dp26-detail-fields .rcm-field:last-child { border-bottom: none; }
.rcm-dp26-detail-fields .rcm-field-label {
font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.06em;
color: var(--rcm-muted); font-weight: 700; line-height: 1.4;
}
.rcm-dp26-detail-fields .rcm-field-display,
.rcm-dp26-detail-fields .rcm-field-value {
font-size: 0.82rem; color: var(--rcm-ink); font-weight: 500;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
min-width: 0;
}
@media (max-width: 720px) {
.rcm-dp26-detail-fields .rcm-field {
grid-template-columns: 84px 1fr; gap: 0.4rem;
}
.rcm-dp26-detail-fields .rcm-field-display,
.rcm-dp26-detail-fields .rcm-field-value {
white-space: normal; overflow-wrap: anywhere; word-break: break-word;
}
}
.rcm-dp26-detail-fields .rcm-field-value.is-empty { color: var(--rcm-muted); font-weight: 400; }
/* ---------- Lead provenance panel (extra detail under the Lead group) ---------- */
.rcm-lead-provenance {
border-top: 1px dashed var(--rcm-line);
padding: 0.6rem 0.85rem 0.8rem;
background: var(--rcm-line-soft);
}
.rcm-lead-chips {
display: flex; flex-wrap: wrap; gap: 0.3rem;
margin-bottom: 0.55rem;
}
.rcm-lead-chip {
display: inline-flex; align-items: center; gap: 0.3rem;
padding: 0.18rem 0.55rem;
background: white; color: var(--rcm-ink-soft);
border: 1px solid var(--rcm-line); border-radius: 999px;
font-size: 0.7rem; font-weight: 600;
}
.rcm-lead-chip i { font-size: 0.68rem; color: var(--rcm-muted); }
.rcm-lead-chip-channel { background: var(--rcm-accent); color: white; border-color: var(--rcm-accent); }
.rcm-lead-stats {
display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
gap: 0.4rem; margin-bottom: 0.55rem;
}
.rcm-lead-stat {
display: flex; flex-direction: column; align-items: center;
padding: 0.4rem 0.3rem;
background: white; border: 1px solid var(--rcm-line);
border-radius: var(--rcm-radius-sm);
}
.rcm-lead-stat strong {
font-size: 1rem; font-weight: 800; color: var(--rcm-accent-2);
font-variant-numeric: tabular-nums;
}
.rcm-lead-stat span {
font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.05em;
color: var(--rcm-muted); font-weight: 600;
}
.rcm-lead-rows {
display: grid; grid-template-columns: 96px 1fr; gap: 0.25rem 0.55rem;
margin: 0; font-size: 0.74rem;
}
.rcm-lead-rows dt {
text-transform: uppercase; letter-spacing: 0.05em;
font-size: 0.62rem; color: var(--rcm-muted); font-weight: 700;
align-self: center;
}
.rcm-lead-rows dd {
margin: 0; color: var(--rcm-ink-soft);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rcm-lead-link {
color: var(--rcm-accent); text-decoration: none; font-weight: 500;
}
.rcm-lead-link:hover { color: var(--rcm-accent-2); }
.rcm-lead-link .rcm-mini-ico { font-size: 0.6rem; margin-left: 0.15rem; opacity: 0.6; }
/* Each field cell — used by both view mode and edit mode */
.rcm-field { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; }
.rcm-field-label {
font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em;
color: var(--rcm-muted); font-weight: 700;
}
/* View mode: display value + hover-pencil */
.rcm-field-display {
position: relative;
display: flex; align-items: center; justify-content: space-between; gap: 0.35rem;
padding: 0.18rem 0.35rem 0.18rem 0;
background: transparent;
border: 1px solid transparent;
border-radius: var(--rcm-radius-sm);
min-height: 24px;
transition: background-color 0.12s ease, border-color 0.12s ease;
}
.rcm-field-display:hover {
background: var(--rcm-bg);
border-color: var(--rcm-line);
}
.rcm-field-value {
font-size: 0.84rem; color: var(--rcm-ink); font-weight: 500;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
flex: 1; min-width: 0;
}
.rcm-field-value.is-empty { color: var(--rcm-muted); font-weight: 400; font-style: italic; }
.rcm-field-edit-btn {
display: flex; align-items: center; justify-content: center;
width: 20px; height: 20px;
border: none; background: transparent;
border-radius: 4px; cursor: pointer; color: var(--rcm-muted);
opacity: 0; transition: opacity 0.12s ease, background-color 0.12s ease;
font-family: inherit; flex-shrink: 0;
font-size: 0.7rem;
}
.rcm-field-display:hover .rcm-field-edit-btn { opacity: 1; }
.rcm-field-edit-btn:hover { background: white; color: var(--rcm-accent); }
/* Edit mode */
.rcm-field-editing .rcm-field-control {
display: flex; align-items: center; gap: 0.3rem;
}
.rcm-field-editing input,
.rcm-field-editing select,
.rcm-field-editing textarea {
flex: 1; min-width: 0;
background: white; border: 1px solid var(--rcm-accent);
border-radius: var(--rcm-radius-sm); padding: 0.32rem 0.55rem;
font-size: 0.84rem; color: var(--rcm-ink);
font-family: inherit;
box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
}
.rcm-field-editing input:focus,
.rcm-field-editing select:focus { outline: none; }
.rcm-field-commit {
display: flex; align-items: center; justify-content: center;
width: 24px; height: 24px;
border: 1px solid var(--rcm-accent); background: var(--rcm-accent);
color: white; border-radius: var(--rcm-radius-sm); cursor: pointer;
font-family: inherit; font-size: 0.72rem; flex-shrink: 0;
}
.rcm-field-commit:hover { background: var(--rcm-accent-2); }
/* Always-editable mode (new deal): labels get a normal-weight bottom-aligned look */
.rcm-dp26-form-grid label {
display: flex; flex-direction: column; gap: 0.15rem;
font-size: 0.7rem; color: var(--rcm-muted); font-weight: 600;
}
.rcm-dp26-form-grid label input,
.rcm-dp26-form-grid label select,
.rcm-dp26-form-grid label textarea {
background: var(--rcm-bg); border: 1px solid var(--rcm-line);
border-radius: var(--rcm-radius-sm); padding: 0.28rem 0.45rem;
font-size: 0.84rem; color: var(--rcm-ink);
font-family: inherit;
}
.rcm-dp26-form-grid label input:focus,
.rcm-dp26-form-grid label select:focus { outline: none; border-color: var(--rcm-accent); background: white; }
.rcm-dp26-primary-pick {
display: block; margin-top: 0.35rem; font-size: 0.7rem; color: var(--rcm-muted); font-weight: 600;
}
.rcm-dp26-primary-pick select {
display: block; width: 100%; margin-top: 0.2rem;
background: var(--rcm-bg); border: 1px solid var(--rcm-line);
border-radius: var(--rcm-radius-sm); padding: 0.3rem 0.45rem;
font-size: 0.84rem; font-family: inherit;
}
/* ---------- financial summary ---------- */
/* Header row holds the title + "Deal Complete" pill (neutral background;
* the pill carries the status signal without colorizing the whole header). */
.rcm-fin-cardhead {
display: flex; justify-content: space-between; align-items: center;
gap: 0.5rem; padding: 0.1rem 0 0.6rem;
}
.rcm-fin-cardhead .rcm-dp26-card-title { margin: 0; padding: 0; border: none; }
/* Collapsible "Details" sub-section inside the financial summary */
.rcm-fin-details-toggle td { padding: 0 0.5rem !important; border: none; }
.rcm-fin-details-btn {
display: inline-flex; align-items: center; gap: 0.45rem;
background: transparent; border: 0; cursor: pointer;
font: inherit; font-size: 0.7rem; font-weight: 700;
color: var(--rcm-muted); text-transform: uppercase; letter-spacing: 0.06em;
padding: 0.3rem 0;
}
.rcm-fin-details-btn:hover { color: var(--rcm-accent); }
.rcm-fin-details-chev { font-size: 0.62rem; transition: transform 0.12s ease; }
.rcm-fin-details-hint {
font-weight: 500; text-transform: none; letter-spacing: 0;
color: var(--rcm-muted); font-size: 0.7rem; font-style: italic;
margin-left: 0.4rem;
}
.rcm-fin-details-body tr td:first-child { color: var(--rcm-muted); }
.rcm-fin-card .rcm-fin-table { font-size: 0.78rem; }
.rcm-fin-table tbody td { padding: 0.22rem 0.5rem; border-bottom: none; }
.rcm-fin-table tbody td:first-child { color: var(--rcm-muted); }
.rcm-fin-table .rcm-fin-row-key td {
font-weight: 700; color: var(--rcm-ink); background: #f8fafc;
}
.rcm-fin-table .rcm-fin-row-key td:first-child { color: var(--rcm-ink); }
.rcm-fin-table .rcm-fin-sep td { border-top: 1px solid var(--rcm-line); padding-top: 0.32rem; }
.rcm-fin-table .rcm-fin-row-net td {
font-size: 0.92rem; font-weight: 800; color: var(--rcm-ink);
background: linear-gradient(to right, #eef0ff, #ffffff);
border-top: 2px solid var(--rcm-accent);
border-bottom: 2px solid var(--rcm-accent);
padding: 0.35rem 0.5rem;
}
/* When the deal is fully closed out, recolor the RCS Net Profit "final" row
* green to reinforce the locked-in result. */
.rcm-fin-card.is-deal-complete .rcm-fin-table .rcm-fin-row-net td {
background: linear-gradient(to right, #ecfdf5, #ffffff);
border-top: 2px solid #10b981;
border-bottom: 2px solid #10b981;
color: #065f46;
}
/* Per-salesperson commission rows inside the Financial Summary */
.rcm-fin-comm-header td {
font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.07em;
color: var(--rcm-muted); font-weight: 700;
padding-top: 0.45rem !important; padding-bottom: 0.18rem !important;
}
.rcm-fin-comm-row td:first-child {
display: flex; align-items: center; justify-content: space-between; gap: 0.4rem;
color: var(--rcm-ink); padding-left: 1rem;
}
.rcm-fin-comm-name {
display: inline-flex; align-items: center; gap: 0.3rem;
font-weight: 500;
}
.rcm-fin-comm-tag { font-size: 0.55rem; padding: 0.04rem 0.3rem; }
/* Bonus row inside the Financial Summary commissions block. Styled green so
it reads as additive vs. the gray base-commission rows above it. */
.rcm-fin-comm-bonus-row td {
padding-top: 0.1rem !important; padding-bottom: 0.1rem !important;
background: #ecfdf5;
}
.rcm-fin-comm-bonus-row td:first-child { padding-left: 2rem; }
.rcm-fin-comm-bonus-label {
color: #047857; font-weight: 600; font-size: 0.78rem;
}
.rcm-fin-comm-bonus-amt {
color: #047857; font-weight: 700;
}
.rcm-fin-comm-edit {
background: transparent; border: none; cursor: pointer;
width: 18px; height: 18px;
border-radius: 3px; color: var(--rcm-muted); opacity: 0;
transition: opacity 0.12s ease, background-color 0.12s ease;
font-family: inherit; font-size: 0.65rem;
}
.rcm-fin-comm-row:hover .rcm-fin-comm-edit { opacity: 1; }
.rcm-fin-comm-edit:hover { background: white; color: var(--rcm-accent); }
.rcm-fin-comm-pct {
font-size: 0.68rem; color: var(--rcm-muted);
font-variant-numeric: tabular-nums;
}
/* ---------- combined inline-attachments row (customer / salespeople / NCES / serials) ---------- */
.rcm-field-inline { grid-column: 1 / -1; }
.rcm-inline-pill-flex {
display: flex; flex-wrap: wrap; align-items: center;
gap: 0.5rem 1rem;
padding: 0.3rem 0;
}
.rcm-attach-group {
display: inline-flex; align-items: center; gap: 0.3rem;
padding: 0.15rem 0.4rem;
border-radius: var(--rcm-radius-sm);
position: relative;
transition: background-color 0.12s ease;
}
.rcm-attach-group:hover { background: var(--rcm-bg); }
.rcm-attach-group:hover .rcm-field-edit-btn { opacity: 0.7; }
.rcm-attach-group .rcm-field-edit-btn:hover { opacity: 1; }
.rcm-attach-sublabel {
font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.07em;
color: var(--rcm-muted); font-weight: 700;
margin-right: 0.1rem;
}
.rcm-attach-pill {
display: inline-flex; align-items: center; gap: 0.3rem;
padding: 0.18rem 0.55rem;
background: var(--rcm-bg); border: 1px solid var(--rcm-line);
border-radius: 999px;
font-size: 0.78rem; color: var(--rcm-ink); font-weight: 500;
white-space: nowrap;
max-width: 100%;
}
@media (max-width: 720px) {
.rcm-attach-pill {
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
line-height: 1.35;
}
}
.rcm-attach-pill i { font-size: 0.72rem; opacity: 0.7; }
.rcm-attach-pill-primary {
background: var(--rcm-accent); color: white; border-color: var(--rcm-accent);
font-weight: 600;
}
.rcm-attach-pill-primary .rcm-attach-mini-badge {
background: rgba(255,255,255,0.25); color: white;
}
.rcm-attach-mini-badge {
font-size: 0.55rem; font-weight: 700; letter-spacing: 0.04em;
padding: 0.04rem 0.3rem; border-radius: 3px;
background: var(--rcm-line); color: var(--rcm-muted);
}
.rcm-attach-customer {
background: #fef3c7; color: #92400e; border-color: #fde68a;
}
.rcm-attach-nces {
background: #eef0ff; color: var(--rcm-accent-2); border-color: var(--rcm-accent-soft);
}
.rcm-attach-serial {
background: #ecfdf5; color: #065f46; border-color: #a7f3d0;
font-size: 0.74rem;
}
.rcm-attach-serial-name {
font-family: inherit; font-weight: 600;
max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rcm-attach-serial-num {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.72rem;
background: rgba(6, 95, 70, 0.08);
padding: 0.02rem 0.35rem;
border-radius: 4px;
margin-left: 0.15rem;
}
.rcm-attach-empty {
font-style: italic; color: var(--rcm-muted); background: transparent; border-style: dashed;
}
/* Customer modal — current attachment block */
.rcm-customer-current {
display: flex; align-items: center; gap: 0.7rem;
padding: 0.6rem 0.8rem; background: var(--rcm-bg);
border-radius: var(--rcm-radius-sm); border: 1px dashed var(--rcm-line);
margin-bottom: 0.7rem;
}
.rcm-customer-current i { font-size: 1.1rem; color: var(--rcm-warning); }
.rcm-customer-current-name { font-weight: 700; font-size: 0.95rem; }
.rcm-customer-current-sub { font-size: 0.72rem; color: var(--rcm-muted); }
/* Inside the Edit-Customer modal, render the dropdown inline in flow (not
* absolutely positioned) so it appears directly under the input AND the
* modal body grows to fit it instead of clipping. */
.rcm-customer-search-wrap {
position: relative;
margin-bottom: 0.75rem;
}
.rcm-customer-search-wrap .rcm-typeahead-dropdown {
position: static !important;
margin-top: 0.25rem;
max-height: 320px;
}
/* ---------- salespeople pills inside Deal Details (view mode) ---------- */
.rcm-field-salespeople { grid-column: 1 / -1; } /* span the whole form-grid row */
.rcm-field-salespeople .rcm-field-display { padding: 0.2rem 0.35rem; }
.rcm-sp-pills { display: flex; flex-wrap: wrap; gap: 0.3rem; flex: 1; min-width: 0; }
.rcm-sp-pill {
display: inline-flex; align-items: center; gap: 0.3rem;
padding: 0.18rem 0.55rem;
background: var(--rcm-bg); border: 1px solid var(--rcm-line);
border-radius: 999px;
font-size: 0.78rem; color: var(--rcm-ink); font-weight: 500;
}
.rcm-sp-pill-primary {
background: var(--rcm-accent); color: white; border-color: var(--rcm-accent);
font-weight: 600;
}
.rcm-sp-badge {
font-size: 0.58rem; font-weight: 700; letter-spacing: 0.05em;
padding: 0.05rem 0.35rem; border-radius: 4px;
background: rgba(255,255,255,0.2);
}
/* ---------- salespeople editor modal ---------- */
.rcm-sp-editor-actions {
display: flex; justify-content: flex-end; margin-top: 1rem;
padding-top: 0.85rem; border-top: 1px solid var(--rcm-line);
}
/* ---------- inline NCES pill in Deal Details ---------- */
.rcm-field-nces { grid-column: 1 / -1; }
.rcm-field-nces .rcm-field-display { padding: 0.2rem 0.35rem; }
.rcm-nces-pill-row { display: flex; flex-wrap: wrap; gap: 0.3rem; flex: 1; min-width: 0; }
.rcm-nces-pill {
display: inline-flex; align-items: center; gap: 0.4rem;
padding: 0.18rem 0.6rem;
background: #eef0ff;
color: var(--rcm-accent-2);
border: 1px solid var(--rcm-accent-soft);
border-radius: 999px;
font-size: 0.78rem; font-weight: 500;
white-space: nowrap;
max-width: 100%;
}
@media (max-width: 720px) {
.rcm-nces-pill {
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
line-height: 1.35;
}
}
.rcm-nces-pill i { font-size: 0.78rem; opacity: 0.85; }
.rcm-nces-pill-sub {
color: var(--rcm-muted); font-weight: 400; font-size: 0.7rem;
}
.rcm-nces-actions {
display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;
margin-top: 1rem; padding-top: 0.85rem; border-top: 1px solid var(--rcm-line);
}
/* ---------- shared compact modal form (expense/shipment/override) ---------- */
.rcm-modal-form {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem 1rem;
}
.rcm-modal-form-row {
display: flex; flex-direction: column; gap: 0.2rem;
font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em;
color: var(--rcm-muted); font-weight: 700;
}
.rcm-modal-form-wide { grid-column: 1 / -1; }
.rcm-modal-form-row input,
.rcm-modal-form-row select {
padding: 0.4rem 0.6rem; border: 1px solid var(--rcm-line);
border-radius: var(--rcm-radius-sm); background: white;
font-size: 0.88rem; color: var(--rcm-ink); font-family: inherit;
font-weight: 500;
}
.rcm-modal-form-row input:focus, .rcm-modal-form-row select:focus {
outline: none; border-color: var(--rcm-accent);
box-shadow: 0 0 0 2px rgba(99,102,241,0.15);
}
.rcm-modal-form-actions {
display: flex; gap: 0.5rem; align-items: center;
margin-top: 1rem; padding-top: 0.85rem; border-top: 1px solid var(--rcm-line);
justify-content: flex-end;
}
/* Override modal-specific */
.rcm-override-modal .rcm-override-form { margin: 0.6rem 0; }
.rcm-override-form-row {
display: flex; flex-direction: column; gap: 0.25rem;
font-size: 0.78rem; color: var(--rcm-muted); font-weight: 600;
}
.rcm-override-form-row input {
padding: 0.5rem 0.7rem; border: 1px solid var(--rcm-line);
border-radius: var(--rcm-radius-sm); font-size: 1rem;
font-family: inherit; font-weight: 600;
max-width: 200px;
}
.rcm-override-form-row input:focus { outline: none; border-color: var(--rcm-accent); }
.rcm-override-actions {
display: flex; gap: 0.5rem; align-items: center;
margin-top: 1rem; padding-top: 0.85rem; border-top: 1px solid var(--rcm-line);
}
/* ---------- batch-attach modal (after customer pick) ---------- */
.rcm-batch-hint {
background: #eef0ff; color: var(--rcm-accent-2);
padding: 0.5rem 0.8rem; border-radius: var(--rcm-radius-sm);
font-size: 0.82rem; margin-bottom: 0.85rem;
border: 1px solid var(--rcm-accent-soft);
}
.rcm-batch-list {
display: flex; flex-direction: column; gap: 0.3rem;
margin-bottom: 0.85rem;
}
.rcm-batch-row {
display: flex; align-items: flex-start; gap: 0.55rem;
padding: 0.55rem 0.7rem;
background: white; border: 1px solid var(--rcm-line);
border-radius: var(--rcm-radius-sm);
cursor: pointer; transition: all 0.1s ease;
}
.rcm-batch-row:hover { background: var(--rcm-bg-2); border-color: var(--rcm-accent); }
.rcm-batch-row input { margin-top: 0.2rem; flex-shrink: 0; }
.rcm-batch-main { flex: 1; min-width: 0; }
.rcm-batch-line1 { font-size: 0.86rem; }
.rcm-batch-line2 { font-size: 0.74rem; color: var(--rcm-muted); margin-top: 0.1rem; }
.rcm-batch-line3 { font-size: 0.72rem; color: var(--rcm-muted); margin-top: 0.15rem; }
.rcm-batch-row-disabled {
opacity: 0.55; background: var(--rcm-bg); cursor: not-allowed;
}
.rcm-batch-row-disabled:hover { background: var(--rcm-bg); border-color: var(--rcm-line); }
/* Tracking link affordance */
.rcm-mini-ico { font-size: 0.62rem; opacity: 0.7; margin-left: 2px; }
.rcm-table tbody td a { color: var(--rcm-accent); text-decoration: none; }
.rcm-table tbody td a:hover { text-decoration: underline; }
/* ---------- salesperson chips ---------- */
.rcm-chip-row { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.4rem 0; }
.rcm-chip {
display: inline-flex; align-items: center; gap: 0.3rem;
padding: 0.22rem 0.55rem;
background: var(--rcm-bg); border: 1px solid var(--rcm-line);
border-radius: 999px;
font-size: 0.74rem; cursor: pointer; transition: all 0.12s ease;
color: var(--rcm-muted);
font-family: inherit;
}
.rcm-chip:hover { border-color: var(--rcm-accent); color: var(--rcm-ink); }
.rcm-chip.is-on {
background: #eef0ff; color: var(--rcm-accent-2);
border-color: var(--rcm-accent); font-weight: 600;
}
.rcm-chip.is-primary { background: var(--rcm-accent); color: white; border-color: var(--rcm-accent); }
.rcm-chip-badge {
font-size: 0.65rem; font-weight: 700; letter-spacing: 0.05em;
padding: 0.05rem 0.35rem; border-radius: 4px;
background: rgba(255,255,255,0.2);
}
/* ---------- table ---------- */
/* Wrapper added by JS around every table so wide tables can scroll horizontally
* on phones instead of stretching their card past the viewport. */
.rcm-tablewrap {
width: 100%; max-width: 100%; min-width: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.rcm-table {
width: 100%; border-collapse: collapse; font-size: 0.8rem;
}
.rcm-table thead th {
background: var(--rcm-bg); color: var(--rcm-muted);
font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em;
font-weight: 700; text-align: left;
padding: 0.32rem 0.45rem; border-bottom: 1px solid var(--rcm-line); white-space: nowrap;
}
.rcm-table tbody td {
padding: 0.35rem 0.45rem; border-bottom: 1px solid var(--rcm-line);
}
.rcm-table tbody tr:hover { background: #f8fafc; }
.rcm-table .rcm-num,
.rcm-table th.rcm-num { text-align: right; font-variant-numeric: tabular-nums; }
.rcm-table .rcm-empty { text-align: center; color: var(--rcm-muted); padding: 0.9rem; }
.rcm-row-total { background: var(--rcm-bg-2) !important; font-weight: 700; }
.rcm-row-actions { text-align: right; white-space: nowrap; }
/* Compact table — used in side-by-side POs / Bills */
.rcm-table-compact { font-size: 0.74rem; }
.rcm-table-compact thead th { padding: 0.25rem 0.35rem; font-size: 0.58rem; }
.rcm-table-compact tbody td { padding: 0.28rem 0.35rem; }
/* ---------- Document tables (Invoices / POs / Bills) — mobile card reflow ----
* Phones get a dense 2-line card per row:
*
* ┌──────────────────────────────────────────────┐
* │ 20268005 [👁] [✕] │
* │ May 26, 2026 · 1879865 $15,771.80 │
* └──────────────────────────────────────────────┘
*
* The middle cells (date · vendor · cust PO) are precomposed into a single
* `data-rcm-meta` attribute on the
by annotateDocRowMeta() in JS, then
* rendered here as a ::after pseudo-element so the variable column count is
* collapsed cleanly without restructuring the DOM (desktop is untouched).
*/
@media (max-width: 720px) {
.rcm-doc-table thead { display: none; }
.rcm-doc-table, .rcm-doc-table tbody { display: block; width: 100%; }
.rcm-doc-table tr {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"id actions"
"meta total";
column-gap: 0.7rem; row-gap: 0.25rem;
padding: 0.65rem 0.85rem;
border-bottom: 1px solid var(--rcm-line);
align-items: center;
}
.rcm-doc-table tr:last-child { border-bottom: none; }
.rcm-doc-table tr:hover { background: transparent; }
.rcm-doc-table td {
padding: 0; border: none;
white-space: normal; overflow-wrap: anywhere;
}
/* Meta line (composed by JS) lives in the "meta" grid cell */
.rcm-doc-table tr[data-rcm-meta]::after {
content: attr(data-rcm-meta);
grid-area: meta;
color: var(--rcm-muted); font-size: 0.76rem;
align-self: center;
}
/* Identifier — top left */
.rcm-doc-table td:first-child {
grid-area: id;
font-size: 0.92rem; font-weight: 700; color: var(--rcm-ink);
}
/* Hide the original middle cells — their content has already been rolled into
* the data-rcm-meta string and rendered via ::after above. */
.rcm-doc-table td:not(:first-child):not(:nth-last-child(2)):not(:last-child) {
display: none;
}
/* Total cell (always second-to-last) — money line, bottom right */
.rcm-doc-table td:nth-last-child(2) {
grid-area: total;
color: var(--rcm-ink); font-weight: 700;
font-variant-numeric: tabular-nums; font-size: 0.88rem;
text-align: right;
}
/* Actions cell (always last) — top right */
.rcm-doc-table td:last-child {
grid-area: actions;
text-align: right; white-space: nowrap;
}
.rcm-doc-table td:last-child .rcm-btn { padding: 0.3rem 0.45rem; }
.rcm-doc-table td:last-child .rcm-btn i { font-size: 0.95rem; }
/* Empty-state row spans both columns */
.rcm-doc-table tr td.rcm-empty {
grid-column: 1 / -1; text-align: center; color: var(--rcm-muted); padding: 0.85rem 0;
}
}
/* On mobile, shrink the "Attach …" header button so it always fits next to
* the card title regardless of label length. */
@media (max-width: 720px) {
.rcm-dp26-card-head-with-action { gap: 0.4rem; flex-wrap: nowrap; }
.rcm-dp26-card-head-with-action .rcm-dp26-card-title { min-width: 0; }
.rcm-dp26-card-head-with-action .rcm-btn-primary {
padding: 0.4rem 0.7rem; font-size: 0.72rem; flex-shrink: 0;
}
}
/* ---------- Item Shipment Status table ---------- */
/* Comfortable density — bigger row padding, part column auto-fits the
* widest SKU instead of clipping, description truncates with ellipsis. */
.rcm-items-table { width: 100%; font-size: 0.78rem; border-collapse: collapse; }
.rcm-items-table th, .rcm-items-table td {
vertical-align: middle; padding: 0.55rem 0.55rem;
}
.rcm-items-table th { font-weight: 700; color: var(--rcm-muted); text-transform: uppercase; font-size: 0.62rem; letter-spacing: 0.05em; }
/* Numeric + toggle cols are intrinsic-sized; description flexes. */
.rcm-items-table .rcm-num,
.rcm-items-table th.rcm-num { width: 1%; white-space: nowrap; padding-left: 0.5rem; padding-right: 0.5rem; font-variant-numeric: tabular-nums; }
.rcm-items-table .rcm-items-toggle,
.rcm-items-table th:last-child { width: 1%; padding-left: 0; padding-right: 0.4rem; text-align: right; }
.rcm-items-part {
font-weight: 700; color: var(--rcm-ink); white-space: nowrap;
/* No max-width / ellipsis: the column auto-sizes to the longest SKU. */
}
.rcm-items-desc {
color: var(--rcm-ink-soft);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
max-width: 1px; /* with width:auto on the cell + table flex, this forces ellipsis */
}
/* Subtle blocked styling — opacity + ban icon (no strikethrough). */
.rcm-items-blocked-body tr,
.rcm-items-table tr.is-blocked { background: var(--rcm-line-soft); color: var(--rcm-muted); }
.rcm-items-blocked-body .rcm-items-part,
.rcm-items-table tr.is-blocked .rcm-items-part { color: var(--rcm-muted); font-weight: 600; }
.rcm-items-blocked-body .rcm-num,
.rcm-items-table tr.is-blocked .rcm-num { color: var(--rcm-muted); opacity: 0.65; }
/* Inline toggle button — ghost until hover */
.rcm-items-blockbtn {
background: transparent; border: 0; cursor: pointer;
color: var(--rcm-muted); padding: 0.2rem 0.35rem;
border-radius: 6px; font: inherit; line-height: 1;
opacity: 0; transition: opacity 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.rcm-items-blockbtn.is-on { opacity: 1; color: var(--rcm-warm, #f97316); }
.rcm-items-table tr:hover .rcm-items-blockbtn,
.rcm-items-table tr:focus-within .rcm-items-blockbtn { opacity: 1; }
.rcm-items-blockbtn:hover { background: var(--rcm-line-soft); color: var(--rcm-ink); }
.rcm-items-blockbtn i { font-size: 0.75rem; }
/* "Show N non-shippable items" reveal row in the table footer. */
.rcm-items-revealrow {
text-align: center; padding: 0.5rem 0.6rem !important;
background: var(--rcm-line-soft);
border-top: 1px dashed var(--rcm-line);
}
.rcm-items-revealbtn {
background: transparent; border: 0; cursor: pointer;
font: inherit; font-size: 0.72rem; font-weight: 600;
color: var(--rcm-muted); padding: 0.25rem 0.65rem; border-radius: 999px;
display: inline-flex; align-items: center; gap: 0.4rem;
}
.rcm-items-revealbtn:hover { color: var(--rcm-accent); background: white; }
.rcm-items-revealbtn i { font-size: 0.68rem; }
/* Muted count pill (for "non-shippable" badge in the accordion header). */
.rcm-count-muted { background: var(--rcm-line-soft); color: var(--rcm-muted); }
/* ---------- Cost Breakdown / Expenses table ---------- */
/* Locks the layout so descriptions don't push pills around. Every row is
* single-line: long part-numbers/descriptions truncate with ellipsis and
* surface the full text on hover via the title attribute. */
.rcm-exp-table { table-layout: fixed; width: 100%; font-size: 0.72rem; }
.rcm-exp-table th, .rcm-exp-table td {
vertical-align: middle;
padding: 0.42rem 0.5rem;
}
/* Column widths: description gets everything left over. */
.rcm-exp-table colgroup { display: none; }
.rcm-exp-table th:nth-child(1), .rcm-exp-table td:nth-child(1) { width: auto; } /* Description (flex) */
.rcm-exp-table th:nth-child(2), .rcm-exp-table td:nth-child(2) { width: 44px; text-align: right; } /* Qty */
.rcm-exp-table th:nth-child(3), .rcm-exp-table td:nth-child(3) { width: 88px; text-align: right; } /* Cost */
.rcm-exp-table th:nth-child(4), .rcm-exp-table td:nth-child(4) { width: 108px; text-align: right; } /* Source pill */
.rcm-exp-desc {
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
max-width: 0; /* needed alongside table-layout:fixed for the ellipsis to engage */
color: var(--rcm-ink);
position: relative;
}
.rcm-exp-desc-text {
display: inline; /* allows the inline actions to sit on the same baseline */
}
/* Inline edit / delete icons — only visible on hover, gray, tiny. */
.rcm-exp-inline-actions {
display: inline-flex; align-items: center; gap: 0.15rem;
margin-left: 0.35rem; vertical-align: middle;
opacity: 0; transition: opacity 0.12s ease;
}
.rcm-exp-table tr:hover .rcm-exp-inline-actions,
.rcm-exp-table tr:focus-within .rcm-exp-inline-actions { opacity: 1; }
.rcm-exp-iconbtn {
background: transparent; border: 0; cursor: pointer;
color: var(--rcm-muted, #8b91b8);
padding: 0 0.2rem; font: inherit; line-height: 1;
}
.rcm-exp-iconbtn i { font-size: 0.65rem; }
.rcm-exp-iconbtn:hover { color: var(--rcm-ink); }
.rcm-exp-iconbtn:hover .fa-xmark { color: var(--rcm-danger, #ef4444); }
.rcm-exp-source { line-height: 1; }
.rcm-exp-table .rcm-tag {
display: inline-block;
padding: 0.18rem 0.55rem;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.02em;
white-space: nowrap;
margin-left: 0;
border-radius: 999px;
}
/* Total row */
.rcm-exp-table .rcm-row-total td {
font-weight: 700; color: var(--rcm-ink);
font-size: 0.78rem;
background: var(--rcm-line-soft);
border-top: 2px solid var(--rcm-line);
}
/* ---------- tags & pills ---------- */
.rcm-tag {
display: inline-block; padding: 0.08rem 0.4rem; border-radius: 999px;
font-size: 0.7rem; font-weight: 600; margin-left: 0.4rem;
background: var(--rcm-bg); color: var(--rcm-muted);
}
.rcm-tag-paid { background: #dcfce7; color: #166534; }
.rcm-tag-warn { background: #fef3c7; color: #92400e; }
.rcm-tag-public { background: #dbeafe; color: #1e40af; }
.rcm-tag-private { background: #fde68a; color: #78350f; }
.rcm-attach-mini-badge-private { background: #fde68a; color: #78350f; margin-left: 0.3rem; }
.rcm-tag-source-billed { background: #dcfce7; color: #166534; }
.rcm-tag-source-open-po { background: #fef3c7; color: #92400e; }
.rcm-tag-source-rcs-shipped { background: #dbeafe; color: #1e40af; }
.rcm-tag-source-outstanding { background: #fee2e2; color: #991b1b; }
.rcm-tag-source-shipment { background: #e0e7ff; color: #3730a3; }
.rcm-tag-source-Packaging { background: #f3e8ff; color: #6b21a8; }
.rcm-pos { color: var(--rcm-success); font-weight: 700; }
.rcm-neg { color: var(--rcm-danger); font-weight: 700; }
/* ---------- NCES current display ---------- */
.rcm-nces-current {
display: flex; gap: 0.6rem; align-items: flex-start;
padding: 0.55rem 0.7rem; background: var(--rcm-bg);
border-radius: var(--rcm-radius-sm); border: 1px dashed var(--rcm-line);
margin-bottom: 0.4rem;
}
.rcm-nces-icon {
font-size: 1.15rem; color: var(--rcm-accent);
width: 22px; flex-shrink: 0;
}
.rcm-nces-detail { flex: 1; min-width: 0; }
.rcm-nces-name { font-weight: 700; font-size: 0.88rem; }
.rcm-nces-sub { font-size: 0.74rem; color: var(--rcm-muted); margin-top: 0.1rem; }
.rcm-nces-ids { font-size: 0.66rem; color: var(--rcm-muted); margin-top: 0.15rem; font-family: monospace; }
.rcm-nces-empty { font-style: italic; color: var(--rcm-muted); justify-content: center; }
.rcm-nces-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.rcm-nces-pick-controls {
display: flex; gap: 0.5rem; margin-bottom: 0.5rem;
}
.rcm-nces-pick-controls input { flex: 1; }
.rcm-state-filter {
padding: 0.55rem 0.7rem; border: 1px solid var(--rcm-line);
border-radius: var(--rcm-radius-sm); background: white; font-family: inherit;
}
/* ---------- typeahead ---------- */
.rcm-typeahead { position: relative; }
.rcm-typeahead-input, .rcm-typeahead-bare input {
width: 100%;
padding: 0.45rem 0.65rem;
border: 1px solid var(--rcm-line);
border-radius: var(--rcm-radius-sm);
background: white;
font-size: 0.86rem; font-family: inherit;
}
.rcm-typeahead-input:focus { outline: none; border-color: var(--rcm-accent); }
.rcm-typeahead-bare { padding-bottom: 0.75rem; }
.rcm-typeahead-dropdown {
position: absolute; left: 0; right: 0; top: calc(100% + 0.25rem);
background: white; border: 1px solid var(--rcm-line);
border-radius: var(--rcm-radius-sm); box-shadow: var(--rcm-shadow);
max-height: 260px; overflow-y: auto; z-index: 5;
display: none;
}
.rcm-typeahead-item {
padding: 0.5rem 0.75rem; cursor: pointer; font-size: 0.88rem;
border-bottom: 1px solid var(--rcm-line);
}
.rcm-typeahead-item:last-child { border-bottom: none; }
.rcm-typeahead-item:hover { background: #eef0ff; }
.rcm-typeahead-empty,
.rcm-typeahead-loading {
padding: 0.75rem; color: var(--rcm-muted); font-size: 0.85rem; text-align: center;
}
/* ---------- mode tabs (school picker) ---------- */
.rcm-mode-tabs {
list-style: none; padding: 0; margin: 0 0 0.85rem;
display: flex; gap: 0.25rem;
border-bottom: 1px solid var(--rcm-line);
}
.rcm-mode-tabs li { margin: 0; }
.rcm-mode-tab {
display: inline-flex; align-items: center; gap: 0.4rem;
padding: 0.55rem 0.85rem;
background: transparent; border: none; cursor: pointer;
color: var(--rcm-muted); font-weight: 600; font-size: 0.88rem;
border-bottom: 2px solid transparent;
font-family: inherit;
}
.rcm-mode-tab:hover { color: var(--rcm-ink); }
.rcm-mode-tab.active {
color: var(--rcm-accent); border-bottom-color: var(--rcm-accent);
}
/* ---------- stepper (browse-by-district flow) ---------- */
.rcm-nces-step { display: none; }
.rcm-nces-step.rcm-nces-step-active { display: block; }
.rcm-nces-step-header {
display: flex; align-items: center; gap: 0.75rem;
padding-bottom: 0.5rem; margin-bottom: 0.5rem;
border-bottom: 1px solid var(--rcm-line);
}
.rcm-nces-step-title { font-size: 0.95rem; color: var(--rcm-ink); }
/* ---------- picker results list ---------- */
.rcm-picker-results { max-height: 60vh; overflow-y: auto; }
.rcm-picker-list { display: flex; flex-direction: column; gap: 0.35rem; }
.rcm-picker-item {
text-align: left; background: white;
border: 1px solid var(--rcm-line); border-radius: var(--rcm-radius-sm);
padding: 0.6rem 0.8rem; cursor: pointer;
display: flex; flex-direction: column; gap: 0.15rem;
font-family: inherit; transition: all 0.1s ease;
}
.rcm-picker-item:hover {
border-color: var(--rcm-accent); background: #eef0ff;
transform: translateX(2px);
}
/* Multi-select variant: checkbox on the left, content on the right.
* Selected items get an accent border + tinted background. */
.rcm-picker-item-checkable {
flex-direction: row; align-items: flex-start; gap: 0.6rem;
}
.rcm-picker-item-checkable:hover { transform: none; }
.rcm-picker-item-checkable .rcm-picker-cb {
margin-top: 0.2rem; flex-shrink: 0; width: 16px; height: 16px;
cursor: pointer;
}
.rcm-picker-item-checkable:has(.rcm-picker-cb:checked) {
border-color: var(--rcm-accent);
background: #eef0ff;
box-shadow: 0 0 0 1px var(--rcm-accent);
}
.rcm-picker-item-main {
flex: 1; min-width: 0;
display: flex; flex-direction: column; gap: 0.15rem;
}
/* Sticky bottom-bar style for picker actions */
.rcm-picker-actions {
position: sticky; bottom: 0;
background: white;
padding-top: 0.85rem; margin-top: 0.85rem;
border-top: 1px solid var(--rcm-line);
}
.rcm-picker-count {
font-size: 0.82rem; color: var(--rcm-muted); font-weight: 600;
}
.rcm-picker-line1 { font-size: 0.92rem; }
.rcm-picker-line2 { font-size: 0.78rem; color: var(--rcm-muted); }
.rcm-picker-line3 { font-size: 0.7rem; color: var(--rcm-muted); font-family: monospace; }
.text-muted { color: var(--rcm-muted); }
/* ---------- document modal (invoice/PO/bill view) ---------- */
.rcm-doc { display: flex; flex-direction: column; gap: 0.85rem; }
.rcm-doc-summary {
display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 0.5rem 1rem;
padding: 0.8rem; background: var(--rcm-bg);
border-radius: var(--rcm-radius-sm); font-size: 0.88rem;
}
.rcm-doc-addresses {
display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
font-size: 0.85rem;
}
.rcm-doc-addresses h5 {
margin: 0 0 0.3rem; font-size: 0.7rem; text-transform: uppercase;
letter-spacing: 0.07em; color: var(--rcm-muted);
}
.rcm-doc h5 {
margin: 0.5rem 0 0.35rem; font-size: 0.75rem; text-transform: uppercase;
letter-spacing: 0.07em; color: var(--rcm-muted);
}
.rcm-doc-lines tbody tr.rcm-sub-line { background: #f8fafc; color: var(--rcm-muted); }
.rcm-sub-arrow { color: var(--rcm-muted); margin-right: 0.4rem; }
/* ---------- overrides ---------- */
.rcm-toggle {
display: flex; align-items: center; gap: 0.5rem; cursor: pointer;
margin-bottom: 0.5rem; font-size: 0.88rem;
}
.rcm-toggle input { width: auto; }
.rcm-override-list { display: flex; flex-direction: column; gap: 0.35rem; }
.rcm-override-row {
display: grid; grid-template-columns: 1fr 90px; gap: 0.5rem; align-items: center;
font-size: 0.88rem;
}
.rcm-override-row input {
padding: 0.35rem 0.5rem; border: 1px solid var(--rcm-line);
border-radius: var(--rcm-radius-sm); font-family: inherit;
}
/* ---------- empty state ---------- */
.rcm-empty {
padding: 1rem; text-align: center; color: var(--rcm-muted);
font-style: italic; font-size: 0.88rem;
}
/* ---------- shared modal (matches commissions dashboard) ----------------- */
.rcm-modal {
/* CSS variables re-declared because the modal is detached to , so it
* no longer inherits from .rcm-dp26 where these are normally defined. */
--rcm-bg: #f7f8fb;
--rcm-surface: #ffffff;
--rcm-ink: #0f172a;
--rcm-muted: #64748b;
--rcm-line: #e2e8f0;
--rcm-accent: #2563eb;
--rcm-accent-2: #1e40af;
--rcm-success: #16a34a;
--rcm-danger: #dc2626;
--rcm-warning: #d97706;
--rcm-radius: 8px;
--rcm-radius-sm: 6px;
display: none;
position: fixed !important;
top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
width: 100% !important; height: 100% !important;
z-index: 999999 !important;
background: rgba(15, 23, 42, 0.55) !important;
overflow-y: auto; overflow-x: hidden;
padding: 2rem 1rem;
align-items: flex-start; justify-content: center;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 13px;
color: #0f172a;
}
.rcm-modal.is-open { display: flex !important; }
.rcm-modal-dialog {
position: relative;
background: #ffffff !important;
border-radius: 10px;
box-shadow: 0 20px 50px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.05);
width: 100%; max-width: 1140px;
display: flex; flex-direction: column;
max-height: calc(100vh - 4rem);
overflow: hidden;
}
.rcm-modal-picker { max-width: 720px; }
.rcm-modal-header {
display: flex; align-items: center; justify-content: space-between;
padding: 1rem 1.25rem; border-bottom: 1px solid #e2e8f0;
flex-shrink: 0; background: #ffffff;
}
.rcm-modal-title { font-weight: 700; letter-spacing: -0.01em; margin: 0; font-size: 1.25rem; color: #0f172a; }
.rcm-modal-close {
background: transparent; border: none; font-size: 1.5rem; line-height: 1;
color: #64748b; cursor: pointer; padding: 0.25rem 0.6rem; border-radius: 4px;
}
.rcm-modal-close:hover { background: #f7f8fb; color: #0f172a; }
.rcm-modal-body { padding: 1.25rem; background: #ffffff; overflow-y: auto; flex: 1 1 auto; }
/* ---------- responsive ---------- */
@media (max-width: 900px) {
.rcm-dp26-grid { grid-template-columns: 1fr; }
.rcm-doc-addresses { grid-template-columns: 1fr; }
}
/* ============================================================
Phase 5 — Create Shipment Wizard (4 steps)
============================================================ */
.rcm-wiz { display: flex; flex-direction: column; gap: 0.85rem; min-height: 420px; }
/* ---- Stepper ---- */
.rcm-wiz-stepper {
display: flex; align-items: center; gap: 0.4rem;
padding: 0.3rem 0 0.7rem; border-bottom: 1px solid #e5e7eb; margin-bottom: 0.4rem;
}
.rcm-wiz-step {
display: inline-flex; align-items: center; gap: 0.45rem;
background: transparent; border: 1px solid transparent; border-radius: 999px;
padding: 0.35rem 0.85rem; cursor: pointer; font: inherit;
color: var(--rcm-muted, #6b7280);
transition: background 120ms, color 120ms, border-color 120ms;
}
.rcm-wiz-step-num {
display: inline-flex; align-items: center; justify-content: center;
width: 1.4rem; height: 1.4rem; border-radius: 50%; font-size: 0.75rem; font-weight: 700;
background: #e5e7eb; color: #6b7280;
}
.rcm-wiz-step-label { font-weight: 600; font-size: 0.8rem; }
.rcm-wiz-step.is-active { background: #eff6ff; color: #1e3a8a; border-color: #bfdbfe; }
.rcm-wiz-step.is-active .rcm-wiz-step-num { background: #2563eb; color: #fff; }
.rcm-wiz-step.is-done { color: #047857; cursor: pointer; }
.rcm-wiz-step.is-done .rcm-wiz-step-num { background: #10b981; color: #fff; }
.rcm-wiz-step.is-done:hover { background: #ecfdf5; }
.rcm-wiz-step.is-future { opacity: 0.55; cursor: not-allowed; }
.rcm-wiz-step-sep { flex: 0 0 1.1rem; height: 1px; background: #e5e7eb; }
/* ---- Body + Footer slot ---- */
.rcm-wiz-body { min-height: 320px; }
.rcm-wiz-footer {
display: flex; justify-content: space-between; align-items: center;
gap: 0.6rem; padding-top: 0.7rem; border-top: 1px solid #e5e7eb;
}
.rcm-wiz-footer-left, .rcm-wiz-footer-right { display: flex; gap: 0.5rem; }
/* ---- Step 1: Addresses — reuses .rcm-rate-* from the Rate Shop modal ---- */
.rcm-wiz-validation {
background: #fee2e2; color: #991b1b; padding: 0.45rem 0.7rem;
border-radius: 4px; font-size: 0.78rem; margin-top: 0.6rem;
}
/* ---- Step 2: Pack-memory suggestion pill ---- */
.rcm-wiz-mem-pill {
background: #ecfeff; color: #155e75; border: 1px solid #a5f3fc;
border-radius: 6px; padding: 0.5rem 0.75rem; font-size: 0.82rem;
margin: 0 0 0.7rem 0; display: flex; align-items: center; gap: 0.5rem;
}
.rcm-wiz-mem-pill i { color: #0e7490; }
.rcm-wiz-mem-pill .rcm-wiz-mem-reset {
margin-left: auto; color: #0e7490; text-decoration: underline; font-weight: 500;
}
.rcm-wiz-mem-pill .rcm-wiz-mem-reset:hover { color: #0c4a6e; }
/* ---- Step 2: Boxes & Items ---- */
.rcm-wiz-step2-grid {
display: grid; grid-template-columns: minmax(220px, 280px) 1fr; gap: 0.85rem;
align-items: flex-start;
}
.rcm-wiz-pool {
border: 1px solid #e5e7eb; border-radius: 6px; padding: 0.55rem;
background: #fafafa; position: sticky; top: 0;
}
.rcm-wiz-pool-title {
margin: 0 0 0.4rem; font-size: 0.85rem; color: #374151;
display: flex; justify-content: space-between; align-items: center;
}
.rcm-wiz-pool-count {
background: #2563eb; color: #fff; border-radius: 999px;
padding: 0.05rem 0.5rem; font-size: 0.7rem; font-weight: 600;
}
.rcm-wiz-pool-list { min-height: 60px; }
.rcm-wiz-pool-list.rcm-wiz-dropzone { min-height: 160px; }
.rcm-wiz-pool-hint {
font-size: 0.7rem; color: var(--rcm-muted, #8b91b8); font-style: italic;
margin: -0.2rem 0 0.4rem;
}
.rcm-wiz-pool-title-info { margin-top: 0.9rem; padding-top: 0.6rem; border-top: 1px dashed #e5e7eb; }
.rcm-wiz-pool-title-info .rcm-wiz-pool-count { background: #94a3b8; }
.rcm-wiz-pool-info { padding-bottom: 0.4rem; }
.rcm-wiz-item-info {
display: flex; flex-direction: column; gap: 0.1rem;
padding: 0.35rem 0.5rem; margin-bottom: 0.25rem;
background: #f3f4f6; border: 1px solid #e5e7eb; border-left: 3px solid #94a3b8;
border-radius: 4px; font-size: 0.75rem; color: #4b5563;
cursor: default;
}
.rcm-wiz-item-info.rcm-wiz-item-drop { border-left-color: #f97316; }
.rcm-wiz-item-info.rcm-wiz-item-digital { border-left-color: #6366f1; }
.rcm-wiz-item-info .rcm-wiz-item-name { font-weight: 600; color: #1f2937; }
.rcm-wiz-item-info .rcm-wiz-item-meta { font-size: 0.68rem; color: #6b7280; }
.rcm-wiz-empty { color: #6b7280; font-style: italic; font-size: 0.78rem; padding: 0.6rem; }
.rcm-wiz-boxes { display: flex; flex-direction: column; gap: 0.6rem; }
.rcm-wiz-box {
border: 1px solid #d1d5db; border-radius: 6px; padding: 0.5rem 0.65rem 0.6rem;
background: #ffffff;
}
.rcm-wiz-box > legend {
font-weight: 700; color: #374151; padding: 0 0.3rem;
display: inline-flex; align-items: center; gap: 0.4rem;
}
.rcm-wiz-box-rm { color: #b91c1c; }
.rcm-wiz-box-fields {
display: grid; grid-template-columns: 2fr 0.9fr 0.7fr 0.7fr 0.7fr 1fr; gap: 0.4rem; margin-bottom: 0.5rem;
}
.rcm-wiz-box-fields label { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.65rem; color: #6b7280; font-weight: 600; }
.rcm-wiz-box-fields input, .rcm-wiz-box-fields select { padding: 0.35rem 0.5rem; font-size: 0.8rem; }
.rcm-wiz-box-preset, .rcm-wiz-box-contents { grid-column: 1 / -1; }
/* Thumbnail of the selected preset — sits in the top-left of the fieldset. */
.rcm-wiz-box-thumb {
grid-column: 1 / -1;
display: flex; align-items: center; justify-content: flex-start;
width: 56px; height: 56px; border-radius: 6px;
border: 1px dashed #d1d5db; background: #fff;
margin-bottom: 0.1rem;
}
.rcm-wiz-box-thumb.has-image { border-style: solid; border-color: #e5e7eb; padding: 4px; }
.rcm-wiz-box-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.rcm-wiz-box-thumb i { color: #c7cbe1; font-size: 1.2rem; margin: 0 auto; }
/* ---- Drop zones ---- */
.rcm-wiz-dropzone {
display: flex; flex-direction: column; gap: 0.35rem;
min-height: 70px; padding: 0.45rem; border-radius: 4px;
background: #f9fafb; border: 1.5px dashed #d1d5db;
transition: background 120ms, border-color 120ms;
}
.rcm-wiz-dropzone.is-drag-over {
background: #dbeafe; border-color: #2563eb; border-style: solid;
}
.rcm-wiz-dropzone-empty {
color: #9ca3af; font-style: italic; font-size: 0.78rem; padding: 0.5rem;
text-align: center;
}
/* ---- Item cards ---- */
.rcm-wiz-item {
display: flex; flex-direction: column; gap: 0.1rem;
padding: 0.4rem 0.55rem; background: #ffffff;
border: 1px solid #d1d5db; border-radius: 4px;
cursor: grab; user-select: none; font-size: 0.78rem;
transition: box-shadow 100ms, transform 100ms;
}
.rcm-wiz-item:hover { box-shadow: 0 1px 3px rgba(0,0,0,0.08); border-color: #9ca3af; }
.rcm-wiz-item.is-dragging { opacity: 0.4; cursor: grabbing; }
.rcm-wiz-item-name { font-weight: 600; color: #1f2937; }
.rcm-wiz-item-meta { font-size: 0.7rem; color: #6b7280; }
.rcm-wiz-item-hint {
align-self: flex-start; margin-top: 0.15rem;
padding: 0.05rem 0.4rem; border-radius: 999px; font-size: 0.65rem; font-weight: 600;
}
.rcm-wiz-hint-pack_with_ink { background: #ddd6fe; color: #6d28d9; }
.rcm-wiz-hint-own_box { background: #fef3c7; color: #92400e; }
.rcm-wiz-add-box { align-self: flex-start; margin-top: 0.4rem; }
/* ---- Step 3: Rates ---- */
.rcm-wiz-step3 { display: flex; flex-direction: column; gap: 0.65rem; }
.rcm-wiz-rates-status, .rcm-wiz-status {
padding: 0.55rem 0.75rem; border-radius: 4px; font-size: 0.82rem;
background: #eff6ff; color: #1e3a8a;
display: flex; align-items: center; gap: 0.45rem;
}
.rcm-wiz-status.is-ok { background: #d1fae5; color: #065f46; }
.rcm-wiz-status.is-error { background: #fee2e2; color: #991b1b; }
.rcm-wiz-error { padding: 0.7rem; background: #fee2e2; color: #991b1b; border-radius: 4px; }
.rcm-wiz-recs { display: flex; gap: 0.55rem; flex-wrap: wrap; }
.rcm-wiz-rec {
display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.1rem;
padding: 0.5rem 0.85rem; border-radius: 6px;
background: linear-gradient(135deg, #fff 0%, #f3f4f6 100%);
border: 1px solid #d1d5db; cursor: pointer; font: inherit;
transition: border-color 120ms, box-shadow 120ms, transform 80ms;
}
.rcm-wiz-rec:hover:not(.is-disabled) {
border-color: #2563eb; box-shadow: 0 2px 6px rgba(37,99,235,0.15); transform: translateY(-1px);
}
.rcm-wiz-rec.is-disabled { opacity: 0.45; cursor: not-allowed; }
.rcm-wiz-rec-label { font-weight: 600; font-size: 0.78rem; color: #1f2937; }
.rcm-wiz-rec-total { font-size: 0.95rem; color: #047857; font-weight: 700; font-variant-numeric: tabular-nums; }
.rcm-wiz-rates-warn {
background: #fef3c7; color: #92400e; padding: 0.4rem 0.65rem;
border-radius: 4px; font-size: 0.75rem;
}
/* Per-box card with two carrier columns (UPS / FedEx) of clickable rate rows. */
.rcm-wiz-rate-boxes { display: flex; flex-direction: column; gap: 0.85rem; }
.rcm-wiz-rate-box {
background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
padding: 0.7rem 0.85rem;
}
.rcm-wiz-rate-box-head {
display: flex; align-items: baseline; gap: 0.5rem;
margin-bottom: 0.5rem; padding-bottom: 0.5rem;
border-bottom: 1px dashed #e5e7eb;
}
.rcm-wiz-rate-box-head strong { font-size: 0.95rem; color: #1f2937; }
.rcm-wiz-rate-box-meta { font-size: 0.75rem; color: #6b7280; }
.rcm-wiz-rate-cols {
display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem;
}
@media (max-width: 720px) { .rcm-wiz-rate-cols { grid-template-columns: 1fr; } }
.rcm-wiz-rate-col-head { margin-bottom: 0.35rem; }
.rcm-wiz-rate-row {
display: grid; grid-template-columns: auto 1fr auto; align-items: center;
width: 100%; gap: 0.5rem;
padding: 0.45rem 0.6rem; margin-bottom: 0.25rem;
background: #fafafa; border: 1px solid #ebedf8; border-radius: 6px;
font-family: inherit; font-size: 0.82rem; text-align: left;
cursor: pointer; transition: background 120ms, border-color 120ms;
}
.rcm-wiz-rate-row:hover { background: #eef0ff; border-color: #c7d2fe; }
.rcm-wiz-rate-row.is-selected {
background: #eef0ff; border-color: #6366f1; box-shadow: 0 0 0 1px #6366f1 inset;
}
.rcm-wiz-rate-row.is-selected .rcm-wiz-rate-check i { color: #6366f1; }
.rcm-wiz-rate-check i { color: #c7d2fe; font-size: 0.95rem; }
.rcm-wiz-rate-svc { font-weight: 500; color: #1f2937; }
.rcm-wiz-rate-cost { font-variant-numeric: tabular-nums; color: #047857; font-weight: 700; }
.rcm-wiz-rate-bestbadge {
display: inline-block; margin-left: 0.4rem;
padding: 0.1rem 0.4rem; border-radius: 999px;
background: #d1fae5; color: #047857;
font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em;
vertical-align: middle;
}
.rcm-wiz-carrier-empty {
padding: 0.6rem; font-size: 0.78rem; color: #9ca3af; font-style: italic; text-align: center;
}
.rcm-wiz-rate-summary {
display: flex; justify-content: space-between; align-items: center;
padding: 0.55rem 0.75rem; background: #f9fafb; border-radius: 4px;
font-size: 0.85rem;
}
.rcm-wiz-rate-summary strong { font-size: 1rem; color: #047857; }
.rcm-wiz-rate-hint { font-size: 0.72rem; color: #6b7280; font-style: italic; }
/* ---- Step 4: Print ---- */
.rcm-wiz-step4 { display: flex; flex-direction: column; gap: 0.6rem; }
.rcm-wiz-mixed-note {
padding: 0.4rem 0.65rem; background: #fef3c7; color: #92400e;
border-radius: 4px; font-size: 0.75rem;
}
.rcm-wiz-mixed-note .fa-circle-info { margin-right: 0.35rem; }
.rcm-wiz-result-table { display: flex; flex-direction: column; gap: 0.25rem; }
.rcm-wiz-result-row {
display: grid;
grid-template-columns: 0.5fr 1.2fr 1.4fr 0.6fr 1fr 1fr;
gap: 0.5rem; align-items: center;
padding: 0.45rem 0.55rem; background: #fff;
border: 1px solid #e5e7eb; border-radius: 4px; font-size: 0.78rem;
}
.rcm-wiz-result-row.is-head {
background: #f3f4f6; font-weight: 700; color: #374151;
border-color: #d1d5db;
}
.rcm-wiz-result-cell { display: flex; flex-direction: column; gap: 0.1rem; }
.rcm-wiz-result-label { font-weight: 700; color: #374151; }
.rcm-wiz-result-tn code {
font-size: 0.74rem; background: #f3f4f6; padding: 0.1rem 0.3rem; border-radius: 3px;
white-space: nowrap;
}
.rcm-wiz-result-cost { font-variant-numeric: tabular-nums; color: #047857; font-weight: 600; }
.rcm-wiz-result-print {
font-size: 0.72rem; padding: 0.2rem 0.4rem; border-radius: 3px;
background: #eff6ff; color: #1e3a8a;
}
.rcm-wiz-result-print.is-ok { background: #d1fae5; color: #065f46; }
.rcm-wiz-result-print.is-error { background: #fee2e2; color: #991b1b; }
.rcm-wiz-result-svc { font-size: 0.7rem; color: #6b7280; }
.rcm-wiz-result-actions { display: flex; gap: 0.3rem; flex-wrap: wrap; }
@media (max-width: 900px) {
.rcm-wiz-step2-grid { grid-template-columns: 1fr; }
.rcm-wiz-pool { position: static; }
.rcm-wiz-box-fields { grid-template-columns: 1fr 1fr; }
.rcm-wiz-result-row { grid-template-columns: 1fr 1fr; }
}