/* ============================================================= CPM ORO X — editorial / private-bank theme Parchment background, white surfaces, single terracotta accent. Source Serif 4 for headings & key numbers; Inter for everything else. ============================================================= */ :root { /* Global UI scale. The whole app renders at this factor so the default looks like the operator's habitual ~75-80% browser zoom (everything a touch smaller). This is the single knob: 1 = native size, 0.8 = a tad smaller, 0.75 = matches a manual 75% zoom. Height math that must fill the real viewport uses calc(100vh / var(--app-zoom)) to stay gap-free. */ --app-zoom: 0.8; /* Surfaces */ --bg: #EDE7D9; /* page — warm parchment */ --bg-elev: #FFFFFF; /* cards / panels */ --bg-elev-2: #F5F0E2; /* hover tint, faint */ --bg-sidebar: #E4DDCB; /* sidebar — one shade darker than page */ /* Lines */ --border: #E1DBC9; --border-strong: #CFC7B1; /* Type */ --text: #1F1F1F; /* near-black */ --text-dim: #6B6B66; /* secondary, warm grey */ --text-muted: #8B8B82; /* tertiary */ /* Brand — used SPARINGLY */ --accent: #A85C3A; /* muted terracotta */ --accent-soft: #B26D4C; /* terracotta hover */ --accent-bg: rgba(168, 92, 58, 0.08); /* Status tones — muted, editorial */ --green: #4F7A4A; /* success / approved */ --orange: #B0822B; /* warning / pending */ --red: #9C3A2E; /* error / rejected */ --blue: #6B6B66; /* "in motion" — warm grey, not real blue */ /* Geometry */ --radius: 6px; --radius-lg: 12px; /* Type stacks. V28.719 - Mono stack switched to Roboto Mono. V28.718 dropped JetBrains Mono (default zero: slashed) and fell back to system monos — but on Windows both Consolas and Cascadia Mono ALSO ship a slashed default zero, so the Capital Exposure per-warehouse popover (and every other mono-styled financial figure) still showed slashed zeros for Windows operators. Roboto Mono ships a plain oval zero by default on every platform that loads it (webfont, not system-dependent). It matches the Inter-styled sibling text in weight + rhythm and keeps tabular alignment. System monos remain as the fallback for the second or two before the webfont loads. */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif; --font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, "Liberation Mono", monospace; /* V29.075 - shared table-header band ("warm sand"). THE single source of truth for EVERY column-header band in the app (tables + card lists, incl. the former terracotta headers). Group/date bands stay on the lighter #F6F3E9 style so the two band types stay distinguishable. Header text: 10px / 700 / uppercase / letter-spacing 0.7px. Brown stays for actions only. */ --table-head-bg: #DCCFB6; --table-head-ink: #5C4326; --table-head-border: #C4B294; } * { box-sizing: border-box; } /* V28.722 - Belt-and-braces "no slashed zero" guard for every kind of tooltip / popover / floating hover panel across the site. These elements are frequently attached directly under by third-party libs (Chart.js DOM tooltips, Leaflet, tippy, etc.), which means they escape scoped rules on .ov-page / .cpm-page. The body-level rule from V28.718 already covers them via inheritance, but tooltip libraries sometimes reset font-family or apply font-variant-numeric shorthands that turn slashed-zero back on — pinning it here makes those cases safe. V28.728 - Dropped the bare `[role="tooltip"]` and `.popover` selectors. `.exp-wh-popover` (Capital Exposure per-warehouse panel) legitimately uses role="tooltip" for accessibility but is a full designed panel — not a Chart.js tooltip — and the mono override was flipping every label/heading inside it to Roboto Mono. Scoped list now targets only floating-tooltip implementations that render numeric readouts. */ .chart-tooltip, .chartjs-tooltip, .apexcharts-tooltip, .leaflet-tooltip, .tippy-box, .tooltip-inner { font-variant-numeric: normal; font-feature-settings: "zero" 0; font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; } /* V28.743 - Plain (unslashed) zeros on the Gold Price indicator + Capital Exposure card / warehouse popover / detail panel ONLY. These figures use var(--font-mono) (e.g. .gold-spot-value, .exp-wh-tile-row dd), which on Windows falls back to a system mono (Consolas) whose DEFAULT zero is slashed when the Roboto Mono webfont hasn't loaded - so the global "zero" 0 guard can't help (slashed is the default glyph, not a toggled feature). Forcing a sans stack with a plain oval zero fixes it on every platform regardless of webfont state. `!important` + the descendant `*` guarantee coverage of values inserted dynamically (Gold API refresh, recalculated exposure, opened detail panel, generated warehouse cards) and beat the more-specific `.exp-wh-tile-row dd` (0,2,0) mono rule. Cosmetic only - size / weight / colour / spacing / alignment / number formatting / currency symbols / brackets are all untouched. Scoped to these components; the rest of the site is unaffected. */ .dash-mega-card--exposure, .dash-mega-card--exposure *, .exp-wh-popover, .exp-wh-popover *, [data-exposure-card], [data-exposure-card] * { font-family: Arial, Helvetica, system-ui, sans-serif !important; font-variant-numeric: normal !important; font-feature-settings: "zero" 0 !important; -webkit-font-feature-settings: "zero" 0 !important; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 14px; line-height: 1.5; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* V28.649 - safety net so no oversized card / chart / map tile can push the page horizontally. Fixes the "content is going out of the screen" report after we removed max-width from dashboards. */ overflow-x: hidden; /* V28.718 - Global "no slashed zero" guard. Every font we use (Inter, Source Serif 4, system monos) has a plain oval zero by default; this rule catches the two paths that could still surface a slashed glyph: - Inter's `slashed-zero` OpenType feature accidentally getting enabled via a font-variant-numeric shorthand elsewhere. - Any downstream font update / vendor CSS re-enabling `zero`. `"zero" 0` disables the OpenType `zero` feature everywhere the rule inherits, which is every element on the page. */ font-feature-settings: "zero" 0; } /* Global UI scale. Shrinks the whole app to the operator's habitual browser zoom so the native (100%) view already looks "a tad smaller". Applied to only — stays native so the real viewport still backs the page to every edge; height math that must fill it uses calc(100vh/var(--app-zoom)). Single knob lives on :root as --app-zoom. */ body { zoom: var(--app-zoom); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-serif); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: var(--text); } a { color: var(--accent); text-decoration: none; transition: color 120ms ease; } a:hover { color: var(--accent-soft); text-decoration: underline; } /* ---- App shell ---- */ /* V28.83 — Sidebar nav moved into the topbar. The shell is now a vertical flex (header + main) so the full viewport width goes to the content area. Sidebar selectors below are preserved for any surface that still references them (login page, etc.). */ .app-shell { display: flex; flex-direction: column; /* Divide by --app-zoom so the shell still fills the real viewport once is zoomed down (a bare 100vh would render short and leave a gap). */ min-height: calc(100vh / var(--app-zoom, 1)); } .sidebar { background: var(--bg-sidebar); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 28px 0 16px; } .sidebar-brand { /* Centred in the sidebar with breathing room above and below the lockup. */ padding: 14px 16px 32px; margin-bottom: 18px; border-bottom: 1px solid var(--border); color: var(--accent); text-align: center; } /* Inline-flex shrinks the lockup to the width of "Alpha", so right-aligning "Oro" puts it directly under the right portion of "Alpha" — not at the sidebar's edge. align-items: flex-end right-aligns within that tight box. The per-line transforms below (on .brand-mark and .brand-name) now do the optical-centering work — no container-level translateX needed. */ .brand-stack { display: inline-flex; flex-direction: column; align-items: flex-end; max-width: 100%; } .brand-mark, .brand-name { display: block; font-family: var(--font-serif); font-weight: 700; /* ~1.5x the previous 38px, with clamp() so a narrow sidebar shrinks gracefully */ font-size: clamp(40px, 5.2vw, 56px); line-height: 0.95; /* tight but no overlap with the line above */ letter-spacing: -0.02em; color: var(--accent); background: transparent; padding: 0; margin: 0; white-space: nowrap; } /* Shift "Oro" so its "O" sits under the "a" of "Alpha" — scaled with the font. */ /* Letter-precise alignment: "O" of "Oro" sits under "h" of "Alpha". Mirrors the login wordmark's final values, expressed in em so the offsets scale with the clamp() font-size (≈50px sidebar vs ≈72px login). Alpha -0.17em + Oro +0.39em → 0.56em relative gap, the same ~one-char-width shift that lands O under h. Group's net visual centerline moves ~0.11em right of the inline-flex natural position — matches the login lockup's recentered feel. */ .brand-mark { transform: translateX(-0.31em); } .brand-name { transform: translateX(0.25em); } .sidebar-nav { flex: 1; display: flex; flex-direction: column; padding: 0 16px; } .nav-link { display: block; padding: 9px 12px; margin-bottom: 1px; color: var(--text-dim); border-radius: 4px; text-decoration: none; font-size: 13.5px; font-weight: 500; letter-spacing: 0.005em; transition: color 120ms ease, background 120ms ease; } .nav-link:hover { color: var(--text); background: transparent; text-decoration: none; } /* G4 — Expandable nav items. Shared infrastructure for any future nested nav (libertad 4 may gain its own nesting later). */ .nav-item-group { display: flex; flex-direction: column; margin-bottom: 1px; } .nav-item-row { display: flex; align-items: center; } .nav-item-row > .nav-link { flex: 1; margin-bottom: 0; } .nav-chevron { appearance: none; background: transparent; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 6px; color: var(--text-dim); border-radius: 3px; transition: transform 160ms ease, color 120ms ease, background 120ms ease; } .nav-chevron:hover { color: var(--text); background: rgba(0, 0, 0, 0.03); } .nav-item-group.is-expanded > .nav-item-row > .nav-chevron { transform: rotate(90deg); } .nav-children { list-style: none; margin: 0; padding: 0; overflow: hidden; max-height: 0; transition: max-height 200ms ease; } .nav-item-group.is-expanded > .nav-children { max-height: 600px; } .nav-children > li { margin: 0; } /* An expanded group reads as a titled section: the heading darkens to look like a heading, and its children hang off a subtle vertical guide rail (aligned under the parent icon) so the grouping below the heading is unmistakable. */ .app-sidebar-nav .nav-item-group.is-expanded > .nav-item-row > .nav-link:not(.active) { color: var(--text); font-weight: 600; } .app-sidebar-nav .nav-item-group.is-expanded > .nav-children { position: relative; margin: 3px 0 6px; } .app-sidebar-nav .nav-item-group.is-expanded > .nav-children::before { content: ""; position: absolute; left: 21px; top: 2px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--border-strong, #CFC7B1); } .nav-child-link { display: block; padding: 7px 12px 7px 34px; margin: 0; color: var(--text-dim); text-decoration: none; font-size: 13.5px; letter-spacing: 0.005em; border-radius: 6px; transition: color 120ms ease, background 120ms ease; } .nav-child-link:hover { color: var(--text); background: rgba(0, 0, 0, 0.035); text-decoration: none; } .nav-child-link.active { color: var(--accent); font-weight: 600; background: var(--accent-bg, rgba(178, 99, 64, 0.10)); } /* V29.104 - active child gets a 2px brown segment over the group's gray rail. */ .app-sidebar-nav .nav-item-group.is-expanded > .nav-children > li { position: relative; } .nav-child-link.active::before { content: ""; position: absolute; left: 21px; top: 5px; bottom: 5px; width: 2px; border-radius: 2px; background: var(--accent, #9C5B2B); } .nav-link.active { color: var(--accent); background: transparent; font-weight: 600; } .main { display: flex; flex-direction: column; min-width: 0; } /* V28.83 — Topbar is now a two-row banner. Row 1 carries the brand (left) and the utility cluster (right): gold chip, oz/tc toggle, language toggle, user info, sign out. Row 2 carries the horizontal primary nav, replacing the old left sidebar. */ .topbar { display: flex; flex-direction: column; background: var(--bg); border-bottom: 1px solid var(--border); position: relative; z-index: 1000; /* V28.649 - above Leaflet map layers (up to 800) */ } .topbar-row { display: flex; align-items: center; padding: 0 24px; } .topbar-row-brand { /* V28.85 — grew to clear the larger stacked Alpha/Oro lockup. V28.88 — 3-column grid: oz/tc + EN top-left, Alpha/Oro centered, gold chip + user + sign-out top-right. The 'auto' middle column sizes to the brand lockup; '1fr' outer columns balance so the brand sits exactly in the centre of the row regardless of how wide the left or right utility clusters are. V28.112 — bumped from 92px to 122px to clear the 1.5×-larger Alpha/Oro lockup (38px → 57px). Operator brief: 'make alphaOro badge a bit bigger like 1.5x the size, we can move down the panel below it'. */ height: 122px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 16px; border-bottom: 1px solid var(--border); } .topbar-left { display: flex; align-items: center; gap: 10px; justify-self: start; } .topbar-right { display: flex; align-items: center; gap: 12px; justify-self: end; } .topbar-brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--accent); } .topbar-brand:hover { text-decoration: none; } /* V28.84 — restore the stacked Alpha-on-top-of-Oro lockup the operator recognises, but at a compact topbar-friendly size. The em-based transform offsets from the sidebar version scale automatically with the smaller font, preserving the artistic stagger that puts the 'O' of Oro under the 'h' of Alpha. */ .topbar-brand .brand-stack { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1; } .topbar-brand .brand-mark, .topbar-brand .brand-name { display: block; font-family: var(--font-serif); font-weight: 700; /* V28.85 — larger lockup so the wordmark holds the top-left corner with more presence. The em-based translateX offsets below scale with the font, so the artistic 'O under h' alignment lands the same way at any size. V28.112 — 1.5× bump from 38px → 57px. translateX offsets are in em so the artistic stagger lands the same way at the new size. */ font-size: 57px; line-height: 0.85; letter-spacing: -0.02em; color: var(--accent); white-space: nowrap; margin: 0; padding: 0; } .topbar-brand .brand-mark { transform: translateX(-0.31em); } .topbar-brand .brand-name { transform: translateX(0.25em); } .topbar-utility { display: flex; align-items: center; gap: 14px; } .topbar-nav { /* V28.88 — nav now centres horizontally. Operator brief: the portal-picker panel should sit in the middle of the topbar mirroring the brand above it. V28.219 — `overflow-x: auto` removed because it forced `overflow-y` into clipping mode (CSS spec — you can't have one axis visible when the other is auto), which hid the V28.217 Finance / Settings dropdown menus the moment they tried to render below the row. With this many top-level items there's no longer enough breadth to need horizontal scroll. */ display: flex; justify-content: center; align-items: stretch; gap: 4px; height: 50px; padding: 0 24px; overflow: visible; flex-wrap: nowrap; } /* V28.84 — nav labels promoted to a more readable size (operator feedback: 'make headers a little bigger and visible'). 15px with a 600 weight reads as the primary action layer, and the 2px terracotta underline on active is more prominent because the row is taller. */ .topbar-nav-link { display: inline-flex; align-items: center; padding: 0 16px; color: var(--text-dim); font-size: 15px; font-weight: 500; letter-spacing: 0.005em; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 120ms ease, border-color 120ms ease; white-space: nowrap; } .topbar-nav-link:hover { color: var(--text); text-decoration: none; background: transparent; } .topbar-nav-link.active { color: var(--accent); font-weight: 700; border-bottom-color: var(--accent); } /* V28.217 / V28.220 — top-nav dropdown groups (Finance, Settings). Hover-driven with a soft fade + slide animation; closes the moment the cursor leaves both the parent label and the menu. */ .topbar-nav-group { position: relative; display: inline-flex; } .topbar-nav-toggle { background: transparent; border: 0; cursor: pointer; font-family: inherit; } .topbar-nav-chevron { font-size: 10px; margin-left: 6px; color: var(--text-dim); transition: transform 160ms ease, color 160ms ease; } .topbar-nav-group:hover .topbar-nav-chevron, .topbar-nav-group:focus-within .topbar-nav-chevron { transform: rotate(180deg); color: var(--accent, #8A5C3A); } .topbar-nav-menu { position: absolute; top: calc(100% - 1px); /* sits flush with the nav row so cursor can travel without leaving hover state */ left: 50%; transform: translate(-50%, -6px); min-width: 200px; background: #FBF6E9; border: 1px solid rgba(168, 92, 58, 0.18); border-radius: 10px; box-shadow: 0 12px 32px rgba(33, 27, 22, 0.18), 0 2px 6px rgba(33, 27, 22, 0.08); padding: 6px 0; z-index: 1001; /* V28.649 - above Leaflet map layers */ opacity: 0; pointer-events: none; transition: opacity 160ms ease, transform 160ms ease; } .topbar-nav-menu::before { content: ""; position: absolute; top: -6px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 10px; height: 10px; background: #FBF6E9; border-top: 1px solid rgba(168, 92, 58, 0.18); border-left: 1px solid rgba(168, 92, 58, 0.18); } .topbar-nav-group:hover .topbar-nav-menu, .topbar-nav-group:focus-within .topbar-nav-menu { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); } .topbar-nav-menu-item { display: block; padding: 9px 18px; font-size: 13.5px; color: var(--text); text-decoration: none; white-space: nowrap; border-left: 2px solid transparent; transition: background 120ms ease, color 120ms ease, border-color 120ms ease; } /* V28.257 - 120ms transition-delay on the hover state so opening a dropdown doesn't auto-paint the first item as 'selected' just because the cursor lands over it. The menu sits flush with the toggle (top: calc(100% - 1px)) so the cursor is exactly over the first item the moment the menu opens; without this delay it looked like Users (top of Settings) was being auto-selected. Mouseout still snaps back instantly - the delay only blocks the entry. */ .topbar-nav-menu-item:hover { background: rgba(168, 92, 58, 0.10); color: var(--accent, #8A5C3A); border-left-color: var(--accent, #8A5C3A); transition-delay: 120ms; } .topbar-nav-menu-item.active { background: rgba(168, 92, 58, 0.14); color: var(--accent, #8A5C3A); font-weight: 600; border-left-color: var(--accent, #8A5C3A); } /* V28.220 — when an item is clicked, briefly suppress the hover so the menu visibly closes before the new page loads. */ .topbar-nav-group.is-dismissed:hover .topbar-nav-menu, .topbar-nav-group.is-dismissed:focus-within .topbar-nav-menu { opacity: 0; pointer-events: none; transform: translate(-50%, -6px); } /* Original .topbar from V8 retained below for reference / fallback; the new two-row layout above takes precedence. */ .topbar-legacy { height: 64px; border-bottom: 1px solid var(--border); background: var(--bg); display: flex; justify-content: flex-end; align-items: center; gap: 14px; padding: 0 32px; } /* V28.81 — Gold spot chip. Sits left of the oz/tc + language toggles on the topbar. Visible to CPM Admin + CPM Director only (gated in the gold_price context processor). Cached snapshot, refreshed at most every 8 hours to stay under the GoldAPI.io 100/month tier. */ /* ========================================================================== V29.106 - App top bar (single shared component). One 34px control rhythm: segmented unit + language toggles, gold ticker chip, ⚙ admin button carrying the alerts badge, and the user block. Both menus (⚙ + user) are built on the shared anchored-menu component (.wb-kebab-*, anchored_menu.js). No serif anywhere in this bar — serif is the sidebar wordmark only. ========================================================================== */ /* Segmented toggle — [ g/t | oz/t ] and [ EN | ES ]. */ .tb-seg-form { margin: 0; display: inline-flex; } .tb-seg { display: inline-flex; align-items: center; height: 34px; padding: 3px; gap: 2px; background: #ECE7D8; border-radius: 17px; } .tb-seg-btn { appearance: none; border: 0; cursor: pointer; height: 28px; min-width: 40px; padding: 0 12px; border-radius: 14px; background: transparent; color: #6B6353; font-family: var(--font-sans); font-size: 11px; font-weight: 700; line-height: 1; transition: background-color 120ms ease, color 120ms ease; } .tb-seg-btn:hover { color: #4A4337; } .tb-seg-btn.is-on { background: #9C5B2B; color: #fff; } .tb-seg-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(156, 91, 43, 0.28); } /* Gold ticker chip. */ .gold-chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 17px; background: #F8EFD4; border: 1px solid #E2CF96; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; } .gold-chip-label { font-size: 9.5px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: #8A6A1F; } .gold-chip-price { font-size: 12.5px; font-weight: 800; color: #8A6A1F; font-variant-numeric: tabular-nums; } .gold-chip-unit { font-size: 9.5px; font-weight: 600; color: #B0985C; } .gold-chip-trend { font-size: 9.5px; font-weight: 800; font-variant-numeric: tabular-nums; } .gold-chip-trend.is-up { color: #4F7D49; } .gold-chip-trend.is-down { color: #A33C2E; } /* ⚙ admin icon button + its corner alert badge. The .wb-kebab-btn compound guarantees these beat the shared kebab-button base defined later in the file (equal specificity would otherwise let source order win). */ .wb-kebab-btn.tb-iconbtn { appearance: none; width: 34px; height: 34px; padding: 0; font-size: 0; border-radius: 50%; background: #fff; border: 1px solid #E6E0CF; color: #6B6353; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; position: relative; transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease; } .wb-kebab-btn.tb-iconbtn:hover { background: #FAF6EC; color: #4A4337; border-color: #E6E0CF; } .wb-kebab-btn.tb-iconbtn:focus-visible, .wb-kebab-btn.tb-user-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(156, 91, 43, 0.22); } .tb-badge { position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px; background: #B7791F; color: #fff; font-size: 8.5px; font-weight: 800; line-height: 16px; text-align: center; border: 2px solid #FAF8F0; font-variant-numeric: tabular-nums; } /* User block (avatar + name/role + caret) — the whole block is one trigger. */ .wb-kebab-btn.tb-user-btn { appearance: none; height: 34px; padding: 0 8px 0 0; font-size: 12px; border: 1px solid transparent; background: transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; border-radius: 17px; color: var(--text); } .wb-kebab-btn.tb-user-btn:hover { background: rgba(0, 0, 0, 0.03); border-color: transparent; } .tb-avatar { position: relative; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: #9C5B2B; color: #fff; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; letter-spacing: 0.2px; } .tb-avatar-dot { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; background: #4F7D49; border: 2px solid #FAF8F0; } .tb-user-id { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; min-width: 0; } .tb-user-name { font-size: 12px; font-weight: 700; color: var(--text); white-space: nowrap; } .tb-user-role { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #98907E; white-space: nowrap; } .tb-caret { color: #98907E; flex: 0 0 auto; } @media (max-width: 720px) { .tb-user-id { display: none; } } /* Shared menu shell for the ⚙ + user menus (rendered via anchored_menu.js). */ .topbar-menu-wrap { display: inline-flex; } .wb-kebab-menu.tb-menu { width: 236px; min-width: 236px; border-radius: 11px; padding: 6px; background: #fff; border: 1px solid #E6E0CF; box-shadow: 0 12px 34px rgba(60, 50, 30, 0.16); } .tb-menu-head { padding: 6px 11px 4px; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: #98907E; } .tb-menu-sep { height: 1px; margin: 5px 4px; background: #F0ECE0; } .wb-kebab-item.tb-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7.5px 11px; border-radius: 7px; font-family: var(--font-sans); font-size: 11.5px; font-weight: 600; color: #2B2620; white-space: normal; text-decoration: none; background: transparent; border: 0; cursor: pointer; text-align: left; } .wb-kebab-item.tb-menu-item:hover { background: #FAF8F0; color: #2B2620; } .wb-kebab-item.tb-menu-item.is-active { background: #FAF3E9; color: #9C5B2B; } .tb-menu-icon { flex: 0 0 15px; width: 15px; height: 15px; display: inline-flex; align-items: center; justify-content: center; color: #98907E; } .wb-kebab-item.tb-menu-item.is-active .tb-menu-icon { color: #9C5B2B; } .tb-menu-label { flex: 1 1 auto; min-width: 0; } .tb-menu-badge { flex: 0 0 auto; min-width: 18px; height: 16px; padding: 0 6px; border-radius: 8px; background: #FDF3E0; border: 1px solid #ECCF9A; color: #B7791F; font-size: 9px; font-weight: 800; line-height: 14px; text-align: center; font-variant-numeric: tabular-nums; } /* User menu identity header + role chip + red Sign out. */ .tb-user-card { display: flex; align-items: center; gap: 10px; padding: 8px 9px 9px; } .tb-avatar--lg { width: 32px; height: 32px; font-size: 12px; } .tb-user-card-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .tb-user-card-name { font-size: 12px; font-weight: 700; color: var(--text); } .tb-user-card-email { font-size: 9.5px; color: #98907E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tb-role-chip { align-self: flex-start; margin-top: 2px; padding: 1px 7px; border-radius: 999px; background: #FAF3E9; border: 1px solid #E6D3BB; color: #9C5B2B; font-size: 8.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.3px; } .tb-signout-form { margin: 0; } .wb-kebab-item.tb-menu-item.tb-signout, .wb-kebab-item.tb-menu-item.tb-signout:hover, .wb-kebab-item.tb-menu-item.tb-signout .tb-menu-icon { color: #A33C2E; } .wb-kebab-item.tb-menu-item.tb-signout:hover { background: #FBEDEA; } /* ========================================================================== V28.745 - Collapsible LEFT SIDEBAR shell. Nav moves from the topbar into a left rail (brand at the top, icon+label items, collapsible to an icon-only rail); the topbar keeps grade-unit / language / gold price / settings / profile. Overrides the earlier column shell + .nav-link (which the login page still uses in its own scope). ========================================================================== */ .app-shell { flex-direction: row; align-items: stretch; } .app-sidebar { width: 244px; flex: 0 0 244px; background: var(--bg-sidebar); border-right: 1px solid var(--border); display: flex; flex-direction: column; /* Fill the full column height (align-items:stretch on .app-shell) so the dark background always reaches the bottom of the page, even when the main content is taller than one viewport. The nav is pinned by the sticky inner wrapper below rather than by making the whole aside a fixed 100vh pane. */ min-height: calc(100vh / var(--app-zoom, 1)); align-self: stretch; transition: width 180ms ease, flex-basis 180ms ease; z-index: 1100; } .app-sidebar-sticky { display: flex; flex-direction: column; position: sticky; top: 0; height: calc(100vh / var(--app-zoom, 1)); overflow: hidden; } .app-sidebar-head { height: 112px; flex: 0 0 auto; display: flex; align-items: center; /* V28.883 - centred lockup (both expanded and collapsed). */ justify-content: center; padding: 0 16px; border-bottom: 1px solid var(--border); } .app-sidebar-brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--accent); /* No overflow:hidden here - it clipped the stacked lockup (the rightward "Oro" stagger + tight line-height). The sidebar's own overflow handles the collapse. */ } .app-sidebar-brand:hover { text-decoration: none; } /* Stacked Alpha / Oro wordmark - the recognised lockup, compact for the sidebar. The em-based stagger transforms from the base .brand-mark / .brand-name rule scale with this font-size (keeps the "O"-under-"h" set). padding-right leaves room for the "Oro" translateX so it never clips. */ .app-sidebar-brand-stack { display: inline-flex; padding-right: 0.35em; } .app-sidebar-brand-stack .brand-mark, .app-sidebar-brand-stack .brand-name { font-family: var(--font-serif); font-weight: 700; font-size: 42px; line-height: 0.98; letter-spacing: -0.02em; color: var(--accent); white-space: nowrap; } /* Collapsed-rail mark: the serif "AO" initials, centred in the rail. */ .app-sidebar-brand-mark { display: none; font-family: var(--font-serif); font-weight: 700; font-size: 32px; line-height: 1; letter-spacing: -0.02em; color: var(--accent); } .app-sidebar-nav { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 12px 12px 20px; display: flex; flex-direction: column; gap: 1px; } /* V28.876 - nav rows keep their natural height. Without this, a long nav shrinks the flex children vertically (cramped / "squeezed" rows) before it scrolls; now rows stay full-height and the list simply scrolls when it overflows. */ .app-sidebar-nav > .nav-link, .app-sidebar-nav > .nav-item-group { flex: 0 0 auto; } /* Nav link = icon + label row (overrides the block .nav-link above). */ .app-sidebar-nav .nav-link { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 0; border-radius: 8px; color: var(--text-dim); font-size: 14.5px; font-weight: 500; white-space: nowrap; overflow: hidden; } .app-sidebar-nav .nav-link:hover { color: var(--text); background: rgba(0, 0, 0, 0.03); } .app-sidebar-nav .nav-link.active { color: var(--accent); background: var(--accent-bg, rgba(178, 99, 64, 0.10)); font-weight: 600; } .nav-icon { display: inline-flex; flex: 0 0 20px; width: 20px; height: 20px; align-items: center; justify-content: center; } .nav-icon svg { width: 20px; height: 20px; } .nav-link-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; } .nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: rgba(178, 99, 64, 0.14); color: #8b4a2b; font-size: 11px; font-weight: 700; flex: 0 0 auto; } .nav-badge--alert { background: rgba(185, 74, 50, 0.16); color: #b94a32; } .app-sidebar-nav .nav-item-row { display: flex; align-items: center; } .app-sidebar-nav .nav-item-row > .nav-link { flex: 1 1 auto; } .app-sidebar-nav .nav-chevron { flex: 0 0 auto; margin: 0 2px 0 0; color: var(--text-dim); } /* Body column (topbar + content). */ .app-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } /* Single-row utility topbar. */ .app-topbar { height: 58px; flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 0 18px; background: #FAF8F0; border-bottom: 1px solid #E6E0CF; position: sticky; top: 0; z-index: 1000; } .app-collapse-btn { appearance: none; border: 0; background: transparent; cursor: pointer; width: 38px; height: 38px; border-radius: 8px; color: var(--text-dim); display: inline-flex; align-items: center; justify-content: center; transition: background 120ms ease, color 120ms ease; flex: 0 0 auto; } .app-collapse-btn:hover { background: rgba(0, 0, 0, 0.04); color: var(--text); } .app-topbar-spacer { flex: 1 1 auto; } /* V28.817 - page heading lives in the top banner (frees the vertical space the in-content title block used). Empty on pages that don't set it, where it just acts as the flex spacer. */ .app-topbar-heading { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 10px; overflow: hidden; } .app-topbar-eyebrow { flex: 0 0 auto; font-size: 10px; text-transform: uppercase; letter-spacing: 0.09em; font-weight: 700; color: var(--accent); white-space: nowrap; } .app-topbar-title { font-family: var(--font-sans); font-size: 16px; font-weight: 700; letter-spacing: -0.2px; line-height: 1.15; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 720px) { .app-topbar-eyebrow { display: none; } .app-topbar-title { font-size: 15px; } } .app-topbar-utils { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; font-variant-numeric: tabular-nums; } /* Collapsed icon-rail (desktop). */ html.sidebar-collapsed .app-sidebar { width: 68px; flex-basis: 68px; } html.sidebar-collapsed .app-sidebar-brand-stack, html.sidebar-collapsed .nav-link-label, html.sidebar-collapsed .nav-chevron, html.sidebar-collapsed .nav-badge { display: none; } html.sidebar-collapsed .app-sidebar-brand-mark { display: inline-flex; } html.sidebar-collapsed .app-sidebar-head { justify-content: center; padding: 0; } html.sidebar-collapsed .app-sidebar-nav { padding: 12px 10px 20px; } html.sidebar-collapsed .app-sidebar-nav .nav-link { justify-content: center; padding: 10px; gap: 0; } html.sidebar-collapsed .app-sidebar-nav .nav-item-row > .nav-link { flex: 1 1 auto; } html.sidebar-collapsed .nav-children { display: none; } /* Mobile: sidebar becomes an off-canvas overlay toggled by the same button (JS branches on width). Rail rules are undone here so the overlay shows full labels. */ .app-sidebar-scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); opacity: 0; visibility: hidden; transition: opacity 160ms ease; z-index: 1150; } @media (max-width: 900px) { .app-sidebar { position: fixed; left: 0; top: 0; z-index: 1200; width: 244px; flex-basis: 244px; transform: translateX(-100%); transition: transform 180ms ease; box-shadow: 2px 0 18px rgba(0, 0, 0, 0.16); } html.sidebar-collapsed .app-sidebar { width: 244px; flex-basis: 244px; } html.sidebar-collapsed .app-sidebar-brand-stack { display: inline-flex; } html.sidebar-collapsed .app-sidebar-brand-mark { display: none; } html.sidebar-collapsed .nav-link-label { display: block; } html.sidebar-collapsed .nav-chevron { display: inline-flex; } html.sidebar-collapsed .nav-badge { display: inline-flex; } html.sidebar-collapsed .app-sidebar-head { justify-content: center; padding: 0 16px; } html.sidebar-collapsed .app-sidebar-nav .nav-link { justify-content: flex-start; padding: 10px 12px; gap: 12px; } html.sidebar-collapsed .nav-children { display: block; } html.sidebar-open .app-sidebar { transform: translateX(0); } html.sidebar-open .app-sidebar-scrim { opacity: 1; visibility: visible; } } .content { flex: 1; padding: 28px 32px; /* V28.84 — was 1400px which capped the kanban on wide monitors. V28.92 — operator brief: on a 2560px or 3440px monitor the 1920px cap still left big gutters on the sides and the kanban lanes looked narrow. Cap removed; the content fills whatever viewport it lands on. Kanban / dashboard tables benefit immediately; reading-heavy surfaces don't exist in this app so the trade-off is fine. */ width: 100%; } .page-title { margin: 0 0 28px; font-family: var(--font-serif); font-size: 38px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.1; color: var(--text); } .page-title em { font-style: italic; color: var(--accent); font-weight: 600; } .placeholder-note { color: var(--text-muted); font-style: italic; margin: 12px 0; } /* ---- Login page ---- */ .login-page { background: var(--bg); } .login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 56px; } .login-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 48px 44px; width: 460px; max-width: 100%; } .login-brand { text-align: center; margin-bottom: 40px; } /* Stacked wordmark: "Alpha" above "Oro", terracotta serif, the second word inset to the right so it suspends from the end of the first. */ .login-brand-stack { display: inline-flex; flex-direction: column; align-items: flex-end; /* Oro right-aligns under "Alpha"'s edge */ color: var(--accent); margin-bottom: 14px; /* Visual-centering nudge: Oro hangs from Alpha's right edge so the bounding box leans right of its geometric center. Pull the whole stack a hair left so the wordmark reads centered inside the card. */ transform: translateX(-10px); } .login-brand-stack > span { display: block; font-family: var(--font-serif); font-weight: 700; font-size: clamp(56px, 7vw, 84px); line-height: 0.95; /* tight but no overlap */ letter-spacing: -0.025em; color: var(--accent); } /* Letter-precise alignment: "O" of "Oro" sits directly under the "h" of "Alpha". The stack is right-edge-aligned (align-items: flex-end), so Oro lands with its "O" under Alpha's "p" by default — one full character left of where we want it. Splitting the 40px relative shift across both lines (Alpha −20, Oro +20) keeps the same 40px delta — and therefore the same O-under-h alignment — while pulling the wordmark group as a whole 20px leftward so it reads as visually centered inside the card. */ .login-brand-stack > span:first-child { transform: translateX(-12px); } .login-brand-stack > span:last-child { transform: translateX(28px); } .login-brand-mark, .login-brand-name { /* Legacy classes kept harmless in case any template still references them. */ display: inline-block; font-family: var(--font-serif); font-weight: 700; color: var(--accent); margin: 0; } .login-tagline { color: var(--text-muted); margin: 10px 0 0; font-size: 13px; letter-spacing: 0.02em; } .login-form { display: flex; flex-direction: column; gap: 18px; } .form-field { display: flex; flex-direction: column; gap: 6px; } .form-field span { font-size: 11px; color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; } .form-field input, .form-field select, .form-field textarea { background: var(--bg-elev); border: 1px solid var(--border); color: var(--text); padding: 11px 13px; border-radius: var(--radius); font-family: var(--font-sans); font-size: 14px; transition: border-color 120ms ease, box-shadow 120ms ease; } .form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); } .btn-primary { background: var(--accent); color: #ffffff; border: 1px solid var(--accent); padding: 12px 24px; font-weight: 600; border-radius: var(--radius); cursor: pointer; font-family: var(--font-sans); font-size: 14px; letter-spacing: 0.005em; transition: background 120ms ease, border-color 120ms ease; } .btn-primary:hover { background: var(--accent-soft); border-color: var(--accent-soft); } .btn-secondary { background: var(--bg-elev); color: var(--text); border: 1px solid var(--border); padding: 12px 24px; border-radius: var(--radius); cursor: pointer; font-family: var(--font-sans); font-size: 14px; font-weight: 500; transition: border-color 120ms ease, background 120ms ease; text-decoration: none; display: inline-block; } .btn-secondary:hover { background: var(--bg-elev-2); border-color: var(--border-strong); text-decoration: none; color: var(--text); } .btn-danger { background: var(--red); color: #ffffff; border: 1px solid var(--red); padding: 12px 24px; border-radius: var(--radius); cursor: pointer; font-family: var(--font-sans); font-size: 14px; font-weight: 600; transition: filter 120ms ease; } .btn-danger:hover { filter: brightness(1.08); } .form-error { background: rgba(156, 58, 46, 0.06); border: 1px solid rgba(156, 58, 46, 0.30); color: var(--red); padding: 10px 12px; border-radius: var(--radius); font-size: 13px; } @media (max-width: 880px) { .login-shell { padding: 32px; } .app-shell { grid-template-columns: 1fr; } .sidebar { display: none; } .content { padding: 24px 20px; } } /* ---- Tables ---- */ .data-table { width: 100%; border-collapse: collapse; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } .data-table th, .data-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--border); font-size: 13.5px; color: var(--text); } .data-table th { background: var(--bg-elev); color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 10.5px; border-bottom: 1px solid var(--border); } .data-table tr:last-child td { border-bottom: none; } .data-table tr:hover td { background: var(--bg-elev-2); } /* ============================================================ Terracotta list-header system — ONE definition reused by every list/table in the app. The card-list
band uses the first rule below. True uses the second rule — qualified on the base .data-table class so that its specificity (0,0,2,2) wins against any . thead th rule defined later in the file (e.g. .lib4-table thead th, .users-table thead th, .recon-applied-table th). Modifier classes on cells provide alignment: - .num / .lib4-num (right-aligned, tabular-nums) - .center — status, actions The 12px rounded top corners are applied separately to whichever element is the visible top edge (the band div for card lists; the first/last
for tables). For pixel-aligned column tracks in card lists, see the --lib4-grid-cols CSS-variable plumbing further down (data-grid="…" sections). True elements align by nature so they get the header styling only; no grid plumbing needed. */ .lib4-list-header-band { background: var(--table-head-bg); color: var(--table-head-ink); font-size: 10px; text-transform: uppercase; letter-spacing: 0.7px; font-weight: 700; padding: 12px 18px; border-bottom: 1px solid var(--table-head-border); } /* Switch the terracotta variant to separate-borders so each on each negotiation table; we just need table-layout: fixed to honor those percentages. */ .cpm-pa-table.neg-table { table-layout: fixed; } /* No wrapping anywhere on these tables — headers, cells, status badges, button labels. The Lot column uses internal
s which still stack vertically (block elements ignore nowrap). */ .cpm-pa-table.neg-table thead th, .cpm-pa-table.neg-table tbody td { white-space: nowrap; } .cpm-pa-table.neg-table .badge { white-space: nowrap; } /* Status column (3rd column in both tables) — center the header and the pill so the badge sits directly below its label. */ .cpm-pa-table.neg-table thead th:nth-child(3), .cpm-pa-table.neg-table tbody td:nth-child(3) { text-align: left; } /* Action column — buttons sit side-by-side, centered under a centered header label. White-space: nowrap on the group prevents wrapping when the column tightens. */ .cpm-pa-table.neg-table .cpm-pa-actions-th { text-align: left; } .cpm-pa-table.neg-table .cpm-pa-actions-cell { text-align: left; vertical-align: middle; white-space: nowrap; } .cpm-pa-table.neg-table .cpm-pa-actions-cell .cpm-pa-actions-stack { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; max-width: none; margin: 0; } .cpm-pa-table.neg-table .cpm-pa-actions-cell .pa-inline-form { display: inline-flex; margin: 0; } .cpm-pa-table.neg-table .cpm-pa-actions-stack .pa-row-action { display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 0; padding: 6px 14px; font-size: 12px; white-space: nowrap; box-sizing: border-box; } /* Vertical alignment within rows — the Lot cell has a small "MW-130" subtitle that makes its row taller; every other cell middle-aligns so text doesn't drift to the top. */ .cpm-pa-table.neg-table tbody td { vertical-align: middle; } .cpm-pa-flow { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: stretch; } .cpm-pa-col { min-width: 0; } .cpm-pa-col-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; } .cpm-pa-col-title { margin: 0; font-family: var(--font-serif); font-size: 19px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; } .cpm-pa-col-count { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--accent); background: var(--accent-bg); font-variant-numeric: tabular-nums; font-family: var(--font-sans); } .cpm-pa-col-pending .cpm-pa-col-count { color: var(--stage-pending_approval); background: color-mix(in srgb, var(--stage-pending_approval) 12%, transparent); } .cpm-pa-col-approved .cpm-pa-col-count { color: var(--stage-approved); background: color-mix(in srgb, var(--stage-approved) 12%, transparent); } .cpm-pa-col-card { padding: 0; overflow: hidden; } /* Chevron retired — sections are stacked vertically so left→right cue is redundant. Keep the markup in place for the responsive media-query classes that still reference it, but never render. */ .cpm-pa-flow-arrow { display: none; } .cpm-pa-table { font-size: 13px; } .cpm-pa-table thead th { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); padding: 12px 14px; } .cpm-pa-table tbody td { padding: 12px 14px; vertical-align: middle; } .cpm-pa-table .num { text-align: left; font-variant-numeric: tabular-nums; } /* Lot Number column: matches the right-column layout — wide enough for "LOT-DEMO-XXXX" on a single line. */ .cpm-pa-table th:first-child, .cpm-pa-table td:first-child { min-width: 160px; } .cpm-pa-table .cpm-pa-actions-th { width: 120px; text-align: left; } /* Keep the td as a normal table-cell (so its border-bottom forms a continuous row divider) — the vertical stacking happens on the inner .cpm-pa-actions-stack flex container, not on the td itself. */ .cpm-pa-table .cpm-pa-actions-cell { text-align: left; vertical-align: middle; white-space: normal; } .cpm-pa-actions-stack { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin: 0 auto; max-width: 96px; } .cpm-pa-actions-stack .pa-inline-form { display: block; margin: 0; } .cpm-pa-actions-stack .pa-row-action { display: block; width: 100%; margin: 0; text-align: center; padding: 6px 10px; font-size: 12px; font-weight: 600; border-radius: 4px; opacity: 1; } /* Open button as a proper tertiary — matches the visual weight of Approve/Reject (border, transparent background, hover tint). */ .cpm-pa-actions-stack .pa-row-action.pa-row-open { color: var(--accent); background: transparent; border: 1px solid var(--border-strong); text-decoration: none; } .cpm-pa-actions-stack .pa-row-action.pa-row-open:hover { background: var(--accent-bg); border-color: var(--accent); } .cpm-pa-lot-link { color: var(--accent); font-weight: 600; text-decoration: none; font-size: 13px; white-space: nowrap; } .cpm-pa-lot-link:hover { text-decoration: underline; } .cpm-pa-row-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; } .cpm-pa-empty td { padding: 0; border-bottom: none; } .cpm-pa-empty-inner { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 36px 18px; color: var(--text-dim); text-align: center; } .cpm-pa-empty-inner strong { font-family: var(--font-serif); font-weight: 600; font-size: 14.5px; color: var(--text); } .cpm-pa-empty-inner span { font-size: 12.5px; color: var(--text-muted); } @media (max-width: 1100px) { .cpm-pa-table { font-size: 12.5px; } .cpm-pa-table thead th, .cpm-pa-table tbody td { padding: 10px 10px; } } /* Libertad4 dashboard — compact KYC ticks for the overdue table */ .lib4-kyc-row-compact { display: flex; flex-wrap: nowrap; gap: 3px; align-items: center; } .lib4-kyc-icon-mini { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 10px; font-weight: 700; line-height: 1; cursor: default; border: 1px solid transparent; } /* Dashboard KYC-overdue table: honor the colgroup widths and center the Tranche 2 indicator under its header. The 17-circle group inherits the default flex-start (left) alignment so the first circle sits directly under the "KYC 1" header. */ .lib4-overdue-table { table-layout: fixed; } .lib4-overdue-t2-th { text-align: left; white-space: nowrap; } .lib4-overdue-t2-cell { text-align: left; vertical-align: middle; } /* Send Batches (libertad4 /pending-approval/) — fixed layout, single-line rows. The 5th column is centered on BOTH tables under a single shared rule so the STATUS badge and the ACTION button pivot around the exact same X axis when the two tables stack vertically. */ .lib4-sb-table { table-layout: fixed; } .lib4-sb-table thead th { white-space: nowrap; } .lib4-sb-table tbody td { white-space: nowrap; vertical-align: middle; } .lib4-sb-table .lib4-sb-action-th, .lib4-sb-table .lib4-sb-action-cell { text-align: left; vertical-align: middle; white-space: nowrap; } /* Strip any inherited horizontal margin so the centered child is pivoted exactly on the cell's X-center. Both the badge and the dispatch button are inline-level (inline-block / inline-flex); the shared text-align:center then gives identical placement. */ .lib4-sb-action-cell .lib4-status-pending, .lib4-sb-action-cell .lib4-dispatch-btn { margin: 0; vertical-align: middle; } /* Vertical hairline between the 17 KYC circles and the Tranche 2 circle. Sits inside the same inline-flex container as the circles so spacing stays consistent regardless of cell padding. */ .lib4-kyc-divider { display: inline-block; flex: 0 0 1px; width: 1px; height: 18px; background: #E1DBC9; margin: 0 12px; } /* Tracker KYC column — single combined column carrying both circle groups. The header reuses an identical inline-flex layout so the two labels ('KYC DOCUMENTS' / 'TRANCHE 2') sit directly above their circle groups. */ /* Tracker table — shared base used by both libertad4 /kyc/ (20 cols) and CPM /kyc-tracker/ (21 cols, adds a STATUS column). Two-tier header groups the 17 doc columns under "KYC 1" and the T2 column under "KYC 2". Doc-column headers are rotated 90° (read bottom-to-top) so the labels fit in narrow ~3.4-3.6% columns. */ .lib4-tracker-table { table-layout: fixed; min-width: 1100px; } /* CPM variant currently shares the libertad4 20-column layout (no extra STATUS column). The class is kept as a hook for future CPM-only overrides without forcing rules onto the shared base. */ .cpm-tracker-table { min-width: 1100px; } /* CPM tracker's 17 KYC circles are clickable AJAX toggle buttons (the T2 circle stays a read-only span). Reset the user-agent
; reads instantly as "these are the columns for everything below." Rounded top corners match the card containers in the section below. The .recon-adv-num-head and .recon-adv-status-head modifiers carry the right text-align so headers line up over their corresponding cells in .recon-adv-summary. */ /* Matches shared terracotta header pill — keep in sync. */ .recon-adv-header { background: var(--table-head-bg); color: var(--table-head-ink); font-size: 10px; text-transform: uppercase; letter-spacing: 0.7px; font-weight: 700; padding: 16px; white-space: nowrap; border-radius: 12px; margin-bottom: 8px; } .recon-adv-num-head { text-align: left; } .recon-adv-status-head { text-align: center; } .recon-adv-chev { font-size: 11px; color: var(--text-dim); transition: transform 150ms ease; } .recon-adv[open] .recon-adv-chev { transform: rotate(90deg); color: var(--accent); } .recon-adv-ref { font-weight: 600; color: var(--text); } .recon-adv-wh { color: var(--text); } .recon-adv-date { color: var(--text-dim); } .recon-adv-amount, .recon-adv-balance { font-variant-numeric: tabular-nums; text-align: left; } .recon-adv-amount { font-weight: 600; } .recon-adv-balance { color: var(--text); } .recon-adv-summary .recon-pill { justify-self: center; } /* V16 — pin the per-row ⋮ to the far right of its trailing grid cell. */ .recon-adv-summary .recon-row-menu { justify-self: end; margin-left: 0; } /* K7: per-warehouse heading on the Advances list — warm-grey pill, same shape as .recon-pill, tone borrowed from .lib4-unit-single. Lives inside the existing .recon-group-heading

so the wrapper's spacing rules still drive vertical rhythm; the pill itself just shrink-wraps the warehouse name. */ .recon-warehouse-pill { display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; padding: 3px 11px; border-radius: 99px; white-space: nowrap; color: var(--text-dim); background: color-mix(in srgb, var(--text-dim) 14%, transparent); } .recon-group-heading:has(> .recon-warehouse-pill) { /* The heading becomes a transparent host for the pill — strip the default h3 font weight/size so the pill stands on its own. */ font-weight: 400; font-size: inherit; } .recon-pill { display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; padding: 3px 9px; border-radius: 99px; white-space: nowrap; } .recon-pill-open { color: var(--green, #4F7A4A); background: color-mix(in srgb, var(--green, #4F7A4A) 14%, transparent); } .recon-pill-fully_applied { color: var(--text-dim); background: color-mix(in srgb, var(--text-dim) 14%, transparent); } .recon-pill-overdrawn { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); } /* T5b — invoice-reconciliation pill colours. Reuses the same tinted-pill shape as .recon-pill-open / -overdrawn; only the colour scope differs. */ .recon-pill-unallocated { color: var(--text-dim); background: color-mix(in srgb, var(--text-dim) 14%, transparent); } .recon-pill-partial { color: #8a6510; background: rgba(200, 147, 43, 0.14); } .recon-pill-allocated { color: var(--green, #4F7A4A); background: color-mix(in srgb, var(--green, #4F7A4A) 14%, transparent); } .recon-pill-paid_out { color: var(--green, #4F7A4A); background: color-mix(in srgb, var(--green, #4F7A4A) 14%, transparent); } /* T5b — gated invoice rows (sibling lots still pre-KYC-complete). The row reads at ~60% opacity so the queue still shows the row as upcoming work while making it visually clear it's not yet actionable. Hover state is unchanged so the user can still scan the values cleanly. */ .recon-invoice-row.is-gated > td { opacity: 0.6; } .recon-invoice-row.is-gated:hover > td { opacity: 1; } .recon-action-btn + .recon-action-btn { margin-left: 6px; } /* V5: keep Allocate + Pay Out side-by-side regardless of column width. Without the flex wrapper, the inline-block buttons wrap to two rows when the ACTION column gets narrow. */ .recon-action-row { display: flex; flex-wrap: nowrap; gap: 6px; justify-content: center; align-items: center; } .recon-action-row .recon-action-btn + .recon-action-btn { margin-left: 0; } .recon-adv-body { padding: 4px 14px 14px; border-top: 1px solid var(--border); } .recon-applied-table { width: 100%; font-size: 12.5px; margin-top: 10px; } .recon-applied-table th { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dim); } /* Match the head's horizontal padding to the body's so column tracks align under the terracotta band. */ .recon-applied-table thead th { padding-left: 8px; padding-right: 8px; } .recon-applied-table td { padding: 6px 8px; } .recon-applied-table td.num { font-variant-numeric: tabular-nums; } .recon-batch-link { color: var(--text); font-weight: 600; } .recon-batch-link:hover { color: var(--accent); } .recon-split-note { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; font-style: italic; } .recon-adv-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); font-size: 13px; font-variant-numeric: tabular-nums; } .recon-adv-hint { margin: 10px 0 0; font-size: 12px; color: var(--text-dim); font-style: italic; } .recon-adv-empty { padding: 12px 0; } /* ── Invoices Without Advance section ──────────────────────────────── */ .recon-iwa-section { margin-top: 32px; } .recon-iwa-section.has-rows { background: color-mix(in srgb, var(--accent) 3%, transparent); border-left: 3px solid var(--accent); border-radius: 4px; padding: 14px 16px 16px; } .recon-iwa-empty { color: var(--text-dim); font-size: 13px; font-style: italic; margin: 0; } .recon-iwa-table { width: 100%; font-size: 13px; } .recon-iwa-table thead th { padding-left: 8px; padding-right: 8px; } .recon-iwa-table td { padding: 8px; } .recon-iwa-table td.num { font-variant-numeric: tabular-nums; } @media (max-width: 1100px) { .recon-adv-summary, .recon-adv-header { grid-template-columns: 4% 1fr 1fr 100px; row-gap: 4px; } .recon-adv-date, .recon-adv-balance { grid-column: span 2; } } /* ==================================================================== AJAX toasts (currently only fired from the CPM lot detail page). ==================================================================== */ .cpm-toast-region { position: fixed; right: 24px; bottom: 24px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; z-index: 9999; pointer-events: none; } .cpm-toast { background: #FFFFFF; border: 1px solid #E1DBC9; color: #1F1F1F; font-family: var(--font-sans, "Inter", system-ui, sans-serif); font-size: 14px; line-height: 1.4; padding: 12px 16px; border-radius: 12px; box-shadow: 0 6px 18px rgba(31, 31, 31, 0.08), 0 1px 2px rgba(31, 31, 31, 0.04); max-width: 360px; opacity: 0; transform: translateY(6px); transition: opacity 200ms ease, transform 200ms ease; pointer-events: auto; } .cpm-toast.is-shown { opacity: 1; transform: translateY(0); } .cpm-toast.is-hiding { opacity: 0; transform: translateY(6px); } .cpm-toast.is-error { border-color: rgba(168, 92, 58, 0.45); color: #1F1F1F; } .cpm-toast.is-error::before { content: "⚠ "; color: var(--accent, #A85C3A); font-weight: 600; } /* ==================================================================== CPM /pending-approval/ — scoped table tightening + horizontal action groups. Lives under .cpm-pa-col-pending / .cpm-pa-col-approved so it only affects this page; the /negotiation/ tables (.cpm-pa-table.neg-table) keep their own bespoke widths. ==================================================================== */ .cpm-pa-col-pending .cpm-pa-table, .cpm-pa-col-approved .cpm-pa-table { table-layout: fixed; } .cpm-pa-col-pending .cpm-pa-table thead th, .cpm-pa-col-pending .cpm-pa-table tbody td, .cpm-pa-col-approved .cpm-pa-table thead th, .cpm-pa-col-approved .cpm-pa-table tbody td { padding: 12px 16px; vertical-align: middle; } .cpm-pa-col-pending .cpm-pa-table .cpm-pa-row-meta, .cpm-pa-col-approved .cpm-pa-table .cpm-pa-row-meta { line-height: 1.4; } /* Left-align the Action column per global alignment rule. */ .cpm-pa-col-pending .cpm-pa-table .cpm-pa-actions-th { text-align: left; width: auto; } .cpm-pa-col-pending .cpm-pa-table .cpm-pa-actions-cell { text-align: left; white-space: nowrap; } /* Approve / Reject / Open side-by-side, gap 6px, centered as a group. Wins over the base flex-direction:column rule by higher specificity. */ .cpm-pa-col-pending .cpm-pa-actions-cell .cpm-pa-actions-stack { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; margin: 0; } .cpm-pa-col-pending .cpm-pa-actions-cell .pa-inline-form { display: inline-flex; margin: 0; } .cpm-pa-col-pending .cpm-pa-actions-stack .pa-row-action { display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 64px; padding: 6px 12px; font-size: 12px; white-space: nowrap; box-sizing: border-box; } /* APPROVED — single Open button, left-aligned per global rule. */ .cpm-pa-col-approved .cpm-pa-table .cpm-pa-actions-th { text-align: left; width: auto; } .cpm-pa-col-approved .cpm-pa-table .cpm-pa-actions-cell { text-align: left; white-space: nowrap; } .cpm-pa-col-approved .cpm-pa-actions-cell .cpm-pa-actions-stack { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; margin: 0; } .cpm-pa-col-approved .cpm-pa-actions-stack .pa-row-action { display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 80px; padding: 6px 16px; font-size: 12px; white-space: nowrap; box-sizing: border-box; } /* --------------------------------------------------------------------------- Libertad4 blend page (Phase 12, /pending-approval/ for libertad4 role) --------------------------------------------------------------------------- */ .lib4-blend-page { padding-bottom: 40px; } .lib4-blend-pageheader { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 20px; } .lib4-blend-kpis { margin: 0 0 32px; } .lib4-blend-list { display: flex; flex-direction: column; gap: 12px; } /* V25 — flex gap is the only spacer between header band and the cards inside it. Without these resets the global `.card { margin-bottom:20px }` piles onto every row and the `.lib4-list-header-band { margin-bottom:8px }` piles onto the header — both stack ON TOP of the flex gap and make the header-to-first-card gap visually different from inter-card gaps. */ .lib4-blend-list > .lib4-list-header-band { margin-bottom: 0; } .lib4-blend-list > .lib4-blend-row.card { margin-bottom: 0; } /* V1 — libertad-4 KYC tracker tightens the vertical spacing between blend cards so more fit per viewport. Scoped to the libertad-4 KYC tracker wrapper specifically (the CPM-side wrapper carries the .cpm-blend-tracker modifier; everything else is libertad-4-facing). */ .lib4-blend-tracker:not(.cpm-blend-tracker) .lib4-blend-list { gap: 6px; } /* V2 — CPM /kyc/ tracker gets the same tightened spacing as the libertad-4 tracker. Negotiation list, send-batches, etc. (other surfaces using .lib4-blend-list outside the KYC tracker wrappers) keep the default 12px gap because they don't carry .cpm-blend-tracker. */ .cpm-blend-tracker .lib4-blend-list { gap: 6px; } /* V3 — /send-batches/ + /invoicing/ truck/lot row spacing matches the gap between the terracotta header band and the first row card. The page wrapper .lib4-blend-page is shared by both libertad-4 surfaces; the tightened spacing reads as one consistent visual rhythm. */ .lib4-blend-page .lib4-blend-list { gap: 6px; } /* Shared column-track plumbing for blend-list pages. Header band and each row's .lib4-blend-summary both read their grid-template-columns from the same custom property --lib4-grid-cols, which is set ONCE on the enclosing .lib4-section[data-grid=...]. That guarantees every row in a section uses the identical track layout as the section's header band — labels can't drift out of their columns. Critical for pixel alignment: the row article carries a 1px .card border, while the header band has no border. Without compensation the header content edge sits 1px LEFT of the row content edge. Fix: give the header band a 1px transparent border + box-sizing: border-box so the two boxes have identical outer geometry. Same gap, same padding, same border → identical column tracks. */ .lib4-list-header-band { /* visual props (background, color, font, padding) come from the shared .terracotta-header rule near the top of this file. Here we only carry the card-list grid plumbing + box-sizing alignment. */ display: grid; grid-template-columns: var(--lib4-grid-cols, 2fr 1.4fr 1fr 1fr 1.6fr 1fr 36px); gap: 14px; align-items: center; border: 1px solid transparent; box-sizing: border-box; white-space: nowrap; border-radius: 12px; margin-bottom: 8px; } /* Default for header band cells is left (inherited from the band). `.lib4-list-header-center` is the explicit center for STATUS / ACTION column header labels. `.lib4-list-header-num` and `-right` no longer right-align (global rule is left); they're left as aliases for the default in case any older markup still references them. */ .lib4-list-header-num, .lib4-list-header-right { text-align: left; } .lib4-list-header-center { text-align: center; } .lib4-blend-row { padding: 0; overflow: hidden; transition: box-shadow 120ms ease; } .lib4-blend-row:hover { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); } .lib4-blend-summary { display: grid; grid-template-columns: var(--lib4-grid-cols, 2fr 1.4fr 1fr 1fr 1.6fr 1fr 36px); gap: 14px; align-items: center; padding: 14px 18px; box-sizing: border-box; } /* Per-section column templates. data-grid on any ancestor of the header band + rows sets --lib4-grid-cols once; both inherit the same template via CSS custom-property cascade. */ /* Sizing convention (content-aware): - numeric tracks (tonnage, grade) are FIXED widths sized to typical values so "99.0 t" / "99.00" sit snug to their neighbours instead of floating far right of an over-wide column. - date track is FIXED ~130px (fits "May 27, 2026"). - action track is FIXED, sized to the widest button(s) in that section. - flex tracks (code+badge, warehouse, details) use minmax(min, Nfr) so they absorb remaining width and don't shrink below a readable minimum at narrower viewports. */ /* Slack now lives on the rightmost flex text column (MINER BATCHES / DETAILS) instead of WAREHOUSE. Result: TONNAGE and GRADE pull LEFT to sit snug to WAREHOUSE; empty whitespace falls past grade where it's absorbed by the wider details column. */ [data-grid="sb-pending"] { --lib4-grid-cols: minmax(150px,1.2fr) minmax(140px,1.3fr) 80px 70px minmax(180px,2fr) 120px 48px; } [data-grid="sb-dispatch"] { --lib4-grid-cols: minmax(150px,1.2fr) minmax(140px,1.3fr) 80px 70px minmax(180px,2fr) 180px 48px; } [data-grid="neg-pending"] { --lib4-grid-cols: minmax(150px,1.2fr) minmax(140px,1.3fr) 80px 70px minmax(180px,2fr) 150px; } [data-grid="neg-awaiting"] { --lib4-grid-cols: minmax(150px,1.2fr) minmax(140px,1.3fr) 80px 70px minmax(180px,2fr) 130px; } [data-grid="cpm-pa-pending"] { --lib4-grid-cols: minmax(150px,1.2fr) minmax(140px,1.3fr) 80px 70px minmax(180px,2fr) 200px 48px; } [data-grid="cpm-pa-approved"] { --lib4-grid-cols: minmax(150px,1.2fr) minmax(140px,1.3fr) 80px 70px minmax(180px,2fr) 130px 48px; } [data-grid="kyc-tracker"] { --lib4-grid-cols: minmax(150px,1.2fr) minmax(140px,1.3fr) 80px 70px minmax(200px,2.2fr) 48px; } [data-grid="neg-lib4-offers"] { --lib4-grid-cols: minmax(150px,1.2fr) minmax(140px,1.3fr) 80px 70px minmax(180px,2fr) 220px; } [data-grid="neg-lib4-accepted"] { --lib4-grid-cols: minmax(150px,1.2fr) minmax(140px,1.3fr) 80px 70px minmax(180px,2fr) 180px; } [data-grid="cpm-kyc-tracker"] { --lib4-grid-cols: minmax(160px,1.2fr) minmax(120px,1fr) minmax(260px,2.8fr) 60px 36px; } /* T3a libertad 4 Invoicing portal — Available to Invoice table. T3b prepends a fixed 48px checkbox column at the front. The 6 data columns that follow stay tuner-owned. The 48px lead column is OUT of tuner scope — fixed width. Defaults only — tuner owns runtime widths. Columns: [checkbox] | CPM LOT CODE | LOT TYPE | TONNAGE (t) | GRADE | OFFER (USD) | ACCEPTED ON */ [data-grid="lib4-invoicing-available"] { --lib4-grid-cols: 48px minmax(160px,1.5fr) 100px 110px 110px minmax(140px,1.2fr) 130px; } /* T3c — Past Invoices history table. Single table (NOT per-warehouse). Lead 40px column is the chevron and is OUT of tuner scope. Defaults only — tuner owns runtime widths. Columns: [chevron] | INVOICE NUMBER | WAREHOUSE | CPM LOTS | TOTAL OFFER (USD) | GENERATED ON */ [data-grid="lib4-invoicing-past"] { --lib4-grid-cols: 40px minmax(140px,1.4fr) minmax(140px,1.4fr) 90px minmax(140px,1.2fr) 130px; } /* T3c — drill-down detail sub-table for Past Invoices. Drill-down detail — not tuner-managed. */ .lib4-invoicing-past-detail-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 4px 0 2px; } .lib4-invoicing-past-detail-table thead th { color: var(--text-dim); text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.05em; font-weight: 600; padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border); background: transparent; } .lib4-invoicing-past-detail-table thead th.num { text-align: left; } .lib4-invoicing-past-detail-table tbody td { padding: 8px 10px; vertical-align: middle; border-bottom: 1px solid var(--border); } .lib4-invoicing-past-detail-table tbody td.num { font-variant-numeric: tabular-nums; } .lib4-invoicing-past-detail-table tbody tr:last-child td { border-bottom: 0; } .lib4-invoicing-past-detail-table tbody td .badge { white-space: nowrap; } /* T3a — warehouse sub-section header above each per-warehouse table on the libertad 4 /invoicing/ page. */ .lib4-invoicing-warehouse-head { margin: 18px 0 8px; } .lib4-invoicing-warehouse-name { font-size: 16px; color: var(--text-dim); font-weight: 600; margin: 0; } .lib4-invoicing-warehouse-count { color: var(--text-mute); font-weight: 500; margin-left: 6px; } .lib4-invoicing-section { margin-bottom: 6px; } /* T3b — checkbox cell + selection summary + create-invoice modal. */ .lib4-invoicing-check-cell { display: flex; align-items: center; justify-content: center; } .lib4-invoicing-check-cell input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; } .lib4-invoicing-selection-summary { margin-top: 8px; min-height: 1.2em; } .lib4-invoicing-selection-summary[data-state="ok"] { color: var(--text); } .lib4-invoicing-selection-summary[data-state="mixed"] { color: var(--accent); } .lib4-invoicing-selection-summary[data-state="empty"] { color: var(--text-dim); } .lib4-invoicing-modal-recap { background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; margin-bottom: 14px; } .lib4-invoicing-modal-recap-row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 13px; } .lib4-invoicing-modal-label { color: var(--text-dim); text-transform: uppercase; font-size: 11px; letter-spacing: 0.05em; font-weight: 600; } .lib4-invoicing-modal-value { color: var(--text); font-weight: 500; } .lib4-invoicing-modal-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13px; } .lib4-invoicing-modal-table thead th { color: var(--text-dim); text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.05em; font-weight: 600; padding: 6px 4px; text-align: left; border-bottom: 1px solid var(--border); } .lib4-invoicing-modal-table thead th.num { text-align: right; } .lib4-invoicing-modal-table tbody td { padding: 6px 4px; } .lib4-invoicing-modal-table tbody td.num { text-align: right; font-variant-numeric: tabular-nums; } .lib4-invoicing-modal-error { color: var(--accent); font-size: 13px; margin: 0 0 8px; min-height: 1em; } /* --------------------------------------------------------------------------- Admin/DEBUG-only column tuner — visible only when the body has the `ctnr-on` class (toggled by static/js/column_tuner.js). All UI here is invisible in production / for non-admin users because the tuner script is only ever loaded under the {% if column_tuner_enabled %} guard in base.html. --------------------------------------------------------------------------- */ .ctnr-toolbar { position: fixed; right: 18px; bottom: 18px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif; } .ctnr-toolbar .ctnr-toggle { background: #1F1F1F; color: #FFFFFF; border: none; border-radius: 999px; padding: 10px 16px; font-size: 12px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.25); letter-spacing: 0.03em; } .ctnr-toolbar .ctnr-toggle:hover { background: #2F2F2F; } html.ctnr-on .ctnr-toolbar .ctnr-toggle { background: #A85C3A; } /* Drag handles — only visible when tuner is ON. Anchored to the right edge of each header cell (grid cells via position: relative,

; cells below carry the tick / cross tile. Operator brief: 'they would usually use an excel with the batches below each other for the ticking'. */ .kyc-flat-scroll { /* V28.131 — switched from page-scroll to an internal scrollbox so position:sticky on actually anchors. Operator brief: 'I want the headings to be frozen panes as I dont know what documents are referred to when I scroll down'. max-height tuned so the table fills the viewport below the brand + nav + tabs + filter row but still has page real estate to breathe. Tooltip clipping (the V28.130 reason for overflow-y: visible) is no longer a concern — V28.130 moved the tooltip to a body-level portal that escapes the wrapper entirely. */ overflow: auto; max-height: calc(100vh - 320px); margin-top: 6px; background: var(--bg-elev, #fff); border: 1px solid var(--border, rgba(0,0,0,0.10)); border-radius: 8px; } .kyc-flat-table thead th { /* The sticky position was already set above; pin z-index here so the header sits above hovered tiles when the table body scrolls under. */ z-index: 5; } /* V28.946 - CPM Ore & KYC Tracker: use the full page. Give the flat table more vertical room, and on desktop bleed it out to the full viewport width (the .content side gutter is 32px). */ .cpm-blend-tracker .kyc-flat-scroll { max-height: calc(100vh - 235px); } @media (min-width: 901px) { .cpm-blend-tracker .kyc-flat-scroll { margin-left: -32px; margin-right: -32px; border-left: none; border-right: none; border-radius: 0; } } /* V28.131 — Envío filter input in the column header. Compact text box with the same monospace numeric look as the env pill below it. */ .kyc-flat-th-env-label { display: block; font-size: 10px; letter-spacing: 0.08em; margin-bottom: 4px; } .kyc-flat-env-filter { display: block; width: 100%; padding: 3px 6px; font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: #6B4F2E; background: #fff; border: 1px solid rgba(168, 92, 58, 0.30); border-radius: 4px; box-sizing: border-box; text-align: center; } .kyc-flat-env-filter:focus { outline: none; border-color: rgba(168, 92, 58, 0.70); background: rgba(168, 92, 58, 0.04); } /* V28.132 — Excel export button sits in the same filter strip as the warehouse multi-select. Compact, monochrome, ghost-button styling. */ .kyc-export-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; font-size: 12px; font-weight: 600; border-radius: 6px; background: transparent; color: var(--accent, #8A5C3A); border: 1px solid rgba(168, 92, 58, 0.32); cursor: pointer; margin-left: 8px; } .kyc-export-btn:hover { background: rgba(168, 92, 58, 0.10); border-color: rgba(168, 92, 58, 0.50); } /* V28.138 — Total / Warehouse breakdown pill on the Capital Exposure card. */ .exposure-mode-pills { display: inline-flex; align-items: center; gap: 4px; padding: 3px; background: rgba(0,0,0,0.04); border-radius: 999px; margin: 0 16px; } .exposure-mode-pill { padding: 6px 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; border-radius: 999px; background: transparent; color: var(--text-dim, #6B6B66); border: 0; cursor: pointer; } .exposure-mode-pill.is-active { background: #fff; color: var(--accent, #8A5C3A); box-shadow: 0 1px 3px rgba(0,0,0,0.10); } /* V28.141 / V28.145 — warehouse-breakdown header + cells. Two-line header wrapping enforced via min-height (60px) so single-line warehouse names don't collapse the row. STAGE header alone is left-aligned per operator brief; warehouse names + Total are centered. Row values centered too. TOTAL column header inherits the dark terracotta band from the main thead. */ .exposure-wh-th { white-space: normal !important; text-align: center !important; vertical-align: middle !important; line-height: 1.25; padding: 12px 8px !important; min-height: 60px; word-break: normal; hyphens: auto; } .exposure-wh-th-stage { text-align: left !important; } .exposure-wh-th-total { /* Same dark terracotta as the main thead band so the Total column reads as part of the header strip. Hex sampled from the existing `.data-table--terracotta thead` rule (a saturated #8A3F26-ish). */ background: #8A3F26 !important; color: #fff !important; } .exposure-wh-td { text-align: center !important; vertical-align: middle; } .exposure-wh-td-stage { text-align: left !important; vertical-align: middle; } .exposure-wh-row-total { font-weight: 700; background: rgba(168, 92, 58, 0.05); border-left: 2px solid rgba(168, 92, 58, 0.30); } /* V28.133 — print stylesheet for "Export to PDF". Strips the topbar, nav, filters, action columns; expands the table; landscape A3 so the 17-doc strip fits with the full doc name above each column. Browser's Save-as-PDF generates the file. */ @media print { @page { size: A3 landscape; margin: 1cm; } body * { visibility: hidden; } .kyc-flat-scroll, .kyc-flat-scroll * { visibility: visible; } .topbar, .lib4-tracker-tabs, .ol-filters, .kyc-flat-th-doc-abbrev, .kyc-flat-th-selectall, .kyc-flat-td-selectall, .kyc-flat-th-kyc2, .kyc-flat-td-kyc2, .kyc-doc-portal-tooltip { display: none !important; } .kyc-flat-scroll { position: absolute; top: 0; left: 0; right: 0; max-height: none !important; overflow: visible !important; border: none !important; background: #fff !important; } .kyc-flat-table { width: 100%; font-size: 8.5px; border-collapse: collapse; } .kyc-flat-table thead th { position: static !important; background: #f5f1e6 !important; border-bottom: 1.5px solid #888 !important; padding: 6px 4px !important; font-size: 8.5px !important; } /* Show the full Spanish doc name in the print header (the live UI shows the 3-letter abbrev; PDF gets the full name). */ .kyc-flat-th-doc { font-size: 7.5px !important; padding: 4px 2px !important; } .kyc-flat-th-doc::before { content: attr(data-full-name); display: block; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-size: 8px; font-weight: 700; color: #2a2a2a; height: 110px; margin: 0 auto; font-family: "Inter", sans-serif; letter-spacing: 0; text-transform: none; } .kyc-flat-tr { page-break-inside: avoid; } .kyc-flat-td { padding: 4px 6px !important; border-bottom: 0.5px solid #ddd !important; } .kyc-flat-td-doc .lib4-kyc-icon-mini { width: 16px; height: 16px; font-size: 9px; border-width: 0.5px !important; } /* Print KYC2 status as text rather than the gold pill button. */ .kyc-flat-tr.is-complete::after { content: "Complete"; } } /* V28.131 — unticked doc tiles render RED so the operator can see at a glance which documents are missing on a row. Scoped to the flat tracker so other surfaces (lot detail, populate modal) keep the current neutral-amber 'pending' visual unchanged. */ .kyc-flat-tr .lib4-kyc-icon.is-pending { color: #B33A2E; background: rgba(179, 58, 46, 0.10); border-color: rgba(179, 58, 46, 0.36); } .kyc-flat-tr .lib4-kyc-icon.is-pending:hover { background: rgba(179, 58, 46, 0.20); border-color: rgba(179, 58, 46, 0.55); } .kyc-flat-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; } .kyc-flat-table thead th { /* V28.236 - canonical terracotta. KYC tracker headers used to be beige-on-beige; now match every other portal table. */ position: sticky; top: 0; background: var(--table-head-bg); color: var(--table-head-ink); border-bottom: 1px solid var(--table-head-border); font-weight: 700; font-size: 10px; letter-spacing: 0.7px; text-transform: uppercase; padding: 8px 6px; text-align: left; white-space: nowrap; } /* V28.126/.127/.128 — horizontal 3-letter abbreviation headers. V28.128 — switched from the native `title` tooltip (slow + sometimes invisible per operator brief 'shows a question mark') to a custom CSS hover popover sourced from data-full-name. Instant + always visible. */ .kyc-flat-th-doc { text-align: center !important; padding: 10px 8px !important; vertical-align: middle; min-width: 40px; position: relative; cursor: default; } .kyc-flat-th-doc-abbrev { display: inline-block; font-family: var(--font-mono, ui-monospace, monospace); font-size: 12.5px; letter-spacing: 0.05em; font-weight: 800; /* V28.237 - white on the terracotta thead, matching every other header text in the system. */ color: #FFFFFF; } /* V28.130 — body-level portal tooltip (positioned by JS). Lives at the very top of so no `.kyc-flat-scroll` overflow can clip it. JS reads .kyc-flat-th-doc[data-full-name] on mouseover, fills text, and positions via getBoundingClientRect + position:fixed. */ .kyc-doc-portal-tooltip { position: fixed; display: none; transform: translate(-50%, -100%); background: rgba(20, 20, 20, 0.94); color: #fff; padding: 7px 12px; border-radius: 5px; font-size: 12px; font-weight: 500; letter-spacing: 0.01em; font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; text-transform: none; white-space: nowrap; z-index: 999999; pointer-events: none; box-shadow: 0 6px 16px rgba(0,0,0,0.24); } .kyc-doc-portal-tooltip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: rgba(20, 20, 20, 0.94); } .kyc-flat-th-selectall { text-align: center !important; font-size: 10.5px !important; } .kyc-flat-th-kyc2 { text-align: center !important; font-size: 10.5px !important; } .kyc-flat-td-kyc2 { text-align: center; } .kyc-flat-td-selectall { text-align: center; } .kyc-flat-th-total { text-align: center !important; } .kyc-flat-tr { background: #fff; } .kyc-flat-tr:nth-child(even) { background: rgba(0,0,0,0.015); } .kyc-flat-tr.is-complete { background: rgba(60, 130, 60, 0.05); } .kyc-flat-td { padding: 8px 10px; border-bottom: 1px solid var(--border, rgba(0,0,0,0.08)); vertical-align: middle; white-space: nowrap; } .kyc-flat-td-doc { text-align: center; padding: 6px 8px; min-width: 40px; } .kyc-flat-td-code { font-size: 12.5px; font-weight: 700; } .kyc-flat-td-miner { max-width: 200px; overflow: hidden; text-overflow: ellipsis; font-size: 12px; color: var(--text-dim, #5a5a55); } .kyc-flat-doc-empty { color: rgba(0,0,0,0.15); font-size: 14px; } .kyc-flat-td-actions { display: flex; align-items: center; gap: 6px; justify-content: flex-end; } .kyc-flat-env-pill { display: inline-block; min-width: 54px; padding: 2px 9px; font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: #6B4F2E; background: rgba(168, 92, 58, 0.10); border: 1px solid rgba(168, 92, 58, 0.22); border-radius: 10px; text-align: center; font-variant-numeric: tabular-nums; } .kyc-flat-env-pill-empty { color: var(--text-dim, #6B6B66); background: rgba(107, 107, 102, 0.08); border-color: rgba(107, 107, 102, 0.18); font-style: italic; letter-spacing: 0; } .kyc-flat-batch-code { font-size: 13.5px; font-weight: 700; color: var(--text, #2a2a2a); letter-spacing: 0.02em; min-width: 110px; } .kyc-flat-miner-name { font-size: 12.5px; color: var(--text-dim, #5a5a55); font-weight: 500; flex: 1 1 200px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kyc-flat-pill { display: inline-block; padding: 2px 9px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; border-radius: 10px; } .kyc-flat-pill-cpm { color: #2F5E33; background: rgba(60, 130, 60, 0.10); border: 1px solid rgba(60, 130, 60, 0.24); font-family: var(--font-mono, ui-monospace, monospace); } .kyc-flat-pill-warehouse { color: #3F6E78; background: rgba(63, 110, 120, 0.10); border: 1px solid rgba(63, 110, 120, 0.24); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kyc-flat-stage { margin-left: auto; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 9px; border-radius: 10px; color: var(--text-dim, #6B6B66); background: rgba(107, 107, 102, 0.08); border: 1px solid rgba(107, 107, 102, 0.18); } .kyc-flat-stage.bucket-pre_invoice_population { color: #6B4F2E; background: rgba(176, 130, 43, 0.12); border-color: rgba(176, 130, 43, 0.28); } .kyc-flat-stage.bucket-kyc1 { color: #8A6510; background: rgba(176, 122, 43, 0.12); border-color: rgba(176, 122, 43, 0.28); } .kyc-flat-stage.bucket-kyc2 { color: #4F7A4A; background: rgba(92, 122, 74, 0.12); border-color: rgba(92, 122, 74, 0.28); } .kyc-flat-stage.bucket-compensated { color: #2F5E33; background: rgba(47, 94, 51, 0.12); border-color: rgba(47, 94, 51, 0.28); } /* Doc tiles inside table cells — compact, no flex wrapper needed. */ .kyc-flat-td-doc .lib4-kyc-icon-mini { width: 22px; height: 22px; font-size: 11px; vertical-align: middle; } .kyc-flat-counter { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; font-weight: 700; color: var(--text-dim, #6B6B66); font-variant-numeric: tabular-nums; white-space: nowrap; } .kyc-flat-counter.is-complete { color: #2F5E33; } .kyc-flat-counter-slash { opacity: 0.5; margin: 0 1px; } .kyc-flat-kyc2-btn { /* V28.239 - same red as the doc 'Missing' badge + required-field asterisk so this outstanding action visually matches the rest of the 'needs-your-attention' system. */ display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; border-radius: 6px; background: rgba(200, 68, 44, 0.10); color: #C8442C; border: 1px solid rgba(200, 68, 44, 0.32); cursor: pointer; white-space: nowrap; } .kyc-flat-kyc2-btn:hover { background: rgba(200, 68, 44, 0.18); border-color: rgba(200, 68, 44, 0.50); } .kyc-flat-kyc2-complete { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: #2F5E33; } .kyc-flat-select-all { padding: 4px 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; border-radius: 6px; background: transparent; color: var(--accent, #8A5C3A); border: 1px solid rgba(168, 92, 58, 0.32); cursor: pointer; white-space: nowrap; } .kyc-flat-select-all:hover { background: rgba(168, 92, 58, 0.10); } /* V28.172 — V28.156's .region-selector* / .region-pill* / .region-badge* and V28.157's .kyc-flat-pill-miner removed. V28.158 replaced the binary Region enum with the Area model and dropped the markup that used these classes; confirmed zero template/view references via grep before removing. */ /* V28.158 - Area pill on every kanban / list card. Replaces the V28.156 region-pill-lib4/other binary. The Area's payment_route flag decides the colour: Libertad 4 stays in the warm terracotta family; ad-hoc areas read as cool slate-blue so the routing is visible at a glance. */ .area-pill { display: inline-flex; align-items: center; font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; padding: 2px 8px; border-radius: 4px; margin-left: auto; margin-right: 4px; text-transform: uppercase; white-space: nowrap; font-family: var(--font-mono, ui-monospace, monospace); } .area-pill-lib4 { background: rgba(168, 92, 58, 0.16); color: #8A4626; } .area-pill-adhoc { background: rgba(107, 127, 138, 0.18); color: #4F636E; } /* V28.307 - Areas portal compact layout. Old design wrapped the table + add-area card in a 1fr/1fr grid which left a huge empty block under the card. New layout: page heading on the left, an inline 'name + add' form top-right, then a full-width table below with a kebab (edit/delete) per row. */ .areas-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 16px; } .areas-add-inline { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .areas-add-inline input[type=text] { min-width: 240px; } .areas-delete-form { margin: 0; padding: 0; } .areas-delete-btn { color: var(--danger, #C44A37); } /* V28.308 - WB Register Truck modal: '+ Add Region' is a sentinel option inside the Region ) + a separate ▲ / ▼ toggle. Shared by every board column and by New Blend's edit pool. */ .pm-sortbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 9px 0 3px; padding: 0 16px; } .pm-sortbar-lbl { font-size: 9px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: #98907E; } .pm-sortdd { position: relative; } .pm-sortdd-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: #6B6353; background: #fff; border: 1px solid #E6E0CF; border-radius: 8px; padding: 6px 11px; cursor: pointer; } .pm-sortdd-btn:hover { border-color: #D3B088; } .pm-sortdd-lbl { color: #98907E; font-weight: 700; } .pm-sortdd-cur { color: #2B2620; font-weight: 800; } .pm-sortdd-caret { font-size: 10px; line-height: 1; color: #9C5B2B; } .pm-sortdd-caret::before { content: "\25BE"; } .wb-kebab-menu.pm-sortdd-menu { min-width: 156px; background: #fff; border: 1px solid #E6E0CF; border-radius: 10px; box-shadow: 0 10px 28px rgba(60, 45, 20, 0.16); padding: 5px; } .wb-kebab-item.pm-sortdd-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; font-size: 12px; font-weight: 600; color: #3A342B; background: transparent; border: 0; border-radius: 7px; padding: 7px 10px; cursor: pointer; } .wb-kebab-item.pm-sortdd-item:hover { background: #F6F3E9; } .wb-kebab-item.pm-sortdd-item.is-on { color: #9C5B2B; font-weight: 800; } .wb-kebab-item.pm-sortdd-item.is-on::after { content: "\2713"; color: #4F7D49; font-weight: 800; } .pm-sortdir { display: inline-flex; } .pm-sortdir-btn { width: 27px; height: 29px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; color: #98907E; background: #fff; border: 1px solid #E6E0CF; cursor: pointer; } .pm-sortdir-btn:first-child { border-radius: 7px 0 0 7px; } .pm-sortdir-btn:last-child { border-radius: 0 7px 7px 0; margin-left: -1px; } .pm-sortdir-btn:hover { border-color: #D3B088; } .pm-sortdir-btn.is-on { color: #fff; background: #9C5B2B; border-color: #9C5B2B; } /* pad8 Part 5 - Milled tab: one full-width lane of rail cards + search. */ .pm-yard-lanes--milled { grid-template-columns: 1fr; max-width: 720px; } .pm-milled-search { margin-top: 10px; display: flex; align-items: center; } .pm-milled-search-input { width: 100%; max-width: 320px; font-size: 12px; padding: 7px 11px; border: 1px solid #E6E0CF; border-radius: 8px; background: #fff; color: #2B2620; } .pm-milled-search-input:focus { outline: none; border-color: #D3B088; } .pm-milled-search-count { font-size: 10px; color: #98907E; margin-left: 8px; font-variant-numeric: tabular-nums; } .pm-yard-empty { font-size: 12.5px; color: var(--text-dim, #7a6a55); text-align: center; padding: 18px 8px; font-style: italic; } .pm-yard-milled { margin-top: 16px; background: var(--bg-elev, #fff); border: 1px solid var(--border, #E1DBC9); border-radius: 12px; overflow: hidden; } .pm-yard-milled-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; list-style: none; font-weight: 700; color: var(--ink, #322618); } .pm-yard-milled-head::-webkit-details-marker { display: none; } .pm-yard-milled-head::before { content: "\25B8"; color: var(--text-dim, #7a6a55); transition: transform 150ms ease; } .pm-yard-milled[open] .pm-yard-milled-head::before { transform: rotate(90deg); } .pm-yard-milled-title { flex: 1; } .pm-yard-milled-count { background: rgba(90, 74, 53, 0.10); color: #7a6a55; font-size: 12px; font-weight: 700; padding: 1px 9px; border-radius: 999px; } .pm-yard-milled-body { padding: 4px 16px 14px; border-top: 1px solid var(--border, #E1DBC9); overflow-x: auto; } .pm-yard-milled-row { display: grid; grid-template-columns: 120px minmax(120px, 1fr) auto auto auto; gap: 12px; align-items: center; padding: 7px 0; border-bottom: 1px solid rgba(90, 74, 53, 0.08); font-size: 12.5px; color: var(--text-dim, #7a6a55); } .pm-yard-milled-blend { color: #4F6E58; font-weight: 600; } .pm-yard-milled-more { margin-top: 8px; font-size: 12px; } @media (max-width: 1100px) { .pm-yard-glance { grid-template-columns: repeat(2, 1fr); } .pm-yard-lanes { grid-template-columns: 1fr; } } /* V28.905 - per-column KPI cards + blend building */ .pm-yard-kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0 10px 10px; padding: 10px 12px; background: #fff; border: 1px solid var(--border, #E1DBC9); border-radius: 10px; } .pm-yard-kpi-metric { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .pm-yard-kpi-v { font-size: 17px; font-weight: 700; color: var(--ink, #322618); font-variant-numeric: tabular-nums; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pm-yard-kpi-l { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim, #7a6a55); } .pm-yard-newblend-btn { border: 1px solid var(--accent, #B26340); background: var(--accent, #B26340); color: #fff; font-size: 11.5px; font-weight: 700; padding: 5px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap; } .pm-yard-newblend-btn:hover { filter: brightness(1.05); } /* V29.300 - NO overflow/clip on the blend row container. Chrome fails to PAINT a clipped (overflow:hidden) box under the app shell's CSS zoom:0.8 -- the rows laid out but never drew until a scroll/zoom forced a repaint (blank-until-zoom-out). The Pad/Free .pm-yard-card and the Milled table have no overflow and always painted; that clip was the one property every prior attempt kept. Keep the row identity on the button (pm-blendband warm-sand band); the container is bare. */ .pm-yard-blendgroup { margin-bottom: 8px; } .pm-yard-blendgroup-head { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: rgba(79, 110, 88, 0.10); font-size: 12px; width: 100%; border: 0; font-family: inherit; text-align: left; color: inherit; cursor: pointer; } .pm-yard-blendgroup-name { font-weight: 700; color: #4F6E58; } .pm-yard-blendgroup-code { font-size: 10.5px; color: var(--text-dim, #7a6a55); } .pm-yard-blendgroup-stats { margin-left: auto; font-size: 11px; color: var(--text-dim, #7a6a55); font-variant-numeric: tabular-nums; white-space: nowrap; } .pm-yard-blendgroup .pm-yard-card { border-radius: 0; border-left: none; border-right: none; border-bottom: none; box-shadow: none; } .pm-yard-blendgroup .pm-yard-card:first-of-type { border-top: 1px solid var(--border, #E1DBC9); } /* V29.299 - collapse each blend to a one-line row: a plain , so revealed as table-row. */ .liq-ag-hideable { display: none; } .liq-rates-card.liq-show-ag .liq-ag-hideable { display: table-row; } .liq-samples-strip { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px dashed rgba(178, 99, 64, 0.20); } .liq-samples-label { font-size: 12px; color: var(--text-dim, #7a6a55); font-weight: 600; } .liq-samples-chips { display: flex; flex-wrap: wrap; gap: 4px; } .liq-sample-chip { display: inline-flex; padding: 3px 9px; background: rgba(76, 122, 60, 0.10); border: 1px solid rgba(76, 122, 60, 0.25); color: #4d6a3d; border-radius: 8px; font-size: 12px; font-weight: 600; gap: 4px; } .liq-sample-chip em { font-style: normal; opacity: 0.75; font-weight: 400; } /* V28.734 - .liq-sample-chip--check removed. V28.731's sample audit backend now filters CRU/null-grade rows server-side, so no chip ever needs the "check sample" styling. */ .liq-sample-count { font-size: 12.5px; } .liq-rates-table { width: 100%; border-collapse: collapse; } .liq-rates-table th { padding: 8px 10px; background: rgba(178, 99, 64, 0.06); color: var(--text-dim, #7a6a55); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; text-align: left; } .liq-rates-table th.num, .liq-rates-table th.center { text-align: center; } .liq-rates-table td { padding: 6px 8px; border-top: 1px solid rgba(178, 99, 64, 0.10); } .liq-num-input { width: 100%; padding: 6px 10px; border: 1px solid rgba(178, 99, 64, 0.20); border-radius: 6px; background: #fff7ec; font-family: var(--font-sans); font-size: 14px; font-variant-numeric: tabular-nums; text-align: right; } .liq-num-input--plant { background: rgba(178, 99, 64, 0.03); } .liq-num-input--ask { background: rgba(178, 99, 64, 0.06); } .liq-num-input--offer { background: rgba(76, 122, 60, 0.07); border-color: rgba(76, 122, 60, 0.28); } .liq-num-input--offer:focus { border-color: #4d6a3d; } .liq-notes-card { padding: 14px 18px; } .liq-notes-label { display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--text-dim, #7a6a55); margin-bottom: 6px; } .liq-sidebar .card { padding: 16px 18px; } .liq-price-input-wrap { display: flex; align-items: center; gap: 8px; } .liq-price-prefix, .liq-price-suffix { font-size: 12px; color: var(--text-dim, #7a6a55); font-weight: 600; } .liq-price-input { flex: 1; font-size: 18px; font-family: var(--font-serif); font-weight: 600; text-align: right; padding: 8px 12px; } .liq-payout-grid { display: flex; flex-direction: column; gap: 0; margin: 0; } .liq-payout-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(178, 99, 64, 0.10); font-size: 14.5px; } .liq-payout-row:last-child { border-bottom: none; } .liq-payout-row dt { margin: 0; color: var(--text, #2a1e10); } .liq-payout-row dd { margin: 0; font-family: var(--font-serif); font-weight: 600; font-variant-numeric: tabular-nums; } .liq-payout-row--muted { color: var(--text-dim, #7a6a55); } .liq-payout-row--sub { font-weight: 600; } .liq-payout-row--final { margin-top: 10px; padding: 15px 16px; background: linear-gradient(135deg, #B26340 0%, #8B4A2B 100%); color: #fff7ec; border-radius: 8px; font-size: 16.5px; border-bottom: none; } .liq-payout-row--final dt, .liq-payout-row--final dd { color: #fff7ec; } .liq-payout-row--final dd { font-size: 23px; } .liq-margin-strip { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding: 12px 14px; border-radius: 8px; background: rgba(0, 0, 0, 0.03); border: 1px solid rgba(178, 99, 64, 0.20); font-size: 14px; } .liq-margin-label { font-weight: 600; color: var(--text-dim, #7a6a55); } .liq-margin-value { font-family: var(--font-serif); font-weight: 600; font-variant-numeric: tabular-nums; } .liq-margin-strip.liq-margin--positive { background: rgba(76, 122, 60, 0.08); border-color: rgba(76, 122, 60, 0.30); } .liq-margin-strip.liq-margin--positive .liq-margin-value { color: #4d6a3d; } .liq-margin-strip.liq-margin--negative { background: rgba(180, 50, 40, 0.08); border-color: rgba(180, 50, 40, 0.30); } .liq-margin-strip.liq-margin--negative .liq-margin-value { color: #a04020; } .liq-actions { display: flex; flex-direction: column; gap: 10px; } /* V28.876 - View Offer / Download Offer buttons (icon + label, full-width). */ /* V28.882 - View Offer (solid) + Download Offer (outlined) as a consistent button pair, no wrapping, matching icon treatment. */ .liq-doc-action { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 14px; border-radius: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; } .liq-doc-action .liq-doc-btn-icon { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; } .pa-btn-primary.liq-doc-action .liq-doc-btn-icon { background: rgba(255, 255, 255, 0.24); color: #fff; } .liq-doc-action--download, .liq-doc-action--grade, .liq-doc-action--save { background: #fff; color: var(--accent, #B26340); border: 1.5px solid var(--accent, #B26340); } .liq-doc-action--download:hover, .liq-doc-action--grade:hover, .liq-doc-action--save:hover { background: rgba(178, 99, 64, 0.08); color: #8B4A2B; } .liq-doc-action--download .liq-doc-btn-icon, .liq-doc-action--grade .liq-doc-btn-icon, .liq-doc-action--save .liq-doc-btn-icon { background: rgba(178, 99, 64, 0.16); color: var(--accent, #B26340); } .liq-actions-secondary { display: flex; gap: 8px; } .liq-actions-secondary .pa-btn { flex: 1; text-align: center; } .liq-actions-status { margin: 0 0 10px; padding: 8px 12px; background: rgba(178, 99, 64, 0.08); border-radius: 6px; font-size: 12.5px; color: var(--text, #2a1e10); } .liq-history-list { list-style: none; padding: 0; margin: 0; } .liq-history-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(178, 99, 64, 0.10); font-size: 12px; } .liq-history-row:last-child { border-bottom: none; } .liq-history-right { display: flex; gap: 10px; align-items: center; } .liq-history-right a { text-decoration: none; font-size: 14px; } .liq-print-page { max-width: 780px; margin: 0 auto; padding: 40px 32px; background: #ffffff; color: #2a1e10; font-family: var(--font-sans); } .liq-print-btn { padding: 8px 16px; background: var(--accent, #B26340); color: #fff; border: 1px solid var(--accent, #B26340); border-radius: 6px; font-size: 13px; cursor: pointer; margin-bottom: 20px; } .liq-print-head h1 { font-family: var(--font-serif); color: #8B4A2B; font-size: 26px; margin: 0 0 12px; } .liq-print-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 20px; font-size: 13px; padding-bottom: 16px; border-bottom: 2px solid #B26340; } .liq-print-section { margin-top: 20px; } .liq-print-section h2 { font-family: var(--font-serif); color: #8B4A2B; font-size: 16px; margin: 0 0 8px; } .liq-print-table { width: 100%; border-collapse: collapse; font-size: 13px; } .liq-print-table td { padding: 6px 10px; border-bottom: 1px solid #E2D6BD; } .liq-print-table td.num { text-align: right; font-variant-numeric: tabular-nums; font-family: monospace; } .liq-print-payout .liq-print-final td { background: #B26340; color: #fff7ec; font-weight: 700; font-size: 15px; } .liq-print-foot { margin-top: 32px; padding-top: 16px; border-top: 1px solid #E2D6BD; font-size: 11px; color: #7a6a55; font-style: italic; } @media print { .no-print, .topbar, .toasts, .demo-banner { display: none !important; } body { background: #fff !important; } .liq-print-page { padding: 0; } } /* V28.542 - Liquidation Helper visual polish. */ /* Gold price: force single line, allow input to shrink so the '/ troy oz' suffix doesn't wrap. */ .liq-price-input-wrap { flex-wrap: nowrap; white-space: nowrap; } .liq-price-input { min-width: 0; flex: 1 1 60px; } .liq-price-prefix, .liq-price-suffix { white-space: nowrap; flex-shrink: 0; } /* Wet ore etc. labels wrapping on the (US Ton) tag: keep on one line and drop the tag into a lower-weight muted style. */ .liq-lotdata-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Notes card polish - stop the textarea from showing its default browser resize corner over the border, give it consistent padding. */ .liq-notes-card textarea.liq-input { width: 100%; min-height: 72px; resize: vertical; padding: 10px 12px; font-family: var(--font-sans); line-height: 1.5; } /* Payment breakdown row alignment - ensure dt/dd wrap cleanly and the values are right-aligned in a fixed column. */ .liq-payout-row { gap: 12px; } .liq-payout-row dt { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; } .liq-payout-row dd { flex: 0 0 auto; text-align: right; white-space: nowrap; } .liq-payout-row--final { justify-content: space-between; } /* Operating margin strip - make sure the label and value don't collide on narrow sidebars. */ .liq-margin-strip { flex-wrap: wrap; gap: 8px; } .liq-margin-value { white-space: nowrap; text-align: right; } /* Typeahead dropdown - matches the app palette. */ .liq-typeahead { position: relative; flex: 1; } .liq-typeahead > input { width: 100%; } .liq-typeahead-menu { position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 40; background: #fff; border: 1px solid rgba(178, 99, 64, 0.28); border-radius: 8px; box-shadow: 0 6px 18px rgba(80, 50, 25, 0.10); max-height: 260px; overflow-y: auto; padding: 4px; } .liq-typeahead-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: 8px 12px; background: transparent; border: 0; border-radius: 6px; cursor: pointer; text-align: left; font-family: var(--font-sans); font-size: 13px; color: var(--text, #2a1e10); transition: background 100ms ease; } .liq-typeahead-item:hover, .liq-typeahead-item:focus { background: rgba(178, 99, 64, 0.10); outline: none; } .liq-typeahead-item .mono { font-weight: 600; } .liq-typeahead-item-miner { color: var(--text-dim, #7a6a55); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%; } /* V28.564 - Lot data grid row-gap now folded into the base .liq-lotdata-grid rule above; separate rule removed. */ .liq-lotdata-label em { display: inline-block; margin-left: 2px; font-size: 9.5px; letter-spacing: 0.06em; color: var(--text-dim, #7a6a55); } /* Payment card - reduce inner padding so numbers sit comfortably. */ .liq-payout-grid { padding: 4px 0; } /* Recent drafts card polish. */ .liq-history-row { padding: 10px 0; gap: 12px; } .liq-history-row strong { display: inline-block; margin-right: 6px; } /* V28.544 - Liquidation Helper calculator-style margin summary. */ .liq-margin-calc { margin-top: 16px; padding: 14px 16px; border: 1px solid rgba(178, 99, 64, 0.20); border-radius: 10px; background: linear-gradient(180deg, #fff7ec 0%, #fdf0dd 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); } .liq-margin-calc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 10.5px; letter-spacing: 0.10em; text-transform: uppercase; font-weight: 700; color: var(--text-dim, #7a6a55); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px dashed rgba(178, 99, 64, 0.20); } .liq-margin-calc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } @media (max-width: 900px) { .liq-margin-calc-grid { grid-template-columns: repeat(2, 1fr); } } .liq-margin-calc-tile { padding: 12px 14px; background: #ffffff; border: 1px solid rgba(178, 99, 64, 0.18); border-radius: 8px; display: flex; flex-direction: column; gap: 4px; transition: border-color 150ms ease, background 150ms ease; } .liq-margin-calc-label { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--text-dim, #7a6a55); line-height: 1.2; } .liq-margin-calc-label em { font-style: normal; font-weight: 500; opacity: 0.7; letter-spacing: 0.02em; text-transform: none; } .liq-margin-calc-value { font-family: var(--font-serif); font-size: 20px; font-weight: 600; color: var(--text, #2a1e10); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .liq-margin-calc-pct { font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: var(--text-dim, #7a6a55); font-variant-numeric: tabular-nums; } /* Low-margin flag styles - two independent classes so the operator can see which threshold tripped even when both fire. */ .liq-margin-calc.liq-margin-calc--gross-low .liq-margin-calc-tile:nth-child(3), .liq-margin-calc.liq-margin-calc--net-low .liq-margin-calc-tile:nth-child(4) { background: rgba(180, 50, 40, 0.06); border-color: rgba(180, 50, 40, 0.35); } .liq-margin-calc.liq-margin-calc--gross-low .liq-margin-calc-tile:nth-child(3) .liq-margin-calc-value, .liq-margin-calc.liq-margin-calc--gross-low .liq-margin-calc-tile:nth-child(3) .liq-margin-calc-pct, .liq-margin-calc.liq-margin-calc--net-low .liq-margin-calc-tile:nth-child(4) .liq-margin-calc-value, .liq-margin-calc.liq-margin-calc--net-low .liq-margin-calc-tile:nth-child(4) .liq-margin-calc-pct { color: #a04020; } /* V28.545 - Liquidation Helper per-column margin summary. Table now sits in the same card as the buying calc so the columns visually line up with Plant Data / Miner Ask / Purchase Offer above. */ .liq-margin-calc-table { width: 100%; border-collapse: collapse; font-size: 12.5px; } .liq-margin-calc-table th { padding: 8px 10px; font-size: 10px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-dim, #7a6a55); text-align: right; font-weight: 700; background: rgba(178, 99, 64, 0.06); border-bottom: 1px solid rgba(178, 99, 64, 0.15); } .liq-margin-calc-table th:first-child { text-align: left; background: transparent; } .liq-margin-calc-table td { padding: 9px 10px; border-bottom: 1px solid rgba(178, 99, 64, 0.10); font-variant-numeric: tabular-nums; } .liq-margin-calc-table td.num { text-align: right; font-family: var(--font-serif); font-weight: 600; font-size: 13.5px; color: var(--text, #2a1e10); } .liq-margin-calc-table td.num em { display: inline-block; margin-left: 8px; font-family: var(--font-sans); font-style: normal; font-size: 11px; font-weight: 600; color: var(--text-dim, #7a6a55); min-width: 52px; text-align: right; } .liq-mc-row-label { font-weight: 600; color: var(--text-dim, #7a6a55); font-size: 11px; letter-spacing: 0.02em; } .liq-mc-row-label em { font-style: normal; font-weight: 400; opacity: 0.7; margin-left: 4px; } .liq-margin-calc-table tbody tr:last-child td { border-bottom: none; } .liq-mc-margin-row td.num { font-size: 14.5px; } /* Threshold-tripped cell - only the specific cell (col × row) that fails goes red, so the operator can see exactly which offer flips which threshold. */ .liq-mc-low { background: rgba(180, 50, 40, 0.08); color: #a04020 !important; } .liq-mc-low em { color: #a04020 !important; } /* V28.555 - Libertad-4 pipeline summary table on Oscar's dashboard. */ .lib4-pipeline-section { margin-bottom: 24px; } .l4-pipeline-card { padding: 0; overflow: hidden; } .l4-pipeline-table { width: 100%; } .l4-pipeline-table thead th { padding: 12px 16px; font-size: 10.5px; letter-spacing: 0.10em; text-transform: uppercase; color: #FFF7EC; background: linear-gradient(135deg, #B26340 0%, #8B4A2B 100%); } /* V28.612 - selector specificity bumped so the terracotta base rule at line ~897 (thead th.num -> left) doesn't clobber the numeric right-alignment on this table's headers. Without the added .data-table--terracotta qualifier the base rule wins because it has strictly more classes; the data cells stay right-aligned via source order but the headers slip to left, and the LOTES / TONELAJE labels no longer sit above their columns. */ .data-table--terracotta.l4-pipeline-table thead th.num { text-align: right; } .l4-pipeline-table td { padding: 10px 16px; font-size: 13px; border-bottom: 1px solid rgba(178, 99, 64, 0.10); font-variant-numeric: tabular-nums; } .l4-pipeline-table td.num { text-align: right; font-family: var(--font-serif); font-weight: 600; } .l4-pipeline-total { background: rgba(178, 99, 64, 0.06); } .l4-pipeline-total td { border-top: 2px solid rgba(178, 99, 64, 0.30); } .l4-pipeline-settled td { background: rgba(76, 122, 60, 0.05); border-top: 1px dashed rgba(76, 122, 60, 0.25); font-style: normal; } .l4-pipeline-settled em { color: #4d6a3d; font-style: italic; font-size: 11.5px; margin-left: 8px; } .l4-pipeline-settled td.muted { color: var(--text-dim, #7a6a55); font-weight: 500; } /* V28.853 - pipeline is a stage x warehouse tonnage pivot. Many warehouses can make it wider than the card, so it scrolls horizontally inside its own box rather than forcing the page to scroll. */ .l4-pipeline-scroll { overflow-x: auto; } .l4-pipeline-pivot { min-width: 100%; } .l4-pipeline-pivot th.l4-wh-col { min-width: 120px; white-space: normal; vertical-align: bottom; font-size: 11px; line-height: 1.25; } .l4-pipeline-pivot .l4-total-col { border-left: 1px solid color-mix(in srgb, var(--accent, #a8471f) 22%, transparent); } /* V28.854 - North / Libertad-4 surface pill nav (Dashboard | KYC Tracker). Server-rendered anchors; the active pill carries .is-on. */ .north-pills { display: flex; gap: 6px; margin: 0 0 18px; border-bottom: 1px solid color-mix(in srgb, var(--accent, #a8471f) 16%, transparent); padding-bottom: 0; } .north-pill { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: 8px 8px 0 0; font-size: 13px; font-weight: 600; text-decoration: none; color: var(--text-dim, #7a6a55); border: 1px solid transparent; border-bottom: none; margin-bottom: -1px; background: transparent; } .north-pill:hover { color: var(--accent, #a8471f); background: color-mix(in srgb, var(--accent, #a8471f) 6%, transparent); } .north-pill.is-on { color: var(--accent, #a8471f); background: var(--card-bg, #fff); border-color: color-mix(in srgb, var(--accent, #a8471f) 16%, transparent); border-bottom: 1px solid var(--card-bg, #fff); } /* V28.906 - Supplier Register: outstanding-docs sort + Create form */ .sup-sort { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; flex-wrap: wrap; } .sup-sort-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim, #7a6a55); } .sup-sort-link { font-size: 13px; font-weight: 600; text-decoration: none; color: var(--text-dim, #7a6a55); padding: 4px 10px; border-radius: 999px; border: 1px solid transparent; } .sup-sort-link:hover { color: var(--accent, #a8471f); } .sup-sort-link.is-on { color: var(--accent, #a8471f); background: color-mix(in srgb, var(--accent, #a8471f) 10%, transparent); border-color: color-mix(in srgb, var(--accent, #a8471f) 24%, transparent); } .sup-create-card { max-width: 560px; padding: 22px 24px; } .sup-create-title { margin: 0 0 4px; font-size: 18px; } .sup-create-sub { margin: 0 0 16px; font-size: 13px; } .sup-create-form { display: flex; flex-direction: column; gap: 14px; } .sup-ruc-hint { font-size: 11.5px; line-height: 1.3; margin: 2px 0 0; } .sup-create-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; } /* V28.858 - Process Time Analytics window slider (weeks; max tick = all time). */ .pta-period-slider { width: 160px; vertical-align: middle; accent-color: var(--accent, #a8471f); } /* V28.864 - confirmation popup shown once a quick-chat alert is logged. */ .quick-chat-confirm { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; } .quick-chat-confirm[hidden] { display: none; } .quick-chat-confirm-scrim { position: absolute; inset: 0; background: rgba(43, 36, 26, 0.45); } .quick-chat-confirm-card { position: relative; z-index: 1; width: min(360px, calc(100vw - 40px)); background: var(--card-bg, #fff); color: var(--text, #2b241a); border-radius: 14px; padding: 24px 26px; text-align: center; box-shadow: 0 14px 44px rgba(0, 0, 0, 0.28); } .quick-chat-confirm-check { width: 46px; height: 46px; border-radius: 50%; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #fff; background: var(--green, #4F7A4A); } .quick-chat-confirm-title { font-weight: 700; font-size: 16px; margin-bottom: 6px; } .quick-chat-confirm-msg { color: var(--text-dim, #7a6a55); font-size: 13px; margin: 0 0 16px; line-height: 1.4; } /* V28.863 - Miner RUC captured at Add Lot: a subtle secondary input stacked under the miner name in the new-row cell, and a small tag on the saved row. Distinct from the truck's Transport RUC (different screen/field). */ /* V28.889 - Add-Lot Miner cell stacks Miner RUC (first) above Miner Name, with a quiet lookup hint below. Flex gap replaces the old per-input margin. */ .wb-li-cell--miner { display: flex; flex-direction: column; gap: 3px; } .wb-li-input-miner-ruc { display: block; width: 100%; font-size: 11px; } .wb-miner-ruc-hint { font-size: 10.5px; line-height: 1.3; margin: 0; } .wb-miner-ruc-tag { display: block; font-size: 11px; color: var(--text-dim, #7a6a55); } /* V28.862 - locked Edit Lot control for non-CPM-Admin users. Visible but non-actionable; the lock icon + native title tooltip explain why. */ .cpm-detail-edit.is-locked { opacity: 0.6; cursor: not-allowed; display: inline-flex; align-items: center; gap: 5px; } .cpm-detail-edit.is-locked .cpm-lock-ico { font-size: 12px; } /* V28.861 - subtle "Last Edited By" audit line at the foot of the Sampling / Negotiation cards (CPM Manager+ only). Muted secondary text, not a badge. */ .cpm-last-editor { margin-top: 12px; font-size: 11px; opacity: 0.85; } /* V28.855 - secondary "Last 7 days" line under each 14-day KPI card. */ .kpi-explain-7d { margin-top: 2px; font-weight: 600; color: color-mix(in srgb, var(--accent, #a8471f) 78%, var(--text-dim, #7a6a55)); } /* V28.851 - KYC tracker: filter bar + roomier miner rows / doc tiles. */ .l4kyc-filter { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .l4kyc-filter .app-search-input { max-width: 260px; } .l4kyc-filter .wh-multi-wrap { position: relative; } .l4kyc-filter .l4kyc-export-btn { margin-left: auto; white-space: nowrap; } .l4kyc-table td, .l4kyc-table th { vertical-align: middle; } .l4kyc-table td { padding-top: 10px; padding-bottom: 10px; } /* Doc tiles here carry word labels (e.g. "Valorización"), so the fixed 36px dashboard tile overflows and collides. Render each as an auto-width pill sized to its label; they wrap cleanly across the column. */ .l4kyc-tiles { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .l4kyc-tiles .lib4-dashboard-doc-tile { width: auto; min-width: 0; height: auto; padding: 4px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, #6B3F36 20%, transparent); } .l4kyc-tiles .lib4-dashboard-doc-tile.is-received { border-color: color-mix(in srgb, var(--green, #4F7A4A) 35%, transparent); } .l4kyc-tiles .lib4-tracker-doc-th-code { font-size: 12px; line-height: 1.2; white-space: nowrap; } /* ============================================================ V28.556 - Liquidation Helper visual overhaul. All card headings terracotta; ditch the yellow margin card; proper themed download/print buttons; fix top-strip alignment. ============================================================ */ /* Top strip - Region + CPM Lot code proper alignment. */ .liq-controls { align-items: stretch; } .liq-control { min-width: 200px; } .liq-control--wide { flex: 1 1 auto; } .liq-lot-input-wrap { align-items: stretch; } .liq-lookup-btn { padding: 10px 18px; font-weight: 700; } .liq-select { padding: 10px 14px; font-weight: 500; } .liq-control-label { font-size: 11.5px; letter-spacing: 0.14em; color: var(--accent, #B26340); font-weight: 700; } /* Card headings - all terracotta with a soft bottom border. */ .liq-card-head { border-bottom: 1px solid rgba(178, 99, 64, 0.20); padding: 4px 4px 10px; margin-bottom: 14px; } .liq-card-head .card-title { color: var(--accent, #B26340); font-family: var(--font-serif); /* V28.878 - larger, more legible type pass. */ font-size: 14px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; } .liq-notes-label { color: var(--accent, #B26340) !important; letter-spacing: 0.10em !important; } /* Section labels above (LOT DATA, BUYING CALCULATION etc.) also terracotta - they're h2 in .card-title style already but let's make sure they inherit the accent color. */ .liq-lotdata-card .card-title, .liq-rates-card .card-title, .liq-price-card .card-title, .liq-payout-card .card-title, .liq-history-card .card-title { color: var(--accent, #B26340); } /* Buying calculation table headers - terracotta band on top. */ .liq-rates-table thead th { background: linear-gradient(135deg, #B26340 0%, #8B4A2B 100%); color: #FFF7EC; padding: 10px 12px; } .liq-rates-table th.num, .liq-rates-table th.center { text-align: center; } /* Margin Summary card - replace yellow gradient with a clean white card + terracotta accent border. */ .liq-margin-calc { margin-top: 18px; padding: 0; background: #ffffff; border: 1px solid rgba(178, 99, 64, 0.20); border-radius: 10px; box-shadow: 0 1px 3px rgba(80, 50, 25, 0.04); overflow: hidden; } .liq-margin-calc-head { background: linear-gradient(135deg, #B26340 0%, #8B4A2B 100%); color: #FFF7EC; padding: 10px 16px; border: none; margin: 0; border-radius: 0; } .liq-margin-calc-head > span:first-child { color: #FFF7EC; font-weight: 700; } .liq-margin-calc-head > span.muted { color: rgba(255, 247, 236, 0.75) !important; font-weight: 500; } .liq-margin-calc-table th { background: rgba(178, 99, 64, 0.05); } .liq-margin-calc-table td { padding: 12px 14px; } /* Save + Docs buttons - proper themed buttons matching the app. */ .liq-save-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px 18px; font-size: 13.5px; font-weight: 700; letter-spacing: 0.01em; } .liq-save-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); font-size: 11px; font-weight: 800; line-height: 1; } .liq-actions-secondary { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; } .liq-doc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; background: rgba(178, 99, 64, 0.08); color: var(--accent, #8B4A2B); border: 1px solid rgba(178, 99, 64, 0.35); border-radius: 6px; font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; text-decoration: none; cursor: pointer; transition: background 120ms ease, border-color 120ms ease; } .liq-doc-btn:hover { background: rgba(178, 99, 64, 0.18); border-color: rgba(178, 99, 64, 0.55); color: var(--accent, #8B4A2B); text-decoration: none; } .liq-doc-btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(178, 99, 64, 0.20); color: var(--accent, #8B4A2B); font-size: 11px; font-weight: 700; line-height: 1; } .liq-doc-btn--print .liq-doc-btn-icon { font-size: 13px; } .liq-doc-btn--pdf .liq-doc-btn-icon { font-size: 12px; } /* Print toolbar on the print view - two proper buttons instead of one lonely orange one. */ .liq-print-toolbar { display: flex; gap: 10px; margin-bottom: 20px; } .liq-print-btn { padding: 9px 18px; background: var(--accent, #B26340); color: #fff; border: 1px solid var(--accent, #B26340); border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .liq-print-btn:hover { background: #8B4A2B; color: #fff; text-decoration: none; } .liq-print-btn--secondary { background: rgba(178, 99, 64, 0.10); color: var(--accent, #B26340); } .liq-print-btn--secondary:hover { background: rgba(178, 99, 64, 0.22); color: var(--accent, #8B4A2B); } /* Recent drafts card head + gap so it doesn't kiss the actions above */ .liq-history-card { margin-top: 4px; } /* ============================================================ V28.557 - Liquidation Helper: Notes removed, Plant Data locked, Gold price in top strip, Buying Calc header rounded. ============================================================ */ /* Gold price control - sits between Region and CPM Lot in the top strip. Narrower than the lot code input; the em-unit tag matches the rate table style. */ .liq-control--gold { min-width: 200px; max-width: 240px; flex: 0 0 auto; } .liq-control-unit { font-family: var(--font-sans); font-style: normal; font-size: 10px; letter-spacing: 0.04em; color: var(--text-dim, #7a6a55); opacity: 0.75; margin-left: 6px; text-transform: none; } .liq-gold-input { font-family: var(--font-serif); font-size: 15px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; padding: 10px 14px; } /* Plant Data column locked - visually the standard-rate reference, not something the operator adjusts. Read-only styling matches the wet-ore-metric-t / dry-ore-us-ton fields already in the Lot Data grid. */ .liq-num-input--plant { background: rgba(178, 99, 64, 0.06); color: var(--text, #2a1e10); cursor: default; border-color: rgba(178, 99, 64, 0.20); } .liq-num-input--plant:focus { outline: none; border-color: rgba(178, 99, 64, 0.20); background: rgba(178, 99, 64, 0.06); } /* Round the Buying Calculation table's terracotta header band - matches the Margin Summary card's rounded header. Achieved by applying border-top-*-radius to the outermost th cells. */ .liq-rates-card { padding: 16px 16px 16px; } .liq-rates-table { border-collapse: separate; border-spacing: 0; border-radius: 10px; overflow: hidden; border: 1px solid rgba(178, 99, 64, 0.20); } .liq-rates-table thead th:first-child { border-top-left-radius: 10px; } .liq-rates-table thead th:last-child { border-top-right-radius: 10px; } /* ============================================================ V28.558 - Buying Calc now spans full calc flow (Volumes -> Content -> Deductions). Compact Lot Data on the left. ============================================================ */ /* Simplified Lot Data - 4 fields now (miner, mine, real grade, comm grade). */ /* V28.884 - lot data fields stack one-per-row so the Lot data card grows tall enough to fill the left side next to the Payment card (the grid rows then size to content and the controls card stops stretching into white space). */ .liq-lotdata-grid--compact { grid-template-columns: 1fr; } /* Controls sit vertically centred in their card so any residual space is balanced rather than dumped below them. */ .liq-grid > .liq-top-strip { display: flex; flex-direction: column; justify-content: center; } /* V28.887 - Lot data: shorter fields on the left, a samples panel on the right (taken / outstanding stat tiles + the sighted-sample chips). */ .liq-lotdata-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 28px; align-items: start; } @media (max-width: 720px) { .liq-lotdata-body { grid-template-columns: 1fr; } } .liq-samples-panel { display: flex; flex-direction: column; gap: 12px; border-left: 1px solid rgba(178, 99, 64, 0.14); padding-left: 24px; } @media (max-width: 720px) { .liq-samples-panel { border-left: none; padding-left: 0; border-top: 1px solid rgba(178, 99, 64, 0.14); padding-top: 16px; } } .liq-samples-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .liq-sample-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 12px 14px; border-radius: 10px; background: rgba(76, 122, 60, 0.08); border: 1px solid rgba(76, 122, 60, 0.22); } .liq-sample-stat--out { background: rgba(226, 182, 42, 0.12); border-color: rgba(201, 154, 46, 0.38); } .liq-sample-stat-num { font-family: var(--font-serif); font-size: 28px; font-weight: 700; line-height: 1; color: #3c6330; font-variant-numeric: tabular-nums; } .liq-sample-stat--out .liq-sample-stat-num { color: #8a6a17; } .liq-sample-stat-label { font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; color: var(--text-dim, #7a6a55); } .liq-samples-panel-head { font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; color: var(--text-dim, #7a6a55); margin-top: 2px; } .liq-samples-empty { margin: 0; font-size: 12px; color: var(--text-dim, #7a6a55); font-style: italic; } /* V29 - metallurgical recovery status under Samples sighted. */ .liq-met-status { margin-top: 4px; display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.03em; } .liq-met-status.is-in { background: rgba(76, 122, 60, 0.12); border: 1px solid rgba(76, 122, 60, 0.30); color: #4d6a3d; } .liq-met-status.is-os { background: rgba(178, 99, 64, 0.12); border: 1px solid rgba(178, 99, 64, 0.35); color: #a8532f; } /* Recovery Gold row while the met test is outstanding. */ .liq-row-os .liq-num-input--plant { border-color: rgba(178, 99, 64, 0.45); background: rgba(178, 99, 64, 0.06); } /* V29 - provisional (90%) figures while the met test is outstanding: a distinct terracotta so they read clearly as NOT the real recovery. */ .liq-mc-provisional .liq-mc-money, .liq-mc-provisional .liq-mc-pct { color: #a8532f; } .liq-margin-value.liq-provisional, [data-liq-out="total_payable"].liq-provisional { color: #a8532f; } .liq-provisional-note { margin: 8px 0 0; font-size: 11px; color: #a8532f; font-style: italic; line-height: 1.4; } /* Section headers inside the rate table (Volumes / Metal content / Deductions). Solid pale terracotta band with tiny caps text so the operator visually tracks the flow moving down the table. */ .liq-rates-section-row td.liq-rates-section-label { padding: 10px 12px 6px; background: rgba(178, 99, 64, 0.05); color: var(--accent, #8B4A2B); font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; border-top: 1px solid rgba(178, 99, 64, 0.20); border-bottom: 1px solid rgba(178, 99, 64, 0.15); } .liq-rates-table tbody tr.liq-rates-section-row:first-child td.liq-rates-section-label { border-top: none; } /* V28.879 - the margin summary is now the final section of the buying-calculation table (same table = columns align automatically). These give the merged rows their own rhythm and put the opex/min-margin note beside the section title. */ .liq-mc-section-inner { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .liq-mc-section-meta { font-size: 10.5px; font-weight: 500; letter-spacing: 0.02em; text-transform: none; color: var(--text-dim, #7a6a55); white-space: nowrap; } .liq-rates-table .liq-mc-row td { padding: 10px 10px; } .liq-rates-table .liq-mc-row-label { padding-left: 12px; } .liq-rates-table .liq-mc-row--margin td { padding: 13px 10px; border-top: 1px solid rgba(178, 99, 64, 0.18); } /* Dry Ore row visually reads as computed (readonly styling) and sits under Wet Ore + Humidity as the roll-up. */ .liq-rates-row--computed .liq-num-input { background: rgba(178, 99, 64, 0.06); color: var(--text, #2a1e10); cursor: default; border-color: rgba(178, 99, 64, 0.20); font-weight: 600; } .liq-rates-row--computed .liq-num-input:focus { outline: none; border-color: rgba(178, 99, 64, 0.20); background: rgba(178, 99, 64, 0.06); } /* V28.737 - Grade Discount: Miner Ask + Purchase Offer stay operator- editable even though the row is a `computed` (bucket-suggested) row. Undo the muted computed look so they read + behave as normal inputs, keeping each column's own tint + focus affordance. */ .liq-rates-row--computed .liq-num-input--editable-discount { cursor: text; font-weight: 400; } .liq-rates-row--computed .liq-num-input--editable-discount.liq-num-input--ask { background: rgba(178, 99, 64, 0.06); border-color: rgba(178, 99, 64, 0.20); } .liq-rates-row--computed .liq-num-input--editable-discount.liq-num-input--offer { background: rgba(76, 122, 60, 0.07); border-color: rgba(76, 122, 60, 0.28); } .liq-rates-row--computed .liq-num-input--editable-discount:focus { outline: none; border-color: var(--accent, #B26340); background: #fff; } .liq-rates-row--computed .liq-num-input--editable-discount.liq-num-input--offer:focus { border-color: #4d6a3d; } /* V28.747 - Miner Ask goal-seek overlay: compact per-field status chips (absolute -> no row-height change), the recovery inline error, and the small reset control. Uses the AlphaOro palette. */ /* V28.751 - chip sits on the input's LEFT edge (values are right-aligned, so the left side is empty) - it never overlaps the number, never narrows the value, never shifts the row. Subtle + muted; the full explanation is a tooltip on the field. */ .liq-gs-chip { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); font-size: 8.5px; font-weight: 700; line-height: 1; padding: 1px 5px; border-radius: 7px; letter-spacing: 0.03em; text-transform: uppercase; pointer-events: none; white-space: nowrap; opacity: 0.9; background: rgba(90, 74, 53, 0.12); color: #7a6a55; } .liq-gs-chip--auto { background: rgba(76, 122, 60, 0.16); color: #3D6A46; } .liq-gs-chip--manual { background: rgba(90, 74, 53, 0.12); color: #7a6a55; } .liq-gs-chip--limit { background: rgba(178, 99, 64, 0.18); color: #B26340; } .liq-gs-chip[hidden] { display: none; } .liq-gs-err { position: absolute; left: 4px; right: 4px; top: 100%; margin-top: 2px; z-index: 6; font-size: 10px; font-weight: 600; color: #B94A32; background: #fff; padding: 1px 5px; border-radius: 4px; border: 1px solid rgba(185, 74, 50, 0.30); white-space: normal; } .liq-gs-err[hidden] { display: none; } .liq-input-invalid { border-color: #B94A32 !important; box-shadow: 0 0 0 2px rgba(185, 74, 50, 0.15); } .liq-gs-reset { appearance: none; border: 1px solid rgba(178, 99, 64, 0.30); background: #fff; color: var(--text-dim, #7a6a55); font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px; cursor: pointer; margin-left: auto; white-space: nowrap; } .liq-gs-reset:hover { border-color: var(--accent, #B26340); color: var(--accent, #B26340); } /* Slight background tint per group so the sections feel distinct without needing extra borders. */ .liq-rates-row--volumes { background: rgba(178, 99, 64, 0.02); } .liq-rates-row--content { background: rgba(76, 122, 60, 0.03); } /* ============================================================ V28.571 - Margin Summary card typography overhaul. Operator brief: "random sizes of text and the layout and colouring is poor for like subheadings etc". Rebuilt with a consistent type scale, clean subheading hierarchy, and one pattern for money/percent side-by-side across every margin cell. Also styles the new Grade Discount row so it reads as an auto-derived value (same tint as Dry Ore Weight) but stays visually inside the "Metal content" section. ============================================================ */ /* Card head - title on the left, meta line on the right, both share the same uppercase micro-caps style so nothing screams. */ .liq-margin-calc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 10px 16px; background: linear-gradient(135deg, #B26340 0%, #8B4A2B 100%); color: #FFF7EC; border-radius: 0; margin: 0; border: none; border-bottom: none; text-transform: none; } .liq-margin-calc-head-title { font-family: var(--font-serif); font-size: 13px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: #FFF7EC; } .liq-margin-calc-head-meta { font-family: var(--font-sans); font-size: 10.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 247, 236, 0.80); font-variant-numeric: tabular-nums; } /* Table - consistent column widths + row rhythm. */ .liq-margin-calc-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12.5px; background: transparent; } .liq-margin-calc-table thead th { padding: 10px 14px; font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--text-dim, #7a6a55); background: transparent; border-bottom: 1px solid rgba(178, 99, 64, 0.18); text-align: right; } .liq-margin-calc-table thead th.liq-mc-corner, .liq-margin-calc-table thead th:first-child { text-align: left; background: transparent; } /* Row rhythm - calc rows tight, margin rows a little taller so the summary numbers feel like the answer. */ .liq-margin-calc-table tbody tr td { padding: 10px 14px; border-bottom: 1px solid rgba(178, 99, 64, 0.08); font-variant-numeric: tabular-nums; vertical-align: middle; } .liq-margin-calc-table tbody tr.liq-mc-row--margin td { padding: 14px 14px; border-top: 1px solid rgba(178, 99, 64, 0.14); } .liq-margin-calc-table tbody tr:last-child td { border-bottom: none; } /* Left column label - one type style regardless of row. */ /* V28.884 - match the rate-row labels above (same inherited size, bold, dark) rather than the smaller terracotta style. font-size:inherit takes the same body size the rate
can carry its own border-radius (in collapse mode cell radii are ignored). border-spacing: 0 keeps the visual layout identical to the collapse default; the 8px gap below the header pill is provided by a parchment-coloured border-bottom on each thead cell (see below). Table bg switches from white (--bg-elev, inherited from .data-table) to parchment (--bg). Tbody cells get an explicit white bg below, so the visible result is: parchment "frame" with a terracotta pill at the top + a white rounded "rows card" below. The parchment behind the tbody cells is what makes the rounded top corners of the rows card visible. */ .data-table.data-table--terracotta { border-collapse: separate; border-spacing: 0; background: var(--bg); } .data-table.data-table--terracotta tbody td { background: var(--bg-elev); } .data-table.data-table--terracotta tbody tr:hover td { background: var(--bg-elev-2); } .data-table.data-table--terracotta tbody tr:first-child td:first-child { border-top-left-radius: 12px; } .data-table.data-table--terracotta tbody tr:first-child td:last-child { border-top-right-radius: 12px; } .data-table.data-table--terracotta tbody tr:last-child td:first-child { border-bottom-left-radius: 12px; } .data-table.data-table--terracotta tbody tr:last-child td:last-child { border-bottom-right-radius: 12px; } .data-table.data-table--terracotta thead th { /* V29.075 - warm-sand band via the shared tokens (was solid terracotta). Flat, attached band matching every other column header in the app. */ background: var(--table-head-bg); color: var(--table-head-ink); font-size: 10px; text-transform: uppercase; letter-spacing: 0.7px; font-weight: 700; /* Vertical only — horizontal padding inherits from each table's own .-table thead th rule so head padding matches body padding (otherwise the head shifts wider than the body and columns appear misaligned). */ padding-top: 11px; padding-bottom: 11px; /* Flat 1px token divider — the header now sits flush on the rows card (no parchment pill/gap). */ border-bottom: 1px solid var(--table-head-border); vertical-align: middle; } /* Round only the TOP corners of the band (following the card); the bottom is flat where it meets the rows. */ .data-table.data-table--terracotta thead tr:first-child th:first-child { border-top-left-radius: 12px; } .data-table.data-table--terracotta thead tr:first-child th:last-child { border-top-right-radius: 12px; } /* The rows card starts flat under the band (the header caps the top). */ .data-table.data-table--terracotta tbody tr:first-child td:first-child { border-top-left-radius: 0; } .data-table.data-table--terracotta tbody tr:first-child td:last-child { border-top-right-radius: 0; } /* Global alignment rule: ALL table/grid headers and data cells are left-aligned, including numeric columns. tabular-nums is retained on numeric helpers so digits still align vertically column-by-column. */ .data-table.data-table--terracotta thead th.num, .data-table.data-table--terracotta thead th.lib4-num { text-align: left; } .data-table.data-table--terracotta thead th.center { text-align: center; } /* ---- Cards ---- */ .card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px 28px; margin-bottom: 20px; } .card-title { margin: 0 0 18px; font-family: var(--font-sans); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.10em; color: var(--text-dim); } /* Daily Capital Exposure Trend (CPM dashboard) — editorial heading + stacked-bar chart card. The .card above the table also sits 24px from the Capital Exposure table thanks to .card's 20px bottom margin plus this card's small top breathing room. */ .capital-snapshot-card { margin-top: 4px; } .capital-snapshot-card .card-title { margin-bottom: 8px; } .capital-snapshot-headline { margin: 0 0 6px; font-family: var(--font-serif, "Source Serif 4", Georgia, serif); font-weight: 400; font-size: 22px; line-height: 1.2; color: var(--text); } .capital-snapshot-headline em { color: var(--accent, #A85C3A); font-style: italic; } .capital-snapshot-sub { margin: 0 0 18px; color: var(--text-dim); font-size: 13px; } .capital-snapshot-canvas-wrap { position: relative; height: 360px; } .capital-snapshot-empty { min-height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; color: var(--text-dim); background: color-mix(in srgb, var(--border) 12%, transparent); border: 1px dashed var(--border); border-radius: 8px; } .capital-snapshot-empty p { margin: 0; font-size: 14px; } .capital-snapshot-empty p + p { margin-top: 6px; } .capital-snapshot-empty-hint { font-size: 12px; color: var(--text-dim); max-width: 460px; } /* ---- Status badges ---- */ .badge { display: inline-block; padding: 4px 10px; border-radius: 4px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; border: 1px solid; font-family: var(--font-sans); } .badge-pending { background: rgba(176, 130, 43, 0.08); color: var(--orange); border-color: rgba(176, 130, 43, 0.28); } .badge-approved { background: rgba(79, 122, 74, 0.08); color: var(--green); border-color: rgba(79, 122, 74, 0.28); } .badge-progress { background: transparent; color: var(--text-dim); border-color: var(--border-strong); } .badge-done { background: rgba(168, 92, 58, 0.06); color: var(--accent); border-color: rgba(168, 92, 58, 0.28); } .badge-rejected { background: rgba(156, 58, 46, 0.08); color: var(--red); border-color: rgba(156, 58, 46, 0.28); } .badge-muted { background: transparent; color: var(--text-muted); border-color: var(--border); } /* ────────────────────────────────────────────────────────── Per-stage palette (canonical) — keep ALL stage tinting here. The same .stage- class is applied to: · partials/status_badge.html (lot detail status, dashboard exposure) · Ore Lots stage filter tabs so one stage gets one colour everywhere. Hues are intentionally muted to match the editorial palette. ──────────────────────────────────────────────────────── */ :root { --stage-pending_approval: #B0822B; /* gold */ --stage-approved: #4F7A4A; /* green — Approved for Dispatch */ --stage-in_transit: #A85C3A; /* terracotta */ --stage-at_weighbridge_sampling: #3F6E78; /* muted teal */ --stage-in_negotiation: #7E5C82; /* muted plum */ --stage-awaiting_supplier_acceptance: #C26D2A; /* warm amber */ --stage-accepted_awaiting_invoice: #8B5A3C; /* warm cinnamon — pause point between acceptance and invoice */ --stage-invoiced_awaiting_tranche_1: #B07A2B; /* early-warning amber-gold */ --stage-invoiced_awaiting_tranche_2: #5C7A4A; /* near-close muted green */ --stage-invoiced_kyc_complete: #2F5E33; /* deep forest — closed deal */ --stage-rejected: #9C3A2E; /* red */ /* V28.110 — operator brief: 'make sure all the lane lines match'. Two lanes were defaulting to gray because no per-stage colour existed. awaiting_3rd_party_sample sits between in_negotiation and awaiting_supplier_acceptance — use a muted slate so it reads as a holding pattern. retired (V28.105 soft-delete lane) gets a desaturated dust tone so it doesn't compete visually with the active workflow lanes. */ --stage-awaiting_3rd_party_sample: #5C708A; /* muted slate-blue */ --stage-retired: #8B847A; /* warm dust gray */ /* V11 — Truck.status "arrived" lane on the libertad-4 kanban. Muted indigo so the lane reads as a settled / handed-off state distinct from the in_transit terracotta. */ --stage-arrived: #5C6FA8; /* muted indigo */ } /* Badge variants — override the bucketed badge-* background/border/color. The bucket class is still applied first (for legacy non-stage statuses); the stage class wins because it's defined after. */ .badge.stage-pending_approval { color: var(--stage-pending_approval); background: color-mix(in srgb, var(--stage-pending_approval) 10%, transparent); border-color: color-mix(in srgb, var(--stage-pending_approval) 28%, transparent); } .badge.stage-approved { color: var(--stage-approved); background: color-mix(in srgb, var(--stage-approved) 10%, transparent); border-color: color-mix(in srgb, var(--stage-approved) 28%, transparent); } .badge.stage-in_transit { color: var(--stage-in_transit); background: color-mix(in srgb, var(--stage-in_transit) 10%, transparent); border-color: color-mix(in srgb, var(--stage-in_transit) 28%, transparent); } .badge.stage-at_weighbridge_sampling { color: var(--stage-at_weighbridge_sampling); background: color-mix(in srgb, var(--stage-at_weighbridge_sampling) 10%, transparent); border-color: color-mix(in srgb, var(--stage-at_weighbridge_sampling) 28%, transparent); } .badge.stage-in_negotiation { color: var(--stage-in_negotiation); background: color-mix(in srgb, var(--stage-in_negotiation) 10%, transparent); border-color: color-mix(in srgb, var(--stage-in_negotiation) 28%, transparent); } .badge.stage-awaiting_supplier_acceptance { color: var(--stage-awaiting_supplier_acceptance); background: color-mix(in srgb, var(--stage-awaiting_supplier_acceptance) 10%, transparent); border-color: color-mix(in srgb, var(--stage-awaiting_supplier_acceptance) 28%, transparent); } .badge.stage-accepted_awaiting_invoice { color: var(--stage-accepted_awaiting_invoice); background: color-mix(in srgb, var(--stage-accepted_awaiting_invoice) 10%, transparent); border-color: color-mix(in srgb, var(--stage-accepted_awaiting_invoice) 28%, transparent); } .badge.stage-invoiced_awaiting_tranche_1 { color: var(--stage-invoiced_awaiting_tranche_1); background: color-mix(in srgb, var(--stage-invoiced_awaiting_tranche_1) 10%, transparent); border-color: color-mix(in srgb, var(--stage-invoiced_awaiting_tranche_1) 28%, transparent); } .badge.stage-invoiced_awaiting_tranche_2 { color: var(--stage-invoiced_awaiting_tranche_2); background: color-mix(in srgb, var(--stage-invoiced_awaiting_tranche_2) 10%, transparent); border-color: color-mix(in srgb, var(--stage-invoiced_awaiting_tranche_2) 28%, transparent); } .badge.stage-invoiced_kyc_complete { color: var(--stage-invoiced_kyc_complete); background: color-mix(in srgb, var(--stage-invoiced_kyc_complete) 10%, transparent); border-color: color-mix(in srgb, var(--stage-invoiced_kyc_complete) 28%, transparent); } .badge.stage-rejected { color: var(--stage-rejected); background: color-mix(in srgb, var(--stage-rejected) 10%, transparent); border-color: color-mix(in srgb, var(--stage-rejected) 28%, transparent); } /* ---- Audit timeline ---- */ .audit-event { padding: 12px 16px; border-left: 2px solid var(--border-strong); background: var(--bg); margin-bottom: 8px; border-radius: 4px; font-size: 12px; } .audit-event.undo { border-left-color: var(--red); background: rgba(156, 58, 46, 0.04); } .audit-event-action { font-family: var(--font-mono); font-size: 11px; color: var(--accent); font-weight: 600; letter-spacing: 0.02em; } .audit-event-meta { color: var(--text-muted); font-size: 11px; } .audit-event-desc { color: var(--text); margin-top: 4px; font-size: 13px; line-height: 1.45; } /* ---- Misc ---- */ .actions-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } /* V28.46 — Chart-switcher card (Net Exposure / Daily Capital / Margin). Lives at the top of the Commercial dashboard. Three panes share the space; pills swap which is visible. Same sliding-underline feel as the top-level Commercial / KYC tabs. */ .chart-switcher-card { padding: 18px 22px 22px; } .chart-switcher-head { display: flex; justify-content: flex-start; align-items: center; margin-bottom: 12px; } .chart-switcher-pills { position: relative; display: inline-flex; gap: 2px; padding: 4px; border-radius: 12px; background: rgba(168, 92, 58, 0.06); border: 1px solid rgba(168, 92, 58, 0.16); } .chart-switcher-pill { position: relative; background: transparent; border: none; padding: 7px 18px; border-radius: 9px; font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--text-dim); cursor: pointer; z-index: 1; transition: color 180ms ease; } .chart-switcher-pill:hover { color: var(--ao-terracotta, var(--accent)); } .chart-switcher-pill.is-active { color: var(--ao-terracotta, var(--accent)); } .chart-switcher-pill:focus-visible { outline: 2px solid var(--ao-terracotta, var(--accent)); outline-offset: 2px; } .chart-switcher-pill-underline { position: absolute; bottom: 4px; left: 0; height: 3px; background: var(--ao-terracotta, var(--accent)); border-radius: 3px; transition: left 240ms cubic-bezier(0.4, 0.0, 0.2, 1), width 240ms cubic-bezier(0.4, 0.0, 0.2, 1); pointer-events: none; } .chart-switcher-pane { display: none; animation: dashFadeIn 220ms ease-out; } .chart-switcher-pane.is-active { display: block; } .chart-switcher-headline { font-family: var(--font-serif); font-size: 22px; font-weight: 600; margin: 4px 0 4px; } .chart-switcher-headline em { font-style: italic; color: var(--ao-terracotta, var(--accent)); font-weight: 600; } .chart-switcher-sub { font-size: 12.5px; color: var(--text-dim); margin: 0 0 14px; } /* Margin trend pane — slider + unit toggle + summary strip. */ .margin-chart-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; } .margin-chart-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .margin-chart-window { display: inline-flex; align-items: center; gap: 8px; } .margin-chart-window-label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); } .margin-chart-slider { -webkit-appearance: none; appearance: none; width: 160px; height: 6px; background: rgba(168, 92, 58, 0.20); border-radius: 3px; outline: none; } .margin-chart-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--ao-terracotta, var(--accent)); cursor: pointer; box-shadow: 0 2px 4px rgba(168, 92, 58, 0.30); } .margin-chart-slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--ao-terracotta, var(--accent)); cursor: pointer; border: none; } .margin-chart-window-value { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; color: var(--ao-terracotta, var(--accent)); min-width: 60px; } .margin-chart-weight { display: inline-flex; padding: 3px; border-radius: 9px; background: rgba(168, 92, 58, 0.06); border: 1px solid rgba(168, 92, 58, 0.16); } .margin-chart-weight-pill { background: transparent; border: none; padding: 5px 12px; border-radius: 7px; font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: var(--text-dim); cursor: pointer; transition: background 160ms ease, color 160ms ease; } .margin-chart-weight-pill.is-active { background: var(--ao-terracotta, var(--accent)); color: #fff; } /* V28.538 - Margin Trend summary strip refresh. Six stats laid out in a fluid grid (auto-fit), each with a soft terracotta accent left border, tighter typography, and a red-highlighted variant for the low-margin count when it's non-zero. Matches the burnt-orange/cream palette used across the app. */ .margin-chart-summary { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; margin: 8px 0 18px; padding: 4px 0; background: #fff7ec; border: 1px solid rgba(178, 99, 64, 0.18); border-radius: 10px; box-shadow: 0 1px 3px rgba(80, 50, 25, 0.04); overflow: hidden; } @media (max-width: 1080px) { .margin-chart-summary { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { .margin-chart-summary { grid-template-columns: repeat(2, 1fr); } } .margin-chart-stat { display: flex; flex-direction: column; gap: 6px; padding: 12px 18px; border-left: 1px solid rgba(178, 99, 64, 0.10); position: relative; } .margin-chart-stat:first-child { border-left: none; } .margin-chart-stat::before { content: ""; position: absolute; top: 12px; left: 0; width: 3px; height: 22px; background: var(--ao-terracotta, var(--accent, #B26340)); opacity: 0.55; border-radius: 0 2px 2px 0; } .margin-chart-stat:first-child::before { left: 0; } .margin-chart-stat-label { font-size: 10px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--text-dim, #7a6a55); padding-left: 8px; } .margin-chart-stat-value { font-family: var(--font-serif); font-size: 22px; font-weight: 600; color: var(--text, #2a1e10); letter-spacing: -0.015em; padding-left: 8px; line-height: 1.1; font-variant-numeric: tabular-nums; } /* When Low-margin trips is > 0, make the tile scream a bit. */ .margin-chart-stat--flag::before { background: #b94a32; opacity: 1; } .margin-chart-stat--flag .margin-chart-stat-value { color: #a04020; } .margin-chart-foot { margin: 10px 0 0; font-size: 11.5px; font-style: italic; } /* V28.46 — KPI card hover-lift + sparkline / contributors overlay. */ .kpi.kpi-hoverable { position: relative; overflow: hidden; transition: transform 200ms ease, box-shadow 200ms ease; cursor: default; } .kpi.kpi-hoverable:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(31, 32, 36, 0.10); } .kpi-hover { position: absolute; inset: 0; background: var(--bg-elev); padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 8px; opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity 200ms ease, transform 200ms ease; border-radius: var(--radius-lg); } .kpi.kpi-hoverable:hover .kpi-hover { opacity: 1; transform: translateY(0); pointer-events: auto; } .kpi-hover-title { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); } .kpi-hover-list { list-style: none; margin: 0; padding: 0; flex: 1; } .kpi-hover-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 5px 0; border-bottom: 1px dashed rgba(0,0,0,0.06); font-size: 12.5px; } .kpi-hover-row:last-child { border-bottom: none; } .kpi-hover-name { color: var(--text); } .kpi-hover-val { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; color: var(--text-dim); } .kpi-hover-empty { font-size: 12.5px; color: var(--text-dim); font-style: italic; margin: 0; } .kpi-hover-spark { margin-top: 4px; } .kpi-hover-spark svg { display: block; } .kpi-hover-spark-foot { display: flex; justify-content: space-between; font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; color: var(--text-dim); margin-top: 2px; } /* V28.45 — Dashboard tabs (Commercial / KYC). Pill row with sliding terracotta underline. Single page, no reload; views fade-cross. */ .dashboard-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; flex-wrap: wrap; } .dashboard-header .page-title { margin: 0; } .dashboard-tabs { position: relative; display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(168, 92, 58, 0.07); border: 1px solid rgba(168, 92, 58, 0.18); } .dashboard-tab { position: relative; background: transparent; border: none; padding: 10px 24px; border-radius: 10px; font-family: var(--font-sans); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--text-dim); cursor: pointer; z-index: 1; transition: color 180ms ease; } .dashboard-tab:hover { color: var(--ao-terracotta, var(--accent)); } .dashboard-tab.is-active { color: var(--ao-terracotta, var(--accent)); } .dashboard-tab:focus-visible { outline: 2px solid var(--ao-terracotta, var(--accent)); outline-offset: 2px; } .dashboard-tab-underline { position: absolute; bottom: 4px; left: 0; height: 3px; background: var(--ao-terracotta, var(--accent)); border-radius: 3px; transition: left 240ms cubic-bezier(0.4, 0.0, 0.2, 1), width 240ms cubic-bezier(0.4, 0.0, 0.2, 1); pointer-events: none; } .dashboard-view { animation: dashFadeIn 220ms ease-out; } .dashboard-view.is-hidden { display: none; } @keyframes dashFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* KYC dashboard — KPI rows + alert variant. */ .kyc-kpi-row { margin-bottom: 16px; } .kpi.kpi-alert { border-color: rgba(192, 57, 43, 0.45); background: rgba(192, 57, 43, 0.04); } .kpi.kpi-alert .kpi-value { color: var(--danger, #C0392B); } .kpi-trend { display: inline-block; margin-left: 6px; font-size: 13px; font-weight: 600; color: var(--text-dim); vertical-align: middle; } .kpi-trend-up { color: #4F7A4A; } .kpi-trend-down { color: var(--danger, #C0392B); } .kyc-kpi-link { color: inherit; text-decoration: none; border-bottom: 1px dashed rgba(168, 92, 58, 0.0); transition: border-color 160ms ease; } .kyc-kpi-link:hover { border-bottom-color: rgba(168, 92, 58, 0.6); } /* "What needs attention today" — three-column action panel. */ .kyc-today-card { padding: 22px 26px; } .kyc-today-head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; } .kyc-today-head .card-title { margin: 0; } .kyc-today-sub { font-size: 12.5px; color: var(--text-dim); font-style: italic; } .kyc-today-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } @media (max-width: 980px) { .kyc-today-grid { grid-template-columns: 1fr; } } .kyc-today-col-title { font-family: var(--font-sans); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.10em; color: var(--text-dim); margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .kyc-today-list { list-style: none; padding: 0; margin: 0; } .kyc-today-row { padding: 8px 0; border-bottom: 1px dashed rgba(0,0,0,0.05); } .kyc-today-row:last-child { border-bottom: none; } .kyc-today-link { display: grid; grid-template-columns: 1fr auto; grid-auto-flow: row; row-gap: 2px; text-decoration: none; color: var(--text); font-size: 13px; } .kyc-today-row.is-alert .kyc-today-link { color: var(--danger, #C0392B); } .kyc-today-row.is-alert .kyc-today-code { font-weight: 700; } .kyc-today-code { font-family: var(--font-mono, ui-monospace, monospace); } .kyc-today-warehouse { font-size: 11.5px; color: var(--text-dim); grid-column: 1 / 2; } .kyc-today-days, .kyc-today-usd { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; color: var(--text-dim); text-align: right; grid-column: 2 / 3; } .kyc-today-row.is-alert .kyc-today-days { color: var(--danger, #C0392B); font-weight: 700; } .kyc-today-list-docs .kyc-today-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .kyc-today-doc-name { font-size: 13px; } .kyc-today-doc-count { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; color: var(--text-dim); } .kyc-today-empty { font-size: 12.5px; padding: 8px 0; } /* Charts row. */ .kyc-charts-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; } @media (max-width: 980px) { .kyc-charts-row { grid-template-columns: 1fr; } } .kyc-chart-card { min-height: 320px; } .kyc-velocity-canvas-wrap { position: relative; height: 240px; } /* Aging bars — pure HTML, width-driven. */ .kyc-aging-bars { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; } .kyc-aging-bar { display: flex; flex-direction: column; gap: 6px; } .kyc-aging-bar-fill { height: 14px; border-radius: 7px; background: rgba(168, 92, 58, 0.55); transition: width 320ms cubic-bezier(0.4, 0.0, 0.2, 1); } .kyc-aging-bar-0-7 .kyc-aging-bar-fill { background: rgba(79, 122, 74, 0.55); } .kyc-aging-bar-8-15 .kyc-aging-bar-fill { background: rgba(168, 132, 58, 0.55); } .kyc-aging-bar-16-30 .kyc-aging-bar-fill { background: rgba(168, 92, 58, 0.65); } .kyc-aging-bar-30\+ .kyc-aging-bar-fill { background: rgba(192, 57, 43, 0.70); } .kyc-aging-bar-meta { display: flex; gap: 10px; align-items: baseline; font-size: 12px; } .kyc-aging-bar-count { font-family: var(--font-mono, ui-monospace, monospace); font-weight: 700; font-size: 13px; color: var(--text); min-width: 28px; text-align: right; } .kyc-aging-bar-label { color: var(--text-dim); flex: 1; } .kyc-aging-bar-usd { font-family: var(--font-mono, ui-monospace, monospace); color: var(--text-dim); } /* Document bottleneck — horizontal bars. */ .kyc-bottleneck-list { list-style: none; padding: 0; margin: 8px 0 0; } .kyc-bottleneck-row { display: grid; grid-template-columns: minmax(180px, 32%) 1fr 40px; gap: 12px; align-items: center; padding: 8px 0; font-size: 13px; } .kyc-bottleneck-name { color: var(--text); } .kyc-bottleneck-bar { display: block; height: 12px; background: rgba(168, 92, 58, 0.08); border-radius: 6px; overflow: hidden; } .kyc-bottleneck-bar-fill { display: block; height: 100%; background: rgba(168, 92, 58, 0.65); border-radius: 6px; transition: width 320ms cubic-bezier(0.4, 0.0, 0.2, 1); } .kyc-bottleneck-count { font-family: var(--font-mono, ui-monospace, monospace); font-weight: 700; text-align: right; } /* Per-warehouse leaderboard + hot list cell-alert variant. */ .kyc-cell-alert { color: var(--danger, #C0392B); font-weight: 700; } .kyc-warehouse-table { margin-top: 8px; } .kyc-hotlist-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; } @media (max-width: 980px) { .kyc-hotlist-row { grid-template-columns: 1fr; } } /* ---- KPI strip — editorial typography ---- */ .kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 32px; } /* Force the row to exactly 4 evenly-distributed cards regardless of minmax() reflow — used by the dashboard KPI rows. */ .kpi-strip.kpi-strip-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* V28.18 — 3-card variant used by the CPM KYC Tracker top strip. */ .kpi-strip.kpi-strip-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Variant for the CPM Pending Approval page (two large headline cards). */ .kpi-strip.kpi-strip-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpi { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px 22px 22px; } .kpi-label { color: var(--text-dim); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.10em; font-weight: 600; margin-bottom: 10px; } .kpi-value { color: var(--text); font-family: var(--font-serif); font-size: 32px; font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; } /* Net Physical Exposure is negative when CPM holds more physical ore value than has been advanced — a healthy state. Render in success green so the dashboard signals overcoverage rather than alarm. */ .kpi-value.kpi-value-overcovered { color: #4F7A4A; } /* V28.38 — financial KPI row now uses the same white card as the top row per operator request. The old warm-grey distinction is dropped so both dashboard rows read as a single uniform strip. */ /* New centred stack layout: number → label → explanation. The legacy left-aligned `.kpi` (without `.kpi-stack`) is kept for any older surface that still uses it. */ .kpi.kpi-stack { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; padding: 22px 18px 20px; } .kpi.kpi-stack .kpi-value { margin: 0 0 8px; font-size: 30px; } .kpi.kpi-stack .kpi-label { margin: 0 0 4px; } .kpi.kpi-stack .kpi-explain { color: var(--text-muted); font-size: 11.5px; font-style: italic; letter-spacing: 0.01em; line-height: 1.35; } .kpi-unit { font-family: var(--font-serif); font-weight: 500; font-size: 0.62em; color: var(--text-dim); margin-left: 2px; } .muted { color: var(--text-muted); } .dim { color: var(--text-dim); } /* ---- KV (definition list) used on lot detail & invoice ---- */ .kv { display: grid; grid-template-columns: 140px 1fr; gap: 6px 14px; margin: 0; font-size: 13.5px; } .kv dt { color: var(--text-dim); font-weight: 500; } .kv dd { margin: 0; color: var(--text); } /* ---- Forms — compact inputs ---- */ details { margin-top: 6px; } details summary { outline: none; cursor: pointer; color: var(--text-dim); font-weight: 500; } details summary:hover { color: var(--text); } details[open] summary { margin-bottom: 8px; } .data-table input[type="text"], .data-table input[type="url"], .data-table input[type="number"], .data-table select { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 4px; padding: 4px 8px; font-size: 12px; color: var(--text); font-family: var(--font-sans); } .data-table input:focus, .data-table select:focus { outline: none; border-color: var(--accent); } textarea, input[type="text"], input[type="url"], input[type="number"], input[type="email"], input[type="password"], input[type="date"], input[type="datetime-local"], select { font-family: var(--font-sans); } /* ---- Lot detail layout safety ---- */ @media (max-width: 1400px) { .grid-3 { grid-template-columns: 1fr 1fr; } } @media (max-width: 1000px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } } /* ============================================================= PENDING APPROVAL — same structural design, light-theme palette. All styles scoped under .pa-page so app defaults are untouched. ============================================================= */ .pa-body { background: var(--bg); } .pa-page { /* Re-map the scoped tokens to the global light palette. */ --pa-accent: #A85C3A; --pa-accent-soft: #B26D4C; --pa-green: #4F7A4A; --pa-blue: #6B6B66; /* no real blue; warm grey for "in motion" */ --pa-orange: #B0822B; --pa-red: #9C3A2E; --pa-purple: #6B6B66; /* drop the purple; muted to warm grey */ --pa-surface: #FFFFFF; --pa-surface-2: #FAF5E8; --pa-surface-3: #F0E9D6; --pa-line: #E1DBC9; --pa-line-strong: #CFC7B1; --pa-text: #1F1F1F; --pa-text-dim: #6B6B66; --pa-text-mute: #8B8B82; /* V28.719 - Roboto Mono has a plain oval zero on every platform; system Windows monos (Consolas, Cascadia) both default to slashed. */ --pa-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, "Liberation Mono", monospace; --pa-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --pa-display: "Source Serif 4", "Source Serif Pro", Georgia, serif; font-family: var(--pa-sans); color: var(--pa-text); } .pa-page * { box-sizing: border-box; } .pa-page a { color: inherit; } /* ── Hero ───────────────────────────────────────────────────── */ .pa-hero { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: flex-end; padding: 4px 0 28px; margin-bottom: 28px; border-bottom: 1px solid var(--pa-line); } .pa-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--pa-accent); font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; } .pa-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pa-accent); } .pa-title { font-family: var(--pa-display); font-weight: 600; font-size: clamp(36px, 4.2vw, 52px); line-height: 1.06; letter-spacing: -0.02em; margin: 14px 0 10px; color: var(--pa-text); } .pa-title em { font-style: italic; color: var(--pa-accent); font-weight: 600; } .pa-title-counter { display: inline-block; margin-left: 14px; font-family: var(--pa-mono); font-size: 0.34em; font-weight: 500; color: var(--pa-text-mute); vertical-align: middle; padding: 4px 10px; border: 1px solid var(--pa-line); border-radius: 999px; letter-spacing: 0.04em; } .pa-subtitle { margin: 0; color: var(--pa-text-dim); font-size: 13.5px; letter-spacing: 0.005em; } .pa-hero-actions { display: flex; gap: 10px; align-items: flex-end; } /* ── Buttons ────────────────────────────────────────────────── */ .pa-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: var(--radius); font-family: var(--pa-sans); font-size: 13px; font-weight: 500; cursor: pointer; border: 1px solid var(--pa-line); background: var(--pa-surface); color: var(--pa-text); text-decoration: none; transition: background 120ms ease, border-color 120ms ease; } .pa-btn:hover { background: var(--bg-elev-2); border-color: var(--border-strong); text-decoration: none; } /* V28.445 - keyboard accessibility. Visible focus ring on every .pa-btn (and friends) so keyboard-only users can see what's focused. :focus-visible only triggers on keyboard nav, NOT on mouse click, so the ring doesn't add visual noise for mouse users. Terracotta tint matches the brand palette. */ .pa-btn:focus-visible, .wb-kebab-btn:focus-visible, .pill-nav-item:focus-visible { outline: 2px solid var(--accent, #B26340); outline-offset: 2px; } /* The --pa-* tokens are scoped under .pa-page (see line ~850). On pages that don't use the pa-page wrapper (notably /ore-lots/) the fallbacks to the global --accent / --accent-soft pair keep the terracotta button visible — without them background paints to UA default + white text reads as transparent. */ .pa-btn-primary { background: var(--pa-accent, var(--accent)); color: #ffffff; border-color: var(--pa-accent, var(--accent)); padding: 12px 24px; font-weight: 600; } .pa-btn-primary:hover { background: var(--pa-accent-soft, var(--accent-soft)); border-color: var(--pa-accent-soft, var(--accent-soft)); } /* V1 — muted state for primary buttons whose underlying action is gated (e.g. "+ Create Invoice" until at least one Available row is checked). The button already toggles the `disabled` attribute via JS; this rule gives it an obvious warm-grey paint so the user understands the button is inactive at a glance, instead of a barely-faded terracotta. Hover cursor flips to not-allowed too. */ .pa-btn-primary:disabled, .pa-btn-primary[disabled] { background: color-mix(in srgb, var(--text-dim) 35%, var(--bg-elev-2)); border-color: color-mix(in srgb, var(--text-dim) 40%, var(--border)); color: color-mix(in srgb, var(--text-dim) 75%, transparent); cursor: not-allowed; opacity: 0.85; } .pa-btn-primary:disabled:hover, .pa-btn-primary[disabled]:hover { background: color-mix(in srgb, var(--text-dim) 35%, var(--bg-elev-2)); border-color: color-mix(in srgb, var(--text-dim) 40%, var(--border)); } /* `` would otherwise inherit the global `a { color: var(--accent) }` rule on hover via the link transition; pin the link variant's color to white so the post-WB ACTION-cell links read the same as button variants. */ a.pa-btn-primary, a.pa-btn-primary:hover { color: #ffffff; text-decoration: none; } .pa-btn-ghost { background: transparent; border-color: var(--pa-line); } .pa-btn-ghost:hover { background: var(--bg-elev-2); } /* Export menu — disclosure ────────────────────────────────── */ .pa-export { position: relative; } .pa-export > summary { list-style: none; cursor: pointer; } .pa-export > summary::-webkit-details-marker { display: none; } .pa-export-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 300px; background: var(--pa-surface); border: 1px solid var(--pa-line); border-radius: var(--radius-lg); padding: 6px; z-index: 20; } .pa-export-item { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 6px; color: var(--pa-text); text-decoration: none; } .pa-export-item:hover { background: var(--bg-elev-2); text-decoration: none; } .pa-export-item strong { display: block; font-size: 13px; font-weight: 600; } .pa-export-item small { display: block; color: var(--pa-text-mute); font-size: 11px; margin-top: 2px; } .pa-export-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 6px; font-family: var(--pa-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; border: 1px solid var(--pa-line); } .pa-icon-pdf { background: rgba(156, 58, 46, 0.06); color: var(--pa-red); border-color: rgba(156, 58, 46, 0.25); } .pa-icon-xls { background: rgba(79, 122, 74, 0.06); color: var(--pa-green); border-color: rgba(79, 122, 74, 0.25); } /* ── KPI strip ──────────────────────────────────────────────── */ .pa-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 28px; } .pa-kpi { position: relative; padding: 22px 24px 22px; background: var(--pa-surface); border: 1px solid var(--pa-line); border-radius: var(--radius-lg); overflow: hidden; } .pa-kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; } .pa-kpi[data-tone="neutral"]::before { background: var(--pa-accent); } .pa-kpi[data-tone="ready"]::before { background: var(--pa-green); } .pa-kpi[data-tone="late"]::before { background: var(--pa-orange); } .pa-kpi[data-tone="progress"]::before { background: var(--pa-blue); } .pa-kpi[data-tone="age"]::before { background: var(--border-strong); } .pa-kpi-label { color: var(--pa-text-dim); font-size: 10.5px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; } .pa-kpi-value { font-family: var(--pa-display); font-weight: 600; font-size: 40px; line-height: 1.05; color: var(--pa-text); margin: 10px 0 6px; letter-spacing: -0.025em; } .pa-kpi-unit { font-size: 0.55em; color: var(--pa-text-dim); margin-left: 3px; font-weight: 500; } .pa-kpi-meta { font-size: 11px; color: var(--pa-text-mute); font-family: var(--pa-mono); } /* ── Filter shell ───────────────────────────────────────────── */ .pa-filters { background: var(--pa-surface); border: 1px solid var(--pa-line); border-radius: var(--radius-lg); padding: 18px 20px 16px; margin-bottom: 20px; position: sticky; top: 0; z-index: 10; } .pa-filters-row { display: grid; grid-template-columns: minmax(220px, 360px) 1fr auto auto; gap: 12px; align-items: center; } .pa-search { position: relative; display: flex; align-items: center; background: var(--bg-elev-2); border: 1px solid var(--pa-line); border-radius: var(--radius); padding: 0 14px; height: 40px; color: var(--pa-text-dim); transition: border-color 120ms ease, box-shadow 120ms ease; } .pa-search:focus-within { border-color: var(--pa-accent); color: var(--pa-text); background: var(--pa-surface); box-shadow: 0 0 0 3px var(--accent-bg); } .pa-search svg { flex: none; } .pa-search input { flex: 1; background: transparent; border: none; outline: none; color: var(--pa-text); font-family: var(--pa-sans); font-size: 13.5px; padding: 0 10px; } .pa-search input::placeholder { color: var(--pa-text-mute); } /* Approval chips ──────────────────────────────────────────── */ .pa-quick-chips { display: flex; flex-wrap: wrap; gap: 6px; } .pa-chip { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: var(--radius); border: 1px solid var(--pa-line); background: var(--pa-surface); color: var(--pa-text-dim); font-size: 12px; font-weight: 500; cursor: pointer; user-select: none; transition: border-color 120ms ease, color 120ms ease, background 120ms ease; } .pa-chip input { position: absolute; opacity: 0; pointer-events: none; } .pa-chip:hover { color: var(--pa-text); border-color: var(--border-strong); } .pa-chip-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .55; } .pa-chip.is-on { color: var(--pa-text); border-color: currentColor; background: var(--bg-elev-2); } .pa-chip-ready_for_approval.is-on { color: var(--pa-green); border-color: var(--pa-green); background: rgba(79, 122, 74, 0.06); } .pa-chip-kyc_in_progress_late.is-on { color: var(--pa-orange); border-color: var(--pa-orange); background: rgba(176, 130, 43, 0.06); } .pa-chip-kyc_in_progress.is-on { color: var(--pa-accent); border-color: var(--pa-accent); background: var(--accent-bg); } .pa-chip-awaiting_cpm_review.is-on { color: var(--pa-text-dim); border-color: var(--border-strong); background: var(--bg-elev-2); } .pa-chip.is-on .pa-chip-dot { opacity: 1; } /* Segmented status pair ───────────────────────────────────── */ .pa-segmented { display: inline-flex; background: var(--bg-elev-2); border: 1px solid var(--pa-line); border-radius: var(--radius); padding: 2px; height: 32px; } .pa-seg { position: relative; display: inline-flex; align-items: center; padding: 0 14px; font-size: 12px; font-weight: 500; border-radius: 4px; color: var(--pa-text-mute); cursor: pointer; height: 100%; } .pa-seg input { position: absolute; opacity: 0; pointer-events: none; } .pa-seg:hover { color: var(--pa-text); } .pa-seg.is-on { background: var(--pa-surface); color: var(--pa-accent); } /* Advanced disclosure ─────────────────────────────────────── */ .pa-advanced { margin-top: 14px; border-top: 1px solid var(--pa-line); padding-top: 14px; } .pa-advanced summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12px; font-weight: 500; color: var(--pa-text-dim); user-select: none; } .pa-advanced summary::-webkit-details-marker { display: none; } .pa-advanced[open] summary svg { transform: rotate(180deg); } .pa-advanced summary svg { transition: transform 160ms ease; } .pa-advanced-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin-top: 14px; align-items: end; } .pa-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .pa-field-wide { grid-column: span 2; } .pa-field-label { font-size: 10px; font-weight: 600; letter-spacing: 0.10em; color: var(--pa-text-mute); text-transform: uppercase; } .pa-multi { background: var(--pa-surface); color: var(--pa-text); border: 1px solid var(--pa-line); border-radius: var(--radius); padding: 6px; font-family: var(--pa-sans); font-size: 12px; } .pa-multi:focus { outline: none; border-color: var(--pa-accent); } .pa-hint { color: var(--pa-text-mute); font-size: 10px; } .pa-range { display: flex; align-items: center; gap: 6px; } .pa-range input { flex: 1; min-width: 0; background: var(--pa-surface); color: var(--pa-text); border: 1px solid var(--pa-line); border-radius: var(--radius); padding: 8px 10px; font-family: var(--pa-mono); font-size: 12px; height: 34px; } .pa-range input:focus { outline: none; border-color: var(--pa-accent); box-shadow: 0 0 0 3px var(--accent-bg); } .pa-range-sep { color: var(--pa-text-mute); font-family: var(--pa-mono); font-size: 12px; } .pa-advanced-actions { grid-column: span 4; display: flex; gap: 10px; justify-content: flex-end; padding-top: 6px; border-top: 1px solid var(--pa-line); margin-top: 8px; } /* Active chips strip ──────────────────────────────────────── */ .pa-active-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--pa-line); } .pa-active-label { color: var(--pa-text-mute); font-size: 10.5px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; margin-right: 4px; } .pa-active-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 10px; border-radius: 4px; background: var(--accent-bg); color: var(--pa-accent); border: 1px solid rgba(168, 92, 58, 0.30); font-size: 12px; font-weight: 500; } .pa-chip-x { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; color: var(--pa-accent); background: transparent; font-size: 13px; font-weight: 600; line-height: 1; text-decoration: none; } .pa-chip-x:hover { background: rgba(156, 58, 46, 0.10); color: var(--pa-red); text-decoration: none; } .pa-clear { color: var(--pa-text-mute); font-size: 12px; margin-left: 6px; } .pa-clear:hover { color: var(--pa-red); } /* ── Table ──────────────────────────────────────────────────── */ .pa-table-wrap { background: var(--pa-surface); border: 1px solid var(--pa-line); border-radius: var(--radius-lg); overflow: hidden; } .pa-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; } .pa-table thead th { /* V28.236 - canonical terracotta. */ position: sticky; top: 0; background: var(--table-head-bg); color: var(--table-head-ink); padding: 14px 18px; text-align: left; font-size: 10px; font-weight: 700; letter-spacing: 0.7px; text-transform: uppercase; border-bottom: 1px solid var(--table-head-border); white-space: nowrap; } .pa-table thead th.pa-num { text-align: left; } .pa-table thead th.pa-kyc-th { text-align: left; width: 120px; } .pa-table thead th.pa-action-th { width: 60px; } .pa-sort { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; } .pa-sort:hover { color: var(--pa-text); text-decoration: none; } .pa-sort.is-active { color: var(--pa-accent); } .pa-arrow { font-size: 9px; opacity: 0.9; } .pa-row td { padding: 14px 18px; border-bottom: 1px solid var(--pa-line); vertical-align: middle; color: var(--pa-text); } .pa-row:hover td { background: var(--bg-elev-2); } .pa-row:last-child td { border-bottom: none; } .pa-num { text-align: left; } .pa-mono { font-family: var(--pa-mono); font-variant-numeric: tabular-nums; font-size: 12.5px; } .pa-lot-link { font-family: var(--pa-mono); font-weight: 600; color: var(--pa-accent); text-decoration: none; font-size: 13px; } .pa-lot-link:hover { color: var(--pa-accent-soft); text-decoration: underline; } .pa-lot-meta { color: var(--pa-text-mute); font-size: 11px; margin-top: 2px; font-family: var(--pa-mono); } /* KYC ring ─────────────────────────────────────────────────── */ .pa-kyc-cell { width: 110px; } .pa-ring { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 90px; } .pa-ring-svg { width: 48px; height: 48px; } .pa-ring-svg circle { transition: stroke-dasharray 300ms ease, stroke-dashoffset 300ms ease; } .pa-ring-text { position: absolute; inset: 0; top: 12px; display: flex; align-items: baseline; justify-content: center; font-family: var(--pa-mono); pointer-events: none; } .pa-ring-text strong { font-size: 13px; color: var(--pa-text); font-weight: 700; } .pa-ring-text span { font-size: 9px; color: var(--pa-text-mute); } .pa-ring-legend { display: inline-flex; align-items: center; gap: 4px; font-family: var(--pa-mono); font-size: 9px; color: var(--pa-text-mute); } .pa-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; margin-right: 1px; margin-left: 3px; } .pa-dot-green { background: var(--pa-green); } .pa-dot-blue { background: var(--pa-accent); } /* "uploaded" → terracotta accent */ .pa-dot-red { background: var(--pa-red); } /* Readiness pill ──────────────────────────────────────────── */ .pa-readiness { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; padding: 4px 10px; border-radius: 999px; border: 1px solid currentColor; text-transform: uppercase; } .pa-readiness-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .pa-readiness-ready_for_approval { color: var(--pa-green); background: rgba(79, 122, 74, 0.06); } .pa-readiness-kyc_in_progress_late { color: var(--pa-orange); background: rgba(176, 130, 43, 0.06); } .pa-readiness-kyc_in_progress { color: var(--pa-accent); background: var(--accent-bg); } .pa-readiness-awaiting_cpm_review { color: var(--pa-text-dim); background: var(--bg-elev-2); } /* Row action ──────────────────────────────────────────────── */ .pa-action-cell { text-align: left; padding-right: 18px; width: 60px; } .pa-row-action { display: inline-flex; align-items: center; gap: 4px; color: var(--pa-text-dim); font-size: 12px; font-weight: 500; padding: 6px 10px; border-radius: 4px; text-decoration: none; opacity: 0.7; transition: opacity 100ms ease, color 100ms ease, background 100ms ease; } .pa-row:hover .pa-row-action { opacity: 1; color: var(--pa-accent); } .pa-row-action:hover { background: var(--accent-bg); text-decoration: none; } /* Empty state ─────────────────────────────────────────────── */ .pa-empty td { padding: 0; } .pa-empty-inner { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 72px 20px; color: var(--pa-text-dim); } .pa-empty-inner h3 { margin: 0; font-family: var(--pa-display); font-weight: 600; color: var(--pa-text); } .pa-empty-inner p { margin: 0; color: var(--pa-text-mute); font-size: 13px; } /* Footer ─────────────────────────────────────────────────── */ .pa-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding: 4px 4px; color: var(--pa-text-mute); font-size: 12px; font-family: var(--pa-mono); } .pa-footer strong { color: var(--pa-text-dim); font-weight: 600; } .pa-footer-exports { display: flex; gap: 16px; } .pa-footer-link { color: var(--pa-text-dim); text-decoration: none; } .pa-footer-link:hover { color: var(--pa-accent); } /* Responsive ─────────────────────────────────────────────── */ @media (max-width: 1280px) { .pa-kpis { grid-template-columns: repeat(3, 1fr); } .pa-filters-row { grid-template-columns: 1fr; } .pa-quick-chips { justify-content: flex-start; } .pa-advanced-grid { grid-template-columns: repeat(2, 1fr); } .pa-advanced-actions { grid-column: span 2; } } @media (max-width: 720px) { .pa-kpis { grid-template-columns: repeat(2, 1fr); } .pa-table thead { display: none; } .pa-table, .pa-table tbody, .pa-table tr, .pa-table td { display: block; width: 100%; } .pa-row td { border-bottom: none; padding: 6px 14px; } .pa-row { border-bottom: 1px solid var(--pa-line); padding: 10px 0; } } /* ────────────────────────────────────────────────────────── Users page — title row + full-width table + action stack ──────────────────────────────────────────────────────── */ .users-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; } .users-head .page-title { margin: 0; } .users-table-card { padding: 0; overflow: hidden; } .users-table tbody td { padding: 12px 16px; vertical-align: middle; } .users-table thead th { padding: 12px 16px; } .users-table .users-actions-th { width: 180px; text-align: left; } .users-table .users-actions-cell { text-align: left; } .users-actions-stack { display: inline-flex; gap: 8px; justify-content: center; } .users-actions-stack .pa-row-action { min-width: 64px; text-align: center; font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 4px; opacity: 1; } .users-actions-stack .pa-row-action.pa-row-edit { color: var(--accent); background: transparent; border: 1px solid var(--border-strong); } .users-actions-stack .pa-row-action.pa-row-edit:hover { background: var(--accent-bg); border-color: var(--accent); } /* V28.255 - role section row inside the Users table. Replaces the per-row 'Role' column - users are now grouped under their role, with a soft tinted band carrying the role accent dot + label + count. */ .users-role-row { background: rgba(168, 92, 58, 0.05); } .users-role-th { text-align: left; padding: 11px 18px; font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--text); border-bottom: 1px solid var(--border, #E1DBC9); border-top: 1px solid rgba(168, 92, 58, 0.10); } .users-role-row:first-child .users-role-th { border-top: 0; } .users-role-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--perm-accent, var(--accent, #A85C3A)); vertical-align: 1px; margin-right: 9px; } .users-role-name { color: var(--text); } .users-role-count { display: inline-block; margin-left: 8px; padding: 1px 9px; border-radius: 999px; background: rgba(168, 92, 58, 0.10); color: var(--accent, #A85C3A); font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; } /* ────────────────────────────────────────────────────────── Toasts — top of content stack ──────────────────────────────────────────────────────── */ .toasts { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; } .toast { padding: 10px 14px; border-radius: var(--radius); font-size: 13px; font-weight: 500; border: 1px solid var(--border); background: var(--bg-elev); color: var(--text); box-shadow: 0 1px 0 rgba(0,0,0,0.02); } .toast-success { background: rgba(79, 122, 74, 0.08); border-color: rgba(79, 122, 74, 0.32); color: var(--green); } .toast-error { background: rgba(168, 92, 58, 0.08); border-color: rgba(168, 92, 58, 0.32); color: var(--accent); } /* ────────────────────────────────────────────────────────── Row-action variants on the Pending Approval queue ──────────────────────────────────────────────────────── */ .pa-actions-stack { display: inline-flex; flex-direction: column; align-items: stretch; gap: 4px; } .pa-inline-form { margin: 0; } .pa-row-action.pa-row-approve, .pa-row-action.pa-row-reject, .pa-row-action.pa-row-dispatch { font-weight: 600; border: 1px solid transparent; cursor: pointer; font-family: inherit; background: transparent; text-align: center; width: 100%; opacity: 1; } .pa-row-action.pa-row-approve { color: var(--green); border-color: rgba(79, 122, 74, 0.32); background: rgba(79, 122, 74, 0.06); } .pa-row-action.pa-row-approve:hover { background: rgba(79, 122, 74, 0.14); color: var(--green); } .pa-row-action.pa-row-reject { color: var(--accent); border-color: rgba(168, 92, 58, 0.32); background: transparent; } .pa-row-action.pa-row-reject:hover { background: var(--accent-bg); color: var(--accent); } .pa-row-action.pa-row-dispatch { color: var(--bg-elev); background: var(--accent); border-color: var(--accent); } .pa-row-action.pa-row-dispatch:hover { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--bg-elev); } .pa-row-action.pa-row-action-ghost { opacity: 0.7; } .pa-row:hover .pa-row-action.pa-row-action-ghost { opacity: 1; } /* ────────────────────────────────────────────────────────── Modal — shared across new-batch, reject, confirm-dispatch ──────────────────────────────────────────────────────── */ body.pa-modal-open { overflow: hidden; } .pa-modal[hidden] { display: none; } .pa-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-start; justify-content: center; padding: 48px 24px; overflow-y: auto; overscroll-behavior: contain; } .pa-modal-scrim { position: fixed; inset: 0; background: rgba(31, 31, 31, 0.45); backdrop-filter: blur(2px); } .pa-modal-panel { position: relative; width: 100%; max-width: 480px; margin: auto 0; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 24px 60px rgba(31, 31, 31, 0.18); padding: 28px 30px 24px; font-family: var(--font-sans); } .pa-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .pa-modal-title { margin: 0; font-family: var(--font-serif); font-size: 26px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); } .pa-modal-title em { color: var(--accent); font-style: italic; font-weight: 600; } .pa-modal-close { background: transparent; border: none; font-size: 22px; line-height: 1; color: var(--text-dim); cursor: pointer; padding: 4px 8px; border-radius: 4px; } .pa-modal-close:hover { color: var(--text); background: var(--bg-elev-2); } .pa-modal-form { display: flex; flex-direction: column; gap: 16px; } .pa-modal-lede { margin: 0; color: var(--text-dim); font-size: 13px; } .pa-modal-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-dim); min-width: 0; } /* V28.167 — same fix as V28.147 applied to .pa-modal-field. Without this, setting field.hidden = true in JS (V28.158's Envío hide + V28.166's Warehouse hide for ad-hoc areas) leaves the field visibly on screen because `display: flex` beats `[hidden] { display: none }` on specificity. */ .pa-modal-field[hidden] { display: none; } .pa-modal-field > span { font-weight: 600; color: var(--text-dim); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; } .pa-modal-field > input, .pa-modal-field > select, .pa-modal-field > textarea { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 9px 12px; font-size: 14px; font-family: var(--font-sans); color: var(--text); /* Honor the parent grid/flex cell width — without these the input's intrinsic ~20-char width pushes grid rows past the modal edge and trips horizontal-scroll on tight layouts like the blend create modal's miner-batch rows. */ width: 100%; min-width: 0; box-sizing: border-box; } .pa-modal-field > textarea { font-family: var(--font-sans); resize: vertical; min-height: 72px; } .pa-modal-field > input:focus, .pa-modal-field > select:focus, .pa-modal-field > textarea:focus { /* V29.081 - soft sand focus ring (was the harsh terracotta --accent ring). */ outline: none; border-color: #D3B088; box-shadow: 0 0 0 3px rgba(211, 176, 136, 0.25); } .pa-modal-help { font-size: 11.5px; color: var(--text-muted); line-height: 1.35; margin-top: 2px; } /* M1 — per-lot Enter Sampling / Make Offer modals share a stacked read-only block that summarises the lot's context (lot id, warehouse, weighbridge tonnage) above the editable inputs. Uses the same warm neutral surface as .pa-modal-summary but stacks rows vertically. */ .cpm-modal-readonly { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; margin: 10px 0 14px; border: 1px dashed var(--border-strong); border-radius: 8px; background: var(--bg-elev-2); } .cpm-modal-readonly-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; } .cpm-modal-readonly-label { color: var(--text-dim); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; } .cpm-modal-readonly-value { color: var(--text); font-variant-numeric: tabular-nums; } /* V2 — Populate KYC 1 modal needs more horizontal room than the narrow M1 modals (sampling / make-offer) because it renders a per-MB tile row that's 17 × 36px = 612px wide for MINER/REINFO. .pa-modal--wide widens the panel; the tile row + readonly block scroll horizontally only when the viewport actually can't fit. */ .pa-modal.pa-modal--wide .pa-modal-panel { max-width: 900px; width: 92vw; } .cpm-kyc1-mb-grid { display: flex; flex-direction: column; gap: 12px; margin: 14px 0 6px; max-height: 50vh; overflow-y: auto; } .cpm-kyc1-mb-row { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-elev); } .cpm-kyc1-mb-head { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; font-weight: 600; } .cpm-kyc1-mb-code { color: var(--text); } .cpm-kyc1-mb-miner { color: var(--text-dim); font-weight: 500; } .cpm-kyc1-select-all { margin-left: auto; font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--accent); background: transparent; color: var(--accent); cursor: pointer; transition: background 100ms ease, color 100ms ease; } .cpm-kyc1-select-all:hover:not(:disabled) { background: var(--accent); color: #fff; } .cpm-kyc1-select-all:disabled { opacity: 0.55; cursor: progress; } /* V28.24 — per-row "Select all" button for inline KYC tracker tables. Same accent-pill look as .cpm-kyc1-select-all but smaller, sized for a 17-column table row. */ .kyc-row-select-all { font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--accent); background: transparent; color: var(--accent); cursor: pointer; white-space: nowrap; transition: background 100ms ease, color 100ms ease; } .kyc-row-select-all:hover:not(:disabled) { background: var(--accent); color: #fff; } .kyc-row-select-all:disabled { opacity: 0.55; cursor: progress; } .lib4-tracker-mb-bulk-cell { text-align: right; padding-right: 8px !important; } .lib4-tracker-mb-bulk-th { width: 80px; } /* V28.19 — master "Mark all received" bar at the top of the modal, above the per-batch grid. One click ticks every pending tile across every miner-batch. Disabled (and dimmed) when nothing is pending. */ .cpm-kyc1-bulk-bar { display: flex; justify-content: flex-end; margin: 6px 0 12px; } .cpm-kyc1-select-all-all { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--accent); background: var(--accent); color: #fff; font-family: var(--font-sans); font-size: 13px; font-weight: 600; letter-spacing: 0.005em; cursor: pointer; transition: background 100ms ease, border-color 100ms ease, opacity 100ms ease; } .cpm-kyc1-select-all-all:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent-soft); } .cpm-kyc1-select-all-all:disabled, .cpm-kyc1-select-all-all.is-empty { background: transparent; color: var(--text-muted); border-color: var(--border-strong); cursor: default; opacity: 0.7; } .cpm-kyc1-select-all-all-icon { font-weight: 700; font-size: 12px; line-height: 1; } .cpm-kyc1-select-all-all-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; padding: 0 7px; height: 20px; border-radius: 999px; background: rgba(255,255,255,0.22); font-family: var(--font-mono); font-size: 11px; font-weight: 700; } .cpm-kyc1-select-all-all:disabled .cpm-kyc1-select-all-all-count, .cpm-kyc1-select-all-all.is-empty .cpm-kyc1-select-all-all-count { background: var(--bg-elev-2); color: var(--text-muted); } /* V28.31 — Inline KYC 2 approval card inside the Pre-Invoice KYC modal. */ .cpm-kyc2-inline { margin-top: 18px; padding: 14px 16px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--bg-elev-1); } .cpm-kyc2-inline-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; } .cpm-kyc2-inline-title { font-weight: 700; font-size: 14px; letter-spacing: 0.02em; } .cpm-kyc2-inline-status { font-size: 12px; color: var(--text-muted); } .cpm-kyc2-inline-help { margin: 4px 0 12px; font-size: 12.5px; line-height: 1.45; } .cpm-kyc2-inline-btn { width: 100%; } .cpm-kyc2-inline-btn.is-loading { opacity: 0.7; cursor: progress; } .cpm-kyc1-tile-row { display: flex; flex-wrap: wrap; gap: 4px; } .cpm-kyc1-tile { display: inline-flex; align-items: center; justify-content: center; width: 36px; min-width: 36px; height: 28px; border-radius: 5px; border: 1px solid transparent; cursor: pointer; padding: 0; background: #EBC9C0; /* dusty rose pending, matches V1 dashboard tone */ transition: background-color 100ms ease, border-color 100ms ease; } .cpm-kyc1-tile .cpm-kyc1-tile-code { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: #6B3F36; } .cpm-kyc1-tile.is-received { background: color-mix(in srgb, var(--green, #4F7A4A) 18%, transparent); } .cpm-kyc1-tile.is-received .cpm-kyc1-tile-code { color: var(--green, #4F7A4A); } .cpm-kyc1-tile:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); } .cpm-kyc1-tile:disabled { opacity: 0.5; cursor: progress; } .pa-modal-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .pa-modal-row[hidden] { display: none; } /* V28.913 - "Metallurgical Tested Recovery" as its own clearly-optional block: the recovery value + a Real/Forecasted type selector on one row, with a hint. */ .cpm-sampling-recovery { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px 12px; margin: 4px 0 0; } .cpm-sampling-recovery-legend { padding: 0 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); } .cpm-sampling-recovery-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; } /* The recovery input + type select sit outside a .pa-modal-field wrapper, so match them to the standard themed modal fields — otherwise they fall back to the browser's default black-bordered controls, off-theme (V28.918). */ .cpm-sampling-recovery-row input, .cpm-sampling-recovery-type { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 9px 12px; font-size: 14px; font-family: var(--font-sans); color: var(--text); width: 100%; min-width: 0; box-sizing: border-box; } .cpm-sampling-recovery-type { min-width: 150px; } .cpm-sampling-recovery-row input:focus, .cpm-sampling-recovery-type:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); } .cpm-sampling-recovery-hint { margin: 8px 0 0; font-size: 11.5px; } .pa-modal-summary { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 14px; border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--bg-elev-2); } .pa-modal-summary-label { color: var(--text-dim); font-size: 11px; text-transform: uppercase; letter-spacing: 0.10em; font-weight: 600; } .pa-modal-summary-value { color: var(--accent); font-family: var(--font-serif); font-size: 24px; font-weight: 600; letter-spacing: -0.01em; } .pa-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; } /* V28.580 - dead .pa-btn.pa-btn-danger block (terracotta-accented, misnamed) removed; the correct red-danger definition lives further down the file at ~13831 and wins on cascade regardless. */ /* V28.29 — Edit Lot modal footer: Delete batch sits bottom-LEFT and the Cancel/Save pair stays bottom-RIGHT. */ .edit-lot-actions { justify-content: space-between !important; align-items: center; } .edit-lot-actions-right { display: flex; gap: 10px; } .edit-lot-delete-btn { background: var(--red); border: 1px solid var(--red); color: #fff; } .edit-lot-delete-btn:hover { filter: brightness(1.06); } /* V28.29 — Edit Lot inputs that can't be edited yet at this lot's stage. */ .pa-modal input.is-stage-locked, .pa-modal select.is-stage-locked { background: var(--bg) !important; color: var(--text-muted); border-color: var(--border) !important; cursor: not-allowed; } @media (max-width: 540px) { .pa-modal-panel { padding: 22px 18px 18px; } .pa-modal-row { grid-template-columns: 1fr; } } /* ────────────────────────────────────────────────────────── Libertad4 — simplified two-section layout for Pending Approval ──────────────────────────────────────────────────────── */ .lib4-section { margin-bottom: 36px; } .lib4-section + .lib4-section { margin-top: 32px; } .lib4-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .lib4-section-title { margin: 6px 0 4px; font-family: var(--font-serif); font-size: 30px; font-weight: 600; letter-spacing: -0.015em; color: var(--text); line-height: 1.1; } .lib4-section-title em { color: var(--accent); font-style: italic; font-weight: 600; } .lib4-section-sub { margin: 0; color: var(--text-dim); font-size: 13px; } .lib4-table-card { padding: 0; overflow: hidden; } .lib4-table { font-size: 13.5px; table-layout: fixed; } .lib4-table thead th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); padding: 14px 16px; } .lib4-table tbody td { padding: 14px 16px; vertical-align: middle; } .lib4-num { text-align: left; font-variant-numeric: tabular-nums; } .lib4-kyc-th, .lib4-action-th { width: 1%; white-space: nowrap; } /* All columns left-aligned per global alignment rule — including status pills, KYC dots, action buttons. */ .lib4-table .lib4-status-th, .lib4-table .lib4-status-cell { text-align: left; } .lib4-table .lib4-kyc-th, .lib4-table .lib4-kyc-cell { text-align: left; } .lib4-tracker-table .lib4-status-th, .lib4-tracker-table .lib4-status-cell { text-align: left; } .lib4-row[data-href] { cursor: pointer; } .lib4-row:hover td { background: var(--bg-elev-2); } .lib4-lot-link { color: var(--accent); font-weight: 600; text-decoration: none; } .lib4-lot-link:hover { text-decoration: underline; } .lib4-batch-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; } .lib4-status-pending { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--accent); background: var(--accent-bg); border: 1px solid rgba(168, 92, 58, 0.28); } .lib4-action-cell { text-align: left; } .lib4-dispatch-btn { padding: 8px 16px; font-size: 12.5px; } /* "Negotiation — generate invoice." section: ACTION header sits over a single centered Generate Invoice button per row. Centering both the text and the contents keeps the vertical alignment exact (header text axis == button axis). */ .lib4-gen-action-th { text-align: left; } .lib4-gen-action-cell { text-align: left; } /* KYC three-state pill (received-only, no breakdown — that lives on detail). */ .lib4-kyc-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; border: 1px solid transparent; margin-right: 6px; } .lib4-kyc-dot.is-full { background: #4F7A4A; border-color: rgba(79, 122, 74, 0.55); } .lib4-kyc-dot.is-partial { background: #B0822B; border-color: rgba(176, 130, 43, 0.55); } .lib4-kyc-dot.is-none { background: transparent; border-color: var(--border-strong); } .lib4-kyc-meta { font-size: 11px; font-variant-numeric: tabular-nums; } .lib4-empty td { padding: 0; } .lib4-empty-inner { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 48px 20px; color: var(--text-dim); } .lib4-empty-inner h3 { margin: 0; font-family: var(--font-serif); font-weight: 600; color: var(--text); font-size: 18px; } .lib4-empty-inner p { margin: 0; color: var(--text-muted); font-size: 13px; } @media (max-width: 720px) { .lib4-section-head { flex-direction: column; align-items: stretch; } } /* ────────────────────────────────────────────────────────── CPM lot detail — batch header + 4 accordion sections ──────────────────────────────────────────────────────── */ .cpm-detail { max-width: 1100px; } /* V28.892 - redesigned Ore Tracker lot detail: full-width, centered, themed to match the CPM Lot detail (cl-* kit reused via cpm_lot.css). */ .cpm-detail--themed { max-width: 1440px; margin: 0 auto; } .cpm-detail--themed .cpm-detail-tiles { margin: 4px 0 18px; } /* The Ore Tracker journey has 7 stages (Arrived … Compensated) — force one even row so COMPENSATED never wraps under ARRIVED. Line insets match the first/last dot centres for 7 equal columns (100/14 = 7.14%). Scoped to the themed wrapper so it beats the shared .cl-journey (6-col) rule regardless of stylesheet load order. */ .cpm-detail--themed .cpm-detail-journey { margin: 0 0 22px; grid-template-columns: repeat(7, 1fr); } .cpm-detail--themed .cpm-detail-journey::before { left: 7.14%; right: 7.14%; } @media (max-width: 900px) { .cpm-detail--themed .cpm-detail-journey { grid-template-columns: repeat(3, 1fr); } } .cpm-detail--themed .cpm-section { box-shadow: 0 1px 3px rgba(80, 50, 25, 0.05); } /* Lot details is now a standard collapsible .cpm-section — locked Edit pill greys out to mirror the old whole-lot Edit's disabled state, and mono values (truck plate, blend code) keep their monospace treatment. */ .cpm-detail--themed .cpm-section-kebab.is-locked { color: var(--text-dim, #7a6a55); background: rgba(120, 110, 90, 0.10); border-color: rgba(120, 110, 90, 0.28); cursor: not-allowed; } .cpm-detail--themed .cpm-kv dd.mono { font-family: var(--font-mono, ui-monospace, monospace); } .cpm-journey-by { display: block; margin-top: 2px; font-size: 10px; color: var(--text-dim, #7a6a55); } /* Per-box "Edit" pill (was the ⋮ kebab; opens the per-stage Master Edit). */ .cpm-detail--themed .cpm-section-kebab { display: inline-flex; align-items: center; gap: 4px; width: auto; height: auto; padding: 5px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; color: var(--accent, #B26340); background: rgba(178, 99, 64, 0.08); border: 1px solid rgba(178, 99, 64, 0.30); cursor: pointer; } .cpm-detail--themed .cpm-section-kebab:hover { background: rgba(178, 99, 64, 0.16); } /* Whole-lot Edit on the Identity card. */ .cpm-inline-edit-btn { display: inline-flex; align-items: center; gap: 4px; padding: 6px 14px; border-radius: 999px; font-family: var(--font-sans); font-size: 12px; font-weight: 700; color: var(--accent, #B26340); background: rgba(178, 99, 64, 0.08); border: 1px solid rgba(178, 99, 64, 0.32); cursor: pointer; transition: background 120ms ease; } .cpm-inline-edit-btn:hover { background: rgba(178, 99, 64, 0.18); } .cpm-inline-edit-btn.is-locked { color: var(--text-dim, #7a6a55); background: rgba(120, 110, 90, 0.10); border-color: rgba(120, 110, 90, 0.28); cursor: not-allowed; } /* Audit log panel. */ .cpm-status-neutral { color: var(--text-dim, #7a6a55); } .cpm-status-neutral .cpm-section-dot { background: rgba(120, 110, 90, 0.45); } .cpm-audit-scroll { max-height: 420px; overflow: auto; } .cpm-audit-table { width: 100%; border-collapse: collapse; font-size: 12.5px; } .cpm-audit-table th { text-align: left; padding: 8px 12px; position: sticky; top: 0; background: rgba(178, 99, 64, 0.06); color: var(--text-dim, #7a6a55); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; } .cpm-audit-table td { padding: 8px 12px; border-top: 1px solid rgba(178, 99, 64, 0.10); vertical-align: top; } .cpm-audit-when { white-space: nowrap; color: var(--text-dim, #7a6a55); } .cpm-audit-who { font-weight: 600; white-space: nowrap; } .cpm-audit-action { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--accent, #8B4A2B); white-space: nowrap; } .cpm-audit-detail { max-width: 520px; } .cpm-audit-row--undo td { background: rgba(185, 74, 50, 0.05); } .cpm-detail-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 6px 0 16px; } .cpm-detail-id { display: flex; align-items: center; gap: 12px; } .cpm-detail-id .lot-code-primary { font-size: 22px; } .cpm-detail-id .lot-code-secondary { font-size: 12px; } .cpm-detail-card { padding: 22px 26px; margin-bottom: 22px; } .cpm-detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 28px; margin: 0; } .cpm-detail-grid > div { display: flex; flex-direction: column; gap: 4px; } .cpm-detail-grid dt { font-size: 10.5px; color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: 0.10em; margin: 0; } .cpm-detail-grid dd { margin: 0; font-family: var(--font-serif); font-size: 17px; font-weight: 500; color: var(--text); letter-spacing: -0.005em; } @media (max-width: 820px) { .cpm-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cpm-detail-head { flex-direction: column; align-items: stretch; } } /* Accordion sections */ .cpm-section { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 14px; overflow: hidden; } .cpm-section[open] { box-shadow: 0 1px 0 rgba(0,0,0,0.02); } .cpm-section-head { display: flex; align-items: center; gap: 16px; padding: 16px 22px; cursor: pointer; list-style: none; user-select: none; } .cpm-section-head::-webkit-details-marker { display: none; } .cpm-section-title { font-family: var(--font-serif); font-size: 18px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; flex: 1; } .cpm-section-summary-meta { font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; margin-right: 4px; } .cpm-section-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--text-dim); } .cpm-section-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); } .cpm-status-complete { color: var(--green); } .cpm-status-complete .cpm-section-dot { background: var(--green); } .cpm-status-in_progress { color: var(--orange); } .cpm-status-in_progress .cpm-section-dot { background: var(--orange); } .cpm-status-pending { color: var(--text-muted); } .cpm-status-pending .cpm-section-dot { background: var(--border-strong); } .cpm-status-skipped { color: var(--text-muted); } .cpm-status-skipped .cpm-section-dot { background: var(--border-strong); } .cpm-strike { text-decoration: line-through; } .cpm-section-chev { font-size: 14px; color: var(--text-dim); transition: transform 160ms ease; } .cpm-section[open] .cpm-section-chev { transform: rotate(180deg); } /* V28.20 — Master Ore Edit kebab. Lives in the section summary, sits to the left of the chevron. Opens the matching master-edit modal without toggling the accordion (stopPropagation in the inline onclick). */ .cpm-section-kebab { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: 0 4px 0 8px; padding: 0; font-size: 18px; line-height: 1; color: var(--text-dim); background: transparent; border: 1px solid transparent; border-radius: 6px; cursor: pointer; transition: background 100ms ease, border-color 100ms ease, color 100ms ease; } .cpm-section-kebab:hover { background: var(--bg-elev-2); border-color: var(--border); color: var(--accent); } .cpm-section-kebab:focus-visible { outline: none; border-color: var(--accent); color: var(--accent); } /* V28.43 — inline edit affordance for Truck.shipment_number on the lot detail page. The pencil button mirrors .cpm-section-kebab styling but smaller; pops the shipment-edit modal. */ .cpm-shipment-cell { display: inline-flex; align-items: center; gap: 6px; } .cpm-shipment-value { font-variant-numeric: tabular-nums; } .cpm-shipment-edit-btn { background: transparent; border: 1px solid transparent; color: var(--text-muted); font-size: 12px; padding: 1px 6px; border-radius: 4px; cursor: pointer; line-height: 1; } .cpm-shipment-edit-btn:hover { color: var(--ao-terracotta, var(--accent)); border-color: rgba(168, 92, 58, 0.4); } .cpm-shipment-edit-btn:focus-visible { outline: 2px solid var(--ao-terracotta, var(--accent)); outline-offset: 2px; } /* Section header needs flex layout so the kebab sits naturally to the left of the chevron (instead of being pushed off-canvas by the status pill's flex-grow). */ .cpm-master-edit-intro { margin: 0 0 14px; font-size: 12.5px; } /* Master Ore Edit modals — precise two-column grid. Both columns share an equal track; every input is the same width and height; and each label reserves a consistent two-line area so a wrapped label (e.g. NEGOTIATED SILVER GRADE (OZ/TC)) never drops its input below the sibling column. Display formatting only — no change to fields, validation or save. */ .cpm-master-edit-modal .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 22px; align-items: start; } .cpm-master-edit-modal .form-field { gap: 6px; } .cpm-master-edit-modal .form-field span { display: flex; align-items: flex-end; min-height: 2.5em; /* room for a two-line label so inputs stay aligned */ line-height: 1.2; } .cpm-master-edit-modal .form-field input { box-sizing: border-box; width: 100%; height: 44px; /* identical height for date + number inputs alike */ } .cpm-section-body { padding: 4px 22px 22px; border-top: 1px solid var(--border); } /* Definition lists inside a section body */ .cpm-kv { display: grid; grid-template-columns: 180px 1fr; gap: 6px 16px; margin: 6px 0 14px; font-size: 14px; } .cpm-kv dt { color: var(--text-dim); font-weight: 500; } .cpm-kv dd { margin: 0; color: var(--text); } .cpm-section-form { margin-top: 12px; } .cpm-section-form .form-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; } .cpm-section-form .grid-2, .cpm-section-form .grid-3 { display: grid; gap: 14px; } .cpm-section-form .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cpm-section-form .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cpm-section-form input, .cpm-section-form select, .cpm-section-form textarea { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px; font-size: 14px; font-family: var(--font-sans); color: var(--text); } .cpm-section-form input:focus, .cpm-section-form select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); } @media (max-width: 820px) { .cpm-section-form .grid-2, .cpm-section-form .grid-3 { grid-template-columns: 1fr; } } /* V28.34 — Offer helper-prompt box inside the Submit Offer accordion. */ .offer-helper { margin: 14px 0 16px; padding: 14px 16px; border: 1px solid var(--border-strong, var(--border)); border-radius: 10px; background: var(--bg-elev, var(--bg-elev-1)); } .offer-helper-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; } .offer-helper-title { font-weight: 700; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); } .offer-helper-status { font-size: 12px; color: var(--text-muted); font-style: italic; } .offer-helper-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 700px) { .offer-helper-grid { grid-template-columns: 1fr; } } .offer-helper-card { padding: 12px 14px; border-radius: 8px; background: var(--bg-elev-2, rgba(0,0,0,0.04)); border: 1px solid var(--border, transparent); display: flex; flex-direction: column; gap: 4px; } .offer-helper-card-label { font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); } .offer-helper-card-value { font-family: var(--font-mono, ui-monospace, monospace); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); } .offer-helper-card-value.is-negative { color: var(--danger, #c0392b); } /* V28.53 — inline Env# badge rendered next to the lot code on lists + kanban cards. Small, grey, tabular-numeric so it scans as a secondary identifier without competing with the primary code. */ /* V28.716 - Persistent "Dirimencia" indicator. Flipped True the first time a lot enters awaiting_3rd_party_sample; stays visible for the rest of the lot's lifecycle so downstream reviewers know the lot went through third-party sampling. Subtle red pill (professional, not aggressive) — dark red text on a soft red wash, thin border. Same shape on kanban cards and in the lot detail Negotiation section. */ .dirimencia-tag { display: inline-block; padding: 2px 8px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #8B2E1F; background: rgba(178, 45, 30, 0.10); border: 1px solid rgba(178, 45, 30, 0.24); border-radius: 999px; vertical-align: 1px; white-space: nowrap; margin-left: 6px; } .ol-kanban-card-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; } .ol-kanban-card-tags .dirimencia-tag { margin-left: 0; } /* V28.819 - "MET. TEST OUTSTANDING" pill. Same compact rounded shape as the Dirimencia pill; the app's "outstanding" orange (pale semi-transparent bg, dark-orange text + border) so it reads as a pending action, not an error. */ .met-outstanding-tag { display: inline-block; padding: 2px 8px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #9a6a00; background: rgba(202, 138, 4, 0.12); border: 1px solid rgba(202, 138, 4, 0.30); border-radius: 999px; vertical-align: 1px; white-space: nowrap; } .ol-kanban-card-tags .met-outstanding-tag { margin-left: 0; } /* V28.890 - persistent "Low Margin" pill. Same compact rounded shape as the Dirimencia / MET pills. V28.891 - burnt-orange (financial caution); a redder orange than MET's amber-gold so the two stay distinguishable side by side. */ .low-margin-tag { display: inline-block; padding: 2px 8px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #b4470f; background: rgba(200, 90, 25, 0.12); border: 1px solid rgba(200, 90, 25, 0.34); border-radius: 999px; vertical-align: 1px; white-space: nowrap; margin-left: 6px; } .ol-kanban-card-tags .low-margin-tag { margin-left: 0; } .env-inline-badge { display: inline-block; margin-left: 4px; padding: 0 6px; font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: var(--text-dim, #6B6B66); background: rgba(107, 107, 102, 0.10); border-radius: 3px; vertical-align: 2px; font-variant-numeric: tabular-nums; text-transform: none; } /* V28.79 — pre-weighbridge multi-batch blend header. Operators were getting confused by the libertad-side blend code (a nonsense string that doesn't map to anything they recognise). Replace it with a BLEND pill + Envío badge + small pills of the constituent lot codes underneath. Falls back to CPM-number rendering as soon as the truck reaches the weighbridge. */ .blend-type-pill { display: inline-block; padding: 1px 9px; font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: #8A5C3A; background: rgba(168, 92, 58, 0.14); border: 1px solid rgba(168, 92, 58, 0.28); border-radius: 10px; text-transform: uppercase; vertical-align: 2px; } .lot-code-blend-header { display: inline-flex; align-items: center; gap: 6px; } .lot-code-pills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .lot-code-pill { display: inline-block; padding: 1px 7px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--text-dim, #6B6B66); background: rgba(107, 107, 102, 0.08); border: 1px solid rgba(107, 107, 102, 0.18); border-radius: 9px; font-variant-numeric: tabular-nums; } /* V28.104 — In Transit kanban card top-left now shows the truck plate as a pill (was: BLEND label or batch code). Batch codes drop into a pill row beneath — consistent for single-batch and multi-batch blends. Plate pill uses a slightly darker stone tint to read as "the vehicle" rather than blending with the batch pills below. */ .truck-plate-pill { display: inline-block; padding: 1px 9px; font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: #4A4641; background: rgba(74, 70, 65, 0.10); border: 1px solid rgba(74, 70, 65, 0.22); border-radius: 10px; font-variant-numeric: tabular-nums; vertical-align: 1px; } .ol-kanban-card-batch-row { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 2px; } .offer-helper-gold-line { margin: 6px 0 0; font-size: 12px; font-style: italic; } .offer-helper-gold-line[hidden] { display: none; } .offer-helper-gold-line span { font-family: var(--font-mono, ui-monospace, monospace); font-style: normal; color: var(--ao-terracotta, var(--accent)); font-weight: 600; } /* V28.50 — low-margin gating affordances. */ .offer-helper-low-margin-banner { margin: 10px 0 6px; padding: 10px 14px; border: 1px solid rgba(212, 138, 41, 0.55); background: rgba(212, 138, 41, 0.10); color: #8a5a14; border-radius: 8px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em; } .pa-btn.btn-warning, .pa-btn-warning { background: #D48A29; border-color: #B5731E; color: #FFF; } .pa-btn.btn-warning:hover, .pa-btn-warning:hover { background: #C57F25; } /* V28.74 — green variant. Used by the Set Grade button on In Transit cards so the Manager affordance reads visually distinct from the default terracotta primary buttons. Forest green from the existing role-card palette (matches CPM Commercial accent). */ .pa-btn.btn-success, .pa-btn-success { background: #4F7A4A; border-color: #3F6239; color: #FFF; } .pa-btn.btn-success:hover, .pa-btn-success:hover { background: #43683E; } .lib4-blend-badge.lib4-blend-badge-pending { background: rgba(212, 138, 41, 0.18); color: #8a5a14; border-color: rgba(212, 138, 41, 0.55); font-weight: 700; } .offer-helper-card-foot { font-size: 11px; color: var(--text-muted); line-height: 1.4; } .offer-helper-paid-empty { margin: 8px 0 0; font-size: 12px; } .cpm-reset-form { margin-top: 14px; } .cpm-reset-btn { color: var(--accent); border-color: var(--accent); } .cpm-reset-btn:hover { background: var(--accent-bg); color: var(--accent); border-color: var(--accent); } /* KYC click-to-toggle grid */ .cpm-kyc-note { font-size: 12px; margin: 4px 0 14px; } .cpm-kyc-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; } .cpm-kyc-toggle { margin: 0; } /* Every tile is the same height regardless of label length — the longest label ("Consulta de REINFO IMPRESO fecha y hora") wraps to ~4 lines at the typical column width. Label flexes to fill the top, icon stays anchored at the bottom centre. */ .cpm-kyc-col { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 122px; padding: 10px 6px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elev); cursor: pointer; font-family: inherit; text-align: center; } .cpm-kyc-col:hover { background: var(--bg-elev-2); border-color: var(--border-strong); } .cpm-kyc-col .cpm-kyc-label { font-size: 10.5px; font-weight: 600; color: var(--text-dim); letter-spacing: 0.02em; line-height: 1.2; word-break: break-word; flex: 1 1 auto; display: flex; align-items: center; justify-content: center; width: 100%; } .cpm-kyc-col .cpm-kyc-icon { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 12px; font-weight: 700; flex: 0 0 auto; } .cpm-kyc-col.is-received .cpm-kyc-icon { color: #ffffff; background: var(--green); border: 1px solid var(--green); } .cpm-kyc-col.is-pending .cpm-kyc-icon { color: var(--text-muted); background: var(--bg-elev-2); border: 1px solid var(--border-strong); } @media (max-width: 720px) { .cpm-kyc-row { grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)); } } /* ────────────────────────────────────────────────────────── Libertad4 — Ore & KYC Tracker ──────────────────────────────────────────────────────── */ /* V28.93 — was max-width: 1280px which corseted the KYC tracker page on wide monitors regardless of V28.92's content-level cap removal. Operator confirmed the KYC kanban + table should fill the viewport on big screens. */ .lib4-tracker { max-width: none; } .lib4-tracker-head { margin-bottom: 22px; } .lib4-tracker-title { margin: 6px 0 4px; font-family: var(--font-serif); font-size: 30px; font-weight: 600; letter-spacing: -0.015em; color: var(--text); line-height: 1.1; } .lib4-tracker-title em { color: var(--accent); font-style: italic; font-weight: 600; } .lib4-tracker-sub { margin: 0; color: var(--text-dim); font-size: 13.5px; } /* V28.849 - libertad-4 KYC tracker two-pool layout. */ .lib4-pools { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 8px 0 4px; } @media (max-width: 1000px) { .lib4-pools { grid-template-columns: 1fr; } } .lib4-pool-title { margin: 0 0 2px; font-size: 15px; font-weight: 700; color: var(--text); } .lib4-pool-sub { margin: 0 0 8px; color: var(--text-dim); font-size: 12.5px; } .lib4-kyc-complete { color: #2E5A24; font-weight: 600; font-size: 12.5px; } .lib4-kyc-out-count { color: #8a3120; font-weight: 600; font-size: 12px; margin-right: 6px; white-space: nowrap; } .lib4-kyc-out-list { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; } .lib4-kyc-out-chip { font-size: 10.5px; padding: 1px 6px; border-radius: 999px; background: rgba(180, 65, 45, 0.10); border: 1px solid rgba(180, 65, 45, 0.28); color: #8a3120; white-space: nowrap; } /* Status filter tabs */ .lib4-tracker-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--border); margin: 12px 0 18px; } .lib4-tracker-tab { color: var(--text-dim); text-decoration: none; padding: 10px 14px 11px; border-bottom: 2px solid transparent; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; transition: color 120ms ease, background 120ms ease, border-color 120ms ease; } .lib4-tracker-tab:hover { color: var(--text); background: var(--bg-elev-2); text-decoration: none; } .lib4-tracker-tab.is-on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; } .lib4-tracker-tab-count { display: inline-block; font-size: 11px; font-weight: 600; color: var(--text-muted); background: var(--bg-elev-2); border-radius: 999px; padding: 1px 8px; font-variant-numeric: tabular-nums; } .lib4-tracker-tab.is-on .lib4-tracker-tab-count { color: var(--accent); background: var(--accent-bg); } /* Per-bucket tint when the tab is active — gives each stage its own colour. */ .lib4-tracker-tab.bucket-in_transit.is-on { color: var(--stage-in_transit); border-bottom-color: var(--stage-in_transit); } .lib4-tracker-tab.bucket-at_cpm.is-on { color: var(--stage-at_weighbridge_sampling); border-bottom-color: var(--stage-at_weighbridge_sampling); } .lib4-tracker-tab.bucket-offer.is-on { color: var(--stage-awaiting_supplier_acceptance); border-bottom-color: var(--stage-awaiting_supplier_acceptance); } .lib4-tracker-tab.bucket-accepted.is-on { color: var(--stage-invoiced_awaiting_tranche_1); border-bottom-color: var(--stage-invoiced_awaiting_tranche_1); } .lib4-tracker-tab.bucket-invoiced_pending_kyc.is-on { color: var(--stage-invoiced_awaiting_tranche_1); border-bottom-color: var(--stage-invoiced_awaiting_tranche_1); } .lib4-tracker-tab.bucket-invoiced_pending_final.is-on { color: var(--stage-invoiced_awaiting_tranche_2); border-bottom-color: var(--stage-invoiced_awaiting_tranche_2); } .lib4-tracker-tab.bucket-invoiced_kyc_complete.is-on { color: var(--stage-invoiced_kyc_complete); border-bottom-color: var(--stage-invoiced_kyc_complete); } .lib4-tracker-tab.bucket-in_transit.is-on .lib4-tracker-tab-count { color: var(--stage-in_transit); background: color-mix(in srgb, var(--stage-in_transit) 12%, transparent); } .lib4-tracker-tab.bucket-at_cpm.is-on .lib4-tracker-tab-count { color: var(--stage-at_weighbridge_sampling); background: color-mix(in srgb, var(--stage-at_weighbridge_sampling) 12%, transparent); } .lib4-tracker-tab.bucket-offer.is-on .lib4-tracker-tab-count { color: var(--stage-awaiting_supplier_acceptance); background: color-mix(in srgb, var(--stage-awaiting_supplier_acceptance) 12%, transparent); } .lib4-tracker-tab.bucket-accepted.is-on .lib4-tracker-tab-count { color: var(--stage-invoiced_awaiting_tranche_1); background: color-mix(in srgb, var(--stage-invoiced_awaiting_tranche_1) 12%, transparent); } .lib4-tracker-tab.bucket-invoiced_pending_kyc.is-on .lib4-tracker-tab-count { color: var(--stage-invoiced_awaiting_tranche_1); background: color-mix(in srgb, var(--stage-invoiced_awaiting_tranche_1) 12%, transparent); } .lib4-tracker-tab.bucket-invoiced_pending_final.is-on .lib4-tracker-tab-count { color: var(--stage-invoiced_awaiting_tranche_2); background: color-mix(in srgb, var(--stage-invoiced_awaiting_tranche_2) 12%, transparent); } .lib4-tracker-tab.bucket-invoiced_kyc_complete.is-on .lib4-tracker-tab-count { color: var(--stage-invoiced_kyc_complete); background: color-mix(in srgb, var(--stage-invoiced_kyc_complete) 12%, transparent); } /* Tracker table cells */ .lib4-tracker-card { padding: 0; overflow: hidden; } .lib4-tracker-table { font-size: 13.5px; } .lib4-tracker-table thead th { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); padding: 14px 16px; } .lib4-tracker-table tbody td { padding: 14px 16px; vertical-align: middle; } .lib4-tracker-table .lib4-row { cursor: pointer; } .lib4-tracker-table .lib4-row:hover td { background: var(--bg-elev-2); } /* KYC dot (3-state) inside the tracker */ .lib4-tracker-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; margin-right: 8px; } .lib4-tracker-dot.is-red { background: var(--red); } .lib4-tracker-dot.is-amber { background: var(--orange); } .lib4-tracker-dot.is-green { background: var(--green); } .lib4-tracker-kyc-text { font-size: 12.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; } /* Status pill per bucket */ .lib4-tracker-pill { display: inline-block; padding: 4px 10px; border-radius: 4px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid; white-space: nowrap; } .lib4-tracker-pill.bucket-in_transit { color: var(--stage-in_transit); background: color-mix(in srgb, var(--stage-in_transit) 10%, transparent); border-color: color-mix(in srgb, var(--stage-in_transit) 28%, transparent); } .lib4-tracker-pill.bucket-at_cpm { color: var(--stage-at_weighbridge_sampling); background: color-mix(in srgb, var(--stage-at_weighbridge_sampling) 10%, transparent); border-color: color-mix(in srgb, var(--stage-at_weighbridge_sampling) 28%, transparent); } .lib4-tracker-pill.bucket-offer { color: var(--stage-awaiting_supplier_acceptance); background: color-mix(in srgb, var(--stage-awaiting_supplier_acceptance) 10%, transparent); border-color: color-mix(in srgb, var(--stage-awaiting_supplier_acceptance) 28%, transparent); } .lib4-tracker-pill.bucket-accepted { color: var(--stage-invoiced_awaiting_tranche_1); background: color-mix(in srgb, var(--stage-invoiced_awaiting_tranche_1) 10%, transparent); border-color: color-mix(in srgb, var(--stage-invoiced_awaiting_tranche_1) 28%, transparent); } .lib4-tracker-pill.bucket-invoiced_pending_kyc { color: var(--stage-invoiced_awaiting_tranche_1); background: color-mix(in srgb, var(--stage-invoiced_awaiting_tranche_1) 10%, transparent); border-color: color-mix(in srgb, var(--stage-invoiced_awaiting_tranche_1) 28%, transparent); } .lib4-tracker-pill.bucket-invoiced_pending_final { color: var(--stage-invoiced_awaiting_tranche_2); background: color-mix(in srgb, var(--stage-invoiced_awaiting_tranche_2) 10%, transparent); border-color: color-mix(in srgb, var(--stage-invoiced_awaiting_tranche_2) 28%, transparent); } .lib4-tracker-pill.bucket-invoiced_kyc_complete { color: var(--stage-invoiced_kyc_complete); background: color-mix(in srgb, var(--stage-invoiced_kyc_complete) 10%, transparent); border-color: color-mix(in srgb, var(--stage-invoiced_kyc_complete) 28%, transparent); } .lib4-tracker-empty td { padding: 0; border-bottom: none; } .lib4-tracker-empty-inner { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 56px 18px; color: var(--text-dim); } .lib4-tracker-empty-inner strong { font-family: var(--font-serif); font-weight: 600; font-size: 16px; color: var(--text); } /* Submit Invoice card on the libertad4 lot detail page */ .lib4-invoice-card { margin: 24px 0; } .lib4-invoice-message { color: var(--text-dim); font-size: 13.5px; margin: 0 0 14px; } .lib4-invoice-message strong { color: var(--accent); font-family: var(--font-serif); font-size: 16px; } .lib4-invoice-form .form-field { max-width: 320px; } .lib4-invoice-actions { margin-top: 14px; } /* ────────────────────────────────────────────────────────── Libertad4 — ore lot detail (slim two-section layout) ──────────────────────────────────────────────────────── */ .lib4-detail { max-width: 1200px; } .lib4-detail-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; } /* Matches .lib4-tracker-title exactly so the two page headings read as a single visual treatment across the warehouse portal. */ .lib4-detail-title { margin: 6px 0 4px; font-family: var(--font-serif); font-size: 30px; font-weight: 600; letter-spacing: -0.015em; color: var(--text); line-height: 1.1; } .lib4-detail-title em { color: var(--accent); font-style: italic; font-weight: 600; } .lib4-detail-supplier { font-size: 13.5px; } .lib4-summary-card { margin-bottom: 24px; } .lib4-summary-grid { display: grid; grid-template-columns: 180px 1fr; gap: 10px 24px; margin: 0; font-size: 14px; } .lib4-summary-grid dt { color: var(--text-dim); font-weight: 500; } .lib4-summary-grid dd { margin: 0; color: var(--text); } .lib4-summary-grid .mono { font-weight: 600; color: var(--accent); } .lib4-status-chip { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0.03em; color: var(--accent); background: var(--accent-bg); border: 1px solid rgba(168, 92, 58, 0.28); } .lib4-locked-notice { margin: -6px 0 18px; padding: 10px 14px; border-radius: var(--radius); background: var(--bg-elev-2); border: 1px solid var(--border); color: var(--text-dim); font-size: 13px; } .lib4-edit-form .lib4-summary-grid dd input, .lib4-edit-form .lib4-summary-grid dd select, .lib4-edit-form .lib4-summary-grid dd textarea { width: 100%; max-width: 320px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 7px 10px; font-size: 14px; font-family: var(--font-sans); color: var(--text); } .lib4-edit-form .lib4-summary-grid dd input:focus, .lib4-edit-form .lib4-summary-grid dd select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); } .lib4-inline-error { margin-top: 6px; font-size: 12px; color: var(--red); font-family: var(--font-sans); } /* Empty placeholder — the JS-driven uniqueness check renders an empty div on first paint. Without this rule the .form-error chrome (red bg/border) shows as a stray block under the field. */ .lib4-inline-error:empty { display: none; } .lib4-edit-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; } .lib4-kyc-card { padding-bottom: 22px; } .lib4-kyc-note { font-size: 12.5px; margin: -6px 0 18px; letter-spacing: 0.01em; } .lib4-kyc-row { display: grid; grid-template-columns: repeat(17, minmax(0, 1fr)); gap: 10px; align-items: stretch; } .lib4-kyc-col { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 6px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elev); cursor: default; user-select: none; text-align: center; min-width: 0; } .lib4-kyc-label { font-size: 10.5px; font-weight: 600; color: var(--text-dim); letter-spacing: 0.02em; line-height: 1.15; word-break: break-word; min-height: 26px; display: flex; align-items: center; } .lib4-kyc-icon { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 700; font-size: 14px; line-height: 1; } .lib4-kyc-icon.is-received { color: #ffffff; background: var(--green); border: 1px solid var(--green); } .lib4-kyc-icon.is-pending { color: var(--text-muted); background: var(--bg-elev-2); border: 1px solid var(--border-strong); } /* ────────────────────────────────────────────────────────── V8 — Ore Lots header, filter row, status multi-select, view toggle, and Kanban board. Replaced the legacy single-tab strip (.ol-tabs). All tones stay inside the AlphaOro warm palette — terracotta accent, parchment surfaces, warm-grey muted ink. No bright primaries. ──────────────────────────────────────────────────────── */ /* V28.580 - .ol-pageheader block removed; the canonical definition lives near line 16839 (flex-wrap:wrap + align-items:flex-start for proper header-actions layout) and it wins on cascade. The 18px margin-bottom this block used to set is now inherited from the later block's rules. */ /* KPI strip — small extra bottom gap so the filter row has air. The strip itself rides on the shared .kpi-strip / .kpi rules. */ .ol-kpi-strip { margin-bottom: 18px; } /* Filter row — multi-select dropdown, list/kanban toggle, lot count. */ .ol-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 12px; background: #fff; border: 1px solid #E6E0CF; border-radius: 12px; box-shadow: 0 1px 2px rgba(60, 50, 30, .04); margin-bottom: 14px; } .ol-filters-spacer { flex: 1; } /* V28.946 - Ore Tracker actions (Excel / PDF / Add Truck) folded into the filter banner instead of a separate top row. */ .ol-filters-actions { display: flex; align-items: center; gap: 8px; } .ol-filters-count { color: var(--text-dim); font-size: 12.5px; font-weight: 500; padding: 4px 12px; background: var(--bg-elev-2); border-radius: 999px; white-space: nowrap; font-variant-numeric: tabular-nums; } /* V28.149 — search input in the /ore-lots/ filter row. Substring matches across CPM lot # + libertad blend code + constituent miner batch codes + truck plate, client-side, instant. */ .ol-search { position: relative; display: inline-flex; align-items: center; gap: 8px; } .ol-search-input { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px; padding: 8px 28px 8px 12px; color: var(--text); font-size: 13px; /* V28.155 — bumped from 240px so the placeholder fits in both English and Spanish ('Buscar codigo CPM o BJ' is a touch wider). */ min-width: 280px; transition: border-color 120ms ease, box-shadow 120ms ease; } .ol-search-input::placeholder { color: var(--text-dim); } .ol-search-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent); } .ol-search-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); cursor: pointer; color: var(--text-dim); font-size: 16px; line-height: 1; padding: 2px 6px; border-radius: 4px; } .ol-search-clear:hover { background: var(--bg-elev-2); color: var(--text); } .ol-search-status { font-size: 11.5px; color: var(--text-dim); font-style: italic; white-space: nowrap; } /* Status multi-select — button that opens a dropdown panel of checkboxes. Auto-applies on tick. Sized to read like the screenshot's "All Statuses ▾" trigger but in AlphaOro tones. */ .ol-status-multi { position: relative; } .ol-status-multi-button { display: inline-flex; align-items: center; gap: 10px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; color: var(--text); font-size: 13px; font-weight: 500; cursor: pointer; transition: border-color 120ms ease, background 120ms ease; min-width: 180px; justify-content: space-between; } .ol-status-multi-button:hover { background: var(--bg-elev-2); border-color: var(--border-strong, #d8d2bf); } .ol-status-multi-button[aria-expanded="true"] { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); } .ol-status-multi-caret { font-size: 10px; color: var(--text-dim); } .ol-status-multi-button[aria-expanded="true"] .ol-status-multi-caret { color: var(--accent); } .ol-status-multi-panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; min-width: 280px; max-height: 360px; overflow-y: auto; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(40, 30, 18, 0.10); padding: 6px; } .ol-status-checkbox { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--text); user-select: none; } .ol-status-checkbox:hover { background: var(--bg-elev-2); } .ol-status-checkbox input[type="checkbox"] { accent-color: var(--accent); width: 14px; height: 14px; margin: 0; } .ol-status-checkbox-label { flex: 1; } .ol-status-checkbox-count { font-size: 11px; color: var(--text-dim); background: var(--bg-elev-2); border-radius: 999px; padding: 1px 8px; font-variant-numeric: tabular-nums; } .ol-status-multi-clear { display: block; padding: 8px 10px; margin-top: 4px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-dim); text-decoration: none; } .ol-status-multi-clear:hover { color: var(--accent); text-decoration: none; } /* List/Kanban view toggle — segmented control. Active button picks up the terracotta accent; inactive sits flat with muted ink. */ /* V29.053 - segmented pill toggle (matches Dashboard / Trucks). */ .ol-view-toggle { display: inline-flex; background: #ECE7D8; border-radius: 18px; padding: 3px; gap: 1px; } .ol-view-toggle-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 16px; color: #6B6353; font-size: 11.5px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: color 120ms ease, background 120ms ease; } .ol-view-toggle-btn:hover { color: #2B2620; text-decoration: none; } .ol-view-toggle-btn.is-on { color: #fff; background: #9C5B2B; } .ol-view-toggle-icon { font-size: 13px; } /* ────────────────────────────────────────────────────────── V8 Kanban — horizontal scroll, lane per status, cards inside. Per-stage colour stripe on each lane header reuses the existing --stage-* vars so the kanban reads the same as the badges elsewhere in the app. ──────────────────────────────────────────────────────── */ .ol-kanban { display: flex; gap: 12px; overflow-x: auto; padding: 4px 4px 12px; margin: 0 -4px; } .ol-kanban-lane { /* V28.84 — 240px base width fits ~7 lanes on a 1920px monitor; the kanban container keeps overflow-x scroll so wider pipelines still pan horizontally. V28.85 — grow when there are FEW lanes so a short pipeline (e.g. KYC tracker, 3 stages) stretches across the full width instead of clustering at the left. V28.90 — operator brief: 'use all the space'. Removed the 380px max so KYC's 3 lanes really fill the viewport (≈ 600px each on a 1920px monitor). Ore Lots' 8 lanes × 240px still pack the row exactly — no behaviour change on that surface. */ flex: 1 0 240px; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 10px; display: flex; flex-direction: column; max-height: 720px; } /* Ore Tracker: fill the viewport height rather than capping lanes at 720px, so a tall screen isn't left with a beige band under the board. The offset covers the topbar + page header + filter bar + the horizontal scrollbar; it is divided out of --app-zoom so it fills the REAL viewport under the global scale. If the board slightly overshoots (page gains a scrollbar) or leaves a gap, nudge the 300px offset. */ .ol-kanban--fill .ol-kanban-lane { max-height: max(360px, calc(100vh / var(--app-zoom, 1) - 300px)); } /* V28.909 - Ore Tracker lanes are a GENUINELY fixed width: no flex-grow (they don't stretch to fill), no flex-shrink (later lanes never compress), and an explicit width/min/max so every lane from In Negotiation onwards renders identically. The board scrolls horizontally instead of squeezing lanes. Scoped to the Ore Tracker board (.ol-kanban--fill, non-lean) so the KYC tracker's grow-to-fill layout and the compact lean view are untouched. 280px is the smallest uniform width that keeps all three oz/tc metrics (Tonnage / Real Grade / Commercial Grade) on one row. */ .ol-kanban--fill:not(.ol-kanban--lean) .ol-kanban-lane { flex: 0 0 280px; width: 280px; min-width: 280px; max-width: 280px; box-sizing: border-box; } .ol-kanban-lane-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 11px; border-bottom: 2px solid var(--text-dim); background: var(--bg-elev); border-top-left-radius: 10px; border-top-right-radius: 10px; /* V28.110 + V28.111 — lock the head to a fixed height so the coloured bottom-border line on every lane sits at the same y- coordinate, regardless of whether the label wraps to two lines ("AWAITING SUPPLIER ACCEPTANCE") or fits on one ("IN TRANSIT"). V28.110 used min-height: 56px which was below the natural 2-line height (~74px), so 1-line lanes still ended up shorter. Pinning to height: 78px gives the 2-line case ~6px of breathing room without forcing the 1-line case to look comically tall. */ height: 78px; flex-shrink: 0; box-sizing: border-box; } .ol-kanban-lane-label { /* V28.84 — bumped from 11.5px so the lane headers read clearly when scanning the kanban from across a desk monitor. */ font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text); } .ol-kanban-lane-count { font-size: 12px; font-weight: 600; color: var(--text-dim); background: var(--bg-elev-2); border-radius: 999px; padding: 2px 10px; font-variant-numeric: tabular-nums; } /* Per-stage lane tint — stripe at top + count badge use the existing --stage-* colour vars so kanban + badges read coherently. */ .ol-kanban-lane.stage-at_weighbridge_sampling .ol-kanban-lane-head { border-bottom-color: var(--stage-at_weighbridge_sampling); } .ol-kanban-lane.stage-in_negotiation .ol-kanban-lane-head { border-bottom-color: var(--stage-in_negotiation); } .ol-kanban-lane.stage-awaiting_supplier_acceptance .ol-kanban-lane-head { border-bottom-color: var(--stage-awaiting_supplier_acceptance); } .ol-kanban-lane.stage-accepted_awaiting_invoice .ol-kanban-lane-head { border-bottom-color: var(--stage-accepted_awaiting_invoice); } .ol-kanban-lane.stage-invoiced_awaiting_tranche_1 .ol-kanban-lane-head { border-bottom-color: var(--stage-invoiced_awaiting_tranche_1); } .ol-kanban-lane.stage-invoiced_awaiting_tranche_2 .ol-kanban-lane-head { border-bottom-color: var(--stage-invoiced_awaiting_tranche_2); } .ol-kanban-lane.stage-invoiced_kyc_complete .ol-kanban-lane-head { border-bottom-color: var(--stage-invoiced_kyc_complete); } .ol-kanban-lane.stage-at_weighbridge_sampling .ol-kanban-lane-count { color: var(--stage-at_weighbridge_sampling); background: color-mix(in srgb, var(--stage-at_weighbridge_sampling) 12%, transparent); } .ol-kanban-lane.stage-in_negotiation .ol-kanban-lane-count { color: var(--stage-in_negotiation); background: color-mix(in srgb, var(--stage-in_negotiation) 12%, transparent); } .ol-kanban-lane.stage-awaiting_supplier_acceptance .ol-kanban-lane-count { color: var(--stage-awaiting_supplier_acceptance); background: color-mix(in srgb, var(--stage-awaiting_supplier_acceptance) 12%, transparent); } .ol-kanban-lane.stage-accepted_awaiting_invoice .ol-kanban-lane-count { color: var(--stage-accepted_awaiting_invoice); background: color-mix(in srgb, var(--stage-accepted_awaiting_invoice) 12%, transparent); } .ol-kanban-lane.stage-invoiced_awaiting_tranche_1 .ol-kanban-lane-count { color: var(--stage-invoiced_awaiting_tranche_1); background: color-mix(in srgb, var(--stage-invoiced_awaiting_tranche_1) 12%, transparent); } .ol-kanban-lane.stage-invoiced_awaiting_tranche_2 .ol-kanban-lane-count { color: var(--stage-invoiced_awaiting_tranche_2); background: color-mix(in srgb, var(--stage-invoiced_awaiting_tranche_2) 12%, transparent); } .ol-kanban-lane.stage-invoiced_kyc_complete .ol-kanban-lane-count { color: var(--stage-invoiced_kyc_complete); background: color-mix(in srgb, var(--stage-invoiced_kyc_complete) 12%, transparent); } /* V29.056 - column action bar: a full-width tinted strip at the top of a column body counting a pending quick-action (grades to set / low-margin). It is a TOGGLE — click to filter the column to its matching cards; the bar fills solid and shows "Showing x of y · Clear ✕"; click again to restore. */ .olc-lanebar { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; margin: 0 0 8px; padding: 7px 11px; border: 1px solid transparent; border-radius: 8px; font-family: inherit; font-size: 11px; font-weight: 700; line-height: 1; text-align: left; cursor: pointer; transition: filter 0.12s ease, background 0.12s ease, color 0.12s ease; } .olc-lanebar-label { display: inline-flex; align-items: center; gap: 5px; min-width: 0; } .olc-lanebar-ico { font-weight: 700; flex-shrink: 0; } .olc-lanebar-n { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; margin: 0 1px; } .olc-lanebar-noun { font-weight: 700; } .olc-lanebar-showing { display: none; font-weight: 700; font-variant-numeric: tabular-nums; } .olc-lanebar-aff { flex-shrink: 0; font-weight: 700; opacity: 0.75; } .olc-lanebar.is-active .olc-lanebar-label { display: none; } .olc-lanebar.is-active .olc-lanebar-showing { display: inline; } .olc-lanebar.is-active .olc-lanebar-aff { opacity: 1; } .olc-lanebar:hover { filter: brightness(0.98); } .olc-lanebar:focus-visible { outline: 2px solid var(--stage-in_transit); outline-offset: 1px; } /* grades_to_set — green family */ .olc-lanebar--grade { color: #4F7D49; background: #E9F0E4; border-color: #C6D8BC; } .olc-lanebar--grade.is-active { color: #fff; background: #4F7D49; border-color: #4F7D49; } /* low_margin_to_release — amber family */ .olc-lanebar--lm { color: #B7791F; background: #FDF3E0; border-color: #ECCF9A; } .olc-lanebar--lm.is-active { color: #fff; background: #B7791F; border-color: #B7791F; } .ol-kanban-card.olc-filter-hidden { display: none !important; } .ol-kanban-lane-body { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 10px; } /* Bulk KYC Compliance selection — Invoiced/Awaiting KYC Compliance lane only. */ .ol-bulk-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border-bottom: 1px solid var(--border); background: var(--bg-subtle, rgba(40, 30, 18, 0.03)); } .ol-bulk-bar-all { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; cursor: pointer; white-space: nowrap; } .ol-bulk-bar-count { font-size: 12px; color: var(--text-muted, #7a6f5f); margin-left: auto; } .ol-bulk-bar-btn { white-space: nowrap; } .ol-bulk-select { display: inline-flex; align-items: center; margin-left: auto; /* cluster the selector at the top-right, left of the kebab */ cursor: pointer; } .ol-bulk-select input[disabled] { cursor: not-allowed; opacity: 0.4; } .ol-bulk-confirm-list { list-style: none; margin: 8px 0; padding: 0; max-height: 240px; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; } .ol-bulk-confirm-list li { padding: 6px 10px; font-size: 13px; border-bottom: 1px solid var(--border); } .ol-bulk-confirm-list li:last-child { border-bottom: none; } .ol-kanban-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 1px 2px rgba(40, 30, 18, 0.04); transition: box-shadow 120ms ease, border-color 120ms ease, transform 120ms ease; } .ol-kanban-card:hover { border-color: var(--accent); box-shadow: 0 4px 10px rgba(40, 30, 18, 0.08); } /* V28.30 — full-card click is now active; show the cursor + keyboard focus ring. */ .ol-kanban-card[data-href] { cursor: pointer; } .ol-kanban-card[data-href]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .ol-kanban-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .ol-kanban-card-code { font-weight: 600; font-size: 13px; color: var(--text); text-decoration: none; } .ol-kanban-card-code:hover { color: var(--accent); text-decoration: none; } /* Kanban "Lean" view (?view=lean). Slims each card to just three rows — the code + Env line, the tonnage/grade figures, and the action button — so more cards fit per column and more lanes fit across the screen. Hides the miner, the secondary code (batch / invoice / offer USD), the in-transit batch row and the date. Lanes narrow and spacing tightens; no markup or data changes. */ .ol-kanban--lean .ol-kanban-lane { flex: 1 0 200px; } .ol-kanban--lean .ol-kanban-lane-body { padding: 8px; gap: 6px; } .ol-kanban--lean .ol-kanban-card { padding: 7px 9px; gap: 5px; } .ol-kanban--lean .ol-kanban-card-meta, .ol-kanban--lean .ol-kanban-card-batch-row, .ol-kanban--lean .ol-kanban-card-date, .ol-kanban--lean .ol-kanban-card-code .lot-code-secondary { display: none; } .ol-kanban--lean .ol-kanban-action-btn { padding: 5px 10px; font-size: 12px; } /* Metrics collapse to one line: single-letter labels (T tonnage, E est, R real, C commercial — the same initials in EN and ES), the repeated grade unit hidden, values inline. Full label stays in the DOM (screen readers) and on the figure's title tooltip. */ .ol-kanban--lean .ol-kanban-card-figures { display: flex; flex-wrap: wrap; gap: 3px 11px; align-items: baseline; } .ol-kanban--lean .ol-kanban-card-figure { flex-direction: row; align-items: baseline; gap: 3px; } .ol-kanban--lean .ol-kanban-card-figure-label { display: none; } .ol-kanban--lean .ol-kanban-card-figure::before { content: attr(data-abbr); font-size: 9.5px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; } .ol-kanban--lean .ol-kanban-card-figure-value { font-size: 12px; } .ol-kanban--lean .g-unit { display: none; } /* V28.608 - subtle plate subtext when a Libertad-4 kanban card shows its batch code as primary; the truck plate becomes a small chip on the right so the operator can still read it without it competing with the batch code they actually track. */ .ol-kanban-card-plate { font-size: 11.5px; font-weight: 500; color: var(--text-dim, #7a6a55); background: rgba(90, 74, 53, 0.06); padding: 2px 6px; border-radius: 4px; letter-spacing: 0.02em; } /* V28.9 — ⋮ button in the top-right of each kanban card opens the Edit Lot modal. */ .ol-kanban-card-edit { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 1px solid transparent; background: transparent; color: var(--text-dim); border-radius: 6px; cursor: pointer; font-size: 16px; line-height: 1; font-weight: 700; } .ol-kanban-card-edit:hover, .ol-kanban-card-edit:focus-visible { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); border-color: color-mix(in srgb, var(--accent) 24%, transparent); outline: none; } /* List-view row ⋮ button — inline with the lot code, same look. */ .ol-row-code-wrap { display: inline-flex; align-items: center; gap: 6px; } .ol-row-edit { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 1px solid transparent; background: transparent; color: var(--text-dim); border-radius: 5px; cursor: pointer; font-size: 14px; line-height: 1; font-weight: 700; } .ol-row-edit:hover, .ol-row-edit:focus-visible { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); border-color: color-mix(in srgb, var(--accent) 24%, transparent); outline: none; } .cpm-detail-actions { display: flex; gap: 8px; align-items: center; } .ol-kanban-card-meta { font-size: 12px; color: var(--text-dim); } /* V28.912 - display:block so overflow:hidden + ellipsis actually truncate the miner name (an inline span never clips), which was overflowing the fixed lane width and forcing the per-column horizontal scroll. min-width:0 keeps it bounded to the card. */ .ol-kanban-card-supplier { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ol-kanban-card-figures { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; font-variant-numeric: tabular-nums; } .ol-kanban-card-figure { display: flex; flex-direction: column; gap: 2px; } .ol-kanban-card-figure-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); font-weight: 600; } .ol-kanban-card-figure-value { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; } /* V28.909 - On the Ore Tracker board, lay the metrics out as equal fixed columns (one per figure) so Tonnage | Real Grade | Commercial Grade always sit on a SINGLE row — a metric can never drop to a second line the way flex-wrap allowed. Combined with the fixed 280px lane above, each value (with white-space: nowrap) stays intact on one line. Scoped to the normal Ore Tracker view; the lean view keeps its own inline metric layout. */ .ol-kanban--fill:not(.ol-kanban--lean) .ol-kanban-card-figures { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; align-items: end; } .ol-kanban-card-date { font-size: 11.5px; color: var(--text-dim); } /* V27.2 — when multiple buttons stack inside the action area, give them breathing room. Single-button cards still render flush at margin-top:2. */ .ol-kanban-card-action { margin-top: 2px; display: flex; flex-direction: column; gap: 6px; } .ol-kanban-action-btn { width: 100%; justify-content: center; } .ol-kanban-empty { font-size: 12px; color: var(--text-dim); font-style: italic; text-align: center; padding: 18px 6px; } /* ============================================================ V28.914 — Compact Kanban card (Ore Tracker board only). Everything below is scoped under .ol-kanban--compact so the six other boards that share the .ol-kanban-card classes are left untouched. 3-row card: labels become positions, tags become chip abbreviations, the action button becomes a hover-reveal strip. Explicit hex per the approved mockup. ============================================================ */ /* Abbreviation legend above the board */ .olc-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 9px 16px; margin: 0 0 10px; background: #FAF8F0; border: 1px solid #E6E0CF; border-radius: 12px; font-size: 11px; color: #6B6353; } .olc-legend-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .olc-legend-arrow { font-weight: 700; color: var(--text); } /* Lane body — tighter gutters for the denser cards. overflow-x:hidden so a column can NEVER scroll sideways (overflow-y:auto would otherwise compute overflow-x to auto and show a horizontal scrollbar on any spill). */ .ol-kanban--compact .ol-kanban-lane-body { padding: 8px; gap: 8px; overflow-x: hidden; } /* Card shell — width-locked to the column and clips any stray overflow. flex-shrink:0 is REQUIRED: overflow:hidden makes a flex item's automatic min-height compute to 0, so in a tall column (many cards) the cards would otherwise shrink to fit the lane's max-height and collapse into slivers instead of the lane scrolling. Keep the cards their natural height. */ .ol-kanban--compact .ol-kanban-card { padding: 8px 10px; border-radius: 8px; border: 1px solid #E6E0CF; background: #fff; gap: 5px; box-shadow: 0 1px 2px rgba(60, 50, 30, .04); position: relative; width: 100%; max-width: 100%; min-width: 0; overflow: hidden; flex-shrink: 0; } /* V28.947 - "return to your card" cue: after coming back from a lot's detail view the originating card gets a soft accent-orange ring + faint tint on an overlay that eases out over ~2s and then removes itself (no lingering style). Inset ring so the lane body's overflow never clips it; pointer- events:none so it never blocks the card. */ .ol-kanban-card.olc-return-highlight::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 4; animation: olc-return-glow 2s ease-out forwards; } @keyframes olc-return-glow { 0% { box-shadow: inset 0 0 0 3px rgba(168, 92, 58, 0.60); background: rgba(168, 92, 58, 0.14); } 100% { box-shadow: inset 0 0 0 3px rgba(168, 92, 58, 0); background: rgba(168, 92, 58, 0); } } @media (prefers-reduced-motion: reduce) { /* Static highlight (no animated transition); JS removes it after ~2s. */ .ol-kanban-card.olc-return-highlight::after { animation: none; box-shadow: inset 0 0 0 3px rgba(168, 92, 58, 0.55); background: rgba(168, 92, 58, 0.12); } } .ol-kanban--compact .ol-kanban-card:hover, .ol-kanban--compact .ol-kanban-card:focus-within { border-color: #D3B088; box-shadow: 0 2px 8px rgba(120, 80, 30, .14); } /* Rows (V28.919 — header is identity-only; ALL status tags live on their own second line; metrics + money share the bottom row). */ /* Row 1: lot id / plates (left) | checkbox + kebab (right). No tags, no money. */ .ol-kanban--compact .olc-r1 { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .ol-kanban--compact .olc-idblock { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; } .ol-kanban--compact .olc-r1-right { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; } /* Row 2: all status tags in fixed order (not rendered when there are none). */ .ol-kanban--compact .olc-tagrow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; } /* Row 3: metrics (left, wraps inside) + money chip glued bottom-right. */ .ol-kanban--compact .olc-metricrow { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; } .ol-kanban--compact .olc-metricrow .olc-metrics { flex: 1 1 auto; min-width: 0; } .ol-kanban--compact .olc-metricrow .olc-chip--money { flex: 0 0 auto; align-self: flex-end; } /* Row 1 — lot id */ .ol-kanban--compact .olc-lot { font-size: 12.5px; font-weight: 700; color: var(--text); letter-spacing: .01em; font-variant-numeric: tabular-nums; white-space: nowrap; } /* Row 2 — metrics line. Wrapping row of ATOMIC segments: each segment (code / tonnage / R->C grade) is nowrap, but the row wraps between segments INSIDE the card, so nothing clips and the column never scrolls. A long BLEND code takes its own line; the grade drops below whole. */ .ol-kanban--compact .olc-metrics { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 4px; row-gap: 2px; min-width: 0; font-size: 12px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; } .ol-kanban--compact .olc-metrics .olc-seg { white-space: nowrap; } /* "·" separates adjacent segments only — never before the first segment, never after a batch chip (a chip is not an .olc-seg). */ .ol-kanban--compact .olc-metrics .olc-seg + .olc-seg::before { content: "·"; color: var(--text-dim); margin-right: 4px; } .ol-kanban--compact .olc-code { font-size: 11px; font-weight: 600; color: var(--text-dim); font-variant-numeric: tabular-nums; } .ol-kanban--compact .olc-gl { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); } .ol-kanban--compact .olc-arrow { color: var(--text-dim); font-weight: 700; margin: 0 1px; } .ol-kanban--compact .olc-unit { font-size: 10px; color: var(--text-dim); font-weight: 600; } .ol-kanban--compact .olc-star { color: #B7791F; font-weight: 700; } .ol-kanban--compact .olc-dash { color: var(--text-dim); } /* In-Transit batch lot codes — small muted chips (replace the old big boxes) */ .ol-kanban--compact .olc-lotchip { display: inline-flex; align-items: center; font-size: 9px; font-weight: 600; color: #6B6353; background: #F4F1E6; border: 1px solid #DDD6C2; border-radius: 5px; padding: 2px 5px; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; } /* Chips — shared 9px bold pill (also used in the legend) */ .ol-kanban--compact .olc-chip, .olc-legend .olc-chip { display: inline-flex; align-items: center; gap: 2px; font-size: 9px; font-weight: 700; letter-spacing: .02em; padding: 2.5px 5px; border-radius: 5px; white-space: nowrap; line-height: 1; font-variant-numeric: tabular-nums; } /* V28.926 - each tag gets a distinct, identifiable hue (was all warm brown/ amber). DIR rust · LM amber · MET purple · ⏱ days teal · $ blue. */ .olc-chip--dir { color: #B23A1E; background: #FBEDE8; border: 1px solid #E7B9A8; } .olc-chip--lm { color: #B7791F; background: #FDF3E0; border: 1px solid #ECCF9A; } .olc-chip--3p { color: #5A6F8F; background: #EEF3FA; border: 1px solid #C7D6E8; } .olc-chip--met { color: #7A4FA0; background: #F5EFFB; border: 1px solid #D4C2E6; } /* V29.053 - SV (no commercial value): khaki neutral state (not a warning). */ .olc-chip--sv { color: #55522F; background: #E3E0CD; border: 1px solid #CFCBB2; } .olc-chip--days { color: #2F7D6B; background: #E6F4F0; border: 1px solid #B4DDD2; } .olc-chip--days-na { color: var(--text-dim); background: rgba(90, 74, 53, .06); border: 1px solid rgba(90, 74, 53, .22); } .olc-chip--money { color: #1F4A66; background: linear-gradient(135deg, #C6DFEF 0%, #7AB1D6 100%); border: 1px solid #6FA0C4; box-shadow: 0 1px 2px rgba(35, 70, 100, .12); } /* V28.919 — money chip bumped for legibility now it lives bottom-right. */ .ol-kanban--compact .olc-chip--money { font-size: 10px; padding: 3px 7px; } /* Hover-reveal panel — grid-rows 0fr -> 1fr animates height smoothly and pushes the card below down without jitter. The panel now carries the secondary info (supplier + contextual date) on the left and the action button(s) on the right. */ .ol-kanban--compact .olc-action-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 150ms ease-out; } .ol-kanban--compact .ol-kanban-card:hover .olc-action-wrap, .ol-kanban--compact .ol-kanban-card:focus-within .olc-action-wrap { grid-template-rows: 1fr; } /* V29.051 - Expand-all toggle: pin every card's hover panel open across the whole board (same reveal as :hover, driven by .is-expanded on .ol-kanban). */ .ol-kanban--compact.is-expanded .olc-action-wrap { grid-template-rows: 1fr; } .ol-kanban--compact.is-expanded .olc-action { opacity: 1; } /* V29.051 - Day-outstanding card tint (days in the current column). Soft full-card washes; green <3 / yellow 3-5 / orange 5-10 / red 10+. Kept light so the card text + the DIR/LM/MET tags stay readable. Replaces the old per-column threshold styling. */ .ol-kanban--compact .ol-kanban-card.ol-age-green { background: #EEF6EC; } .ol-kanban--compact .ol-kanban-card.ol-age-yellow { background: #FBF4DD; } .ol-kanban--compact .ol-kanban-card.ol-age-orange { background: #FBE9D6; } .ol-kanban--compact .ol-kanban-card.ol-age-red { background: #F8E0DC; } .ol-kanban--compact .ol-kanban-card.ol-age-green:hover { background: #E7F1E4; } .ol-kanban--compact .ol-kanban-card.ol-age-yellow:hover { background: #F7EECF; } .ol-kanban--compact .ol-kanban-card.ol-age-orange:hover { background: #F7E1CA; } .ol-kanban--compact .ol-kanban-card.ol-age-red:hover { background: #F4D6D1; } /* V29.053 - one pill vocabulary for every toolbar filter control. */ .ol-pill { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #E6E0CF; border-radius: 8px; padding: 7px 12px; color: #6B6353; font-size: 12px; font-weight: 600; cursor: pointer; } .ol-pill:hover { border-color: #D9CFB8; } .ol-status-multi-caret, .wh-multi-caret, .ol-pill-caret { color: #98907E; font-size: 11px; font-weight: 400; } /* Sort pill: SORT micro-label · key · caret | direction arrow, + custom menu. */ .ol-sort-pill { position: relative; padding: 5px 6px 5px 12px; } .ol-sort-main { display: inline-flex; align-items: center; gap: 7px; background: none; border: none; padding: 0; cursor: pointer; color: inherit; } .ol-sort-microlabel { font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #98907E; } .ol-sort-current { font-size: 12px; font-weight: 700; color: #2B2620; } .ol-sort-divider { width: 1px; align-self: stretch; margin: -5px 0; background: #E6E0CF; } .ol-sort-dir { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; cursor: pointer; background: none; border: none; color: #9C5B2B; font-size: 13px; font-weight: 800; } .ol-sort-dir:hover { color: #7A4520; } .ol-sort-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 180px; margin: 0; padding: 5px; list-style: none; background: #fff; border: 1px solid #E6E0CF; border-radius: 10px; box-shadow: 0 6px 18px rgba(60, 50, 30, .14); } .ol-sort-item { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; border-radius: 7px; cursor: pointer; font-size: 12px; font-weight: 600; color: #2B2620; } .ol-sort-item:hover { background: #F5EFE1; } .ol-sort-item.is-active { background: #FAF3E9; color: #9C5B2B; } .ol-sort-check { color: #9C5B2B; opacity: 0; } .ol-sort-item.is-active .ol-sort-check { opacity: 1; } /* Toolbar zone hairline: filter · view · act. */ .ol-toolbar-hairline { width: 1px; align-self: stretch; min-height: 24px; background: #E6E0CF; margin: 0 2px; } /* Eye toggle (Expand): 34x34 icon button; brown-filled when details are pinned. */ .ol-eye-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; cursor: pointer; background: #fff; border: 1px solid #E6E0CF; border-radius: 8px; color: #6B6353; } .ol-eye-toggle:hover { border-color: #D9CFB8; color: #2B2620; } .ol-eye-toggle[aria-pressed="true"] { background: #9C5B2B; border-color: #9C5B2B; color: #fff; } .ol-eye-icon { display: block; } /* Panel is a strict vertical stack: secondary info line, then full-width action button(s) stacked below. No side-by-side buttons, ever. */ .ol-kanban--compact .olc-action { overflow: hidden; min-height: 0; display: flex; flex-direction: column; gap: 6px; border-top: 1px solid #EFE7D6; padding-top: 8px; opacity: 0; transition: opacity 150ms ease-out; } .ol-kanban--compact .ol-kanban-card:hover .olc-action, .ol-kanban--compact .ol-kanban-card:focus-within .olc-action { opacity: 1; } /* Secondary info line: supplier (left, ellipsizes) + date/invoice (right). */ .ol-kanban--compact .olc-hover-info { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; } .ol-kanban--compact .olc-hover-supplier { font-size: 10.5px; text-transform: uppercase; letter-spacing: .02em; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; } .ol-kanban--compact .olc-hover-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex: 0 0 auto; text-align: right; } .ol-kanban--compact .olc-hover-date, .ol-kanban--compact .olc-hover-inv { font-size: 10px; color: var(--text-dim); white-space: nowrap; font-variant-numeric: tabular-nums; } /* Action row: full-width button stack (left) + one days-in-stage stamp (right) that stretches to span the stack's height — one stamp per card. */ .ol-kanban--compact .olc-hover-actionrow { display: flex; align-items: stretch; gap: 6px; } .ol-kanban--compact .olc-stage-stamp { flex: 0 0 auto; min-width: 34px; display: flex; align-items: center; justify-content: center; padding: 4px 6px; border: 1px solid var(--border); background: #F8F5EC; border-radius: 6px; font-size: 12px; font-weight: 800; line-height: 1; color: var(--text-dim); font-variant-numeric: tabular-nums; white-space: nowrap; } .ol-kanban--compact .olc-stage-stamp.is-over { border-color: #ECCF9A; background: #FDF3E0; color: #B7791F; } /* Actions: every button is full card width, stacked with a 5px gap. */ .ol-kanban--compact .olc-hover-actions { display: flex; flex-direction: column; gap: 5px; flex: 1 1 auto; min-width: 0; } .ol-kanban--compact .olc-hover-actions .pa-btn, .ol-kanban--compact .olc-hover-actions .ol-kanban-action-btn { display: block; width: 100%; flex: none; font-size: 11px; font-weight: 700; padding: 6px 12px; border-radius: 5px; text-align: center; justify-content: center; } /* Secondary action (e.g. Send to 3rd Party Lab) = outline style. */ .ol-kanban--compact .olc-hover-actions .olc-btn-secondary { background: #fff; color: var(--accent); border: 1px solid #D3B088; } .ol-kanban--compact .olc-hover-actions .action-muted { font-size: 11px; font-style: italic; } /* Touch devices (no hover): keep the panel always visible so the supplier / date / action are never unreachable. */ @media (hover: none) { .ol-kanban--compact .olc-action-wrap { grid-template-rows: 1fr; } .ol-kanban--compact .olc-action { opacity: 1; } } /* Dashboard — Capital Exposure clickable rows */ .exposure-row { cursor: pointer; } .exposure-row:hover td { background: var(--bg-elev-2); } .exposure-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .exposure-head .card-title { margin: 0; } /* /ore-lots/ list table — honor colgroup widths and keep status badges single-line. STATUS column inherits the base left-alignment so the badge floats at the left edge of its cell rather than centering. */ .ol-list-table { table-layout: fixed; } .ol-list-table tbody td { vertical-align: middle; } .ol-list-table .badge { white-space: nowrap; } /* Pre-weighbridge truck tables on /ore-lots/ (Pending Approval / Approved for Dispatch / In Transit). Defaults only — tuner owns runtime widths via ColumnWidthOverride. Visual styling inherits from .data-table / .data-table--terracotta (terracotta pill, rounded rows card, etc.). */ .ol-truck-table tbody td { vertical-align: middle; } .ol-truck-table .ol-truck-action-cell { white-space: nowrap; } .ol-awaiting-dispatch, .action-muted { color: #6B6B66; font-size: 13px; } .ol-action-cell { white-space: nowrap; } /* Small inline chip — paired with CPM LOT # in invoiced rows. */ .row-invoice-chip { display: inline-block; margin-left: 6px; padding: 1px 6px; font-size: 11px; font-variant-numeric: tabular-nums; color: #6B6B66; background: #F1EEE6; border-radius: 3px; white-space: nowrap; vertical-align: baseline; } /* Shared sizing for both header buttons on /ore-lots/ ("Export to Excel" + "+ New Lot"). The padding inherits from .btn-primary / .btn-secondary (both already 12px 24px); this class only pins width, alignment, and link decoration so the two buttons read as a balanced pair regardless of their distinct primary/secondary styling. */ .ol-header-btn { min-width: 160px; text-align: center; white-space: nowrap; text-decoration: none; } /* ==================================================================== Upload Centre (admin-only portal). Three-card sequential layout — step 1 fully lit, steps 2+ visually muted to guide ordering, but none of the controls are hard-disabled (the wipe-and-replace logic does its own ordering checks server-side). ==================================================================== */ .upload-centre { max-width: 920px; } .upload-centre-head { margin-bottom: 20px; } .upload-centre-title { margin: 4px 0 8px; font-family: var(--font-serif); font-weight: 400; font-size: 36px; line-height: 1.1; color: var(--text); } .upload-centre-title em { color: var(--accent); font-style: italic; } .upload-centre-sub { margin: 0 0 22px; color: var(--text-dim); font-size: 14px; } .upload-centre-warning { background: #FFF8E5; border-left: 4px solid #B0822B; border-radius: 6px; padding: 16px; margin-bottom: 28px; font-size: 13.5px; line-height: 1.5; color: #1F1F1F; } .upload-card { background: var(--bg-elev, #FFFFFF); border: 1px solid var(--border, #E1DBC9); border-radius: var(--radius-lg, 12px); padding: 24px 28px; margin-bottom: 24px; } .upload-card.is-muted { opacity: 0.78; } .upload-card.is-muted .upload-card-actions { opacity: 0.7; } .upload-card-head { margin-bottom: 14px; } .upload-card-title { margin: 0 0 6px; font-family: var(--font-serif); font-weight: 600; font-size: 20px; color: var(--text, #1F1F1F); } .upload-card-step { color: var(--accent, #A85C3A); margin-right: 4px; } .upload-card-status { margin: 0; color: var(--text-dim); font-size: 13px; } /* V28.1 — from-status → to-status flow line on each upload card. */ .upload-card-flow { margin: 4px 0 6px; font-size: 12.5px; display: inline-flex; gap: 6px; align-items: center; color: var(--text); } .upload-card-flow strong { color: var(--accent); font-weight: 600; } .upload-card-actions { display: flex; gap: 8px; margin: 14px 0 16px; } .upload-btn { min-width: 160px; text-align: center; white-space: nowrap; text-decoration: none; } .upload-card-note { margin: 12px 0 0; font-size: 12.5px; font-style: italic; } .upload-drop-form { margin: 0; } .upload-drop { display: block; border: 2px dashed color-mix(in srgb, var(--accent, #A85C3A) 40%, transparent); border-radius: 12px; padding: 32px; text-align: center; cursor: pointer; background: transparent; transition: background 120ms ease, border-color 120ms ease; } .upload-drop:hover, .upload-drop.is-dragover { background: color-mix(in srgb, var(--accent, #A85C3A) 6%, transparent); border-color: color-mix(in srgb, var(--accent, #A85C3A) 70%, transparent); } .upload-drop-text { color: var(--text-dim, #6B6B66); font-size: 13px; font-family: var(--font-sans); } .ol-list-table .ol-invoice-value { font-family: var(--font-serif); font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; } /* Capital Exposure summary rows — TOTAL (bold, thick top border, taller padding) and INVOICED & COMPENSATED (muted/italic, informational only). Neither row carries a stage badge or click-through. */ .exposure-summary td { font-variant-numeric: tabular-nums; } .exposure-summary-total td { border-top: 1px solid #1F1F1F; padding-top: 16px; padding-bottom: 16px; font-weight: 600; } .exposure-summary-total .exposure-summary-label { font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 12px; color: #1F1F1F; } .exposure-summary-compensated td, .exposure-summary-settled td { color: #6B6B66; font-style: italic; } .exposure-summary-compensated .exposure-summary-label, .exposure-summary-settled .exposure-summary-label { font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: 12px; font-style: normal; color: #6B6B66; } .data-table th.num, .data-table td.num { text-align: left; font-variant-numeric: tabular-nums; } /* Alignment helpers that win against `.data-table th, .data-table td` (which sets text-align: left at 0,0,1,1). Both `.lib4-num` and `.center` are 0,0,1,0 on their own — qualifying on `.data-table` raises specificity to 0,0,2,1 so they apply to both head and body cells consistently. */ .data-table th.lib4-num, .data-table td.lib4-num { text-align: left; font-variant-numeric: tabular-nums; } /* `.center` is the explicit STATUS / ACTION column class — header and data cells both render centered. */ .data-table th.center, .data-table td.center { text-align: center; } /* Capital Exposure by Stage table. 7 columns: Stage (left, wide enough for "Awaiting Supplier Acceptance" on a single line) + 6 numeric (right). The numeric columns share the remainder evenly. */ .exposure-table { table-layout: fixed; width: 100%; } .exposure-table th:first-child, .exposure-table td:first-child { /* Fits the longest pill ("Awaiting Supplier Acceptance" — 28 uppercase chars at 10.5px / 0.08em letter-spacing) plus pill + cell padding. text-align comes from the `.center` class applied in the template (Stage is a STATUS column, centered per the global rule). */ width: 340px; } .exposure-table th:not(:first-child), .exposure-table td:not(:first-child) { width: calc((100% - 340px) / 6); } .exposure-table td.num, .exposure-table th.num { text-align: left; font-variant-numeric: tabular-nums; } /* Pills always render fully — never truncate. */ .exposure-table .badge { white-space: nowrap; overflow: visible; text-overflow: clip; } /* Capital Exposure table — Stage column LEFT-aligned (header + data), despite the app-wide STATUS-column centering rule. Scoped tightly to this table only via compound class specificity: the head selector is 0,0,4,2 (beats the global terracotta th.center at 0,0,3,2) and the body selector is 0,0,3,2 (beats .data-table td.center at 0,0,2,1). Every other STATUS column app-wide stays centered. */ .data-table.data-table--terracotta.exposure-table thead th.center, .data-table.exposure-table tbody td.center { text-align: left; } /* ────────────────────────────────────────────────────────── Advances workspace — hero, warehouse cards, list ──────────────────────────────────────────────────────── */ .adv-page { max-width: 1280px; } .adv-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 26px; } .adv-hero-sub { margin: 4px 0 0; font-size: 13px; } .adv-hero-actions { display: flex; gap: 10px; flex-shrink: 0; } .adv-section { margin-bottom: 36px; } .adv-section-title { margin: 0 0 14px; font-family: var(--font-serif); font-size: 20px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; } .adv-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .adv-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px 24px 20px; display: flex; flex-direction: column; gap: 14px; } .adv-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .adv-card-name { background: transparent; border: none; padding: 0; font-family: var(--font-serif); font-size: 18px; font-weight: 600; color: var(--accent); cursor: pointer; text-align: left; letter-spacing: -0.01em; } .adv-card-name:hover { color: var(--accent-soft); text-decoration: underline; } .adv-card-filter-link { font-size: 11.5px; color: var(--text-dim); text-decoration: none; } .adv-card-filter-link:hover { color: var(--accent); text-decoration: underline; } .adv-card-stats { margin: 0; display: flex; flex-direction: column; gap: 10px; } .adv-card-stats > div { display: flex; flex-direction: column; gap: 2px; } .adv-card-stats dt { font-size: 10.5px; color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: 0.10em; margin: 0; } .adv-card-stats dd { margin: 0; font-family: var(--font-serif); font-size: 20px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } .adv-card-stats dd.adv-card-exposure { color: var(--accent); } .adv-list-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 12px; } .adv-filter-form { margin: 0; } .adv-filter-label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; } .adv-filter-label select { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px; font-size: 13.5px; color: var(--text); font-family: var(--font-sans); min-width: 220px; } .adv-filter-label select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); } .adv-warehouse-link { background: transparent; border: none; padding: 0; color: var(--accent); font-family: inherit; font-size: inherit; cursor: pointer; } .adv-warehouse-link:hover { color: var(--accent-soft); text-decoration: underline; } .adv-table td .mono { font-family: var(--font-mono); font-size: 12px; } @media (max-width: 1100px) { .adv-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .adv-card-grid { grid-template-columns: 1fr; } .adv-hero { flex-direction: column; align-items: stretch; } .adv-hero-actions { flex-direction: column; } .adv-list-head { flex-direction: column; align-items: stretch; } } /* ────────────────────────────────────────────────────────── Lot identifier display — primary line + (optional) secondary. Used inside .cpm-pa-lot-link, .lib4-lot-link, list cells, and the ore_lots detail / edit headers. The actual code is supplied by the {% lot_code lot %} inclusion tag in core/templatetags/cpmorox_format.py ──────────────────────────────────────────────────────── */ .lot-code-primary { /* V28.87 — inline-block so the .env-inline-badge that follows in the partial sits next to the code on the same line. Previously 'display: block' pushed the badge onto its own row inside the kanban card. The .lot-code-secondary below still uses display: block so the libertad code (when present) keeps a clean line break under the primary. */ display: inline-block; font-weight: 600; font-size: 13px; color: var(--accent); line-height: 1.2; } .lot-code-secondary { display: block; font-size: 11px; font-weight: 500; color: var(--text-muted); margin-top: 2px; letter-spacing: 0.02em; } .lot-code-await { font-style: italic; font-weight: 500; } /* V28.96 — Edit Lot modal constituent-batch list (multi-batch blends). Replaces the Miner Batch Code + Miner Name input pair when the lot belongs to a multi-batch blend; renders one row per constituent MinerBatch (read-only). Two columns, mono code on the left, miner name on the right. */ .edit-lot-batch-list { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; padding: 8px 10px; background: rgba(107, 107, 102, 0.06); border: 1px solid var(--border); border-radius: 6px; } .edit-lot-batch-list-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 12px; align-items: center; padding: 6px 2px; border-bottom: 1px dashed rgba(107, 107, 102, 0.16); } /* V28.693 - Remove-constituent affordance. When a row is marked for removal, we line-through the fields + tint them red so the operator sees exactly what will disappear on Save. Undo puts the row back. */ .edit-lot-batch-remove-btn { padding: 4px 10px; font-size: 12px; line-height: 1.2; white-space: nowrap; } .edit-lot-batch-remove-btn.is-pending-removal { background: rgba(185, 74, 50, 0.14); color: #B94A32; border-color: rgba(185, 74, 50, 0.35); } .edit-lot-batch-list-row.is-pending-removal .edit-lot-batch-list-code-input, .edit-lot-batch-list-row.is-pending-removal .edit-lot-batch-list-miner-input { text-decoration: line-through; opacity: 0.55; background: rgba(185, 74, 50, 0.06); border-color: rgba(185, 74, 50, 0.35); pointer-events: none; } .edit-lot-removal-reason-wrap { margin-top: 4px; } .edit-lot-removal-reason-wrap textarea { width: 100%; min-height: 56px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius, 6px); padding: 8px 10px; font-size: 13px; color: var(--text); box-sizing: border-box; font-family: inherit; resize: vertical; } .edit-lot-batch-list-row:last-child { border-bottom: none; } .edit-lot-batch-list-code { font-size: 13px; font-weight: 600; color: var(--text); font-family: var(--font-mono, ui-monospace, monospace); word-break: break-all; } .edit-lot-batch-list-miner { font-size: 13px; color: var(--text-dim); } /* V28.183 — editable inputs replace the read-only spans. Inputs pick up the same .pa-modal-field > input styling family so they read consistently inside the Edit Lot modal. */ .edit-lot-batch-list-code-input, .edit-lot-batch-list-miner-input { width: 100%; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius, 6px); padding: 7px 10px; font-size: 13px; color: var(--text); box-sizing: border-box; } .edit-lot-batch-list-code-input { font-family: var(--font-mono, ui-monospace, monospace); font-weight: 600; } .edit-lot-batch-list-code-input:focus, .edit-lot-batch-list-miner-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); } /* When the lot-code lives inside an existing styled link (e.g. the primary list-table lot link), let the link color cascade rather than forcing the accent twice. */ a .lot-code-primary { color: inherit; } /* ────────────────────────────────────────────────────────── CPM Pending Approval — two-column workflow view ──────────────────────────────────────────────────────── */ .cpm-pa-page .page-title { margin-bottom: 18px; } .cpm-pa-search { margin: 0 0 22px; } .cpm-pa-search .pa-search { width: 100%; } /* Used by pages that reuse the two-column shell but don't have a search bar. */ .cpm-pa-hero-sub { margin: -8px 0 22px; font-size: 13.5px; } .cpm-pa-col-sub { margin: -4px 0 10px; font-size: 12.5px; } /* Negotiation table — accent the offer USD cell so it scans like money */ .neg-table .neg-offer-cell { font-family: var(--font-serif); font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; } /* CPM negotiation list — two sections stacked vertically (replacing the former side-by-side layout). Each section is full-width; generous gap so they read as distinct workflow stages. Selectors chain .cpm-pa-table.neg-table so the negotiation overrides win the specificity tie with the generic .cpm-pa-table rules below. */ .neg-stack { display: flex; flex-direction: column; gap: 52px; margin-top: 8px; } .neg-stack-section { min-width: 0; } /* Column widths — proportional to content rather than evenly spread. */ .cpm-pa-table.neg-table { table-layout: auto; } .cpm-pa-table.neg-table th:first-child, .cpm-pa-table.neg-table td:first-child { width: 180px; min-width: 180px; } /* Column widths come from a
elements are already a relative box). */ .ctnr-handle { position: absolute; top: 0; right: -4px; width: 8px; height: 100%; background: transparent; cursor: col-resize; z-index: 5; display: none; touch-action: none; } html.ctnr-on .ctnr-handle { display: block; } /* V28.242 - when the tuner is ON show a faint vertical guide so the operator can SEE where the draggable boundaries are. Hover/drag brightens it. Without this, handles were invisible until the cursor crossed a 6px slot - users couldn't tell the tuner was on. */ html.ctnr-on .ctnr-handle::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 3px; width: 2px; background: rgba(255, 255, 255, 0.45); border-radius: 1px; pointer-events: none; } html.ctnr-on .ctnr-handle:hover, html.ctnr-on .ctnr-handle:active { background: color-mix(in srgb, #FFFFFF 70%, transparent); outline: 1px solid #FFFFFF; } html.ctnr-on .ctnr-handle:hover::before, html.ctnr-on .ctnr-handle:active::before { background: #FFFFFF; } /* Header cells need position: relative so the absolute-positioned handle anchors to the cell, not the page. V28.242 generalised from '.data-table--terracotta thead th' to every '[data-tuner-key] table' so non-canonical tuner tables (mr-table, kyc-flat-table, pm-table, pa-table, lib4-table, lab-tests-table) get their handles properly anchored too - previously they were absolute-positioned against the page and ended up nowhere useful. */ html.ctnr-on .lib4-list-header-band > * { position: relative; } html.ctnr-on table[data-tuner-key] thead th { position: relative; } .ctnr-tip { position: fixed; z-index: 10000; pointer-events: none; background: #1F1F1F; color: #FFFFFF; font-size: 11px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; padding: 6px 10px; border-radius: 6px; max-width: 60vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 4px 12px rgba(0,0,0,0.3); } .ctnr-tip[hidden] { display: none; } /* Loud error toast for tuner save failures — surfaces silent 403s instead of letting them disappear into a swallowed promise. */ .ctnr-error-flash { position: fixed; left: 18px; bottom: 18px; z-index: 10001; background: #b23c3c; color: #FFFFFF; font-size: 12px; font-weight: 600; padding: 10px 14px; border-radius: 8px; max-width: 60vw; box-shadow: 0 4px 12px rgba(0,0,0,0.30); } .ctnr-error-flash[hidden] { display: none; } /* Manual allocation modal — simplified 3-choice flow. */ .ma-modal-body { padding: 18px; } .ma-modal-summary { margin: 0 0 18px; font-size: 14px; color: var(--text); } .ma-modal-summary strong { color: var(--text); } .ma-choice-stack { display: flex; flex-direction: column; gap: 10px; } .ma-choice-stack .ma-choice-btn { width: 100%; padding: 14px 16px; font-size: 14px; font-weight: 600; } .ma-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; } .ma-advance-select { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; font-size: 13.5px; margin-top: 6px; } .ma-warn { color: #8a6510; background: rgba(200,147,43,0.10); padding: 10px 12px; border-radius: 6px; margin-top: 0; } .lib4-blend-code { font-weight: 600; font-size: 14px; color: var(--text); } .lib4-unit-badge { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 8px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; vertical-align: middle; } .lib4-unit-badge.lib4-unit-blend { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); } .lib4-unit-badge.lib4-unit-single { background: color-mix(in srgb, var(--text-dim) 14%, transparent); color: var(--text-dim); } .lib4-blend-name { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; } .lib4-blend-warehouse { font-size: 13px; color: var(--text); } .lib4-blend-num { font-size: 13.5px; color: var(--text); font-variant-numeric: tabular-nums; text-align: left; } /* Stack of info/status pills. align-items: flex-start makes each pill shrink to its text content (hug-text shading) instead of stretching to fill the column. Pills sit at the left edge of the cell, stacked top-down with a 4px gap. In a centered STATUS column, the cell's own text-align:center is overridden by the flex layout — apply `align-items: center` via a parent rule there if needed (currently no STATUS column uses .lib4-blend-badges in a centered cell, so the default flex-start is correct for every site). */ .lib4-blend-badges { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; } .lib4-blend-badge { display: inline-block; font-size: 11.5px; padding: 2px 8px; border-radius: 10px; background: var(--bg-elev-2); color: var(--text-dim); white-space: nowrap; } .lib4-blend-date { font-size: 12.5px; } .lib4-blend-expand { background: transparent; border: 1px solid var(--border); color: var(--text-dim); width: 32px; height: 32px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 160ms ease, background 120ms ease, color 120ms ease; } .lib4-blend-expand:hover { background: var(--bg-elev-2); color: var(--text); } .lib4-blend-row.is-open .lib4-blend-expand { transform: rotate(180deg); color: var(--accent); border-color: var(--accent); } .lib4-blend-detail { max-height: 0; overflow: hidden; transition: max-height 260ms ease; border-top: 0 solid var(--border); } .lib4-blend-row.is-open .lib4-blend-detail { max-height: 600px; border-top: 1px solid var(--border); } .lib4-blend-detail .lib4-mb-subtable { width: 100%; border-collapse: collapse; } .lib4-blend-detail .lib4-mb-subtable th, .lib4-blend-detail .lib4-mb-subtable td { padding: 10px 18px; font-size: 12.5px; } .lib4-blend-detail .lib4-mb-subtable thead th { /* V3 — pre-V3 used var(--bg-elev-2) (#F5F0E2), nearly identical to the page parchment (#EDE7D9), making the inner sub-table header read as a beige-on-beige strip with no visible separation. The new warm light grey lands a clear shade darker than the parchment background, so the header band visually separates from the row card without losing the palette warmth. */ background: #E0D9C5; color: #5C5142; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px; } /* ---------- New Blend modal ---------- */ .lib4-blend-modal .lib4-blend-panel { max-width: 760px; width: 92vw; max-height: 90vh; display: flex; flex-direction: column; } .lib4-blend-form { overflow-y: auto; overflow-x: hidden; padding-right: 4px; } .lib4-blend-form-band { margin: 0 0 14px; padding: 8px 12px; border-radius: 6px; background: rgba(178, 60, 60, 0.08); color: #b23c3c; font-size: 13px; display: none; } .lib4-blend-form-band.is-on { display: block; } .lib4-blend-section { margin-bottom: 18px; } .lib4-blend-section-title { font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); margin: 0 0 10px; font-weight: 600; } .lib4-mb-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; } .lib4-mb-row { background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; transition: opacity 200ms ease, transform 200ms ease, max-height 200ms ease; } .lib4-mb-row.is-removing { opacity: 0; transform: translateX(-12px); max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; overflow: hidden; } .lib4-mb-row-grid { display: grid; grid-template-columns: 1.2fr 1.6fr 1fr 1fr 28px; gap: 10px; align-items: end; } /* Batch-vs-Blend redesign: 3 inputs (code + tonnage + grade) + remove button, miner_name dropped per the new flow. */ .lib4-mb-row-grid-3 { grid-template-columns: 1.4fr 1fr 1fr 28px; } .lib4-mb-row-grid .pa-modal-field { margin: 0; } /* Batch-vs-Blend choice modal */ .lib4-choice-modal .lib4-choice-panel { max-width: 480px; width: 92vw; } .lib4-choice-body { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 8px 0 16px; } .lib4-choice-tile { display: flex; flex-direction: column; gap: 6px; padding: 18px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-elev-2); cursor: pointer; text-align: left; transition: border-color 120ms ease, background 120ms ease, box-shadow 160ms ease; } .lib4-choice-tile:hover { border-color: var(--accent); background: var(--bg-elev); box-shadow: 0 1px 6px rgba(168, 92, 58, 0.08); } .lib4-choice-tile-title { font-size: 15px; font-weight: 600; color: var(--text); } .lib4-choice-tile-sub { font-size: 12px; color: var(--text-dim); line-height: 1.4; } /* Single-batch modal */ .lib4-batch-modal .lib4-batch-panel { max-width: 520px; width: 92vw; max-height: 90vh; display: flex; flex-direction: column; } .lib4-batch-form { overflow-y: auto; padding-right: 4px; } /* --------------------------------------------------------------------------- CPM /pending-approval/ page (Phase 12, blend-centric) --------------------------------------------------------------------------- */ .cpm-pending-approval .cpm-pa-search { margin: 0 0 18px; } .cpm-pending-approval .cpm-pa-search input[type="search"] { width: 100%; padding: 10px 14px; font-size: 13.5px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); box-sizing: border-box; } .cpm-pending-approval .cpm-pa-search input[type="search"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); } .cpm-pending-approval .cpm-section-count { font-size: 12.5px; font-weight: 600; color: var(--text-dim); background: var(--bg-elev-2); border-radius: 10px; padding: 2px 10px; margin-left: 8px; } /* Approval rows: the grid template now comes from --lib4-grid-cols on the parent [data-grid="cpm-pa-pending|cpm-pa-approved"] so header band and rows share ONE template. This class no longer sets the grid; the per-section column widths live with the other [data-grid] blocks near the top of the file. */ .cpm-pa-actions { display: inline-flex; gap: 8px; justify-content: center; align-items: center; } .cpm-pa-approve-btn { padding: 8px 14px; font-size: 12.5px; } .cpm-pa-reject-btn { padding: 8px 14px; font-size: 12.5px; color: var(--text-dim); } .cpm-pa-reject-btn:hover { color: #b23c3c; border-color: #b23c3c; } /* K2 — KYC tracker tile column headers use 3-4 letter abbreviated codes (FAC, GRR, etc.) with the full Spanish name in a native title= tooltip. The K2 wrapper class disables the legacy fixed-percent colgroup so the doc cells settle at a fixed 36px width — that way a 17-tile MINER/REINFO row fits on a standard laptop viewport, and a 7-tile TRADER row hugs its content rather than stretching tiles to absurd widths. */ .lib4-tracker-mb-scroll-k2 .lib4-tracker-mb-table { width: auto; } .lib4-tracker-mb-scroll-k2 .lib4-tracker-doc-cell { width: 36px; min-width: 36px; } .lib4-tracker-doc-th-abbrev { height: 28px; padding: 2px 0; text-align: center; vertical-align: middle; } .lib4-tracker-doc-th-abbrev .lib4-tracker-doc-th-code { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; color: var(--text-dim); font-variant-numeric: tabular-nums; } .lib4-tracker-mb-scroll-k2 .lib4-tracker-mb-table th.lib4-tracker-doc-th-abbrev { height: 28px; } /* L1 — libertad-4 dashboard KYC outstanding table. Warehouse filter dropdown above the table + inline read-only tile row inside the KYC 1 PROGRESS column. Tiles reuse the K2 abbrev text styling (.lib4-tracker-doc-th-code) and add a received/pending tone driven by .is-received. Cells are , never
labels use. */ .liq-mc-row-label { font-family: var(--font-sans); font-size: inherit; font-weight: 700; color: var(--text, #2a1e10); letter-spacing: 0; text-align: left; } .liq-mc-row-label-sub { font-family: var(--font-sans); font-size: 10.5px; font-weight: 500; color: var(--text-dim, #7a6a55); letter-spacing: 0.02em; margin-left: 4px; text-transform: none; } /* Value cells. Calc rows are lighter; margin rows are the answer. V28.589 - position: relative anchors the .liq-mc-popover child. */ .liq-mc-value { text-align: right; font-family: var(--font-serif); font-weight: 600; color: var(--text, #2a1e10); position: relative; } .liq-mc-row--calc .liq-mc-value { font-size: 13px; color: var(--text-dim, #5a4a35); } /* V28.589 - was `display: flex + justify-content: flex-end` which collapsed money + pct onto a single line that wrapped and stacked the 3 columns oddly. Removed display override so the keeps its natural `display: table-cell` (V28.589a fix - a stray `display: block` here broke the 3-column layout for margin rows). The two child spans (money / pct) now do the block stacking. */ .liq-mc-row--margin .liq-mc-value--margin { font-size: 15.5px; color: var(--text, #2a1e10); } .liq-mc-row--margin .liq-mc-money { display: block; } .liq-mc-row--margin .liq-mc-pct { display: block; margin-top: 2px; } .liq-mc-money { font-family: var(--font-serif); font-weight: 700; letter-spacing: -0.005em; } .liq-mc-pct { font-family: var(--font-sans); font-size: 11.5px; font-weight: 600; color: var(--text-dim, #7a6a55); text-align: right; } /* Threshold-tripped cell - money + pct both flag. */ .liq-mc-value.liq-mc-low { background: rgba(180, 50, 40, 0.06); } .liq-mc-value.liq-mc-low .liq-mc-money, .liq-mc-value.liq-mc-low .liq-mc-pct { color: #a04020; } /* V28.589 - hover popover with structured "how was this calculated" input breakdown. V28.590c - switched from position: absolute (which was fighting overflow, stacking context and table-cell quirks) to position: fixed with JS-computed viewport coordinates. No ancestor overflow rule can clip a fixed-positioned element, and the JS picks the best of {below, above} + {right-align, left-align} for the available viewport space. The static --above / --left modifiers are gone - all positioning is now JS-driven. */ .liq-mc-popover { position: fixed; top: 0; left: 0; z-index: 200; min-width: 280px; max-width: 340px; padding: 12px 14px; background: var(--card, #fbf7ee); border: 1px solid rgba(90, 74, 53, 0.18); border-radius: 8px; box-shadow: 0 6px 22px -6px rgba(35, 20, 10, 0.22); opacity: 0; visibility: hidden; transition: opacity 100ms ease, visibility 100ms ease; pointer-events: none; text-align: left; font-family: var(--font-sans); font-weight: 400; color: var(--text, #2a1e10); } .liq-mc-value:hover .liq-mc-popover { opacity: 1; visibility: visible; } .liq-mc-pop-head { font-family: var(--font-serif); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent, #a04020); padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid rgba(90, 74, 53, 0.14); } .liq-mc-pop-rows { margin: 0; padding: 0; } .liq-mc-pop-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 12px; padding: 2px 0; } .liq-mc-pop-row dt { color: var(--text-dim, #7a6a55); font-weight: 500; margin: 0; } .liq-mc-pop-row dd { margin: 0; font-family: var(--font-serif); font-weight: 600; color: var(--text, #2a1e10); white-space: nowrap; } .liq-mc-pop-row--muted { opacity: 0.72; font-size: 11px; } .liq-mc-pop-final { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 8px; margin-top: 8px; border-top: 1px solid rgba(90, 74, 53, 0.18); font-size: 13px; } .liq-mc-pop-final dt { margin: 0; color: var(--text, #2a1e10); font-weight: 700; } .liq-mc-pop-final dd { margin: 0; font-family: var(--font-serif); font-weight: 800; color: var(--text, #2a1e10); white-space: nowrap; } @media print { .liq-mc-popover { display: none; } } /* Grade Discount row - auto-derived, so it inherits the "computed" tint from Dry Ore Weight but stays inside the metal-content section colouring above it. */ .liq-rates-row--grade { } /* hook for future high-precision styling */ /* ============================================================ V28.574 - Compliance workspace styling. Terracotta base with a cool slate accent for the compliance role - reads as "audit / oversight" without clashing with the warm operations palette. ============================================================ */ /* Pack tabs sit below the search bar, above the table. Pill-style tabs so they're distinct from the "advanced filter" pills used elsewhere. */ .comp-pack-tabs { display: flex; gap: 6px; margin: 12px 0 16px; flex-wrap: wrap; } .comp-pack-tab { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: rgba(178, 99, 64, 0.06); border: 1px solid rgba(178, 99, 64, 0.20); color: var(--text-dim, #7a6a55); font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em; text-decoration: none; transition: background 120ms ease, border-color 120ms ease, color 120ms ease; } .comp-pack-tab:hover { background: rgba(178, 99, 64, 0.12); color: var(--accent, #8B4A2B); text-decoration: none; } .comp-pack-tab.is-active { background: linear-gradient(135deg, #B26340 0%, #8B4A2B 100%); border-color: #8B4A2B; color: #FFF7EC; box-shadow: 0 1px 3px rgba(80, 50, 25, 0.16); } .comp-pack-tab.is-active:hover { color: #FFF7EC; } .comp-pack-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: rgba(255, 247, 236, 0.20); color: inherit; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; } .comp-pack-tab:not(.is-active) .comp-pack-tab-count { background: rgba(178, 99, 64, 0.14); color: var(--accent, #8B4A2B); } /* Doc-type row pills - one style per column type. Terracotta by default, cool slate for the Required Level (the audit dimension). */ .comp-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; } .comp-pill--doctype { color: var(--text-dim, #7a6a55); background: rgba(178, 99, 64, 0.05); border: 1px solid rgba(178, 99, 64, 0.20); } .comp-pill--pack { color: var(--accent, #8B4A2B); background: rgba(178, 99, 64, 0.10); border: 1px solid rgba(178, 99, 64, 0.28); } .comp-pill--level { color: #3F5560; background: rgba(74, 93, 104, 0.10); border: 1px solid rgba(74, 93, 104, 0.28); } /* Table rows read a bit lighter than the ore-lot tables to signal "config" rather than "live data". */ /* V28.580 - padding removed; inherit base .data-table td padding so compliance tables match row density everywhere else in the app (was 25-30% denser than Buying Tables etc.). */ .comp-doctype-table tbody tr:hover { background: rgba(178, 99, 64, 0.03); } /* Page-header actions - the "+ Add Document Type" button sits on the right of the ol-pageheader. */ /* V28.580 - single canonical .ol-pageheader (was declared twice; the earlier block near line 3554 is now removed). margin-bottom: 18px preserved from the pre-consolidation behaviour. */ .ol-pageheader { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; } .ol-pageheader-actions { display: flex; align-items: center; gap: 8px; } /* ============================================================ V28.575 - Compliance queue + miner list + minimal detail. Status pills, owner pills, status card, request card. ============================================================ */ /* Status pills - four kinds: verified (green), lapsed (red), pending review (amber), not verified (muted grey). */ .comp-status { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; font-family: var(--font-sans); font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; } .comp-status--verified { color: #2E5A24; background: rgba(76, 122, 60, 0.14); border: 1px solid rgba(76, 122, 60, 0.35); } .comp-status--lapsed { color: #8A3120; background: rgba(180, 65, 45, 0.10); border: 1px solid rgba(180, 65, 45, 0.35); } .comp-status--pending { color: #7A5A10; background: rgba(200, 145, 20, 0.12); border: 1px solid rgba(200, 145, 20, 0.35); } .comp-status--unverified { color: #7a6a55; background: rgba(178, 99, 64, 0.06); border: 1px solid rgba(178, 99, 64, 0.22); } /* Ball-with pills - slate for Compliance (audit), terracotta for Commercial (the trading side). Matches the top-nav palette. */ .comp-owner-pill { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.03em; white-space: nowrap; } .comp-owner-pill--compliance { color: #FFF7EC; background: linear-gradient(135deg, #6F8393 0%, #4A5D68 100%); border: 1px solid #3F5560; } .comp-owner-pill--commercial { color: #FFF7EC; background: linear-gradient(135deg, #B26340 0%, #8B4A2B 100%); border: 1px solid #8B4A2B; } /* Priority dot on the queue - amber, unobtrusive but visible. */ .comp-priority-dot { color: #C58E14; font-size: 14px; line-height: 1; } /* times-returned counter (small ×N badge next to the owner pill). */ .comp-times-returned { display: inline-block; padding: 1px 6px; border-radius: 999px; background: rgba(180, 65, 45, 0.10); color: #8A3120; font-family: var(--font-sans); font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; } /* Miner-list rows read a bit softer than the queue since it's a directory rather than a work queue. */ /* V28.580 - padding removed; inherit base .data-table td padding so compliance tables match the row density of Ore Summary / Buying Tables / Suppliers. */ .comp-miner-table tbody tr:hover { background: rgba(178, 99, 64, 0.03); } .comp-queue-table tbody tr:hover { background: rgba(178, 99, 64, 0.03); } .comp-checklist-table tbody tr:hover { background: rgba(178, 99, 64, 0.03); } /* Status card at the top of the miner detail. */ .comp-status-card { background: linear-gradient(135deg, #FFFFFF 0%, #FFF7EC 100%); border: 1px solid rgba(178, 99, 64, 0.22); border-radius: 10px; overflow: hidden; } .comp-status-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid rgba(178, 99, 64, 0.15); background: rgba(178, 99, 64, 0.05); } .comp-status-card-label { font-family: var(--font-sans); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent, #8B4A2B); } .comp-status-card-body { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 16px; } @media (max-width: 900px) { .comp-status-card-body { grid-template-columns: repeat(2, 1fr); } } .comp-status-metric-label { font-family: var(--font-sans); font-size: 10px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-dim, #7a6a55); line-height: 1.2; } .comp-status-metric-value { margin-top: 4px; font-family: var(--font-serif); font-size: 20px; font-weight: 600; color: var(--text, #2a1e10); font-variant-numeric: tabular-nums; letter-spacing: -0.005em; } .comp-status-metric-value--warn { color: #7A5A10; } .comp-status-metric-value--danger { color: #8A3120; } /* Open verification-request card. */ .comp-request-card { padding: 16px; } .comp-request-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 8px; } @media (max-width: 900px) { .comp-request-grid { grid-template-columns: repeat(2, 1fr); } } .comp-return-reason { margin-top: 16px; padding: 12px 14px; background: rgba(180, 65, 45, 0.06); border: 1px solid rgba(180, 65, 45, 0.20); border-radius: 8px; color: #4A2418; font-size: 13px; } /* Verification history strip - compact log of past requests. */ .comp-history-list { list-style: none; margin: 0; padding: 0; } .comp-history-item { padding: 8px 0; border-top: 1px solid rgba(178, 99, 64, 0.10); font-size: 12.5px; } .comp-history-item:first-child { border-top: none; padding-top: 0; } .comp-history-state { display: inline-block; padding: 2px 8px; border-radius: 6px; font-family: var(--font-sans); font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .comp-history-state--verified { background: rgba(76, 122, 60, 0.14); color: #2E5A24; } .comp-history-state--returned { background: rgba(180, 65, 45, 0.10); color: #8A3120; } .comp-history-state--requested { background: rgba(200, 145, 20, 0.12); color: #7A5A10; } /* V28.740 - doc review-state chips (Document history review timeline). */ .comp-history-state--approved { background: rgba(76, 122, 60, 0.14); color: #2E5A24; } .comp-history-state--rejected { background: rgba(180, 65, 45, 0.10); color: #8A3120; } .comp-history-state--pending { background: rgba(200, 145, 20, 0.12); color: #7A5A10; } .comp-history-state--not_applicable { background: rgba(90, 74, 53, 0.10); color: #6B5A44; } /* V28.740 - read-only Document history (version + review) accordion. */ .comp-doc-history-body { padding: 8px 16px 16px; } .comp-doc-history { border: 1px solid var(--border, #E1DBC9); border-radius: 8px; margin-top: 10px; background: var(--cream-elev, #FDFAF3); } .comp-doc-history:first-child { margin-top: 0; } .comp-doc-history-summary { cursor: pointer; padding: 10px 12px; list-style: none; display: flex; align-items: center; flex-wrap: wrap; } .comp-doc-history-summary::-webkit-details-marker { display: none; } .comp-doc-history-summary::before { content: "▸"; color: var(--text-dim, #7a6a55); margin-right: 8px; font-size: 11px; } .comp-doc-history[open] .comp-doc-history-summary::before { content: "▾"; } .comp-doc-history-detail { padding: 4px 12px 12px; border-top: 1px solid var(--border, #E1DBC9); } .comp-history-empty { padding: 8px 0; font-size: 12.5px; } /* Miner-list status filter tabs: colour hints per status - subtle ring rather than filled fills, so the "All" tab still dominates. */ .comp-pack-tab--verified:not(.is-active) { border-color: rgba(76, 122, 60, 0.28); color: #2E5A24; } .comp-pack-tab--pending:not(.is-active) { border-color: rgba(200, 145, 20, 0.28); color: #7A5A10; } .comp-pack-tab--lapsed:not(.is-active) { border-color: rgba(180, 65, 45, 0.30); color: #8A3120; } .comp-pack-tab--unverified:not(.is-active) { border-color: rgba(178, 99, 64, 0.20); color: #7a6a55; } /* ============================================================ V28.576 - Compliance miner-detail live controls: verify/return buttons on the request card, per-doc kebab, upload/state modals. ============================================================ */ /* Secondary button (used for Return-to-Commercial). Slate accent so it reads as a "reversal" action next to the green Verify. V28.580 - padding + font-weight now match .pa-btn-primary so the Verify / Return button strip renders at one height. */ .pa-btn-secondary { padding: 12px 24px; background: rgba(74, 93, 104, 0.10); color: #3F5560; border: 1px solid rgba(74, 93, 104, 0.35); font-weight: 600; } .pa-btn-secondary:hover { background: rgba(74, 93, 104, 0.18); border-color: rgba(74, 93, 104, 0.55); color: #2B3E48; } /* Request-card action strip (Verify / Return buttons). */ .comp-request-actions { display: inline-flex; gap: 8px; align-items: center; } .comp-request-card .liq-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } /* Attached-file link on a checklist row - small paperclip pill. */ .comp-file-link { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: rgba(178, 99, 64, 0.06); border: 1px solid rgba(178, 99, 64, 0.20); color: var(--accent, #8B4A2B); font-size: 11.5px; font-weight: 600; text-decoration: none; white-space: nowrap; font-family: var(--font-sans); } .comp-file-link:hover { background: rgba(178, 99, 64, 0.14); color: var(--accent, #8B4A2B); text-decoration: none; } /* ============================================================ V28.577 - Read-only KYC pill on operational surfaces (Ore Summary, Suppliers). Small, unobtrusive - reads as a chip next to the miner/supplier name. Clicks through to the Compliance workspace; non-compliance roles land on 403 but the pill remains a visible signal. ============================================================ */ .comp-kyc-pill { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; margin-left: 6px; border-radius: 999px; font-family: var(--font-sans); font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-decoration: none; vertical-align: baseline; white-space: nowrap; font-variant-numeric: tabular-nums; transition: background 120ms ease, border-color 120ms ease; } .comp-kyc-pill:hover { text-decoration: none; } .comp-kyc-pill--verified { color: #2E5A24; background: rgba(76, 122, 60, 0.10); border: 1px solid rgba(76, 122, 60, 0.30); } .comp-kyc-pill--verified:hover { background: rgba(76, 122, 60, 0.20); color: #2E5A24; } .comp-kyc-pill--lapsed { color: #8A3120; background: rgba(180, 65, 45, 0.08); border: 1px solid rgba(180, 65, 45, 0.32); } .comp-kyc-pill--lapsed:hover { background: rgba(180, 65, 45, 0.16); color: #8A3120; } /* Supplier register KYC Status "x/N" pill — smoothly graded red -> green by fraction uploaded via the inline --kyc-pct custom property (0% = red, 100% = green), reusing the app-wide color-mix idiom. */ .comp-kyc-status-pill { display: inline-block; padding: 1px 9px; border-radius: 999px; font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.03em; white-space: nowrap; font-variant-numeric: tabular-nums; color: #fff; background: color-mix(in srgb, var(--green) var(--kyc-pct, 0%), var(--red)); border: 1px solid color-mix(in srgb, var(--green) var(--kyc-pct, 0%), var(--red)); } .comp-kyc-pill--unverified { color: #7a6a55; background: rgba(178, 99, 64, 0.04); border: 1px solid rgba(178, 99, 64, 0.20); } .comp-kyc-pill--unverified:hover { background: rgba(178, 99, 64, 0.10); color: var(--accent, #8B4A2B); } /* ============================================================ V28.578 - Inline document preview modal on the compliance miner detail. Sized 90vw / 90vh so the PDF or image is actually readable. Word docs bypass the modal and download. ============================================================ */ .comp-preview-modal .pa-modal-panel { width: 90vw; max-width: 1200px; height: 90vh; max-height: 900px; display: flex; flex-direction: column; padding: 0; } .comp-preview-modal .pa-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid rgba(178, 99, 64, 0.15); } .comp-preview-modal .pa-modal-title { font-family: var(--font-serif); font-size: 15px; font-weight: 600; color: var(--accent, #8B4A2B); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .comp-preview-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .comp-preview-body { flex: 1 1 auto; overflow: hidden; background: #F8F0E1; display: flex; align-items: center; justify-content: center; padding: 0; } .comp-preview-frame { width: 100%; height: 100%; border: none; background: #FFFFFF; } .comp-preview-img { max-width: 100%; max-height: 100%; display: block; object-fit: contain; } /* ============================================================ V28.581 - Canonical UX tokens extracted from the morning audit. These consolidate patterns that were inlined ~50 times across the app. Adopt in new templates; existing inlines can migrate in a later polish batch. ============================================================ */ /* Micro-caps eyebrow label. Was inlined ~50 times across templates as `font-size:10-10.5px; letter-spacing:0.10-0.14em; text- transform:uppercase; font-weight:700; color:var(--text-dim);`. Every new "section-label above content" should use .eyebrow. */ .eyebrow { font-family: var(--font-sans); font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim, #7a6a55); line-height: 1.2; } .eyebrow--accent { color: var(--accent, #8B4A2B); } /* Standard empty-state row inside a data-table. Was 6 different padding values (10 / 12 / 20 / 24 / 30 / 32 px) across 17 templates. Standardises to 32 px centered muted. */ .data-table-empty { text-align: center; padding: 32px 16px; color: var(--text-dim, #7a6a55); font-size: 12.5px; } /* ============================================================ V28.591 - KYC Snapshot component (pane + kanban variants). Reusable partial: templates/compliance/_kyc_snapshot.html. Uses the compliance-rail palette established in V28.573-578. ============================================================ */ .kyc-snap { font-family: var(--font-sans); color: var(--text, #2a1e10); } .kyc-snap-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px dashed rgba(90, 74, 53, 0.18); } .kyc-snap-eyebrow { font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; font-weight: 700; color: var(--text-dim, #7a6a55); } .kyc-snap-title { margin: 0; font-family: var(--font-serif); font-size: 15px; font-weight: 700; } /* Pane layout - narrow vertical panel with filter tabs */ .kyc-snap--pane { padding: 12px 14px; } .kyc-snap-tabs { display: flex; gap: 4px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(90, 74, 53, 0.12); } .kyc-snap-tab { padding: 4px 10px; font-size: 11.5px; font-weight: 600; background: transparent; color: var(--text-dim, #7a6a55); border: 1px solid rgba(90, 74, 53, 0.14); border-radius: 6px; cursor: pointer; transition: background 100ms ease, color 100ms ease; } .kyc-snap-tab:hover { background: rgba(90, 74, 53, 0.05); } .kyc-snap-tab--active { background: var(--accent, #B26340); color: #fff; border-color: var(--accent, #B26340); } .kyc-snap-body { display: flex; flex-direction: column; gap: 12px; } .kyc-snap-section {} .kyc-snap-section-title { margin: 0 0 6px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--text-dim, #7a6a55); } .kyc-snap-doc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .kyc-snap-doc { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; background: #fff; border: 1px solid rgba(90, 74, 53, 0.10); font-size: 12.5px; } .kyc-snap-doc-state { width: 8px; height: 8px; border-radius: 50%; background: rgba(90, 74, 53, 0.20); flex: 0 0 auto; } .kyc-snap-doc--approved .kyc-snap-doc-state { background: #4d8a3d; } .kyc-snap-doc--pending .kyc-snap-doc-state { background: #d4a637; } .kyc-snap-doc--rejected .kyc-snap-doc-state { background: #b23c40; } .kyc-snap-doc--not_applicable .kyc-snap-doc-state { background: #b8b0a0; } .kyc-snap-doc--absent .kyc-snap-doc-state { background: rgba(90, 74, 53, 0.15); } .kyc-snap-doc-name { flex: 1; font-weight: 600; color: var(--text, #2a1e10); } .kyc-snap-doc-tier { padding: 1px 6px; font-size: 10px; font-weight: 700; border-radius: 4px; color: #fff; } .kyc-snap-doc-tier--basic { background: #b23c40; } .kyc-snap-doc-tier--negotiation { background: #7a5cb0; } .kyc-snap-doc-tier--export { background: #4d8a3d; } .kyc-snap-doc-lapsed { padding: 1px 6px; font-size: 10px; font-weight: 700; border-radius: 4px; background: rgba(178, 60, 64, 0.10); color: #b23c40; border: 1px solid rgba(178, 60, 64, 0.30); } .kyc-snap-empty { padding: 14px; text-align: center; font-size: 12px; color: var(--text-dim, #7a6a55); background: rgba(90, 74, 53, 0.03); border: 1px dashed rgba(90, 74, 53, 0.18); border-radius: 6px; } /* Filter-hidden docs (JS toggled from Task 5) */ .kyc-snap-doc[hidden] { display: none; } /* Kanban layout - three columns Basic / Negotiation / Export */ .kyc-snap--kanban { padding: 12px 14px; } .kyc-snap-kanban-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .kyc-snap-col { background: #fff; border: 1px solid rgba(90, 74, 53, 0.14); border-radius: 8px; padding: 10px; min-height: 120px; display: flex; flex-direction: column; gap: 8px; } .kyc-snap-col-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid rgba(90, 74, 53, 0.10); } .kyc-snap-col-title { font-family: var(--font-serif); font-size: 13px; font-weight: 700; color: var(--text, #2a1e10); } .kyc-snap-col-count { font-size: 11px; font-weight: 700; color: var(--text-dim, #7a6a55); } .kyc-snap-col--basic .kyc-snap-col-title { color: #b23c40; } .kyc-snap-col--negotiation .kyc-snap-col-title { color: #7a5cb0; } .kyc-snap-col--export .kyc-snap-col-title { color: #4d8a3d; } .kyc-snap-col-body { display: flex; flex-direction: column; gap: 4px; } @media (max-width: 900px) { .kyc-snap-kanban-cols { grid-template-columns: 1fr; } } /* ============================================================ V28.593 - KYC pane below the Add-Lot new-row on truck detail. The .wb-lot-kyc-pane sits inside the cloned
template so it moves with the row. Hidden until JS injects a snapshot. Uses the Chunk 1 (.kyc-snap*) styling; this block just sizes + frames the container. ============================================================ */ .wb-lot-kyc-pane { grid-column: 1 / -1; margin: 6px 0 10px 0; padding: 10px 12px; background: rgba(90, 74, 53, 0.04); border: 1px solid rgba(90, 74, 53, 0.14); border-radius: 8px; max-width: 640px; } .wb-lot-kyc-pane[hidden] { display: none !important; } .cpm-lot-page { padding: 24px; max-width: 1200px; margin: 0 auto; } .cpm-lot-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; } .cpm-lot-back { color: #8B6F47; text-decoration: none; font-size: 14px; font-weight: 500; transition: color 200ms; } .cpm-lot-back:hover { color: #5A4A35; } .cpm-lot-title { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 28px; font-weight: 600; color: #1A1410; } .cpm-lot-title-eyebrow { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: #8B6F47; } .cpm-lot-title-code { font-size: 24px; font-weight: 700; color: #2C1810; } .cpm-lot-toggle { display: flex; gap: 8px; margin-bottom: 24px; border-bottom: 2px solid #E8DCCC; } .cpm-lot-toggle-btn { padding: 12px 16px; background: transparent; border: none; border-bottom: 3px solid transparent; color: #8B6F47; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 200ms; margin-bottom: -2px; } .cpm-lot-toggle-btn:hover { color: #5A4A35; } .cpm-lot-toggle-btn--active { color: #B26340; border-bottom-color: #B26340; } .cpm-lot-view { display: grid; gap: 24px; } .cpm-lot-view[hidden] { display: none; } .cpm-lot-section { padding: 16px; background: #FFFBF5; border: 1px solid #E8DCCC; border-radius: 8px; } .cpm-lot-section-head { margin: 0 0 12px 0; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: #8B6F47; } .cpm-lot-definition-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin: 0; padding: 0; } .cpm-lot-definition-list dt { display: block; font-size: 13px; font-weight: 600; color: #5A4A35; margin-bottom: 4px; } .cpm-lot-definition-list dd { display: block; margin: 0; font-size: 14px; color: #2C1810; word-break: break-word; } .cpm-lot-muted { margin: 0; padding: 12px; text-align: center; font-size: 14px; color: #A49080; font-style: italic; } .cpm-lot-placeholder { padding: 20px; text-align: center; color: #8B6F47; } @media (max-width: 768px) { .cpm-lot-page { padding: 16px; } .cpm-lot-title { flex-direction: column; align-items: flex-start; font-size: 20px; gap: 8px; } .cpm-lot-definition-list { grid-template-columns: 1fr; gap: 12px; } } /* ============================================================ V28.595 - Transaction Documents panel on CPM Lot Dashboard. Uses the compliance rail palette; state pills mirror .kyc-snap-doc-state colours from V28.591. ============================================================ */ .cpm-lot-docs-table { width: 100%; border-collapse: collapse; margin-top: 8px; } .cpm-lot-docs-table th { padding: 8px 10px; font-size: 10px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-dim, #7a6a55); text-align: left; font-weight: 700; border-bottom: 1px solid rgba(90, 74, 53, 0.15); } .cpm-lot-docs-table td { padding: 10px; border-bottom: 1px solid rgba(90, 74, 53, 0.08); font-size: 13px; vertical-align: middle; } .cpm-lot-docs-table .center { text-align: center; } .cpm-lot-doc-state { padding: 3px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .cpm-lot-doc-state--pending { background: rgba(212, 166, 55, 0.15); color: #a37a1a; } .cpm-lot-doc-state--approved { background: rgba(77, 138, 61, 0.15); color: #3d6b30; } .cpm-lot-doc-state--rejected { background: rgba(178, 60, 64, 0.15); color: #8a2d30; } .cpm-lot-doc-state--not_applicable { background: rgba(184, 176, 160, 0.20); color: #6a6355; } .cpm-lot-doc-state--absent { background: rgba(90, 74, 53, 0.08); color: var(--text-dim, #7a6a55); } .cpm-lot-doc-upload-form { display: inline-flex; gap: 6px; align-items: center; } .cpm-lot-doc-upload-form input[type="file"] { max-width: 220px; font-size: 11px; } /* ============================================================ V28.597 Chunk 5 - Cross-surface doc-status pill. Small chip showing `📎 X/Y` for approved / required transaction docs. Reused across CPM Lot Dashboard header, Weighbridge portal list truck rows, and Weighbridge truck detail lot rows. ============================================================ */ .doc-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; margin-left: 6px; background: rgba(90, 74, 53, 0.06); border: 1px solid rgba(90, 74, 53, 0.14); border-radius: 4px; font-size: 11px; font-weight: 600; color: var(--text-dim, #7a6a55); vertical-align: middle; } .pm-advanced-toggle { margin-top: 16px; padding-top: 12px; border-top: 1px dashed rgba(90, 74, 53, 0.20); } .pm-advanced-toggle-btn { background: none; border: none; cursor: pointer; padding: 4px 0; text-align: left; font-size: 12.5px; font-weight: 600; color: var(--text-dim, #7a6a55); letter-spacing: 0.02em; } .pm-advanced-toggle-btn:hover { color: var(--accent, #8A5C3A); } .pm-advanced-hint { margin-top: 6px; font-size: 12px; } /* ============================================================ V28.601c - Ivan's SOP picker in the Pad allocation modal. The picker replaces the type-and-count-rows UI: the operator chooses provenance (North/South) and grade range (Low/Med/ High/VeryHigh); the number of sample codes generated is a fixed function of that pair (SOP section 5+6). ============================================================ */ .pm-sop-intro { margin-top: 0; margin-bottom: 12px; font-size: 12.5px; } .pm-sop-picker { display: flex; flex-direction: column; gap: 16px; } .pm-sop-block { display: flex; flex-direction: column; gap: 8px; } .pm-sop-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim, #7a6a55); } .pm-sop-radio-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .pm-sop-radio-row--four { grid-template-columns: repeat(4, 1fr); } @media (max-width: 640px) { .pm-sop-radio-row--four { grid-template-columns: repeat(2, 1fr); } } .pm-sop-card { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1.5px solid var(--border, #E1DBC9); border-radius: 8px; background: #fff; cursor: pointer; transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease; user-select: none; } .pm-sop-card:hover { border-color: var(--accent, #8A5C3A); } .pm-sop-card input[type="radio"] { /* Hidden but focusable: keyboard users can Tab in + arrow-key across the group. Space toggles the selected card. */ position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } .pm-sop-card:focus-within { outline: none; box-shadow: 0 0 0 3px rgba(168, 92, 58, 0.20); } .pm-sop-card--selected { border-width: 2px; border-color: var(--accent, #9C5B2B); background: #FAF3E9; } .pm-sop-card-num { font-size: 20px; font-weight: 800; color: var(--ink, #2B2620); line-height: 1; } .pm-sop-card-title { font-size: 11px; font-weight: 700; color: var(--ink, #322618); letter-spacing: 0.01em; } .pm-sop-card-sub { font-size: 9.5px; color: var(--text-dim, #7a6a55); line-height: 1.3; } .pm-sop-preview { margin-top: 4px; padding: 12px 14px; background: rgba(168, 92, 58, 0.05); border: 1px solid rgba(168, 92, 58, 0.18); border-radius: 8px; } .pm-sop-preview-summary { font-size: 12.5px; color: var(--text-dim, #7a6a55); margin-bottom: 8px; line-height: 1.5; } .pm-sop-preview-summary strong { color: var(--ink, #322618); font-weight: 700; } .pm-sop-preview .pm-codes-list { display: grid; /* V28.602a - bumped from 140 -> 172px so a 21-char PAD code (e.g. 036-07-26-PAD-001-001) fits the column at 11.5px mono without any truncation. */ grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 4px; margin-top: 0; } .pm-sop-preview .pm-codes-row { display: flex; padding: 0; } /* V28.601e - retained sub-sample chip: dashed muted terracotta so the operator can eyeball the lab/retained split within each bucket without reading each code. */ .pm-card-code-chip--retained { background: rgba(90, 74, 53, 0.10); color: #7a6a55; border: 1px dashed rgba(90, 74, 53, 0.38); } /* ============================================================ V28.618 - Advances / Reconciliation Queue restructure. Splits the flat 65+-row queue into a "Needs your attention" section (always visible, top of page) and a collapsible "Settled" section (Allocated + Paid Out, hidden by default). The 2-block summary at the top of the queue tells the operator what they still need to action + a rough dollar figure they still have to allocate. ============================================================ */ .recon-queue-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 4px 0 16px; } @media (max-width: 560px) { .recon-queue-summary { grid-template-columns: 1fr; } } .recon-queue-summary-block { padding: 14px 18px; border: 1px solid var(--border, #E1DBC9); border-radius: 10px; background: #fff; display: flex; flex-direction: column; gap: 2px; } .recon-queue-summary-block--action { border-left: 4px solid var(--accent, #8A5C3A); background: rgba(168, 92, 58, 0.05); } .recon-queue-summary-block--settled { border-left: 4px solid rgba(90, 74, 53, 0.20); } .recon-queue-summary-value { font-size: 26px; font-weight: 700; color: var(--ink, #322618); font-family: var(--font-serif, Georgia, serif); line-height: 1.1; font-variant-numeric: tabular-nums; } .recon-queue-summary-block--settled .recon-queue-summary-value { color: var(--text-dim, #7a6a55); } .recon-queue-summary-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim, #7a6a55); margin-top: 2px; } .recon-queue-summary-sub { font-size: 12px; color: var(--text-dim, #7a6a55); margin-top: 2px; } /* Empty state when there's nothing to action */ .recon-empty-cell { padding: 24px 16px; text-align: center; color: var(--text-dim, #7a6a55); font-style: italic; } /* Divider + toggle bar for the settled section */ .recon-queue-divider > td { padding: 0 !important; background: transparent; border: 0; } .recon-settled-toggle { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 16px; background: rgba(168, 92, 58, 0.06); border: 1px solid rgba(168, 92, 58, 0.16); border-radius: 8px; margin: 8px 0; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink, #322618); text-align: left; transition: background 0.12s ease, border-color 0.12s ease; } .recon-settled-toggle:hover { background: rgba(168, 92, 58, 0.10); border-color: rgba(168, 92, 58, 0.28); } .recon-settled-toggle-chev { display: inline-flex; align-items: center; justify-content: center; width: 18px; color: var(--accent, #8A5C3A); font-size: 12px; transition: transform 0.15s ease; } .recon-settled-toggle[aria-expanded="true"] .recon-settled-toggle-chev { transform: rotate(90deg); } .recon-settled-toggle-label { flex: 1; } .recon-settled-toggle-hint { font-size: 11.5px; font-weight: 500; letter-spacing: 0.02em; } /* Muted rows in the settled section — makes it clear at a glance that these are already-actioned invoices. */ .recon-tbody-settled .recon-invoice-row td { background: rgba(90, 74, 53, 0.02); } .recon-tbody-settled .recon-invoice-row td.mono, .recon-tbody-settled .recon-invoice-row td.num { color: var(--text-dim, #7a6a55); } /* ============================================================ V28.621 - Miner Mapping portal. Full-height layout with a sidebar (kind filter + search + list) on the left and the Leaflet map filling the rest of the viewport. Terracotta pin variants match the app colour family; the popover shell reads as a mini kpi card so click-through data feels native. ============================================================ */ .mm-page { display: flex; flex-direction: column; /* Divide by --app-zoom so the map fills the REAL viewport height under the global scale (a bare 100vh renders short and leaves a beige band below). */ height: calc(100vh / var(--app-zoom, 1) - 120px); min-height: 480px; padding-bottom: 8px; } .mm-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; } .mm-sub { margin: 4px 0 0; font-size: 12.5px; max-width: 640px; } .mm-head-actions { display: flex; gap: 8px; } .mm-layout { flex: 1; display: grid; grid-template-columns: 320px 1fr; gap: 12px; min-height: 0; } @media (max-width: 900px) { .mm-layout { grid-template-columns: 1fr; grid-template-rows: 40vh 1fr; } } .mm-sidebar { background: #fff; border: 1px solid var(--border, #E1DBC9); border-radius: 12px; display: flex; flex-direction: column; min-height: 0; overflow: hidden; } .mm-filters { padding: 12px 14px; border-bottom: 1px solid var(--border, #E1DBC9); display: flex; flex-direction: column; gap: 8px; } .mm-filter { display: flex; flex-direction: column; gap: 3px; } .mm-filter-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim, #7a6a55); } .mm-filter select, .mm-filter input { padding: 8px 10px; font-size: 13px; border: 1px solid var(--border, #E1DBC9); border-radius: 6px; background: #fff; color: var(--ink, #322618); } .mm-filter select:focus, .mm-filter input:focus { outline: none; border-color: var(--accent, #8A5C3A); box-shadow: 0 0 0 3px rgba(168, 92, 58, 0.15); } .mm-count { font-size: 11.5px; align-self: flex-end; } .mm-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; } .mm-list-item { display: flex; gap: 10px; padding: 10px 14px; border-bottom: 1px solid rgba(90, 74, 53, 0.08); cursor: pointer; transition: background 0.1s ease; } .mm-list-item:hover { background: rgba(168, 92, 58, 0.06); } .mm-list-kind { width: 6px; border-radius: 3px; flex-shrink: 0; } .mm-list-body { flex: 1; min-width: 0; } .mm-list-name { font-size: 13px; font-weight: 600; color: var(--ink, #322618); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mm-list-meta { font-size: 11.5px; color: var(--text-dim, #7a6a55); margin-top: 2px; } .mm-list-empty { padding: 24px 16px; text-align: center; font-size: 12.5px; font-style: italic; } /* Map viewport */ .mm-map-wrap { border: 1px solid var(--border, #E1DBC9); border-radius: 12px; overflow: hidden; min-height: 0; } #mm-map { width: 100%; height: 100%; min-height: 480px; background: #e8e0d0; } .mm-tile-warn { background: #B04A2F; color: #fff; padding: 6px 10px; border-radius: 6px; font-size: 12px; max-width: 320px; box-shadow: 0 2px 6px rgba(0,0,0,0.2); } /* Pin marker (Leaflet DivIcon) */ .mm-pin-wrap { background: transparent; border: 0; } .mm-pin { width: 28px; height: 28px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 700; } .mm-pin span { transform: rotate(45deg); line-height: 1; } /* V28.624 - Active pin (recent arrivals in the rolling window). Bigger, glowing outline, badge in the top-right corner. */ .mm-pin-active { width: 36px; height: 36px; font-size: 14px; border-width: 3px; box-shadow: 0 0 0 4px rgba(178, 99, 64, 0.20), 0 3px 10px rgba(0, 0, 0, 0.30); animation: mm-pin-pulse 2.4s ease-in-out infinite; } @keyframes mm-pin-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(178, 99, 64, 0.20), 0 3px 10px rgba(0, 0, 0, 0.30); } 50% { box-shadow: 0 0 0 8px rgba(178, 99, 64, 0.10), 0 3px 10px rgba(0, 0, 0, 0.30); } } .mm-pin-badge { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #B26340; color: #fff; font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); pointer-events: none; } /* Sidebar list badge (mirrors the pin badge, inline in the row). */ .mm-list-badge { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 10px; background: #B26340; color: #fff; font-size: 10.5px; font-weight: 700; vertical-align: middle; } .mm-pop-active-label { color: #B26340; } .mm-pop-hint { font-size: 10.5px; margin-top: 4px; font-style: italic; } /* Popover shell */ .mm-popup .leaflet-popup-content-wrapper { border-radius: 10px; padding: 0; box-shadow: 0 4px 20px rgba(20, 40, 55, 0.14); } .mm-popup .leaflet-popup-content { margin: 0; min-width: 240px; } .mm-popover { padding: 14px 16px 12px; font-size: 13px; color: var(--ink, #322618); } .mm-pop-kind { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } .mm-pop-name { font-size: 15.5px; font-weight: 700; margin-top: 2px; margin-bottom: 8px; } .mm-pop-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 12.5px; } .mm-pop-row span:first-child { color: var(--text-dim, #7a6a55); } .mm-pop-row b { color: var(--ink, #322618); font-weight: 600; } .mm-pop-sep { height: 1px; background: rgba(90, 74, 53, 0.14); margin: 8px 0; } .mm-pop-section-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim, #7a6a55); margin-bottom: 3px; } .mm-pop-notes { font-size: 12px; color: var(--ink, #322618); white-space: pre-wrap; } .mm-pop-actions { margin-top: 10px; display: flex; justify-content: flex-end; } /* Modal form layout */ .mm-form-body { display: flex; flex-direction: column; gap: 12px; } .mm-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .mm-hint { font-size: 11.5px; margin: -6px 0 0; } .mm-form-error { color: #a24; font-size: 12.5px; background: rgba(200, 60, 60, 0.06); border: 1px solid rgba(200, 60, 60, 0.24); padding: 8px 10px; border-radius: 6px; } /* V28.622 - Miner Mapping autocomplete picker (reusable). Attaches to any [data-mm-picker] input inside a .mm-picker-cell anchor. */ .mm-picker-cell { position: relative; } .mm-picker-dropdown { position: absolute; top: 100%; left: 0; z-index: 40; margin-top: 2px; min-width: 220px; max-width: 360px; max-height: 260px; overflow-y: auto; background: #fff; border: 1px solid var(--border, #E1DBC9); border-radius: 6px; box-shadow: 0 6px 20px rgba(60, 40, 20, 0.16); } .mm-picker-item { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid rgba(90, 74, 53, 0.06); } .mm-picker-item:last-child { border-bottom: 0; } .mm-picker-item:hover, .mm-picker-item-focused { background: rgba(168, 92, 58, 0.09); } .mm-picker-item-name { font-size: 13px; font-weight: 600; color: var(--ink, #322618); } .mm-picker-item-meta { font-size: 11.5px; color: var(--text-dim, #7a6a55); margin-top: 1px; } .mm-picker-empty { padding: 10px 12px; font-size: 12.5px; color: var(--text-dim, #7a6a55); font-style: italic; } /* V28.645 - CPM lot code link. Anywhere a lot code appears in the app, wrap it via the cpm_lot_link filter and it becomes a link to the CPM Lot Dashboard, styled as a subtle terracotta monospace. */ .cpm-lot-link { color: #8A5C3A; text-decoration: none; font-weight: 600; } .cpm-lot-link:hover { text-decoration: underline; } /* V28.641 - Floating chat bubble at bottom-left. Any authenticated user can click it to raise a query/alert straight to CPM Admin. */ .quick-chat { position: fixed; bottom: 22px; left: 22px; /* Above the sidebar (z-index 1100) so the bubble is never hidden behind the left panel where they overlap in the bottom-left corner. */ z-index: 1200; } .quick-chat-bubble { width: 54px; height: 54px; border-radius: 50%; border: none; background: linear-gradient(135deg, #8A5C3A 0%, #B26340 100%); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(90, 74, 53, 0.35); transition: transform 0.18s ease, box-shadow 0.18s ease; position: relative; } .quick-chat-bubble::after { content: ""; position: absolute; bottom: 4px; right: 6px; width: 10px; height: 10px; border-radius: 50%; background: #3D6A46; border: 2px solid #fff; } .quick-chat-bubble:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 8px 20px rgba(90, 74, 53, 0.42); } .quick-chat-bubble:focus-visible { outline: none; box-shadow: 0 4px 14px rgba(90, 74, 53, 0.35), 0 0 0 4px rgba(178, 99, 64, 0.28); } .quick-chat[data-open] .quick-chat-bubble { transform: rotate(15deg); } .quick-chat-panel { position: absolute; bottom: 66px; left: 0; width: 340px; background: #fff; border-radius: 14px; border: 1px solid var(--border, #E1DBC9); box-shadow: 0 12px 32px rgba(60, 40, 20, 0.22); overflow: hidden; animation: quick-chat-in 0.18s ease-out; } @keyframes quick-chat-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .quick-chat-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 14px 16px 12px; background: linear-gradient(135deg, #8A5C3A 0%, #B26340 100%); color: #fff; } .quick-chat-title { font-size: 14px; font-weight: 700; line-height: 1.2; } .quick-chat-sub { font-size: 11.5px; color: rgba(255, 255, 255, 0.82); margin-top: 2px; } .quick-chat-close { background: transparent; border: none; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; padding: 0; opacity: 0.85; transition: opacity 0.15s ease; } .quick-chat-close:hover { opacity: 1; } .quick-chat-body { padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 10px; } .quick-chat-avatar-row { display: flex; gap: 8px; align-items: flex-start; } .quick-chat-avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #B26340, #8A5C3A); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .quick-chat-bubble-msg { background: rgba(168, 92, 58, 0.07); padding: 8px 12px; border-radius: 12px 12px 12px 4px; font-size: 12.5px; color: var(--text, #322618); line-height: 1.4; } .quick-chat-input { width: 100%; border: 1px solid var(--border, #E1DBC9); border-radius: 8px; padding: 8px 10px; font-family: inherit; font-size: 13px; color: var(--text, #322618); resize: vertical; min-height: 60px; box-sizing: border-box; } .quick-chat-input:focus { outline: none; border-color: var(--accent, #8A5C3A); box-shadow: 0 0 0 3px rgba(168, 92, 58, 0.15); } .quick-chat-error { font-size: 11.5px; color: #A24030; background: rgba(162, 64, 48, 0.06); padding: 6px 10px; border-radius: 6px; } .quick-chat-actions { display: flex; justify-content: flex-end; } .quick-chat-send { background: linear-gradient(135deg, #8A5C3A 0%, #B26340 100%); color: #fff; border: none; border-radius: 8px; padding: 8px 18px; font-size: 13px; font-weight: 600; cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease; } .quick-chat-send:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(90, 74, 53, 0.28); } .quick-chat-send:disabled { opacity: 0.55; cursor: wait; transform: none; box-shadow: none; } .quick-chat-success { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 8px 12px; text-align: center; } .quick-chat-success-check { width: 40px; height: 40px; border-radius: 50%; background: #3D6A46; color: #fff; font-size: 22px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .quick-chat-success-msg { font-size: 12.5px; color: var(--text, #322618); max-width: 220px; line-height: 1.4; } @media (max-width: 600px) { .quick-chat-panel { width: calc(100vw - 44px); max-width: 340px; } } /* V28.725 - Process Time Analytics subsection at the bottom of the CPM Dashboard. Uses the same warm cream + brown palette + card radii + shadow spec as the rest of the dashboard so it reads as a native continuation. Class prefix `.pta-*`. */ .pta-card { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 20px; } .pta-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .pta-title { margin: 0; } .pta-subtitle { margin: 4px 0 0; font-size: 13px; color: var(--text-dim, #7a6a55); max-width: 640px; } .pta-period-wrap { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; } .pta-period-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim, #7a6a55); font-weight: 600; } .pta-period-select { padding: 6px 30px 6px 12px; font: inherit; font-size: 13px; border: 1px solid rgba(90, 74, 53, 0.20); border-radius: 8px; background: var(--bg-elev, #fff); color: var(--text, #2b241a); cursor: pointer; appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 10px center; } .pta-period-badge { padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, #8A5C3A 10%, transparent); color: #6A431F; font-size: 12px; font-weight: 600; } /* Summary cards row */ .pta-cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; } @media (max-width: 1200px) { .pta-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 640px) { .pta-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .pta-summary-card { background: color-mix(in srgb, #FBF3E1 60%, #fff); border: 1px solid rgba(178, 99, 64, 0.16); border-radius: 10px; padding: 14px 14px 12px; min-height: 108px; display: flex; flex-direction: column; gap: 4px; overflow: hidden; } .pta-summary-card--emphasis { background: linear-gradient(180deg, color-mix(in srgb, #B26340 6%, #fff) 0%, #fff 60%); border-color: rgba(178, 99, 64, 0.28); } .pta-summary-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim, #7a6a55); font-weight: 600; line-height: 1.25; } .pta-summary-value { font-family: "Playfair Display", "Times New Roman", Georgia, serif; font-size: 26px; font-weight: 500; color: var(--text, #2b241a); line-height: 1.1; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pta-summary-value--stage { font-family: inherit; font-size: 15px; font-weight: 600; white-space: normal; line-height: 1.25; } .pta-summary-value--code { font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, "Liberation Mono", monospace; font-size: 18px; font-weight: 600; } .pta-summary-sub { font-size: 11.5px; color: var(--text-dim, #7a6a55); margin-top: auto; } /* Chart cards */ .pta-chart { background: var(--bg-elev, #fff); border: 1px solid rgba(178, 99, 64, 0.12); border-radius: 12px; padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 12px; } .pta-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .pta-chart-title { margin: 0; font-family: "Playfair Display", "Times New Roman", Georgia, serif; font-size: 18px; font-weight: 500; color: var(--text, #2b241a); } .pta-chart-sub { margin: 4px 0 0; font-size: 12px; color: var(--text-dim, #7a6a55); flex-basis: 100%; } .pta-canvas-wrap { position: relative; } .pta-canvas-wrap--bar { height: 460px; } .pta-canvas-wrap--donut { height: 320px; } .pta-canvas-wrap--trend { height: 320px; } @media (max-width: 900px) { .pta-canvas-wrap--bar { height: 500px; } .pta-canvas-wrap--donut { height: 260px; } .pta-canvas-wrap--trend { height: 260px; } } .pta-lower { display: grid; grid-template-columns: 1fr 2fr; gap: 20px; } @media (max-width: 1100px) { .pta-lower { grid-template-columns: 1fr; } } .pta-trend-toggle { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(90, 74, 53, 0.08); } .pta-trend-pill { padding: 5px 12px; border-radius: 999px; border: 0; background: transparent; color: var(--text-dim, #7a6a55); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; transition: background 120ms ease, color 120ms ease; } .pta-trend-pill:hover { color: var(--text, #2b241a); } .pta-trend-pill.is-active { background: var(--bg-elev, #fff); color: var(--text, #2b241a); font-weight: 600; box-shadow: 0 1px 2px rgba(40, 30, 18, 0.06); } .pta-trend-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0 20px; text-align: center; font-size: 13px; } /* V28.749 - Settings > Notifications page. */ .notif-form { max-width: 720px; } .notif-card { margin-bottom: 16px; padding: 16px 18px; } .notif-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; } .notif-card-head .card-title { margin: 0; font-size: 15px; } .notif-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-dim, #7a6a55); cursor: pointer; } .notif-toggle input { width: 16px; height: 16px; cursor: pointer; } .notif-fields { display: grid; grid-template-columns: 1fr 210px; gap: 16px; align-items: start; } @media (max-width: 640px) { .notif-fields { grid-template-columns: 1fr; } } .notif-field { display: flex; flex-direction: column; gap: 5px; } .notif-field > label { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-dim, #7a6a55); } .notif-input { padding: 8px 10px; border: 1px solid var(--border, #E1DBC9); border-radius: 8px; background: #fff; font-family: var(--font-sans); font-size: 13px; color: var(--ink, #322618); width: 100%; box-sizing: border-box; resize: vertical; } .notif-input:focus { outline: none; border-color: var(--accent, #B26340); box-shadow: 0 0 0 2px rgba(178, 99, 64, 0.15); } .notif-time { width: 150px; } .notif-hint { font-size: 11px; } .notif-invalid { border-color: #B94A32 !important; box-shadow: 0 0 0 2px rgba(185, 74, 50, 0.15); } .notif-err { font-size: 11.5px; font-weight: 600; color: #B94A32; } .notif-actions { display: flex; justify-content: flex-end; margin-top: 4px; } /* =========================================================================== V28.750 - Compliance Document Register =========================================================================== */ .reg-class-pills { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; font-size: 13px; } .reg-class-pills-label { color: var(--text-dim, #7a6a55); font-weight: 600; } .reg-class-pill { padding: 4px 12px; border-radius: 999px; border: 1px solid var(--border, #E1DBC9); background: #FDFAF3; color: #322618; text-decoration: none; font-size: 12.5px; transition: background .12s, border-color .12s; } .reg-class-pill:hover { border-color: #8A5C3A; } .reg-class-pill.is-active { background: #8A5C3A; color: #fff; border-color: #8A5C3A; } .reg-group { margin-top: 22px; } .reg-group-head { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: #322618; margin: 0 0 8px; } .reg-group-count { font-size: 12px; font-weight: 600; color: #7a6a55; background: #EDE7D9; border-radius: 999px; padding: 1px 9px; } .reg-table { width: 100%; } .reg-row { cursor: pointer; } .reg-row:hover { background: #FDFAF3; } .reg-code-link { font-weight: 700; color: #8A5C3A; text-decoration: none; } .reg-code-link:hover { text-decoration: underline; } .reg-type-pill { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 6px; background: rgba(75,59,122,0.10); color: #4B3B7A; white-space: nowrap; } .reg-chip { display: inline-block; font-size: 12px; padding: 2px 9px; margin: 0 4px 4px 0; border-radius: 6px; background: #FDFAF3; border: 1px solid var(--border, #E1DBC9); color: #322618; } .reg-badge { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 5px; text-transform: uppercase; letter-spacing: .03em; } .reg-badge--active { background: rgba(79,110,88,0.14); color: #3D6A46; } .reg-badge--retired { background: rgba(90,74,53,0.10); color: #7a6a55; } .reg-lvl { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: rgba(90,74,53,0.10); color: #5a4a35; white-space: nowrap; } .reg-lvl--mandatory { background: rgba(185,74,50,0.14); color: #B94A32; } .reg-lvl--conditional { background: rgba(178,99,64,0.16); color: #8A5C3A; } .reg-lvl--optional { background: rgba(90,74,53,0.10); color: #7a6a55; } .reg-lvl--alternative { background: rgba(75,59,122,0.12); color: #4B3B7A; } .reg-lvl--to_confirm { background: rgba(202,138,4,0.16); color: #9a6a00; } .reg-cfg { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: rgba(79,110,88,0.12); color: #3D6A46; white-space: nowrap; } .reg-cfg--to_confirm { background: rgba(202,138,4,0.16); color: #9a6a00; } .reg-cfg--confirmed { background: rgba(79,110,88,0.12); color: #3D6A46; } .reg-cfg--draft { background: rgba(90,74,53,0.10); color: #7a6a55; } .reg-cfg--retired { background: rgba(90,74,53,0.10); color: #7a6a55; } /* V28.814 - clean 56-document library register. */ .reg-unique-count { margin-top: 10px; display: inline-block; font-family: var(--font-serif, serif); font-size: 20px; font-weight: 600; color: var(--accent); } .reg-lib-table td { vertical-align: middle; } .reg-doc-num { font-weight: 800; font-size: 14px; } .reg-doc-num-lg { display: inline-block; min-width: 1.6em; padding: 0 0.35em; margin-right: 6px; border-radius: 8px; background: var(--accent-bg, rgba(178,99,64,0.10)); color: var(--accent); } .reg-loc-count { font-variant-numeric: tabular-nums; color: var(--text-dim); } /* Module badges: one compact chip per module a document belongs to. */ .reg-modbadge { display: inline-block; min-width: 20px; text-align: center; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; margin: 1px 3px 1px 0; letter-spacing: 0.02em; white-space: nowrap; } .reg-modbadge--A { background: rgba(178,99,64,0.14); color: #8A4A2B; } .reg-modbadge--B { background: rgba(70,110,140,0.14); color: #305873; } .reg-modbadge--C { background: rgba(76,122,60,0.14); color: #2E5A24; } .reg-tbc-banner { border-left: 3px solid #c8912e; background: rgba(202,138,4,0.08); margin: 14px 0; font-size: 13px; color: #7a5a10; } .reg-tbc-banner strong { color: #9a6a00; } .reg-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 14px; } @media (max-width: 820px) { .reg-detail-grid { grid-template-columns: 1fr; } } .reg-detail-card { padding: 16px 18px; } .reg-detail-head { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: #8A5C3A; margin: 0 0 10px; } .reg-dl { display: grid; grid-template-columns: 160px 1fr; gap: 6px 14px; margin: 0; font-size: 13px; } .reg-dl dt { color: #7a6a55; font-weight: 600; } .reg-dl dd { margin: 0; color: #322618; } .reg-notes-cell { font-size: 12px; } .reg-note-line { margin: 0 0 3px; color: #5a4a35; } .reg-open-point { color: #9a6a00; font-weight: 600; } .reg-empty { padding: 22px; text-align: center; color: #7a6a55; } .app-adv-field--actions { display: flex; align-items: flex-end; gap: 8px; } .reg-filter-select { width: 100%; padding: 6px 8px; border: 1px solid var(--border, #E1DBC9); border-radius: 8px; background: #fff; font-size: 13px; color: #322618; } /* V28.775 - Skip-to-content link (keyboard a11y). Off-screen until focused, then pins to the top-left so keyboard users can jump past the nav. */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 2000; background: #322618; color: #fff; padding: 8px 16px; border-radius: 0 0 8px 0; font-family: var(--font-sans); font-size: 13px; font-weight: 600; text-decoration: none; } .skip-link:focus { left: 0; outline: 2px solid #B26340; outline-offset: 2px; } /* V28.778 - weighbridge truck-row actions: Open button + (empty-truck) kebab. */ .wb-row-actions { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; } /* V29.094 - Open button never wraps: nowrap ON THE BUTTON itself. */ .wb-open-btn { white-space: nowrap; padding: 6px 14px; font-size: 10.5px; font-weight: 700; } /* === V28.789 - Mineral Register liberation pipeline (v2) ============ */ /* Stage snapshot: progress dots + numbered pill (per approved demo). */ .mr-stage-snap { display: inline-flex; align-items: center; gap: 8px; } .mr-stage-dots { display: inline-flex; gap: 3px; } .mr-stage-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(0, 0, 0, 0.12); } .mr-stage-dots i.on { background: #A85C3A; } .mr-stage-dots i.cur { outline: 2px solid rgba(168, 92, 58, 0.3); outline-offset: 1px; } .mr-stage-chip { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; } .mr-stage-weighbridge { background: rgba(107, 127, 138, 0.12); color: #4F636E; border-color: rgba(107, 127, 138, 0.25); } .mr-stage-sampling { background: rgba(59, 110, 168, 0.12); color: #2F5A8C; border-color: rgba(59, 110, 168, 0.25); } .mr-stage-at_lab { background: rgba(122, 84, 168, 0.12); color: #5F4287; border-color: rgba(122, 84, 168, 0.25); } .mr-stage-compliance { background: rgba(23, 128, 128, 0.12); color: #116363; border-color: rgba(23, 128, 128, 0.25); } .mr-stage-liberated { background: rgba(46, 125, 50, 0.12); color: #256A29; border-color: rgba(46, 125, 50, 0.28); } /* V29.092 - 9-state operational rail chip tints for the Register. */ .mr-stage-pad_unsampled { background: rgba(107, 127, 138, 0.12); color: #4F636E; border-color: rgba(107, 127, 138, 0.25); } .mr-stage-in_sampling { background: rgba(59, 110, 168, 0.12); color: #2F5A8C; border-color: rgba(59, 110, 168, 0.25); } .mr-stage-in_negotiation { background: rgba(122, 84, 168, 0.12); color: #5F4287; border-color: rgba(122, 84, 168, 0.25); } .mr-stage-awaiting_liberation { background: rgba(23, 128, 128, 0.12); color: #116363; border-color: rgba(23, 128, 128, 0.25); } .mr-stage-free_ore { background: rgba(46, 125, 50, 0.12); color: #256A29; border-color: rgba(46, 125, 50, 0.28); } .mr-stage-blended { background: rgba(168, 92, 58, 0.12); color: #8A4A28; border-color: rgba(168, 92, 58, 0.28); } .mr-stage-milled { background: rgba(122, 74, 40, 0.12); color: #6B4326; border-color: rgba(122, 74, 40, 0.28); } .mr-stage-exported { background: rgba(90, 74, 53, 0.14); color: #4A3B29; border-color: rgba(90, 74, 53, 0.3); } /* Aging severity overrides the stage tint - red wins over amber. */ .mr-stage-chip.mr-stage-amber { background: rgba(196, 138, 26, 0.16); color: #8A5E00; border-color: rgba(196, 138, 26, 0.45); } .mr-stage-chip.mr-stage-red { background: rgba(178, 58, 46, 0.14); color: #922E24; border-color: rgba(178, 58, 46, 0.5); } /* Expanded per-stage delay cells: green tick = stage finished in Nd, bold "now" = still counting (amber/red when overdue). */ .mr-pipe-done { color: #256A29; font-variant-numeric: tabular-nums; } .mr-pipe-done::after { content: " \2713"; font-size: 10px; } .mr-pipe-cur { font-weight: 700; font-variant-numeric: tabular-nums; } .mr-pipe-cur.mr-pipe-amber { color: #8A5E00; } .mr-pipe-cur.mr-pipe-red { color: #922E24; } .mr-pipe-now { font-size: 10px; font-weight: 400; color: var(--text-dim, #6B6B66); } /* Lab drill-down badges: Humidity / Grade / Recovery readiness. */ .mr-rb { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; padding: 2px 8px; border-radius: 999px; } .mr-rb-ok { background: rgba(46, 125, 50, 0.12); color: #256A29; } .mr-rb-ok::before { content: "\2713 "; } .mr-rb-wait { background: rgba(0, 0, 0, 0.06); color: var(--text-dim, #6B6B66); } /* Pipeline column group joins the generic collapse/expand system. */ .mr-table[data-mr-pipeline-collapsed] [data-mr-extra="pipeline"] { display: none; } .mr-table[data-mr-pipeline-expanded] [data-mr-group-toggle="pipeline"] .mr-group-toggle-chevron { transform: rotate(90deg); } /* KPI strip: stage counts + the two wait averages. */ .mr-kpi-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 4px 0 12px; } .mr-kpi-tile { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 10px; border: 1px solid var(--border, #E1DBC9); border-radius: 8px; background: #fff; } .mr-kpi-dot { width: 8px; height: 8px; border-radius: 50%; align-self: center; } .mr-kpi-dot-weighbridge { background: #6B7F8A; } .mr-kpi-dot-sampling { background: #3B6EA8; } .mr-kpi-dot-at_lab { background: #7A54A8; } .mr-kpi-dot-compliance { background: #178080; } .mr-kpi-dot-liberated { background: #2E7D32; } .mr-kpi-num { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; } .mr-kpi-label { font-size: 11px; color: var(--text-dim, #7a6a55); } .mr-kpi-tile-median { background: rgba(107, 127, 138, 0.06); } .mr-kpi-window { font-size: 11px; } .mr-rec-src { border-bottom: 1px dotted currentColor; cursor: help; } /* V28.791 - Mineral Register CPM Lot ID link -> same CPM lot landing page as the Weighbridge link. Subtle terracotta text link (the cell is already mono); only rendered when the lot resolves to a real CPM lot. */ .mr-cpm-lot-link { color: #8b4a2b; text-decoration: none; border-bottom: 1px solid transparent; } .mr-cpm-lot-link:hover { border-bottom-color: currentColor; } /* === V28.804 - bucket-count allocation card number ================== */ .pm-sop-card-num { font-family: var(--font-serif, Georgia, serif); font-size: 24px; font-weight: 800; line-height: 1; text-align: center; } .pm-sop-radio-row .pm-sop-card { text-align: center; } /* =========================================================================== V28.805 - Liquidation Helper: Finalise Accepted Offer card + modal =========================================================================== */ .liq-finalise-card { margin-top: 14px; } .liq-finalise-sub { margin: 2px 0 12px; font-size: 12px; } /* Outlined green button: no solid fill in its default state. */ .liq-finalise-btn { width: 100%; background: #FDFAF3; color: #3D6A46; border: 1.5px solid #4F6E58; font-weight: 600; } .liq-finalise-btn:hover:not(:disabled) { background: rgba(79, 110, 88, 0.10); border-color: #3D6A46; color: #2f5438; } .liq-finalise-btn:focus-visible { outline: 2px solid #4F6E58; outline-offset: 2px; } .liq-finalise-btn:disabled { opacity: 0.5; cursor: not-allowed; color: #7a6a55; border-color: var(--border, #E1DBC9); background: #FDFAF3; } .liq-finalise-hint { margin: 12px 0 0; font-size: 11.5px; } .liq-finalise-hint[hidden] { display: none; } .liq-finalise-done { margin-top: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .liq-finalise-done[hidden] { display: none; } .liq-finalise-done-badge { font-size: 11.5px; font-weight: 700; color: #3D6A46; background: rgba(79, 110, 88, 0.14); border-radius: 999px; padding: 3px 10px; } .liq-finalise-register-link { font-size: 12.5px; font-weight: 600; color: #8b4a2b; text-decoration: none; } .liq-finalise-register-link:hover { text-decoration: underline; } /* Confirmation modal internals. */ .liq-finalise-modal-text { font-size: 13px; margin: 0 0 12px; color: #322618; } .liq-finalise-summary { margin: 0 0 8px; border: 1px solid var(--border, #E1DBC9); border-radius: 8px; background: #FDFAF3; padding: 4px 12px; } .liq-finalise-summary > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 5px 0; border-bottom: 1px solid rgba(225, 219, 201, 0.6); } .liq-finalise-summary > div:last-child { border-bottom: 0; } .liq-finalise-summary dt { font-size: 12px; color: #7a6a55; margin: 0; } .liq-finalise-summary dd { font-size: 13.5px; font-weight: 600; color: #322618; margin: 0; font-variant-numeric: tabular-nums; } .liq-finalise-warn { margin: 10px 0 0; padding: 9px 12px; border-radius: 8px; font-size: 12.5px; background: rgba(202, 138, 4, 0.12); border: 1px solid rgba(202, 138, 4, 0.4); color: #8a5e00; } .liq-finalise-warn[hidden] { display: none; } .liq-finalise-warn-detail { font-variant-numeric: tabular-nums; } .liq-finalise-modal-error { margin: 10px 0 0; padding: 9px 12px; border-radius: 8px; font-size: 12.5px; background: rgba(185, 74, 50, 0.12); border: 1px solid rgba(185, 74, 50, 0.4); color: #B94A32; } .liq-finalise-modal-error[hidden] { display: none; } /* =========================================================================== V28.806 - CPM lot Lot Detail / KYC Detail chooser + KYC Detail page =========================================================================== */ /* Chooser reuses the .pill-nav pattern (Weighbridge Dashboard/Trucks); this only positions it on the CPM lot pages. */ .cl-view-chooser { margin: 4px 0 18px; } .kyc-subtitle { margin: 2px 0 0; font-size: 13px; } .kyc-lot-meta { padding: 14px 18px; margin-bottom: 16px; } .kyc-meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 20px; margin: 0; } .kyc-meta-grid > div { display: flex; flex-direction: column; gap: 3px; } .kyc-meta-grid dt { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #7a6a55; margin: 0; } .kyc-meta-grid dd { margin: 0; font-size: 14px; font-weight: 600; color: #322618; } .kyc-upload-card { padding: 16px 18px; margin-bottom: 16px; } .kyc-upload-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-top: 6px; } .kyc-upload-form .form-field:first-of-type { grid-column: 1 / -1; } .kyc-upload-actions { grid-column: 1 / -1; } @media (max-width: 640px) { .kyc-upload-form { grid-template-columns: 1fr; } } /* V28.816 - supply route selector + route-specific document requirements. */ .kyc-route-form { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--border, #E1DBC9); } .kyc-route-form .form-field { min-width: 260px; } .kyc-route-hint { margin: 6px 0 0; font-size: 13px; } .kyc-route-card { padding: 16px 18px; margin-bottom: 16px; } .kyc-route-summary { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; } .kyc-route-badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--accent-bg, rgba(178,99,64,0.12)); color: var(--accent, #8A5C3A); } .kyc-route-flag { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 6px; background: rgba(178,99,64,0.12); color: #8A4A2B; letter-spacing: 0.02em; white-space: nowrap; } .kyc-doc-status { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 6px; white-space: nowrap; } .kyc-doc-status--received { background: rgba(79,110,88,0.14); color: #3D6A46; } .kyc-doc-status--outstanding { background: rgba(202,138,4,0.14); color: #9a6a00; } .kyc-doc-es { display: block; font-size: 11.5px; } .kyc-docs-card .data-table { width: 100%; } /* =========================================================================== V28.807 - Commercial Liquidation Dashboard =========================================================================== */ /* V29.103 - toolbar card: search pill + custom region dropdown, live filters. */ .ld-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: #fff; border: 1px solid var(--border, #E1DBC9); border-radius: 12px; padding: 12px 16px; margin: 4px 0 16px; } .ld-toolbar-search { display: inline-flex; align-items: center; gap: 8px; flex: 1 1 260px; max-width: 360px; background: var(--bg-elev-2, #F5F0E2); border: 1px solid var(--border, #E1DBC9); border-radius: 999px; padding: 7px 14px; } .ld-search-ic { opacity: 0.5; font-size: 12px; } .ld-search-input { flex: 1; border: 0; background: none; font-size: 13px; color: var(--ink, #2B2620); outline: none; } .ld-region-dd { position: relative; } .ld-region-btn { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--border, #E1DBC9); border-radius: 999px; padding: 7px 14px; font-size: 12.5px; font-weight: 700; color: var(--ink-2, #5A5348); } .ld-region-btn::-webkit-details-marker { display: none; } .ld-dd-caret { color: var(--text-muted, #98907E); font-size: 10px; } .ld-region-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 200px; background: #fff; border: 1px solid var(--border, #E1DBC9); border-radius: 10px; box-shadow: 0 8px 28px rgba(80, 50, 25, 0.16); padding: 6px; max-height: 320px; overflow-y: auto; } .ld-region-opt { display: block; padding: 7px 10px; border-radius: 6px; font-size: 12.5px; color: var(--ink, #2B2620); text-decoration: none; } .ld-region-opt:hover { background: var(--bg-elev-2, #F5F0E2); } .ld-region-opt.is-on { background: #FAF3E9; color: var(--accent, #9C5B2B); font-weight: 700; } .ld-toolbar-note { margin-left: auto; color: var(--accent, #9C5B2B); } .ld-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 22px; } .ld-metric { background: #fff; border: 1px solid var(--border, #E1DBC9); border-radius: 12px; border-top: 3px solid var(--border-strong, #CFC7B1); padding: 14px 16px; } .ld-metric--accent-ink { border-top-color: var(--accent, #9C5B2B); } .ld-metric--accent-green { border-top-color: var(--green, #4F7A4A); } .ld-metric--accent-red { border-top-color: #A33A2E; } .ld-metric--amber { border-top-color: #ECCF9A; background: #FDF3E0; border-color: #ECCF9A; } .ld-metric-label { color: var(--ink-2, #5A5348); } .ld-metric-value { margin-top: 8px; color: var(--ink, #2B2620); } .ld-metric--amber .ld-metric-value { color: #B7791F; } .ld-metric-value--chip { margin-top: 10px; } .ld-lotchip { display: inline-block; background: var(--bg-elev-2, #F5F0E2); border: 1px solid var(--border, #E1DBC9); border-radius: 6px; padding: 3px 10px; font-size: 15px; font-weight: 700; color: var(--ink, #2B2620); font-variant-numeric: tabular-nums; } .ld-metric-sub { margin-top: 5px; } .ld-section { margin-bottom: 26px; } .ld-section-title { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; } .ld-count { font-size: 11px; font-weight: 700; color: var(--ink-2, #5A5348); background: #E9E4D3; border-radius: 999px; padding: 1px 9px; text-transform: none; letter-spacing: 0; } .ld-count--warn { background: #FDF3E0; color: #B7791F; } /* table cells */ .ld-region { color: var(--text-dim, #6B6B66); } .ld-date { color: var(--text-dim, #6B6B66); font-variant-numeric: tabular-nums; white-space: nowrap; } .ld-agechip { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 6px; padding: 2px 8px; font-variant-numeric: tabular-nums; } .ld-agechip--amber { background: #FDF3E0; color: #B7791F; } .ld-agechip--green { background: #EAF3E7; color: var(--green, #4F7A4A); } .ld-actions, .ld-actions-th { text-align: right; white-space: nowrap; padding-right: 16px !important; width: 150px; } .ld-helper-btn { display: inline-block; background: var(--accent, #9C5B2B); color: #fff; border-radius: 7px; padding: 6px 12px; font-size: 10.5px; font-weight: 700; text-decoration: none; white-space: nowrap; } .ld-helper-btn:hover { background: #834b23; } /* V29.241 - Pending Liquidation "six figures, no tags" grid — port of the operator's mockup (alphaoro-vault3_2.html lines 154-173). Summary figures only; the anatomy wall guarantees no per-sample data reaches this Commercial surface. */ .ldg-card { background: #fff; border: 1px solid #E6E0CF; border-radius: 12px; overflow: hidden; } .ldg-hdr, .ldg-row { display: grid; grid-template-columns: 108px 1fr 92px 92px 78px 112px 74px 74px 120px; align-items: center; padding: 8px 14px; } .ldg-hdr { background: var(--table-head-bg, #DCCFB6); border-bottom: 1px solid var(--table-head-border, #C4B294); } .ldg-hdr span { font-size: 10px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--table-head-ink, #5C4326); } .ldg-hdr .ldg-r, .ldg-row .ldg-num, .ldg-actions { text-align: right; } .ldg-row { border-bottom: 1px solid #F0ECE0; font-variant-numeric: tabular-nums; } .ldg-row:last-child { border-bottom: 0; } .ldg-lot { font-size: 12px; font-weight: 800; color: inherit; text-decoration: none; white-space: nowrap; } .ldg-lot:hover { color: var(--accent, #9C5B2B); text-decoration: underline; } .ldg-miner { font-size: 11px; color: #6B6353; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 8px; } .ldg-num { font-size: 12.5px; font-weight: 700; } .ldg-mut { color: #98907E; font-weight: 500; } .ldg-await { background: #FDF3E0; border: 1px solid #ECCF9A; color: #8A6A1F; border-radius: 999px; font-size: 8.5px; font-weight: 800; padding: 3px 8px; } .ldg-amend { background: #FDF3E0; border: 1px solid #ECCF9A; color: #8A6A1F; border-radius: 5px; font-size: 7.5px; font-weight: 800; padding: 1px 4px; margin-left: 3px; } .ld-title-sub { font-size: 11px; font-weight: 500; color: #98907E; text-transform: none; letter-spacing: 0; margin-left: 8px; } /* Lot Code cell doubles as the Mineral Register link (same destination as the old Register action). Bold as before; subtle hover + a visible focus ring. */ .lot-code-link { color: inherit; text-decoration: none; border-radius: 3px; } .lot-code-link:hover { color: var(--accent); text-decoration: underline; } .lot-code-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Liquidation Helper action = compact terracotta pill (pa-btn-primary supplies the terracotta + white text; this just rounds it fully and keeps it on one line without inflating the row). */ .ld-helper-btn { border-radius: 999px; white-space: nowrap; } /* Dashboard tables: vertically centre cells; let long supplier names wrap within a bounded width so they never shove the numeric columns out of line. */ .ld-table th, .ld-table td { vertical-align: middle; } .ld-table .ld-col-supplier { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; } .ld-table .num { white-space: nowrap; } /* Delayed rows - subtle, professional warning tint (amber < red). */ .ld-delayed-row--amber { background: rgba(202, 138, 4, 0.06); } .ld-delayed-row--red { background: rgba(178, 58, 46, 0.07); } .ld-delay-flag { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 2px 8px; border-radius: 6px; } .ld-delay-flag--amber { background: rgba(202, 138, 4, 0.16); color: #8a5e00; } .ld-delay-flag--red { background: rgba(178, 58, 46, 0.14); color: #922E24; } /* ========================================================================== V29.302 - Liquidation Dashboard rework: two tabs, toolbar-on-table, DAYS aging, AU LOWEST + RE-SAMPLE columns, provider column. NO overflow:hidden anywhere (that clip fails to paint under the app's CSS zoom:0.8). ========================================================================== */ /* KPI strip: four design-system cards, 3px coloured top border. */ .lq-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 14px 0 16px; } .lq-kpi { background: #fff; border: 1px solid #E6E0CF; border-top: 3px solid #C4B294; border-radius: 12px; padding: 14px 16px; box-shadow: 0 1px 2px rgba(40,30,18,0.04); } .lq-kpi--ink { border-top-color: #5C4326; } .lq-kpi--amber { border-top-color: #CA8A04; } .lq-kpi--green { border-top-color: #3F6A3A; } .lq-kpi-label { color: var(--ink-2, #5C4326); } .lq-kpi-value { margin: 6px 0 2px; } .lq-kpi--amber .lq-kpi-value { color: #8a5e00; } .lq-kpi--green .lq-kpi-value { color: #3F6A3A; } .lq-kpi-sub { } /* Card = toolbar + table as one visual unit (no overflow clip). */ .lq-card { background: #fff; border: 1px solid #E6E0CF; border-radius: 12px; box-shadow: 0 1px 2px rgba(40,30,18,0.04); } .lq-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid #E6E0CF; border-radius: 12px; background: #FDFBF6; margin-bottom: 14px; } .lq-search { flex: 0 1 260px; } .lq-search-input { width: 100%; box-sizing: border-box; padding: 8px 12px; border: 1px solid #E0D9C6; border-radius: 8px; background: #fff; font-size: 13px; color: var(--ink-1, #3a2d1a); } .lq-search-input:focus { outline: none; border-color: #C08552; box-shadow: 0 0 0 3px rgba(192,133,82,0.14); } .lq-toolbar-count { margin-left: auto; color: var(--ink-3, #7a6a55); } .lq-toolbar-count b { font-variant-numeric: tabular-nums; color: var(--ink-2, #5C4326); } /* Custom dropdowns (native
, plain-link options — no overflow clip). */ .lq-dd { position: relative; } .lq-dd > summary { list-style: none; cursor: pointer; } .lq-dd > summary::-webkit-details-marker { display: none; } .lq-dd-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid #E0D9C6; border-radius: 8px; background: #fff; font-size: 12px; font-weight: 600; color: var(--ink-2, #5C4326); white-space: nowrap; } .lq-dd.is-on .lq-dd-btn { border-color: #9C5B2B; color: #9C5B2B; box-shadow: 0 0 0 1px #9C5B2B inset; } .lq-dd-caret { font-size: 9px; color: var(--ink-3, #7a6a55); } .lq-dd-menu { display: none; position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; min-width: 190px; background: #fff; border: 1px solid #E0D9C6; border-radius: 10px; box-shadow: 0 8px 24px rgba(40,30,18,0.14); padding: 5px; } .lq-dd[open] > .lq-dd-menu { display: block; } .lq-dd-opt { display: block; padding: 7px 10px; border-radius: 7px; font-size: 12.5px; color: var(--ink-1, #3a2d1a); text-decoration: none; white-space: nowrap; } .lq-dd-opt:hover { background: #F6F3E9; } .lq-dd-opt.is-on { background: rgba(156,91,43,0.10); color: #9C5B2B; font-weight: 700; } /* Table = CSS grid; header + rows share one template so columns can't drift. */ .lq-table { width: 100%; } .lq-row { display: grid; align-items: center; column-gap: 10px; padding: 0 16px 0 14px; min-height: 56px; border-bottom: 1px solid #F1ECDE; } /* V29.318 - the live search hides rows via the `hidden` attribute; `display:grid` above overrides the default `[hidden]{display:none}`, so without this the search filtered nothing (rows stayed visible). Must beat the grid rule. */ .lq-row[hidden] { display: none !important; } .lq-row:last-child { border-bottom: 0; } /* liqdash7 §3.1 - GOLD and HUMIDITY are ONE column each, holding a fixed 3-slot sub-grid, so every AVERAGE / LOWEST / RE-SAMPLE (and every humidity reading) sits at the same x down the whole page. MET LAB is Rec + NaCN·NaOH (span 2). */ /* liqdash8 §4.1 - ONE grid shared by both header tiers and every row (via --cols), with the gold column FIXED at 242px so its three 70px slots (222px) can never overflow into DAYS. Slot columns are fixed px; flexible columns carry minmaxes. */ .lq-table--pending { --cols: 104px minmax(200px,1.4fr) 84px 242px minmax(92px,.6fr) minmax(176px,1fr) minmax(90px,.6fr) minmax(110px,.7fr) 64px; } .lq-table--pending .lq-row { grid-template-columns: var(--cols); min-width: 1180px; } .lq-table--awaiting .lq-row { grid-template-columns: 110px 1.2fr 200px 1.5fr 180px 130px 140px 140px 120px; } .lq-table--executed2 .lq-row { grid-template-columns: 110px 1.2fr 190px 1.5fr 180px 120px 130px 160px 190px; } /* liqdash v5 §6 - executed PROVIDER is flush left; DOCUMENTS chips stack. */ .lq-table--executed2 .lq-prov { align-items: flex-start; } .lq-table--executed2 .lq-prov-name { text-align: left; } .lq-docs { flex-direction: column; gap: 3px; align-items: center; } .lq-table--executed .lq-row { grid-template-columns: 102px 1.15fr 1fr 0.95fr 1fr 1.7fr 0.85fr 0.95fr 0.9fr 1.3fr 142px; } /* liqdash7 §4 - Awaiting Approval: frozen record, centred cells. */ .lq-table--awaiting .lq-c { display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px 8px; min-height: 74px; font-variant-numeric: tabular-nums; } .lq-table--awaiting .lq-prov { flex-direction: column; gap: 2px; } .lq-table--awaiting .lq-prov-name { font-size: 10.5px; font-weight: 800; text-transform: uppercase; color: #6B6353; text-align: center; overflow-wrap: anywhere; line-height: 1.25; } .lq-table--awaiting .lq-prov-ruc { font-size: 9px; color: #B0A78F; } .lq-liq { gap: 8px; } .lq-liq-av { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 999px; background: #9C5B2B; color: #fff; font-size: 9.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; } .lq-liq-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; } .lq-liq-txt b { font-size: 11px; font-weight: 700; color: #2B2620; } .lq-liq-txt i { font-style: normal; font-size: 9px; color: #98907E; } .lq-ladder { gap: 6px; flex-wrap: wrap; } .lq-lad { display: flex; flex-direction: column; align-items: center; line-height: 1.1; } .lq-lad i { font-style: normal; font-size: 6.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: #B0A78F; } .lq-lad b { font-size: 13px; font-weight: 800; color: #2B2620; } .lq-lad--disc b { color: #B7791F; } .lq-lad--offer b { color: #3F6A3A; } .lq-lad-arrow { color: #C4B294; font-size: 12px; } .lq-lad-pct { margin-left: 4px; font-size: 9.5px; font-weight: 800; color: #B7791F; background: #FDF3E0; border: 1px solid #ECCF9A; border-radius: 999px; padding: 2px 7px; } .lq-paid { flex-direction: column; gap: 1px; } .lq-paid b { font-size: 13px; font-weight: 800; color: #3F6A3A; } .lq-paid i { font-style: normal; font-size: 9px; color: #98907E; } .lq-marg { flex-direction: column; gap: 0; } .lq-marg b { font-size: 13px; font-weight: 800; } .lq-marg i { font-style: normal; font-size: 8.5px; color: #98907E; } .lq-marg--ok b { color: #3F6A3A; } .lq-marg--warn b { color: #B7791F; } .lq-marg--bad b { color: #A33C2E; } .lq-marg--bad i { color: #A33C2E; } .lq-sent { flex-direction: column; gap: 1px; } .lq-sent b { font-size: 11.5px; font-weight: 800; color: #2B2620; } .lq-sent i { font-style: normal; font-size: 9px; color: #98907E; } /* the ✕ / ✓ decision icon buttons (inline SVG, never an emoji). */ .lq-decision { } .lq-dec { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; } .lq-dec--own { flex-direction: column; gap: 4px; } .lq-dec-btn { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; cursor: pointer; padding: 0; } .lq-dec-x { background: #fff; border: 1.5px solid #E0AFA5; color: #A33C2E; } .lq-dec-x:hover { background: #FBEAE7; } .lq-dec-check { background: #4F7D49; border: 1.5px solid #4F7D49; color: #fff; } .lq-dec-check:hover { background: #436b3e; } .lq-dec-btn.is-dim { opacity: 0.28; cursor: default; pointer-events: none; } .lq-dec--own { flex-direction: column; gap: 3px; } .lq-dec-row { display: inline-flex; gap: 10px; } .lq-dec--own .lq-dec-btn { width: 28px; height: 28px; } .lq-dec-own { font-size: 7.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: #B0A78F; } /* SENT BACK chip under a Pending lot chip. */ .lq-lotcell { flex-direction: column; gap: 4px; } .lq-sentback { font-size: 7.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: #B7791F; background: #FDF3E0; border: 1px solid #ECCF9A; border-radius: 5px; padding: 2px 6px; cursor: help; } /* liqdash7 §6 - the two in-app confirmation panels (never window.confirm). */ .lq-panel { position: fixed; inset: 0; z-index: 9998; display: flex; align-items: center; justify-content: center; } .lq-panel[hidden] { display: none !important; } .lq-panel-scrim { position: absolute; inset: 0; background: rgba(43, 38, 32, .35); } .lq-panel-card { position: relative; width: 470px; max-width: calc(100vw - 32px); background: #fff; border: 1px solid #E6E0CF; border-radius: 14px; box-shadow: 0 22px 44px -18px rgba(43, 38, 32, .45); padding: 22px 24px; } .lq-panel-eyebrow { display: flex; align-items: center; gap: 8px; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; } .lq-panel-eyebrow--ok { color: #3F6A3A; } .lq-panel-eyebrow--bad { color: #A33C2E; } .lq-panel-ic { width: 22px; height: 22px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; } .lq-panel-ic--ok { background: #4F7D49; color: #fff; } .lq-panel-ic--bad { background: #fff; border: 1.5px solid #E0AFA5; color: #A33C2E; } .lq-panel-title { font-size: 16px; font-weight: 800; color: #2B2620; margin: 12px 0 8px; } .lq-panel-body { font-size: 12.5px; color: #6B6353; line-height: 1.5; margin: 0 0 14px; } .lq-panel-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; background: #FAF8F0; border: 1px solid #E6E0CF; border-radius: 10px; padding: 11px 13px; } .lq-panel-facts > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .lq-panel-facts small { font-size: 7px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: #98907E; } .lq-panel-facts b { font-size: 12.5px; font-weight: 800; color: #2B2620; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .lq-fact-green { color: #3F6A3A !important; } .lq-panel-note { font-size: 11px; color: #6B6353; background: #FAF8F0; border: 1px solid #EDE7D8; border-radius: 8px; padding: 8px 11px; margin: 12px 0 0; } .lq-panel-reason { display: block; margin: 14px 0 0; } .lq-panel-reason-lbl { display: block; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: #A33C2E; margin-bottom: 5px; } .lq-panel-reason-lbl i { font-style: normal; font-weight: 600; color: #98907E; text-transform: none; letter-spacing: 0; } .lq-panel-reason textarea { width: 100%; box-sizing: border-box; min-height: 74px; border: 1px solid #E6E0CF; border-radius: 9px; padding: 9px 11px; font: inherit; font-size: 12.5px; resize: vertical; } .lq-panel-reason textarea:focus { outline: none; border-color: #D3B088; } .lq-panel-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; } .lq-panel-btn { font-size: 12.5px; font-weight: 700; border-radius: 9px; padding: 9px 16px; cursor: pointer; border: 1px solid transparent; } .lq-panel-btn--cancel { background: #fff; border-color: #D2C3A6; color: #5C4326; } .lq-panel-btn--go { background: #4F7D49; color: #fff; } .lq-panel-btn--go:hover { background: #436b3e; } .lq-panel-btn--back { background: #fff; border-color: #E0AFA5; color: #A33C2E; } .lq-panel-btn--back:hover:not(:disabled) { background: #FBEAE7; } .lq-panel-btn:disabled { opacity: .45; cursor: default; } .lq-toasts { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 8px; align-items: center; } .lq-toast { background: #2B2620; color: #fff; font-size: 12.5px; font-weight: 600; padding: 10px 18px; border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .24); opacity: 1; transition: opacity .3s; } .lq-toast.is-out { opacity: 0; } .liq-push-send { background: #4F7D49; color: #fff; border: 1px solid #4F7D49; } .liq-push-send:not(:disabled):hover { background: #436b3e; } /* liqdash7 §7 - the shared Kanban board: the three tabs as three columns. */ .lq-board--tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; } .lq-board--tabs .lq-col-head { padding: 12px 14px; background: #fff; } .lq-col--brown .lq-col-head { border-bottom: 3px solid #9C5B2B; } .lq-col--amber .lq-col-head { border-bottom: 3px solid #B7791F; } .lq-col--green .lq-col-head { border-bottom: 3px solid #4F7D49; } .lq-col-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: #2B2620; } .lq-kcard { background: #fff; border: 1px solid #E6E0CF; border-radius: 10px; padding: 11px 12px; display: flex; flex-direction: column; gap: 7px; } .lq-kcard[hidden] { display: none !important; } .lq-kcard-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .lq-kcard-prov { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .2px; color: #6B6353; overflow-wrap: anywhere; } .lq-kcard-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; } .lq-kcard-slots .lq-slot { width: auto; min-height: 30px; } .lq-kcard-btn { margin-top: 2px; align-self: flex-start; } .lq-kcard-liq { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; color: #2B2620; } .lq-kcard-paid { font-size: 11.5px; font-weight: 800; color: #3F6A3A; } .lq-kcard-net { color: #6B6353; font-weight: 700; } .lq-kcard-dec { display: flex; justify-content: flex-end; } .lq-kcard-appr { font-size: 10.5px; color: #6B6353; } .lq-col-more { padding: 8px 4px 2px; text-align: center; } /* ================= liqdash9 v4 - the process board ==================== */ /* Status multi-select in the toolbar (a count badge + checkbox options). */ .lq-dd-count { font-size: 9px; font-weight: 800; background: #9C5B2B; color: #fff; border-radius: 999px; padding: 1px 6px; margin-left: 2px; } .lq-dd-menu--status { min-width: 244px; } .lq-status-opt { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: 7px; font-size: 11.5px; color: #2B2620; text-decoration: none; } .lq-status-opt:hover { background: #F6F3E9; } .lq-status-box { width: 14px; height: 14px; border: 1.5px solid #C9BEA4; border-radius: 4px; background: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; } .lq-status-opt.is-on .lq-status-box { background: #4F7D49; border-color: #4F7D49; } .lq-status-opt.is-on .lq-status-box::after { content: ""; width: 6px; height: 3px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px); } .lq-status-sw { width: 8px; height: 8px; border-radius: 2px; flex: none; } .lq-status-opt em { font-style: normal; margin-left: auto; font-size: 9.5px; font-weight: 800; color: #98907E; } /* Kanban — three process columns. */ .lqp-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; } /* liqdash12 - the Kanban / List switch toggles the boards with the `hidden` attribute; the author display:grid above would beat the UA [hidden]{display:none} and leave the Kanban board on screen under a highlighted "List" — guard both boards explicitly. */ .lqp-board[hidden], .lq-boardcard[hidden], .lqp-col[hidden], .lqp-lrow[hidden], .lqp-band[hidden], .lq-resline[hidden] { display: none !important; } .lqp-col { background: #FAF8F0; border: 1px solid #E6E0CF; border-radius: 12px; overflow: hidden; } .lqp-hb { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #fff; border-bottom: 3px solid #C4B294; } .lqp-hb.is-br { border-bottom-color: #9C5B2B; } .lqp-hb.is-gr { border-bottom-color: #4F7D49; } .lqp-hb.is-am { border-bottom-color: #B7791F; } .lqp-hb h3 { font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif); font-size: 13px; font-weight: 800; letter-spacing: .55px; text-transform: uppercase; color: #2B2620; } .lqp-hb-sub { font-size: 10.5px; color: #98907E; } .lqp-hb-count { margin-left: auto; font-size: 10.5px; font-weight: 800; border-radius: 999px; padding: 3px 9px; font-variant-numeric: tabular-nums; } .lqp-hb.is-br .lqp-hb-count { background: #FAF3E9; color: #9C5B2B; } .lqp-hb.is-gr .lqp-hb-count { background: #E9F0E4; color: #3F6A3A; } .lqp-hb.is-am .lqp-hb-count { background: #FDF3E0; color: #B7791F; } .lqp-cards { padding: 12px; } .lqp-col-empty { padding: 22px 8px; text-align: center; font-size: 11.5px; color: #B0A78F; } /* the process card. */ .lqp-card { background: #fff; border: 1px solid #E6E0CF; border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; } .lqp-card:last-child { margin-bottom: 0; } .lqp-card.is-amber { background: #FDF8EE; border-color: #ECCF9A; box-shadow: inset 4px 0 0 #B7791F; } .lqp-card.is-red { background: #FCF1EE; border-color: #E0AFA5; box-shadow: inset 4px 0 0 #A33C2E; } .lqp-card-h { display: flex; align-items: center; gap: 8px; } .lqp-lot { font-family: ui-monospace, Menlo, monospace; font-size: 12px; font-weight: 800; color: #2B2620; background: #FAF8F0; border: 1px solid #E6E0CF; border-radius: 7px; padding: 4px 8px; white-space: nowrap; text-decoration: none; } .lqp-lot--re { color: #5D4A78; background: #F1EDF7; border-color: #CCC0E0; } .lqp-sentback { font-size: 7.5px; font-weight: 800; letter-spacing: .3px; color: #B7791F; background: #FDF3E0; border: 1px solid #ECCF9A; border-radius: 6px; padding: 3px 7px; white-space: nowrap; } /* liq v9 §3.7 - link glyph + "n lots" tag on a lot inside a linked offer (opens the offer) */ .lqp-offer, .lqp-offer.t-sub { display: inline-flex; align-items: center; gap: 4px; color: #5C4326; background: #F1E7D6; border: 1px solid #C4B294; border-radius: 6px; padding: 2px 7px; white-space: nowrap; text-decoration: none; } .lqp-offer b { font-variant-numeric: tabular-nums; } .lqp-offer:hover { background: #E8DCC6; } /* liq v9 §3.8 (final) - the card footer names the group's other lots and opens the Summary */ .lqp-grpbar, .lqp-grpbar.t-sub { display: flex; align-items: center; gap: 5px; margin-top: 8px; padding-top: 6px; border-top: 1px dashed #E6D3BC; color: #9C5B2B; font-weight: 700; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lqp-grpbar:hover { color: #7A4520; } .lqp-dys { margin-left: auto; display: inline-flex; gap: 4px; } .lqp-dy { font-size: 8.5px; font-weight: 800; color: #6B6353; background: #FAF8F0; border: 1px solid #E6E0CF; border-radius: 999px; padding: 3px 7px; white-space: nowrap; font-variant-numeric: tabular-nums; } .lqp-dy.is-amber { color: #B7791F; background: #FDF3E0; border-color: #ECCF9A; } .lqp-dy.is-red { color: #A33C2E; background: #FBEAE7; border-color: #E0AFA5; } .lqp-dy.is-total { color: #98907E; background: #fff; } .lqp-who { font-size: 9.5px; font-weight: 800; letter-spacing: .2px; text-transform: uppercase; color: #6B6353; margin: 6px 0 8px; line-height: 1.3; } .lqp-who-ruc { display: block; font-style: normal; font-weight: 500; font-size: 8.5px; letter-spacing: 0; text-transform: none; color: #B0A78F; margin-top: 1px; } .lqp-fig { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .lqp-slots { display: grid; grid-template-columns: 66px 66px 66px; gap: 5px; align-items: center; justify-items: center; } .lqp-tg { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.05; border-radius: 7px; padding: 4px 7px; white-space: nowrap; font-variant-numeric: tabular-nums; } .lqp-tg b { font-size: 12px; font-weight: 800; } .lqp-tg small { font-size: 6.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; margin-top: 1px; } .lqp-tg--empty { background: none; } .lqp-tg--av { background: #F4F8F2; border: 1px solid #C6D8BC; } .lqp-tg--av b { color: #3F6A3A; } .lqp-tg--av small { color: #7FA077; } .lqp-tg--lo { background: #FAF8F0; border: 1px solid #E0D9C6; } .lqp-tg--lo b { color: #8A6A1F; } .lqp-tg--lo small { color: #B0A78F; } .lqp-tg--re { background: #F5F1FA; border: 1px solid #CCC0E0; } .lqp-tg--re b { color: #5D4A78; } .lqp-tg--re small { color: #9184AB; } .lqp-tg--rp { background: #fff; border: 1.5px dashed #CCC0E0; padding: 7px 5px; } .lqp-tg--rp b { color: #8A79A8; font-size: 8px; letter-spacing: .3px; } .lqp-tg--rc { background: #EFF2F5; border: 1px solid #CBD3DB; } .lqp-tg--rc b { color: #4C5A68; } .lqp-tg--rc small { color: #7C8894; } /* liq11 §1.3c - met-lab recovery-outstanding hours on the card, coloured by band. */ .lqp-tg--wait { background: #EFF2F5; border: 1px solid #CBD3DB; } .lqp-tg--wait b { color: #4C5A68; } .lqp-tg--wait small { color: #7C8894; } .lqp-tg--wait.is-amber { background: #FDF8EE; border-color: #ECCF9A; } .lqp-tg--wait.is-amber b { color: #B7791F; } .lqp-tg--wait.is-red { background: #FCF1EE; border-color: #E0AFA5; } .lqp-tg--wait.is-red b { color: #A33C2E; } .lqp-tg--pd { background: #F4F8F2; border: 1px solid #C6D8BC; } .lqp-tg--pd b { color: #3F6A3A; font-size: 12.5px; } .lqp-tg--pd small { color: #7FA077; } .lqp-tg--pd.is-bad b { color: #A33C2E; } .lqp-tg--pd.is-bad small { color: #A33C2E; } .lqp-amend { color: #B7791F; font-size: 9px; } .lqp-hum { display: inline-flex; gap: 4px; margin-left: 4px; } .lqp-hc { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.05; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; color: #2B2620; background: #FAF8F0; border: 1px solid #E6E0CF; border-radius: 6px; padding: 4px 7px; white-space: nowrap; } .lqp-hc small { font-size: 6.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: #98907E; margin-top: 1px; } .lqp-hc.is-re { color: #5D4A78; background: #F1EDF7; border-color: #CCC0E0; } .lqp-hc.is-re small { color: #9184AB; } .lqp-need { font-size: 7.5px; font-weight: 800; letter-spacing: .3px; color: #B7791F; background: #FDF3E0; border: 1px solid #ECCF9A; border-radius: 6px; padding: 4px 7px; white-space: nowrap; } .lqp-ft { display: flex; align-items: center; gap: 6px; margin-top: 9px; padding-top: 8px; border-top: 1px solid #F5F1E6; } .lqp-doc { display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: 150px; font-size: 8px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; border-radius: 6px; padding: 4px 7px; white-space: nowrap; } .lqp-doc.is-no { border: 1.5px dashed #E0D9C6; color: #B0A78F; background: #fff; } .lqp-doc.is-ok { background: #EFECE0; border: 1px solid #DDD6C2; color: #6B6353; } .lqp-doc.is-last { background: #E4DAC4; border: 1px solid #C4B294; color: #5C4326; } .lqp-doc.is-last i { font-style: normal; font-weight: 700; letter-spacing: 0; text-transform: none; font-size: 8.5px; color: #8A7350; } /* liqdash v5 §2.3 - a chip that cannot be produced yet is dimmed, with a tooltip (RDL -> NEEDS HUMIDITY; PDC -> RE · PENDING / GRADES_READY). */ .lqp-doc.is-blocked { border: 1.5px dashed #E0D9C6; color: #C7BFAC; background: #FBFAF6; cursor: help; } .lqp-tk { width: 9px; height: 9px; border-radius: 50%; background: #4F7D49; display: inline-flex; align-items: center; justify-content: center; flex: none; position: relative; } .lqp-tk::after { content: ""; width: 4px; height: 2px; border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: rotate(-45deg) translate(0, -1px); } .lqp-act-wrap { margin-left: auto; display: inline-flex; gap: 8px; align-items: center; } .lqp-act { width: 28px; height: 28px; border-radius: 50%; background: #9C5B2B; display: inline-flex; align-items: center; justify-content: center; flex: none; } .lqp-more { text-align: center; padding: 6px 0 2px; font-size: 11px; color: #98907E; } .lqp-more-link { color: #9C5B2B; font-weight: 700; text-decoration: none; } .lqp-more-link:hover { text-decoration: underline; } /* List — the same rows grouped into status bands. */ .lqp-tbl-wrap { overflow-x: auto; } .lq-boardcard { background: #fff; border: 1px solid #E6E0CF; border-radius: 12px; } .lqp-tbl { --cols: 104px minmax(190px,1.1fr) 118px minmax(222px,1fr) minmax(88px,.5fr) minmax(176px,.8fr) minmax(120px,.6fr) minmax(158px,.7fr) 92px; min-width: 1200px; } .lqp-lhead { display: grid; grid-template-columns: var(--cols); background: var(--table-head-bg, #DCCFB6); border-bottom: 1px solid var(--table-head-border, #C4B294); } .lqp-lhead > div { font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif); font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--table-head-ink, #5C4326); padding: 7px 10px; text-align: center; } .lqp-band { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: #F6F3E9; border-bottom: 1px solid #E6E0CF; border-top: 1px solid #E6E0CF; cursor: pointer; } .lqp-band:focus-visible { outline: 2px solid #9C5B2B; outline-offset: -2px; } .lqp-band b { font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif); font-size: 9px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--band, #9C5B2B); } .lqp-chev { font-size: 9px; color: #9C5B2B; display: inline-flex; transition: transform .15s ease; } .lqp-band.is-collapsed .lqp-chev { transform: rotate(-90deg); } .lqp-band-rows[hidden] { display: none !important; } .lqp-band-sw { width: 8px; height: 8px; border-radius: 2px; } .lqp-band-count { font-size: 9px; font-weight: 800; border-radius: 999px; padding: 2px 7px; background: #fff; border: 1px solid #E6E0CF; color: #6B6353; } .lqp-band-sum { margin-left: auto; font-size: 10px; color: #98907E; } /* liqdash v5 - the legacy list band: sand swatch, grey (not brown) title. */ .lqp-band--legacy { background: #EFECE0; } .lqp-band--legacy b { color: #6B6353; } /* liqdash v5 §3.5 - the toolbar note ("N legacy lots hidden ... show / hide"). */ .lqp-legacynote { display: flex; align-items: center; gap: 7px; margin: 0 0 14px; font-size: 11px; color: #98907E; } .lqp-legacynote a { color: #9C5B2B; font-weight: 700; text-decoration: none; } .lqp-legacynote a:hover { text-decoration: underline; } .lqp-legacy-sw { width: 9px; height: 9px; border-radius: 2px; background: #C4B294; flex: none; } /* liqdash v5 §3.4 - the Legacy status entry sits below a divider. */ .lq-status-opt--legacy { border-top: 1px solid #F0ECE0; margin-top: 4px; padding-top: 10px; } /* liqdash v5 §6 - the LEGACY chip on Deals Executed. */ .lq-legacy-chip { display: inline-block; margin-left: 7px; font-size: 8px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: #6B6353; background: #EFECE0; border: 1px solid #DDD6C2; border-radius: 5px; padding: 2px 6px; vertical-align: middle; } .lq-sent-legacy { font-style: normal; font-size: 10px; color: #98907E; } /* liqdash v5 §5.3 - the super-admin "Mark executed" outline button on legacy rows. */ .lqp-legacy-exec { font-size: 9.5px; font-weight: 800; letter-spacing: .2px; text-transform: uppercase; color: #6B6353; background: #fff; border: 1px solid #C4B294; border-radius: 7px; padding: 5px 9px; cursor: pointer; white-space: nowrap; } .lqp-legacy-exec:hover { background: #F6F3E9; } /* liqdash v5 §7.3 - the mark-legacy-executed panel fields. */ .lq-lg-field { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; font-size: 10px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: #6B6353; } .lq-lg-field i { font-style: normal; font-weight: 500; text-transform: none; letter-spacing: 0; color: #B0A78F; } .lq-lg-field input, .lq-lg-field textarea { font: inherit; font-size: 12.5px; font-weight: 500; text-transform: none; letter-spacing: 0; color: #2B2620; background: #FFFDF8; border: 1px solid #D3B088; border-radius: 8px; padding: 8px 10px; } .lqp-lrow { display: grid; grid-template-columns: var(--cols); border-bottom: 1px solid #F0ECE0; } /* liqdash v5 §1.5 - LIST rows keep a white background; only their day pills carry the ageing colour (unlike the Kanban cards, which tint the whole card). */ .lqp-lc { padding: 9px 10px; display: flex; align-items: center; justify-content: center; gap: 6px; text-align: center; min-width: 0; } /* liqdash v5 §5.3 - PROVIDER is flush left: name over RUC, both aligned to the start. */ .lqp-lc--prov { flex-direction: column; gap: 1px; align-items: flex-start; justify-content: center; text-align: left; padding-left: 12px; } .lqp-lc--prov b { font-size: 10.5px; font-weight: 800; letter-spacing: .2px; color: #6B6353; text-transform: uppercase; line-height: 1.3; } .lqp-lc--prov i { font-style: normal; font-size: 9px; color: #B0A78F; } /* liqdash12 §2 - LOT column (104px): the code pill, then ONLY for a linked lot the "n lots" tag on its own line beneath it - never beside the code, never in PROVIDER. */ .lqp-lc--lot { padding-left: 6px; padding-right: 6px; } .lqp-lotc { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; } .lqp-lk { display: inline-flex; align-items: center; gap: 4px; font-size: 7.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: #9C5B2B; background: #F6EBE0; border: 1px solid #E6D3BC; border-radius: 5px; padding: 2px 6px; white-space: nowrap; text-decoration: none; } /* -> typography.css .t-* (7.5px tag, same tier as .lqp-sentback; mid-migration) */ .lqp-lk:hover { background: #F0DFCB; } .lqp-lk-ic { width: 9px; height: 9px; flex: none; } .lqp-lrow[data-lq-offer-url] { cursor: pointer; } .lqp-lc--dys { flex-direction: column; gap: 3px; } .lqp-lslots { display: grid; grid-template-columns: 62px 62px 62px; gap: 4px; justify-content: center; justify-items: center; } .lqp-lhum { flex-wrap: wrap; } .lqp-num { font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: #2B2620; } .lqp-mut { color: #C9C0AC; } .lqp-aw { display: inline-block; font-size: 8px; font-weight: 800; letter-spacing: .3px; color: #B7935B; background: #FEFBF4; border: 1px dashed #ECCF9A; border-radius: 6px; padding: 3px 7px; white-space: nowrap; } .lqp-waith { display: block; font-size: 9px; font-weight: 800; color: #4C5A68; margin-top: 2px; font-variant-numeric: tabular-nums; } .lqp-waith.is-amber { color: #B7791F; } .lqp-waith.is-red { color: #A33C2E; } .lqp-ldocs { flex-direction: column; gap: 4px; } .lqp-ldocs .lqp-doc { font-size: 7.5px; padding: 3px 6px; width: 138px; } /* liqdash7 §8 - the SENT BACK banner at the top of the Liquidator. */ .liq-sentback-banner { display: flex; align-items: flex-start; gap: 10px; background: #FDF3E0; border: 1px solid #ECCF9A; border-left: 3px solid #B7791F; border-radius: 10px; padding: 11px 14px; margin: 0 0 14px; } .liq-sentback-banner[hidden] { display: none !important; } .liq-sentback-tag { flex: 0 0 auto; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: #fff; background: #B7791F; border-radius: 5px; padding: 3px 7px; margin-top: 1px; } .liq-sentback-body { font-size: 12.5px; color: #6B5327; display: flex; flex-direction: column; gap: 2px; } .liq-sentback-body b { color: #8A5E00; } .liq-sentback-body i { font-style: normal; font-size: 10.5px; color: #98907E; } .lq-row--head { position: sticky; top: 0; z-index: 2; min-height: 40px; background: var(--table-head-bg, #DCCFB6); border-bottom: 1px solid var(--table-head-border, #C4B294); } /* Header cell type -> typography.css .t-tablehead (10px/700/uppercase/ls .6px). */ .lq-row--head .lq-c { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--table-head-ink, #5C4326); line-height: 1.15; } /* V29.331 - two-tier grouped header: block tier #D2C3A6 over sub tier #E4DAC4. */ .lq-table--pending .lq-row--head1, .lq-table--pending .lq-row--head2 { grid-template-columns: var(--cols); column-gap: 10px; padding: 0 16px 0 14px; min-width: 1180px; } .lq-row--head1 { position: sticky; top: 0; z-index: 3; min-height: 34px; background: #D2C3A6; border-bottom: 1px solid #C4B294; } .lq-row--head2 { position: sticky; top: 34px; z-index: 2; min-height: 30px; background: #E4DAC4; border-bottom: 1px solid #D2C3A6; } .lq-h1 { font-size: 8.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; color: #5C4326; text-align: center; justify-self: stretch; display: flex; align-items: center; justify-content: center; gap: 4px; } .lq-h1--l { justify-content: flex-start; } .lq-h1--c { justify-content: center; } .lq-h1--gold, .lq-h1--sil, .lq-h1--hum, .lq-h1--rec { border-left: 1px solid #C4B294; } .lq-h1--act { border-left: 1px solid #C4B294; } .lq-h1-unit { font-weight: 600; color: #6E5734; text-transform: none; } .lq-h2 { font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; color: #6E5734; display: flex; align-items: center; justify-content: center; text-align: center; } /* the sub-header names each slot in the SAME grid as the tags/chips below it. */ .lq-goldhead { display: grid; grid-template-columns: 70px 70px 70px; gap: 6px; justify-content: center; } .lq-goldhead > span { text-align: center; } /* awaiting met = ONE dashed chip spanning the two met columns. */ .lq-met-span { grid-column: span 2; } /* liqdash7 §3.3 - every Pending cell is centred (provider stacks centred). */ .lq-table--pending .lq-c { display: flex; align-items: center; justify-content: center; text-align: center; padding: 9px 6px; min-height: 62px; font-variant-numeric: tabular-nums; } .lq-table--pending .lq-prov { flex-direction: column; gap: 2px; } .lq-table--pending .lq-prov-name { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .2px; color: #6B6353; text-align: center; overflow-wrap: anywhere; line-height: 1.25; } .lq-table--pending .lq-prov-ruc { font-size: 9px; color: #B0A78F; } .lq-lot { display: inline-block; font-size: 11.5px; font-weight: 800; color: #5C4326; background: #FAF8F0; border: 1px solid #E6E0CF; border-radius: 7px; padding: 4px 8px; text-decoration: none; } .lq-lot:hover { border-color: #D3B088; text-decoration: none; } .lq-lot--re { color: #5D4A78; background: #F1EDF7; border-color: #CCC0E0; } .lq-agepill--muted { background: #F1ECDE; color: #7a6a55; } .lq-agepill--amber { background: #FDF3E0; color: #B7791F; } .lq-agepill--red { background: #FBEAE7; color: #A33C2E; } /* GOLD: the fixed 3-slot grid (98px each) — AVERAGE · LOWEST · RE-SAMPLE. */ .lq-goldslots { display: grid; grid-template-columns: 70px 70px 70px; gap: 6px; justify-content: center; align-items: center; justify-items: center; } /* liqdash8 §4.4 - tags are only as wide as their text, centred in the fixed slot. */ .lq-slot { min-height: 34px; border-radius: 7px; border: 1px solid transparent; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; padding: 4px 8px; line-height: 1.1; white-space: nowrap; } .lq-slot b { font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; } .lq-slot i { font-style: normal; font-size: 6.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; margin-top: 2px; } .lq-slot--avg { background: #F4F8F2; border-color: #C6D8BC; } .lq-slot--avg b { color: #3F6A3A; } .lq-slot--avg i { color: #7FA077; } .lq-slot--low { background: #FAF8F0; border-color: #E0D9C6; } .lq-slot--low b { color: #8A6A1F; } .lq-slot--low i { color: #B0A78F; } .lq-slot--re { background: #F5F1FA; border-color: #CCC0E0; } .lq-slot--re b { color: #5D4A78; } .lq-slot--re i { color: #9184AB; } .lq-slot--pending { background: #fff; border: 1.5px dashed #CCC0E0; color: #8A79A8; font-size: 9.5px; font-weight: 800; letter-spacing: .3px; } .lq-slot--empty { background: transparent; border-color: transparent; } /* HUMIDITY: the fixed 3-slot grid (58px each) — 1ST % · 2ND % · RE-SAMPLE. */ .lq-humslots { display: grid; grid-template-columns: 46px 46px 46px; gap: 4px; justify-content: center; align-items: center; justify-items: center; } .lq-humchip { min-height: 26px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; color: #2B2620; background: #FAF8F0; border: 1px solid #E6E0CF; border-radius: 6px; padding: 3px 6px; white-space: nowrap; } .lq-humchip--re { color: #5D4A78; background: #F1EDF7; border-color: #CCC0E0; } .lq-humchip--empty { background: transparent; border-color: transparent; } .lq-ag { font-size: 12.5px; font-weight: 800; color: #2B2620; } .lq-rec { font-size: 12.5px; font-weight: 800; color: #2B2620; } .lq-rec--zero { color: #A33C2E; } .lq-nacn { gap: 4px; } .lq-nacn b { font-size: 11px; font-weight: 800; color: #2B2620; } .lq-nacn em { font-style: normal; color: #6B6353; margin: 0 3px; } .lq-await { display: inline-block; padding: 4px 10px; border: 1px dashed #ECCF9A; border-radius: 7px; color: #B7935B; background: #FEFBF4; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; } .lq-btn--liq { display: inline-block; width: auto; padding: 6px 14px; font-size: 11px; font-weight: 700; border-radius: 7px; } /* liqdash8 §4.4 - ACTION is a 30px brown circle with a calculator glyph (SVG). */ .lq-actbtn { width: 30px; height: 30px; border-radius: 999px; background: #9C5B2B; color: #fff; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; flex: 0 0 auto; } .lq-actbtn:hover { background: #874c22; } /* alternating row tint so the eye holds a line across the full width. */ .lq-table--pending .lq-row[data-lq-row]:nth-child(even) { background: #FDFCF8; } .lq-scope { margin-left: auto; } /* V29.333 - liq7 Part 2: Kanban board (list <-> kanban toggle on the pending queue). */ /* liqdash7 §2 - the split sort control: a "Sort by" field dropdown + ▲/▼ toggle. */ .lq-sortgroup { display: inline-flex; align-items: center; gap: 6px; } .lq-dirtoggle { display: inline-flex; } .lq-dirbtn { width: 32px; height: 34px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; color: #98907E; background: #fff; border: 1px solid #E6E0CF; text-decoration: none; } .lq-dirbtn:first-child { border-radius: 8px 0 0 8px; } .lq-dirbtn:last-child { border-radius: 0 8px 8px 0; margin-left: -1px; } .lq-dirbtn:hover { border-color: #D3B088; } .lq-dirbtn.is-on { color: #fff; background: #9C5B2B; border-color: #9C5B2B; } .pill-nav-count--amber { background: #FDF3E0 !important; color: #B7791F !important; } /* liqdash7 §1.4 - footer pager. */ .lq-pager { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-top: 1px solid #F0ECE0; } .lq-pager-info { font-size: 11px; color: #98907E; font-variant-numeric: tabular-nums; } .lq-pager-pages { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; } .lq-pager-btn { min-width: 30px; height: 30px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #6B6353; background: #fff; border: 1px solid #E6E0CF; border-radius: 8px; text-decoration: none; font-variant-numeric: tabular-nums; } .lq-pager-btn:hover { border-color: #D3B088; } .lq-pager-btn.is-on { color: #fff; background: #9C5B2B; border-color: #9C5B2B; } .lq-pager-btn.is-off { color: #D8CEB8; cursor: default; } .lq-dd-menu--up { top: auto; bottom: calc(100% + 4px); } .lq-empty--awaiting { padding: 40px 16px; } .lq-viewswitch { display: inline-flex; border: 1px solid #E6E0CF; border-radius: 9px; overflow: hidden; background: #fff; } .lq-vsw { padding: 6px 13px; font-size: 12px; font-weight: 700; color: #6B6353; text-decoration: none; } /* liqdash12 §1 - the Liquidation toolbar's controls are BUTTONS (one client-side store, no navigation per tick); same look as the link versions on the Deals Executed tab. */ button.lq-dd-opt, button.lq-status-opt, button.lq-dirbtn, button.lq-vsw { appearance: none; font: inherit; cursor: pointer; } button.lq-dd-opt, button.lq-status-opt { display: flex; width: 100%; background: transparent; border: 0; text-align: left; } button.lq-dirbtn, button.lq-vsw { background: transparent; border: 0; } .lq-searchwrap { position: relative; } .lq-searchwrap.is-on { border-color: #9C5B2B; box-shadow: 0 0 0 1px #9C5B2B inset; } .lq-search-x { appearance: none; border: 0; background: transparent; color: #B0A78F; font-size: 11px; cursor: pointer; padding: 0 4px; margin-left: auto; } .lq-search-x:hover { color: #9C5B2B; } .lq-resline { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 11px; color: #6B6353; margin: -6px 2px 12px; } .lq-resline b { color: #2B2620; font-variant-numeric: tabular-nums; } .lq-reschip { display: inline-flex; align-items: center; gap: 5px; appearance: none; background: #fff; border: 1px solid #D3B088; color: #9C5B2B; border-radius: 999px; padding: 3px 9px; font: inherit; font-size: 10.5px; font-weight: 700; cursor: pointer; } .lq-reschip i { font-style: normal; color: #B0A78F; } .lq-reschip:hover i { color: #9C5B2B; } .lq-res-clear { appearance: none; background: transparent; border: 0; color: #9C5B2B; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; padding: 0; margin-left: 4px; } .lq-res-clear:hover { text-decoration: underline; } .lq-res-legacy { color: #98907E; } .lq-legacy-loading { padding: 8px 14px; } /* liqdash12 §3 - Export · Excel: toolbar button + anchored option popover + busy ring */ .lq-xl { position: relative; } .lq-xl-btn { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid #D3B088; color: #9C5B2B; border-radius: 9px; padding: 7px 12px; font-size: 11.5px; font-weight: 700; white-space: nowrap; cursor: pointer; list-style: none; } .lq-xl-btn::-webkit-details-marker { display: none; } .lq-xl-btn svg { flex: none; } .lq-xl-btn .lq-dd-caret { margin-left: 2px; } .lq-xl-ring { display: none; width: 11px; height: 11px; border: 2px solid #E6D3BC; border-top-color: #9C5B2B; border-radius: 50%; animation: lq-xl-spin .8s linear infinite; } .lq-xl.is-busy .lq-xl-ring { display: inline-block; } .lq-xl.is-busy .lq-xl-btn > svg { display: none; } .lq-xl.is-busy .lq-xl-btn { cursor: progress; } @keyframes lq-xl-spin { to { transform: rotate(360deg); } } .lq-xl-menu { left: auto; right: 0; width: 300px; padding: 6px 0; box-shadow: 0 10px 28px rgba(43, 38, 32, .14); } .lq-xl-head { font-size: 8px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: #98907E; padding: 6px 14px 2px; } .lq-xl-opt { display: flex; align-items: center; gap: 9px; width: 100%; appearance: none; background: transparent; border: 0; padding: 8px 14px; font: inherit; font-size: 11.5px; font-weight: 600; color: #2B2620; text-align: left; cursor: pointer; } .lq-xl-opt:hover, .lq-xl-opt.is-on { background: #FBF7EE; } .lq-xl-opt small { display: block; font-size: 9px; color: #98907E; font-weight: 500; } .lq-xl-opt em { font-style: normal; margin-left: auto; font-size: 10px; color: #98907E; font-variant-numeric: tabular-nums; white-space: nowrap; } .lq-vsw.is-on { background: #9C5B2B; color: #fff; } .lq-legend { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11px; color: #6B6353; margin: 14px 0 10px; } .lq-legend-ladder { margin-left: auto; color: #98907E; font-weight: 700; } .lq-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; } .lq-col { background: #FAF8F0; border: 1px solid #E6E0CF; border-radius: 12px; min-width: 0; } .lq-col-head { padding: 12px 14px 10px; border-bottom: 1px solid #F0ECE0; } .lq-col-title { display: flex; align-items: center; gap: 8px; color: var(--ink-2, #5C4326); } .lq-col-n { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 5px; border-radius: 999px; background: #ECE3D0; color: #6E5734; font-size: 10px; font-weight: 800; } .lq-col-sub { margin-top: 3px; } .lq-col-body { display: flex; flex-direction: column; gap: 10px; padding: 12px; } .lq-col-empty { padding: 16px 4px; text-align: center; color: #B0A78F; } .lq-card { background: #fff; border: 1px solid #E6E0CF; border-radius: 10px; padding: 11px 12px; display: flex; flex-direction: column; gap: 8px; } .lq-card[hidden] { display: none !important; } .lq-card-top { display: flex; align-items: center; gap: 6px; } .lq-card-age { margin-left: auto; } .lq-card-prov { font-size: 12px; font-weight: 600; color: var(--ink-1, #3a2d1a); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lq-card-figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .lq-fig { display: flex; flex-direction: column; align-items: flex-start; background: #FAF8F0; border: 1px solid #F0ECE0; border-radius: 7px; padding: 4px 8px; } .lq-fig b { font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: #2B2620; } .lq-fig i { font-style: normal; font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: #B0A78F; margin-top: 1px; } .lq-fig-au { color: #3F6A3A; } .lq-fig-re { color: #5D4A78; } .lq-card-btn { margin-top: 2px; padding: 7px 10px; font-size: 11.5px; } .lq-tag { display: inline-flex; align-items: center; font-size: 8.5px; font-weight: 800; letter-spacing: .3px; padding: 1px 5px; border-radius: 4px; } .lq-tag--re { background: #F1EDF7; border: 1px solid #CCC0E0; color: #5D4A78; } .lq-tag--met { background: #FDF3E0; border: 1px solid #ECCF9A; color: #B7791F; } /* V29.334 - miner-response tags + record control (Grade-offer stage). */ .lq-tag--acc { background: #E9F0E4; border: 1px solid #C6D8BC; color: #4F7D49; } .lq-tag--counter { background: #EFF2F5; border: 1px solid #C7D2DC; color: #4C5A68; } .lq-tag--dir { background: #FBEAE7; border: 1px solid #E0AFA5; color: #A33C2E; } .lq-card-resp { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 10.5px; color: #6B6353; } .lq-resp-x b { color: #2B2620; font-variant-numeric: tabular-nums; } .lq-resp { font-size: 11px; } .lq-resp > summary { cursor: pointer; color: #9C5B2B; font-weight: 700; list-style: none; } .lq-resp > summary::-webkit-details-marker { display: none; } .lq-resp-form { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; } .lq-resp-row { display: flex; gap: 4px; } .lq-resp-row input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 11px; padding: 4px 7px; border: 1px solid #E6E0CF; border-radius: 6px; } .lq-resp-btn { font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; padding: 4px 9px; border-radius: 6px; border: 1px solid #E6E0CF; background: #FAF8F0; color: #6B6353; } .lq-resp-btn:hover { border-color: #D3B088; } .lq-resp-clear { color: #A33C2E; } .lq-card-btns { display: flex; flex-direction: column; gap: 6px; } .lq-btn--dis { background: #F1ECDE; color: #B0A78F; border-color: #E6E0CF; cursor: not-allowed; } .lq-c { min-width: 0; font-size: 12.5px; color: var(--ink-1, #3a2d1a); } .lq-c--l { text-align: left; justify-self: start; } .lq-c--r { text-align: right; justify-self: end; font-variant-numeric: tabular-nums; } .lq-c--c { text-align: center; justify-self: center; width: 100%; } .lq-c-unit { display: block; font-size: 8.5px; font-weight: 600; letter-spacing: 0.2px; text-transform: none; color: var(--ink-3, #7a6a55); margin-top: 1px; } .lq-lot { font-size: 12.5px; font-weight: 700; color: #9C5B2B; text-decoration: none; } .lq-lot:hover { text-decoration: underline; } .lq-prov { display: flex; flex-direction: column; gap: 1px; } .lq-prov-name { font-size: 12px; font-weight: 600; color: var(--ink-1, #3a2d1a); overflow-wrap: anywhere; } .lq-prov-ruc { font-size: 10.5px; color: var(--ink-3, #7a6a55); } .lq-agepill { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; font-variant-numeric: tabular-nums; } .lq-agepill--muted { background: #F1ECDE; color: #7a6a55; } .lq-agepill--amber { background: rgba(202,138,4,0.16); color: #8a5e00; } .lq-agepill--red { background: rgba(178,58,46,0.16); color: #922E24; } /* Value boxes: green=confirmed avg/negotiated, sand=lowest, violet=re-sample. */ .lq-box { display: inline-flex; flex-direction: column; align-items: flex-end; padding: 4px 9px; border-radius: 7px; border: 1px solid; line-height: 1.1; } .lq-box b { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; } .lq-box-cap { font-size: 8px; font-weight: 700; font-style: normal; text-transform: uppercase; letter-spacing: 0.4px; margin-top: 1px; opacity: 0.85; } .lq-box--avg, .lq-box--neg { background: #F4F8F2; border-color: #C6D8BC; color: #3F6A3A; } .lq-box--low { background: #FAF8F0; border-color: #E0D9C6; color: #8A6A1F; } .lq-box--rs { background: #F1EDF7; border-color: #CCC0E0; color: #5D4A78; } .lq-rs-hum { display: inline-block; margin-left: 5px; padding: 3px 7px; border-radius: 6px; background: #F7F4FB; border: 1px solid #CCC0E0; color: #5D4A78; font-size: 11px; font-weight: 700; vertical-align: middle; font-variant-numeric: tabular-nums; } .lq-await { display: inline-block; padding: 3px 9px; border: 1px dashed #CA8A04; border-radius: 7px; color: #8a5e00; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; } .lq-nores { color: var(--ink-3, #7a6a55); font-size: 11.5px; font-style: italic; } .lq-mut { color: var(--ink-3, #b8ac97); } .lq-amend { color: #b5761f; } .lq-exec { font-size: 12px; color: var(--ink-2, #5C4326); font-variant-numeric: tabular-nums; } .lq-status { display: inline-block; padding: 4px 10px; border-radius: 999px; background: #F4F8F2; border: 1px solid #C6D8BC; color: #3F6A3A; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; white-space: nowrap; } .lq-btn { display: block; width: 100%; box-sizing: border-box; text-align: center; padding: 9px 10px; border-radius: 8px; background: #9C5B2B; color: #fff; font-size: 12px; font-weight: 700; text-decoration: none; border: 1px solid #9C5B2B; } .lq-btn:hover { filter: brightness(1.05); } .lq-btn--ghost { background: transparent; color: #5C4326; border-color: #D3B088; } .lq-btn--ghost:hover { background: #FBF6EF; } .lq-empty { padding: 26px 16px; text-align: center; color: var(--ink-3, #7a6a55); font-size: 13px; } /* ========================================================================== V28.822 - North Dashboard reskin to the ov2 Overview look. Scoped to .dash-ov2 so no other surface using the shared .dash-* classes is affected. The ov2 hero tiles reuse overview_new.css (linked on the page); here we only lighten the mega-card header band from the dark terracotta gradient to the ov2 white-card + terracotta-eyebrow treatment (metric numbers are already serif). Plus the settings-gear audit tools styling. ========================================================================== */ .dash-ov2-hero { margin-bottom: 18px; } .dash-ov2 .dash-mega-header { background: transparent; color: var(--text, #2b241a); border-bottom: 1px solid rgba(90, 74, 53, 0.10); padding: 16px 20px 10px; } .dash-ov2 .dash-mega-eyebrow { color: var(--accent, #8A5C3A); letter-spacing: 0.09em; } .dash-ov2 .dash-mega-title { color: var(--text, #2b241a); } .dash-ov2 .dash-mega-hover-hint { color: var(--text-dim, #7a6a55); } .dash-ov2 .dash-mega-card { border-color: rgba(90, 74, 53, 0.10); box-shadow: 0 1px 2px rgba(40, 30, 18, 0.04); transition: box-shadow 160ms ease; } .dash-ov2 .dash-mega-card:hover { box-shadow: 0 6px 18px rgba(40, 30, 18, 0.08); } /* Cards below the strip pick up the ov2 radius so the page reads as one system. */ .dash-ov2 > .card { border-radius: 14px; } /* V28.835 - Top row: the 4 KPI tiles as a 2x2 block on the LEFT, Capital Exposure as an equal-size card on the RIGHT (fills the half, no beige gutter). Both halves stretch to equal height. Stacks on narrow screens. */ .dash-ov2-top { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; margin-bottom: 18px; } .dash-ov2-top .dash-ov2-hero { margin-bottom: 0; height: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; } .dash-ov2-top .dash-ov2-exposure-wrap { margin-bottom: 0; display: flex; } .dash-ov2-top .dash-ov2-exposure-wrap .dash-mega-card--exposure { max-width: none; width: 100%; border-radius: 14px; } @media (max-width: 860px) { .dash-ov2-top { grid-template-columns: 1fr; } } /* Settings-gear audit tools (cpm_admin). Buttons match the link menu items. */ .topbar-gear-menu-subhead { padding: 8px 14px 2px; font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent, #8A5C3A); } .topbar-gear-menu-sep { height: 1px; margin: 6px 0; background: rgba(90, 74, 53, 0.12); } .topbar-gear-menu-item--btn { width: 100%; appearance: none; border: 0; background: transparent; cursor: pointer; text-align: left; font: inherit; } /* V28.867 - Liquidation Helper Buying Calculation: cosmetic field-state styling + header spacing + Editable/Fixed key. Purely presentational; the editable vs fixed treatment is driven by each input's REAL readonly state (no hard-coded field list, no JS). */ .liq-rates-card .liq-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px 18px; } .liq-card-head-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 18px; } .liq-card-head-main .liq-rates-hint { font-size: 11px; } .liq-field-key { display: flex; align-items: center; gap: 14px; } .liq-field-key-item { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; color: var(--text-dim, #7a6a55); white-space: nowrap; } .liq-key-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex: none; } /* V28.871 - field-state key: yellow swatch = editable, green swatch = fixed. */ .liq-key-swatch--editable { background: rgba(226, 182, 42, 0.22); border: 2px solid #C79A1E; } .liq-key-swatch--fixed { background: rgba(76, 122, 60, 0.14); border: 1px solid rgba(76, 122, 60, 0.55); } /* V28.871 - editable inputs -> translucent yellow with a bold gold edge; fixed/read-only -> calm translucent green. Driven purely by each input's real readonly/disabled state. Scoped + specific enough to win over the per-column / computed-row / editable-discount backgrounds without !important. */ .liq-rates-table .liq-num-input:not([readonly]):not(:disabled) { background: rgba(226, 182, 42, 0.22); border-color: #C79A1E; /* inset ring + 1px border reads as a bold ~2px gold edge without changing the input's box size (no layout shift). */ box-shadow: inset 0 0 0 1px #C79A1E; color: var(--text, #2a1e10); } .liq-rates-table .liq-num-input:not([readonly]):not(:disabled):focus { outline: none; border-color: #C79A1E; box-shadow: inset 0 0 0 1px #C79A1E, 0 0 0 2px rgba(226, 182, 42, 0.34); background: rgba(226, 182, 42, 0.30); } .liq-rates-table .liq-num-input[readonly], .liq-rates-table .liq-num-input:disabled { background: rgba(76, 122, 60, 0.14); border-color: rgba(76, 122, 60, 0.55); color: var(--text, #2a1e10); } .liq-rates-table .liq-num-input[readonly]:focus, .liq-rates-table .liq-num-input:disabled:focus { outline: none; background: rgba(76, 122, 60, 0.14); border-color: rgba(76, 122, 60, 0.55); } /* V28.873 - Liquidation Helper top strip: Load-lot picker button, weighbridge date, Load Buying Table control, and the picker modal + outstanding warning. */ .liq-control--load, .liq-control--wbdate { min-width: 140px; flex: 0 0 auto; } .liq-loadlot-btn { white-space: nowrap; align-self: stretch; } .liq-wb-date { padding: 8px 10px; border: 1px solid var(--border, #E1DBC9); border-radius: 6px; background: rgba(120, 110, 90, 0.06); font-variant-numeric: tabular-nums; font-size: 13px; color: var(--text, #2a1e10); min-height: 37px; display: flex; align-items: center; } .liq-control--buyingtable { min-width: 260px; flex: 0 0 auto; } .liq-buyingtable-wrap { display: flex; gap: 8px; align-items: stretch; } .liq-buyingtable-wrap .liq-select { flex: 1; min-width: 130px; } .liq-outstanding-warn { display: none; align-items: center; gap: 10px; margin: 0 0 16px; padding: 10px 14px; border: 1px solid #C99A2E; border-left: 4px solid #C99A2E; border-radius: 8px; background: rgba(226, 182, 42, 0.14); color: #6b531a; font-size: 13px; font-weight: 600; } /* V28.876 - only show when a lot with outstanding data is loaded; the class must not override the [hidden] default state. */ .liq-outstanding-warn:not([hidden]) { display: flex; } .liq-outstanding-warn-icon { font-size: 15px; line-height: 1; } /* V29.223 - readiness tiles (grades / humidity / recovery+chemicals / buying table). display:none by default so the [hidden] attribute wins until a lot loads. */ .liq-tiles { display: none; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0 0 14px; } .liq-tiles:not([hidden]) { display: grid; } .liq-tile { border: 1px solid #E6E0CF; border-radius: 12px; padding: 10px 14px; background: #FAF8F0; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .liq-tile-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: #98907E; } .liq-tile-label em { font-style: normal; font-weight: 600; color: #B0A791; } .liq-tile-value { font-size: 14px; font-weight: 700; color: #2B2620; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .liq-tile-src { font-size: 9.5px; color: #B0A791; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .liq-tile.is-ok { border-color: #CBE0C4; background: #F3F8F0; } .liq-tile.is-ok .liq-tile-value { color: #3F6B37; } .liq-tile.is-await { border-style: dashed; border-color: #ECCF9A; background: #FEFBF4; } .liq-tile.is-await .liq-tile-value { color: #B7935B; font-weight: 600; } @media (max-width: 900px) { .liq-tiles:not([hidden]) { grid-template-columns: repeat(2, 1fr); } } /* V29.243 - Liquidation Helper redesign (port of alphaoro-liqfull_1.html), slice 1: the header card + the four ready tiles + the "Complete" stage banner. Scoped .liqx-*; the calc + payment below are untouched (later slices). */ .liqx-hdrcard { display: flex; align-items: flex-end; padding: 14px 16px; gap: 0; flex-wrap: wrap; } .liqx-hcol { padding: 0 16px; border-right: 1px solid #F0ECE0; } .liqx-hcol:first-child { padding-left: 0; } .liqx-hcol:last-child { border-right: 0; padding-right: 0; } .liqx-hcol--wide { flex: 1; min-width: 200px; } .liqx-fl { font-size: 9.5px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; color: #98907E; margin-bottom: 6px; white-space: nowrap; } .liqx-fi { border: 1px solid #DDD5C2; background: #fff; border-radius: 8px; height: 34px; display: flex; align-items: center; padding: 0 11px; font-size: 12.5px; font-weight: 700; color: #2B2620; gap: 8px; } .liqx-fi--gold { border-color: #ECCF9A; background: #FDF8EE; } .liqx-fi input, .liqx-fi select { border: 0; background: transparent; font: inherit; color: inherit; width: 100%; padding: 0; outline: none; } .liqx-lotpill { background: #9C5B2B; color: #fff; border-radius: 8px; height: 34px; display: inline-flex; align-items: center; padding: 0 12px; font-size: 12.5px; font-weight: 800; font-family: var(--font-mono, ui-monospace, Menlo, monospace); gap: 8px; border: 0; cursor: pointer; } .liqx-prov { font-size: 13px; font-weight: 800; line-height: 1.3; } .liqx-prov input { border: 0; background: transparent; font: inherit; width: 100%; padding: 0; outline: none; } .liqx-prov-sub { display: block; font-size: 11px; font-weight: 600; color: #6B6353; margin-top: 3px; } .liqx-prov-sub input { border: 0; background: transparent; font: inherit; color: inherit; width: 100%; padding: 0; outline: none; } .liqx-ready { display: grid; grid-template-columns: repeat(3, 1fr) 1.3fr; background: #fff; border: 1px solid #E6E0CF; border-radius: 12px; overflow: hidden; margin-bottom: 12px; } .liqx-rd { padding: 12px 16px; border-right: 1px solid #F0ECE0; } .liqx-rd:last-child { border-right: 0; } .liqx-rd .k { font-size: 9.5px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; color: #98907E; margin-bottom: 6px; } .liqx-rd .k em { font-style: normal; } .liqx-rd .v { font-size: 13.5px; font-weight: 800; font-variant-numeric: tabular-nums; } .liqx-rd .s { font-size: 10px; color: #98907E; margin-top: 3px; } .liqx-rd.is-done .v { color: #3F6A3A; } .liqx-rd.is-wait { background: #FEFBF4; } .liqx-rd.is-wait .v { color: #8A6A1F; } /* V29.270 - the single readiness banner. Amber by default (not_ready / stage1 / stage1+override); green via --ok for stage2. Badge is a pill ("STAGE 1"/"STAGE 2"). */ .liqx-stage { display: flex; align-items: center; gap: 11px; background: #FDF3E0; border: 1px solid #ECCF9A; border-radius: 10px; padding: 9px 15px; font-size: 12.5px; color: #8A6A1F; margin-bottom: 14px; } .liqx-stage-text { line-height: 1.4; } .liqx-stage-text b { color: #6E5734; } .liqx-stage-n { background: #B7791F; color: #fff; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .3px; padding: 3px 9px; flex: none; white-space: nowrap; } .liqx-stage--ok { background: #E9F0E4; border-color: #C6D8BC; color: #3F6A3A; } .liqx-stage--ok .liqx-stage-n { background: #4F7D49; } /* V29.272 - Liquidation Helper context bar (replaces the header strip + Lot Data card). Raw font sizes match the sibling .liqx-* blocks (chip/kv micro-labels below the .t-* scale). */ .liqx-ctx { display: flex; align-items: center; gap: 14px; padding: 12px 18px; background: #fff; border: 1px solid #E6E0CF; border-radius: 12px; margin-bottom: 14px; flex-wrap: wrap; } .liqx-ctx-lot { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 14px; font-weight: 800; color: #fff; background: #9C5B2B; border-radius: 8px; padding: 6px 12px; white-space: nowrap; } .liqx-ctx-who { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; } .liqx-ctx-who b { font-size: 13px; font-weight: 800; color: #2B2620; } .liqx-ctx-who i { font-style: normal; font-size: 10.5px; color: #98907E; } .liqx-ctx-kv { display: flex; flex-direction: column; line-height: 1.25; margin-left: 6px; } .liqx-ctx-kv small { font-size: 8px; font-weight: 800; letter-spacing: .5px; color: #98907E; text-transform: uppercase; } .liqx-ctx-kv b { font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: #2B2620; } .liqx-ctx-jump { margin-left: auto; display: flex; align-items: center; gap: 6px; position: relative; } .liqx-ctx-jump-ico { color: #98907E; font-size: 13px; } .liqx-ctx-search { border: 1px solid #DDD5C2; background: #FAF8F0; border-radius: 8px; padding: 7px 12px; font-size: 11.5px; color: #2B2620; width: 180px; height: 32px; } .liqx-ctx-pickbtn { border: 1px solid #D3B088; background: #fff; color: #9C5B2B; border-radius: 8px; font-size: 11px; font-weight: 700; padding: 7px 12px; cursor: pointer; white-space: nowrap; } .liq-tile--bt .liqx-bt-dd { display: flex; align-items: center; gap: 6px; margin: 3px 0 4px; } .liqx-bt-select { flex: 1 1 auto; min-width: 0; height: 30px; border: 1px solid #DDD5C2; background: #fff; border-radius: 8px; padding: 0 8px; font-size: 12px; font-weight: 700; color: #2B2620; } .liqx-goldprice { display: block; margin: 10px 0 12px; border: 1.5px solid #D3B088; background: #FDF9F4; border-radius: 8px; padding: 8px 12px; } .liqx-goldprice-lbl { display: block; font-size: 8.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: #9C5B2B; margin-bottom: 3px; } .liqx-goldprice-input { width: 100%; border: 0; background: transparent; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; color: #9C5B2B; } .liqx-goldprice-input::placeholder { color: #C9B090; font-size: 12px; font-weight: 600; } /* V29.276 - Escalador inert deduction row ("not applied", dashed). */ .liq-inert { display: inline-flex; align-items: center; justify-content: center; min-width: 90px; border: 1.5px dashed #DDD5C2; background: #FEFDFA; border-radius: 7px; color: #B0A78F; font-size: 10px; font-weight: 600; padding: 5px 10px; } /* V29.277 - custom buying-table dropdown (native
stays for alignment). */ .liq-th-sub { font-weight: 600; font-size: 9px; color: #B0A791; letter-spacing: .3px; text-transform: none; } .liq-disc-disp { display: inline-block; min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; color: #9A8A6A; font-weight: 600; } /* V29.339 - §3f priced-discount footer under the buying-calc table. */ .liq-disc-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: #FDFBF6; border-top: 1px solid #F0ECE0; padding: 10px 14px; margin-top: -1px; } .liq-disc-foot-text { font-size: 12px; color: #6B6353; } .liq-disc-foot-text b { color: #2B2620; font-weight: 800; font-variant-numeric: tabular-nums; } .liq-disc-foot-pill { margin-left: auto; background: #FDF3E0; border: 1px solid #ECCF9A; color: #B7791F; font-size: 11px; font-weight: 800; letter-spacing: .3px; padding: 3px 10px; border-radius: 999px; } .liq-disc-foot-pill b { font-variant-numeric: tabular-nums; } /* V29.340 - §3e recoverable-gold derived display cells (offer green-tinted). */ .liq-derived-val { display: inline-block; width: 100%; text-align: right; font-variant-numeric: tabular-nums; font-weight: 800; font-size: 12px; color: #2B2620; } .liq-derived-val--offer { color: #3F6A3A; } .liq-rates-table td[data-liq-mc$="_ask"] > * { display: none; } /* The goal-seek "Reset Ask recommendation" control drove the now-hidden ask column. */ .liq-gs-reset { display: none; } /* V29.229 - "Miner asked X · you are Y apart" gap line under the payment breakdown */ .liq-gap-line { margin: 10px 0 0; padding: 8px 12px; border-radius: 8px; background: #FBF7EF; border: 1px solid #E6E0CF; font-size: 12px; color: #6B6353; text-align: center; } .liq-gap-line b { color: #2B2620; font-weight: 700; font-variant-numeric: tabular-nums; } .liq-gap-line[hidden] { display: none; } /* Load-lot picker modal */ .liq-picker-search { width: 100%; margin-bottom: 14px; } .liq-picker-status { padding: 18px 0; text-align: center; color: var(--text-dim, #7a6a55); font-size: 13px; } .liq-picker-group { margin-bottom: 18px; } .liq-picker-group:last-child { margin-bottom: 0; } .liq-picker-group-title { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; margin: 0 0 6px; display: flex; align-items: center; gap: 6px; } .liq-picker-group-title--ready { color: #4c7a3c; } .liq-picker-group-title--out { color: #b26340; } .liq-picker-group-note { margin: 0 0 8px; font-size: 11px; color: var(--text-dim, #7a6a55); } .liq-picker-list { display: flex; flex-direction: column; gap: 6px; } .liq-picker-empty { margin: 0; font-size: 12px; color: var(--text-dim, #7a6a55); font-style: italic; } .liq-picker-lot { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 9px 12px; border: 1px solid var(--border, #E1DBC9); border-radius: 8px; background: var(--bg-elev, #fff); cursor: pointer; transition: border-color .12s, background .12s; } .liq-picker-lot:hover { border-color: #b26340; background: rgba(178, 99, 64, 0.05); } .liq-picker-lot-main { display: flex; flex-direction: column; gap: 1px; min-width: 120px; } .liq-picker-lot-code { font-size: 13px; font-weight: 700; } .liq-picker-lot-miner { font-size: 11px; color: var(--text-dim, #7a6a55); } .liq-picker-lot-meta { display: flex; flex-direction: column; gap: 1px; min-width: 84px; font-size: 11px; color: var(--text-dim, #7a6a55); } .liq-picker-tags { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; } .liq-tag { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 999px; white-space: nowrap; } .liq-tag--ok { background: rgba(76, 122, 60, 0.14); color: #3c6330; border: 1px solid rgba(76, 122, 60, 0.40); } .liq-tag--miss { background: rgba(200, 60, 40, 0.10); color: #a3341f; border: 1px solid rgba(200, 60, 40, 0.35); } /* V29.016 - [hidden] overrides for hideable components whose base class sets display:flex/grid. Without these the author display beats the UA [hidden]{display:none} (equal specificity) and the element renders stuck-open. Consolidated so future hideable-with-flex classes can be added here. See SYSTEM_AUDIT.md section 7. */ .offer-helper-card[hidden], .wb-lots-inline-row[hidden], .recon-bulk-actions[hidden], .form-field[hidden], .quick-chat-success[hidden] { display: none !important; } /* ============================================================================ V29.023 - Weighbridge Trucks list: khaki header band (shared tokens), one shared column grid across the Open + Closed tables, no Lots column, ellipsised driver, right-aligned tabular Arrived/Action, count badges, amber stale-age note. Presentation only. ========================================================================= */ .wb-add-truck-btn { margin-left: auto; white-space: nowrap; } /* Khaki header band — overrides the terracotta pill for these tables. */ .wb-trucks-table.data-table--terracotta thead th { background: var(--table-head-bg); background-clip: border-box; color: var(--table-head-ink); font-family: var(--font-sans); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; border-bottom: 1px solid var(--table-head-border); border-radius: 0; padding: 9px 12px; } .wb-trucks-table.data-table--terracotta thead tr:first-child th:first-child, .wb-trucks-table.data-table--terracotta thead tr:first-child th:last-child { border-radius: 0; } /* ============================================================================ V29.065 - shared SearchInput pill + Weighbridge Trucks polish pass. ========================================================================= */ /* Shared SearchInput: inline SVG magnifier + input pill. Reused on the Trucks, Kanban and KYC-tracker toolbars (see templates/partials/search_input.html). */ .app-searchbox { position: relative; display: inline-flex; align-items: center; } .app-searchbox-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 13px; height: 13px; pointer-events: none; } .app-searchbox-input { min-width: 240px; padding: 9px 13px 9px 35px; /* 13 (left) + 13 icon + 9 gap = 35 */ border: 1px solid #E6E0CF; border-radius: 8px; background: #fff; color: var(--text); font-size: 13px; font-family: var(--font-sans); } .app-searchbox--block, .app-searchbox--block .app-searchbox-input { display: flex; width: 100%; } /* When reused inside the Kanban / KYC .ol-search wrap (which overlays an absolute clear × at right:8px), reserve room on the right for the ×. */ .ol-search .app-searchbox { flex: 1 1 auto; } .ol-search .app-searchbox-input { padding-right: 30px; } .app-searchbox-input::placeholder { color: #98907E; } .app-searchbox-input:focus { outline: none; border-color: #D3B088; box-shadow: 0 0 0 2px rgba(211, 176, 136, 0.18); } /* Trucks tables: one card owns everything - band is the first row INSIDE a rounded, clipped card (no floating sharp strip above a rounded card). */ .wb-trucks-card { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; /* clips the band's top corners to 12px */ margin-bottom: 4px; } .wb-trucks-card .wb-trucks-table.data-table--terracotta { background: var(--bg-elev); } .wb-trucks-card .wb-trucks-table.data-table--terracotta tbody td { background: var(--bg-elev); } /* fold the old rounded rows-card corners flat so rows sit flush in the card */ .wb-trucks-card .wb-trucks-table.data-table--terracotta tbody tr td { border-radius: 0 !important; } /* 11px vertical row padding so the list breathes like the dashboard tables */ .wb-trucks-card .wb-trucks-table.data-table--terracotta tbody td { padding-top: 11px; padding-bottom: 11px; } /* full-width empty-state row inside the card */ .wb-trucks-card .data-table-empty { padding: 16px 14px; font-size: 12px; color: var(--ink-3, #98907E); } .wb-empty-action { background: none; border: 0; padding: 0; cursor: pointer; color: var(--accent, #9C5B2B); font-weight: 700; font-size: 12px; font-family: inherit; } .wb-empty-action:hover { text-decoration: underline; } /* Right-aligned columns (Arrived, Action) — beat the global left-align. */ .wb-trucks-table.data-table--terracotta thead th.wb-r, .wb-trucks-table td.wb-r { text-align: right; } /* Plate never wraps. */ .wb-trucks-table td.wb-plate { white-space: nowrap; } /* Driver: 12px uppercase, single line, ellipsis (tooltip carries the full). */ .wb-trucks-table td.wb-driver { font-size: 12px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 0; } /* Arrived: tabular, single line; amber "Nd" stale-age note. */ .wb-trucks-table td.wb-arrived { font-variant-numeric: tabular-nums; white-space: nowrap; } .wb-age { color: #B0822B; font-weight: 700; font-size: 11px; margin-left: 5px; } /* Section count badge + the 48h "showing …" note. */ .wb-count-badge { display: inline-block; min-width: 20px; margin-left: 6px; padding: 1px 8px; background: var(--bg-elev-2, #EFEBDE); border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--ink-2, #6f6250); font-variant-numeric: tabular-nums; text-align: center; } .wb-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 26px; } .wb-section-head .wb-section-title { margin-top: 0; } /* V29.079 - Weighbridge truck detail overhaul: outline-back page frame, plate-chip header, and the warm-sand "TRUCK VISIT" card (replaces the terracotta-gradient v2 card + the deleted Transport Documents card). */ .wb-td-frame { margin-bottom: 14px; } .wb-td-back { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 12px; } .wb-td-header { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .wb-td-plates { display: inline-flex; align-items: center; gap: 6px; } .wb-td-plate { font-weight: 700; font-size: 12.5px; background: #F4F1E6; border: 1px solid var(--border, #E7E0D0); border-radius: 6px; padding: 3px 10px; color: var(--ink, #2B2620); } .wb-td-plate-sep { color: var(--text-muted, #8B8B82); font-weight: 600; } .wb-td-summary { font-size: 12.5px; } .wb-tv-card { padding: 0; overflow: hidden; } .wb-tv-band { background: var(--table-head-bg); color: var(--table-head-ink); border-bottom: 1px solid var(--table-head-border); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; padding: 10px 16px; } /* Hairline cell borders via a 1px grid gap over a tint background - robust with the span-2 cells (no per-cell edge-border math). */ .wb-tv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(90, 74, 53, 0.10); } .wb-tv-cell { background: var(--card, #fff); padding: 12px 16px; } .wb-tv-cell--span2 { grid-column: span 2; } .wb-tv-label { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--ink-3, #98907E); margin-bottom: 3px; } .wb-tv-value { font-size: 12.5px; font-weight: 600; color: var(--ink, #2B2620); } .wb-tv-dash { color: var(--ink-3, #98907E); } @media (max-width: 720px) { .wb-tv-grid { grid-template-columns: repeat(2, 1fr); } } /* V29.080 - Lots table: compact display grid that fits with no horizontal scroll (RUC/Mine/Sacks folded into tooltip + kebab; weigh + Guias merged); editing moves to the lot Add/Edit modal. */ .wb-lots-tablewrap { width: 100%; } .wb-lots-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 12.5px; } .wb-lots-table--khaki thead th { background: var(--table-head-bg); color: var(--table-head-ink); border-bottom: 1px solid var(--table-head-border); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; text-align: left; padding: 9px 12px; } .wb-lots-table th.num, .wb-lots-table td.num { text-align: right; font-variant-numeric: tabular-nums; } .wb-lots-table tbody td { padding: 10px 12px; border-bottom: 1px solid rgba(90, 74, 53, 0.06); vertical-align: middle; } .wb-lots-table tbody tr:hover td { background: rgba(168, 92, 58, 0.04); } .wb-lot-seq { color: var(--ink-3, #98907E); text-align: center; } .wb-lot-chip { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; background: #FBEFE0; border: 1px solid #E9D6BC; border-radius: 6px; padding: 1px 7px; color: #7A4A1E; text-decoration: none; } .wb-lot-chip:hover { text-decoration: underline; } .wb-lot-ell { font-size: 11.5px; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wb-lot-when { white-space: nowrap; color: var(--ink-2, #5A5348); font-variant-numeric: tabular-nums; } .wb-lot-net { font-weight: 800; } .wb-lot-guias { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wb-guia-chip { display: inline-block; background: #F4F1E6; border: 1px solid var(--border, #E7E0D0); border-radius: 5px; padding: 1px 6px; font-size: 11px; color: var(--ink-2, #5A5348); margin-right: 3px; } .wb-lot-draft { font-size: 10.5px; font-weight: 700; color: var(--ink-3, #98907E); } .wb-lot-actioncell { text-align: right; overflow: visible; } .wb-lots-empty { text-align: center; padding: 26px 12px; color: var(--ink-3, #98907E); } .wb-lots-total td { background: #FAF8F0; border-top: 2px solid var(--table-head-border, #C4B294); padding: 11px 12px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wb-lots-total td { background: #2f2a22; } } /* Lot Add/Edit modal (reuses .pa-modal chrome). */ .wb-lot-modal-panel { max-width: 620px; } .pa-modal-row--triple { grid-template-columns: 1fr 1fr 1fr; } .wb-lot-cpm-wrap { display: inline-flex; align-items: center; gap: 6px; } .wb-lot-cpm-wrap .wb-cpm-prefix { color: var(--ink-3, #98907E); font-size: 11px; } .wb-lot-cpm-wrap input { flex: 1 1 auto; } /* V29.089 - full 14-column lots table (every original column back) + the inline entry/edit row restored. Squeezed so all columns fit 1440-1500px with zero horizontal scroll: 11.5px body / 9.5px header / 8px padding; names 10.5px uppercase ellipsis; Guias one 10px string. Font sizes here are the dense weighbridge table's own scale -> typography.css .t-* (t-body/.t-tablehead). */ .wb-lots-table--full { font-size: 11.5px; } .wb-lots-table--full.wb-lots-table--khaki thead th { font-size: 9.5px; padding: 8px 8px; letter-spacing: 0.5px; } .wb-lots-table--full tbody td { padding: 7px 8px; } .wb-lots-table--full .wb-lot-name { font-size: 10.5px; text-transform: uppercase; max-width: 150px; } .wb-lots-table--full .wb-lot-conc { font-size: 10.5px; text-transform: uppercase; max-width: 120px; } .wb-lot-ruc { color: var(--ink-3, #98907E); font-variant-numeric: tabular-nums; font-size: 11px; white-space: nowrap; } .wb-th-c, .wb-td-c { text-align: center !important; } .wb-lot-guias-txt { font-size: 10px; color: var(--ink-2, #5A5348); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wb-lot-sent { font-size: 10.5px; font-weight: 700; color: var(--green, #4F7A4A); white-space: nowrap; } /* V29.094 - merged Provider · RUC display cell (name + RUC sub-line) + Save cell */ .wb-lot-provcell { line-height: 1.25; } .wb-lot-provcell .wb-lot-name { display: block; } .wb-lot-ruc-sub { display: block; font-size: 9px; color: var(--ink-3, #98907E); } /* V29.111 - SAVE column is centred: the SAVE heading (th.wb-th-c) sits directly above the ✓ Save / ✓ Saved button on both the entry row and saved rows. */ .wb-lot-savecell { white-space: nowrap; text-align: center; } .wb-lot-saved { font-size: 10.5px; font-weight: 700; color: var(--green, #4F7A4A); margin-right: 6px; } /* V29.094 - inline entry / edit row. Alignment: every input fills its column; cells vertical-align middle EXCEPT the Provider·RUC cell (top) so the resolved name can hang beneath without pushing the row. No padding-top offsets. */ .wb-lot-entry-row td { background: #FBF7EE; vertical-align: middle; padding: 7px 8px; } .wb-li-input { width: 100%; box-sizing: border-box; border: 1px solid var(--border, #E1DBC9); border-radius: 6px; padding: 7px 8px; font-size: 11px; background: #fff; color: var(--ink, #1F1F1F); } .wb-li-input:focus { outline: none; border-color: #D3B088; box-shadow: 0 0 0 2px rgba(211, 176, 136, 0.25); } .wb-li-input.num { text-align: right; font-variant-numeric: tabular-nums; } .wb-li-input.num::placeholder { text-align: right; } .wb-li-invalid { border-color: var(--red, #9C3A2E) !important; box-shadow: 0 0 0 2px rgba(156, 58, 46, 0.2) !important; } .wb-li-cpm { white-space: nowrap; } .wb-li-cpm .wb-cpm-prefix { color: var(--ink-3, #98907E); font-size: 10px; margin-right: 2px; } .wb-li-input-cpm { width: calc(100% - 26px); display: inline-block; } /* Provider·RUC entry cell: top-aligned; RUC input, flip-to-name input, resolved line stacked. */ .wb-lot-entry-row .wb-li-provcell { vertical-align: top; } .wb-li-provname { margin-top: 4px; } .wb-li-resolved { font-size: 9.5px; margin-top: 3px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wb-li-resolved--ok { color: var(--green, #4F7A4A); font-weight: 700; text-transform: uppercase; } .wb-li-resolved--muted { color: var(--ink-3, #98907E); font-style: italic; } .wb-li-weighcell { white-space: nowrap; display: flex; align-items: center; gap: 3px; } .wb-li-time { flex: none; width: 56px; box-sizing: border-box; border: 1px solid var(--border, #E1DBC9); border-radius: 6px; padding: 6px 4px; font-size: 10.5px; background: #fff; color: var(--ink, #1F1F1F); text-align: center; } .wb-li-arrow { color: var(--ink-3, #98907E); font-size: 11px; } .wb-li-net { white-space: nowrap; display: flex; align-items: baseline; justify-content: flex-end; gap: 3px; } .wb-li-input-net { background: #F5F0E2; flex: 1; min-width: 0; } .wb-li-auto { font-size: 8px; font-weight: 700; color: var(--ink-3, #98907E); letter-spacing: 0.3px; } .wb-li-guiacell { white-space: nowrap; display: flex; gap: 4px; } .wb-li-guia { flex: 1; min-width: 0; } .wb-li-actioncell { white-space: nowrap; text-align: center; } .wb-li-actioncell .wb-li-save { padding: 6px 10px; font-size: 11px; } .wb-li-delete { background: none; border: 0; color: var(--ink-3, #98907E); font-size: 15px; cursor: pointer; line-height: 1; padding: 0 4px; } .wb-li-delete:hover { color: var(--red, #9C3A2E); } /* V29.094 - empty state spans the whole table as one centred line (a stale .wb-lots-empty display:flex rule was collapsing the to one word/line). */ .wb-lots-table .wb-lots-empty { display: table-cell; white-space: normal; text-align: center; padding: 26px 12px; min-height: 0; font-style: normal; color: var(--ink-3, #98907E); } /* V29.081 - Register Truck modal theming: t-section caps title + step dots, 9.5px amber-required labels, 8px/12.5px inputs, panel-bg footer. Scoped to the register panel so other modals keep their own chrome (the focus-ring softening above is shared and intentional). */ .pa-req { color: #B7791F; } .pa-modal-hint { font-size: 9.5px; color: var(--ink-3, #98907E); letter-spacing: 0.2px; } .wb-register-panel { max-width: 620px; border-radius: 14px; box-shadow: 0 18px 50px rgba(40, 30, 15, 0.3); } .wb-reg-headline { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .wb-reg-title { font-family: var(--font-sans); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--ink, #2B2620); } .wb-reg-steps { display: inline-flex; align-items: center; gap: 6px; } .wb-reg-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border, #E7E0D0); } .wb-reg-dot.is-on { background: var(--accent, #9C5B2B); } .wb-reg-step { margin-left: 2px; } .wb-register-panel .pa-modal-field > span { font-size: 9.5px; font-weight: 700; color: var(--ink-2, #5A5348); letter-spacing: 0.5px; } .wb-register-panel .pa-modal-field > input { border-radius: 8px; font-size: 12.5px; padding: 9px 12px; } .wb-register-panel .pa-modal-form { gap: 15px; } .wb-reg-actions { margin: 4px -30px -24px; padding: 14px 30px; background: #FAF8F0; border-top: 1px solid var(--border, #E7E0D0); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wb-reg-actions { background: #2f2a22; } } .wb-reg-cancel { background: none; border: 0; color: var(--ink-2, #5A5348); font-weight: 600; } .wb-reg-cancel:hover { color: var(--ink, #2B2620); background: none; } /* V29.101 - Edit Truck modal: identical anatomy to Register Truck, no serif. */ .wb-edit-panel .pa-modal-field > span { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--ink-2, #5A5348); } .wb-edit-panel .pa-modal-field > input { border: 1px solid #E6E0CF; border-radius: 8px; font-size: 12.5px; padding: 9px 11px; } .wb-edit-panel .pa-modal-field > input:focus { border-color: var(--accent, #9C5B2B); box-shadow: 0 0 0 3px rgba(156, 91, 43, 0.12); outline: none; } .wb-edit-panel input[data-wb-edit="ruc"], .wb-edit-panel input[data-wb-edit="driver_dni"], .wb-edit-panel input[data-wb-edit="full_weight_kg"] { font-variant-numeric: tabular-nums; } .wb-edit-panel .pa-modal-form { gap: 13px 14px; } .wb-edit-headline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .wb-edit-title { font-family: var(--font-sans); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--ink, #2B2620); margin: 0; } .wb-edit-plates { display: inline-flex; gap: 6px; } .wb-edit-plate-chip { background: #EFECE0; border: 1px solid #DDD6C2; color: #6B6353; border-radius: 6px; padding: 2px 8px; font-size: 11px; font-weight: 700; } .wb-edit-note { font-size: 10.5px; color: #98907E; margin: -2px 0 14px; } .wb-edit-actions { margin: 4px -30px -24px; padding: 14px 30px; background: #FAF8F0; border-top: 1px solid var(--border, #E7E0D0); display: flex; justify-content: space-between; align-items: center; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wb-edit-actions { background: #2f2a22; } } .wb-edit-cancel { background: none; border: 0; color: var(--ink-2, #5A5348); font-weight: 700; font-size: 12px; } .wb-edit-cancel:hover { color: var(--ink, #2B2620); background: none; } /* V29.102 - Legajo documents card (truck detail, under the Lots table). */ .wb-legajo-card { margin-top: 18px; } .wb-legajo-count { display: inline-block; background: #fff; border: 1px solid var(--hbd, #C4B294); border-radius: 999px; padding: 0 9px; font-size: 11px; font-weight: 700; color: var(--bandink, #5C4326); } .wb-legajo-body { padding: 16px; } .wb-legajo-drop { border: 1.5px dashed #C9BEA4; background: #FAF8F0; border-radius: 10px; padding: 26px 20px; text-align: center; cursor: pointer; transition: border-color 120ms, background 120ms; } .wb-legajo-drop.is-drag { border-color: var(--accent, #9C5B2B); background: #F5E9DE; } .wb-legajo-drop-icon { font-size: 22px; opacity: 0.6; } .wb-legajo-drop-main { font-size: 13px; font-weight: 700; color: var(--ink, #2B2620); margin-top: 6px; } .wb-legajo-browse { background: none; border: 0; color: var(--accent, #9C5B2B); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; font-size: 13px; padding: 0; } .wb-legajo-drop-sub { font-size: 10.5px; color: var(--text-muted, #98907E); margin-top: 4px; } .wb-legajo-status { margin-top: 12px; font-size: 12px; color: var(--text-dim, #6B6B66); } .wb-legajo-status--err { color: var(--orange, #B0822B); } /* upload → link state */ .wb-legajo-linkbox { margin-top: 14px; border: 1px solid var(--border, #E1DBC9); border-radius: 10px; overflow: hidden; } .wb-legajo-linkhead { display: flex; justify-content: space-between; align-items: center; background: #EEF3EA; border-bottom: 1px solid #D6E3CE; padding: 9px 14px; } .wb-legajo-linkhead-title { font-size: 12px; font-weight: 700; color: var(--green, #4F7A4A); } .wb-legajo-linkhead-meta { font-size: 10.5px; color: var(--text-muted, #98907E); } .wb-legajo-filelist { list-style: none; margin: 0; padding: 0; } .wb-legajo-fileitem { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid #F0ECE0; } .wb-legajo-fileicon { flex: 0 0 auto; } .wb-legajo-filename { flex: 1 1 auto; min-width: 0; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wb-legajo-filesize { flex: 0 0 auto; font-size: 10.5px; color: var(--text-muted, #98907E); font-variant-numeric: tabular-nums; } .wb-legajo-linkstep { background: #FDFCF7; padding: 12px 14px; } .wb-legajo-linklabel { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted, #98907E); margin-bottom: 8px; } .wb-legajo-lotchips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } .wb-legajo-chip { background: #fff; border: 1px solid #E6E0CF; color: var(--ink-2, #6B6353); border-radius: 999px; padding: 5px 12px; font-size: 11.5px; font-weight: 600; cursor: pointer; font-variant-numeric: tabular-nums; } .wb-legajo-chip.is-on { background: #FAF3E9; border-color: var(--accent, #9C5B2B); color: var(--accent, #9C5B2B); } .wb-legajo-linkbtn { background: var(--green, #4F7A4A); color: #fff; border: 0; border-radius: 8px; padding: 8px 16px; font-size: 12.5px; font-weight: 700; cursor: pointer; } .wb-legajo-linkbtn:disabled { opacity: 0.5; cursor: default; } /* saved packs */ .wb-legajo-packs { margin-top: 14px; } .wb-legajo-pack { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-top: 1px solid #F0ECE0; } .wb-legajo-pack-title { font-size: 12px; font-weight: 600; color: var(--ink, #2B2620); white-space: nowrap; } .wb-legajo-pack-count { font-size: 11px; color: var(--text-muted, #98907E); white-space: nowrap; } .wb-legajo-pack-chips { flex: 1 1 auto; display: flex; gap: 6px; flex-wrap: wrap; } .wb-legajo-lotchip { background: #FAF3E9; border: 1px solid #E6D3BB; color: var(--accent, #9C5B2B); border-radius: 6px; padding: 1px 8px; font-size: 11px; font-weight: 700; } .wb-legajo-nolink { font-size: 11px; } .wb-legajo-pack-kebab { flex: 0 0 auto; } .wb-legajo-empty { padding: 16px 4px; font-size: 12px; color: var(--text-muted, #98907E); } /* V29.105 - per-lot weighbridge ticket cell in the lots table. */ .wb-ticket-cell { text-align: center; } .wb-ticket-cell.is-drag { outline: 2px dashed var(--accent, #9C5B2B); outline-offset: -3px; background: #F5E9DE; } .wb-ticket-cell.is-uploading { opacity: 0.6; } .wb-ticket-chip { display: inline-flex; align-items: center; gap: 4px; background: #E9F0E4; border: 1px solid #C6D8BC; color: var(--green, #4F7A4A); border-radius: 6px; padding: 3px 8px; font-size: 10px; font-weight: 700; text-decoration: none; white-space: nowrap; } .wb-ticket-chip:hover { background: #DEEBD8; } .wb-ticket-upload { background: #FAF8F0; border: 1.5px dashed #C9BEA4; color: var(--ink-2, #6B6353); border-radius: 6px; padding: 3px 8px; font-size: 10px; font-weight: 700; cursor: pointer; white-space: nowrap; } .wb-ticket-upload:hover { border-color: var(--accent, #9C5B2B); color: var(--accent, #9C5B2B); } .wb-ticket-err { font-size: 9px; color: var(--orange, #B0822B); margin-top: 3px; } /* ========================================================================== V29.108 - Concession auto-read (INGEMMET) on the lot row. Three states: plain input (manual) / read-only display + green AUTO tag (1 record) / themed dropdown (2+ records, on the shared anchored-menu component). ========================================================================== */ .wb-conc-cell { position: relative; } .wb-conc-input[hidden] { display: none !important; } .wb-conc-display[hidden] { display: none !important; } .wb-conc-hint[hidden] { display: none !important; } /* 1-record read-only display — panel bg, name composite + AUTO tag at the right. */ .wb-conc-display { display: flex; align-items: center; gap: 6px; width: 100%; background: #FAF8F0; border: 1px solid #E6E0CF; border-radius: 7px; padding: 5px 8px; cursor: text; text-align: left; } .wb-conc-display:hover { border-color: #D8CFB8; } .wb-conc-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 600; color: var(--ink, #2B2620); } .wb-conc-tag { flex: 0 0 auto; font-size: 7.5px; font-weight: 800; letter-spacing: 0.4px; color: #4F7D49; background: #E9F0E4; border: 1px solid #C6D8BC; border-radius: 5px; padding: 1px 5px; text-transform: uppercase; } .wb-conc-hint { font-size: 9px; color: var(--text-muted, #98907E); margin-top: 3px; } /* saved-row INGEMMET source tick */ .wb-conc-src { color: #4F7D49; font-weight: 800; font-size: 10px; } /* 2+ records — the themed select trigger (never a native ). */ .mt-pill-menu { position: relative; display: inline-block; } .mt-pill-menu > summary { list-style: none; cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 5px; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 999px; padding: 6px 13px; font-size: 12px; font-weight: 600; color: var(--text-dim); white-space: nowrap; } .mt-pill-menu > summary::-webkit-details-marker { display: none; } .mt-pill-menu[open] > summary { border-color: var(--accent); color: var(--accent); } .mt-pill-caret { font-size: 9px; } .mt-pill-list { position: absolute; z-index: 60; top: calc(100% + 5px); left: 0; min-width: 170px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(40, 30, 15, 0.16); padding: 5px; display: flex; flex-direction: column; } .mt-pill-opt { display: block; padding: 7px 11px; border-radius: 7px; font-size: 12.5px; color: var(--text); text-decoration: none; cursor: pointer; white-space: nowrap; } .mt-pill-opt:hover { background: var(--bg-elev-2); } .mt-pill-opt.is-on { color: var(--accent); font-weight: 700; } .mt-lab-unset { color: var(--text-muted); font-size: 11.5px; font-style: italic; } .mt-action-cell { white-space: nowrap; } .mt-confirm-btn { padding: 5px 11px; font-size: 12px; } /* V29.093 - anchored "which lab?" receive popover (positioned by JS). */ .mt-receive-pop { position: fixed; z-index: 200; width: 300px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 18px 44px rgba(40, 30, 15, 0.28); padding: 14px; display: flex; flex-direction: column; gap: 10px; } .mt-receive-title { font-size: 12.5px; font-weight: 700; color: var(--text); } .mt-receive-seg { align-self: stretch; } .mt-receive-namewrap { display: block; } .mt-receive-namewrap input { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; background: var(--bg-elev); color: var(--text); } .mt-receive-err { color: #B3261E; font-size: 11.5px; margin: 0; } .mt-receive-foot { display: flex; justify-content: flex-end; align-items: center; gap: 8px; } .mt-receive-cancel { background: none; border: 0; color: var(--text-dim); font-size: 12.5px; font-weight: 600; cursor: pointer; } .mt-receive-go { padding: 7px 14px; } .mt-dash { display: flex; flex-direction: column; gap: 16px; } .mt-dash-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .mt-dash-toolbar-note { color: var(--text-muted); } .mt-dash-import { display: inline-flex; align-items: center; gap: 7px; background: var(--accent); color: #fff; text-decoration: none; border-radius: 8px; padding: 8px 15px; font-size: 12.5px; font-weight: 700; letter-spacing: .2px; } .mt-dash-import:hover { background: var(--accent-soft); } .mt-dash-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } @media (max-width: 900px) { .mt-dash-kpis { grid-template-columns: 1fr; } } .mt-kpi-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 15px 17px; display: flex; flex-direction: column; gap: 4px; } .mt-kpi-label { color: var(--text-dim); } .mt-kpi-value { display: flex; align-items: baseline; gap: 3px; margin-top: 2px; } .mt-kpi-sub { color: var(--text-muted); } .mt-kpi-flag { margin-top: 2px; color: var(--text-muted); } .mt-kpi-flag.is-warn { color: var(--orange); font-weight: 600; } .mt-kpi-finhint { margin-top: 4px; color: var(--text-muted); } /* V29.093 - standard KPI averages strip: plain text over a dashed divider (the boxed sub-tiles are retired). */ .mt-kpi-empty { color: var(--text-muted); } .mt-kpi-avgs { display: flex; gap: 22px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); } .mt-avg { display: flex; flex-direction: column; gap: 1px; } .mt-avg-v { font-size: 12.5px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } .mt-avg-v.is-warn { color: var(--orange); } .mt-avg-k { font-size: 10.5px; color: var(--text-muted); } .mt-dash-chart-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 15px 17px 10px; } .mt-dash-chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; } .mt-dash-chart-head .t-sub { color: var(--text-muted); } .mt-dash-chart-wrap { position: relative; height: 240px; } /* ========================================================================== V29.116 - Grade Vault v2 (real_grade_vault). Tight fixed-layout table (no gold->silver gap), interactive per-sample chips with exclude + gold-only high-side auto outlier flag, expandable silver/humidity, bulk push. ========================================================================== */ .pill-nav--center { justify-content: center; } .rgv2-toolbar { display: flex; align-items: center; gap: 14px; margin: 14px 0 12px; flex-wrap: wrap; } .rgv2-search { flex: 0 0 auto; margin: 0; } .rgv2-hint { font-size: 12px; color: var(--text-muted, #98907E); } /* V29.324 - THE standard search bar (vault9 Part 1). One strip above the card: field, then the scope line, then the legend pushed right. No buttons/filters. */ .std-search { width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: #FDFBF6; border: 1px solid #E6E0CF; border-radius: 12px; padding: 12px 14px; } .std-search-field { flex: 0 0 360px; max-width: 100%; display: inline-flex; align-items: center; gap: 9px; background: #fff; border: 1px solid #E6E0CF; border-radius: 10px; padding: 9px 13px; } .std-search-field:focus-within { border-color: #D3B088; box-shadow: 0 0 0 2px rgba(156, 91, 43, .10); } .std-search-icon { flex: 0 0 auto; } .std-search-input { flex: 1 1 auto; min-width: 0; border: none; background: transparent; outline: none; font-family: inherit; font-size: 12.5px; color: var(--ink, #2B2620); } .std-search-input::placeholder { color: #B0A78F; font-size: 12px; } .std-search-input::-webkit-search-cancel-button { -webkit-appearance: none; } /* V29.329 - client-mode clear button (Pad Manager) sits inside the field. */ .std-search-clear { flex: 0 0 auto; border: none; background: none; cursor: pointer; color: #B0A78F; font-size: 15px; line-height: 1; padding: 0 2px; } .std-search-clear:hover { color: #6B6353; } .std-search-clear[hidden] { display: none !important; } .std-search-scope { font-size: 11px; color: #98907E; } .std-search-legend { margin-left: auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .std-leg { font-size: 10.5px; font-weight: 700; color: #6B6353; display: inline-flex; align-items: center; gap: 6px; } .std-leg::before { content: ""; width: 9px; height: 9px; border-radius: 3px; border: 1px solid; } .std-leg--green::before { background: #E9F0E4; border-color: #C6D8BC; } .std-leg--amber::before { background: #FDF3E0; border-color: #ECCF9A; } .std-leg--re::before { background: #F1EDF7; border-color: #CCC0E0; } /* V29.324 - footer pager, inside the card. Showing · Per-page · compact pager. */ .rgv-pager { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; border-top: 1px solid #F0ECE0; background: #FDFBF6; padding: 12px 16px; border-radius: 0 0 12px 12px; } .rgv-pager-showing { font-size: 12px; color: #6B6353; font-variant-numeric: tabular-nums; } .rgv-pager-showing b { color: #2B2620; font-weight: 800; } .rgv-pager-perpage { margin-left: auto; } .rgv-perpage-btn { display: inline-flex; align-items: center; gap: 6px; width: auto; height: auto; background: #fff; border: 1px solid #E6E0CF; border-radius: 8px; padding: 6px 11px; font-family: inherit; font-size: 12px; color: #6B6353; cursor: pointer; line-height: 1; } .rgv-perpage-btn b { color: #2B2620; font-weight: 800; } .rgv-perpage-btn:hover { border-color: #D3B088; } .rgv-perpage-caret { color: #B0A78F; font-size: 10px; } .rgv-perpage-menu .wb-kebab-item.is-on { font-weight: 800; color: #9C5B2B; } .rgv-pager-nav { display: flex; align-items: center; gap: 4px; } .rgv-page { min-width: 26px; height: 26px; padding: 0 6px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-variant-numeric: tabular-nums; text-decoration: none; background: #fff; border: 1px solid #E6E0CF; color: #6B6353; } .rgv-page:hover { border-color: #D3B088; } .rgv-page.is-current { background: #9C5B2B; border-color: #9C5B2B; color: #fff; font-weight: 800; } .rgv-page.is-disabled { color: #CFC7B4; border-color: #EDE7D6; pointer-events: none; } .rgv-page-gap { color: #B0A78F; padding: 0 2px; } .rgv3-empty { padding: 20px 14px; color: var(--text-muted, #98907E); font-size: 12.5px; } /* V29.125 - span the full content width like every other module (was capped at 1290px, floating with dead space on wide screens); the freed width goes to the Gold column. */ .rgv2-wrap { width: 100%; } .rgv2-table { width: 100%; table-layout: fixed; border-collapse: collapse; background: #fff; border: 1px solid var(--border, #E1DBC9); border-radius: 12px; overflow: hidden; } .rgv2-table thead th { background: var(--table-head-bg, #DCCFB6); color: var(--table-head-ink, #5C4326); border-bottom: 1px solid var(--table-head-border, #C4B294); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; text-align: left; padding: 9px 14px; white-space: nowrap; } .rgv2-table td { padding: 11px 14px; border-bottom: 1px solid #F0ECE0; vertical-align: middle; font-size: 12px; } .rgv2-table tr:last-child td { border-bottom: 0; } .rgv2-c { text-align: center; } .rgv2-table th.rgv2-r, .rgv2-table td.rgv2-r { text-align: right; } .rgv2-table .num { text-align: right; font-variant-numeric: tabular-nums; } .rgv2-lot { font-weight: 700; } /* V29.153 - shared numeric value + muted unit suffix (units never full weight) */ .rgv2-numval, .rgv2-avgval { white-space: nowrap; } .rgv2-table .g-val { font-variant-numeric: tabular-nums; } .rgv2-numval .g-unit, .rgv2-avgval .g-unit, .rgv2-unit, .rgv2-hum-ro small, .rgv2-recovery small, .rgv2-humval small { font-size: 10.5px; font-weight: 700; color: #98907E; } .rgv2-strong .g-val { font-weight: 800; } .rgv2-retest { font-size: 8.5px; font-weight: 800; color: #A33C2E; background: #FBEAE7; border: 1px solid #A33C2E; border-radius: 5px; padding: 1px 5px; } .rgv2-empty { text-align: center; color: var(--text-muted, #98907E); padding: 22px; } .rgv2-strong { font-weight: 800; } /* V29.153 - gold (Au) average cell: value over a reconciling caption */ .rgv2-goldcell { line-height: 1.2; } .rgv2-avgval .g-val { font-size: 15px; font-weight: 800; color: var(--ink, #2B2620); } .rgv2-avgcap { display: block; margin-top: 2px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #B0A791; white-space: nowrap; } /* contributing samples: "=" connector + tinted inset group of two-line chips */ .rgv2-samplescell { white-space: normal; } .rgv2-eq { font-size: 13px; font-weight: 800; color: #C4BBA4; padding-right: 8px; vertical-align: middle; } .rgv2-chipgroup { display: inline-flex; flex-wrap: wrap; gap: 5px; vertical-align: middle; background: #FAF8F0; border: 1px solid #EDE7D6; border-radius: 10px; padding: 5px 7px; } /* V29.133 - two-line coded chip: bag code above, value below */ .rgv2-chip { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; min-width: 58px; padding: 3px 8px; border-radius: 7px; vertical-align: top; background: #fff; border: 1px solid #E3DBC8; color: var(--ink, #2B2620); cursor: pointer; } .rgv2-chipgroup--legacy .rgv2-chip { min-width: auto; } .rgv2-chip-code { font-size: 8px; font-weight: 800; font-family: var(--font-mono, ui-monospace, "SFMono-Regular", Menlo, monospace); letter-spacing: 0.4px; text-transform: uppercase; color: #A79E88; line-height: 1; white-space: nowrap; } .rgv2-chip-val { font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; color: #2B2620; line-height: 1.1; } .rgv2-chip:hover { border-color: #C9BEA4; } /* manual exclusion — dashed + struck (not an outlier) */ .rgv2-chip.is-excluded { background: #FAF8F0; border: 1px dashed #C9BEA4; } .rgv2-chip.is-excluded .rgv2-chip-val { color: #B9B2A0; text-decoration: line-through; } .rgv2-chip.is-excluded .rgv2-chip-code { color: #C4BCA9; } /* excluded outlier — red, with the reason chip beside the group */ .rgv2-chip.is-red { background: #FDF6F4; border: 1.5px solid #D98E80; } .rgv2-chip.is-red .rgv2-chip-code { color: #C07868; } .rgv2-chip.is-red .rgv2-chip-val { color: #A33C2E; text-decoration: none; } /* static chip (Awaiting tab) — never toggles */ .rgv2-chip--static { cursor: default; } .rgv2-chip--wait .rgv2-chip-val { font-size: 11px; font-weight: 700; color: #98907E; } [data-readonly="1"] .rgv2-chip { cursor: default; } [data-readonly="1"] .rgv2-chip:hover { border-color: #E3DBC8; } .rgv2-reason { display: inline-flex; flex-wrap: wrap; gap: 5px; vertical-align: middle; } .rgv2-reason:not(:empty) { margin-left: 8px; } .rgv2-reason-chip { display: inline-block; background: #FBEAE7; border: 1px solid #E0AFA5; color: #A33C2E; border-radius: 999px; padding: 2px 9px; font-size: 10px; font-weight: 700; white-space: nowrap; } .rgv2-row--flagged > td { background: #FDF9F8; } .rgv2-note { display: inline-block; margin-left: 8px; font-size: 10px; font-weight: 700; color: #B0822B; } .rgv2-note[hidden] { display: none; } .rgv2-silver .g-val { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-1, #2C2A24); } .rgv2-recovery { color: var(--text-muted, #98907E); font-variant-numeric: tabular-nums; } .rgv2-push { background: #4F7D49; color: #fff; border: 0; border-radius: 8px; padding: 6px 12px; font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap; } .rgv2-push:hover { background: #446B40; } .rgv2-flagdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #A33C2E; margin-left: 4px; vertical-align: middle; } /* bulk bar */ .rgv2-bulkbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; padding: 12px 16px; border-radius: 10px; background: #FAF3E9; border: 1px solid #E6D3BB; } .rgv2-bulk-count { font-size: 12px; font-weight: 700; color: var(--ink, #2B2620); display: inline-flex; align-items: center; gap: 6px; } .rgv2-bulk-push { background: #4F7D49; color: #fff; border: 0; border-radius: 8px; padding: 8px 14px; font-size: 12.5px; font-weight: 700; cursor: pointer; } .rgv2-bulk-push:hover { background: #446B40; } /* V29.125 - the display:flex above defeats the `hidden` attribute (the bar stayed on screen at 0 selected / never slid in); restore hide-when-hidden so ticking a row summons it and clearing hides it. */ .rgv2-bulkbar[hidden] { display: none !important; } /* V29.125 - lot chip (Awaiting + Confirmed tabs), bag-code chips, age chip */ .rgv2-lotchip { display: inline-block; font-weight: 700; color: #8B4A2B; background: #FAF8F0; border: 1px solid #E6E0CF; border-radius: 6px; padding: 3px 9px; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; } /* V29.325 - a lot awaiting a re-sample: the lot tag itself turns violet (replaces the two-line "AWAITING RESAMPLE" pill). Violet = re-sample and nothing else. */ .rgv2-lotchip--re { color: #5D4A78; background: #F1EDF7; border-color: #CCC0E0; } /* V29.153 - Awaiting: merged SENT TO LABS cell (two pills on one line) */ .rgv2-sentcell { white-space: nowrap; } .rgv2-sentpill { display: inline-block; margin-right: 6px; font-size: 10px; font-weight: 800; letter-spacing: 0.4px; border-radius: 6px; padding: 2px 9px; white-space: nowrap; } .rgv2-sentpill.is-sent { color: #4F7D49; background: #E9F0E4; border: 1px solid #C6D8BC; } .rgv2-sentpill.is-out { color: #A79E88; background: #FAF8F0; border: 1px dashed #D8D0BC; } /* V29.326 - Awaiting WAITING pill: Today green, "n days" neutral, amber at 6d+ (routine, just look — red is reserved for something actually wrong). */ .rgv2-wait { display: inline-block; font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 4px 11px; font-variant-numeric: tabular-nums; white-space: nowrap; } .rgv2-wait--today { color: #4F7D49; background: #E9F0E4; border: 1px solid #C6D8BC; } .rgv2-wait--neutral { color: #6B6353; background: #FAF8F0; border: 1px solid #E6E0CF; } .rgv2-wait--amber { color: #B7791F; background: #FDF3E0; border: 1px solid #ECCF9A; } .rgv2-wait--red { color: #A33C2E; background: #FBEAE7; border: 1px solid #E0AFA5; } /* V29.326 - Awaiting Results rebuilt as an 8-column grid (was a crushed 5-col table). Humidity + Waiting get 6px inside the cell so the figure never hugs the card edge and the two columns never touch. */ .rgv2-aw { background: #fff; border: 1px solid #E6E0CF; border-radius: 12px; } .rgv2-aw-hdr, .rgv2-aw-row { display: grid; grid-template-columns: 118px minmax(0, 1fr) 88px 104px minmax(0, 1.5fr) 224px 132px 128px; align-items: center; gap: 10px; padding: 9px 14px; } .rgv2-aw-hdr { background: var(--table-head-bg, #DCCFB6); border-bottom: 1px solid var(--table-head-border, #C4B294); padding: 8px 14px; border-radius: 11px 11px 0 0; } .rgv2-aw-hdr span { font-size: 10px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--table-head-ink, #5C4326); } .rgv2-aw-row { border-bottom: 1px solid #F0ECE0; } .rgv2-aw-row:last-child { border-bottom: 0; } .rgv2-aw-r { justify-self: end; text-align: right; } .rgv2-aw-hum, .rgv2-aw-wait { padding-right: 6px; } .rgv2-aw-miner { font-size: 12.5px; color: #2B2620; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rgv2-aw-num { font-size: 12.5px; font-weight: 700; color: #2B2620; font-variant-numeric: tabular-nums; } .rgv2-aw-sent { font-size: 11.5px; color: #6B6353; font-variant-numeric: tabular-nums; white-space: nowrap; } .rgv2-aw-u { font-size: 9px; font-weight: 600; color: #98907E; margin-left: 1px; } .rgv2-aw-hum { font-size: 12.5px; font-weight: 800; color: #2B2620; font-variant-numeric: tabular-nums; } .rgv2-aw-samples { min-width: 0; } .rgv2-aw-samples .rgv2-chipgroup { display: flex; flex-wrap: wrap; gap: 4px; } .rgv2-notin { color: #98907E; font-size: 11.5px; } .rgv2-chip--met { display: inline-flex; align-items: center; gap: 4px; } .rgv2-chip--met::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: #4F7D49; flex: 0 0 auto; } .rgv2-chip--re { background: #F5F1FA; border-color: #CCC0E0; } .rgv2-re-tag { display: inline-block; background: #5D4A78; color: #fff; font-size: 8px; font-weight: 800; letter-spacing: .3px; line-height: 1.4; padding: 0 4px; border-radius: 4px; margin-right: 3px; vertical-align: middle; } .rgv2-hum-ro { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-1, #2C2A24); } .rgv2-hum-ro small { font-weight: 600; color: var(--text-muted, #98907E); margin-left: 1px; } /* ========================================================================== V29.133 - Grade Vault v4: grades-only gate, read-only Commercial view, the missing-value Confirm dialog, coded chips (above), and the informational humidity/recovery status cells. ========================================================================== */ .rgv2-recovery { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-1, #2C2A24); } .rgv2-recovery small, .rgv2-humval small { font-weight: 600; color: var(--text-muted, #98907E); margin-left: 1px; } .rgv2-humval { font-weight: 700; font-variant-numeric: tabular-nums; } .rgv2-notin { font-weight: 700; font-size: 11px; letter-spacing: 0.3px; } /* V29.146 - muted "humidity still to come" tag on a grade-confirmed lot (does NOT gate Confirmed Grades; Commercial reads it to see the hold coming). */ .rgv2-hum-pending { display: inline-block; padding: 1px 8px; border-radius: 999px; background: #F3EFE3; color: #98907E; border: 1px solid #E1DBC9; font-size: 9.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; white-space: nowrap; } .rgv2-nosamples { font-size: 11.5px; color: #BFB7A3; } .rgv2-readonly-chip { margin-left: 12px; align-self: center; font-size: 10px; font-weight: 800; letter-spacing: 0.6px; color: #6B6353; background: #EFEADD; border: 1px solid var(--border-strong, #CFC7B1); border-radius: 6px; padding: 3px 9px; text-transform: uppercase; } .rgv2-status-chip { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 0.4px; color: #6B6353; background: #F3EFE4; border: 1px dashed var(--border-strong, #CFC7B1); border-radius: 6px; padding: 3px 8px; text-transform: uppercase; white-space: nowrap; } /* the Confirm dialog */ .rgv2-dialog-scrim { position: fixed; inset: 0; background: rgba(30, 26, 20, 0.34); z-index: 1200; } .rgv2-dialog { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1201; width: min(560px, calc(100vw - 32px)); background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(31, 26, 20, 0.28); overflow: hidden; } .rgv2-dialog-head { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--border, #E7E1D2); } .rgv2-dialog-title { margin: 0; } .rgv2-dialog-lot { font-size: 12px; font-weight: 700; color: #7A5A2E; background: #F3E7D3; border: 1px solid #E4D3B7; border-radius: 6px; padding: 3px 9px; } .rgv2-dialog-x { margin-left: auto; background: none; border: 0; font-size: 20px; line-height: 1; color: var(--text-muted, #98907E); cursor: pointer; padding: 0 4px; } .rgv2-dialog-body { padding: 18px 20px; } .rgv2-dialog-warn { background: #FBF3E0; border: 1px solid #EAD6A6; border-radius: 12px; padding: 14px 16px; } .rgv2-dialog-warn-title { font-size: 14px; font-weight: 800; color: #97611A; margin-bottom: 6px; } .rgv2-dialog-warn-body { margin: 0; font-size: 12.5px; line-height: 1.5; color: #5A5348; } /* V29.261 - Confirm dialog: green read-only summary (humidity in) + amber notes. */ .rgv2-dialog-summary { background: #F1F7EE; border: 1px solid #C6D8BC; border-radius: 12px; padding: 14px 16px; } .rgv2-dialog-summary p { margin: 0; font-size: 12.5px; line-height: 1.55; color: #3F5A3A; } .rgv2-dialog-summary strong { color: #2F4A2C; } .rgv2-dialog-recnote, .rgv2-dialog-humnote { margin-top: 12px; background: #FBF3E0; border: 1px solid #EAD6A6; border-radius: 12px; padding: 12px 16px; } .rgv2-dialog-recnote p, .rgv2-dialog-humnote p { margin: 0; font-size: 12.5px; line-height: 1.5; color: #7A5A25; } .rgv2-dialog-body > .rgv2-dialog-field { margin-top: 14px; } .rgv2-dialog-fill { margin-top: 16px; } .rgv2-dialog-fill-label { margin-bottom: 8px; } .rgv2-dialog-inputs { display: flex; gap: 14px; flex-wrap: wrap; } .rgv2-dialog-field { flex: 1 1 180px; display: flex; flex-direction: column; gap: 5px; } .rgv2-dialog-field-label { color: var(--ink-2, #5A5348); } .rgv2-dialog-input-wrap { display: flex; align-items: center; border: 1px solid var(--border-strong, #CFC7B1); border-radius: 9px; padding: 0 12px; background: #fff; } .rgv2-dialog-input-wrap:focus-within { border-color: #A85C3A; box-shadow: 0 0 0 2px rgba(168, 92, 58, 0.14); } .rgv2-dialog-input { flex: 1 1 auto; border: 0; outline: none; padding: 10px 0; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; background: transparent; color: var(--ink, #2B2620); } .rgv2-dialog-unit { color: var(--text-muted, #98907E); font-weight: 700; } .rgv2-dialog-note { margin: 12px 0 0; font-size: 11px; line-height: 1.5; } .rgv2-dialog-err { margin-top: 12px; padding: 8px 12px; border-radius: 8px; background: #F7E4E0; border: 1px solid #C6452A; color: #A5381F; font-size: 12.5px; font-weight: 600; } .rgv2-dialog-foot { display: flex; align-items: center; gap: 12px; padding: 14px 20px; background: #FAF8F0; border-top: 1px solid var(--border, #E7E1D2); } .rgv2-dialog-cancel { margin-right: auto; background: none; border: 0; padding: 6px 4px; cursor: pointer; color: var(--ink-2, #5A5348); font-size: 13px; font-weight: 600; } .rgv2-dialog-cancel:hover { color: var(--ink, #2B2620); text-decoration: underline; } .rgv2-dialog-confirm { background: #3E7D4E; border: 0; border-radius: 10px; padding: 11px 18px; color: #fff; font-size: 13.5px; font-weight: 800; cursor: pointer; } .rgv2-dialog-confirm:hover { background: #356B44; } @media print { .rgv2-dialog, .rgv2-dialog-scrim { display: none !important; } } /* V29.131 - Humidity review: the report table mirrored in HTML with a tag band below each row (normal flow, never overlaid). Green = matched · amber = auto-corrected / unusual value · red = unresolved. */ .hum-rev-meta { margin-left: auto; } .hum-rev-table { width: 100%; border-collapse: collapse; } .hum-rev-table thead th { text-align: left; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; color: var(--table-head-ink, #5C4326); background: var(--table-head-bg, #DCCFB6); border-bottom: 1px solid var(--table-head-border, #C4B294); padding: 6px 10px; } .hum-rev-table th.num, .hum-rev-table td.num { text-align: right; font-variant-numeric: tabular-nums; } .hum-rev-datarow > td { padding: 8px 10px 2px; font-size: 12.5px; border-top: 1px solid var(--border, #E1DBC9); } .hum-rev-bandrow > td { padding: 0 10px 10px; border: 0; } .hum-band { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .hum-lottag, .hum-h2obox { display: inline-flex; align-items: center; gap: 5px; border-radius: 8px; border: 1.5px solid; padding: 3px 8px; font-size: 12px; } .hum-tag-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; opacity: 0.75; } .hum-tag-suffix { font-size: 11px; font-weight: 700; } .hum-lot-input { width: 96px; border: 0; background: transparent; font-weight: 700; text-align: left; padding: 0; color: inherit; } .hum-h2o-input { width: 52px; border: 0; background: transparent; font-weight: 700; text-align: right; padding: 0; color: inherit; font-variant-numeric: tabular-nums; } .hum-lot-input:focus, .hum-h2o-input:focus { outline: none; } .hum-lottag--green, .hum-h2obox--green { border-color: #3E9B6B; background: rgba(230,244,240,.97); color: #2C6E51; } .hum-lottag--amber, .hum-h2obox--amber { border-color: #E0912F; background: #FBF3E0; color: #97611A; } .hum-lottag--red, .hum-h2obox--red { border-color: #C6452A; background: #F7E4E0; color: #A5381F; } .hum-suggest { border: 1px solid #E0B9A8; background: #FBEEE8; color: #A5381F; border-radius: 8px; padding: 3px 8px; font-size: 11.5px; font-weight: 700; cursor: pointer; } /* V29.146 - the header summary strip + the CONFLICT review action + replace dialog */ .hum-rev-summary { background: #FDF3E0; border: 1px solid #ECCF9A; border-radius: 10px; padding: 11px 14px; margin: 12px 0; color: #8A6A1F; } .hum-rev-summary-line { font-size: 12.5px; font-weight: 600; } .hum-rev-summary-line strong { font-weight: 800; font-variant-numeric: tabular-nums; } .hum-rev-summary-note { margin-top: 4px; } .hum-review-btn { border: 1px solid #D3B088; background: #fff; color: #8A6A1F; border-radius: 8px; padding: 3px 10px; font-size: 11.5px; font-weight: 700; cursor: pointer; white-space: nowrap; } .hum-review-btn:hover { background: #FDF7F1; } .hum-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; } .hum-modal[hidden] { display: none !important; } .hum-modal-scrim { position: absolute; inset: 0; background: rgba(43,38,32,.42); } .hum-modal-panel { position: relative; width: 480px; max-width: calc(100vw - 32px); background: #FAF8F0; border: 1px solid #E6E0CF; border-radius: 12px; box-shadow: 0 12px 40px rgba(60,45,25,.22); overflow: hidden; } .hum-modal-head { display: flex; align-items: center; gap: 8px; padding: 13px 16px; border-bottom: 1px solid #F0ECE0; } .hum-modal-title { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: #5C4326; margin: 0; } .hum-modal-close { margin-left: auto; border: none; background: none; font-size: 20px; line-height: 1; color: #98907E; cursor: pointer; } .hum-modal-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; } .hum-replace-warn { display: flex; gap: 10px; align-items: flex-start; background: #FDF3E0; border: 1px solid #ECCF9A; border-radius: 9px; padding: 11px 13px; } .hum-replace-warn-ico { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 999px; background: #B7791F; color: #fff; font-size: 13px; font-weight: 800; line-height: 20px; text-align: center; } .hum-replace-warn-title { font-size: 12.5px; font-weight: 700; color: #8A6A1F; } .hum-replace-warn-body { font-size: 11.5px; line-height: 1.5; color: #8A6A1F; margin-top: 2px; } .hum-replace-cmp { border: 1px solid #E6E0CF; border-radius: 9px; overflow: hidden; } .hum-replace-cmp-row { display: flex; align-items: baseline; gap: 10px; padding: 9px 12px; background: #fff; } .hum-replace-cmp-row--new { background: #FEFBF4; border-top: 1px solid #F0ECE0; } .hum-replace-cmp-label { width: 56px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #98907E; } .hum-replace-cmp-val { font-size: 15px; font-weight: 800; color: #2B2620; font-variant-numeric: tabular-nums; } .hum-replace-cmp-src { margin-left: auto; } .hum-replace-impact { background: #FDF3E0; border: 1px solid #ECCF9A; border-radius: 9px; padding: 10px 12px; font-size: 11.5px; line-height: 1.5; color: #8A6A1F; } .hum-modal-actions { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid #F0ECE0; } .hum-modal-keep { margin-left: auto; border: none; background: none; color: #6B6353; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; } .hum-modal-replace { white-space: nowrap; } body.hum-modal-open { overflow: hidden; } /* V29.146 - humidity chain-of-custody dashboard table */ .hum-dash-wrap { overflow-x: auto; } .hum-dash-table { width: 100%; border-collapse: collapse; } .hum-dash-table thead th { background: var(--table-head-bg); color: var(--table-head-ink); border-bottom: 1px solid var(--table-head-border); text-align: left; padding: 8px 12px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; white-space: nowrap; } .hum-dash-table th.md-num, .hum-dash-table td.md-num { text-align: right; font-variant-numeric: tabular-nums; } .hum-dash-table td { padding: 9px 12px; border-bottom: 1px solid #F0ECE0; font-variant-numeric: tabular-nums; } .hum-dash-table th:last-child, .hum-dash-table td:last-child { padding-right: 16px; } .hum-dash-row--amber { background: #FDF9F0; } .hum-dash-row--red { background: #FBEFEC; } .hum-dash-src { color: #6B6353; font-size: 11.5px; } .hum-dash-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .4px; white-space: nowrap; } .hum-dash-pill--done { background: #E9F0E4; color: #3F6A3A; border: 1px solid #C6D8BC; } .hum-dash-pill--today { background: #F3EFE3; color: #98907E; border: 1px solid #E1DBC9; } .hum-dash-pill--amber { background: #FDF3E0; color: #8A6A1F; border: 1px solid #ECCF9A; } .hum-dash-pill--red { background: #FBEAE7; color: #A33C2E; border: 1px solid #E0AFA5; } /* V29.265 - humidity dashboard v2: WAITING / HUMIDITY IN split (+ Upload-Centre Lots segment), as grid rows whose header shares ONE template per section so every header sits over its column — no dead zone, full-width, one line per lot at 1366px. Font sizes are raw here (micro chip/pill labels below the .t-* scale), matching the sibling .hum-dash-* / .rgv3-* dashboard blocks. */ .humd-head { margin: 18px 0 10px 2px; } .humd-head:first-child { margin-top: 0; } .humd-cap { display: block; } .humd-sub { display: block; margin-top: 3px; } .humd-card { background: #fff; border: 1px solid #E6E0CF; border-radius: 12px; overflow: hidden; margin-bottom: 8px; } .humd-hd, .humd-row { display: grid; align-items: center; padding: 0 16px; } .humd-hd { background: var(--table-head-bg, #DCCFB6); border-bottom: 1px solid var(--table-head-border, #C4B294); } .humd-hd > div { font-size: 10px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--table-head-ink, #5C4326); padding: 8px 8px; white-space: nowrap; } .humd-row { border-bottom: 1px solid #F0ECE0; padding: 8px 16px; } .humd-row:last-child { border-bottom: 0; } .humd-row > div { padding: 0 8px; min-width: 0; } .humd-gw { grid-template-columns: 130px 170px 1fr 150px; } .humd-gi { grid-template-columns: 130px 170px 1fr 180px 170px 120px; } .humd-gu { grid-template-columns: 150px 160px 1fr 200px; } .humd-r { justify-self: end; text-align: right; } .humd-num { font-size: 12px; font-weight: 700; color: #2B2620; font-variant-numeric: tabular-nums; white-space: nowrap; } .humd-num i { font-style: normal; font-size: 10px; color: #98907E; font-weight: 600; margin-left: 3px; } .humd-mut { color: #98907E; font-size: 11.5px; } .humd-reads { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .humd-avg { border: 1px solid #C6D8BC; background: #F4F8F2; border-radius: 8px; padding: 4px 10px; display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.1; } .humd-avg b { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; color: #3F6A3A; } .humd-avg small { font-size: 6.5px; font-weight: 800; letter-spacing: .3px; color: #7FA077; text-transform: uppercase; } .humd-pill { display: inline-block; border-radius: 999px; font-size: 9px; font-weight: 800; letter-spacing: .4px; padding: 4px 10px; white-space: nowrap; } .humd-pill--ok { background: #E9F0E4; color: #4F7D49; border: 1px solid #C6D8BC; } .humd-age { display: inline-block; border-radius: 999px; font-size: 9px; font-weight: 800; padding: 3px 10px; white-space: nowrap; } .humd-age--ok { background: #FAF8F0; color: #A79E88; border: 1px solid #E6E0CF; } .humd-age--am { background: #FDF3E0; color: #8A6A1F; border: 1px solid #ECCF9A; } .humd-age--rd { background: #FBEAE7; color: #A33C2E; border: 1px solid #E0AFA5; } .humd-row--wide { background: #FEFAF2; } .humd-empty { padding: 20px 16px; } /* V29.146 - rejected-rows log surfaced in the Upload Centre */ .hum-rejected { border-left: 3px solid #E0AFA5; } .hum-rejected-wrap { overflow-x: auto; } .hum-rejected-table { width: 100%; border-collapse: collapse; } .hum-rejected-table thead th { background: var(--table-head-bg); color: var(--table-head-ink); border-bottom: 1px solid var(--table-head-border); text-align: left; padding: 7px 12px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; white-space: nowrap; } .hum-rejected-table td { padding: 8px 12px; border-bottom: 1px solid #F0ECE0; } .hum-rejected-table td.md-num, .hum-rejected-table th.md-num { text-align: right; font-variant-numeric: tabular-nums; } .hum-rejected-table th:last-child, .hum-rejected-table td:last-child { padding-right: 16px; } /* V29.153 - Confirmed tab: green stamp chip takes the slack + Admin-unlock button */ .rgv2-confirmed-cell { white-space: nowrap; } .rgv2-stamp { display: inline-block; font-size: 11px; font-weight: 700; color: #3F6A3A; background: #E9F0E4; border: 1px solid #C6D8BC; border-radius: 7px; padding: 3px 10px; white-space: nowrap; } .rgv2-adminbtn { background: #fff; color: #9C5B2B; border: 1px solid #D3B088; border-radius: 6px; padding: 4px 10px; font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap; } .rgv2-adminbtn:hover { background: #FBF4EC; } /* ========================================================================== V29.117 - ore-type chip (Met Lab sets it; read-only everywhere else). ========================================================================== */ .ore-chip { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 5px; font-size: 8.5px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; white-space: nowrap; } .ore-chip--oxide { color: #B7791F; background: #FDF3E0; border: 1px solid #ECCF9A; } .ore-chip--mixed { color: #5A6F8F; background: #EEF3FA; border: 1px solid #C6D4E8; } .ore-chip--sulfide { color: #7A4FA0; background: #F5EFFB; border: 1px solid #DCCBEE; } .ore-chip--none { color: var(--text-muted, #98907E); background: var(--panel, #FAF8F0); border: 1px dashed #C9BEA4; } /* Met tracker ore-type picker trigger — the chip IS the button. */ .wb-kebab-btn.mt-ore-trigger { padding: 2px; font-size: 0; border-radius: 6px; } .wb-kebab-btn.mt-ore-trigger:hover { background: rgba(168, 92, 58, 0.08); } /* V29.117 - Stockpile: recovery chip, blend-group band + Milled ✓, Milled tab. */ .pm-yard-rec-chip { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 5px; font-size: 8.5px; font-weight: 800; letter-spacing: 0.3px; white-space: nowrap; color: #4F7D49; background: #E9F0E4; border: 1px solid #C6D8BC; } .pm-blendband { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--table-head-bg, #DCCFB6); color: var(--table-head-ink, #5C4326); border-radius: 8px; padding: 6px 10px; margin-bottom: 6px; } .pm-blendband .pm-yard-blendgroup-name { font-weight: 800; font-size: 12px; } .pm-blendband .pm-yard-blendgroup-stats { font-size: 10px; font-weight: 600; } .pm-milled-form { margin: 0 0 0 auto; } .pm-milled-btn { background: #4F7D49; color: #fff; border: 0; border-radius: 7px; padding: 4px 10px; font-size: 10.5px; font-weight: 700; cursor: pointer; white-space: nowrap; } .pm-milled-btn:hover { background: #446B40; } .pm-milled-members td { background: #FDFCF7; } .pm-milled-memberchip { display: inline-flex; align-items: center; gap: 5px; margin: 0 8px 4px 0; padding: 3px 7px; border-radius: 6px; background: #fff; border: 1px solid var(--border, #E1DBC9); font-size: 10.5px; } .pm-milled-memberchip a { color: var(--accent, #9C5B2B); text-decoration: none; } .pm-newblend-item-rec { font-size: 10.5px; font-weight: 700; color: #4F7D49; font-variant-numeric: tabular-nums; } .pm-newblend-recnote { font-size: 10px; margin: 4px 0 0; } /* V29.320 - Pad Manager blended-ore rebuild: a labelled column stat strip + blend CARDS (checkbox / blend chip / four tabular figures / status). No overflow:hidden anywhere - it fails to paint under the app-shell zoom:0.8 (same trap as the blend band). The lots strip is display:flex, so it carries an explicit [hidden] guard. */ /* pad8 Part 2 - metric strip: three labelled cells, dual-unit figures. */ .pm-metricstrip { display: flex; gap: 0; margin: 11px 16px 0; border: 1px solid #EDE7D8; border-radius: 10px; background: #FDFBF6; overflow: hidden; } .pm-metric { flex: 1; min-width: 0; padding: 9px 12px; border-right: 1px solid #EDE7D8; display: flex; flex-direction: column; gap: 2px; } .pm-metric:last-child { border-right: 0; } .pm-metric-label { font-size: 8px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: #98907E; } .pm-metric-fig { font-size: 18px; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; color: #2B2620; white-space: nowrap; } .pm-metric-fig i { font-style: normal; font-size: 10px; font-weight: 600; color: #98907E; margin-left: 3px; } .pm-metric-sub { font-size: 9.5px; font-weight: 500; color: #B0A78F; font-variant-numeric: tabular-nums; white-space: nowrap; min-height: 12px; } /* pad8 Part 4 - blend card = a 74px left rail + body. */ .pm-blend2 { display: flex; border: 1px solid #E6E0CF; border-radius: 10px; background: #fff; margin-bottom: 8px; overflow: hidden; } .pm-blend2.on { border-color: #9C5B2B; box-shadow: 0 0 0 2px rgba(156, 91, 43, .12); } .pm-brail-rail { flex: none; width: 74px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: #FAF3E9; border-right: 1px solid #E4CDB0; padding: 10px 4px; } .pm-brail-lbl { font-size: 6.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #B08A5E; } .pm-brail-no { font-size: 20px; font-weight: 800; color: #9C5B2B; line-height: 1; } .pm-brail-body { flex: 1; min-width: 0; display: flex; flex-direction: column; } .pm-brail-top { display: flex; align-items: center; gap: 9px; padding: 9px 12px 7px; } .pm-brail-formed { font-size: 10.5px; font-weight: 600; color: #6B6353; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pm-brail-top .pm-mill { margin-left: auto; } .pm-cb { width: 16px; height: 16px; border: 1.5px solid #C9BEA4; border-radius: 5px; background: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; cursor: pointer; } .pm-cb.on { background: #9C5B2B; border-color: #9C5B2B; } .pm-cb.on::after { content: ""; width: 8px; height: 4.5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px); } .pm-cb--off { border-color: #EDE8DA; background: #F7F4EA; cursor: default; } .pm-cb.hd { border-color: #B49E77; } .pm-cb.hd.on { background: #5C4326; border-color: #5C4326; } .pm-brail-figs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 7px 12px 8px; border-top: 1px solid #F0ECE0; } .pm-brail-fig { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .pm-brail-fig > span { font-size: 8px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: #98907E; } .pm-brail-fig > b { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; color: #2B2620; white-space: nowrap; } .pm-brail-fig > b i { font-style: normal; font-size: 8.5px; font-weight: 600; color: #98907E; margin-left: 1px; } .pm-brail-fig--au > b { color: #9C5B2B; } .pm-brail-actions { display: flex; align-items: center; gap: 8px; padding: 0 12px 9px; } /* pad8 Part 6i - print action + versioned print log on the committed blend card. */ .pm-brail-print { font-size: 10px; font-weight: 700; color: #9C5B2B; border: 1px solid #D3B088; border-radius: 6px; padding: 3px 9px; text-decoration: none; white-space: nowrap; } .pm-brail-print:hover { background: #FAF3E9; } .pm-brail-printlog { margin-left: auto; font-size: 9px; color: #98907E; font-variant-numeric: tabular-nums; white-space: nowrap; } .pm-mill { color: #4F7D49; background: #E9F0E4; border: 1px solid #C6D8BC; font-size: 8px; font-weight: 800; letter-spacing: .4px; border-radius: 999px; padding: 2px 8px; white-space: nowrap; text-transform: uppercase; } .pm-exp { font-size: 10px; font-weight: 700; color: #9C5B2B; letter-spacing: .3px; background: none; border: 0; cursor: pointer; padding: 0; } .pm-blend2-lots { background: #FAF8F0; border-top: 1px solid #F0ECE0; padding: 9px 12px 10px; display: flex; flex-wrap: wrap; gap: 5px; } .pm-blend2-lots span { font-family: ui-monospace, Menlo, monospace; font-size: 9.5px; font-weight: 700; color: #5C4326; background: #fff; border: 1px solid #E6E0CF; border-radius: 5px; padding: 2px 6px; } .pm-blend2-lots .pm-more { background: none; border: 0; color: #9C5B2B; font-weight: 700; } .pm-blend2-lots[hidden] { display: none !important; } /* blend edit - "Edit lots" on a committed, un-milled blend + the reprint flag after an edit */ .pm-brail-edit { font-size: 10px; font-weight: 700; color: #9C5B2B; border: 1px solid #D3B088; border-radius: 6px; padding: 3px 9px; background: #fff; cursor: pointer; white-space: nowrap; } /* -> typography.css .t-sub */ .pm-brail-edit:hover { background: #FAF3E9; } .pm-brail-edit--danger { color: #A33C2E; border-color: #E0AFA5; } .pm-brail-edit--danger:hover { background: #FBEAE7; } .pm-facts4.lq-panel-facts { grid-template-columns: repeat(4, 1fr); } .pm-brail-reprint { font-size: 9px; font-weight: 800; color: #B7791F; background: #FDF3E0; border: 1px solid #ECCF9A; border-radius: 999px; padding: 2px 7px; white-space: nowrap; } /* -> typography.css .t-sub */ .lq-panel-card--wide { width: 860px; } .pm-editpanel[hidden] { display: none !important; } .pm-edit-fed { margin: 0 0 12px; background: #FDF3E0; border: 1px solid #ECCF9A; border-radius: 10px; padding: 9px 12px; font-size: 11.5px; color: #8A5A12; line-height: 1.5; } /* -> typography.css .t-body */ .pm-edit-fed[hidden] { display: none !important; } .pm-edit-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .pm-edit-col { border: 1px solid #E6E0CF; border-radius: 10px; overflow: hidden; min-width: 0; } .pm-edit-col header { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--table-head-bg, #D2C3A6); border-bottom: 1px solid var(--table-head-border, #C4B294); font-size: 10px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--table-head-ink, #5C4326); } /* -> typography.css .t-tablehead */ .pm-edit-col header b { font-variant-numeric: tabular-nums; } .pm-edit-search { margin-left: auto; width: 150px; border: 1px solid #E6E0CF; border-radius: 7px; padding: 4px 8px; font: inherit; font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: 0; background: #fff; } /* -> typography.css .t-sub */ .pm-edit-list { max-height: 340px; overflow-y: auto; } .pm-edit-row { display: grid; grid-template-columns: 20px 84px minmax(90px, 1fr) 58px 74px 66px 56px; gap: 6px; align-items: center; padding: 6px 10px; border-bottom: 1px solid #F0ECE0; font-size: 11px; cursor: pointer; } /* -> typography.css .t-body */ .pm-edit-row:last-child { border-bottom: 0; } .pm-edit-row[hidden] { display: none !important; } .pm-edit-row.is-on { background: #FBF7EE; } .pm-edit-row.is-out { opacity: .55; } .pm-edit-row input { width: 15px; height: 15px; accent-color: #4F7D49; margin: 0; } .pm-edit-row .code { font-family: ui-monospace, Menlo, monospace; font-weight: 800; color: #5C4326; } .pm-edit-row .miner { font-size: 9.5px; font-weight: 700; text-transform: uppercase; color: #6B6353; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* -> typography.css .t-sub */ .pm-edit-row .num { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; } .pm-edit-row .num i { font-style: normal; font-size: 8.5px; color: #98907E; margin-left: 2px; } .pm-edit-row .rec { font-size: 9.5px; font-weight: 800; color: #3F6A3A; white-space: nowrap; } .pm-edit-row .rec.is-none { color: #C9C0AC; font-weight: 600; } .pm-edit-row .ore { font-size: 8.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: #6B6353; white-space: nowrap; } .pm-edit-empty { padding: 18px 12px; color: #98907E; font-size: 11px; } .pm-edit-totals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; background: #FAF8F0; border: 1px solid #E6E0CF; border-radius: 10px; padding: 11px 13px; } .pm-edit-totals small { display: block; font-size: 7px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: #98907E; } .pm-edit-totals b { display: block; font-size: 14px; font-weight: 800; color: #2B2620; font-variant-numeric: tabular-nums; } .pm-edit-totals b i { font-style: normal; font-size: 9px; color: #98907E; margin-left: 2px; } .pm-edit-totals u { display: block; text-decoration: none; font-size: 9px; color: #98907E; margin-top: 2px; } .pm-edit-totals u.is-up { color: #3F6A3A; } .pm-edit-totals u.is-down { color: #B7791F; } .pm-edit-err { color: #A33C2E; font-size: 11.5px; margin: 8px 0 0; } .pm-edit-err[hidden] { display: none !important; } /* Milled: rail turns green (checkbox already disabled via .pm-cb--off). */ .pm-blend2.is-milled .pm-brail-rail { background: #F4F8F2; border-right-color: #C6D8BC; } .pm-blend2.is-milled .pm-brail-no { color: #3F6A3A; } .pm-blend2.is-milled .pm-brail-lbl { color: #6E9A66; } /* V29.321 - bulk bar (appears only when a blend is selected) + the Mark-as-milled confirmation modal. */ .pm-selbar { display: flex; align-items: center; gap: 11px; background: #FAF3E9; border: 1px solid #E4CDB0; border-radius: 9px; padding: 8px 11px; margin: 0 0 10px; } .pm-selbar[hidden] { display: none !important; } .pm-selbar-lbl { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; color: #5C4326; } .pm-selbar-sum { margin-left: auto; display: flex; gap: 14px; font-size: 10.5px; color: #6B6353; font-variant-numeric: tabular-nums; } .pm-selbar-sum b { color: #2B2620; font-weight: 800; } .pm-cb.hd.mixed { background: #5C4326; border-color: #5C4326; } .pm-cb.hd.mixed::after { content: ""; width: 8px; height: 0; border: 0; border-top: 2px solid #fff; transform: none; } .pm-btn-qt { background: #fff; border: 1px solid #E6E0CF; color: #6B6353; font-weight: 600; border-radius: 8px; font-size: 11.5px; padding: 8px 14px; cursor: pointer; white-space: nowrap; } .pm-btn-gr { background: #4F7D49; color: #fff; border: 0; border-radius: 8px; font-size: 11.5px; font-weight: 700; padding: 8px 14px; cursor: pointer; white-space: nowrap; } .pm-btn-gr:hover { background: #446B40; } .pm-mill-summary { font-size: 12px; color: #6B6353; margin: 2px 0 12px; line-height: 1.5; } .pm-mill-figs { display: flex; gap: 0; border: 1px solid #F0ECE0; border-radius: 9px; background: #FAF8F0; margin-bottom: 14px; } .pm-mill-figs > div { flex: 1; padding: 8px 12px; border-right: 1px solid #F0ECE0; } .pm-mill-figs > div:last-child { border-right: 0; } .pm-mill-figs small { display: block; font-size: 8px; font-weight: 800; letter-spacing: .4px; color: #98907E; text-transform: uppercase; margin-bottom: 2px; } .pm-mill-figs b { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; color: #2B2620; } .pm-mill-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; } .pm-mill-field > span { font-size: 11px; font-weight: 700; color: #5C4326; text-transform: uppercase; letter-spacing: .4px; } .pm-mill-field input { border: 1px solid #E6E0CF; border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 13px; background: #fff; } .pm-mill-note { font-size: 11px; color: #98907E; line-height: 1.5; margin: 0 0 4px; } #pm-mill-modal .pa-modal-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; } /* V29.322 - Samples Sent rebuilt as a grid: exactly ONE bottom rule per row (no cell-level borders/underlines - the DISPATCHED cell no longer draws its own), every cell vertically centred, uniform row height. No overflow:hidden (zoom:0.8 paint trap) - the header rounds its own top corners instead. */ .pm-sent2-wrap { background: #fff; border: 1px solid #E6E0CF; border-radius: 12px; } .pm-sent2-hd, .pm-sent2-row { display: grid; grid-template-columns: 112px 158px 58px 1fr 46px; align-items: center; } .pm-sent2-hd { background: var(--table-head-bg, #DCCFB6); border-bottom: 1px solid var(--table-head-border, #C4B294); border-radius: 11px 11px 0 0; } .pm-sent2-hd > div { font-size: 8.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--table-head-ink, #5C4326); padding: 9px 12px; } .pm-sent2-hd .num { text-align: right; } .pm-sent2-row { border-bottom: 1px solid #F0ECE0; } .pm-sent2-row:last-child { border-bottom: 0; } /* the search sets row.hidden; display:grid would override [hidden] -> guard it. */ .pm-sent2-row[hidden] { display: none !important; } .pm-sent2-row > div { padding: 9px 12px; min-width: 0; } .pm-sent2-code { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; font-weight: 800; color: #2B2620; } .pm-sent2-when { display: flex; align-items: center; gap: 6px; white-space: nowrap; } .pm-sent2-count { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; color: #2B2620; } .pm-sent2-status { display: flex; flex-wrap: wrap; gap: 5px; } .pm-sent2-kebab { display: flex; justify-content: center; } .pm-relchip { font-size: 9px; font-weight: 800; letter-spacing: .3px; border-radius: 6px; padding: 2px 7px; color: #6B6353; background: #FAF8F0; border: 1px solid #E6E0CF; white-space: nowrap; } .pm-relchip--today { color: #4F7D49; background: #E9F0E4; border-color: #C6D8BC; } .pm-sent2-empty { padding: 22px 14px; text-align: center; color: #98907E; font-size: 12.5px; } /* ========================================================================== V29.118 - Pad polish: four-KPI dashboard row, roomier send modal, label previews + Print all, Samples Sent grid fix. ========================================================================== */ /* Dashboard: four equal KPI cards on one row, standard anatomy + top border. */ .pm-kpi-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; } .pm-kpi { flex: 1 1 0; min-width: 220px; text-decoration: none; background: var(--bg-elev, #fff); border: 1px solid var(--border, #E1DBC9); border-top: 3px solid var(--accent, #9C5B2B); border-radius: 12px; padding: 14px 16px; } .pm-kpi--red { border-top-color: #A33C2E; } .pm-kpi--green { border-top-color: #4F7D49; } .pm-kpi--amber { border-top-color: #B7791F; } .pm-kpi--slate { border-top-color: #6B7F8A; } /* V29.322 - neutral BROWN tiles (routine info, no alarm) + amber tiles carry an amber figure (amber = routine "just look", red only for something actually wrong). */ .pm-kpi--brown { border-top-color: #9C5B2B; } .pm-kpi--amber .pm-kpi-num { color: #B7791F; } /* V29.323 - legacy sample close-out card (super_user + pad_manager only). Calm and informational, not alarmist; the green mirrors the resolved chip, never the brighter "done"/scan green. */ .pm-legacy-card { border-top: 3px solid #7FA077; } .pm-legacy-body { display: flex; flex-direction: column; gap: 14px; padding: 4px 2px 2px; } .pm-legacy-note { color: var(--text-dim, #6B6353); max-width: 62ch; margin: 0; } .pm-legacy-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; } .pm-legacy-field { display: flex; flex-direction: column; gap: 4px; } .pm-legacy-field .t-tablehead { color: var(--text-dim, #6B6353); } .pm-legacy-hint { color: var(--text-muted, #98907E); max-width: 34ch; } .pm-legacy-input { font: inherit; font-size: 12.5px; padding: 7px 10px; border: 1px solid var(--border, #E1DBC9); border-radius: 8px; background: var(--surface, #fff); color: var(--ink, #2A2620); min-width: 210px; } .pm-legacy-input:focus { outline: 2px solid #7FA077; outline-offset: 1px; border-color: #7FA077; } .pm-legacy-btn { font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 8px 16px; border-radius: 8px; border: 1px solid #3F6A3A; background: #4F7D49; color: #fff; } .pm-legacy-btn:hover { background: #3F6A3A; } .pm-legacy-undo { display: flex; align-items: center; gap: 12px; border-top: 1px dashed var(--border, #E1DBC9); padding-top: 12px; } .pm-legacy-undo-form { margin: 0; } .pm-legacy-undo-btn { font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; background: none; border: 1px solid var(--border, #E1DBC9); border-radius: 6px; padding: 4px 10px; color: var(--text-dim, #6B6353); } .pm-legacy-undo-btn:hover { border-color: #9C5B2B; color: #9C5B2B; } .pm-kpi--overdue { border-top-color: #A33C2E; } .pm-kpi--overdue.is-ok { border-top-color: #4F7D49; } .pm-kpi-label { color: var(--text-dim, #6B6353); } .pm-kpi-value { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; } .pm-kpi-num { color: var(--ink, #2B2620); font-variant-numeric: tabular-nums; } .pm-kpi--overdue .pm-kpi-num { color: #A33C2E; } .pm-kpi--overdue.is-ok .pm-kpi-num { color: #4F7D49; } .pm-kpi-unit { color: var(--text-muted, #98907E); } .pm-kpi-sub { margin-top: 4px; color: var(--text-muted, #98907E); } /* Send modal — 640px, roomier spacing, footer flush at the bottom. */ #pm-allocate-modal .pm-modal-panel { width: min(640px, 96vw); } /* V29.134 - one modal state: the single count-picker panel. */ #pm-allocate-modal [data-pm-allocate-panel] { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; } #pm-allocate-modal .pm-modal-head { padding: 16px 24px; } #pm-allocate-modal .pm-modal-body { display: block; padding: 22px 24px; flex: 1 1 auto; overflow-y: auto; } #pm-allocate-modal .pm-modal-actions { padding: 14px 24px; flex: 0 0 auto; } #pm-allocate-modal .pm-count-block { margin-bottom: 20px; } #pm-allocate-modal .pm-count-row { gap: 11px; } /* V29.134 - Send-samples modal count tiles: exact spec sizing/colours. */ #pm-allocate-modal .pm-count-tile { width: 47px; height: 41px; padding: 0; border-radius: 8px; border: 1px solid #E6E0CF; color: #2B2620; background: #fff; display: inline-flex; align-items: center; justify-content: center; } #pm-allocate-modal .pm-count-tile-num { font-size: 18px; font-weight: 800; } #pm-allocate-modal .pm-count-tile--selected { border: 2px solid #9C5B2B; color: #9C5B2B; background: #FDF7F1; } #pm-allocate-modal .pm-lock-note { background: #FDF3E0; border: 1px solid #ECCF9A; border-radius: 9px; padding: 10px 12px; font-size: 11px; line-height: 1.55; color: #8A6A1F; } /* V29.145 - the SEALED GATE: unticked = dashed sand; ticked = solid brown with a filled box + white check. Required every print; JS gates the Print button. */ #pm-allocate-modal .pm-sealed-gate { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; padding: 11px 13px; border-radius: 9px; border: 2px dashed #D3B088; background: #FEFBF7; cursor: pointer; } #pm-allocate-modal .pm-sealed-gate.is-checked { border: 2px solid #9C5B2B; background: #FDF7F1; } #pm-allocate-modal .pm-sealed-check { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } #pm-allocate-modal .pm-sealed-box { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; border-radius: 5px; border: 2px solid #C4B294; background: #fff; position: relative; } #pm-allocate-modal .pm-sealed-gate.is-checked .pm-sealed-box { border-color: #9C5B2B; background: #9C5B2B; } #pm-allocate-modal .pm-sealed-gate.is-checked .pm-sealed-box::after { content: "\2713"; position: absolute; inset: 0; color: #fff; font-size: 13px; font-weight: 800; line-height: 15px; text-align: center; } #pm-allocate-modal .pm-sealed-body { display: flex; flex-direction: column; gap: 2px; } #pm-allocate-modal .pm-sealed-title { font-size: 12.5px; font-weight: 700; color: #2B2620; } #pm-allocate-modal .pm-sealed-sub { font-size: 11px; line-height: 1.5; color: #6B6353; } /* V29.145 - the reprint-over modal reuses the sealed-gate visual. */ #pm-reprintover-modal .pm-sealed-gate { display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; border-radius: 9px; border: 2px dashed #D3B088; background: #FEFBF7; cursor: pointer; } #pm-reprintover-modal .pm-sealed-gate.is-checked { border: 2px solid #9C5B2B; background: #FDF7F1; } #pm-reprintover-modal .pm-sealed-check { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } #pm-reprintover-modal .pm-sealed-box { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; border-radius: 5px; border: 2px solid #C4B294; background: #fff; position: relative; } #pm-reprintover-modal .pm-sealed-gate.is-checked .pm-sealed-box { border-color: #9C5B2B; background: #9C5B2B; } #pm-reprintover-modal .pm-sealed-gate.is-checked .pm-sealed-box::after { content: "\2713"; position: absolute; inset: 0; color: #fff; font-size: 13px; font-weight: 800; line-height: 15px; text-align: center; } #pm-reprintover-modal .pm-sealed-title { font-size: 12.5px; font-weight: 700; color: #2B2620; } /* V29.145 - scan-aware sent-row kebab: disabled/blocked items carry a muted reason. */ .wb-kebab-item .pm-kebab-label { display: block; } .wb-kebab-item .pm-kebab-reason { display: block; font-size: 10px; color: #C0B8A4; margin-top: 1px; } .wb-kebab-item.pm-kebab-blocked { cursor: pointer; } .wb-kebab-item.pm-kebab-blocked .pm-kebab-label, .wb-kebab-item.is-disabled .pm-kebab-label { color: #98907E; } /* V29.145 - BLOCKED modal (pull-back / reprint refused because a bag is scanned). */ .pm-blocked-panel { border: 2px solid #A33C2E; } .pm-blocked-pill { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: #FBEAE7; color: #A33C2E; border: 1px solid #E0AFA5; font-size: 10px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; } .pm-blocked-warn { display: flex; gap: 10px; align-items: flex-start; background: #FBEAE7; border: 1px solid #E0AFA5; border-radius: 9px; padding: 11px 13px; } .pm-blocked-x { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 999px; background: #A33C2E; color: #fff; font-size: 12px; font-weight: 800; line-height: 20px; text-align: center; } .pm-blocked-warn-title { font-size: 12.5px; font-weight: 700; color: #A33C2E; } .pm-blocked-warn-body { font-size: 11.5px; line-height: 1.5; color: #6B4B45; margin-top: 2px; } .pm-blocked-bags { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; } .pm-blocked-bag { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .pm-blocked-state { font-size: 10px; font-weight: 800; letter-spacing: 0.5px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; } .pm-blocked-state.is-received { background: #E9F0E4; color: #3F6A3A; border: 1px solid #C6D8BC; } .pm-blocked-state.is-await { background: #FDF3E0; color: #8A6A1F; border: 1px solid #ECCF9A; } .pm-blocked-foot { font-size: 11px; line-height: 1.5; color: #6B6353; margin-top: 10px; } .pm-void-btn { border: 1px solid #D3B088; color: #8A6A1F; background: #fff; } /* V29.145 - reprint-over confirmation. */ .pm-reprintover-hard { border: 2px solid #ECCF9A; background: #FDF3E0; border-radius: 9px; padding: 11px 13px; margin-top: 10px; } .pm-reprintover-hard-title { font-size: 12.5px; font-weight: 700; color: #8A6A1F; } .pm-reprintover-hard-body { font-size: 11.5px; line-height: 1.5; color: #8A6A1F; margin-top: 3px; } .pm-reprintover-bags { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; } /* V29.190 - Awaiting-Dispatch card: the row + a quiet links line beneath it, grouped in one element so the AJAX lane-move (takes firstElementChild) and the search filter (hides [data-pm-search]) treat row + links as one unit. The row separator moves from the row onto the card so links sit inside the divider. */ .pm-alloc-card { border-bottom: 1px solid var(--border, #E1DBC9); } .pm-alloc-card[hidden] { display: none !important; } .pm-lane-body > .pm-alloc-card:last-of-type { border-bottom: 0; } .pm-alloc-card .pm-list-row--allocated { border-bottom: 0; } .pm-list-links { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 0 14px 9px 14px; } /* Quiet row links (§9: brown, dotted underline). Font -> typography.css .t-sub scale. */ .pm-row-link { background: none; border: 0; cursor: pointer; padding: 0; color: #9C5B2B; font-size: 11.5px; font-weight: 600; line-height: 1.4; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; } .pm-row-link:hover { color: #7D4720; } .pm-row-link-ic { text-decoration: none; margin-right: 3px; } .pm-row-link-sub { color: #98907E; font-weight: 500; text-decoration: none; } .pm-row-link--warn { color: #A33C2E; } .pm-row-link--warn:hover { color: #822A1F; } /* V29.191 - "Fix a printing mistake" chooser (§4). Font sizes -> typography.css. */ .pm-fixmistake-modal .pm-modal-panel { width: min(560px, 96vw); } .pm-fix-opt { display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left; background: #fff; border: 1px solid #E6E0CF; border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; cursor: pointer; } .pm-fix-opt:hover { border-color: #C4B294; background: #FCFAF4; } .pm-fix-opt-ic { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; line-height: 1; } .pm-fix-opt-ic--void { background: #F7E4E0; color: #A33C2E; } .pm-fix-opt-ic--add { background: #E4EFE1; color: #4F7D49; } .pm-fix-opt-ic--back { background: #FDF3E0; color: #B7791F; } .pm-fix-opt-txt { display: flex; flex-direction: column; gap: 3px; } .pm-fix-opt-txt b { font-size: 13.5px; font-weight: 700; color: #2B2620; } .pm-fix-opt-txt span { font-size: 12px; color: #6B6353; line-height: 1.45; } .pm-fix-lead { font-size: 12.5px; color: #6B6353; margin: 0 0 14px; line-height: 1.5; } .pm-fix-steppers { display: flex; gap: 22px; margin-bottom: 12px; } .pm-fix-stepper { display: flex; align-items: center; gap: 10px; } .pm-fix-stepper-lab { font-size: 11px; font-weight: 700; letter-spacing: .5px; color: #6B6353; width: 38px; } .pm-fix-step { width: 30px; height: 30px; border-radius: 8px; border: 1px solid #D3C9B2; background: #fff; font-size: 18px; font-weight: 700; color: #5C4326; cursor: pointer; line-height: 1; } .pm-fix-step:hover { background: #F6F1E7; } .pm-fix-step-n { min-width: 20px; text-align: center; font-size: 15px; font-weight: 800; color: #2B2620; font-variant-numeric: tabular-nums; } .pm-fix-zeronote { font-size: 12px; color: #B7791F; margin: -4px 0 12px; } .pm-fix-destroy { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #F7E4E0; border: 1px solid #E4B7AE; border-radius: 10px; cursor: pointer; } .pm-fix-destroy-lab { font-size: 12.5px; font-weight: 700; color: #A33C2E; } .pm-fix-warn { background: #F7E4E0; border: 1px solid #E4B7AE; border-radius: 10px; padding: 13px 15px; font-size: 12.5px; line-height: 1.55; color: #8A3325; margin-bottom: 12px; } /* V29.145 - §7: the Dispatch button is the screen's one filled brown primary (#9C5B2B), matching the modal Print button; the row otherwise inherits the global terracotta pa-btn-primary. */ .pm-dispatch-btn.pa-btn-primary { background: #9C5B2B; border-color: #9C5B2B; color: #fff; } .pm-dispatch-btn.pa-btn-primary:hover { background: #8B4E22; } /* Samples Sent grid: one fixed-layout table, no stray vertical rules. */ .pm-sent-table--v2 { width: 100%; border-collapse: collapse; } .pm-sent-table--v2 td, .pm-sent-table--v2 th { border-right: 0; border-left: 0; } .pm-sent-table--v2 .num, .pm-sent-table--v2 .pm-sent-count { text-align: right; } .pm-sent-table--v2 .pm-sent-when { white-space: nowrap; } .pm-sent-table--v2 td { vertical-align: middle; } /* ====================================================================== V29.119 - Chemical Lab restructure (Dashboard · Receive · Upload Centre) ====================================================================== */ /* Nav-pill "needs review" badge (Upload Centre). */ .lab-pill-count { display: inline-block; min-width: 16px; padding: 0 5px; margin-left: 4px; font-size: 10px; font-weight: 800; line-height: 16px; text-align: center; color: #fff; background: var(--red, #9C3A2E); border-radius: 999px; font-variant-numeric: tabular-nums; } /* --- Dashboard: four top-border KPI cards on one row ------------------ */ .lab-kpi-row { display: flex; gap: 16px; margin: 0 0 18px; flex-wrap: wrap; } .lab-kpi { flex: 1 1 0; min-width: 180px; background: var(--bg-elev, #fff); border: 1px solid var(--border, #E1DBC9); border-top: 3px solid var(--accent, #A85C3A); border-radius: var(--radius-lg, 12px); padding: 14px 16px; text-decoration: none; color: inherit; display: block; } a.lab-kpi { transition: box-shadow .12s ease, transform .12s ease; } a.lab-kpi:hover { box-shadow: 0 4px 14px rgba(60, 45, 25, .12); transform: translateY(-1px); } .lab-kpi--green { border-top-color: var(--green, #4F7A4A); } .lab-kpi--brown { border-top-color: #8A6A34; } .lab-kpi--amber { border-top-color: var(--orange, #B0822B); } .lab-kpi--red { border-top-color: var(--red, #9C3A2E); } .lab-kpi-label { color: var(--text-dim, #6B6B66); } .lab-kpi-value { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; } .lab-kpi-num { line-height: 1; } .lab-kpi--green .lab-kpi-num { color: var(--green, #4F7A4A); } .lab-kpi--red .lab-kpi-num { color: var(--red, #9C3A2E); } .lab-kpi-sub { margin-top: 4px; } /* V29.127 - Humidity dashboard accents + the Awaiting alert border (red top + click-through to the Upload Centre when any lot is missing humidity). */ .lab-kpi--slate { border-top-color: #3F6B7F; } .lab-kpi--gold { border-top-color: #8A6510; } .hum-kpi-awaiting.is-alert { border-top-color: var(--red, #9C3A2E); border-top-width: 3px; } .hum-kpi-awaiting.is-alert .lab-kpi-num { color: var(--red, #9C3A2E); } /* --- Receive Samples v2: scan panel + received-today ------------------ */ .scan-wrap--v2 { display: grid; grid-template-columns: minmax(320px, 1.2fr) minmax(280px, 1fr); gap: 20px; max-width: 1100px; margin: 8px auto 0; align-items: start; } .scan-wrap--v2 .scan-col-left, .scan-wrap--v2 .scan-col-right { min-width: 0; } .scan-wrap--v2 .scan-received { max-width: none; } .scan-result--idle { background: var(--bg-elev-2, #F5F0E2); border: 1px dashed var(--border-strong, #CFC7B1); min-height: 220px; display: flex; align-items: center; justify-content: center; } .scan-idle-icon { font-size: 40px; color: var(--text-muted, #8B8B82); } .scan-idle-text { margin-top: 8px; } .scan-wrap--v2 .scan-result { min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .scan-big-label { color: var(--text-dim, #6B6B66); margin-bottom: 6px; } .scan-result.is-received .scan-big-label { color: var(--green, #4F7A4A); } .scan-result.is-duplicate .scan-big-label { color: var(--orange, #B0822B); } .scan-result.is-unknown .scan-big-label { color: var(--accent, #A85C3A); } .scan-big-code { font-size: 68px; font-weight: 800; letter-spacing: 1px; line-height: 1.02; font-variant-numeric: tabular-nums; color: var(--text, #1F1F1F); } .scan-result.is-received .scan-big-code { color: var(--green, #4F7A4A); } .scan-result.is-duplicate .scan-big-code { color: var(--orange, #B0822B); } .scan-big-desc { font-size: 14px; color: var(--text-dim, #6B6B66); margin-top: 8px; } .scan-big-marker { font-size: 12.5px; font-weight: 700; color: var(--accent, #A85C3A); margin-top: 10px; text-transform: uppercase; letter-spacing: 0.4px; } .scan-unknown-icon { font-size: 46px; color: var(--accent, #A85C3A); margin-top: 6px; } /* --- Upload Centre --------------------------------------------------- */ .uc-page { max-width: 1120px; margin: 4px auto 0; } /* V29.184 - safeguard banner: a confirmed grade PDF has a bag with no result. */ .uc-orphan-warn { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 12px 16px; border-radius: 12px; background: #FBF1DC; border: 1px solid #ECD9AE; } .uc-orphan-ico { font-size: 18px; color: #B7791F; } .uc-orphan-tx { font-size: 13px; color: #7A5514; line-height: 1.5; } .uc-orphan-tx b { color: #5C4326; } .uc-drop-form { margin-bottom: 16px; } .uc-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 30px 20px; text-align: center; cursor: pointer; border: 2px dashed var(--border-strong, #CFC7B1); border-radius: var(--radius-lg, 12px); background: var(--bg-elev-2, #F5F0E2); transition: border-color .12s ease, background .12s ease; } .uc-drop.is-drag { border-color: var(--accent, #A85C3A); background: var(--accent-bg, rgba(168,92,58,.08)); } .uc-drop-icon { font-size: 30px; color: var(--accent, #A85C3A); } .uc-drop-title { font-size: 15px; font-weight: 700; color: var(--text, #1F1F1F); } .uc-drop-browse { color: var(--accent, #A85C3A); text-decoration: underline; } .uc-input { display: none; } .uc-drop-picked { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 10px 14px; background: var(--bg-elev, #fff); border: 1px solid var(--border, #E1DBC9); border-radius: var(--radius, 6px); } .uc-picked-list { flex: 1; min-width: 0; font-size: 12.5px; color: var(--text-dim, #6B6B66); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .uc-picked-actions { display: flex; align-items: center; gap: 10px; } .uc-picked-clear { background: none; border: 0; color: var(--text-muted, #8B8B82); cursor: pointer; font-size: 12px; } .uc-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; } .uc-search { margin: 0; flex: 0 1 260px; } .uc-search-input { width: 100%; padding: 7px 12px; font-size: 12.5px; border-radius: 999px; border: 1px solid var(--border-strong, #CFC7B1); background: var(--bg-elev, #fff); color: var(--text, #1F1F1F); } .uc-daterange { display: flex; align-items: center; gap: 6px; } .uc-date { padding: 6px 10px; font-size: 12px; border-radius: 999px; border: 1px solid var(--border-strong, #CFC7B1); background: var(--bg-elev, #fff); color: var(--text, #1F1F1F); font-variant-numeric: tabular-nums; } .uc-date-sep { color: var(--text-muted, #8B8B82); } .uc-needs-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; cursor: pointer; font-size: 12px; font-weight: 700; border-radius: 999px; border: 1px solid var(--border-strong, #CFC7B1); color: var(--text-dim, #6B6B66); background: var(--bg-elev, #fff); } .uc-needs-toggle.is-on { border-color: var(--orange, #B0822B); color: var(--orange, #B0822B); background: #FBF3E0; } .uc-needs-toggle input { accent-color: var(--orange, #B0822B); } .uc-needs-warn { color: var(--orange, #B0822B); } .uc-seg { margin-left: auto; display: inline-flex; border: 1px solid var(--border-strong, #CFC7B1); border-radius: 999px; overflow: hidden; background: var(--bg-elev, #fff); } .uc-seg-btn { padding: 6px 14px; font-size: 12px; font-weight: 700; text-decoration: none; color: var(--text-dim, #6B6B66); } .uc-seg-btn.is-on { background: var(--accent, #A85C3A); color: #fff; } .uc-seg-count { font-variant-numeric: tabular-nums; opacity: .8; margin-left: 3px; } .uc-band { margin-bottom: 16px; } .uc-band-head { display: flex; align-items: center; gap: 10px; margin: 0 2px 8px; } .uc-band-chip { font-size: 10.5px; font-weight: 700; color: var(--text-dim, #6B6B66); background: #F6F3E9; border: 1px solid var(--border, #E1DBC9); border-radius: 999px; padding: 2px 9px; font-variant-numeric: tabular-nums; } .uc-card { background: var(--bg-elev, #fff); border: 1px solid var(--border, #E1DBC9); border-radius: var(--radius-lg, 12px); overflow: hidden; } .uc-pdf-table, .uc-samples-table { width: 100%; border-collapse: collapse; } .uc-pdf-table td { padding: 11px 14px; border-bottom: 1px solid #F0ECE0; font-size: 12.5px; vertical-align: middle; } .uc-pdf-table tr:last-child td { border-bottom: 0; } .uc-pdf-name { font-weight: 600; color: var(--text, #1F1F1F); } .uc-pdf-time { white-space: nowrap; text-align: right; } .uc-th-kebab, .uc-td-kebab { width: 44px; text-align: center; padding-right: 16px; } .uc-pdf-samples { white-space: nowrap; } .uc-pdf-status { white-space: nowrap; } .uc-chip-samples { font-size: 11px; font-weight: 700; color: var(--text-dim, #6B6B66); background: #F6F3E9; border: 1px solid var(--border, #E1DBC9); border-radius: 6px; padding: 2px 8px; font-variant-numeric: tabular-nums; } .uc-chip-confirmed { font-size: 11px; font-weight: 800; color: var(--green, #4F7A4A); background: #EAF3E7; border: 1px solid #B9D6B2; border-radius: 6px; padding: 2px 8px; } .uc-chip-needs { font-size: 11px; font-weight: 800; color: var(--orange, #B0822B); text-decoration: none; background: #FBF3E0; border: 1px solid #E5D2A0; border-radius: 6px; padding: 2px 8px; } .uc-chip-needs:hover { background: #F6E9C8; } .uc-chip-replaced { font-size: 10px; font-weight: 800; letter-spacing: 0.3px; margin-left: 8px; color: #5A6F8F; background: #EEF3FA; border: 1px solid #C6D4E8; border-radius: 6px; padding: 2px 7px; vertical-align: middle; } .uc-samples-table th { padding: 8px 14px; text-align: left; } .uc-samples-table td { padding: 10px 14px; border-bottom: 1px solid #F0ECE0; font-size: 12.5px; vertical-align: middle; } .uc-samples-table tr:last-child td { border-bottom: 0; } .uc-sample-code { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; } .uc-src-link { color: #5C4326; text-decoration: none; font-weight: 600; } .uc-src-link:hover { text-decoration: underline; } .uc-empty { padding: 22px; text-align: center; } /* V29.135 - Samples tab result columns + status pill */ .uc-samples-table th.num, .uc-samples-table td.num { text-align: right; } .uc-grade-num { font-variant-numeric: tabular-nums; font-weight: 800; } .uc-status-in { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 0.4px; color: #4F7D49; background: #E9F0E4; border: 1px solid #C6D8BC; border-radius: 6px; padding: 2px 8px; white-space: nowrap; } .uc-status-await { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.4px; color: var(--text-muted, #98907E); background: #fff; border: 1px dashed var(--border-strong, #CFC7B1); border-radius: 6px; padding: 2px 8px; white-space: nowrap; } /* --- PDF review reskin ------------------------------------------------ */ .lab-rev { max-width: 1000px; margin: 0 auto; padding-bottom: 84px; } .lab-rev-head { display: flex; align-items: center; gap: 10px; padding: 4px 2px 12px; border-bottom: 1px solid var(--border, #E1DBC9); } .lab-rev-doc { font-size: 18px; } .lab-rev-fname { font-size: 14px; font-weight: 800; color: var(--text, #1F1F1F); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lab-rev-toggle { margin-left: auto; font-size: 12px; color: var(--accent, #A85C3A); text-decoration: none; white-space: nowrap; } .lab-rev-toggle:hover { text-decoration: underline; } .lab-rev-stats { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 12px 16px; margin: 12px 0; background: var(--bg-elev-2, #F5F0E2); border: 1px solid var(--border, #E1DBC9); border-radius: var(--radius, 6px); } .lab-rev-stat { font-size: 12px; font-weight: 700; color: var(--text-dim, #6B6B66); } .lab-rev-stat-num { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; } .lab-rev-stat--read { color: var(--green, #4F7A4A); } .lab-rev-stat--needs { color: var(--orange, #B0822B); } .lab-rev-stat-note { margin-left: auto; font-size: 11px; color: var(--text-muted, #8B8B82); } .lab-rev-needs { background: #FBF3E0; border: 1px solid #E5D2A0; border-radius: var(--radius, 6px); padding: 12px 14px; margin: 0 0 14px; } .lab-rev-needs-head { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--orange, #B0822B); margin-bottom: 8px; } .lab-rev-needs-row { display: flex; gap: 12px; align-items: baseline; padding: 4px 0; text-decoration: none; } a.lab-rev-needs-row:hover .lab-rev-needs-reason { text-decoration: underline; } .lab-rev-needs-code { font-size: 12.5px; font-weight: 800; color: #8A6524; font-variant-numeric: tabular-nums; min-width: 130px; } .lab-rev-needs-reason { font-size: 12.5px; color: var(--text-dim, #6B6B66); } .lab-rev-needs-row--note .lab-rev-needs-reason { color: var(--text-muted, #8B8B82); } .lab-rev-footer { position: sticky; bottom: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; gap: 14px; padding: 12px 16px; margin-top: 16px; background: var(--bg-elev-2, #F5F0E2); border-top: 1px solid var(--border, #E1DBC9); } .lab-rev-cancel-form { margin: 0; } .lab-rev-footer-note { margin-left: auto; font-size: 11.5px; color: var(--text-muted, #8B8B82); } .lab-rev-confirm { background: var(--green, #4F7A4A); border-color: var(--green, #4F7A4A); } .lab-rev-confirm:disabled { opacity: .5; cursor: not-allowed; } /* ====================================================================== V29.123 - Sample Sender v2: REPRINT chip, the reprint gate, Label Control ====================================================================== */ /* Blue REPRINT chip — allocated lane (returned to dispatch) + shared token. */ .pm-chip-reprint { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .3px; color: #5A6F8F; background: #EEF3FA; border: 1px solid #C6D4E8; border-radius: 6px; padding: 2px 8px; vertical-align: middle; } .pm-dest-chip--reprint { color: #5A6F8F; background: #EEF3FA; border: 1px dashed #C6D4E8; } /* V29.130 - blue RESAMPLE tag on a client-requested resample bag's chip, and the outline "+ Add resample" button in its own Samples-Sent column. */ .pm-chip-resample { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .3px; color: #5A6F8F; background: #EEF3FA; border: 1px solid #C6D4E8; border-radius: 6px; padding: 2px 8px; vertical-align: middle; margin-left: 4px; } .pm-resample-btn { white-space: nowrap; background: #fff; color: #9C5B2B; border: 1px solid #D3B088; border-radius: 8px; padding: 6px 12px; font-size: 12px; font-weight: 700; cursor: pointer; } /* V29.189 - amber "RETURNED FROM DISPATCH" marker on an Awaiting-Dispatch row returned from Samples Sent; cleared on the next dispatch. Matches the sibling chip shape (font -> typography.css .t-tablehead scale). */ .pm-chip-returned { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .3px; color: #B7791F; background: #FDF3E0; border: 1px solid #EAD3A6; border-radius: 6px; padding: 2px 8px; vertical-align: middle; margin-left: 4px; } /* V29.194 - PURPLE "AWAITING RESAMPLE": a resample in preparation, so the lot's Real Grade average is provisional until it lands. Distinct from amber (returned) and the blue RESAMPLE bag tag. Shown on Samples Sent, Mineral Register, Grade Vault (incl. pushed lots). Font -> typography.css .t-tablehead scale. */ .pm-chip-awaitresample { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .3px; color: #6B3FA0; background: #F1EAFA; border: 1px solid #D8C7EF; border-radius: 6px; padding: 2px 8px; vertical-align: middle; margin-left: 4px; } .pm-rs-reason { width: 100%; box-sizing: border-box; padding: 8px 10px; font-size: 12.5px; border: 1px solid #D3C9B2; border-radius: 8px; background: #fff; color: #2B2620; } .pm-rs-provisional { margin-top: 10px; font-size: 11.5px; color: #6B3FA0; font-weight: 600; } /* V29.301 - "re-cut the resample from Bucket N" instruction banner (top of the modal). */ .pm-rs-bucket { margin-bottom: 12px; padding: 9px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 700; color: #3f5a48; background: rgba(79, 110, 88, 0.12); border: 1px solid rgba(79, 110, 88, 0.34); } .pm-rs-bucket.is-none { color: var(--ink-3, #7a6a55); background: var(--bg-elev-2); border-color: var(--border, #E1DBC9); font-weight: 600; } .pm-resample-btn:hover { background: #FBF6EF; border-color: #C79A6A; } .pm-modal-title--upper { text-transform: uppercase; letter-spacing: .4px; } /* Reprint gate modal — amber warning panel inside the shared pm-modal shell. */ #pm-reprint-gate .rg-panel { width: min(560px, 96vw); } .rg-warn { background: #FBF3E0; border: 1px solid #E5D2A0; border-radius: 10px; padding: 14px 16px; } .rg-warn-title { font-size: 13.5px; font-weight: 800; color: var(--amber, #B0822B); margin-bottom: 7px; } .rg-warn-body { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--text-dim, #6B6353); } /* --- Label Control --------------------------------------------------- */ .lc-page { max-width: 1040px; margin: 4px auto 0; } .lc-scanwrap { margin: 4px 0 16px; } .lc-input { width: 100%; padding: 14px 18px; font-size: 15px; border: 2.5px solid var(--accent, #A85C3A); border-radius: 12px; background: var(--bg-elev, #fff); color: var(--text, #1F1F1F); outline: none; } .lc-input:focus { box-shadow: 0 0 0 4px rgba(168, 92, 58, .14); } .lc-error { background: #FBF3E0; border: 1px solid #E5D2A0; color: var(--amber, #B0822B); border-radius: 10px; padding: 13px 16px; font-size: 13px; font-weight: 700; } .lc-card { background: var(--bg-elev, #fff); border: 1px solid var(--border, #E1DBC9); border-radius: 12px; overflow: hidden; } .lc-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; background: var(--panel, #FAF8F0); border-bottom: 1px solid var(--border, #E1DBC9); } .lc-lot { font-weight: 700; color: #8B4A2B; background: var(--bg-elev-2, #F5F0E2); border: 1px solid var(--border, #E1DBC9); border-radius: 6px; padding: 3px 10px; font-size: 13px; } .lc-provider { font-size: 13.5px; font-weight: 700; color: var(--text, #1F1F1F); } .lc-meta { margin-left: auto; } .lc-summary { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 12px 16px; background: var(--bg-elev-2, #F5F0E2); border-bottom: 1px solid var(--border, #E1DBC9); font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--text-dim, #6B6353); } .lc-stat b { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; } .lc-stat--ok { color: var(--green, #4F7A4A); } .lc-stat--bad { color: var(--red, #9C3A2E); } .lc-table-wrap { overflow-x: auto; } .lc-table { width: 100%; border-collapse: collapse; } .lc-table th { text-align: left; padding: 8px 14px; } .lc-table th.num, .lc-table td.num { text-align: right; } .lc-table td { padding: 10px 14px; border-bottom: 1px solid var(--hair, #F0ECE0); font-size: 12.5px; vertical-align: middle; } .lc-table tr:last-child td { border-bottom: 0; } .lc-bag { font-weight: 800; font-variant-numeric: tabular-nums; } .lc-scanned-tag { margin-left: 8px; font-size: 10px; font-weight: 600; color: var(--text-muted, #8B8B82); } .lc-chip { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 6px; padding: 2px 9px; white-space: nowrap; } .lc-chip--ok { color: var(--green, #4F7A4A); background: #EAF3E7; border: 1px solid #B9D6B2; font-weight: 800; } .lc-chip--await { color: var(--text-dim, #6B6353); background: var(--bg-elev, #fff); border: 1px dashed var(--border-strong, #CFC7B1); } .lc-chip--bad { color: var(--red, #9C3A2E); background: #FBEAE7; border: 1px solid var(--red, #9C3A2E); } .lc-chip--muted { color: var(--text-muted, #8B8B82); background: var(--panel, #FAF8F0); border: 1px solid var(--border, #E1DBC9); } .lc-chip--review { color: var(--amber, #B0822B); background: #FBF3E0; border: 1px solid #E5D2A0; font-weight: 800; } .lc-muted { color: var(--text-muted, #8B8B82); } .lc-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 13px 16px; background: var(--panel, #FAF8F0); border-top: 1px solid var(--border, #E1DBC9); } .lc-foot-note { margin-right: auto; font-size: 11.5px; } .lc-reprint-btn { white-space: nowrap; } /* ========================================================================== V29.160 - Miner Payments (Finance sub-portal) ========================================================================== */ .mp-intro { margin: 14px 0 12px; font-size: 12.5px; color: var(--text-dim, #6B6353); line-height: 1.5; } .mp-intro-tag { font-size: 10px; font-weight: 800; letter-spacing: .6px; color: #9C5B2B; margin-right: 6px; } /* filters */ .mp-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; } .mp-search { flex: 0 0 340px; max-width: 100%; margin: 0; } .mp-search-input { width: 100%; } /* §2.3 - sort direction toggle + right-aligned scope line */ .mp-sortdir { display: inline-flex; gap: 2px; } .mp-sortdir-btn { border: 1px solid #E6E0CF; background: #fff; color: #6B6353; border-radius: 8px; width: 30px; height: 32px; font-size: 11px; cursor: pointer; } .mp-sortdir-btn.is-on { background: #9C5B2B; border-color: #9C5B2B; color: #fff; } .mp-scope { margin-left: auto; font-size: 11px; color: #98907E; } .mp-export { margin-left: auto; border: 1px solid #D3B088; color: #9C5B2B; background: #fff; border-radius: 8px; padding: 8px 14px; font-size: 12px; font-weight: 700; text-decoration: none; white-space: nowrap; } .mp-export:hover { background: #FBF4EC; } /* custom dropdown (native select banned) */ .mp-dd { position: relative; } .mp-dd-btn { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #E6E0CF; border-radius: 999px; padding: 8px 14px; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--ink, #2B2620); white-space: nowrap; max-width: 240px; } .mp-dd-btn:hover { border-color: #D3B088; } .mp-dd-label { overflow: hidden; text-overflow: ellipsis; } .mp-dd-caret { color: var(--text-muted, #98907E); font-size: 9px; } .mp-dd-panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 200px; background: #fff; border: 1px solid #E6E0CF; border-radius: 12px; box-shadow: 0 12px 30px rgba(60,45,25,.16); padding: 8px; display: flex; flex-direction: column; gap: 2px; } .mp-dd-panel[hidden] { display: none; } .mp-dd-opt { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 8px; font-size: 12.5px; cursor: pointer; color: var(--ink, #2B2620); } .mp-dd-opt:hover { background: #FAF8F0; } .mp-dd-field { display: flex; flex-direction: column; gap: 4px; padding: 6px 9px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted, #98907E); } .mp-dd-field input { border: 1px solid #E6E0CF; border-radius: 8px; padding: 7px 9px; font-size: 12.5px; font-weight: 600; color: var(--ink, #2B2620); } .mp-dd-apply { margin-top: 4px; background: #9C5B2B; color: #fff; border: 0; border-radius: 8px; padding: 8px 12px; font-size: 12px; font-weight: 700; cursor: pointer; } /* bulk bar */ .mp-bulkbar { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 12px 18px; background: #FDF7F1; border: 1px solid #E9D9C6; border-bottom: 2px solid #E9D9C6; border-radius: 10px; } .mp-bulkbar[hidden] { display: none !important; } .mp-bulk-check { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 5px; background: #9C5B2B; color: #fff; font-size: 12px; font-weight: 800; } .mp-bulk-count { font-size: 12.5px; font-weight: 800; color: #9C5B2B; white-space: nowrap; } .mp-bulk-who { font-size: 12px; color: var(--text-dim, #6B6353); } .mp-bulk-spacer { flex: 1 1 auto; } .mp-bulk-total-label { font-size: 11px; color: var(--text-muted, #98907E); } .mp-bulk-total { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink, #2B2620); white-space: nowrap; } .mp-record-btn { background: #4F7D49; color: #fff; border: 0; border-radius: 8px; padding: 9px 16px; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; } .mp-record-btn:hover { background: #446B40; } .mp-mixwarn { margin: -4px 0 12px; padding: 9px 14px; border-radius: 9px; background: #FBEAE7; border: 1px solid #E0AFA5; color: #A33C2E; font-size: 12px; font-weight: 600; } .mp-mixwarn[hidden] { display: none; } /* tables */ .mp-card { width: 100%; background: #fff; border: 1px solid #E6E0CF; border-radius: 12px; overflow: hidden; } .mp-table { width: 100%; table-layout: fixed; border-collapse: collapse; } .mp-table thead th { background: var(--table-head-bg, #DCCFB6); color: var(--table-head-ink, #5C4326); border-bottom: 1px solid var(--table-head-border, #C4B294); text-align: left; padding: 9px 14px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; white-space: nowrap; } .mp-table td { padding: 12px 14px; border-bottom: 1px solid #F0ECE0; vertical-align: middle; font-size: 12px; } .mp-table tr:last-child td { border-bottom: 0; } .mp-c { text-align: center; } .mp-table th.mp-r, .mp-table td.mp-r { text-align: right; } .mp-empty { text-align: center; color: var(--text-muted, #98907E); padding: 24px; } .mp-lotchip { display: inline-block; font-weight: 700; color: #8B4A2B; background: #FAF8F0; border: 1px solid #E6E0CF; border-radius: 6px; padding: 3px 9px; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; } .mp-lotchip--sm { font-size: 10.5px; padding: 3px 6px; margin: 0 4px 4px 0; } /* liq v9 §3.6 - a linked offer's ONE row: "Offer · n lots" chip + its codes underneath */ .mp-lotchip--offer { color: #5C4326; background: #F1E7D6; border-color: #C4B294; } .mp-lotchip--offer svg { vertical-align: -1px; margin-right: 2px; } .mp-offer-codes { display: block; margin-top: 3px; white-space: normal; } .mp-paychip { display: inline-block; font-weight: 700; color: #5C4326; background: #FAF8F0; border: 1px solid #E6E0CF; border-radius: 6px; padding: 3px 9px; font-size: 11.5px; white-space: nowrap; } .mp-miner-name { display: block; font-size: 12px; font-weight: 700; color: var(--ink, #2B2620); } .mp-miner-ruc { display: block; font-size: 10.5px; color: var(--text-muted, #98907E); } .mp-offer-date { display: block; font-size: 12px; font-weight: 700; color: var(--ink, #2B2620); } .mp-offer-rel { display: block; font-size: 10.5px; color: var(--text-muted, #98907E); } .mp-netwet { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink-1, #2C2A24); white-space: nowrap; } .mp-unit, .mp-cur { font-size: 10px; font-weight: 700; color: var(--text-muted, #98907E); } .mp-amount { white-space: nowrap; } .mp-amount-fig { font-size: 13.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink, #2B2620); } .mp-payto-bank { display: block; font-size: 12px; font-weight: 600; color: var(--ink, #2B2620); } .mp-payto-acct { display: block; font-size: 10.5px; color: var(--text-muted, #98907E); } .mp-nobank { display: block; font-size: 12px; font-weight: 700; color: #A33C2E; white-space: nowrap; } .mp-nobank-sub { display: block; font-size: 10.5px; color: #B9857A; } .mp-kyc { display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: .4px; border-radius: 999px; padding: 2px 9px; white-space: nowrap; } .mp-kyc--ok { color: #3F6A3A; background: #E9F0E4; border: 1px solid #C6D8BC; } .mp-kyc--no { color: #B7791F; background: #FDF3E0; border: 1px solid #ECCF9A; } .mp-markpaid { border: 1px solid #D3B088; color: #9C5B2B; background: #fff; border-radius: 7px; padding: 6px 12px; font-size: 11.5px; font-weight: 700; cursor: pointer; white-space: nowrap; } .mp-markpaid:hover { background: #FBF4EC; } .mp-markpaid.is-disabled, .mp-markpaid:disabled { border-color: #E3DBC8; color: #C0B8A4; background: #FBF9F3; cursor: not-allowed; } .mp-ro { color: var(--text-muted, #98907E); } .mp-paidon { font-variant-numeric: tabular-nums; color: var(--ink-1, #2C2A24); } .mp-lots { white-space: normal; } .mp-docs-btn { display: inline-block; border: 1px solid #D3B088; color: #9C5B2B; background: #fff; border-radius: 7px; padding: 4px 10px; font-size: 11px; font-weight: 700; text-decoration: none; white-space: nowrap; } .mp-docs-btn:hover { background: #FBF4EC; } .mp-nofiles { display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: .4px; border-radius: 999px; padding: 2px 9px; color: #B7791F; background: #FDF3E0; border: 1px solid #ECCF9A; white-space: nowrap; } .mp-prow--nofiles > td { background: #FEFBF4; } .wb-kebab-item--danger { color: #A33C2E; } /* modals */ .mp-modal, .mp-docs-modal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; } .mp-modal[hidden], .mp-docs-modal[hidden] { display: none !important; } .mp-modal-scrim { position: absolute; inset: 0; background: rgba(43,38,32,.42); } .mp-modal-panel { position: relative; width: 560px; max-width: calc(100vw - 32px); max-height: calc(100vh - 48px); overflow-y: auto; background: #FAF8F0; border: 1px solid #E6E0CF; border-radius: 14px; box-shadow: 0 24px 60px rgba(31,26,20,.28); } .mp-docs-panel { width: 460px; } .mp-modal-head { display: flex; align-items: center; gap: 10px; padding: 15px 18px; border-bottom: 1px solid #F0ECE0; background: #fff; border-radius: 14px 14px 0 0; } .mp-modal-title { margin: 0; } .mp-modal-x { margin-left: auto; background: none; border: 0; font-size: 20px; line-height: 1; color: var(--text-muted, #98907E); cursor: pointer; } .mp-modal-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; } body.mp-modal-open { overflow: hidden; } .mp-paying-label { margin-bottom: 6px; } .mp-paying-box { border: 1px solid #E6E0CF; border-radius: 10px; overflow: hidden; background: #fff; } .mp-paying-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 11px 14px; border-bottom: 1px solid #F0ECE0; } .mp-paying-name { font-size: 13px; font-weight: 800; color: var(--ink, #2B2620); } .mp-paying-ruc { font-size: 10.5px; color: var(--text-muted, #98907E); } .mp-paying-lot { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid #F6F3E9; flex-wrap: wrap; } .mp-paying-lot-amt { margin-left: auto; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } /* §3/§4 - editable per-lot amount paid (partial allowed) + its under/over-due note */ .mp-amt-input { width: 110px; text-align: right; border: 1px solid #D3B088; background: #FFFDF8; border-radius: 7px; padding: 5px 8px; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; } .mp-amt-note { flex-basis: 100%; text-align: right; font-size: 10px; color: #98907E; } .mp-amt-note:empty { display: none; } .mp-amt-note--warn { color: #B7791F; } /* §2.4 - partial outstanding on the row + the "no amount on record" cell */ .mp-outstanding { display: block; font-size: 10px; color: #B7791F; font-weight: 700; margin-top: 2px; } .mp-noamount { display: block; font-size: 13px; font-weight: 800; color: #C9C0AC; } .mp-noamount-sub { display: block; font-size: 8.5px; color: #B0A78F; } .mp-field-opt { font-weight: 500; color: #B0A78F; text-transform: none; letter-spacing: 0; } /* §2.4 - the Voucher column chip (staged on an unpaid row) */ .mp-voucher { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; border-radius: 8px; padding: 5px 10px; cursor: pointer; text-decoration: none; white-space: nowrap; } .mp-voucher--add { border: 1px dashed #D3B088; background: #fff; color: #9C5B2B; } .mp-voucher--add:hover { background: #FBF5EE; } .mp-voucher--has { border: 1px solid #C6D8BC; background: #F4F8F2; color: #3F6A3A; } .mp-voucher-tag { font-size: 8px; font-weight: 800; letter-spacing: .3px; } .mp-paying-total { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; background: #FAF8F0; font-size: 12px; font-weight: 700; } .mp-paying-total-fig { font-size: 13.5px; font-weight: 800; font-variant-numeric: tabular-nums; } .mp-kyc-warn { background: #FDF3E0; border: 1px solid #ECCF9A; border-radius: 12px; padding: 13px 15px; display: flex; flex-direction: column; gap: 11px; } .mp-kyc-warn[hidden] { display: none; } .mp-kyc-warn-row { display: flex; gap: 11px; align-items: flex-start; } .mp-kyc-warn-ico { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 999px; background: #B7791F; color: #fff; font-size: 14px; font-weight: 800; line-height: 22px; text-align: center; } .mp-kyc-warn-title { font-size: 12.5px; font-weight: 800; color: #8A6A1F; } .mp-kyc-warn-body { font-size: 11.5px; line-height: 1.5; color: #8A6A1F; margin-top: 3px; } .mp-kyc-confirm { display: flex; align-items: center; gap: 9px; padding: 10px 12px; background: #FEFBF4; border: 2px solid #ECCF9A; border-radius: 9px; font-size: 12.5px; font-weight: 700; color: #7A5A16; cursor: pointer; } .mp-field-row { display: flex; gap: 14px; flex-wrap: wrap; } .mp-field { flex: 1 1 200px; display: flex; flex-direction: column; gap: 5px; } .mp-field-label { color: var(--ink-2, #5A5348); } .mp-input, .mp-field input[type=date] { border: 1px solid #E6E0CF; border-radius: 9px; padding: 10px 12px; font-size: 13px; font-weight: 600; color: var(--ink, #2B2620); background: #fff; } .mp-input:focus, .mp-field input:focus { outline: none; border-color: #D3B088; box-shadow: 0 0 0 2px rgba(168,92,58,.14); } .mp-bank-display { font-size: 13px; font-weight: 700; color: var(--ink, #2B2620); padding: 10px 12px; background: #fff; border: 1px solid #E6E0CF; border-radius: 9px; } .mp-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px; border: 2px dashed #D3B088; border-radius: 12px; background: #FBF5EC; cursor: pointer; text-align: center; } .mp-drop.is-drag { border-color: #9C5B2B; background: #FBF0E4; } .mp-drop-title { font-size: 13px; font-weight: 700; color: var(--ink, #2B2620); } .mp-drop-browse { color: #9C5B2B; text-decoration: underline; } .mp-drop-hint { font-size: 11px; color: var(--text-muted, #98907E); } .mp-filelist { display: flex; flex-direction: column; gap: 6px; } .mp-fileitem { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #fff; border: 1px solid #E6E0CF; border-radius: 8px; } .mp-fileitem-name { flex: 1 1 auto; font-size: 12px; color: var(--ink, #2B2620); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mp-fileitem-size { font-size: 10.5px; color: var(--text-muted, #98907E); font-variant-numeric: tabular-nums; } .mp-fileitem-x { background: none; border: 0; color: var(--text-muted, #98907E); font-size: 16px; cursor: pointer; } .mp-modal-error { padding: 9px 12px; border-radius: 8px; background: #FBEAE7; border: 1px solid #E0AFA5; color: #A33C2E; font-size: 12.5px; font-weight: 600; } .mp-modal-error[hidden] { display: none; } .mp-modal-actions { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: #fff; border-top: 1px solid #F0ECE0; border-radius: 0 0 14px 14px; } .mp-modal-cancel { margin-right: auto; background: none; border: 0; padding: 6px 4px; cursor: pointer; color: var(--ink-2, #5A5348); font-size: 13px; font-weight: 600; } .mp-modal-cancel:hover { color: var(--ink, #2B2620); text-decoration: underline; } .mp-record-submit { background: #4F7D49; color: #fff; border: 0; border-radius: 10px; padding: 11px 18px; font-size: 13.5px; font-weight: 800; cursor: pointer; white-space: nowrap; } .mp-record-submit:hover { background: #446B40; } .mp-record-submit:disabled { background: #B8C6B3; cursor: not-allowed; } .mp-docs-list { padding: 14px 18px; display: flex; flex-direction: column; gap: 8px; } .mp-doc-item { display: block; padding: 10px 12px; background: #fff; border: 1px solid #E6E0CF; border-radius: 8px; font-size: 12.5px; color: #9C5B2B; font-weight: 600; text-decoration: none; } .mp-doc-item:hover { background: #FBF4EC; } .mp-docs-empty { color: var(--text-muted, #98907E); font-size: 12.5px; } /* lot dashboard: PAID card beneath the financial rail */ .cl-paid-card { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; padding: 14px 16px; background: #fff; border: 1px solid #E6E0CF; border-left: 4px solid #4F7D49; border-radius: 10px; } .cl-paid-ico { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 999px; background: #E9F0E4; color: #3F6A3A; font-size: 15px; font-weight: 800; line-height: 26px; text-align: center; } .cl-paid-label { font-size: 10px; font-weight: 800; letter-spacing: .6px; color: #3F6A3A; } .cl-paid-line { font-size: 12.5px; font-weight: 700; color: var(--ink, #2B2620); } .cl-paid-share { font-size: 13.5px; font-weight: 800; font-variant-numeric: tabular-nums; } .cl-paid-of { font-size: 11px; color: var(--text-muted, #98907E); } .cl-paid-spacer { flex: 1 1 auto; } .cl-paid-btn { border: 1px solid #D3B088; color: #9C5B2B; background: #fff; border-radius: 7px; padding: 6px 12px; font-size: 11.5px; font-weight: 700; text-decoration: none; white-space: nowrap; } .cl-paid-btn:hover { background: #FBF4EC; } /* V29.165 - humidity review (readings / average model) */ .hum-review-title { margin: 14px 0 12px; font-size: 13px; color: var(--ink, #2B2620); } .hum-review-tag { font-size: 10px; font-weight: 800; letter-spacing: .6px; color: #9C5B2B; margin-right: 6px; } .hum-rev-info { display: flex; gap: 11px; align-items: flex-start; background: #EDF2F7; border: 1px solid #C3D3E2; border-radius: 12px; padding: 13px 15px; margin: 0 0 14px; } .hum-rev-info-ico { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 999px; background: #3D5A80; color: #fff; font-size: 15px; font-weight: 800; line-height: 22px; text-align: center; } .hum-rev-info-title { font-size: 12.5px; font-weight: 800; color: #2E4763; } .hum-rev-info-body { margin-top: 3px; } .hum-rev-table { width: 100%; border-collapse: collapse; } .hum-rev-table thead th { background: var(--table-head-bg, #DCCFB6); color: var(--table-head-ink, #5C4326); border-bottom: 1px solid var(--table-head-border, #C4B294); text-align: left; padding: 9px 12px; white-space: nowrap; } .hum-rev-table td { padding: 11px 12px; border-bottom: 1px solid #F0ECE0; vertical-align: middle; font-size: 12px; } .hum-rev-table td.md-num, .hum-rev-table th.md-num { text-align: right; font-variant-numeric: tabular-nums; } .hum-rev-row--corrected > td { background: #FEFBF4; } .hum-rev-row--unmatched > td { background: #FDF6F4; } .hum-lotchip, .hum-rawchip { display: inline-block; font-weight: 700; border-radius: 6px; padding: 3px 9px; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; } .hum-lotchip { color: #8B4A2B; background: #FAF8F0; border: 1px solid #E6E0CF; } .hum-rawchip--amber { color: #8A6A1F; background: #FDF3E0; border: 1px solid #ECCF9A; } .hum-rawchip--red { color: #A33C2E; background: #FBEAE7; border: 1px solid #E0AFA5; } .hum-rev-hum strong { font-size: 13px; font-weight: 800; } .hum-rev-avg { white-space: normal; } .hum-avg-val { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; } .hum-avg-unit { font-size: 10px; font-weight: 700; color: #98907E; margin-left: 1px; } .hum-avg-eq { color: #C4BBA4; font-weight: 800; margin: 0 6px; } .hum-avg-group { display: inline-flex; flex-wrap: wrap; gap: 5px; vertical-align: middle; background: #FAF8F0; border: 1px solid #EDE7D6; border-radius: 10px; padding: 5px 7px; } .hum-avg-chip { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; min-width: 52px; padding: 3px 8px; border-radius: 7px; background: #fff; border: 1px solid #E3DBC8; } .hum-avg-chip-lbl { font-size: 8px; font-weight: 800; font-family: var(--font-mono, ui-monospace, monospace); letter-spacing: .4px; color: #A79E88; } .hum-avg-chip-val { font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; color: #2B2620; } .hum-avg-chip--wide { border: 1.5px solid #E0B77A; background: #FEFAF2; } .hum-avg-chip--wide .hum-avg-chip-val { color: #8A6A1F; } .hum-spread-chip { display: inline-block; margin-left: 8px; background: #FDF3E0; border: 1px solid #ECCF9A; color: #8A6A1F; border-radius: 999px; padding: 2px 9px; font-size: 10.5px; font-weight: 700; white-space: nowrap; } .hum-status { display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: .4px; border-radius: 999px; padding: 2px 9px; margin-right: 5px; white-space: nowrap; } .hum-status--green { color: #3F6A3A; background: #E9F0E4; border: 1px solid #C6D8BC; } .hum-status--blue { color: #3D5A80; background: #EDF2F7; border: 1px solid #C3D3E2; } .hum-status--amber { color: #B7791F; background: #FDF3E0; border: 1px solid #ECCF9A; } .hum-status--red { color: #A33C2E; background: #FBEAE7; border: 1px solid #E0AFA5; } .hum-rev-fix { margin-top: 4px; font-size: 10.5px; color: #6B6353; } .hum-use-btn { border: 1px solid #D3B088; background: #fff; color: #9C5B2B; border-radius: 6px; padding: 2px 8px; font-size: 10.5px; font-weight: 700; cursor: pointer; margin-left: 4px; white-space: nowrap; } .hum-rev-foot { display: flex; align-items: center; gap: 14px; margin-top: 14px; } .hum-rev-foot-hint { flex: 1 1 auto; } .hum-confirm-btn { background: #4F7D49; color: #fff; border: 0; border-radius: 10px; padding: 11px 18px; font-size: 13.5px; font-weight: 800; cursor: pointer; white-space: nowrap; } .hum-confirm-btn.is-disabled, .hum-confirm-btn:disabled { background: #E3DBC8; color: #A9A08C; cursor: not-allowed; } /* V29.166 - humidity: dashboard reading chips + wide-spread Review dialog + refusal */ .hum-dash-row--wide > td { background: #FEFAF2; } .hum-dash-avg { font-weight: 700; font-variant-numeric: tabular-nums; } .hum-dash-cap { display: block; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #B0A791; } .hum-dash-reads { white-space: normal; } .hum-avg-chip--excluded { border: 1px dashed #C9BEA4; background: #FAF8F0; opacity: .7; } .hum-avg-chip--excluded .hum-avg-chip-val { text-decoration: line-through; color: #B9B2A0; } .hum-avg-group--wide { border-color: #E0B77A; background: #FEFAF2; } .hum-review-btn { margin-left: 8px; border: 1px solid #D3B088; background: #fff; color: #8A6A1F; border-radius: 7px; padding: 3px 10px; font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap; } .hum-review-btn:hover { background: #FDF7F1; } .hum-review-panel { width: 520px; } .hum-hr-readings { display: flex; flex-direction: column; gap: 6px; } .hum-hr-read { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: #fff; border: 1px solid #E6E0CF; border-radius: 9px; cursor: pointer; } .hum-hr-read-lbl { font-size: 11px; font-weight: 800; font-family: var(--font-mono, ui-monospace, monospace); color: #A79E88; } .hum-hr-read-val { margin-left: auto; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; } .hum-hr-effect { background: #FAF8F0; border: 1px solid #EDE7D6; border-radius: 10px; padding: 11px 13px; } .hum-hr-effect-title { margin-bottom: 6px; } .hum-hr-eff-row { display: flex; align-items: baseline; gap: 10px; padding: 3px 0; font-size: 12px; } .hum-hr-eff-l { font-weight: 600; font-variant-numeric: tabular-nums; } .hum-hr-eff-n { margin-left: auto; } .hum-hr-reason-wrap { display: flex; flex-direction: column; gap: 5px; } .hum-hr-reason { border: 1px solid #E6E0CF; border-radius: 9px; padding: 9px 11px; font-size: 13px; resize: vertical; } .hum-hr-reason:focus { outline: none; border-color: #D3B088; box-shadow: 0 0 0 2px rgba(168,92,58,.14); } .hum-hr-exclude { background: #4F7D49; color: #fff; border: 0; border-radius: 10px; padding: 10px 16px; font-size: 13px; font-weight: 800; cursor: pointer; white-space: nowrap; } .hum-hr-exclude:disabled { background: #E3DBC8; color: #A9A08C; cursor: not-allowed; } /* refusal page */ .hum-refuse-wrap { display: flex; justify-content: center; padding: 24px 0; } .hum-refuse-panel { width: 560px; max-width: calc(100vw - 32px); background: #fff; border: 2px solid #A33C2E; border-radius: 14px; overflow: hidden; } .hum-refuse-head { display: flex; align-items: center; gap: 10px; padding: 15px 18px; border-bottom: 1px solid #F0ECE0; } .hum-refuse-title { font-size: 12px; font-weight: 800; letter-spacing: .6px; color: #2B2620; } .hum-refuse-pill { font-size: 10px; font-weight: 800; letter-spacing: .5px; color: #A33C2E; background: #FBEAE7; border: 1px solid #E0AFA5; border-radius: 999px; padding: 2px 9px; } .hum-refuse-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; } .hum-refuse-warn { display: flex; gap: 11px; align-items: flex-start; background: #FBEAE7; border: 1px solid #E0AFA5; border-radius: 12px; padding: 13px 15px; } .hum-refuse-x { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 999px; background: #A33C2E; color: #fff; font-size: 13px; font-weight: 800; line-height: 22px; text-align: center; } .hum-refuse-warn-title { font-size: 12.5px; font-weight: 800; color: #A33C2E; } .hum-refuse-warn-body { font-size: 11.5px; line-height: 1.5; color: #8A3A2E; margin-top: 3px; } .hum-refuse-facts { margin: 0; border: 1px solid #E6E0CF; border-radius: 10px; overflow: hidden; } .hum-refuse-facts > div { display: flex; gap: 12px; padding: 9px 14px; border-bottom: 1px solid #F0ECE0; } .hum-refuse-facts > div:last-child { border-bottom: 0; } .hum-refuse-facts dt { width: 96px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #98907E; margin: 0; } .hum-refuse-facts dd { margin: 0; font-size: 12.5px; color: #2B2620; } .hum-refuse-note { margin: 0; line-height: 1.5; } .hum-refuse-foot { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: #FAF8F0; border-top: 1px solid #F0ECE0; } .hum-refuse-close { margin-right: auto; color: #6B6353; font-size: 13px; font-weight: 600; text-decoration: none; } .hum-refuse-view { border: 1px solid #D3B088; color: #9C5B2B; background: #fff; border-radius: 8px; padding: 9px 14px; font-size: 12.5px; font-weight: 700; text-decoration: none; } .rgv2-hum-cap { display: block; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #B0A791; } /* V29.202 - the two FINAL chemicals + amended flag pushed from the Met register */ .rgv2-rec-chem { display: block; margin-top: 2px; font-size: 9.5px; font-weight: 600; color: #8A6A1F; font-variant-numeric: tabular-nums; white-space: nowrap; } .rgv2-rec-chem-unit { color: #B0A791; font-weight: 700; letter-spacing: .3px; } /* V29.238 - the met-test code beside the recovery % (e.g. "88.20% · T020"). */ .rgv2-rec-code { font-size: 9.5px; font-weight: 700; color: #B0A791; letter-spacing: .3px; } /* V29.239 - Grade Vault "one lot, one line" grid — port of the operator's mockup alphaoro-vault3_2.html. Each metric is a green .rgv3-avg box + a .rgv3-g row of .rgv3-smp chips; the GOLD chips also carry the JS hooks (.rgv2-chip + data-sid + .is-excluded) so exclusion / live re-average keep working unchanged. Additive to the .rgv2-* table (still used by the Awaiting tab). */ .rgv3-card { background: #fff; border: 1px solid #E6E0CF; border-radius: 12px; overflow: hidden; margin-bottom: 20px; } /* V29.262 - proportional columns that spread the full container width (header + rows share ONE template so every header sits over its column); ACTION is fixed + right. */ .rgv3-hdr, .rgv3-lotrow { display: grid; grid-template-columns: 92px 168px 2.0fr 1.85fr 1.05fr 1.35fr 128px; align-items: center; padding: 0 14px; } .rgv3-hdr > span:last-child, .rgv3-actions { justify-self: end; text-align: right; } .rgv3-hdr { background: var(--table-head-bg, #DCCFB6); border-bottom: 1px solid var(--table-head-border, #C4B294); padding: 8px 14px; } .rgv3-hdr span { font-size: 10px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--table-head-ink, #5C4326); } /* V29.325 - the unit lives ONLY in the header now (off the tiles): a small muted, sentence-case tail on the column label — "GOLD oz/tc", "HUMIDITY %". */ .rgv3-unit { font-size: 8.5px; font-weight: 700; letter-spacing: .2px; text-transform: none; color: #7A6244; } /* V29.328 - To Approve gets a 20px bulk-select checkbox column (vault9 Part 5d). Scoped to the To Approve wrapper; Confirmed keeps its 7-column grid. The re-sample subrow has no checkbox, so its first cell starts under Lot (column 2). */ .rgv2-wrap[data-rgv-approve] .rgv3-hdr, .rgv2-wrap[data-rgv-approve] .rgv3-lotrow { grid-template-columns: 20px 100px 268px 1fr 320px 112px 200px 106px; } .rgv2-wrap[data-rgv-approve] .rgv3-subrow > *:first-child { grid-column-start: 2; } .rgv3-check, .rgv3-check-h { display: flex; align-items: center; justify-content: center; } .rgv3-check input, .rgv3-check-h input { width: 15px; height: 15px; cursor: pointer; accent-color: #9C5B2B; } .rgv3-lotrow { padding: 7px 14px; border-bottom: 1px solid #F0ECE0; } .rgv3-lotrow:last-child { border-bottom: 0; } .rgv3-cell { display: flex; align-items: center; gap: 5px; padding-right: 10px; border-right: 1px solid #EDE7D6; margin-right: 10px; min-height: 34px; flex-wrap: wrap; } .rgv3-cell.last { border-right: 0; } /* V29.303 - LOT cell is a flex column (code + optional IMPORTED wrap below) so nothing overflows into the miner cell; the code stays on one line. */ .rgv3-lot { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; } .rgv3-lotcode { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 12px; font-weight: 800; white-space: nowrap; color: #2B2620; } /* Miner cell: a clean two-line stack — name (wraps, never truncates) then the status pill. Nothing absolutely positioned inside. */ .rgv3-miner { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding-right: 8px; min-width: 0; } .rgv3-miner-name { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .2px; color: var(--ink-2, #5C4326); line-height: 1.2; overflow-wrap: anywhere; } .rgv3-status { display: inline-block; font-size: 8.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; padding: 1px 6px; border-radius: 5px; white-space: nowrap; } .rgv3-status--confirmed { background: #E9F0E4; border: 1px solid #C6D8BC; color: #4F7D49; } .rgv3-status--resample { background: #F1EDF7; border: 1px solid #CCC0E0; color: #5D4A78; } .rgv3-status--awaiting { background: #FBF1E4; border: 1px solid #E4C79B; color: #9A6A1E; } .rgv3-avg { background: #E9F0E4; border: 1px solid #C6D8BC; border-radius: 7px; padding: 3px 8px; text-align: center; flex: none; } .rgv3-avg .rgv3-v { display: block; font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: #3F6A3A; white-space: nowrap; } .rgv3-avg .rgv3-u { display: block; font-size: 7px; font-weight: 800; letter-spacing: .4px; color: #7FA077; text-transform: uppercase; white-space: nowrap; } .rgv3-avg.mut { background: #FEFBF4; border-color: #ECCF9A; } .rgv3-avg.mut .rgv3-v { color: #B7935B; font-size: 9px; font-weight: 700; padding: 4px 0; } .rgv3-g { display: flex; gap: 4px; align-items: flex-start; flex: none; flex-wrap: wrap; } /* V29.325 - chip is a flex column; the ✕ exclude control is a REAL inline child on the code's line (was position:absolute, overhanging 5px past the corner onto the next chip — the overlap reported 3×). Excluded -> dashed + a green "+" to restore. */ .rgv3-smp { display: flex; flex-direction: column; align-items: center; background: #fff; border: 1px solid #E6E0CF; border-radius: 6px; padding: 2px 6px; text-align: center; flex: none; } .rgv3-top { display: flex; align-items: center; justify-content: center; gap: 3px; } .rgv3-smp .rgv3-c { display: block; font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 6.5px; font-weight: 800; color: #A79E88; } .rgv3-smp .rgv3-v { display: block; font-size: 10px; font-weight: 800; font-variant-numeric: tabular-nums; color: #2B2620; } .rgv3-smp.rgv2-chip { cursor: pointer; } .rgv3-smp .rgv3-x { flex: 0 0 auto; width: 11px; height: 11px; border-radius: 999px; background: #fff; border: 1px solid #E0AFA5; color: #A33C2E; font-size: 7px; font-weight: 800; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .rgv3-smp .rgv3-x::before { content: "✕"; } .rgv3-smp.is-excluded .rgv3-x { border-color: #C6D8BC; color: #8FA98A; } .rgv3-smp.is-excluded .rgv3-x::before { content: "+"; } .rgv3-smp.is-excluded { border-style: dashed; background: #FBF9F3; opacity: .7; } .rgv3-smp.is-excluded .rgv3-v { color: #B0A791; text-decoration: line-through; } .rgv3-smp.is-red { border-color: #E0AFA5; } .rgv3-smp.is-red .rgv3-v { color: #A33C2E; } /* V29.303 - the bucket tag: 3rd line on each Au/Ag chip (brown on warm sand). Chips with no recorded bucket render no tag (never a guess). */ .rgv3-bkt { display: block; margin-top: 1px; font-size: 6.5px; font-weight: 800; letter-spacing: .3px; color: #9C5B2B; background: #FAF3E9; border: 1px solid #E4CDB0; border-radius: 4px; padding: 0 2px; } .rgv2-chip-bkt { display: block; margin-top: 2px; font-size: 6.5px; font-weight: 800; letter-spacing: .3px; color: #9C5B2B; background: #FAF3E9; border: 1px solid #E4CDB0; border-radius: 4px; padding: 0 3px; text-align: center; } .rgv3-smp.is-excluded .rgv3-bkt { opacity: .8; } /* V29.315 - RE-SAMPLE band: a nested row beneath the original. Violet (#5D4A78) is the re-sample and ONLY the re-sample - the RE mark, its average, its chips and bucket tags. Everything else on the row stays in the normal palette. */ .rgv3-subrow { background: #FCFBFE; border-top: 1px solid #F3F0F8; } .rgv3-re-mark { display: inline-block; font-size: 8px; font-weight: 800; letter-spacing: .45px; color: #5D4A78; background: #F1EDF7; border: 1px solid #CCC0E0; border-radius: 5px; padding: 2px 7px; } .rgv3-re-ctx { font-size: 10.5px; font-weight: 600; color: #B0A78F; line-height: 1.3; overflow-wrap: anywhere; } .rgv3-avg--re { background: #F5F1FA; border-color: #CCC0E0; } .rgv3-avg--re .rgv3-v { color: #5D4A78; } .rgv3-avg--re .rgv3-u { color: #9184AB; } .rgv3-g--re .rgv3-smp { border-color: #DED5EC; background: #FCFBFE; } .rgv3-g--re .rgv3-bkt { color: #5D4A78; background: #F1EDF7; border-color: #CCC0E0; } .rgv3-re-same { font-size: 10.5px; color: #C9C0AC; white-space: nowrap; } .rgv3-reason { display: flex; gap: 4px; flex-wrap: wrap; } .rgv3-actions { display: flex; align-items: center; gap: 8px; justify-content: flex-end; } .rgv3-ok { background: #4F7D49; color: #fff; border: 0; border-radius: 7px; font-size: 10.5px; font-weight: 700; padding: 7px 12px; white-space: nowrap; cursor: pointer; } /* V29.261 - humidity-missing row: a dashed amber NEEDS HUMIDITY in place of Confirm. */ .rgv3-needshum { background: #FDF3E0; color: #8A6A1F; border: 1.5px dashed #ECCF9A; border-radius: 7px; font-size: 9.5px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; padding: 6px 11px; white-space: nowrap; cursor: pointer; } .rgv3-needshum:hover { background: #F8EAD0; border-color: #E0BE80; } .rgv3-notin { color: #B0A791; font-size: 10px; } .rgv3-confirmed-sub { display: block; color: #4F7D49; font-weight: 700; font-size: 9px; letter-spacing: .3px; } .rgv3-amended-chip { background: #FDF3E0; border: 1px solid #ECCF9A; color: #8A6A1F; border-radius: 5px; font-size: 7.5px; font-weight: 800; padding: 3px 6px; white-space: nowrap; } .rgv2-amended { margin-left: 4px; font-size: 10px; color: #8A6A1F; cursor: help; } /* V29.279 - Stockpile back-calc blend builder (full-page). Palette per spec: brown #9C5B2B primary, green #4F7D49 selected/commit, dashed brown #D3B088 suggested, amber #FDF3E0/#ECCF9A off-band. Numerals tabular. Ore chips reuse the shared .ore-chip component. */ .blb-page { background: #EFE9DA; margin: -18px -22px -28px; padding: 22px; min-height: calc(100vh - 60px); font-variant-numeric: tabular-nums; } .blb-card { max-width: 1780px; margin: 0 auto; background: #fff; border: 1px solid #E6E0CF; border-radius: 16px; box-shadow: 0 18px 48px rgba(43,38,32,.14); overflow: hidden; } /* pad9 Part 6 - the blender uses the sand tiers, not white-on-white. */ .blb-head { display: flex; align-items: center; gap: 16px; padding: 15px 22px; background: #DCCFB6; border-bottom: 1px solid #C4B294; } .blb-title { font-size: 15px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: #5C4326; margin: 0; } .blb-bn { display: flex; align-items: center; gap: 9px; } .blb-bn-lbl { font-size: 9px; font-weight: 800; letter-spacing: .5px; color: #98907E; text-transform: uppercase; } .blb-bn-in { border: 1.5px solid #D3B088; background: #FDF9F4; border-radius: 8px; height: 34px; width: 96px; padding: 0 12px; font-family: ui-monospace, Menlo, monospace; font-size: 15px; font-weight: 800; color: #9C5B2B; } .blb-bn-in:focus { outline: none; border-color: #9C5B2B; } .blb-bn-hint { font-size: 10px; color: #98907E; } .blb-bn-hint--warn { color: #B4532B; font-weight: 700; } .blb-x { color: #98907E; font-size: 17px; text-decoration: none; line-height: 1; } /* blend5 - the Ore-Tracker heading band (one band, three phases) + Edit toggle. */ .blb-hb { display: flex; align-items: center; gap: 11px; padding: 12px 22px; background: #fff; border-bottom: 3px solid #4F7D49; } .blb-hb--amber { border-bottom-color: #B7791F; } .blb-hb--sand { border-bottom-color: #C4B294; } .blb-hb--sand .blb-hb-pill { background: #EFECE0; color: #6B6353; } .blb-hb-title { font-size: 13px; font-weight: 800; letter-spacing: .55px; text-transform: uppercase; color: #2B2620; margin: 0; } .blb-hb-pill { font-size: 10px; font-weight: 800; border-radius: 999px; padding: 3px 9px; background: #E9F0E4; color: #3F6A3A; font-variant-numeric: tabular-nums; } .blb-hb--amber .blb-hb-pill { background: #FDF3E0; color: #B7791F; } .blb-hb-sub { font-size: 11px; color: #6B6353; } .blb-hb-btn { margin-left: auto; background: #fff; border: 1px solid #D3B088; color: #9C5B2B; border-radius: 8px; font-size: 12px; font-weight: 700; padding: 7px 14px; cursor: pointer; } .blb-hb-btn:hover { background: #FBF5EE; } .blb-hb-btn.is-on { background: #9C5B2B; border-color: #9C5B2B; color: #fff; } .blb-hb-btn.is-on:hover { background: #874c22; } .blb-hb-btn[hidden] { display: none !important; } .blb-x { background: none; border: 0; cursor: pointer; } .blb-x:hover { color: #5C4326; } /* only the Edit phase shows the toolbar + Load-more (class sets display, so [hidden] must win). */ .blb-toolbar[hidden], .blb-more[hidden] { display: none !important; } .blb-targets { display: flex; align-items: stretch; gap: 14px; padding: 14px 22px; background: #F3EFE3; border-bottom: 1px solid #E6E0CF; flex-wrap: wrap; } .blb-tbox { background: #FFFDF8; border: 1px solid #E6E0CF; border-top: 3px solid #C4B294; border-radius: 11px; padding: 9px 14px; min-width: 210px; } .blb-tbox-lbl { font-size: 8.5px; font-weight: 800; letter-spacing: .5px; color: #6B6353; text-transform: uppercase; display: block; margin-bottom: 5px; } .blb-trow { display: flex; align-items: center; gap: 9px; } .blb-tin { border: 1.5px solid #D3B088; background: #FDF9F4; border-radius: 8px; height: 32px; padding: 0 4px 0 10px; display: flex; align-items: center; gap: 3px; } .blb-tin input { border: none; background: transparent; width: 62px; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; color: #9C5B2B; } .blb-tin input:focus { outline: none; } .blb-tin input::placeholder { color: #C9C0AC; font-weight: 800; } .blb-tin i { font-style: normal; font-size: 10px; color: #98907E; font-weight: 600; } .blb-band { font-size: 10.5px; color: #98907E; display: flex; align-items: center; } .blb-bandin { border: 1px solid #E6E0CF; background: #fff; border-radius: 6px; width: 42px; height: 24px; text-align: center; font-size: 11px; font-weight: 700; color: #6B6353; font-variant-numeric: tabular-nums; } .blb-bandin:focus { outline: none; border-color: #D3B088; } .blb-createbtn { align-self: stretch; background: #9C5B2B; color: #fff; border: none; border-radius: 10px; font-size: 13px; font-weight: 700; padding: 0 22px; white-space: nowrap; cursor: pointer; } .blb-createbtn:hover { background: #874c22; } .blb-createbtn:disabled { background: #D8CBB6; color: #F3EEE4; cursor: not-allowed; } .blb-createbtn--ol { background: #fff; border: 1px solid #D3B088; color: #9C5B2B; font-size: 12px; font-weight: 600; } .blb-createbtn--ol:hover { background: #FBF5EE; } .blb-createbtn--ol:disabled { background: #fff; color: #C9BEA4; border-color: #E6DCC8; cursor: default; } /* blend7 - grade-first: the tonnage box is disabled until a grade is typed; its hint line carries the MAX / of-max / over-max state and the restore pill. */ .blb-tin input:disabled { color: #C9C0AC; cursor: not-allowed; } [data-blb-tt].is-over { color: #B7791F; } .blb-thint { margin-top: 6px; font-size: 9.5px; color: #98907E; display: flex; align-items: center; gap: 7px; min-height: 15px; } .blb-thint[hidden] { display: none; } .blb-thint--ok { color: #3F6A3A; } .blb-thint--warn { color: #B7791F; } .blb-maxpill { font-size: 8.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; border: 1px solid #D3B088; background: #fff; color: #6B6353; border-radius: 6px; padding: 2px 7px; cursor: pointer; } .blb-maxpill[hidden] { display: none; } .blb-maxpill--max { background: #E9F0E4; border-color: #C6D8BC; color: #3F6A3A; cursor: default; } .blb-maxpill--restore { background: #fff; border-color: #D3B088; color: #9C5B2B; } .blb-maxpill--restore:hover { background: #FBF5EE; } /* blend7 §5 - the "Creating blend" progress panel over the pool while the server saves. */ .blb-busy .blb-targets, .blb-busy .blb-foot { opacity: .55; pointer-events: none; } .blb-creating { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; } .blb-creating[hidden] { display: none; } .blb-creating-scrim { position: absolute; inset: 0; background: rgba(43,38,32,.35); } .blb-creating-panel { position: relative; width: 460px; max-width: 92vw; background: #fff; border: 1px solid #E6E0CF; border-radius: 14px; box-shadow: 0 22px 44px -18px rgba(43,38,32,.45); padding: 20px 22px; } .blb-creating-h { display: flex; align-items: center; gap: 10px; } .blb-creating-h b { font-size: 13px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: #5C4326; } .blb-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #E6D3BC; border-top-color: #9C5B2B; animation: blb-spin 1s linear infinite; flex: none; } @keyframes blb-spin { to { transform: rotate(360deg); } } .blb-creating-bar { height: 6px; border-radius: 4px; background: #F0ECE0; overflow: hidden; margin: 12px 0 14px; } .blb-creating-bar i { display: block; height: 100%; width: 40%; background: #9C5B2B; border-radius: 4px; animation: blb-bar 1.2s ease-in-out infinite; } @keyframes blb-bar { 0% { margin-left: -40%; } 100% { margin-left: 100%; } } .blb-creating-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; } .blb-creating-step { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #98907E; } .blb-creating-circle { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #E0D9C6; flex: none; } .blb-creating-step.is-current { color: #2B2620; } .blb-creating-step.is-current .blb-creating-circle { border-color: #9C5B2B; border-top-color: transparent; animation: blb-spin 0.9s linear infinite; } .blb-creating-step.is-done { color: #3F6A3A; } .blb-creating-step.is-done .blb-creating-circle { border-color: #4F7D49; background: #4F7D49 url("data:image/svg+xml;utf8,") center/12px no-repeat; } .blb-creating-note { font-size: 10.5px; color: #B0A78F; margin: 14px 0 0; } /* blend5 - readout tiles: coloured top rule (green inside · brown gold · sand info); PREVIEW tag + dashed border until the blend is created. */ .blb-res { margin-left: auto; display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; } .blb-rbox { border-radius: 11px; padding: 8px 14px; border: 1px solid #E6E0CF; border-top: 3px solid #C4B294; background: #FFFDF8; min-width: 132px; display: flex; flex-direction: column; justify-content: center; } .blb-rbox-lbl { font-size: 9px; font-weight: 800; letter-spacing: .55px; text-transform: uppercase; display: flex; align-items: center; gap: 6px; margin-bottom: 4px; color: #5C4326; } .blb-rbox b { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; color: #2B2620; } .blb-rbox b i { font-style: normal; font-size: 9.5px; font-weight: 700; color: #98907E; margin-left: 3px; } .blb-rbox > i { font-style: normal; font-size: 9px; margin-top: 3px; color: #98907E; } .blb-rbox--ok { border-top-color: #4F7D49; } .blb-rbox--ok b { color: #3F6A3A; } .blb-rbox--warn { border-top-color: #B7791F; } .blb-rbox--warn b { color: #B7791F; } .blb-rbox--gold { border-top-color: #9C5B2B; } .blb-rbox--info { border-top-color: #C4B294; } .blb-meter { margin-top: 7px; height: 5px; border-radius: 3px; background: #EFEAE0; overflow: hidden; } .blb-meter i { display: block; height: 100%; background: #B89A82; border-radius: 3px; } .blb-pvw { font-size: 7px; font-weight: 800; letter-spacing: .5px; color: #B7791F; background: #FDF3E0; border: 1px solid #ECCF9A; border-radius: 4px; padding: 1px 5px; } .blb-res:not(.blb-res--preview) .blb-pvw { display: none; } .blb-res--preview .blb-rbox { border-style: dashed; border-top-style: solid; } .blb-toolbar { display: flex; align-items: center; gap: 12px; padding: 12px 22px; background: #FDFBF6; border-bottom: 1px solid #E6E0CF; flex-wrap: wrap; } .blb-search-field { display: inline-flex; align-items: center; gap: 9px; background: #fff; border: 1px solid #E6E0CF; border-radius: 10px; padding: 9px 13px; width: 320px; max-width: 100%; } .blb-search-field:focus-within { border-color: #D3B088; } .blb-search-mag { color: #B0A78F; flex: none; } .blb-search { border: 0; outline: none; background: none; font-size: 12px; color: #2B2620; width: 100%; } .blb-filters { display: flex; gap: 6px; } .blb-fchip { border: 1px solid #E6E0CF; background: #fff; border-radius: 999px; height: 28px; padding: 0 13px; font-size: 10.5px; font-weight: 700; color: #6B6353; cursor: pointer; letter-spacing: .2px; } .blb-fchip.is-on { background: #9C5B2B; border-color: #9C5B2B; color: #fff; } .blb-graderange { display: flex; align-items: center; gap: 6px; font-size: 10px; color: #98907E; } .blb-grin { border: 1px solid #E6E0CF; background: #fff; border-radius: 6px; width: 54px; height: 28px; text-align: center; font-size: 11px; color: #2B2620; font-variant-numeric: tabular-nums; } .blb-grin:focus { outline: none; border-color: #D3B088; } .blb-sortwrap { display: inline-flex; align-items: center; gap: 8px; } .blb-sortsel-lbl { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: #6B6353; } .blb-sortsel { border: 1px solid #E6E0CF; background: #fff; border-radius: 8px; padding: 6px 10px; font-size: 11.5px; font-weight: 700; color: #2B2620; cursor: pointer; } .blb-sortsel:focus { outline: none; border-color: #D3B088; } .blb-sortdir { display: inline-flex; border: 1px solid #E6E0CF; border-radius: 8px; overflow: hidden; } .blb-sortdir-btn { width: 30px; height: 30px; border: 0; border-right: 1px solid #F0ECE0; background: #fff; color: #B0A78F; font-size: 11px; cursor: pointer; } .blb-sortdir-btn:last-child { border-right: 0; } .blb-sortdir-btn.is-on { background: #9C5B2B; color: #fff; } .blb-scope { margin-left: auto; font-size: 10.5px; color: #98907E; } /* pad8 Part 6b/6d - HARD/BENDS flags, eligible-pool statement, selected tray. */ .blb-tbox--hard { border-color: #D3B088; border-top-color: #9C5B2B; box-shadow: 0 0 0 2px rgba(156, 91, 43, 0.07); } .blb-flag { font-size: 8px; font-weight: 800; letter-spacing: 0.5px; padding: 1px 5px; border-radius: 4px; vertical-align: middle; } .blb-flag--hard { color: #9C5B2B; background: #F7ECE0; border: 1px solid #E4CDB0; } .blb-flag--bends { color: #98907E; background: #F4F1E8; border: 1px solid #E6E0CF; } .blb-tray { padding: 11px 22px; background: #FAF3E9; border-bottom: 1px solid #F0ECE0; } .blb-tray-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .blb-tray-title { font-size: 11px; font-weight: 700; color: #6B5A3E; } .blb-tray-title b { color: #2B2620; font-variant-numeric: tabular-nums; } .blb-tray-clear { margin-left: auto; font-size: 10.5px; font-weight: 700; color: #9C5B2B; background: none; border: 0; cursor: pointer; padding: 0; } .blb-tray-chips { display: flex; flex-wrap: wrap; gap: 6px; } .blb-chip { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #E4CDB0; border-radius: 999px; padding: 3px 4px 3px 10px; font-size: 11px; } .blb-chip-code { font-weight: 800; color: #2B2620; } .blb-chip-nums { color: #6B6353; font-variant-numeric: tabular-nums; } .blb-chip-x { width: 17px; height: 17px; border-radius: 999px; border: 0; background: #F1E7D8; color: #9C5B2B; cursor: pointer; font-size: 9px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .blb-chip-x:hover { background: #E8D8C2; } /* pad8 Part 6f/6g - pool sort chips + Save draft button. */ .blb-sort { display: inline-flex; gap: 4px; } .blb-sortchip { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 700; color: #6B6353; background: #FDF9F4; border: 1px solid #E6E0CF; border-radius: 999px; padding: 3px 8px; cursor: pointer; } .blb-sortchip:hover { border-color: #D3B088; } .blb-sortchip.is-on { border-color: #D3B088; color: #2B2620; } .blb-sortarrow { font-size: 9px; line-height: 1; opacity: 0.4; } .blb-sortarrow::before { content: "\2195"; } .blb-sortchip.is-on .blb-sortarrow { opacity: 1; color: #9C5B2B; } .blb-sortchip.is-on.is-asc .blb-sortarrow::before { content: "\2191"; } .blb-sortchip.is-on.is-desc .blb-sortarrow::before { content: "\2193"; } .blb-savedraft { font-size: 12px; font-weight: 700; color: #6B6353; background: #fff; border: 1px solid #E6E0CF; border-radius: 8px; padding: 8px 14px; cursor: pointer; } .blb-savedraft:hover { border-color: #D3B088; } /* wb1 Part 1 - Weighbridge Tonnage Flow custom chart + hover tooltip. */ .wb-flow { position: relative; padding-top: 6px; } .wb-flow-plot { display: flex; gap: 8px; height: 240px; } .wb-flow-yaxis { display: flex; flex-direction: column; justify-content: space-between; width: 40px; text-align: right; flex: none; } .wb-flow-ytick { font-size: 9px; color: #98907E; font-variant-numeric: tabular-nums; } .wb-flow-bars { flex: 1; display: flex; align-items: flex-end; gap: 2px; border-bottom: 1px solid #F0ECE0; } .wb-flow-slot { flex: 1; align-self: stretch; display: flex; align-items: flex-end; justify-content: center; background: none; border: 0; padding: 0; cursor: pointer; border-radius: 3px; } .wb-flow-slot.is-hot { background: rgba(156, 91, 43, 0.06); } .wb-flow-slot:focus-visible { outline: 2px solid #9C5B2B; outline-offset: -2px; } .wb-flow-bar { width: 62%; max-width: 22px; background: #B89A82; border-radius: 3px 3px 0 0; transition: background .1s; } .wb-flow-bar.is-zero { height: 2px; background: #DCCFB6; border-radius: 0; } .wb-flow-slot.is-hot .wb-flow-bar { background: #9C5B2B; } .wb-flow-slot.is-today .wb-flow-bar { background: #4F7D49; } .wb-flow-slot.is-today.is-hot .wb-flow-bar { background: #3F6A3A; } .wb-flow-slot.is-pinned { background: rgba(156, 91, 43, 0.08); } .wb-flow-slot.is-pinned .wb-flow-bar { background: #9C5B2B; } .wb-pin-chip { font-size: 10px; font-weight: 700; color: #9C5B2B; background: #FAF3E9; border: 1px solid #E4CDB0; border-radius: 999px; padding: 3px 10px; white-space: nowrap; } .wb-pin-chip a { color: #9C5B2B; text-decoration: underline; } .wb-flow-xaxis { display: flex; gap: 2px; padding-left: 48px; margin-top: 4px; } .wb-flow-xtick { flex: 1; font-size: 9px; color: #98907E; text-align: center; white-space: nowrap; overflow: hidden; } .wb-flow-xtick.is-today { color: #4F7D49; font-weight: 800; } .wb-flow-tip { position: absolute; width: 300px; background: #fff; border: 1px solid #E6E0CF; border-radius: 11px; box-shadow: 0 14px 32px rgba(43, 38, 32, 0.16); padding: 12px 14px; z-index: 30; pointer-events: none; } .wb-flow-tip[hidden] { display: none !important; } .wb-tip-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .wb-tip-head b { font-size: 12.5px; font-weight: 800; color: #2B2620; } .wb-tip-dayof { font-size: 9.5px; color: #98907E; } .wb-tip-val { display: flex; align-items: baseline; gap: 4px; margin-top: 4px; } .wb-tip-val b { font-size: 22px; font-weight: 800; color: #2B2620; font-variant-numeric: tabular-nums; } .wb-tip-val i { font-style: normal; font-size: 10px; color: #98907E; } .wb-tip-tl { margin-left: auto; font-size: 10px; font-weight: 700; color: #6B6353; font-variant-numeric: tabular-nums; } .wb-tip-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 9px; } .wb-tip-chip { font-size: 9.5px; font-weight: 700; color: #5C4326; background: #FAF8F0; border: 1px solid #E6E0CF; border-radius: 5px; padding: 2px 6px; } .wb-tip-more { font-size: 9.5px; font-weight: 700; color: #9C5B2B; padding: 2px 4px; } .wb-tip-na { margin-top: 6px; font-size: 11px; color: #98907E; } .wb-tip-foot { margin-top: 10px; padding-top: 8px; border-top: 1px solid #F0ECE0; font-size: 9.5px; line-height: 1.5; color: #98907E; } /* wb1 Part 2 - Trucks tab: toolbar + two sections + 8-column grid. */ .wb-toolbar { display: flex; align-items: center; gap: 12px; background: #FDFBF6; border: 1px solid #EDE7D8; border-radius: 12px; padding: 12px 16px; margin-bottom: 20px; flex-wrap: wrap; } .wb-search-form { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 260px; } .wb-search-field { display: inline-flex; align-items: center; gap: 8px; width: 360px; max-width: 100%; background: #fff; border: 1px solid #E6E0CF; border-radius: 9px; padding: 8px 12px; } .wb-search-field:focus-within { border-color: #D3B088; } .wb-search-mag { color: #98907E; flex: none; } .wb-search-input { border: 0; outline: none; background: none; font-size: 13px; color: #2B2620; width: 100%; } .wb-search-scope { font-size: 10px; color: #98907E; } .wb-add-truck-btn { margin-left: auto; } .wb-sec-head { display: flex; align-items: baseline; gap: 10px; margin: 0 2px 10px; flex-wrap: wrap; } .wb-sec-head--closed { margin-top: 22px; } .wb-sec-title { font-size: 13.5px; font-weight: 800; color: #2B2620; } .wb-sec-pill { font-size: 10px; font-weight: 700; color: #6B6353; background: #FAF8F0; border: 1px solid #E6E0CF; border-radius: 999px; padding: 2px 10px; } .wb-sec-pill.is-on { color: #4F7D49; background: #E9F0E4; border-color: #C6D8BC; } .wb-sec-expl { margin-left: auto; font-size: 10.5px; color: #98907E; } .wb-tt-card { background: #fff; border: 1px solid #E6E0CF; border-radius: 12px; overflow: hidden; } .wb-tt-head, .wb-tt-row { display: grid; grid-template-columns: 190px 380px minmax(140px, 1fr) 88px 132px 150px 150px 56px; align-items: center; gap: 16px; padding: 12px 16px; } .wb-tt-head { background: var(--table-head-bg, #DCCFB6); color: var(--table-head-ink, #5C4326); font-size: 10px; font-weight: 700; letter-spacing: 0.7px; text-transform: uppercase; padding-top: 9px; padding-bottom: 9px; } .wb-tt-head .wb-num { text-align: right; padding-right: 16px; } .wb-tt-row { border-top: 1px solid #F0ECE0; font-size: 12.5px; } .wb-tt-plate { font-size: 12.5px; font-weight: 800; color: #2B2620; white-space: nowrap; } .wb-tt-lots { display: flex; flex-wrap: wrap; gap: 4px; overflow: hidden; } .wb-cpm-lot-pill { font-size: 10.5px; font-weight: 700; color: #5C4326; background: #FAF8F0; border: 1px solid #E6E0CF; border-radius: 5px; padding: 2px 6px; text-decoration: none; } .wb-lot-more { font-size: 10px; font-weight: 700; color: #9C5B2B; } .wb-tt-driver { color: #6B6353; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wb-tt-row .wb-num { text-align: right; padding-right: 16px; font-variant-numeric: tabular-nums; color: #2B2620; } .wb-tt-arrived { display: flex; flex-direction: column; line-height: 1.15; white-space: nowrap; } .wb-tt-arrived b { font-size: 12px; font-weight: 700; color: #2B2620; } .wb-tt-arrived i { font-style: normal; font-size: 9.5px; color: #98907E; } .wb-status-pill { font-size: 9.5px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; color: #B7791F; background: #FDF3E0; border: 1px solid #ECCF9A; border-radius: 999px; padding: 2px 9px; white-space: nowrap; } .wb-win-pill { font-size: 9.5px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; border-radius: 999px; padding: 2px 9px; white-space: nowrap; } .wb-win-pill--green { color: #4F7D49; background: #E9F0E4; border: 1px solid #C6D8BC; } .wb-win-pill--amber { color: #B7791F; background: #FDF3E0; border: 1px solid #ECCF9A; } .wb-win-pill--locked { color: #7a6a55; background: #F1EEE6; border: 1px solid #E0D9C8; } .wb-tt-act { display: flex; align-items: center; justify-content: flex-end; gap: 4px; } .wb-open-link { font-size: 15px; font-weight: 800; color: #9C5B2B; text-decoration: none; padding: 2px 6px; } .wb-tt-empty { padding: 22px 14px; text-align: center; font-size: 12px; color: #98907E; } /* wb1 Part 3 - correction window pill + the Correct-details modal. */ .wb-td-winpill { font-size: 10px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; border-radius: 999px; padding: 3px 10px; white-space: nowrap; } .wb-td-winpill--ok { color: #4F7D49; background: #E9F0E4; border: 1px solid #C6D8BC; } .wb-td-winpill--locked { color: #7a6a55; background: #F1EEE6; border: 1px solid #E0D9C8; } .wb-cc-note { margin: 0 0 12px; font-size: 11px; color: #98907E; } .wb-cc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .wb-cc-field { display: flex; flex-direction: column; gap: 3px; } .wb-cc-field--wide { grid-column: 1 / -1; } .wb-cc-field > span { font-size: 10px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; color: #98907E; } .wb-cc-field input { border: 1px solid #E6E0CF; border-radius: 8px; padding: 8px 11px; font-size: 13px; color: #2B2620; background: #FDF9F4; } .wb-cc-field input:focus { outline: none; border-color: #D3B088; } .wb-cc-field input.is-changed { border-color: #A33C2E; background: #FDF6F5; } .wb-cc-was { font-size: 10.5px; color: #A33C2E; text-decoration: line-through; font-style: normal; } .wb-cc-bar { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #F0ECE0; flex-wrap: wrap; } .wb-cc-changes { font-size: 11px; font-weight: 700; color: #9C5B2B; white-space: nowrap; } .wb-cc-reason { flex: 1; min-width: 200px; border: 1px solid #E6E0CF; border-radius: 8px; padding: 8px 11px; font-size: 12.5px; } .wb-cc-reason:focus { outline: none; border-color: #D3B088; } .wb-cc-err { margin: 10px 0 0; font-size: 11.5px; color: #A33C2E; } [data-wb-cc-save] { background: #4F7D49; color: #fff; border: 0; } [data-wb-cc-save]:disabled { opacity: .5; cursor: default; } /* pad9 - the pool sits on sand and scrolls with the PAGE (no inner scroll box). */ .blb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; padding: 16px 22px; background: #FAF8F0; } .blb-lot { text-align: left; border: 1.5px solid #E6E0CF; border-radius: 11px; padding: 10px 12px; position: relative; background: #fff; cursor: pointer; display: flex; flex-direction: column; gap: 2px; font: inherit; } .blb-lot:hover { border-color: #D3B088; } .blb-lot--hidden { display: none; } .blb-lot-r1 { display: flex; align-items: center; gap: 7px; } .blb-lot-code { font-family: ui-monospace, Menlo, monospace; font-size: 14px; font-weight: 800; color: #2B2620; } .blb-age { margin-left: auto; font-size: 8.5px; font-weight: 800; border-radius: 999px; padding: 2px 7px; background: #FAF8F0; color: #A79E88; border: 1px solid #E6E0CF; white-space: nowrap; } .blb-age--old { background: #FDF3E0; color: #8A6A1F; border-color: #ECCF9A; } /* blend5 Part 8 - the miner name WRAPS to two lines, never truncated. */ .blb-lot-mnr { font-size: 9px; font-weight: 700; letter-spacing: .2px; color: #98907E; text-transform: uppercase; margin: 6px 0 6px; line-height: 1.3; min-height: 22px; display: flex; align-items: flex-end; } .blb-lot-foot { display: flex; align-items: baseline; gap: 9px; border-top: 1px solid #F5F1E6; padding-top: 6px; margin-top: 4px; font-size: 11px; font-variant-numeric: tabular-nums; color: #6B6353; } .blb-lot-foot b { color: #2B2620; font-weight: 800; } .blb-lot-rec { margin-left: auto; font-size: 9px; color: #98907E; white-space: nowrap; } /* pad10 - a checkbox on every card (empty in the pool, ticked green when picked) instead of the old corner badge. */ .blb-lot-cb { flex: 0 0 auto; width: 16px; height: 16px; border: 2px solid #D8CEB8; border-radius: 5px; background: #fff; position: relative; } .blb-lot.is-selected { border: 2px solid #4F7D49; background: #F4F8F2; padding: 9px 11px; } .blb-lot.is-selected .blb-lot-cb { background: #4F7D49; border-color: #4F7D49; } .blb-lot.is-selected .blb-lot-cb::after { content: "\2713"; position: absolute; inset: 0; color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; } .blb-empty { grid-column: 1 / -1; text-align: center; color: #98907E; font-size: 12.5px; padding: 26px 0; } /* blend5 - Load-50-more (Edit phase, page scroll). */ .blb-more { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 6px 22px 16px; background: #FAF8F0; font-size: 11px; color: #98907E; } .blb-more-txt { font-variant-numeric: tabular-nums; } .blb-loadmore { border: 1px solid #D3B088; color: #9C5B2B; background: #fff; border-radius: 8px; padding: 7px 14px; font-size: 11.5px; font-weight: 700; cursor: pointer; } .blb-loadmore:hover { background: #FBF5EE; } .blb-foot { display: flex; align-items: center; gap: 16px; padding: 13px 22px; border-top: 1px solid #C4B294; background: #E4DAC4; } .blb-status { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: #3F6A3A; font-variant-numeric: tabular-nums; } .blb-status--warn { color: #8A6A1F; } .blb-status--q { color: #6B6353; } .blb-dot { width: 9px; height: 9px; border-radius: 99px; background: #4F7D49; flex: none; } .blb-status--warn .blb-dot { background: #E0A93A; } .blb-status--q .blb-dot { background: #C9BEA4; } .blb-cancel { margin-left: auto; font-size: 12.5px; font-weight: 600; color: #6B6353; background: none; border: 0; cursor: pointer; } .blb-cancel:hover { color: #2B2620; } .blb-create { background: #4F7D49; color: #fff; border: none; border-radius: 9px; font-size: 12.5px; font-weight: 700; padding: 11px 20px; cursor: pointer; } .blb-create:hover { background: #446b3f; } .blb-create:disabled { background: #CBD5C6; color: #F4F8F2; cursor: not-allowed; } .blb-create--warn { background: #C88A2E; } .blb-create--warn:hover { background: #b17b28; } /* blend5 - the custom confirm panel (Re-create / Cancel — no native confirm). */ .blb-confirm { position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center; } .blb-confirm[hidden] { display: none !important; } .blb-confirm-scrim { position: absolute; inset: 0; background: rgba(43, 38, 32, 0.34); } .blb-confirm-panel { position: relative; background: #fff; border: 1px solid #E6E0CF; border-radius: 14px; box-shadow: 0 24px 60px rgba(43, 38, 32, 0.28); padding: 20px 22px; max-width: 420px; width: calc(100% - 40px); } .blb-confirm-title { font-size: 15px; font-weight: 800; color: #2B2620; margin: 0 0 8px; } .blb-confirm-body { font-size: 12.5px; line-height: 1.55; color: #6B6353; margin: 0 0 16px; } .blb-confirm-foot { display: flex; justify-content: flex-end; gap: 9px; } .blb-confirm-btn { border: 1px solid #D2C3A6; background: #FFFDF8; color: #5C4326; border-radius: 8px; font-size: 12.5px; font-weight: 700; padding: 9px 16px; cursor: pointer; } .blb-confirm-btn:hover { border-color: #C4B294; } .blb-confirm-btn--go { background: #9C5B2B; border-color: #9C5B2B; color: #fff; } .blb-confirm-btn--go:hover { background: #874c22; } /* V29.283 - 2026 Migration Upload Centre (admin/super-user). */ .mig-page { max-width: 1100px; } .mig-intro { margin: 0 0 16px; font-size: 13px; line-height: 1.6; max-width: 780px; } .mig-alert { border-radius: 10px; padding: 12px 16px; font-size: 13px; margin-bottom: 16px; line-height: 1.55; } .mig-alert--ok { background: #F4F8F2; border: 1px solid #C6D8BC; color: #3F6A3A; } .mig-alert--err { background: #FDF3E0; border: 1px solid #ECCF9A; color: #8A6A1F; } .mig-note { font-size: 11.5px; color: #6B6353; margin-top: 6px; } .mig-form { padding: 18px 20px; margin-bottom: 18px; } .mig-form .t-section { margin: 0 0 10px; } .mig-file { display: block; margin-bottom: 12px; font-size: 13px; } .mig-dry { margin-top: 4px; } .mig-hr { border: 0; border-top: 1px solid #EDE7D6; margin: 20px 0 16px; } .mig-check { display: block; font-size: 13px; margin: 8px 0; color: #2B2620; } .mig-phrase { display: block; font-size: 13px; margin: 8px 0 14px; color: #2B2620; } .mig-phrase code { background: #F7F4EA; border: 1px solid #E6E0CF; border-radius: 5px; padding: 2px 7px; font-weight: 700; color: #9C5B2B; } .mig-phrase input { display: block; margin-top: 6px; border: 1.5px solid #D3B088; background: #FDF9F4; border-radius: 8px; height: 34px; padding: 0 12px; font-size: 13px; width: 260px; } .mig-report { padding: 18px 20px; } .mig-sub { font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: #6B6353; margin: 20px 0 10px; } .mig-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; } .mig-kpi { background: #FAF8F0; border: 1px solid #E6E0CF; border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; } .mig-kpi b { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; color: #2B2620; } .mig-kpi span { font-size: 9px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: #98907E; margin-top: 2px; } .mig-rejects { max-height: 340px; overflow-y: auto; border: 1px solid #E6E0CF; border-radius: 10px; } .mig-table { width: 100%; border-collapse: collapse; font-size: 12px; } .mig-table th { position: sticky; top: 0; background: var(--table-head-bg); color: var(--table-head-ink); font-size: 9.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--table-head-border); } .mig-table td { padding: 7px 12px; border-bottom: 1px solid #F0ECE0; color: #6B6353; } .mig-alert--run { background: #FBF7EF; border: 1px solid #E6D9BC; color: #6B6353; } .mig-bar { margin-top: 8px; height: 10px; border-radius: 99px; background: #EDE7D6; overflow: hidden; } .mig-bar span { display: block; height: 100%; background: #9C5B2B; transition: width .3s ease; } .mig-commit .mig-restart { display: inline-block; margin-left: 14px; font-size: 12px; color: #98907E; text-decoration: underline; } /* V29.295 - Grade Vault bucket popover (pad-manager audience; click an H-code label to see its bucket). */ .rgv-bkt-btn { cursor: pointer; } .rgv-bkt-btn:hover { text-decoration: underline; text-underline-offset: 2px; } .rgv-bkt-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 3px; } .rgv-bkt-pop { position: fixed; z-index: 1200; min-width: 232px; max-width: 300px; background: var(--bg-elev); color: var(--ink); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.20); padding: 12px 14px; } .rgv-bkt-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .rgv-bkt-pop-code { font-size: 13px; font-weight: 800; letter-spacing: .3px; color: var(--ink); } .rgv-bkt-pop-tag { font-size: 10px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: #fff; background: var(--table-head-ink); padding: 3px 9px; border-radius: 999px; white-space: nowrap; } .rgv-bkt-pop-tag.is-none { background: var(--ink-3); } .rgv-bkt-pop-dl { margin: 0; display: grid; gap: 5px; } .rgv-bkt-pop-dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .rgv-bkt-pop-dl dt { margin: 0; font-size: 11px; font-weight: 500; color: var(--ink-3); } .rgv-bkt-pop-dl dd { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; } .rgv-bkt-pop-foot { margin: 9px 0 0; font-size: 10.5px; font-weight: 500; color: var(--ink-3); line-height: 1.35; } /* V29.296 - "IMPORTED" badge on migrated (2026-register) Grade Vault rows. */ .rgv2-imported { display: inline-block; margin-left: 6px; font-size: 9.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--ink-2); background: var(--bg-elev-2); border: 1px solid var(--border-strong); padding: 1px 7px; border-radius: 999px; vertical-align: middle; }