/* redesign.css — REDESIGN OVERLAY, loaded ONLY by redesign.html.
Runs as a parallel live page (same app.js, same data) so the current
app at / stays untouched. Merge into styles.css when 100% signed off.
Desktop-only (min-width:641px); mobile is identical to the live app. */
/* =====================================================================
STAGE 1 DESKTOP REDESIGN (desktop only — restyle in place, reversible)
Premium summary cards + pill tabs + light header polish.
Scoped to min-width:641px so mobile is byte-for-byte unchanged.
No row/status/edge/date rules touched — those stay exactly as defined.
===================================================================== */
@media (min-width: 641px) {
/* ---- Brand top bar → NAVY EXECUTIVE (logo + Refresh/bell/Menu); Add buttons move to the title row ---- */
.app-header { background: linear-gradient(120deg,#0A2C5B 0%,#0C2148 60%,#0E1B38 100%); box-shadow: none; border-bottom: none; }
.app-header .brand-tag { display: none; } /* tagline dropped */
.app-header .brand-title { color: #fff; }
.app-header .brand-logo { filter: brightness(0) invert(1); } /* white logo on navy */
.app-header .header-actions > button:not(.bell-btn) { border-radius: 10px; }
/* brand-bar action buttons (Refresh / Menu / bell / Logout) → translucent on navy */
.app-header #btn-refresh,
.app-header #btn-menu,
.app-header .bell-btn,
.app-header #btn-logout {
background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.20); color: #e6ecf8;
transition: transform .14s ease, background .14s ease, border-color .14s ease; will-change: transform;
}
.app-header #btn-refresh:hover,
.app-header #btn-menu:hover,
.app-header .bell-btn:hover,
.app-header #btn-logout:hover { background: rgba(255,255,255,.17); border-color: rgba(255,255,255,.34); transform: scale(1.07); }
/* ---- Section tabs → pill style (navy active) ---- */
.tabs { gap: 6px; padding: 14px 20px 4px; border-bottom: none; background: transparent; flex-wrap: wrap; }
.tab { border: 1px solid #e3e8f1; background: #fff; border-radius: 11px; padding: 9px 14px; color: #5a6781; }
.tab:hover { background: #f3f6fb; color: #1b2b4a; }
.tab.active { background: #13294b; color: #fff; border-color: #13294b; font-weight: 600; box-shadow: 0 3px 10px rgba(19,41,75,.20); }
/* ---- Summary cards → premium standalone tiles (all 7 kept, click-to-filter kept) ---- */
.kpis { gap: 13px; padding: 16px 20px 6px; }
.kpi-group { background: transparent; border: 0; box-shadow: none; padding: 0; gap: 13px; }
.kpi-group-label { display: none; }
.kpi-cells { gap: 13px; }
.kpi {
background: #fff; border: 1px solid #e6ebf3; border-radius: 14px;
box-shadow: 0 4px 14px rgba(20,41,75,.05);
padding: 13px 15px; margin: 0;
flex-direction: column; align-items: flex-start; gap: 9px;
position: relative; overflow: hidden; min-width: 122px;
}
.kpi::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #cfd6e4; }
.kpi.total::before, .kpi.ontrack::before { background: var(--neo-blue-600); }
.kpi.qrs::before, .kpi.overdue::before { background: var(--neo-red-600); }
.kpi.awaiting::before { background: var(--neo-purple-600); }
.kpi.arrived::before { background: var(--neo-amber-500); }
.kpi.done::before { background: var(--neo-green-600); }
.kpi:hover { background: #fff; box-shadow: 0 8px 20px rgba(20,41,75,.10); transform: translateY(-2px); }
.kpi.active { outline: none; box-shadow: 0 0 0 2px var(--neo-blue-600), 0 6px 16px rgba(20,41,75,.10); }
.kpi.active .kpi-value { color: var(--neo-blue-900); }
.kpi-icon { width: 34px; height: 34px; border-radius: 10px; }
.kpi-icon svg { width: 18px; height: 18px; }
.kpi-meta { flex-direction: column-reverse; gap: 3px; }
.kpi-value { font-size: 24px; font-weight: 800; color: #13294b; margin: 0; }
.kpi-label { font-size: 11px; color: #667085; }
}
/* =====================================================================
STAGE 2 — TABLE (redesign page only, desktop only).
Mockup look applied to YOUR data: rounded/elevated frame, soft dot
status-pills, PO✓/OA✗ doc chips, sales avatars, bigger Notes.
COLOUR MEANINGS / abbreviations / edges / dates all preserved.
===================================================================== */
@media (min-width: 641px) {
/* Soft, elevated table card — pronounced rounded corners + clear inset/shadow */
/* overflow VISIBLE so the Notes/Description hover popovers can escape the frame
(base styles.css intends this on desktop). Header corners are rounded directly
below since the card can no longer clip them. */
/* padding:0 (base was 12px 20px) — the 20px horizontal padding made the left gap
bigger than the right (the table is wider than the padded box and overflowed
right). With padding:0 + width:100% the table fills the card, so the white gap
is equal on both sides. */
/* overflow:clip (NOT visible/hidden) — clips the table to the card's rounded
corners so colored row borders can't bleed through the th's transparent
border-radius corner zone. Unlike overflow:hidden, clip does NOT create a
scroll container, so position:sticky on the thead th still attaches to the
viewport scroller. Popovers (.dl-pop/.note-pop) are positioned relative to
their TDs deep inside the table-wrap and never overflow the card boundary. */
.table-wrap { border: 1px solid #E6EAF0; border-radius: 20px; overflow: clip; padding: 0;
box-shadow: 0 10px 30px rgba(16,33,60,.08); margin: 10px 24px 26px; background: #fff;
position: relative; }
/* gold fade hairline at the top of the navy table header — mirrors the modal header line.
z-index:32 keeps it visible above the .thead-gap white mask (z-index:31). */
.table-wrap::before {
content: ''; pointer-events: none; z-index: 32;
position: absolute; top: 1px; left: 0; right: 0; height: 1.5px;
background: linear-gradient(90deg, transparent 2%, rgba(201,162,75,0) 5%, #C9A24B 28%, #E7CE8E 50%, #C9A24B 72%, rgba(201,162,75,0) 95%, transparent 98%);
}
/* Sticky white mask that fills the 6px gap above the navy header.
This is a plain block element — no border-radius — so it covers the full
width including the rounded-corner area where a ::before on the th can't reach.
z-index:31 beats the sticky thead (z-index:30); margin-bottom:-6px collapses
its layout height so the table sits at the same position as without it. */
.thead-gap { position: sticky; top: 0; height: 6px; background: #fff; z-index: 31; margin-bottom: -6px; }
/* border-collapse:collapse makes browsers IGNORE border-radius on cells — so the
header/last-row corner radii had no visual effect. Switch to separate (zero
spacing) so the rounded corners actually render. */
#orders-table { border-collapse: separate; border-spacing: 0; width: 100%; }
/* clean rows: navy header, NO vertical gridlines (matches the mockup) */
#orders-table thead th { background: #0a2c5b; color: #c7d3e8; border: none; padding-top: 13px; padding-bottom: 13px; top: 6px; }
/* Corner radii removed: table-wrap overflow:clip now clips the square th corners
to the card's 20px radius, so the card looks correctly rounded without needing
border-radius on the th. Crucially, a th with border-radius creates a transparent
corner zone through which colored row border-lefts (arrived=amber, overdue=red)
bleed when rows scroll behind the sticky header — removing the radius eliminates
the transparent zone entirely, ending that bleed. */
#orders-table tbody td { border-top: 1px solid #eef1f7; border-right: 0; }
#orders-table tbody tr:hover td { background: #f7f9fd; }
#orders-table tbody td { font-size: 12px; }
#orders-table tbody td[data-label] { padding-top: 14px; padding-bottom: 14px; }
/* Sales → coloured initials avatar (per-person; falls back to slate) */
td[data-label="Sales"] { text-align: center; }
td[data-label="Sales"] .sp-ava { display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px; border-radius: 50%; font-size: 11px; font-weight: 700; color: #fff;
background: #5a6781; letter-spacing: .2px; }
td[data-label="Sales"] .sp-ava[data-sp="TG"] { background: #16a34a; }
td[data-label="Sales"] .sp-ava[data-sp="PW"] { background: #2563eb; }
td[data-label="Sales"] .sp-ava[data-sp="EP"] { background: #7c3aed; }
td[data-label="Sales"] .sp-ava[data-sp="LG"] { background: #d97706; }
td[data-label="Sales"] .sp-ava[data-sp="LS"] { background: #b45309; }
td[data-label="Sales"] .sp-ava[data-sp=""] { background: transparent; }
/* v547 (Ed) — the avatar is the JOB's salesperson; this is the person who
actually raised the order, shown only when the two differ. Stacked under
the avatar rather than beside it so the column keeps its width, and sized
to sit inside the row's existing padding so it adds no row height. */
td[data-label="Sales"] .sp-by {
display: block; margin-top: 1px; font-size: 9.5px; font-weight: 700;
color: #97a3b6; letter-spacing: .02em; line-height: 1;
}
td[data-label="Sales"]:has(.sp-by) { padding-top: 8px; padding-bottom: 8px; }
/* Status → COMPACT 2-line pill: status WORD on top, date below (Ed's ask;
was a wider single-line dot-pill). Coloured background per state, no dot. */
td[data-label="Status"] .status-pill { display: inline-flex; flex-direction: column;
align-items: center; justify-content: center; gap: 0; padding: 3px 8px; border-radius: 10px;
line-height: 1.12; font-weight: 700; background: #eef1f6; color: #475467; min-width: 0; }
td[data-label="Status"] .status-pill .lbl { font-size: 10.5px; font-weight: 800; letter-spacing: .2px; }
td[data-label="Status"] .status-pill .date { width: auto; text-align: center; font-size: 9.5px; font-weight: 600; opacity: .85; }
td[data-label="Status"] .status-pill::before { display: none !important; } /* no leading dot — keeps the 2-line stack tight */
td[data-label="Status"] .status-pill .lbl, td[data-label="Status"] .status-pill .date { color: inherit; }
td[data-label="Status"] .status-pill.Estimated { background: #e7f6ec; color: #15723f; }
/* Confirmed → solid DARK GREEN + white (Ed) so it reads stronger than Estimated */
td[data-label="Status"] .status-pill.Confirmed { background: #14532d; color: #ffffff; }
/* Arrived → solid amber + white for contrast (was faint on the cream arrived row) */
td[data-label="Status"] .status-pill.Arrived { background: #d97706; color: #ffffff; }
td[data-label="Status"] .status-pill.Completed,
td[data-label="Status"] .status-pill.Delivered { background: #14532d; color: #ffffff; }
td[data-label="Status"] .status-pill.Pending,
td[data-label="Status"] .status-pill.Cancelled { background: #eef1f6; color: #475467; }
td[data-label="Status"] .status-pill.Urgent { background: #d71920; color: #ffffff; }
td[data-label="Status"] .status-pill.Overdue { background: #b8141a; color: #ffffff; }
/* the 2-line pill is self-contained — don't let the cell clip it to a "…" ellipsis */
#orders-table tbody td[data-label="Status"] { padding-left: 5px; padding-right: 5px; text-overflow: clip; overflow: visible; }
/* Documents → OUTLINE chips (Ed's pick): white chip, coloured outline + tick /
cross. Keeps open/attach/drag behaviour. */
td[data-label="Documents"] .doc-pair { gap: 6px; justify-content: center; position: relative; }
td[data-label="Documents"] .doc-slot { border-radius: 8px; padding: 3px 8px; gap: 4px; border: 1.5px solid #d9e1ee; background: #fff; }
td[data-label="Documents"] .doc-slot .dico { display: none; }
td[data-label="Documents"] .doc-slot .dtag { background: transparent; color: inherit; font-weight: 700; padding: 0; }
td[data-label="Documents"] .doc-slot.filled { background: #fff; color: #15723f; border-color: #9bd6b1; }
td[data-label="Documents"] .doc-slot.filled::after { content: '✓'; font-weight: 800; }
td[data-label="Documents"] .doc-slot.empty { background: #fff; color: #b42318; border-style: dashed; border-color: #f0b4b4; }
td[data-label="Documents"] .doc-slot.empty::after { content: '✗'; font-weight: 800; }
/* "+N" other-docs corner badge REMOVED per Ed ("if its other documents it
shouldnt be - so take away"). Base styles.css already has `.doc-other
{ display: none }`; just don't show it on the redesign either. */
/* Notes column — BIGGER (Ed's ask). The width freed by the narrower Status
column (below) is given to Notes so more of the note text shows. */
#orders-table thead th:nth-of-type(12),
#orders-table tbody td[data-label="Notes"] { width: 132px; min-width: 120px; }
}
@media (min-width: 641px) {
/* Status pill single-line (the identical width rule that used to sit here is
declared once, later in this file, with the other column widths). */
td[data-label="Status"] .status-pill { white-space: nowrap; max-width: none; }
}
/* =====================================================================
PAGE CHROME — Palette B (Procurement). Redesign page only, desktop.
Cool-grey background + Playfair headline figures. NO sidebar — the
Orders screen sits on the normal full-width layout with the usual
app header (logo + actions). Live app untouched.
===================================================================== */
@media (min-width: 641px) {
body { background: #FFFFFF; }
/* Playfair for headline figures */
.kpi-value { font-family: 'Playfair Display', Georgia, serif; font-weight: 600; font-size: 26px; }
/* primary accents → Palette B navy */
.tab.active { background: #0A2C5B; border-color: #0A2C5B; }
}
/* =====================================================================
ORDERS SCREEN — clean NeoOffice layout (redesign page, desktop only).
Page header + segmented filter; KPI cards dropped (urgent banner kept).
===================================================================== */
@media (min-width: 641px) {
/* "Orders" title row → continues the NAVY EXECUTIVE block (gold hairline + gold eyebrow + glass stat tiles) */
.neo-ph {
position: relative;
padding: 18px 24px 20px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
background: linear-gradient(120deg,#0A2C5B 0%,#0C2148 60%,#0E1B38 100%);
}
/* brushed-gold hairline under the brand bar */
.neo-ph::before {
content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 1.5px;
background: linear-gradient(90deg, rgba(201,162,75,0) 0%, #C9A24B 18%, #E7CE8E 50%, #C9A24B 82%, rgba(201,162,75,0) 100%);
}
/* gold divider below the title, before the tabs */
.neo-ph::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
background: linear-gradient(90deg, #0E1B38, #C9A24B 50%, #0E1B38);
}
.neo-h1 { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 30px; margin: 0; line-height: 1; color: #fff; }
/* gold "PROCUREMENT" eyebrow above "Orders" */
.neo-h1::before {
content: "Procurement"; display: block;
font-family: 'Montserrat', system-ui, sans-serif; font-weight: 700; font-size: 10px;
letter-spacing: 2.5px; text-transform: uppercase; color: #D9B96A; margin-bottom: 6px;
}
/* live counts → COMPACT pills (set by the inline script). Urgent + Overdue are red + clickable. */
/* Pills go to their own row (below heading + buttons) on desktop, right of pills on very wide */
.neo-sub { display: inline-flex; gap: 7px; flex-wrap: wrap; align-items: center; order: 3; flex: 0 0 100%; justify-content: center; }
.neo-stat { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 9px;
background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
transition: transform .14s ease, background .14s ease, border-color .14s ease;
will-change: transform; cursor: pointer; }
.neo-stat:hover { transform: scale(1.07); background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.28); }
.neo-stat b { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 13px; line-height: 1; color: #fff; }
.neo-stat i { font-style: normal; font-size: 8.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: #aebfdc; }
/* Urgent + Overdue → red, clickable (jump to that filtered view via setView) */
.neo-stat-urg, .neo-stat-over { background: rgba(224,59,59,.18); border-color: rgba(255,140,140,.40); cursor: pointer; }
.neo-stat-urg b, .neo-stat-over b { color: #ffd2d4; }
.neo-stat-urg i, .neo-stat-over i { color: #ffb0b3; }
.neo-stat-urg:hover, .neo-stat-over:hover { background: rgba(224,59,59,.30); border-color: rgba(255,160,160,.55); }
.neo-stat-urg:focus-visible, .neo-stat-over:focus-visible { outline: 2px solid #C9A24B; outline-offset: 2px; }
.neo-stat-await { background: rgba(217,119,6,.18); border-color: rgba(245,190,120,.35); cursor: pointer; }
.neo-stat-await b { color: #ffe2b8; } .neo-stat-await i { color: #f3c98a; }
.neo-stat-await:hover { background: rgba(217,119,6,.30); border-color: rgba(245,190,120,.55); }
/* ALL pill — slightly brighter than default to mark it as the master view */
.neo-stat-all { cursor: pointer; background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.22); }
.neo-stat-all:hover { background: rgba(255,255,255,.18); }
.neo-stat-live { cursor: pointer; }
.neo-stat-live:hover { background: rgba(99,132,200,.20); }
/* Option B: hide the original tab bar — HTML stays in DOM so tab.click() in go() still fires. */
nav.tabs { display: none !important; }
/* Divider between pill groups */
.neo-stat-divider { display: inline-block; width: 0.5px; height: 16px; background: rgba(255,255,255,.20); margin: 0 2px; align-self: center; flex-shrink: 0; }
/* Schedule pills (This Week / Next Week) and Pending — neutral blue-tint hover */
.neo-stat-week, .neo-stat-next, .neo-stat-pend { cursor: pointer; }
.neo-stat-week:hover, .neo-stat-next:hover, .neo-stat-pend:hover { background: rgba(99,132,200,.20); }
/* QRs — red, same as Urgent/Late */
.neo-stat-qrs { background: rgba(224,59,59,.18); border-color: rgba(255,140,140,.40); cursor: pointer; }
.neo-stat-qrs b { color: #ffd2d4; }
.neo-stat-qrs i { color: #ffb0b3; }
.neo-stat-qrs:hover { background: rgba(224,59,59,.30); }
/* Received (in stock) — green tint */
.neo-stat-recv { background: rgba(34,197,94,.15); border-color: rgba(134,239,172,.35); cursor: pointer; }
.neo-stat-recv b { color: #bbf7d0; }
.neo-stat-recv i { color: #86efac; }
.neo-stat-recv:hover { background: rgba(34,197,94,.25); }
/* Closed — muted */
.neo-stat-closed { cursor: pointer; opacity: .7; }
.neo-stat-closed:hover { opacity: 1; background: rgba(99,132,200,.20); }
/* PO & Invoice Tracking — gold tint */
.neo-stat-poinv { cursor: pointer; background: rgba(201,162,75,.15); border-color: rgba(201,162,75,.35); }
.neo-stat-poinv b { color: #f0d58a; }
.neo-stat-poinv i { color: #c9a24b; }
.neo-stat-poinv:hover { background: rgba(201,162,75,.28); border-color: rgba(201,162,75,.55); }
/* Gold outline on the currently active view pill */
.neo-stat.active { outline: 1.5px solid rgba(201,162,75,.80); outline-offset: 0; }
/* Focus ring for all clickable pills */
.neo-stat[role="button"]:focus-visible { outline: 2px solid #C9A24B; outline-offset: 2px; }
/* Option A icons — SVG colour matches the pill's text colour via currentColor */
.neo-stat svg { color: #aebfdc; flex-shrink: 0; }
.neo-stat-urg svg, .neo-stat-over svg, .neo-stat-qrs svg { color: #ffb0b3; }
.neo-stat-recv svg { color: #86efac; }
.neo-stat-await svg { color: #f3c98a; }
.neo-stat-all svg { color: #c8d4ec; }
/* the two action buttons get moved here (by redesign.html) and sit on the right */
.neo-ph-acts { margin-left: auto; display: flex; gap: 10px; align-self: center; order: 2; }
.neo-ph-acts button { display: inline-flex; align-items: center; gap: 8px; padding: 11px 17px; height: auto; line-height: 1; border-radius: 11px; }
.neo-ph-acts .btn-ico { width: 16px; height: 16px; flex: 0 0 auto; }
.neo-ph-acts button > span { white-space: nowrap; }
.neo-ph-acts button:focus-visible { outline: 2px solid #C9A24B; outline-offset: 2px; }
/* drop the KPI card row; the red urgent banner is REPLACED by the header
Urgent/Overdue pills, so hide it here (its buttons stay in the DOM and are
still reachable — the header pills call setView() directly). This must NOT
catch the same #urgent-banner element's other use — the amber "Airtable
setup required" warning shown in PO & Invoice Tracking (renderPOTracking()
in app.js) — which has no replacement UI in the redesign and needs to stay
visible. app.js marks that use with .is-setup-banner. */
#kpis .kpi-group { display: none; }
#kpis #urgent-banner:not(.is-setup-banner) { display: none !important; }
#kpis { padding: 0 !important; gap: 0; }
/* Restore normal breathing room when the setup-required banner is the only
thing in the row (the zero-padding above assumes an empty/hidden row). */
#kpis:has(#urgent-banner.is-setup-banner:not([hidden])) { padding: 16px 20px 6px !important; }
/* tabs → contained segmented filter */
.tabs { display: inline-flex; gap: 2px; margin: 4px 24px 0; padding: 3px; background: #fff;
border: 1px solid #E3E5EA; border-radius: 12px; box-shadow: 0 6px 18px rgba(20,41,75,.06); width: fit-content; flex-wrap: wrap; }
.tab { border: none; background: transparent; border-radius: 8px; padding: 8px 13px; color: #6B7280;
font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; }
.tab.active { background: #0A2C5B; color: #fff; box-shadow: none; }
.tab.tab-po { margin-left: 0; }
.toolbar { padding: 14px 24px 6px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
}
/* =====================================================================
FILTER ROW + PAGINATION — match the liked mockup (redesign page, desktop).
Rounded search w/ magnifier, pill-style dropdowns, bold status labels,
tidy pagination. All page-scoped; live app + mobile untouched.
===================================================================== */
@media (min-width: 641px) {
/* Search → rounded pill with a leading magnifier icon */
.search-wrap { position: relative; flex: 1 1 320px; max-width: 540px; }
#search {
width: 100%; box-sizing: border-box;
border: 1px solid #E3E5EA; border-radius: 12px;
padding: 11px 14px 11px 40px; font-size: 13px; color: #1A1D21;
background: #fff url("data:image/svg+xml;utf8,") no-repeat 14px center;
box-shadow: 0 1px 2px rgba(20,41,75,.04);
}
#search:focus { outline: none; border-color: #2563EB; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
/* Sort / sales / location / page-size → rounded pill buttons */
.toolbar select {
-webkit-appearance: none; appearance: none;
border: 1px solid #E3E5EA; border-radius: 12px;
padding: 10px 32px 10px 14px; font-size: 12.5px; font-weight: 600; color: #374151;
cursor: pointer; background-color: #fff;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 12px center;
box-shadow: 0 1px 2px rgba(20,41,75,.04);
}
.toolbar select:hover { border-color: #c9d2e3; }
.toolbar #btn-clear-filters { margin-left: 2px; font-weight: 600; color: #DC2626; }
/* Status pill → bold coloured label + date (matches the mockup) */
td[data-label="Status"] .status-pill .lbl { font-weight: 700; }
td[data-label="Status"] .status-pill .date { opacity: 1; font-weight: 700; }
/* Pagination → CENTRED "Separated pills" (Ed's Option 1): rounded button pills
either side of a soft page-number pill. */
.pagination { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 24px 24px; }
.pagination .ghost {
width: 38px; height: 38px; padding: 0; border: 1px solid #e3e8f1; border-radius: 10px;
background: #fff; color: #5b6b86; display: inline-flex; align-items: center; justify-content: center;
}
.pagination .ghost:hover { background: #f3f6fb; border-color: #c9d2e3; }
.pagination .ghost svg { width: 16px; height: 16px; }
.pagination #page-info {
margin: 0 4px; font-size: 12.5px; font-weight: 700; color: #0A2C5B;
background: #eef2f8; border: 1px solid #e3e8f1; border-radius: 10px; padding: 9px 16px;
}
}
/* =====================================================================
ORDER DATE (with year) + TOP BUTTONS — final mockup details (redesign page).
Order Date shows DD/MM/YY; top buttons uppercased, "Add QR" → outline.
===================================================================== */
@media (min-width: 641px) {
/* Order Date → NO year (DD/MM). Keep the base .numfit; hide the year variant. */
td[data-label="Ordered"] .numfit-yr { display: none; }
/* Top action buttons → uppercase, letter-spaced. id-only so the styling follows
the buttons after they're moved into the navy title row. */
#btn-add-qr, #btn-add {
text-transform: uppercase; letter-spacing: .5px; font-weight: 700; font-size: 11.5px;
}
/* "Add QR" → translucent ghost on the navy header, with a soft-red QR icon. */
.neo-ph-acts #btn-add-qr.danger {
background: rgba(255,255,255,.10); color: #fff; border: 1.5px solid rgba(255,255,255,.32); box-shadow: none;
transition: transform .14s ease, background .14s ease, border-color .14s ease; will-change: transform;
}
.neo-ph-acts #btn-add-qr.danger:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.48); transform: scale(1.07); }
.neo-ph-acts #btn-add-qr .btn-ico { color: #ff8d8d; } /* red QR icon, lightened for navy */
/* "New Order" → solid white button with navy text (stands out on the navy header). */
.neo-ph-acts #btn-add.primary {
background: #fff; color: #0A2C5B; box-shadow: 0 8px 20px rgba(0,0,0,.28);
transition: transform .14s ease, background .14s ease; will-change: transform;
}
.neo-ph-acts #btn-add.primary:hover { background: #eef3ff; transform: scale(1.07); }
.neo-ph-acts #btn-add.primary .btn-ico { color: #0A2C5B; }
}
/* =====================================================================
SOFTER TEXT — match the mockup's normal-case look (redesign page only).
Title-case Supplier + Description (display only; stored data unchanged).
Job Name is deliberately NOT transformed so codes (JFSC, JSY, HSBC…)
keep their capitals. PO # bold, Job # muted like the mockup.
===================================================================== */
@media (min-width: 641px) {
/* Lift the base force-uppercase so these cells show text AS TYPED (normal case,
like the mockup) instead of shouting. High specificity to beat #orders-table.
Job Name shows as entered, so codes (JFSC, JSY…) keep their capitals. */
#orders-table tbody td[data-label="Job Name"] .cell-clamp,
#orders-table tbody td[data-label="Supplier"],
#orders-table tbody td[data-label="Supplier"] .supfit,
#orders-table tbody td[data-label="Description"],
#orders-table tbody td[data-label="Description"] .dl-row,
#orders-table tbody td[data-label="Description"] .cell-clamp { text-transform: none; }
td[data-label="PO #"] .numfit { font-weight: 700; color: #1A1D21; }
td[data-label="Job #"] .numfit { color: #6B7280; }
}
/* =====================================================================
QA FIXES (Batch 2, Sonnet-agent reviewed) — all page-scoped, desktop only.
===================================================================== */
@media (min-width: 641px) {
/* Restore the row-hover tint for arrived + cancelled rows (the redesign's generic
`tr:hover td` background otherwise wins over the row-level tint). Urgent/overdue/
delivered are already protected by !important td-hover rules in styles.css. */
#orders-table tbody tr.arrived:hover td { background: #fde68a; }
#orders-table tbody tr.cancelled:hover td { background: #e5e7eb; }
/* Overdue / Urgent status pills stay SOLID red (white text) so they remain legible
on the already-pink overdue/urgent row tint (soft-pink-on-pink was near-invisible). */
td[data-label="Status"] .status-pill.Urgent { background: #d71920; color: #fff; }
td[data-label="Status"] .status-pill.Overdue { background: #b8141a; color: #fff; }
/* visible keyboard focus ring on the section tabs */
.tab:focus-visible { outline: 2px solid #2563EB; outline-offset: 2px; }
}
/* =====================================================================
QA FIXES (Batch 2.1, Sonnet-agent reviewed) — verified bugs, page-scoped.
===================================================================== */
@media (min-width: 641px) {
/* Card BOTTOM corners — overflow:visible can't clip the last row, so round its
outer cells directly. Each data row is followed by a hidden .detail-row, and the
final tbody child is a .detail-row, so the last VISIBLE row is the one immediately
before the final .detail-row. Cover both that case and the no-detail-row case. */
#orders-table tbody tr:last-child td.summary-col + td,
#orders-table tbody tr:not(.detail-row):has(+ .detail-row:last-child) td.summary-col + td { border-bottom-left-radius: 19px; }
#orders-table tbody tr:last-child td:last-child,
#orders-table tbody tr:not(.detail-row):has(+ .detail-row:last-child) td:last-child { border-bottom-right-radius: 19px; }
/* Row height — the base caps rows at 72px; with 16px padding that left only ~2.3
lines (long descriptions/job names clipped). Raise to 84px so 3 lines fit AND
rows read airier. Excludes the expanded/detail rows. */
#orders-table tbody tr:not(.expanded):not(.detail-row) td[data-label] { height: 71px; }
/* All cells middle-aligned so PO#, date, supplier, description etc. all sit at
the same vertical centre regardless of row height. The base styles.css also
sets vertical-align:middle on td.desc-ledger (changed in v286/v287) so that
the description block and all other cells land at the exact same height. */
#orders-table tbody td[data-label] { vertical-align: middle; }
/* Job Name: centred like every other column (Ed, 12/08). It used to be
left-aligned + pinned to the top of the row (to put its first line at the
same Y as PO#) — but in TALL rows (long Supp. Ref / Description) every
other cell re-centres while the name stayed stranded high-left. Centring
both ways matches the rest of the grid; the IG badge (inline-flex) simply
centres under the name. Vertical middle comes from the td[data-label]
rule above. */
td[data-label="Job Name"] { text-align: center; }
/* "JOB #" header — stop text-wrap:balance splitting it onto two lines.
summary-col(1) + PO#(2) + Job#(3) → the third th. */
#orders-table thead th.summary-col + th + th { white-space: nowrap; }
/* Pagination — make the round pill buttons actually apply (base uses #id selectors
that beat the .ghost class, so the restyle was silently ignored). */
.pagination #first-page, .pagination #prev-page,
.pagination #next-page, .pagination #last-page {
width: 38px; height: 38px; padding: 0; margin: 0;
border: 1px solid #e3e8f1; border-right-width: 1px; border-radius: 10px;
background: #fff; color: #5b6b86; display: inline-flex; align-items: center; justify-content: center;
}
.pagination #first-page:hover, .pagination #prev-page:hover,
.pagination #next-page:hover, .pagination #last-page:hover { background: #f3f6fb; border-color: #c9d2e3; }
/* Urgent-banner: only zero the #kpis padding when the banner is truly hidden
(the old :has(#urgent-banner) matched even when [hidden]). */
#kpis:not(:has(#urgent-banner:not([hidden]))) { padding: 0; }
/* Description quantity — the engine renders structured descriptions with a loud
navy-bold qty ("10×") while free-text ones show a plain "2 X"; that reads
inconsistent. De-emphasise the qty to a calm semibold slate so the whole
description reads as one clean phrase. (display only; data unchanged.) */
td[data-label="Description"] .dl-qty { color: #475467; font-weight: 600; }
}
/* =====================================================================
STATUS COMPACTNESS + COPY-BUTTON HOVER (redesign page, desktop only).
===================================================================== */
@media (min-width: 641px) {
/* Status — as compact as possible: tighter pill + smaller secondary actions.
#orders-table prefix needed to beat the styles.css desktop pill padding. */
#orders-table td[data-label="Status"] .status-pill { padding: 3px 9px 3px 8px; gap: 5px; }
td[data-label="Status"] .status-pill .lbl { font-size: 11px; }
td[data-label="Status"] .status-pill .date { font-size: 10.5px; }
td[data-label="Status"] .confirm-method-btn,
td[data-label="Status"] .change-date-btn {
font-size: 9.5px; padding: 3px 8px; margin-top: 4px; line-height: 1.1; border-radius: 7px;
}
/* Status column is now SMALLER — the 2-line pill (word over date) is narrow,
so "Overdue / 10/06" stacks instead of needing a wide single line. */
#orders-table thead th:nth-of-type(10),
#orders-table tbody td[data-label="Status"] { width: 88px; }
/* Copy (⧉) button — give it a clear hover state so the hover/tooltip reads as live
(the tooltip fires correctly; the button just had no visible feedback). */
.actions-cell .copy-arrival-btn { transition: background .12s, border-color .12s, color .12s; }
.actions-cell .copy-arrival-btn:hover { background: #eef2f8; border-color: #c9d2e3; color: #1A1D21; }
}
/* =====================================================================
MENU DROPDOWN → "Minimal lines" (Option 4, redesign page, desktop only).
No icon tiles; slim line icons (swapped in by the inline script in
redesign.html); thin gold top accent; rows shade softly on hover with a
gold left-accent bar. Same items / order / actions — purely a reskin.
===================================================================== */
@media (min-width: 641px) {
/* keep the base's absolute overlay positioning (a v256 override to `relative`
dropped the open menu into normal flow and stretched the navy header).
`overflow:hidden` clips the gold ::before accent to the rounded top. */
.header-menu-dropdown { position: absolute; overflow: hidden; }
/* thin gold top accent to match the header */
.header-menu-dropdown::before {
content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 1;
background: linear-gradient(90deg, #0E1B38, #C9A24B 50%, #0E1B38);
}
.header-menu-dropdown .hm-head { font-size: 9.5px; letter-spacing: 1.3px; color: #9aa3b2; }
/* rows: inset, relative for the hover accent bar */
.header-menu-dropdown .hm-item { position: relative; gap: 12px; padding-left: 14px; }
/* drop the icon tile → just a line icon */
.header-menu-dropdown .hm-item .hm-ico { background: transparent; width: 20px; height: 20px; }
.header-menu-dropdown .hm-item .hm-ico svg { width: 18px; height: 18px; color: #56627e; }
.header-menu-dropdown .hm-item .hm-ico img { width: 18px; height: 18px; } /* fallback if an icon isn't swapped */
/* hover: soft shade + a gold left-accent bar */
.header-menu-dropdown .hm-item:hover { background: #f5f7fb; }
.header-menu-dropdown .hm-item:hover::before {
content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 3px; background: #C9A24B;
}
.header-menu-dropdown .hm-sep { background: #eef1f6; margin: 7px 14px; }
/* Logout stays red; its accent + hover go red too */
.header-menu-dropdown .hm-item.hm-danger .hm-ico { background: transparent; }
.header-menu-dropdown .hm-item.hm-danger .hm-ico svg { color: #c0271f; }
.header-menu-dropdown .hm-item.hm-danger:hover { background: #fdeef0; }
.header-menu-dropdown .hm-item.hm-danger:hover::before { background: #c0271f; }
}
/* =====================================================================
MODAL SYSTEM → "Navy header" (Option 1, redesign page, desktop only).
Every modal gets a navy gradient header bar + gold hairline + white
title / subtitle / ✕; the white body + existing footer are kept. One
shared shell → all modals match. Page-scoped; mobile + live / untouched.
===================================================================== */
@media (min-width: 641px) {
/* soften the hard blue card outline + a richer "lifted" shadow */
.modal-card { border-color: #dbe2ee; box-shadow: 0 30px 70px rgba(5,15,40,.42); }
/* Standardise all full-size modals to the order-edit width (1000px).
Compact quick-action modals (change-date, split, qty-confirm etc.)
keep their 420px — only the import and contact modals are affected. */
#import-modal .modal-card,
.modal-card.modal-card-contact { width: 1000px; }
/* --- navy header bar --- */
/* flush cards (card padding:0; the header already spans edge-to-edge).
`#modal .modal-header` is listed explicitly to beat the base id-level white
gradient on the order modal (styles.css ~4043); change-date/split modals are
already navy in the base, so they stay consistent. */
.modal-card-wide > .modal-header,
.modal-card-compact > .modal-header,
#modal .modal-header {
background: linear-gradient(120deg,#0A2C5B 0%,#0E1B38 100%);
border-bottom: none; border-radius: 12px 12px 0 0; position: relative;
}
/* padded cards (card padding:24px; pull the header out to the card edges) */
.modal-card:not(.modal-card-compact):not(.modal-card-wide) > .modal-header {
background: linear-gradient(120deg,#0A2C5B 0%,#0E1B38 100%);
margin: -24px -24px 18px; padding: 15px 24px; border-bottom: none;
border-radius: 12px 12px 0 0; position: relative;
}
/* gold hairline under every navy header */
.modal-card > .modal-header::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
background: linear-gradient(90deg, rgba(201,162,75,0), #C9A24B 50%, rgba(201,162,75,0));
}
/* white title + light subtitle on the navy header (!important to beat the
per-modal id colours like #modal-title{color:#101828}). */
.modal-card > .modal-header { color: #fff; }
.modal-card > .modal-header h2, .modal-card > .modal-header h2 *,
.modal-card > .modal-header [id$="-title"], .modal-card > .modal-header [id$="-title"] *,
.modal-card > .modal-header .modal-title, .modal-card > .modal-header .modal-title *,
.modal-card > .modal-header .modal-title-wrap > *:not(.modal-subtitle):not([class*="sub"]),
.modal-card > .modal-header .ce-title { color: #fff !important; }
.modal-card > .modal-header .ce-title-ic { color: #D9B96A; } /* contact icon → gold */
.modal-card > .modal-header .modal-subtitle,
.modal-card > .modal-header [id$="-sub"],
.modal-card > .modal-header [id$="-subtitle"] { color: #aebfdc !important; }
/* The ORDER modal is built inside-out: #modal-title is the small "EDIT ORDER"
eyebrow and the big job-name heading lives in .modal-subtitle (with a dark
). So for #modal specifically, make the subtitle + its strong WHITE. */
#modal .modal-header .modal-subtitle,
#modal .modal-header .modal-subtitle strong,
#modal .modal-header .modal-subtitle * { color: #fff !important; }
/* white translucent ✕ close (all variants) */
.modal-card > .modal-header .modal-x,
.modal-card > .modal-header .dc-close-btn,
.modal-card > .modal-header button[id$="-close"] {
background: rgba(255,255,255,.10) !important; border: 1px solid rgba(255,255,255,.24) !important;
color: #fff !important; box-shadow: none !important;
}
.modal-card > .modal-header .modal-x svg,
.modal-card > .modal-header .dc-close-btn svg,
.modal-card > .modal-header button[id$="-close"] svg {
stroke: #fff !important; width: 18px !important; height: 18px !important;
}
.modal-card > .modal-header .modal-x:hover,
.modal-card > .modal-header .dc-close-btn:hover,
.modal-card > .modal-header button[id$="-close"]:hover {
background: rgba(255,255,255,.20) !important; border-color: rgba(255,255,255,.42) !important; color: #fff !important;
}
/* the order-modal "Job contact" button → translucent on the navy header */
#modal .modal-header .job-contact-btn {
background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.30); color: #fff;
}
#modal .modal-header .job-contact-btn:hover { background: rgba(255,255,255,.22); }
/* Note editor (separate .note-modal shell) → match: navy head + gold hairline */
.note-modal .note-head {
background: linear-gradient(120deg,#0A2C5B 0%,#0E1B38 100%); position: relative;
}
.note-modal .note-head::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
background: linear-gradient(90deg, rgba(201,162,75,0), #C9A24B 50%, rgba(201,162,75,0));
}
}
/* =====================================================================
ORDER MODAL BODY → editorial-blue (Option 1 styling on the REAL modal).
Keeps the real 2-column form + every control (Confirm Delivery, Change
Date, Confirmed date, Split, filed/missing docs, status strip, notes).
Page-scoped to #modal, desktop only. Mobile + live / untouched.
===================================================================== */
@media (min-width: 641px) {
#modal .modal-card-wide .body-grid { padding: 16px 18px; gap: 16px; background: #fff; }
/* main-col sections + sidebar blocks → soft editorial cards (were borderless) */
#modal .body-grid .section { border-top: none; margin: 0 0 13px; padding: 13px 15px;
background: #F7FAFE; border: 1px solid #e2e9f3; border-radius: 13px; }
#modal .body-grid .main-col .section:first-child { padding-top: 13px; margin-top: 0; }
#modal .sidebar { gap: 13px; }
#modal .sidebar-block { background: #F7FAFE; border: 1px solid #e2e9f3; border-radius: 13px; padding: 13px 15px; }
/* section titles → Playfair navy + light blue hairline; icon tiles blue */
#modal .section-title, #modal .sidebar-title, #modal .notes-log-head .notes-lbl,
#modal .desc-headlabel {
font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 15px;
color: #0A2C5B; text-transform: none; letter-spacing: 0;
}
#modal .section-title, #modal .sidebar-title {
padding-bottom: 8px; margin-bottom: 11px; border-bottom: 1.5px solid;
border-image: linear-gradient(90deg, #7FA8E0, rgba(127,168,224,0)) 1;
}
#modal .sh-tile { background: transparent; color: #2563EB; width: 18px; height: 18px; }
#modal .sh-tile svg { width: 16px; height: 16px; color: #2563EB; }
/* form controls → rounded, light-blue, focus ring */
#modal #order-form input, #modal #order-form select, #modal #order-form textarea {
border: 1px solid #dbe4f2; border-radius: 9px; background: #fff; font-size: 12.5px; color: #1A1D21;
}
#modal #order-form input:focus, #modal #order-form select:focus, #modal #order-form textarea:focus {
outline: none; border-color: #2563EB; box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
#modal #order-form label { font-size: 9px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: #8a93a6; }
/* field widths: PO# / Sales Person narrow ← | → Supplier / Supplier Reference wide */
#modal .body-grid .main-col .section .grid-2 { grid-template-columns: 0.72fr 1.28fr; }
#modal .body-grid .main-col .section .grid-2 .span-full { grid-column: 1 / -1; }
/* Notes → clean feed */
#modal .notes-log-head { padding-bottom: 8px; margin-bottom: 9px; border-bottom: 1.5px solid;
border-image: linear-gradient(90deg, #7FA8E0, rgba(127,168,224,0)) 1; }
#modal .note-add { background: #eaf1fc; border: 1px solid #cdddf5; color: #2563EB; border-radius: 999px; font-weight: 800; }
/* Documents — filed = green chip / missing = dashed (keep, just tidy) */
#modal .modal-doc-slot.filled { background: #f1faf4; border-color: #cfe6d6; border-radius: 9px; }
#modal .modal-doc-attach { color: #2563EB; font-weight: 700; }
}
/* =====================================================================
ORDER MODAL — detail elements (Ed's QA): Split / Confirm pills, week-no,
PO "Edit", description line-ledger, "* Required field", doc reference.
===================================================================== */
@media (min-width: 641px) {
/* "Split" pill → branch icon + label (the agreed icon; the inline script swaps
the base "+ Split" text for the branch glyph). */
#modal .deliv-actions .split-link {
background: #eaf1fc; border: 1px solid #cdddf5; color: #2563EB; border-radius: 999px;
padding: 4px 11px; font-size: 10.5px; font-weight: 800; text-decoration: none;
display: inline-flex; align-items: center; gap: 5px;
}
#modal .deliv-actions .split-link svg { width: 13px; height: 13px; flex: 0 0 auto; }
#modal .deliv-actions .split-link:hover { background: #dbe8fb; text-decoration: none; }
/* "Confirm Delivery" → refined solid-blue pill */
#modal .deliv-compact .confirm-method-cta {
background: #2563EB; color: #fff; border: none; border-radius: 999px;
padding: 6px 14px; font-size: 11px; font-weight: 800; box-shadow: 0 4px 12px rgba(37,99,235,.25);
}
/* "or week no." → tidy editorial input */
#modal .wk-row .wk-lbl { font-size: 10px; color: #8a93a6; font-weight: 700; }
#modal .wk-row .wk-input { border: 1px solid #dbe4f2; border-radius: 8px; font-size: 12px; }
#modal .wk-row .wk-input:focus { border-color: #2563EB; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
/* "Clear" link */
#modal .deliv-line .clearx { color: #8a93a6; font-weight: 700; font-size: 10.5px; }
/* PO "Edit" → small pencil-only icon button (Ed: "just a pencil and smaller").
The base label "✎ Edit" is hidden via font-size:0 and a clean pencil glyph
drawn as a ::before; the inline script adds a title for accessibility. */
#modal #po-edit-btn {
background: #eaf1fc; border: 1px solid #cdddf5; border-radius: 8px; color: transparent;
width: 30px; height: 30px; padding: 0; font-size: 0; flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
}
#modal #po-edit-btn::before {
content: ""; width: 13px; height: 13px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E") center/contain no-repeat;
}
#modal #po-edit-btn:hover { background: #dbe8fb; }
/* Description line-ledger (Consolidated view) → clean list + blue qty badge.
Ed: "NUMBER IN BLUE PILL THEN A BOLD BLACK X AND THEN THE PRODUCT BUT THE
EDGE OF THE PRODUCT ALIGNED" — give the qty pill a fixed min-width so all
product names left-edge align under each other, and bold-black the X. */
#modal .desc-ledger-preview { background: #fff; border: 1px solid #dbe4f2; border-radius: 9px; padding: 8px 11px; }
#modal .desc-ledger-preview .dl-row { display: flex; gap: 10px; align-items: baseline; padding: 3px 0; }
#modal .desc-ledger-preview .dl-qty {
background: #eaf1fc; color: #2563EB; border-radius: 6px;
padding: 1px 8px; font-weight: 800; font-size: 11px;
min-width: 44px; /* fixed lane so "1x" and "24x" pills are the same width */
text-align: center; flex: 0 0 auto;
display: inline-flex; align-items: baseline; justify-content: center; gap: 2px;
}
#modal .desc-ledger-preview .dl-qty .dl-x {
color: #111; /* bold black, not pale blue */
font-weight: 900; font-size: 11.5px; margin-left: 1px;
}
/* mixed descriptions: a quantity-less line ("Huddle sofa") shows no blue badge,
just an INVISIBLE spacer of the same width so the product name still aligns. */
#modal .desc-ledger-preview .dl-qty.dl-noqty {
background: transparent; padding: 0; min-width: 44px; visibility: hidden;
}
#modal .desc-ledger-preview .dl-nm { font-size: 12.5px; font-weight: 600; color: #1A1D21; text-transform: none; }
#modal .desc-ledger-preview .dl-foot { font-size: 10.5px; color: #8a93a6; font-weight: 700; margin-top: 6px; }
/* "* Required field …" footnote — hidden on redesign */
#modal .req-key { display: none !important; }
#modal label .req { display: none !important; }
/* #modal #modal-close — base styles.css uses background:#f3f5f7 !important with
2-ID specificity; match that specificity here so cascade order (redesign loads
later) wins and the X becomes white on the navy header. */
#modal #modal-close {
background: rgba(255,255,255,.13) !important;
border: 1px solid rgba(255,255,255,.28) !important;
color: #fff !important;
box-shadow: none !important;
}
#modal #modal-close svg { stroke: #fff !important; }
#modal #modal-close:hover { background: rgba(255,255,255,.22) !important; }
/* Form inputs — full width within their column */
#modal .grid-2 > label input,
#modal .grid-2 > label select,
#modal .row-jobproj label input { width: 100% !important; }
/* Document reference (e.g. "PO 10207" / "OA …") → subtle chip; labels tidy */
#modal .doc-heading { font-size: 9.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: #475467; }
#modal .doc-hint { background: #eef2f9; color: #5b7aa8; border-radius: 6px; padding: 2px 7px; font-size: 10px; font-weight: 700; }
/* #other-doc-hint is never populated — without this it rendered as an
orphaned 14x4px grey blob next to the OTHER DOCUMENTS heading. */
#modal .doc-hint:empty { display: none; }
}
/* =====================================================================
ORDER MODAL → 3-COLUMN LAYOUT (the agreed arrangement).
The redesign.html inline script relocates the existing sections/blocks
into three flex columns (every id / class / handler kept):
LEFT = Order Details (+ Description, + Change history)
MIDDLE = Delivery + Documents
RIGHT = Status (4 flag tiles) ABOVE Notes (own scroll box)
The floating up/down scroll arrows are removed; a "‹ N / N ›" order
counter is added to the navy header instead. Page-scoped (#modal),
desktop only — mobile + the live / app are untouched.
===================================================================== */
@media (min-width: 641px) {
/* a touch wider so three columns breathe; never past the viewport.
Fixed height = always the "large" size regardless of split rows / overdue banners;
the Documents block grows via flex:1 to fill any unused middle-column space. */
#modal .modal-card-wide {
width: 1140px; max-width: calc(100vw - 32px);
height: calc(100vh - 32px); max-height: calc(100vh - 32px);
}
/* On taller screens the full-viewport height feels oversized — cap at 70vh */
@media (min-height: 900px) {
#modal .modal-card-wide {
height: 70vh; max-height: 70vh;
}
}
/* body becomes a 3-column flex row. The original .main-col / .sidebar
wrappers are emptied by the inline script and hidden here, along with
the floating scroll cues. !important beats the base desktop rules
(#modal .body-grid { display:grid; overflow:hidden !important }). */
#modal .modal-card-wide .body-grid {
display: flex !important;
align-items: stretch;
gap: 16px;
overflow-y: auto !important;
overflow-x: hidden;
padding: 16px 18px;
position: relative;
}
#modal .body-grid > .main-col,
#modal .body-grid > .sidebar,
#modal .scroll-btns { display: none !important; }
#modal .body-grid > .rd-col {
display: flex; flex-direction: column; gap: 13px;
min-width: 0; flex: 1 1 0;
}
#modal .body-grid > .rd-col-left { flex: 1.12 1 0; }
#modal .body-grid > .rd-col-mid { flex: 0.98 1 0; }
#modal .body-grid > .rd-col-right { flex: 0.98 1 0; }
/* the column gap handles spacing — drop the per-section bottom margin */
#modal .rd-col > .section,
#modal .rd-col > .sidebar-block { margin: 0; }
/* LEFT: Order Details fills the column; the Description block (pulled out of
the fields grid by the inline script) grows to the bottom of the card.
Change history (when present) stays compact below it. */
#modal .rd-col-left > .section:first-child { flex: 1 1 auto; display: flex; flex-direction: column; }
#modal .rd-col-left > .section:first-child > .grid-2 { flex: 0 0 auto; }
#modal .rd-col-left > .section:first-child > label.span-full {
flex: 1 1 auto; display: flex; flex-direction: column; margin-top: 6px;
}
#modal .rd-col-left > #change-history-section { flex: 0 0 auto; }
#modal .rd-col-left #f-Description { flex: 1 1 auto; min-height: 104px; }
#modal .rd-col-left #desc-ledger-preview { flex: 1 1 auto; min-height: 80px; }
/* MIDDLE: last block (Other Documents) grows to fill the remaining column height. */
#modal .rd-col-mid > .sidebar-block { flex: 0 0 auto; }
#modal .rd-col-mid > .sidebar-block:last-child { flex: 1 1 auto; }
/* RIGHT: Status compact on top; Notes fills the rest and scrolls in its
own box (replaces the old per-column scroll arrows). */
#modal .rd-col-right > .sidebar-block { flex: 0 0 auto; }
#modal .rd-col-right > .section {
flex: 1 1 auto; display: flex; flex-direction: column; min-height: 200px;
}
#modal .rd-col-right .notes-log-list {
flex: 1 1 auto; overflow-y: auto; min-height: 120px; max-height: 420px;
}
/* ---------------------------------------------------------------------
Re-apply the base rules that were scoped to #modal .sidebar / .main-col
(the restructure moved these blocks out of those ancestors, so those
carefully-tuned base rules stopped applying). Mirror them onto .rd-col.
--------------------------------------------------------------------- */
/* Delivery → Ordered | Estimated SIDE BY SIDE, Confirmed Delivery Date BELOW
(was #modal .sidebar .deliv-compact .deliv-line — the agreed layout). */
#modal .rd-col-mid .deliv-compact .deliv-line {
display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; align-items: start;
}
#modal .rd-col-mid .deliv-compact .deliv-line .dcell { min-width: 0; }
#modal .rd-col-mid .deliv-compact .deliv-line .dcell input[type="date"] { width: 100%; }
#modal .rd-col-mid .deliv-compact .deliv-line #deliv-confirmed-col { grid-column: 1 / -1; padding-top: 2px; }
#modal .rd-col-mid .deliv-compact .deliv-line #deliv-confirmed-col > label { white-space: nowrap; }
#modal .rd-col-mid .deliv-compact .deliv-line #deliv-confirmed-col input[type="date"] { width: calc(50% - 6px); }
/* Order Details field spacing (was #modal .main-col .grid-2). */
#modal .rd-col-left .grid-2 { row-gap: 16px; }
#modal .rd-col-left .grid-2 > label { margin-bottom: 0; }
/* Sales Person (narrow, like Job #) + Supplier Reference (wide, like Project Name) */
#modal .row-salesref { display: grid; grid-template-columns: 1fr 3fr; gap: 12px; align-items: end; }
#modal .row-salesref > label { min-width: 0; margin-bottom: 0; }
/* Status inline date pickers — Arrived / Completed / Cancelled date
(was #modal .sidebar .inline-date-wrap): inline label + input. */
#modal .rd-col-right .flags-grid + .inline-date-wrap,
#modal .rd-col-right .inline-date-wrap {
margin-left: 0; margin-top: 8px; flex-direction: row; align-items: center; gap: 8px;
}
#modal .rd-col-right .inline-date-wrap > span { flex-shrink: 0; }
#modal .rd-col-right .inline-date-wrap input { flex: 1; padding: 5px 8px; }
/* --- "‹ N / N ›" order counter — now centred at the BOTTOM of the modal
(in the footer, between the left + right button groups). Recoloured for the
light footer: navy text, soft grey pill. --- */
#modal .modal-footer { position: relative; } /* anchor for the centred counter */
#modal .modal-footer .rd-ordnav {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
display: inline-flex; align-items: center; gap: 2px;
background: #eef2f8; border: 1px solid #d9e1ee;
border-radius: 999px; padding: 3px 5px; color: #0A2C5B;
}
#modal .modal-footer .rd-ordnav[hidden] { display: none; }
#modal .rd-ordnav .rd-on-btn {
width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
background: transparent; border: none; color: #5b6b86; cursor: pointer; padding: 0; border-radius: 999px;
}
#modal .rd-ordnav .rd-on-btn:hover { background: #dde5f1; color: #0A2C5B; }
#modal .rd-ordnav .rd-on-btn:disabled { opacity: .35; cursor: default; }
#modal .rd-ordnav .rd-on-btn:disabled:hover { background: transparent; color: #5b6b86; }
#modal .rd-ordnav .rd-on-btn svg { width: 14px; height: 14px; }
#modal .rd-ordnav .rd-on-pos {
font-family: 'Montserrat', system-ui, sans-serif; font-size: 12px; font-weight: 700;
letter-spacing: .3px; color: #0A2C5B; padding: 0 4px; white-space: nowrap;
}
#modal .rd-ordnav .rd-on-cur { font-weight: 800; }
/* --- "Add quantities?" prompt shown on Save when a description item has no
number (Ed's ask). A small centred card over the modal; Skip saves as-is. --- */
#modal .rd-qtyask {
position: absolute; inset: 0; z-index: 40; border-radius: 24px;
background: rgba(10,27,56,.45); display: flex; align-items: center; justify-content: center;
}
#modal .rd-qtyask .rd-qa-card {
background: #fff; border-radius: 14px; padding: 18px 20px; width: 380px; max-width: 90%;
box-shadow: 0 24px 60px rgba(5,15,40,.45);
}
#modal .rd-qtyask .rd-qa-h { font-family: 'Playfair Display', Georgia, serif; font-size: 18px; font-weight: 700; color: #0A2C5B; }
#modal .rd-qtyask .rd-qa-sub { font-size: 12px; color: #667085; margin: 3px 0 13px; }
#modal .rd-qtyask .rd-qa-list { display: flex; flex-direction: column; gap: 8px; max-height: 230px; overflow-y: auto; }
#modal .rd-qtyask .rd-qa-row { display: flex; align-items: center; gap: 10px; }
#modal .rd-qtyask .rd-qa-n { width: 58px; flex: 0 0 auto; border: 1px solid #dbe4f2; border-radius: 8px; padding: 6px 8px; font-size: 13px; text-align: center; }
#modal .rd-qtyask .rd-qa-n:focus { outline: none; border-color: #2563EB; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
#modal .rd-qtyask .rd-qa-nm { font-size: 13px; color: #1A1D21; }
#modal .rd-qtyask .rd-qa-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
#modal .rd-qtyask .rd-qa-skip { background: #eef1f6; border: 1px solid #d9e1ee; color: #475467; border-radius: 8px; padding: 8px 14px; font-weight: 700; cursor: pointer; }
#modal .rd-qtyask .rd-qa-skip:hover { background: #e3e8f0; }
#modal .rd-qtyask .rd-qa-save { background: #2563EB; border: none; color: #fff; border-radius: 8px; padding: 8px 15px; font-weight: 800; cursor: pointer; }
#modal .rd-qtyask .rd-qa-save:hover { background: #1d4ed8; }
/* --- status folded into the header eyebrow (the full-width band is hidden) --- */
#modal .modal-status-strip { display: none !important; }
#modal .modal-header .rd-eyerow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#modal .rd-eyerow .rd-statdot { display: none !important; }
#modal .rd-eyerow .rd-statbadge {
font-family: 'Montserrat', system-ui, sans-serif; font-size: 10.5px; font-weight: 700;
letter-spacing: .4px; color: #aebfdc; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px;
background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22); border-radius: 8px;
padding: 3px 10px;
}
#modal .rd-eyerow .rd-statbadge[hidden] { display: none; }
#modal .rd-eyerow .rd-statbadge::before { content: none; }
#modal .rd-eyerow .rd-statdate { color: #fff !important; font-weight: 600; }
#modal .rd-eyerow .rd-statbadge b { font-weight: 800; }
/* status dot + word tints (light, to read on the navy header) */
#modal .rd-eyerow.st-Confirmed .rd-statdot,
#modal .rd-eyerow.st-Estimated .rd-statdot,
#modal .rd-eyerow.st-Completed .rd-statdot,
#modal .rd-eyerow.st-Delivered .rd-statdot { background: #34d399; }
#modal .rd-eyerow.st-Arrived .rd-statdot { background: #fbbf24; }
#modal .rd-eyerow.st-Overdue .rd-statdot,
#modal .rd-eyerow.st-Urgent .rd-statdot { background: #f87171; }
#modal .rd-eyerow.st-Confirmed .rd-statbadge b,
#modal .rd-eyerow.st-Estimated .rd-statbadge b,
#modal .rd-eyerow.st-Completed .rd-statbadge b,
#modal .rd-eyerow.st-Delivered .rd-statbadge b { color: #6ee7b7; }
#modal .rd-eyerow.st-Arrived .rd-statbadge b { color: #fcd34d; }
#modal .rd-eyerow.st-Overdue .rd-statbadge b,
#modal .rd-eyerow.st-Urgent .rd-statbadge b { color: #fca5a5; }
}
/* =====================================================================
BAKED PICKS (v258) — the chooser selections made permanent. These were
trialled via the preview ?fit / ?docs / ?act choosers; Ed chose:
• Modal density = Option 3 ("slightly smaller font", fits on screen)
• Documents (modal) = Option 3 (ultra-compact + internal scroll, never overflows)
• Action controls = Option 1 (refined solid stages, navy Edit)
Placed last so they win by cascade order. Desktop only; live / + mobile
untouched (redesign.css is only loaded by redesign.html / preview).
===================================================================== */
@media (min-width: 641px) {
/* ---- Modal density (Option 3): slim header + footer, tighter body, 11.5px ---- */
#modal .modal-header { padding: 12px 22px 12px 20px !important; gap: 13px; }
#modal .modal-header::before { width: 40px !important; height: 40px !important; border-radius: 11px !important; background-size: 24px 24px, cover !important; }
#modal .modal-title-wrap:has(#modal-subtitle:not([hidden])) #modal-subtitle { font-size: 18px !important; }
#modal #modal-title { font-size: 19px; }
#modal .modal-footer { padding: 10px 22px !important; }
#modal .modal-footer button:not(.rd-on-btn) { padding-top: 8px !important; padding-bottom: 8px !important; } /* leave the counter chevrons alone */
#modal .modal-card-wide .body-grid { padding: 12px 16px !important; }
#modal .body-grid .section, #modal .sidebar-block { padding: 9px 11px; }
#modal .body-grid { gap: 11px !important; }
#modal .section-title, #modal .sidebar-title { padding-bottom: 6px; margin-bottom: 8px; }
#modal .rd-col-left #f-Description { min-height: 58px; }
#modal .rd-col-left #desc-ledger-preview { min-height: 48px; }
#modal .rd-col-right > .section { min-height: 116px; }
#modal .rd-col-right .notes-log-list { min-height: 64px; }
#modal .rd-col-left .grid-2 { row-gap: 11px; }
#modal .deliv-compact .deliv-line { gap: 8px 12px !important; }
#modal #order-form input, #modal #order-form select, #modal #order-form textarea { font-size: 11.5px !important; }
#modal .section-title, #modal .sidebar-title, #modal .desc-headlabel { font-size: 13.5px !important; }
#modal .deliv-line .dcell input[type="date"] { padding: 5px 8px !important; font-size: 12px !important; }
/* ---- Documents (modal) Option 3: ultra-compact chips + capped scroll so the
Documents panel never overflows, even with many other documents ---- */
#modal .rd-col-mid .sidebar-block:has(#modal-po-slot) { overflow-y: auto; overflow-x: hidden; }
#modal .rd-col-mid .sidebar-block:has(#modal-po-slot)::-webkit-scrollbar { width: 8px; }
#modal .rd-col-mid .sidebar-block:has(#modal-po-slot)::-webkit-scrollbar-thumb { background: #c8d2e2; border: 2px solid #fff; border-radius: 999px; }
#modal .modal-doc-slot.filled { padding: 3px 8px !important; }
#modal .modal-doc-slot.filled .doc-tile, #modal .modal-doc-slot .doc-tile { width: 22px !important; height: 22px !important; font-size: 9.5px !important; }
#modal .modal-doc-slot .doc-name { font-size: 11px !important; }
#modal .doc-heading { margin-top: 6px !important; margin-bottom: 2px !important; }
/* ---- Action controls Option 1: refined solid stage track + navy Edit ---- */
#orders-table .actions-cell .stage-track { border-radius: 8px; overflow: hidden; border: 1px solid #e2e8f0; box-shadow: 0 1px 2px rgba(16,24,40,.05); }
#orders-table .actions-cell .stage-cell { font-weight: 700; color: #64748b; border-right-color: #eef1f6; }
#orders-table .actions-cell .stage-cell.active:not(.arrived):not(.completed) { background: #dc2626 !important; border-color: #dc2626 !important; }
#orders-table .actions-cell .stage-cell.active.arrived { background: #f59e0b !important; border-color: #f59e0b !important; }
#orders-table .actions-cell .stage-cell.active.completed { background: #15803d !important; border-color: #15803d !important; }
#orders-table .actions-cell .edit-btn { background: #0A2C5B !important; border-color: #0A2C5B !important; border-radius: 8px; font-weight: 700; }
#orders-table .actions-cell .copy-arrival-btn { border-radius: 8px; }
}
/* =====================================================================
MODAL TIDY (Ed: "misaligned / wrong fonts / bit of a mess"). One
consistent field height so columns line up, the PO-edit pencil aligned
to the field, and the section titles in clean Montserrat (the small
Playfair serif read inconsistently against the sans form). Placed last
so it wins. Desktop only; live / + mobile untouched.
===================================================================== */
@media (min-width: 641px) {
/* every text field / select / date is the SAME height and aligns */
#modal #order-form input:not([type="checkbox"]):not([type="file"]):not(.wk-input),
#modal #order-form select { height: 36px !important; padding: 0 10px !important; }
#modal .deliv-line .dcell input[type="date"] { height: 36px !important; padding: 0 9px !important; font-size: 12px !important; width: 100%; }
#modal #po-edit-btn { height: 36px !important; width: 36px !important; }
#modal .wk-row .wk-input { height: 30px !important; padding: 0 8px !important; }
/* section titles → clean Montserrat (was Playfair serif at 13.5px) for a
consistent, tidy look. Keep the navy + light-blue hairline. */
#modal .section-title, #modal .sidebar-title, #modal .desc-headlabel,
#modal .notes-log-head .notes-lbl {
font-family: 'Montserrat', system-ui, sans-serif !important;
font-weight: 800 !important; font-size: 13px !important;
letter-spacing: .2px !important; color: #0A2C5B !important; text-transform: none !important;
}
/* labels: uniform size + rhythm */
#modal #order-form label { font-size: 9.5px !important; letter-spacing: .5px; color: #7a8699; }
#modal .body-grid .main-col .section .grid-2,
#modal .rd-col-left .grid-2 { row-gap: 13px !important; }
}
/* =====================================================================
BUTTON STYLES (Ed's picks): Change date = Option 4 (icon-only calendar),
Confirm = Option 2 (green outline + tick). Add QR = Option 1 (current,
unchanged). Applied to the table + modal buttons. Desktop only.
===================================================================== */
@media (min-width: 641px) {
/* ---- Change date → compact icon-only calendar-with-＋ (table + modal overdue bar)
Stacks UNDER the status pill. The icon is shrunk to 22px so an overdue
row is the SAME HEIGHT as a standard row (Ed: "height of row must remain
the same as all others"). ---- */
#orders-table td[data-label="Status"] .change-date-btn,
#modal .deliv-overdue-bar .dob-change {
font-size: 0 !important; padding: 0 !important;
border-radius: 7px; background: #fff !important; border: 1.5px solid #f0b4b4 !important;
color: transparent; align-items: center; justify-content: center; box-shadow: none !important;
}
#orders-table td[data-label="Status"] .change-date-btn {
display: flex; margin: 2px auto 0;
width: 20px; height: 20px; min-width: 20px;
}
#modal .deliv-overdue-bar .dob-change {
display: inline-flex; flex: 0 0 auto;
width: 32px; height: 32px; min-width: 32px; /* modal can stay bigger */
}
/* Make the icon glyph match the new button size */
#orders-table td[data-label="Status"] .change-date-btn::before { width: 12px; height: 12px; }
/* Force pill + Confirm button to also be block-level so cells stack uniformly. */
#orders-table td[data-label="Status"] > .status-pill {
display: flex; margin: 0 auto;
}
#orders-table td[data-label="Status"] > .confirm-method-btn {
display: flex; margin: 4px auto 0;
}
/* Lock row height; Status cell content VERTICALLY CENTRED (Ed: "it should be
in the middle of row these statuses") so pill + calendar-icon stack sits
in the middle of the row, not jammed at the top. */
#orders-table tbody tr:not(.detail-row) { height: 71px; max-height: 71px; }
#orders-table tbody td[data-label="Status"] {
padding-top: 6px; padding-bottom: 6px; vertical-align: middle;
}
/* SPLIT FAMILY (Ed): keep the blue side-bar grouping rows, REMOVE the blue
letter tile (Ed: "remove the blue letter on split deliveries"). The
`:has(.po-fam-chip)` selector still keys off the chip's presence in the
DOM; the chip itself is hidden. */
#orders-table tbody tr:has(td[data-label="PO #"] .po-fam-chip) td[data-label="PO #"] {
border-left: 4px solid #1d4ed8 !important;
padding-left: 10px !important;
}
#orders-table td[data-label="PO #"] .po-fam-chip {
display: none !important;
}
/* MODAL — split family: no coloured side border (Ed: remove colour lines from all modals). */
#modal .deliv-overdue-bar .dob-change { flex: 0 0 auto; }
#orders-table td[data-label="Status"] .change-date-btn::before,
#modal .deliv-overdue-bar .dob-change::before {
content: ""; width: 16px; height: 16px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3Cline x1='12' y1='14' x2='12' y2='18'/%3E%3Cline x1='10' y1='16' x2='14' y2='16'/%3E%3C/svg%3E") center/contain no-repeat;
}
#orders-table td[data-label="Status"] .change-date-btn:hover,
#modal .deliv-overdue-bar .dob-change:hover { background: #fdecec !important; border-color: #e89a9a !important; }
/* ---- Confirm → green outline + tick (modal "Confirm Delivery" + table "Confirm ▾") ---- */
#modal .deliv-compact .confirm-method-cta,
#orders-table td[data-label="Status"] .confirm-method-btn {
background: #fff !important; color: #15803d !important; border: 1.5px solid #9bd6b1 !important;
box-shadow: none !important; font-weight: 800;
}
#modal .deliv-compact .confirm-method-cta::before { content: "✓"; font-weight: 900; margin-right: 6px; }
#modal .deliv-compact .confirm-method-cta:hover,
#orders-table td[data-label="Status"] .confirm-method-btn:hover { background: #f1faf4 !important; border-color: #7cc99a !important; }
}
/* =====================================================================
DELIVERY — COMPRESSED CONFIRMED VIEW (Ed: same compact treatment that
ARRIVED/DELIVERED already gets, but for any order with a confirmed date).
The redesign inline script adds the `rd-conf-collapsed` class + populates
"Confirmed 07/07/2026" into #deliv-summary. The CSS only hides the now-
redundant overdue bar + the "+ Split Delivery" button while collapsed,
keeps the summary visible right of the heading, and tucks the chevron in.
===================================================================== */
@media (min-width: 641px) {
#modal .deliv-compact.rd-conf-collapsed #deliv-overdue-bar,
#modal .deliv-compact.rd-conf-collapsed #btn-split-delivery,
#modal .deliv-compact.rd-conf-collapsed .confirm-method-cta { display: none !important; }
/* heading row: keep summary inline-right, chevron flush */
#modal .deliv-compact.rd-conf-collapsed .section-title-row { gap: 8px; flex-wrap: nowrap; }
#modal .deliv-compact.rd-conf-collapsed .deliv-summary { margin-left: auto; }
#modal .deliv-compact.rd-conf-collapsed .deliv-summary b {
color: #14532d; /* matches the confirmed/done green */
}
/* Reuse the same compact shell whether base or redesign collapsed it */
#modal .deliv-compact.rd-conf-collapsed { padding-bottom: 8px; }
}
/* =====================================================================
SPLIT EDITOR HEADER — Ed's screenshot showed the long title
"Allocate products across deliveries" being cramped/clipped by the
"+ Add delivery" button. Shorten the title to "Split deliveries" (the
subtitle already carries the PO context) and give the title-wrap a
sensible flex so it never collides with the actions cluster.
===================================================================== */
@media (min-width: 641px) {
#split-edit-modal .modal-header {
align-items: center !important;
gap: 14px;
/* Header has margin: -24px -24px 18px on a card with padding:0 + overflow:hidden + border-radius.
So the top 24px and outer 24px of the header sit OUTSIDE the card and are clipped.
Add padding equal to the negative margins so content lands inside the visible navy bar. */
padding: 30px 28px 18px 28px !important;
}
#split-edit-modal .modal-header .modal-title-wrap { flex: 1 1 auto; min-width: 0; }
#split-edit-modal #spl-title {
font-size: 17px !important; line-height: 1.15; font-weight: 800;
color: #fff !important; letter-spacing: .005em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
padding-left: 2px; /* extra safety margin against the card's overflow:hidden clip */
}
#split-edit-modal #spl-subtitle { color: #dfe7f5 !important; font-size: 11.5px; padding-left: 2px; }
#split-edit-modal .modal-header .spl-head-actions {
flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
}
#split-edit-modal #spl-add-del {
background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28);
color: #fff; border-radius: 8px; padding: 7px 12px; font-size: 12px; font-weight: 700;
white-space: nowrap;
}
#split-edit-modal #spl-add-del:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.4); }
#split-edit-modal #spl-close {
color: #fff !important; background: rgba(255,255,255,.10); border: 0;
width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
}
#split-edit-modal #spl-close:hover { background: rgba(255,255,255,.20); }
/* ---- STEELCASE SPLIT PREVIEW — same negative-margin/clip fix ---- */
#sc-split-modal .modal-header {
align-items: center !important;
gap: 14px;
padding: 30px 28px 18px 28px !important;
}
#sc-split-modal .modal-header .modal-title-wrap { flex: 1 1 auto; min-width: 0; }
#sc-split-modal #scs-title {
font-size: 17px !important; line-height: 1.15; font-weight: 800;
color: #fff !important; letter-spacing: .005em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
padding-left: 2px;
}
#sc-split-modal #scs-subtitle { color: #dfe7f5 !important; font-size: 11.5px; padding-left: 2px; }
#sc-split-modal #scs-close {
color: #fff !important; background: rgba(255,255,255,.10); border: 0;
width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
}
#sc-split-modal #scs-close:hover { background: rgba(255,255,255,.20); }
}
/* =====================================================================
CHANGE HISTORY — Ed didn't like the inline card OR the floating popover.
Now moved into the modal HEADER as a small clock-icon button next to
"Link orders" / "Project Contact" which opens a separate pop-up modal.
Hide the in-modal section entirely on the redesign — its content is
still populated by the base app (so the new modal can reuse it), it's
just visually removed from the left column.
===================================================================== */
@media (min-width: 641px) {
#modal .rd-col-left > #change-history-section { display: none !important; }
/* The new header button (#btn-modal-history). Same .job-contact-btn
family as Link orders / Project Contact, but icon-first + a count pill. */
#modal .modal-header #btn-modal-history { gap: 6px; }
#modal .modal-header #btn-modal-history .hist-count {
background: #2563EB; color: #fff; font-size: 10.5px; font-weight: 800;
border-radius: 999px; padding: 1px 7px; min-width: 18px; text-align: center;
margin-left: 2px;
}
#modal .modal-header #btn-modal-history[hidden] { display: none; }
/* The pop-up history modal styling — sits above the order modal. */
#history-modal .modal-card { width: 540px; max-width: calc(100vw - 32px); }
#history-modal .history-modal-body {
padding: 14px 22px 18px; max-height: 60vh; overflow-y: auto;
display: flex; flex-direction: column; gap: 6px;
}
#history-modal .history-modal-body .chg-row {
display: grid; grid-template-columns: 100px 1fr; gap: 12px;
padding: 6px 0; border-bottom: 1px solid #eef0f4; align-items: baseline;
}
#history-modal .history-modal-body .chg-row:last-child { border-bottom: none; }
#history-modal .history-modal-body .chg-when {
color: #6b7589; font-size: 11px; font-weight: 700; letter-spacing: .02em;
}
#history-modal .history-modal-body .chg-text {
color: #1A1D21; font-size: 12.5px; line-height: 1.45;
}
#history-modal .history-modal-body .history-empty {
color: #8a93a6; font-size: 12.5px; padding: 12px 0; text-align: center;
}
/* Close (X) MUST be visible on the navy header — explicitly white. Ed
flagged it invisible in the top-right of the change-history modal. */
#history-modal #history-modal-close {
width: 34px !important; height: 34px !important; border-radius: 8px !important;
display: inline-flex !important; align-items: center !important; justify-content: center !important;
margin-left: auto !important; flex: 0 0 auto !important;
background: rgba(255,255,255,.10) !important;
border: 1px solid rgba(255,255,255,.24) !important;
color: #fff !important; box-shadow: none !important; cursor: pointer !important;
}
#history-modal #history-modal-close svg {
stroke: #fff !important; width: 18px !important; height: 18px !important; flex-shrink: 0;
}
}
/* =====================================================================
ROW TINTS — Ed: "make the yellow row much fainter - too dark currently".
The base styles tint `tr.arrived` `#fef3c7` (amber-100). Lighten it to a
barely-there cream so it still reads as "this row is different" without
shouting. Hover keeps the slightly stronger original colour for feedback.
===================================================================== */
@media (min-width: 641px) {
#orders-table tbody tr.arrived td,
#orders-table tbody tr.expanded.arrived td { background: #fffbeb !important; }
#orders-table tbody tr.arrived:hover td { background: #fef3c7 !important; }
}
/* =====================================================================
QR ROWS — Ed: "the supplier references are wrong - please remove". On
QR records (Quality Reports), the Supp. Ref column shouldn't display the
linked order's reference. Hide the column content on QR rows only;
the cell stays so the column structure is intact.
===================================================================== */
@media (min-width: 641px) {
#orders-table tbody tr.qr td[data-label="Supp. Ref"] .suppref-stack,
#orders-table tbody tr.qr td[data-label="Supp. Ref"] .cell-clamp { display: none !important; }
#orders-table tbody tr.qr td[data-label="Supp. Ref"] { color: transparent; }
}
/* =====================================================================
DELIVERY PANEL — TIGHTER. Ed: "delivery dates need to be more compact —
any chance it can fit on one page". The native can't
be made to drop the year visually, but we can shave padding + font size
so the expanded form is shorter overall. The COMPRESSED summary is also
now DD/MM only (set in the inline script via fmtShortDate).
===================================================================== */
@media (min-width: 641px) {
#modal .rd-col-mid .deliv-compact .deliv-line { gap: 7px 10px; }
#modal .rd-col-mid .deliv-compact .deliv-line label { font-size: 10.5px; margin-bottom: 2px; }
#modal .rd-col-mid .deliv-compact .deliv-line input[type="date"] {
height: 32px !important; font-size: 12.5px !important; padding: 4px 8px !important;
}
/* "or week no." line — small, single-line */
#modal .rd-col-mid .deliv-compact .deliv-line [id$="wk"] {
font-size: 10.5px !important;
}
#modal .rd-col-mid .deliv-compact .deliv-line input[id$="wk"] {
height: 24px !important; padding: 2px 6px !important; width: 50px !important;
}
/* "Clear" link under Ordered — tighter */
#modal .rd-col-mid .deliv-compact .deliv-line a {
font-size: 10.5px; padding-top: 1px;
}
/* Section heading tighter */
#modal .rd-col-mid .deliv-compact .section-title-row { padding-bottom: 4px; }
}
/* Very wide screens (≥1600px): pills and buttons share the same row.
Pills flex-grow to fill the space; buttons sit at the far right. */
@media (min-width: 1500px) {
.neo-sub { order: 2 !important; flex: 1 1 auto !important; justify-content: flex-start !important; }
.neo-ph-acts { order: 3 !important; margin-left: 0 !important; }
}
/* =====================================================================
GLOBAL OVERRIDES (apply on all screen sizes, desktop + mobile modal)
===================================================================== */
/* Attach buttons: vertically centre the text/icon within the dashed slot. */
#modal .modal-doc-slot.empty .modal-doc-attach {
display: flex !important;
align-items: center;
gap: 5px;
height: auto !important;
min-height: 36px;
text-align: left;
}
/* Modal border — override the base blue (#1d4ed8) from styles.css on all screen sizes. */
.modal-card { border-color: #dbe2ee !important; }
/* PO number locked field — Option A: white chip.
The INPUT inside is transparent; target the CONTAINER (#po-field) for background.
The lock icon inside the modal is a font/text character (not background-image). */
#modal #po-field.locked { background: #fff !important; border-color: #d1d9e6 !important; }
/* Input inside the PO container is transparent — remove the border redesign.css adds to all inputs */
#modal #po-field input { border: none !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; }
#modal #po-field .po-lock-icon {
font-size: 0 !important; line-height: 0 !important;
display: inline-block !important; width: 15px !important; height: 15px !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa5bb' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important;
flex-shrink: 0 !important;
}
/* Edit button → pencil icon only (no text) */
.po-edit-btn:not(.cancel) {
font-size: 0 !important;
padding: 0 !important;
width: 36px !important;
height: 36px !important;
border-radius: 9px !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d4ed8' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 15px !important;
}
/* Job # and Client Name values — bold for prominence */
#modal #f-Project_Number, #modal #f-Client_Name { font-weight: 700 !important; }
/* Attach-button slot: force vertical centering (slot may grow taller than content) */
#modal .modal-doc-slot.empty { align-items: center !important; justify-content: center !important; }
/* Split delivery summary — Option C: soft navy tint (desktop + mobile) */
#modal .ss-summary { background: rgba(10,44,91,.12) !important; border-color: rgba(10,44,91,.30) !important; }
#modal .ss-summary:hover { background: rgba(10,44,91,.18) !important; border-color: rgba(10,44,91,.42) !important; }
#modal .ss-summary .ss-lbl { color: #0A2C5B !important; }
#modal .ss-summary .ss-count { background: #0A2C5B !important; color: #fff !important; }
#modal .ss-chev { color: rgba(10,44,91,.55) !important; }
/* v560 (Ed) — a reserved PO/QR number that was never used. Greyed right back
so it reads as a held place rather than live work, but still legible and
still clickable: opening it is how the number gets turned into a real order.
Only ever rendered on All Orders (sorted to the very bottom) or in a search;
every other view and every count excludes it. */
#orders-table tbody tr.row-placeholder td { opacity: .42; }
#orders-table tbody tr.row-placeholder:hover td { opacity: .72; }