:root { --brand: #2a8f47; --brand-ink: #1a6a32; --brand-soft: #e6f4ea; --brand-soft-2: #f1faf4; --ink: #1f2937; --ink-mid: #4b5563; --ink-dim: #6b7280; --line: #e5e7eb; --line-soft: #f1f3f5; --bg: #ffffff; --bg-alt: #fafbfc; --bg-stripe: #fcfdfd; --warn: #f59e0b; --bad: #dc2626; --shadow: 0 1px 2px rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.04); --radius: 6px; } /* Page-level accent modes. Flipping these custom properties recolors the entire Jobs page (ribbon, tabs, list-mgr rail, toolbar, buttons, hover states) so the user sees at a glance whether they're in Order (green, default), Quote (blue), History (red), or Template (purple) mode — matches legacy pp2016's window-wide accent behavior. */ body.mode-quote { --brand: #2563eb; --brand-ink: #1e3a8a; --brand-soft: #dbeafe; --brand-soft-2: #eff6ff; } body.mode-history { --brand: #dc2626; --brand-ink: #991b1b; --brand-soft: #fee2e2; --brand-soft-2: #fef2f2; } body.mode-template { --brand: #8b5cf6; --brand-ink: #6b21a8; --brand-soft: #ede9fe; --brand-soft-2: #f5f3ff; } /* Per-tab tinting (applied via body.page-). Jobs stays on the green default; every other tab repaints ribbon/tabs/rail/buttons through the same --brand tokens so Dave can see which section he's in at a glance. */ body.page-services { --brand: #8b6f47; --brand-ink: #6b5335; --brand-soft: #efe4d3; --brand-soft-2: #f5efe6; --bg-alt: #f5efe6; --bg-stripe: #faf5eb; background: #efe4d3; } body.page-customers { --brand: #2563eb; --brand-ink: #1e3a8a; --brand-soft: #dbeafe; --brand-soft-2: #eff6ff; --bg-alt: #eff6ff; --bg-stripe: #f5f9ff; background: #dbeafe; } body.page-ar { --brand: #0891b2; --brand-ink: #155e75; --brand-soft: #cffafe; --brand-soft-2: #ecfeff; --bg-alt: #ecfeff; --bg-stripe: #f0fdff; background: #cffafe; } body.page-reports { --brand: #9f1239; --brand-ink: #6b1029; --brand-soft: #fce7eb; --brand-soft-2: #fef1f4; --bg-alt: #fef1f4; --bg-stripe: #fef6f8; background: #fce7eb; } body.page-accounting { --brand: #334155; --brand-ink: #1e293b; --brand-soft: #e2e8f0; --brand-soft-2: #f1f5f9; --bg-alt: #f1f5f9; --bg-stripe: #f8fafc; background: #e2e8f0; } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; color: var(--ink); background: #eef1f4; } .num { font-variant-numeric: tabular-nums; } a { color: #2563eb; text-decoration: none; } a:hover { text-decoration: underline; } /* Window chrome */ .window { display: flex; flex-direction: column; height: 100vh; background: var(--bg); } /* Consolidated top row — replaces titlebar + tabs + ribbon (Dave 2026-04-24). Logo, app name, tabs, click-to-hide spacer, and global actions all in one strip. Saves ~70px of vertical chrome on every page. */ .topbar { display: flex; align-items: stretch; background: var(--brand); color: #fff; border-bottom: 1px solid rgba(0,0,0,.12); padding: 0 6px; min-height: 38px; } .tb-brand { display: flex; align-items: center; gap: 6px; padding: 0 8px 0 6px; border-right: 1px solid rgba(255,255,255,.18); } .tb-brand .brand-mark { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); } .tb-name { font-weight: 700; letter-spacing: .3px; font-size: 13px; line-height: 1; } .tb-name-sub { font-size: 9px; letter-spacing: .5px; color: rgba(255,255,255,.55); font-weight: 600; text-transform: uppercase; line-height: 1; } .tb-tabs { display: flex; align-items: stretch; padding: 0 4px; } .tb-tab { display: inline-flex; align-items: center; padding: 0 14px; color: rgba(255,255,255,.78); text-decoration: none; font-size: 13px; border-bottom: 2px solid transparent; transition: color .12s, background .12s, border-color .12s; } .tb-tab:hover { color: #fff; background: rgba(255,255,255,.08); } .tb-tab.active { color: #fff; font-weight: 600; border-bottom-color: #fff; background: rgba(255,255,255,.10); } /* Parent tab with children (Financial) — shows a submenu on hover/focus. */ .tb-tab-wrap { position: relative; display: inline-flex; align-items: stretch; } .tb-tab-parent .tb-chev { font-size: 9px; margin-left: 4px; opacity: .7; } .tb-submenu { position: absolute; top: 100%; left: 0; z-index: 60; min-width: 180px; background: #fff; color: #1e293b; border: 1px solid rgba(0,0,0,.12); border-radius: 0 0 6px 6px; box-shadow: 0 6px 18px rgba(0,0,0,.18); padding: 4px 0; display: none; } .tb-tab-wrap:hover .tb-submenu, .tb-tab-wrap:focus-within .tb-submenu { display: block; } .tb-sub-item { display: block; padding: 7px 14px; font-size: 13px; color: #334155; text-decoration: none; transition: background .12s, color .12s; } .tb-sub-item:hover { background: #f1f5f9; color: #0f172a; } .tb-sub-item.active { background: #e2e8f0; color: #0f172a; font-weight: 600; } .tb-spacer { flex: 1; align-self: stretch; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 10px; color: rgba(255,255,255,.45); font-style: italic; letter-spacing: .04em; transition: color .15s, background .15s; } .tb-spacer::before { content: '‹ hide / show open job ›'; font-size: 9px; } .tb-spacer:hover { color: #fff; background: rgba(255,255,255,.06); } .tb-actions { display: flex; align-items: stretch; border-left: 1px solid rgba(255,255,255,.18); } .tb-act { display: inline-flex; align-items: center; gap: 5px; padding: 0 10px; border: 0; background: transparent; cursor: pointer; color: rgba(255,255,255,.85); font-size: 12px; font-family: inherit; transition: color .12s, background .12s; } .tb-act svg { width: 15px; height: 15px; } .tb-gear { padding: 0 10px; display: inline-flex; align-items: center; color: rgba(255,255,255,.85); } .tb-gear svg { width: 17px; height: 17px; } .tb-gear:hover { color: #fff; background: rgba(255,255,255,.10); } .tb-gear.active { color: #fff; background: rgba(255,255,255,.14); } .tb-act:hover { color: #fff; background: rgba(255,255,255,.10); } .tb-act.tb-refresh { color: #bbf7d0; } .tb-act.tb-refresh:hover { color: #fff; background: rgba(34,197,94,.25); } .tb-act.tb-feedback { position: relative; color: #fef3c7; } .tb-act.tb-feedback:hover { color: #fff; background: rgba(245,158,11,.25); } .tb-act.tb-feedback.active { color: #fff; background: rgba(245,158,11,.30); } .fb-count-badge { position: absolute; top: 2px; right: 2px; background: #f59e0b; color: #1f1300; font-size: 9.5px; font-weight: 800; padding: 1px 5px; border-radius: 10px; min-width: 16px; text-align: center; box-shadow: 0 0 0 1.5px rgba(15,23,42,.85); } /* Legacy chrome shells — left in for back-compat with renderWindow contracts. */ .win-ctrls { display: none; } /* Body */ /* FB 2026-05-02 (103128 + 103307) — bumped from 180px to 220px so rail * labels like "Graphics 39", "Tax Exempt", "All Customers" stop wrapping * and the badge counts have breathing room. */ .body { flex: 1; min-height: 0; display: grid; grid-template-columns: 220px 1fr; transition: grid-template-columns .2s; } .body.rail-collapsed { grid-template-columns: 28px 1fr; } /* List manager */ .list-mgr { position: relative; border-right: 1px solid var(--line); background: var(--bg-alt); overflow-y: auto; overflow-x: hidden; font-size: 12px; box-shadow: inset -4px 0 6px -6px rgba(0,0,0,.18); } .list-mgr .rail-head { display: flex; align-items: center; gap: 6px; padding: 4px 8px; background: var(--bg-alt); border-bottom: 1px solid var(--line); font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-dim); font-weight: 600; position: sticky; top: 0; z-index: 3; } .list-mgr .rail-head .spacer { flex: 1; } /* Column collapse/expand controls */ .col-chev { border: 0; background: transparent; cursor: pointer; width: 20px; height: 20px; border-radius: 3px; display: inline-grid; place-items: center; color: var(--ink-dim); font-size: 12px; } .col-chev:hover { background: var(--brand-soft); color: var(--brand-ink); } .col-stub { display: none; align-items: flex-start; justify-content: center; padding-top: 8px; background: var(--bg-alt); border-right: 1px solid var(--line); cursor: pointer; box-shadow: inset -4px 0 6px -6px rgba(0,0,0,.18); } .col-stub:hover { background: var(--brand-soft); } .col-stub .col-label { writing-mode: vertical-rl; transform: rotate(180deg); margin-top: 8px; font-size: 10px; letter-spacing: .6px; text-transform: uppercase; color: var(--ink-dim); font-weight: 600; } .body.rail-collapsed .list-mgr { display: none; } .body.rail-collapsed .rail-stub { display: flex; flex-direction: column; align-items: center; gap: 6px; } .rail-stub { display: none; } .lm-datefilter { padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--bg-soft); } .lm-datefilter label { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .4px; } .lm-datefilter select { flex: 1; padding: 4px 6px; font-size: 12px; border: 1px solid var(--line); border-radius: 3px; background: var(--bg); color: var(--ink); font-family: inherit; text-transform: none; letter-spacing: 0; } .lm-datefilter select:focus { outline: none; border-color: var(--brand); } .lm-section { border-bottom: 1px solid var(--line); } .lm-section > header { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--brand-soft); font-weight: 600; color: var(--brand-ink); cursor: pointer; user-select: none; } .lm-section > header .chev { transition: transform .15s; color: var(--ink-dim); } .lm-section.collapsed > header .chev { transform: rotate(-90deg); } .lm-section ul { list-style: none; margin: 0; padding: 2px 0 6px; } .lm-section.collapsed ul { display: none; } .lm-section li { padding: 2px 10px 2px 26px; cursor: pointer; color: var(--ink-mid); display: flex; align-items: center; gap: 6px; line-height: 1.6; } .lm-section li:hover { background: var(--brand-soft); color: var(--brand-ink); } .lm-section li.active { background: var(--brand); color: white; } .lm-section li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); opacity: .55; } .lm-section li.active::before { background: white; opacity: 1; } .lm-section li .badge { margin-left: auto; background: rgba(0,0,0,.06); color: var(--ink-dim); border-radius: 10px; padding: 0 6px; font-size: 10px; font-weight: 600; } .lm-section li.active .badge { background: rgba(255,255,255,.25); color: white; } .lm-section li.lm-divider { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-dim); padding: 6px 10px 2px 16px; cursor: default; pointer-events: none; } .lm-section li.lm-divider::before { display: none; } /* FB 2026-05-02 — date-window + action items used to render smaller and indented further so they read as a "sub-list". Now that they're first- class entries in the inline rail (Quotes/History redesign), unify typography + bullet + indent with the status items above them. */ .lm-section li.lm-datewin, .lm-section li.lm-action { /* same as base .lm-section li */ } /* Per-section color coding so at-a-glance the user knows which bucket is which, regardless of the page-level accent mode. Orders stay on the page default (green via --brand). */ .lm-section[data-section="orders"] > header { background: #e6f4ea; color: #1a6a32; } .lm-section[data-section="orders"] li::before { background: #2a8f47; } .lm-section[data-section="orders"] li:hover { background: #e6f4ea; color: #1a6a32; } .lm-section[data-section="orders"] li.active { background: #2a8f47; color: #fff; } .lm-section[data-section="orders"] li.active::before { background: #fff; } .lm-section[data-section="quotes"] > header { background: #dbeafe; color: #1e3a8a; } .lm-section[data-section="quotes"] li::before { background: #2563eb; } .lm-section[data-section="quotes"] li:hover { background: #dbeafe; color: #1e3a8a; } .lm-section[data-section="quotes"] li.active { background: #2563eb; color: #fff; } .lm-section[data-section="quotes"] li.active::before { background: #fff; } .lm-section[data-section="history"] > header { background: #fee2e2; color: #991b1b; } .lm-section[data-section="history"] li::before { background: #dc2626; } .lm-section[data-section="history"] li:hover { background: #fee2e2; color: #991b1b; } .lm-section[data-section="history"] li.active { background: #dc2626; color: #fff; } .lm-section[data-section="history"] li.active::before { background: #fff; } .lm-section[data-section="templates"] > header { background: #ede9fe; color: #6b21a8; } .lm-section[data-section="templates"] li::before { background: #8b5cf6; } .lm-section[data-section="templates"] li:hover { background: #ede9fe; color: #6b21a8; } .lm-section[data-section="templates"] li.active { background: #8b5cf6; color: #fff; } .lm-section[data-section="templates"] li.active::before { background: #fff; } /* Detail pane */ .detail { display: flex; flex-direction: column; min-height: 0; background: var(--bg); overflow: hidden; } .detail-chrome { display: flex; align-items: center; justify-content: space-between; padding: 4px 10px; background: linear-gradient(to bottom, #fff, #f6f8f9); border-bottom: 1px solid var(--line); font-size: 11px; color: var(--ink-dim); } .detail-chrome b { color: var(--ink); } /* summary header */ .job-header { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 4px 12px; background: linear-gradient(to right, var(--brand-soft-2), transparent 60%); border-bottom: 1px solid var(--line); } .job-header .job-title { flex: 1 1 200px; min-width: 0; } .pill { padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 600; letter-spacing: .3px; background: #dcfce7; color: #166534; text-transform: uppercase; } .job-no { font-size: 18px; font-weight: 700; color: var(--ink); letter-spacing: -.5px; } .job-title { font-size: 15px; color: var(--ink); font-weight: 500; } .job-title[data-cell="job-title"] { cursor: text; padding: 2px 6px; border-radius: 4px; } .job-title[data-cell="job-title"]:hover { background: rgba(0,0,0,0.04); } .job-title[data-cell="job-title"] input { outline: none; } /* Quote mode — matches legacy pp2016's blue Quote chrome so the user knows at a glance they're editing a quote, not an order. */ .detail-chrome.mode-quote { background: linear-gradient(to bottom, #dbeafe, #bfdbfe); border-bottom-color: #60a5fa; color: #1e3a8a; } .detail-chrome.mode-quote b { color: #1e3a8a; } .job-header.mode-quote { background: linear-gradient(to right, #dbeafe, transparent 60%); border-bottom-color: #60a5fa; } .job-header.mode-quote .pill { background: #dbeafe; color: #1e40af; } .job-header.mode-quote .job-no { color: #1e3a8a; } /* History mode — red so closed/archived jobs read as look-don't-touch. */ .detail-chrome.mode-history { background: linear-gradient(to bottom, #fee2e2, #fecaca); border-bottom-color: #f87171; color: #991b1b; } .detail-chrome.mode-history b { color: #991b1b; } .job-header.mode-history { background: linear-gradient(to right, #fee2e2, transparent 60%); border-bottom-color: #f87171; } .job-header.mode-history .pill { background: #fee2e2; color: #991b1b; } .job-header.mode-history .job-no { color: #991b1b; } /* Unlock button / chip — sits at the right end of the History job-header. 🔒 button = locked state (edits read-only); 🔓 chip = unlocked (reason shown, tap Re-lock to drop back). Margin-left:auto pushes it to the far right. */ .unlock-btn { margin-left: auto; padding: 4px 10px; font-size: 12px; font-weight: 600; background: #991b1b; color: #fff; border: 1px solid #7f1d1d; border-radius: 6px; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.1); } .unlock-btn:hover { background: #7f1d1d; } .unlock-chip { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; font-size: 12px; font-weight: 600; background: #dcfce7; color: #166534; border: 1px solid #86efac; border-radius: 6px; max-width: 420px; } .unlock-chip .rzn { font-weight: 400; font-style: italic; color: #15803d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; } .relock-btn { padding: 2px 8px; font-size: 11px; font-weight: 600; background: #fff; color: #166534; border: 1px solid #86efac; border-radius: 4px; cursor: pointer; } .relock-btn:hover { background: #f0fdf4; } /* Template mode — purple/lavender so template jobs (JobType=2) stand out. */ .detail-chrome.mode-template { background: linear-gradient(to bottom, #ede9fe, #ddd6fe); border-bottom-color: #a78bfa; color: #6b21a8; } .detail-chrome.mode-template b { color: #6b21a8; } .job-header.mode-template { background: linear-gradient(to right, #ede9fe, transparent 60%); border-bottom-color: #a78bfa; } .job-header.mode-template .pill { background: #ede9fe; color: #6b21a8; } .job-header.mode-template .job-no { color: #6b21a8; } /* Source badges — tiny inline indicators of where a row's data lives. Default 'legacy' state renders nothing (silence on the common case). Tooltip on hover explains each non-legacy state. */ .src-badge { display: inline-block; font-size: 11px; margin-right: 4px; vertical-align: middle; cursor: help; line-height: 1; } .src-modified { color: #b45309; } /* amber — overlay edits on a legacy row */ .src-chester { color: #10b981; } /* green — created in Chester */ .src-migrated { color: #dc2626; filter: saturate(1.2); } /* red — snapshot, legacy edits won't propagate */ /* Slightly bigger when sitting in the open-job header so it's noticeable */ .job-no .src-badge { font-size: 14px; margin-right: 6px; } .status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; background: #fef3c7; color: #92400e; } .status-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #eab308; } .status-badge.s-draft { background: #f1f5f9; color: #475569; } .status-badge.s-draft::before { background: #94a3b8; } .status-badge.s-estimated, .status-badge.s-quoted { background: #dbeafe; color: #1e40af; } .status-badge.s-estimated::before, .status-badge.s-quoted::before { background: #3b82f6; } .status-badge.s-confirmed { background: #dcfce7; color: #166534; } .status-badge.s-confirmed::before { background: #22c55e; } .status-badge.s-in-production { background: #fef3c7; color: #92400e; } .status-badge.s-in-production::before { background: #eab308; } .status-badge.s-ready-to-ship, .status-badge.s-ready-to-post { background: #e0e7ff; color: #3730a3; } .status-badge.s-ready-to-ship::before, .status-badge.s-ready-to-post::before { background: #6366f1; } .status-badge.s-invoiced, .status-badge.s-complete, .status-badge.s-won { background: #d1fae5; color: #065f46; } .status-badge.s-invoiced::before, .status-badge.s-complete::before, .status-badge.s-won::before { background: #10b981; } .status-badge.s-cancelled, .status-badge.s-lost { background: #fee2e2; color: #991b1b; } .status-badge.s-cancelled::before, .status-badge.s-lost::before { background: #ef4444; } /* Inline status dropdown (Orders bucket). Styled like the pill badge so the header stays visually coherent, but with a caret affordance so users know it's editable. Option list inherits native styling — fine for Ver1. */ .status-select { appearance: none; -webkit-appearance: none; padding: 4px 24px 4px 14px; border-radius: 20px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; border: 1px solid rgba(0,0,0,.08); background: #fef3c7 url("data:image/svg+xml;utf8,") no-repeat right 8px center; color: #92400e; cursor: pointer; } .status-select.s-in-production { background-color: #fef3c7; color: #92400e; } .status-select.s-ready-to-ship, .status-select.s-ready-to-post { background-color: #e0e7ff; color: #3730a3; } .status-select.s-on-hold { background-color: #f1f5f9; color: #475569; } .status-select:hover { border-color: rgba(0,0,0,.2); } .status-select:disabled { opacity: .6; cursor: wait; } /* Post button — the terminal action that moves an Order to History. Colored distinctively so it reads as consequential, not just another toolbar btn. */ .post-btn { background: #059669 !important; color: #fff !important; border-color: #047857 !important; font-weight: 600; } .post-btn:hover { background: #047857 !important; } .post-btn:disabled { opacity: .7; cursor: wait; } /* Reorder — History-only action that clones a finished job into a fresh Quote/Order. Distinct color (purple) keeps it out of the way of primary header actions while still reading as a do-thing button. */ .reorder-btn { background: #7c3aed !important; color: #fff !important; border-color: #6d28d9 !important; font-weight: 600; } .reorder-btn:hover { background: #6d28d9 !important; } .reorder-picker { display: flex; gap: 12px; margin: 12px 0; } .reorder-opt { flex: 1; border: 1px solid rgba(0,0,0,.12); border-radius: 8px; padding: 14px; background: #fff; cursor: pointer; text-align: left; transition: border-color .15s, transform .05s; } .reorder-opt:hover { border-color: #7c3aed; transform: translateY(-1px); } .reorder-opt:disabled { opacity: .5; cursor: wait; transform: none; } .reorder-opt.as-quote:hover { border-color: #2563eb; } .reorder-opt.as-order:hover { border-color: #059669; } .reorder-opt .ro-head { font-weight: 600; font-size: 14px; margin-bottom: 4px; } .reorder-opt .ro-sub { color: var(--ink-dim); font-size: 12px; } .reorder-status { min-height: 18px; font-size: 12px; color: var(--ink-dim); margin-top: 6px; } /* Identity picker — first-run "who's at this computer" modal. Used by identity.js to attach a CSR id to writes/locks so other users see who has a job open. */ .ident-dlg { padding: 6px 4px 12px; } .ident-title { font-weight: 600; font-size: 16px; margin-bottom: 4px; } .ident-sub { color: var(--ink-dim); font-size: 12px; margin-bottom: 12px; } .ident-list { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow: auto; border: 1px solid rgba(0,0,0,.08); border-radius: 6px; } .ident-list li { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid rgba(0,0,0,.04); } .ident-list li:hover { background: #eef3ff; } .ident-list li:last-child { border-bottom: none; } .ident-loading, .ident-err { color: var(--ink-dim); font-style: italic; cursor: default !important; } .ident-err { color: #b91c1c; } /* Lock banner — shown in detail header when another user is editing this job. Includes a Take-Over button that steals the lock with confirmation. */ .lock-banner { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 16px; background: #fee2e2; color: #991b1b; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; } .lock-banner.mine { background: #dcfce7; color: #166534; } .lock-banner .takeover { background: transparent; border: 1px solid currentColor; color: inherit; padding: 1px 8px; border-radius: 12px; cursor: pointer; font-weight: 600; font-size: 10px; } .lock-banner .takeover:hover { background: rgba(0,0,0,.08); } body.lock-readonly .items input, body.lock-readonly .items select, body.lock-readonly .meta-cell.clickable, body.lock-readonly .items-toolbar .tb-btn:not(#jd-print-wo):not(#jd-print-inv):not(#jd-email), body.lock-readonly .status-select { pointer-events: none; opacity: .7; } .folder-ico { width: 28px; height: 28px; display: grid; place-items: center; color: var(--warn); } /* meta grid */ .meta-toolbar { display: flex; align-items: center; gap: 4px; padding: 4px 10px; background: var(--bg-alt); border-bottom: 1px solid var(--line); font-size: 11px; color: var(--ink-dim); } .meta-toolbar .sep { flex: 1; } .meta-toolbar button { background: transparent; border: 0; padding: 3px 6px; border-radius: 3px; cursor: pointer; color: var(--ink-mid); display: flex; align-items: center; gap: 4px; } .meta-toolbar button:hover { background: var(--brand-soft); color: var(--brand-ink); } .meta-grid { display: grid; grid-template-columns: 2fr 2fr 1.8fr 1.4fr; gap: 4px; padding: 4px; background: var(--bg-alt); border-bottom: 1px solid var(--line); } /* Toggle bar that lets Ashley collapse the meta-grid (top: BillTo/ShipTo/...) * or foot-grid (bottom: JobTotals/Notes/Memo) on her smaller laptop screen. * When collapsed a one-line summary renders inline so the key facts stay * visible without re-expanding. */ .jd-grid-toggle { display: flex; align-items: center; gap: 6px; padding: 3px 10px; cursor: pointer; user-select: none; background: var(--bg-alt); border-bottom: 1px solid var(--line); font-size: 11px; color: var(--ink-dim); font-weight: 600; letter-spacing: .3px; } .jd-grid-toggle:hover { background: var(--brand-soft-2, #eef2ff); } .jd-grid-toggle .chev { font-size: 10px; width: 10px; display: inline-block; } .jd-grid-toggle .lbl { text-transform: uppercase; } .jd-grid-toggle .jd-grid-summary { color: var(--ink); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 11.5px; } .jd-grid-toggle .jd-grid-summary .sep { color: var(--ink-dim); margin: 0 4px; } .jd-grid-toggle.collapsed { border-top: 1px solid var(--line); } .meta-cell { padding: 4px 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,.03); min-width: 0; } .meta-cell .lbl { font-size: 9px; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-dim); font-weight: 600; margin-bottom: 2px; padding-bottom: 2px; border-bottom: 1px solid var(--line-soft); } .meta-cell .line { line-height: 1.3; font-size: 11.5px; } .meta-cell .line.big { font-weight: 600; color: var(--ink); font-size: 12px; } .meta-cell .link { color: #2563eb; cursor: pointer; } .meta-cell .kv { display: grid; grid-template-columns: 50px 1fr; gap: 1px 6px; font-size: 11px; } .meta-cell .kv .k { color: var(--ink-dim); } .dep-badge { display: inline-block; padding: 1px 5px; border-radius: 3px; background: #f59e0b; color: #fff; font-weight: 700; font-size: 9px; letter-spacing: .3px; vertical-align: 1px; } /* Items table */ .items-section { flex: 1; display: flex; flex-direction: column; min-height: 0; } .items-toolbar { display: flex; align-items: center; gap: 4px; padding: 6px 10px; background: var(--bg-alt); border-bottom: 1px solid var(--line); } .items-toolbar .title { font-weight: 600; color: var(--ink); padding: 0 8px; display: flex; align-items: center; gap: 6px; } .items-toolbar .title::before { content: "▸"; color: var(--brand); } .items-toggle { border: 0; background: transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 4px; font-weight: 600; font-size: 13px; color: var(--ink); } .items-toggle:hover { background: var(--brand-soft); color: var(--brand-ink); } .items-toggle .chev { display: inline-block; color: var(--brand); transition: transform .15s ease; } .items-section.items-collapsed .items-toggle .chev { transform: rotate(-90deg); } .items-section.items-collapsed .items-body { display: none; } .items-section.items-collapsed { flex: 0 0 auto; } .jh-collapse { margin-left: auto; } .tb-btn { border: 0; background: transparent; padding: 2px 8px; border-radius: 3px; cursor: pointer; font-size: 11px; color: var(--ink-mid); display: flex; align-items: center; gap: 4px; line-height: 1.3; } .tb-btn:hover { background: var(--brand-soft); color: var(--brand-ink); } .tb-btn.danger:hover { background: #fee2e2; color: var(--bad); } .tb-spacer { flex: 1; } /* Items body = scrollable table area. Totals / notes sit in .foot-grid below. */ .items-body { flex: 1; min-height: 0; display: flex; flex-direction: column; border-bottom: 1px solid var(--line); } .items-scroll { flex: 1; min-height: 0; overflow: auto; } /* Bottom-of-detail grid: Job Totals · Balance Due · Job Note · Memo to Customer. */ .foot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 8px 10px 10px; background: var(--bg-alt); border-top: 1px solid var(--line); } .rail-cell { background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 8px 12px; box-shadow: 0 1px 2px rgba(0,0,0,.03); } .rail-cell .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-dim); font-weight: 600; margin-bottom: 4px; padding-bottom: 4px; border-bottom: 1px solid var(--line-soft); } .rail-balance { background: linear-gradient(180deg, #fef9c3 0%, #fffbeb 100%); border-color: #facc15; box-shadow: 0 2px 6px rgba(250,204,21,.18); } /* Internal-only card — the 8% Safety Buffer + Profit First forecast. * Distinct slate-tinted look so it visually reads as "internal cockpit data, * never a customer-facing surface". The diagonal hatch + INTERNAL ONLY badge * are the visual hedge against accidental copy/paste into a quote/invoice. */ .rail-internal { background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(185,28,28,.04) 8px 9px), linear-gradient(180deg, #f8fafc 0%, #eef2f6 100%); border-color: #cbd5e1; border-left: 3px solid #b91c1c; } .rail-internal .totals-table td { font-size: 11px; } .rail-internal .totals-table .v { font-variant-numeric: tabular-nums; font-weight: 600; } /* Rollup badge sits next to the parent item's Price. * .ok = parent total matches sum of child services (the desired state). * .warn = mismatch — hint that something needs reprice / hand edit. * .open = parent has 0 price but children exist — pending reprice. */ .rollup-badge { display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 600; line-height: 1; padding: 2px 6px; border-radius: 8px; font-variant-numeric: tabular-nums; cursor: help; vertical-align: middle; } .rollup-badge.ok { background: #dcfce7; color: #166534; border: 1px solid #86efac; } .rollup-badge.warn { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; } .rollup-badge.open { background: #e0e7ff; color: #3730a3; border: 1px solid #a5b4fc; } /* Item Line Price cell states (FB 2026-04-28_154244). * .ok — parent price matches sum of services * .warn — children sum to a value but parent has no override * .forced — parent price was hand-set / overridden, supersedes the sum * .open — no services yet; click to add */ .line-total { display: inline-block; padding: 2px 6px; border-radius: 4px; font-variant-numeric: tabular-nums; font-weight: 600; cursor: pointer; transition: filter .12s; } .line-total:hover { filter: brightness(1.06); } .line-total.ok { background: #dcfce7; color: #166534; } .line-total.warn { background: #fef3c7; color: #92400e; } .line-total.forced { background: #fde68a; color: #78350f; border: 1px dashed #b45309; } .line-total.open { background: #f1f5f9; color: #475569; } table.items tr.grp:hover .rollup-badge { filter: brightness(1.05); } /* Hover a parent row: spotlight its children — services not under the hovered * parent fade. Wired in JS by toggling .rollup-spotlight on the table. */ table.items.rollup-spotlight tr.svc { opacity: .35; transition: opacity .12s; } table.items.rollup-spotlight tr.svc.lit { opacity: 1; background: rgba(250, 204, 21, .12); } table.items.rollup-spotlight tr.grp { opacity: .55; } table.items.rollup-spotlight tr.grp.lit { opacity: 1; background: rgba(250, 204, 21, .18); } /* Drag-to-reorder service rows (FB 2026-04-25_155318) */ table.items tr.svc.drop-above td { box-shadow: inset 0 2px 0 0 #2563eb; } table.items tr.svc.drop-below td { box-shadow: inset 0 -2px 0 0 #2563eb; } table.items tr.svc .svc-grip:hover { color: #2563eb; cursor: grab; } table.items tr.svc:active .svc-grip { cursor: grabbing; } table.items { width: 100%; border-collapse: collapse; font-size: 12.5px; } table.items thead th { background: var(--bg-alt); border-bottom: 1px solid var(--line); padding: 6px 10px; text-align: left; font-size: 11px; font-weight: 600; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; position: sticky; top: 0; z-index: 2; } table.items thead th.num { text-align: right; } table.items td { padding: 5px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: top; } table.items td.num { text-align: right; font-variant-numeric: tabular-nums; } table.items tr:hover > td { background: var(--brand-soft-2); } /* Group/parent row */ tr.grp > td { background: var(--brand-soft); font-weight: 700; color: var(--ink); border-top: 1px solid #c8e6d2; border-bottom: 1px solid #c8e6d2; } tr.grp:hover > td { background: #daecdf; } tr.grp td.desc { display: flex; align-items: center; gap: 8px; } tr.grp .folder { color: var(--warn); display: inline-grid; place-items: center; } tr.grp .dims { color: var(--ink-dim); font-weight: 500; font-size: 11.5px; } /* Service row */ tr.svc td.desc { padding-left: 44px; color: var(--ink-mid); position: relative; } tr.svc td.desc::before { content: ""; position: absolute; left: 22px; top: 0; bottom: 0; border-left: 1px dashed #cfd4dc; } tr.svc td.desc::after { content: ""; position: absolute; left: 22px; top: 12px; width: 14px; border-top: 1px dashed #cfd4dc; } tr.svc .svc-label { color: var(--ink-dim); font-weight: 500; margin-right: 4px; } tr.svc .svc-name { color: var(--ink); } tr.svc .svc-detail { color: var(--ink-dim); font-size: 11.5px; } .nocharge { color: var(--ink-dim); font-style: italic; } .price-col { font-weight: 600; } /* Bottom panels */ .foot-grid { flex: 0 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 6px; padding: 6px; border-top: 1px solid var(--line); background: var(--bg-alt); } /* Combined Job Totals + Balance Due rail-cell (post-2026-04-25 merge). * Top half: editable totals table. Bottom half: yellow Balance Due (still * the click target for capturing payment). The thin divider keeps the two * click regions visually distinct. */ .rail-finance { padding: 0; overflow: hidden; } .rail-finance .rail-finance-top, .rail-finance .rail-finance-bot { padding: 8px 12px; } .rail-finance .rail-finance-bot { background: linear-gradient(180deg, #fef9c3 0%, #fffbeb 100%); border-top: 1px solid #facc15; } .rail-finance .rail-finance-top:hover, .rail-finance .rail-finance-bot:hover { background-color: rgba(250, 204, 21, .08); } /* Top header workflow control — replaces the prior Workflow rail-cell. * Click the colored badge to reveal a small popover of valid transitions. */ .status-wf-slot { position: relative; display: inline-flex; align-items: center; } .status-wf-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border: none; border-radius: 12px; color: #fff; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.15); } .status-wf-badge:hover { filter: brightness(1.08); } .status-wf-chev { font-size: 9px; opacity: .85; } .status-wf-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; min-width: 180px; background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.12); padding: 4px; flex-direction: column; gap: 2px; } /* `display: flex` previously overrode the [hidden] attribute, so the menu * stayed visible above the customer field even when "closed". Scope the * flex display to the not-hidden state (FB 2026-04-26_140805 follow-up). */ .status-wf-menu:not([hidden]) { display: flex; } .status-wf-menu[hidden] { display: none; } .status-wf-opt { display: block; width: 100%; text-align: left; padding: 6px 10px; border: 0; background: transparent; color: #334155; font-size: 12px; font-weight: 600; border-radius: 4px; cursor: pointer; border-left: 3px solid var(--wf-c, #475569); } .status-wf-opt:hover { background: #f1f5f9; color: var(--wf-c, #334155); } .status-wf-empty { padding: 6px 10px; font-size: 11px; color: var(--ink-dim); font-style: italic; } /* Side flag dropdown — sits LEFT of the state badge for in_production / * on_hold / void marks (FB 2026-04-26_140354). Visually quiet so the badge * remains the primary state indicator. position:relative so the side menu * anchors to the flag button rather than stacking on top of the badge menu. */ .status-wf-side { position: relative; display: inline-flex; align-items: center; margin-right: 4px; } .status-wf-flag { display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; border: 1px solid #cbd5e1; border-radius: 12px; background: #f1f5f9; color: #334155; font-size: 11px; font-weight: 600; cursor: pointer; } .status-wf-flag:hover { background: #e2e8f0; border-color: #94a3b8; color: #0f172a; } .status-wf-side > .status-wf-menu.side-menu { top: calc(100% + 6px); left: 0; right: auto; } /* Anchor the badge dropdown to the badge itself, not the slot — otherwise it * stacks underneath the side menu and the two visually overlap. */ .status-wf-main { position: relative; display: inline-flex; align-items: center; } .status-wf-main > .status-wf-menu.badge-menu { top: calc(100% + 6px); left: auto; right: 0; } /* Toolbar Print menu — small dropdown anchored to the 🖨 Print button */ .tb-print-wrap { position: relative; display: inline-block; } .tb-print-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 60; min-width: 200px; background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.12); padding: 4px; display: flex; flex-direction: column; gap: 2px; } .tb-print-menu[hidden] { display: none; } .tb-print-menu button { display: block; width: 100%; text-align: left; padding: 7px 12px; border: 0; background: transparent; color: #334155; font-size: 12.5px; font-weight: 600; border-radius: 4px; cursor: pointer; } .tb-print-menu button:hover { background: #f1f5f9; color: #0f172a; } .foot-cell { padding: 8px 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,.03); min-height: 120px; } .foot-cell .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-dim); font-weight: 600; margin-bottom: 4px; padding-bottom: 4px; border-bottom: 1px solid var(--line-soft); } .rail-cell .note-body { font-size: 12px; line-height: 1.5; color: var(--ink); white-space: pre-wrap; } .totals-table { width: 100%; border-collapse: collapse; font-size: 12.5px; } .totals-table td { padding: 2px 0; } .totals-table td:first-child { color: var(--ink-dim); } .totals-table td.v { text-align: right; font-variant-numeric: tabular-nums; } .totals-table tr.grand td { font-weight: 700; font-size: 14px; padding-top: 4px; border-top: 1px solid var(--line); } .totals-table tr.balance td { color: #c026d3; font-weight: 700; font-size: 14px; } /* Generic list/table (Jobs list, Customers, Services) */ .list-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } .list-head { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--bg-alt); border-bottom: 1px solid var(--line); font-size: 12px; } .list-head .title { font-weight: 600; color: var(--ink); padding: 0 6px; } .list-head .count { color: var(--ink-dim); font-size: 11px; } .list-head input[type="search"] { padding: 4px 8px; border: 1px solid var(--line); border-radius: 4px; font-size: 12px; background: #fff; color: var(--ink); min-width: 220px; } .list-head input[type="search"]:focus { outline: 1px solid var(--brand); border-color: var(--brand); } .list-head .sep { flex: 1; } .list-scroll { flex: 1; overflow: auto; } /* Bulk-select column on the jobs list (FB 2026-04-26_132800) */ table.grid th.bulk-cell, table.grid td.bulk-cell { width: 28px; padding: 0 4px; text-align: center; } table.grid td.bulk-cell input[type="checkbox"] { cursor: pointer; } /* FB Dave 2026-05-01_211328 — denser job rows (less vertical padding so more rows fit on a screen, matching legacy pp2016 row density). */ table.grid { width: 100%; border-collapse: collapse; font-size: 12px; } table.grid thead th { background: var(--bg-alt); border-bottom: 1px solid var(--line); padding: 4px 10px; text-align: left; font-size: 11px; font-weight: 600; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; position: sticky; top: 0; z-index: 2; } table.grid thead th.num { text-align: right; } table.grid tbody tr { cursor: pointer; } table.grid tbody tr:hover > td { background: var(--brand-soft-2); } table.grid tbody tr.active > td { background: var(--brand-soft); } table.grid td { padding: 2px 10px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; line-height: 1.3; } table.grid td.num { text-align: right; font-variant-numeric: tabular-nums; } table.grid td.wrap { white-space: normal; } /* Reconcile table column widths — centralized via so the header markup stays clean (no inline width="..." style="..." per ). */ table.recon-table col.rec-c { width: 34px; } table.recon-table col.rec-r { width: 30px; } table.recon-table col.rec-date { width: 100px; } table.recon-table col.rec-num { width: 70px; } table.recon-table col.rec-wd { width: 110px; } table.recon-table col.rec-dep { width: 110px; } table.recon-table col.rec-bal { width: 130px; } table.recon-table thead th:nth-child(1), table.recon-table thead th:nth-child(2) { text-align: center; } table.recon-table thead th #rec-check-all { margin-top: 1px; } /* Sortable column headers (FB 2026-04-28_154812). Click to sort asc/desc; per-bucket sort persisted to localStorage. Arrow ↕ = inactive (this column could sort but isn't); ▲/▼ = active sort direction. */ table.grid.sortable thead th.sortable { cursor: pointer; transition: background .12s; } table.grid.sortable thead th.sortable:hover { background: var(--brand-soft-2); color: var(--ink); } table.grid.sortable thead th .sort-arrow { display: inline-block; margin-left: 4px; font-size: 10px; opacity: 0.95; font-weight: 700; vertical-align: baseline; } table.grid.sortable thead th .sort-arrow.off { opacity: 0.3; font-weight: 400; } table.grid.sortable thead th .sort-arrow.on { color: var(--brand, #7c3aed); } /* Split panes — list + detail */ .split-2col { display: grid; grid-template-columns: 380px 1fr 0fr; min-height: 0; flex: 1; transition: grid-template-columns .2s; } .split-2col.list-collapsed { grid-template-columns: 28px 1fr 0fr; } /* When the detail pane is minimized, the jobs list grows to take ALL the * freed real estate (FB 2026-04-26_225945: "seeing more Jobs data might be * more important" than the Chester mascot peek). The chester-placeholder * is suppressed in this state so the list can use the whole width. */ .split-2col.detail-collapsed { grid-template-columns: 1fr 28px 0fr; } .split-2col.detail-collapsed > .chester-placeholder { display: none !important; } .split-2col > .left { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: var(--bg); box-shadow: inset -4px 0 6px -6px rgba(0,0,0,.14); } .split-2col > .right { display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: var(--bg); } .split-2col.list-collapsed > .left { display: none; } .split-2col.list-collapsed > .list-stub { display: flex; flex-direction: column; align-items: center; gap: 6px; } .split-2col.detail-collapsed > .right { display: none; } .split-2col.detail-collapsed > .detail-stub { display: flex; flex-direction: column; align-items: center; gap: 6px; } .list-stub, .detail-stub { display: none; } /* Chester empty-state — fills the detail pane when no job is selected, and peeks out of the collapsed-detail stub. */ .chester-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--ink-dim); user-select: none; } .chester-hero { width: 220px; height: 220px; border-radius: 50%; object-fit: cover; background: var(--bg); box-shadow: 0 6px 24px rgba(0,0,0,.10); opacity: .92; animation: chester-fade .5s ease-out; } .chester-empty-msg { font-size: 14px; color: var(--ink-mid); text-align: center; } .chester-stub { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; background: var(--bg); margin-top: 4px; } /* Chester placeholder — fills the huge empty area to the right of the jobs list when the detail pane is collapsed. Clicking it re-opens detail. */ .chester-placeholder { display: none; height: 100%; flex-direction: column; align-items: center; justify-content: center; gap: 24px; background: var(--bg-alt); cursor: pointer; user-select: none; } .split-2col.detail-collapsed > .chester-placeholder { display: flex; } .chester-huge { width: min(60vh, 520px); height: min(60vh, 520px); object-fit: contain; opacity: .95; animation: chester-fade .5s ease-out; transition: transform .2s ease, opacity .2s ease; } .chester-placeholder:hover .chester-huge { transform: scale(1.02); opacity: 1; } .chester-placeholder-msg { font-size: 16px; color: var(--ink-mid); text-align: center; } @keyframes chester-fade { from { opacity: 0; transform: scale(.92); } to { opacity: .92; transform: scale(1); } } /* Loading / empty states */ .pad { padding: 24px; color: var(--ink-dim); font-size: 13px; } .pad.center { text-align: center; } /* Status bar */ .statusbar { display: flex; align-items: center; gap: 16px; padding: 4px 12px; background: var(--brand); color: white; font-size: 11px; } .statusbar .right { margin-left: auto; display: flex; gap: 14px; } .statusbar .right span { cursor: pointer; opacity: .9; } .statusbar .right span:hover { opacity: 1; text-decoration: underline; } /* Coming-soon stubs */ .coming-soon { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; color: var(--ink-dim); gap: 8px; } .coming-soon .big { font-size: 22px; font-weight: 600; color: var(--ink-mid); } .coming-soon .sub { font-size: 13px; } /* Modal overlay */ .modal-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(15, 23, 42, .45); display: flex; align-items: center; justify-content: center; padding: 24px; } .modal { background: #fff; border-radius: 4px; box-shadow: 0 20px 40px rgba(0,0,0,.2); display: flex; flex-direction: column; max-width: 1400px; width: 100%; max-height: 90vh; min-height: 0; overflow: hidden; border: 1px solid var(--brand); } .modal.lg { max-width: 1600px; } .modal.md { max-width: 560px; } .modal.sm { max-width: 420px; } .modal.full { max-width: 100vw; width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; } .modal-backdrop:has(.modal.full) { padding: 0; } .pf-lines.pf-lines-wide { font-size: 12px; } .pf-lines.pf-lines-wide th, .pf-lines.pf-lines-wide td { padding: 4px 6px; } .pf-lines.pf-lines-wide input, .pf-lines.pf-lines-wide select { width: 100%; padding: 3px 4px; font-size: 12px; border: 1px solid var(--line); border-radius: 3px; background: #fff; } .pf-lines.pf-lines-wide td.num input { text-align: right; } .pf-lines.pf-lines-wide .col-sku { width: 110px; } .pf-lines.pf-lines-wide .col-desc { min-width: 220px; } .pf-lines.pf-lines-wide .col-w { width: 70px; } .pf-lines.pf-lines-wide .col-l { width: 70px; } .pf-lines.pf-lines-wide .col-thk { width: 80px; } .pf-lines.pf-lines-wide .col-form { width: 100px; } .pf-lines.pf-lines-wide .col-acct { width: 130px; } .pf-lines.pf-lines-wide .col-eq { width: 130px; } .pf-lines.pf-lines-wide .col-qty { width: 70px; } .pf-lines.pf-lines-wide .col-unit { width: 90px; } .pf-lines.pf-lines-wide .col-amt { width: 100px; } .pf-lines.pf-lines-wide .col-rm { width: 28px; } .modal-head { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--brand-soft); border-bottom: 1px solid var(--line); } .modal-head .title { font-weight: 600; color: var(--brand-ink); font-size: 14px; } .modal-head .sub { color: var(--ink-dim); font-size: 12px; } .modal-head .sep { flex: 1; } .modal-head .x { width: 26px; height: 26px; border-radius: 4px; border: 0; background: transparent; color: var(--ink-mid); cursor: pointer; font-size: 16px; } .modal-head .x:hover { background: rgba(0,0,0,.08); color: var(--bad); } .modal-body { flex: 1; min-height: 0; overflow: auto; } .modal-foot { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-top: 1px solid var(--line); background: var(--bg-alt); } .modal-foot .sep { flex: 1; } .btn { padding: 6px 14px; border: 1px solid var(--line); background: #fff; border-radius: 4px; cursor: pointer; font-size: 12px; color: var(--ink); } .btn:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-ink); } .btn.primary { background: var(--brand); color: white; border-color: var(--brand); } .btn.primary:hover { background: var(--brand-ink); } .btn.ghost { border-color: transparent; } /* Note dialog — matches pp2016's two-pane Job Note / Memo editor. Left rail: Date Stamp / Date + Time / Quick Note variants / Clear / Save / Close. Right: fill-all textarea. Feels hand-filling a paper work-order. */ .note-dialog { display: flex; height: 520px; max-height: 72vh; min-height: 0; } .note-side { width: 180px; background: var(--brand-soft-2); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 0; flex: 0 0 auto; } .note-side .date-head { background: var(--brand); color: #fff; padding: 10px 12px; font-weight: 600; font-size: 13px; text-align: center; letter-spacing: .3px; } .note-side .grp { padding: 6px 0; border-bottom: 1px solid var(--line); } .note-side .grp:last-of-type { border-bottom: 0; } .note-side button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 12px; border: 0; background: transparent; cursor: pointer; font-size: 12px; color: var(--ink); text-align: left; } .note-side button:hover { background: var(--brand-soft); color: var(--brand-ink); } .note-side button.danger:hover { background: #fee2e2; color: var(--bad); } .note-side button .ico { width: 14px; height: 14px; color: var(--ink-mid); flex: 0 0 auto; } .note-side .spacer { flex: 1; } .note-side .save { color: #166534; font-weight: 600; } .note-side .save .ico { color: #16a34a; } .note-side .cancel { color: var(--bad); } .note-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .note-main .hd { padding: 10px 14px; background: var(--bg-alt); border-bottom: 1px solid var(--line); font-weight: 600; font-size: 14px; color: var(--ink); } .note-main textarea { flex: 1; min-height: 0; border: 0; resize: none; padding: 12px 14px; font-family: inherit; font-size: 13px; color: var(--ink); outline: none; line-height: 1.5; } /* Quick Notes picker (stacked child modal) */ .qn-picker { padding: 14px 18px; max-height: 62vh; overflow: auto; } .qn-picker .cat-title { font-weight: 600; font-size: 13px; color: var(--brand-ink); background: var(--brand-soft); padding: 4px 8px; margin-bottom: 8px; } .qn-picker label { display: flex; gap: 8px; align-items: baseline; padding: 3px 6px; cursor: pointer; font-size: 13px; } .qn-picker label:hover { background: var(--brand-soft); color: var(--brand-ink); } .qn-picker label input[type=checkbox] { margin: 0; } /* Clickable footer cells (Job Note, Memo, Totals, Balance) */ .rail-cell.clickable { cursor: pointer; transition: border-color .15s, box-shadow .15s; } .rail-cell.clickable:hover { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft), 0 1px 2px rgba(0,0,0,.04); } .rail-cell .note-body { white-space: pre-wrap; overflow: hidden; text-overflow: ellipsis; max-height: 60px; font-size: 11px; color: var(--ink-mid); line-height: 1.35; } /* Clickable meta cells (Bill To, Ship To, Ordered By, When) */ .meta-cell.clickable { cursor: pointer; transition: border-color .15s, box-shadow .15s; } .meta-cell.clickable:hover { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft), 0 1px 2px rgba(0,0,0,.04); } /* Generic picker dialog (Ordered By, Bill To/Ship To, etc.) */ .pick-dialog { display: flex; flex-direction: column; height: 500px; max-height: 70vh; min-height: 0; } .pick-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--bg-alt); } .pick-head .title { font-weight: 600; } .pick-head .sub { color: var(--ink-dim); font-size: 11px; } .pick-head .sep { flex: 1; } .pick-head .x { background: transparent; border: 0; font-size: 20px; line-height: 1; color: var(--ink-dim); cursor: pointer; padding: 0 4px; } .pick-head .x:hover { color: var(--ink); } .pick-body { display: flex; flex-direction: column; flex: 1; min-height: 0; } .pick-search { border: 0; border-bottom: 1px solid var(--line); padding: 6px 12px; font: inherit; font-size: 12px; background: #fff; outline: none; } .pick-search:focus { background: var(--brand-soft); color: var(--brand-ink); } .pick-list { flex: 1; overflow: auto; padding: 4px 0; } .pick-row { padding: 6px 12px; cursor: pointer; border-bottom: 1px dotted var(--line-soft, #eee); } .pick-row:hover { background: var(--brand-soft); } .pick-row.active { background: var(--brand-soft); border-left: 3px solid var(--brand); padding-left: 9px; } .pick-main { display: flex; align-items: baseline; gap: 8px; font-size: 13px; } .pick-main .nm { font-weight: 600; } .pick-main .role { color: var(--ink-dim); font-size: 11px; } .pick-sub { color: var(--ink-mid); font-size: 11px; margin-top: 1px; } .pick-empty { padding: 20px 12px; color: var(--ink-dim); text-align: center; font-style: italic; } .key-badge { display: inline-block; padding: 0 6px; font-size: 10px; background: var(--brand); color: #fff; border-radius: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; } .pick-foot { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-top: 1px solid var(--line); background: var(--bg-alt); } .pick-foot .sep { flex: 1; } .pick-foot .btn { padding: 4px 12px; border: 1px solid var(--line); border-radius: 3px; background: #fff; cursor: pointer; font: inherit; font-size: 12px; } .pick-foot .btn:hover:not(:disabled) { background: var(--brand-soft); border-color: var(--brand); } .pick-foot .btn:disabled { color: var(--ink-dim); cursor: not-allowed; opacity: .6; } .pick-foot .btn.primary { background: var(--brand); color: #fff; border-color: var(--brand); } .pick-foot .btn.primary:hover:not(:disabled) { filter: brightness(1.08); } /* When dialog — simple form grid between pick-head and pick-foot */ .when-dialog { display: flex; flex-direction: column; min-height: 520px; } .when-body { padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; } .when-body .form-row { grid-template-columns: 90px 1fr; } .when-body input[type="date"], .when-body input[type="text"], .when-body select { border: 1px solid var(--line); border-radius: 3px; padding: 4px 6px; font: inherit; font-size: 12px; color: var(--ink); background: #fff; width: 100%; } .when-body input:disabled, .when-body select:disabled { background: var(--bg-alt); color: var(--ink-dim); cursor: not-allowed; } .w-title-row { display: grid; grid-template-columns: 90px 1fr; gap: 10px; align-items: center; padding-bottom: 6px; border-bottom: 1px solid var(--line); } .w-title-row label { font-size: 11px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .3px; } .w-dates, .w-group { display: flex; flex-direction: column; gap: 4px; padding: 6px 0; border-bottom: 1px solid var(--line); } .w-group:last-child { border-bottom: none; } .w-date-row { display: grid; grid-template-columns: 90px 20px 1fr 90px; gap: 8px; align-items: center; } .w-date-row label { font-size: 11px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .3px; } .w-date-row input[type="checkbox"] { width: auto; margin: 0; justify-self: center; } .w-date-row .w-time { width: 100%; } /* Job Totals dialog — pp2016 parity. Three-column grid: label / input / aux */ .job-totals-dialog { display: flex; flex-direction: column; min-height: 460px; } .jt-body { padding: 14px 20px; overflow: auto; } .jt-grid { display: grid; grid-template-columns: 110px 140px 1fr; gap: 6px 12px; align-items: center; } .jt-grid > label { font-size: 12px; color: var(--ink-dim); } .jt-grid label.jt-strong { color: var(--ink); font-weight: 600; } .jt-grid label.jt-inline-label { text-align: right; padding-right: 4px; } .jt-num { border: 1px solid var(--line); border-radius: 3px; padding: 4px 6px; font: inherit; font-size: 12px; color: var(--ink); background: #fff; text-align: right; width: 100%; } .jt-num:focus { outline: 1px solid var(--brand); border-color: var(--brand); } .jt-num:disabled { background: var(--bg-alt); color: var(--ink-dim); cursor: not-allowed; } .jt-grid select { border: 1px solid var(--line); border-radius: 3px; padding: 3px 6px; font: inherit; font-size: 12px; color: var(--ink); background: #fff; } .jt-grid select:disabled { background: var(--bg-alt); color: var(--ink-dim); cursor: not-allowed; } .jt-ro { text-align: right; padding: 4px 8px; font-size: 12px; color: var(--ink); background: var(--bg-alt); border: 1px solid var(--line); border-radius: 3px; } .jt-ro.jt-strong { font-weight: 700; background: #fff; } .jt-inline { display: flex; align-items: center; gap: 6px; } .jt-pct { max-width: 70px; } .jt-date-row input[type="date"] { border: 1px solid var(--line); border-radius: 3px; padding: 3px 6px; font: inherit; font-size: 12px; color: var(--ink); background: #fff; } .jt-date-row input[type="date"]:disabled { background: var(--bg-alt); color: var(--ink-dim); } .jt-sep { height: 1px; background: var(--line); margin: 14px 0; } /* Balance Due / Deposit dialog — captures a new payment */ .bal-due-dialog { display: flex; flex-direction: column; min-height: 440px; } .bal-body { padding: 14px 20px; overflow: auto; } .bal-grid { display: grid; grid-template-columns: 110px 180px 1fr; gap: 6px 12px; align-items: center; } .bal-grid > label { font-size: 12px; color: var(--ink-dim); } .bal-grid input[type="number"], .bal-grid input[type="text"], .bal-grid input[type="date"] { border: 1px solid var(--line); border-radius: 3px; padding: 4px 6px; font: inherit; font-size: 12px; color: var(--ink); background: #fff; width: 100%; } .bal-grid input[type="number"] { text-align: right; } .bal-grid select { border: 1px solid var(--line); border-radius: 3px; font: inherit; font-size: 12px; color: var(--ink); background: #fff; padding: 2px; width: 100%; } .bal-grid .btn { padding: 3px 8px; font-size: 11px; white-space: nowrap; } .bal-history { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; } .bal-hist-hd { font-size: 11px; text-transform: uppercase; letter-spacing: .3px; color: var(--ink-dim); margin-bottom: 6px; } .bal-hist-list { max-height: 160px; overflow: auto; font-size: 12px; } .bal-hist-row { display: grid; grid-template-columns: 80px 110px 90px 1fr auto; gap: 6px; padding: 4px 6px; border-bottom: 1px solid var(--line); align-items: center; } .bal-hist-row:last-child { border-bottom: 0; } .bal-hist-amt { text-align: right; font-weight: 600; } .bal-hist-ref { color: var(--ink-dim); font-size: 11px; } .bal-hist-row .tag.overlay { background: #fff3e0; color: #b85c00; font-size: 10px; padding: 1px 5px; border-radius: 3px; } /* Specs form */ .specs-grid { display: grid; grid-template-columns: minmax(380px, 420px) 1fr; min-height: 0; height: 100%; } .specs-left, .specs-right { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); } .specs-right { border-right: 0; } .specs-left .hd, .specs-right .hd { padding: 6px 12px; background: var(--bg-alt); border-bottom: 1px solid var(--line); font-size: 11px; text-transform: uppercase; font-weight: 600; color: var(--ink-dim); letter-spacing: .5px; display: flex; align-items: center; gap: 6px; } .specs-left .body { padding: 10px 12px; overflow: auto; } .form-row { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 4px 10px; padding: 3px 0; } .form-row label { color: var(--ink-dim); font-size: 11px; text-transform: uppercase; letter-spacing: .3px; } .form-row input, .form-row select, .form-row textarea { border: 1px solid var(--line); border-radius: 3px; padding: 3px 6px; font: inherit; font-size: 12px; color: var(--ink); background: #fff; width: 100%; } .form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: 1px solid var(--brand); border-color: var(--brand); } .form-row textarea { resize: vertical; min-height: 52px; } .form-row.two { grid-template-columns: 110px 1fr 60px 1fr; } .form-row.two label + input { max-width: 100px; } .form-section { margin: 10px 0 2px; padding: 4px 0 2px; border-top: 1px solid var(--line-soft); font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-dim); font-weight: 600; } /* Services picker (Specs right pane) */ .svc-picker { display: flex; flex-direction: column; min-height: 0; flex: 1; } .svc-picker-head { display: flex; gap: 6px; align-items: center; padding: 6px 12px; border-bottom: 1px solid var(--line); } .svc-picker-head input[type="search"] { flex: 1; padding: 4px 8px; border: 1px solid var(--line); border-radius: 3px; font-size: 12px; } .svc-picker-body { display: grid; grid-template-columns: 180px 1fr; min-height: 0; flex: 1; } .svc-deps { border-right: 1px solid var(--line); background: var(--bg-alt); overflow: auto; font-size: 12px; } .svc-deps .dep { padding: 4px 10px; cursor: pointer; color: var(--ink-mid); border-bottom: 1px solid var(--line-soft); } .svc-deps .dep.active { background: var(--brand); color: white; font-weight: 600; } .svc-deps .dep:hover:not(.active) { background: var(--brand-soft); color: var(--brand-ink); } .svc-deps .dep .cnt { float: right; color: var(--ink-dim); font-size: 11px; } .svc-deps .dep.active .cnt { color: rgba(255,255,255,.8); } .svc-list { overflow: auto; } .svc-list table { width: 100%; border-collapse: collapse; font-size: 12px; } .svc-list td { padding: 3px 10px; border-bottom: 1px solid var(--line-soft); cursor: pointer; } .svc-list tr:hover td { background: var(--brand-soft-2); } .svc-list .cat { color: var(--ink-dim); font-size: 11px; width: 130px; } .svc-list .name { color: var(--ink); } .svc-list .add { width: 30px; text-align: center; color: var(--brand); font-weight: 700; } /* Attached services panel */ .specs-attached { border-top: 1px solid var(--line); background: var(--bg-alt); max-height: 40%; display: flex; flex-direction: column; min-height: 120px; } .specs-attached .hd { justify-content: space-between; } .specs-attached .list { flex: 1; overflow: auto; padding: 4px 0; } .specs-attached table { width: 100%; border-collapse: collapse; font-size: 12px; } .specs-attached td { padding: 3px 10px; border-bottom: 1px solid var(--line-soft); } .specs-attached tr:hover td { background: var(--brand-soft-2); } .specs-attached .rm { text-align: center; color: var(--bad); cursor: pointer; } /* Costs matrix */ .costs-body { padding: 0; overflow: auto; min-height: 300px; } table.costs { width: 100%; border-collapse: collapse; font-size: 12.5px; } table.costs thead th { background: var(--bg-alt); border-bottom: 1px solid var(--line); padding: 8px 10px; text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-dim); font-weight: 600; position: sticky; top: 0; z-index: 2; } table.costs thead th.num { text-align: right; } table.costs td { padding: 4px 10px; border-bottom: 1px solid var(--line-soft); } table.costs td.num { text-align: right; font-variant-numeric: tabular-nums; } table.costs td input.c-edit { width: 80px; text-align: right; font-variant-numeric: tabular-nums; border: 1px solid var(--line); border-radius: 3px; padding: 2px 6px; font: inherit; background: #fff; } table.costs td input.c-edit:focus { outline: 1px solid var(--brand); border-color: var(--brand); } table.costs tr.grp > td { background: var(--brand-soft); font-weight: 700; color: var(--ink); border-top: 1px solid #c8e6d2; border-bottom: 1px solid #c8e6d2; } table.costs tfoot td { background: var(--brand-soft-2); font-weight: 700; border-top: 1px solid var(--line); padding: 6px 10px; } table.costs tfoot td.num { font-size: 13.5px; } table.costs tfoot tr.grand td { font-size: 15px; color: var(--brand-ink); } table.costs tfoot tr.balance td { color: var(--bad); } .costs-toolbar { display: flex; gap: 8px; align-items: center; padding: 6px 12px; border-bottom: 1px solid var(--line); background: var(--bg-alt); } .costs-toolbar .sep { flex: 1; } .costs-toolbar select { border: 1px solid var(--line); border-radius: 3px; padding: 3px 6px; font: inherit; font-size: 12px; background: #fff; } /* ============ SPECS dialog (matches PrintersPlan screenshot) ============ */ .specs-dlg { display: flex; flex-direction: column; min-height: 0; height: 100%; } .specs-dlg .dlg-title { background: linear-gradient(to bottom, #e6f4ea, #d4ebda); border-bottom: 1px solid var(--brand); padding: 6px 12px; font-weight: 600; color: var(--brand-ink); font-size: 13px; display: flex; align-items: center; gap: 8px; } .specs-dlg .dlg-title .x { margin-left: auto; background: transparent; border: 0; cursor: pointer; font-size: 16px; color: var(--ink-mid); } .specs-dlg .dlg-title .x:hover { color: var(--bad); } .specs-dlg .row { display: grid; grid-template-columns: 200px 1fr; min-height: 0; flex: 1; } /* Green section bars */ .pp-bar { background: linear-gradient(to bottom, #4caf50, #2a8f47); color: white; font-weight: 700; letter-spacing: .3px; padding: 4px 10px; font-size: 13px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--brand-ink); } .pp-bar.sub { background: #f5f5f5; color: var(--ink-mid); font-weight: 600; border-bottom: 1px solid var(--line); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; } /* Left narrow rail */ .specs-rail { border-right: 1px solid var(--line); background: #fff; display: flex; flex-direction: column; min-height: 0; } .specs-rail .itm-hdr { background: linear-gradient(to bottom, #4caf50, #2a8f47); color: white; font-weight: 700; font-size: 14px; padding: 4px 10px; } .specs-rail .itm-img { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 14px 10px; border-bottom: 1px solid var(--line); background: #fafbfc; } .specs-rail .itm-img .ph { width: 96px; height: 72px; border: 1px dashed #cbd5e1; display: grid; place-items: center; color: var(--ink-dim); font-size: 11px; text-align: center; padding: 4px; background: #fff; } .specs-rail .itm-img .prod { font-weight: 700; color: var(--ink); } .specs-rail .svc-header { background: linear-gradient(to bottom, #4caf50, #2a8f47); color: white; font-weight: 700; padding: 4px 10px; font-size: 12px; } .specs-rail .add-from { background: #f5f5f5; color: var(--ink-mid); padding: 3px 10px; font-size: 11px; font-style: italic; } .specs-rail .deps { flex: 1; overflow: auto; font-size: 12px; } .specs-rail .dep { display: flex; align-items: center; gap: 8px; padding: 3px 10px; cursor: pointer; color: var(--ink); border-bottom: 1px solid var(--line-soft); } .specs-rail .dep:hover { background: var(--brand-soft); } .specs-rail .dep.active { background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; } .dep-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; display: inline-block; margin-right: 6px; } .cat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; margin-right: 6px; vertical-align: middle; } /* Department dot colors mirror Dave's pp2016 screenshots (2026-04-24). */ .dep-dot.d- { background: #cbd5e1; } .dep-dot.d-graphics { background: #16a34a; } /* green */ .dep-dot.d-paper { background: #eab308; } /* yellow */ .dep-dot.d-prep { background: #0ea5e9; } /* sky/blue */ .dep-dot.d-printing { background: #dc2626; } /* red */ .dep-dot.d-digital { background: #6b7280; } /* gray */ .dep-dot.d-wide-format, .dep-dot.d-widef { background: #ea580c; } /* orange */ .dep-dot.d-vinyl-department, .dep-dot.d-vinyl { background: #ea580c; }/* orange */ .dep-dot.d-sign-shop, .dep-dot.d-sign { background: #06b6d4; } /* cyan */ .dep-dot.d-finishing { background: #06b6d4; } /* cyan */ .dep-dot.d-bindery-finishing, .dep-dot.d-bindery { background: #06b6d4; } .dep-dot.d-mailing { background: #ec4899; } /* pink */ .dep-dot.d-brokered { background: #ec4899; } /* pink */ .dep-dot.d-other, .dep-dot.d-misc { background: #6b7280; } /* gray */ .dep-dot.d-all { background: linear-gradient(45deg, #16a34a 50%, #eab308 50%); } .specs-rail .rail-actions { border-top: 1px solid var(--line); padding: 0; } .specs-rail .rail-btn { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 0; background: transparent; cursor: pointer; width: 100%; text-align: left; color: var(--ink); font-size: 12px; border-bottom: 1px solid var(--line-soft); } .specs-rail .rail-btn:hover { background: var(--brand-soft); color: var(--brand-ink); } .specs-rail .rail-btn.save { color: var(--brand-ink); font-weight: 600; } .specs-rail .rail-btn.close { color: var(--bad); } /* Main specs content */ .specs-main { display: flex; flex-direction: column; min-height: 0; } .specs-main .item-props { border-bottom: 1px solid var(--line); } .prop-grid { display: grid; grid-template-columns: 1fr 320px; } .prop-grid .prop-left { border-right: 1px solid var(--line); } .prop-row { display: grid; grid-template-columns: 120px 1fr; align-items: center; border-bottom: 1px solid var(--line-soft); min-height: 26px; } .prop-row .lbl { padding: 4px 10px; color: var(--ink); border-right: 1px solid var(--line-soft); font-weight: 500; font-size: 12.5px; background: #fafbfc; display: flex; align-items: center; gap: 6px; } .prop-row .val { padding: 3px 8px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-width: 0; } .prop-row .val input, .prop-row .val select { border: 0; background: transparent; font: inherit; font-size: 12.5px; width: 100%; padding: 2px 4px; } .prop-row .val input:focus, .prop-row .val select:focus { outline: 1px solid var(--brand); background: #fff; } .prop-row .val .edit-ico { color: var(--ink-dim); font-size: 11px; cursor: pointer; } .specs-main .svc-list-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; } .specs-main .svc-list-head { background: linear-gradient(to bottom, #4caf50, #2a8f47); color: white; padding: 4px 10px; display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 13px; } .specs-main .svc-list-head .hint { font-weight: 400; font-style: italic; color: rgba(255,255,255,.8); font-size: 11.5px; } .specs-main .svc-list-head .collapse { margin-left: auto; color: white; cursor: pointer; font-size: 14px; } .specs-main .svc-cols { display: grid; grid-template-columns: 18px 28px 180px 1fr 28px; background: #fafbfc; color: var(--ink-dim); font-size: 11px; text-transform: uppercase; letter-spacing: .4px; font-weight: 600; border-bottom: 1px solid var(--line); padding: 4px 0; } .specs-main .svc-cols > div { padding: 0 10px; } .specs-main .svc-rows { flex: 1; overflow: auto; } .specs-main .svc-row { display: grid; grid-template-columns: 18px 28px 180px 1fr 28px; align-items: center; border-bottom: 1px solid var(--line-soft); cursor: pointer; min-height: 24px; transition: background .1s, opacity .15s; } .specs-main .svc-row .svc-drag { color: var(--ink-dim); font-size: 11px; line-height: 1; text-align: center; cursor: grab; user-select: none; opacity: .35; transition: opacity .12s; } .specs-main .svc-row:hover .svc-drag { opacity: .9; } .specs-main .svc-row .svc-drag:active { cursor: grabbing; } .specs-main .svc-row.dragging { opacity: .45; background: var(--brand-soft-2); } .specs-main .svc-row.drag-over { box-shadow: inset 0 -2px 0 0 var(--accent, #2563eb); } .specs-main .svc-row:hover { background: var(--brand-soft-2); } .specs-main .svc-row .edit-ico { color: var(--ink-dim); text-align: center; } .specs-main .svc-row .cat { display: flex; align-items: center; gap: 8px; padding: 2px 10px; font-weight: 600; color: var(--ink); border-right: 1px solid var(--line-soft); } .specs-main .svc-row .detail { padding: 2px 10px; color: var(--ink); } .specs-main .svc-row .detail .bold { font-weight: 600; } .specs-main .svc-row .detail .dim { color: var(--ink-dim); } .specs-main .svc-row .svc-rm { border: 0; background: transparent; cursor: pointer; color: var(--ink-dim); font-size: 13px; padding: 2px 4px; border-radius: 3px; opacity: 0; transition: opacity .12s, color .12s, background .12s; } .specs-main .svc-row:hover .svc-rm { opacity: .65; } .specs-main .svc-row .svc-rm:hover { opacity: 1; color: #b32b2b; background: rgba(179,43,43,.1); } .specs-main .svc-row .svc-rm:disabled { cursor: wait; opacity: .3; } /* Wide inline cost matrix — full-screen Specs dialog (FB 2026-04-26_174805 * option B). Each service row shows all 11 cost cells inline next to * Category + Detail. Per-cell inputs scroll horizontally on narrow viewports * via the wrapping div. Compact 12px font keeps the matrix readable while * fitting ~16 columns on a 1920×1080 monitor. */ .svc-rows-wide-wrap { overflow-x: auto; border: 1px solid var(--line); background: #fff; } table.svc-rows-wide { width: 100%; border-collapse: collapse; font-size: 12px; } table.svc-rows-wide thead th { position: sticky; top: 0; z-index: 1; background: var(--brand-soft); color: var(--brand-ink); padding: 4px 6px; text-align: left; font-weight: 600; border-bottom: 2px solid var(--brand); white-space: nowrap; font-size: 11px; text-transform: uppercase; letter-spacing: .3px; } table.svc-rows-wide thead th.c-num { text-align: right; } table.svc-rows-wide tbody td { padding: 3px 6px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; white-space: nowrap; } table.svc-rows-wide tbody tr:nth-child(even) td { background: var(--bg-stripe, #fafbfc); } table.svc-rows-wide tbody tr.svc-row-wide { cursor: pointer; } table.svc-rows-wide tbody tr.svc-row-wide:hover td { background: var(--brand-soft-2); } table.svc-rows-wide tbody tr.svc-row-wide.dragging { opacity: .4; } table.svc-rows-wide tbody tr.svc-row-wide.drag-over td { box-shadow: inset 0 -2px 0 0 #2563eb; } table.svc-rows-wide td.c-cat { font-weight: 600; } table.svc-rows-wide td.c-cat .svc-name { margin-left: 6px; } table.svc-rows-wide td.c-detail { color: var(--ink-mid); max-width: 220px; min-width: 140px; white-space: normal; word-wrap: break-word; line-height: 1.25; padding: 3px 6px; } table.svc-rows-wide td.c-num { text-align: right; } table.svc-rows-wide td.c-num.readout { color: var(--ink-mid); font-variant-numeric: tabular-nums; } table.svc-rows-wide td.c-num input.ct-inline-input { width: 70px; padding: 2px 4px; border: 1px solid transparent; border-radius: 2px; font-size: 12px; text-align: right; background: transparent; color: var(--ink); font-variant-numeric: tabular-nums; } table.svc-rows-wide td.c-num input.ct-inline-input:hover { border-color: var(--line); } table.svc-rows-wide td.c-num input.ct-inline-input:focus { outline: none; border-color: var(--brand); background: #fff; box-shadow: 0 0 0 2px var(--brand-soft); } table.svc-rows-wide td.c-per { color: var(--ink-dim); font-size: 11px; text-align: center; min-width: 28px; } table.svc-rows-wide td.c-drag { width: 18px; padding: 0 2px; } table.svc-rows-wide td.c-drag .svc-drag { color: var(--ink-dim); font-size: 11px; line-height: 1; cursor: grab; user-select: none; opacity: .35; transition: opacity .12s; } table.svc-rows-wide tbody tr:hover .svc-drag { opacity: .9; } table.svc-rows-wide td.c-imp { width: 28px; padding: 0 2px; text-align: center; } table.svc-rows-wide td.c-imp .svc-imp-btn { border: 1px solid var(--line); background: var(--bg-stripe, #fafbfc); cursor: pointer; color: var(--ink-mid); font-size: 13px; padding: 1px 5px; border-radius: 3px; } table.svc-rows-wide td.c-imp .svc-imp-btn:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-ink); } table.svc-rows-wide td.c-svc-link { width: 28px; padding: 0 2px; text-align: center; } table.svc-rows-wide td.c-svc-link .svc-link-btn { display: inline-block; padding: 1px 5px; border: 1px solid var(--line); border-radius: 3px; background: var(--bg-stripe, #fafbfc); color: var(--ink-mid); font-size: 13px; text-decoration: none; } table.svc-rows-wide td.c-svc-link .svc-link-btn:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-ink); } table.svc-rows-wide td.c-rm { width: 24px; padding: 0 2px; text-align: center; } table.svc-rows-wide td.c-rm .svc-rm { border: 0; background: transparent; cursor: pointer; opacity: 0; color: var(--ink-dim); font-size: 13px; padding: 1px 4px; border-radius: 3px; transition: opacity .12s, color .12s, background .12s; } table.svc-rows-wide tbody tr:hover .svc-rm { opacity: .65; } table.svc-rows-wide td.c-rm .svc-rm:hover { opacity: 1; color: #b32b2b; background: rgba(179,43,43,.1); } /* Σ Totals row at the bottom of the wide cost matrix (FB 2026-04-26_192059) */ table.svc-rows-wide tfoot td { background: var(--brand-soft); border-top: 2px solid var(--brand); padding: 6px 6px; font-variant-numeric: tabular-nums; color: var(--ink); } table.svc-rows-wide tfoot td.c-num { text-align: right; } table.svc-rows-wide tfoot tr.svc-totals { font-weight: 600; } table.svc-rows-wide tfoot select#sp-quick-markup { border: 1px solid var(--line); border-radius: 3px; background: #fff; cursor: pointer; } table.svc-rows-wide tfoot tr.svc-override td { background: #fffbeb; border-top: 1px dashed #f59e0b; padding: 6px 6px; font-weight: 500; } table.svc-rows-wide tfoot tr.svc-override input#sp-item-override { width: 100px; padding: 4px 6px; border: 1px solid #f59e0b; border-radius: 3px; font-size: 13px; font-weight: 700; text-align: right; color: #92400e; background: #fff; font-variant-numeric: tabular-nums; } table.svc-rows-wide tfoot tr.svc-override input#sp-item-override:focus { outline: none; border-color: #d97706; box-shadow: 0 0 0 2px #fef3c7; } /* Inline-edit inputs on the Services detail dialog (FB Dave 2026-04-26) */ input.svc-edit-inline { width: 100px; padding: 3px 6px; border: 1px solid transparent; border-radius: 3px; font: inherit; font-variant-numeric: tabular-nums; background: transparent; color: var(--ink); } input.svc-edit-inline:hover { border-color: var(--line); background: #fff; } input.svc-edit-inline:focus { outline: none; border-color: var(--brand); background: #fff; box-shadow: 0 0 0 2px var(--brand-soft); } /* ============================================================================ * Cut Layout modal — modeled on the pp2016 Large Format + Quick Cutting * Layout dialogs Dave referenced (FB 2026-04-26_192059). Modern look with the * same information density. Two modes: Roll and Sheet (Parent → Run → Finish). * ============================================================================ */ .cl-mode-tabs { display: flex; gap: 0; margin-left: 16px; } .cl-mode-tabs .cl-tab { background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 6px 14px; cursor: pointer; color: var(--ink-mid); font-size: 12px; font-weight: 600; } .cl-mode-tabs .cl-tab:hover { color: var(--ink); } .cl-mode-tabs .cl-tab.active { color: var(--brand-ink); border-bottom-color: var(--brand); background: var(--brand-soft); } .cl-body { padding: 0; overflow: auto; } .cl-svc-header { background: linear-gradient(to bottom, #3b82f6, #1d4ed8); color: #fff; padding: 8px 16px; border-bottom: 1px solid #1e40af; } .cl-svc-header .cl-svc-name { font-weight: 700; font-size: 14px; } .cl-svc-header .cl-svc-meta { display: flex; gap: 18px; margin-top: 4px; font-size: 11px; color: #dbeafe; opacity: .92; } .cl-svc-header .cl-svc-meta .dim { opacity: .55; font-style: italic; } /* FB 2026-05-02_140940 / 141302 — cutlayout modal cleanup. Issues fixed: * - 3-stage row was getting cramped under ~900px (Parent/Run/Finish wrapped weirdly). * - Input column padding ate horizontal room, making fields word-wrap. * - Section headers had inconsistent margins between input + output sides. * - Stat grid sometimes orphaned a single card on its own row. * Approach: tighter padding, more aggressive responsive collapse, denser type. */ .cl-cols { display: grid; grid-template-columns: minmax(340px, 1fr) minmax(340px, 1fr); gap: 0; min-height: 480px; } @media (max-width: 1100px) { .cl-cols { grid-template-columns: 1fr; } } .cl-inputs { padding: 10px 12px; border-right: 1px solid var(--line); background: #f8fafc; overflow: auto; } .cl-output { padding: 10px 14px; overflow: auto; background: #fff; } @media (max-width: 1100px) { .cl-inputs { border-right: 0; border-bottom: 1px solid var(--line); } } .cl-section-h { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--brand-ink); background: var(--brand-soft); padding: 3px 10px; margin: 10px -12px 6px; border-top: 1px solid var(--brand); } .cl-section-h:first-child { margin-top: 0; } .cl-output .cl-section-h { margin: 12px -14px 6px; } .cl-output .cl-section-h:first-child { margin-top: 0; } .cl-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; margin-bottom: 6px; } .cl-inputs label { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--ink-mid); font-weight: 600; min-width: 0; } .cl-inputs label input, .cl-inputs label select { padding: 3px 6px; border: 1px solid var(--line); border-radius: 3px; font-size: 12px; background: #fff; color: var(--ink); font-weight: 400; min-width: 0; } .cl-inputs label input:focus, .cl-inputs label select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); } /* 3-stage Parent → Run → Finish. Below 700px (still inside the modal), * collapse to a single column so each stage gets full width. */ .cl-grid-3-stage { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; } @media (max-width: 700px) { .cl-grid-3-stage { grid-template-columns: 1fr; } } .cl-stage { background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 6px; min-width: 0; } .cl-stage-h { font-size: 11px; font-weight: 700; color: var(--brand-ink); background: var(--brand-soft); margin: -6px -6px 5px; padding: 3px 8px; border-bottom: 1px solid var(--brand); } .cl-stage label { margin-bottom: 4px; } .cl-stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; } .cl-stat { background: var(--brand-soft); border: 1px solid var(--brand); border-radius: 4px; padding: 8px 10px; } .cl-stat.warn { background: #fef3c7; border-color: #f59e0b; } .cl-stat-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: var(--brand-ink); font-weight: 700; } .cl-stat-val { font-size: 18px; font-weight: 700; color: var(--ink); margin: 2px 0; } .cl-stat-hint { font-size: 11px; color: var(--ink-mid); } .cl-err { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; padding: 8px 12px; border-radius: 4px; font-size: 12px; margin: 8px 0; } .cl-svg-wrap svg { background: #fafbfc; border: 1px solid var(--line); border-radius: 4px; } .cl-sheet-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 12px; } .cl-panel { background: #fafbfc; border: 1px solid var(--line); border-radius: 4px; } .cl-panel-h { background: var(--brand-soft); color: var(--brand-ink); padding: 5px 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; border-bottom: 1px solid var(--brand); display: flex; align-items: baseline; gap: 8px; } .cl-panel-meta { font-size: 10px; font-weight: 500; color: var(--ink-mid); text-transform: none; letter-spacing: 0; margin-left: auto; } .cl-panel-svg { padding: 16px; display: flex; justify-content: center; } /* Tray chevron — replaces the old static ✎ pencil. Same width slot. */ .specs-main .svc-row .svc-tray-toggle { border: 0; background: transparent; cursor: pointer; color: var(--ink-dim); font-size: 12px; padding: 0; width: 100%; height: 100%; line-height: 24px; transition: color .12s, background .12s; } .specs-main .svc-row .svc-tray-toggle:hover { color: var(--brand-ink); background: rgba(0,0,0,.04); } /* Inline Cost Detail tray — collapsible per-row drawer with the most commonly edited cost cells. Matches the bulk Costs dialog's field semantics so values stay consistent between the two views. */ .specs-main .svc-tray { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 8px 12px 10px 36px; background: linear-gradient(180deg, #f7f9fb 0%, #fbfcfd 100%); border-bottom: 1px solid var(--line-soft); font-size: 11.5px; } .specs-main .svc-tray .ct-block { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; row-gap: 4px; padding: 4px 14px; border-right: 1px dashed var(--line); min-width: 0; } .specs-main .svc-tray .ct-block:last-child { border-right: 0; } .specs-main .svc-tray .ct-block-label { grid-column: 1 / -1; font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 2px; } .specs-main .svc-tray .ct-cell { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 6px; min-width: 0; } .specs-main .svc-tray .ct-lbl { color: var(--ink-mid); font-size: 11px; } .specs-main .svc-tray .ct-input { width: 100%; min-width: 0; padding: 2px 6px; border: 1px solid var(--line); border-radius: 3px; font-size: 12px; font-family: inherit; text-align: right; background: white; transition: border-color .12s, background .12s; } .specs-main .svc-tray .ct-input:focus { outline: 0; border-color: var(--brand); background: #fffef0; } .specs-main .svc-tray .ct-input[readonly] { background: #f3f5f7; color: var(--ink-dim); cursor: not-allowed; } .specs-main .svc-tray .ct-readout { font-size: 12px; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; padding: 2px 6px; background: #eef1f4; border-radius: 3px; } .specs-main .svc-tray .ct-suffix { color: var(--ink-dim); font-size: 10.5px; min-width: 18px; } .specs-main .svc-tray .ct-cell.muted .ct-input { background: #f3f5f7; } .specs-main .svc-tray .ct-result .ct-readout { font-weight: 600; } .specs-main .svc-tray .ct-status { grid-column: 1 / -1; min-height: 14px; padding-top: 4px; font-size: 11px; color: var(--ink-dim); text-align: right; } .specs-main .svc-tray .ct-status.ok { color: var(--brand-ink); } .specs-main .svc-tray .ct-status.warn { color: #b07a00; } .specs-main .svc-tray .ct-status.err { color: #b32b2b; } .specs-main .item-note { border-top: 1px solid var(--line); background: #fafbfc; padding: 6px 10px; display: grid; grid-template-columns: 100px 1fr; gap: 10px; align-items: start; } .specs-main .item-note label { color: var(--ink); font-weight: 500; font-size: 12.5px; display: flex; align-items: center; gap: 6px; } .specs-main .item-note textarea { border: 1px solid var(--line); border-radius: 3px; padding: 4px 6px; min-height: 40px; resize: vertical; font: inherit; font-size: 12px; background: #fff; } /* ============ COSTS dialog (matches PrintersPlan screenshot) ============ */ .costs-dlg { display: flex; flex-direction: column; min-height: 0; height: 100%; } .costs-dlg .dlg-title { background: linear-gradient(to bottom, #e6f4ea, #d4ebda); border-bottom: 1px solid var(--brand); padding: 6px 12px; font-weight: 600; color: var(--brand-ink); font-size: 13px; display: flex; align-items: center; gap: 8px; } .costs-dlg .dlg-title .x { margin-left: auto; background: transparent; border: 0; cursor: pointer; font-size: 16px; color: var(--ink-mid); } .costs-dlg .dlg-title .x:hover { color: var(--bad); } .costs-dlg .item-banner { padding: 6px 12px; color: #1e40af; font-weight: 700; font-size: 14px; border-bottom: 1px solid var(--line-soft); display: flex; justify-content: space-between; align-items: center; } .costs-dlg .item-banner .icons { display: flex; gap: 8px; color: var(--ink-dim); font-size: 14px; } .costs-dlg .hint { padding: 4px 12px; color: var(--ink-mid); font-size: 11.5px; border-bottom: 1px solid var(--line); background: #fafbfc; } .costs-dlg .hint code { background: rgba(0,0,0,.05); padding: 0 4px; border-radius: 2px; } .costs-dlg .matrix-wrap { flex: 1; overflow: auto; min-height: 280px; } table.cm { width: 100%; border-collapse: collapse; font-size: 12px; } table.cm thead .grp-hdr th { background: linear-gradient(to bottom, #4caf50, #2a8f47); color: white; font-weight: 700; text-align: center; padding: 4px 8px; font-size: 12px; border-right: 1px solid var(--brand-ink); letter-spacing: .3px; } table.cm thead .grp-hdr th:last-child { border-right: 0; } table.cm thead .col-hdr th { background: #f1faf4; color: var(--ink); padding: 4px 8px; font-size: 11px; font-weight: 600; border-bottom: 1px solid var(--brand); border-right: 1px solid var(--line-soft); text-align: center; line-height: 1.2; } table.cm thead .col-hdr th.svc { text-align: left; padding-left: 10px; } table.cm tbody td { padding: 3px 8px; border-bottom: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft); font-variant-numeric: tabular-nums; } table.cm tbody td.svc { text-align: left; font-weight: 500; color: var(--ink); display: flex; align-items: center; gap: 8px; border-right: 2px solid var(--brand); cursor: pointer; } table.cm tbody td.svc:hover { background: var(--brand-soft-2); } table.cm tbody td.num { text-align: right; } table.cm tbody td.ctr { text-align: center; } table.cm tbody td.grp-end { border-right: 2px solid var(--brand); } table.cm tbody td input.cm-edit { width: 100%; border: 0; background: transparent; font: inherit; font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; padding: 1px 2px; } table.cm tbody td input.cm-edit:focus { outline: 1px solid var(--brand); background: #fff9e6; } table.cm tbody tr:hover td { background: var(--brand-soft-2); } table.cm tbody td .plusminus { color: var(--ink-dim); font-size: 11px; margin-left: 4px; cursor: pointer; } table.cm tbody td.ed { background: #fffbea; } table.cm tbody tr.total > td { background: #e6f4ea; font-weight: 700; border-top: 1px solid var(--brand); border-bottom: 1px solid var(--brand); } table.cm tbody tr.margin > td { background: #fafbfc; font-weight: 600; color: var(--ink-mid); } table.cm tbody tr.default > td { background: linear-gradient(to bottom, #4caf50, #2a8f47); color: white; font-weight: 700; border-top: 1px solid var(--brand-ink); } table.cm tbody tr.default > td.svc { border-right: 2px solid var(--brand-ink); } /* Emergency Fund row — internal safety buffer (8% of entire job). Yellow tint signals "internal use only — never on customer docs". */ table.cm tbody tr.emergency > td { background: #fef3c7; color: #78350f; font-weight: 600; border-top: 1px dashed #d97706; } table.cm tbody tr.emergency > td.svc { padding-left: 10px; } /* Profit First Tracker — sits between table and footer, lower-left of dialog. */ .costs-dlg .cd-pf { display: grid; grid-template-columns: 60px 1fr 100px; gap: 2px 8px; margin: 8px 12px 0; padding: 8px 12px; max-width: 360px; background: linear-gradient(to bottom, #ecfdf5, #d1fae5); border: 1px solid #6ee7b7; border-radius: 4px; font-size: 11px; } .costs-dlg .cd-pf-hdr { grid-column: 1 / -1; font-weight: 700; color: #065f46; display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid #6ee7b7; padding-bottom: 3px; margin-bottom: 3px; } .costs-dlg .cd-pf-base { font-weight: 500; color: var(--ink-dim); font-size: 10px; } .costs-dlg .cd-pf-row { display: contents; } .costs-dlg .cd-pf-row .cd-pf-pct { color: var(--ink-mid); text-align: right; font-variant-numeric: tabular-nums; } .costs-dlg .cd-pf-row .cd-pf-lbl { color: var(--ink); } .costs-dlg .cd-pf-row .cd-pf-amt { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; } .costs-dlg .cd-pf-row.cd-pf-sub .cd-pf-pct, .costs-dlg .cd-pf-row.cd-pf-sub .cd-pf-lbl { color: var(--ink-dim); font-style: italic; } .costs-dlg .cd-pf-row.cd-pf-sub .cd-pf-amt { font-weight: 500; color: var(--ink-mid); } .costs-dlg .cd-foot { display: flex; gap: 4px; padding: 6px 10px; border-top: 1px solid var(--line); background: #fafbfc; align-items: center; } .costs-dlg .cd-foot .sep { flex: 1; } .cd-btn { display: flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line); background: #fff; border-radius: 3px; cursor: pointer; font-size: 12px; color: var(--ink); } .cd-btn:hover { background: var(--brand-soft); border-color: var(--brand); } .cd-btn.save { color: var(--brand-ink); font-weight: 600; } .cd-btn.cancel { color: var(--bad); } .cd-btn:disabled { opacity: .5; cursor: not-allowed; } /* ============ Service Specs mini modal (per-service options) ============ */ .ss-dlg { display: flex; flex-direction: column; min-height: 0; } .ss-dlg .ss-title { background: linear-gradient(to bottom, #e2e8f0, #cbd5e1); padding: 4px 10px; font-size: 12px; color: var(--ink); display: flex; align-items: center; gap: 8px; border-bottom: 1px solid #94a3b8; } .ss-dlg .ss-title .x { margin-left: auto; background: transparent; border: 0; cursor: pointer; color: var(--ink-mid); font-size: 15px; } .ss-dlg .ss-body { padding: 0; } .ss-dlg .ss-banner { background: linear-gradient(to bottom, #3b82f6, #1d4ed8); color: white; font-weight: 700; padding: 4px 10px; font-size: 13px; } /* Pull-from-history tree (FB 2026-04-26_132303) */ .pull-job { border-bottom: 1px solid #e5e7eb; } .pull-job:last-child { border-bottom: 0; } .pull-job-hdr { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: #f1f5f9; border-bottom: 1px solid #e2e8f0; font-size: 12px; } .pull-job-hdr .pull-jobno { font-weight: 700; color: #0f172a; } .pull-job-hdr .pull-jobdate { color: #64748b; font-size: 11px; } .pull-job-hdr .pull-jobcust { color: #1e293b; font-weight: 600; flex: 0 1 auto; } .pull-job-hdr .pull-jobtitle { color: #64748b; font-style: italic; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bk { font-size: 10px; padding: 1px 6px; border-radius: 3px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: #fff; } .bk-order { background: #ea580c; } .bk-quote { background: #2563eb; } .bk-tpl { background: #7c3aed; } .bk-hist { background: #475569; } .pull-item { padding: 0; } .pull-item-hdr { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 22px; border-bottom: 1px solid #f1f5f9; font-size: 12px; } .pull-item-hdr .pull-toggle { background: transparent; border: 0; cursor: pointer; color: #64748b; font-size: 11px; padding: 0 4px; min-width: 16px; } .pull-item-hdr .pull-itemdesc { flex: 1; color: #0f172a; font-weight: 500; } .pull-item-hdr .pull-itemqty, .pull-item-hdr .pull-itemsvc { color: #64748b; font-size: 11px; } .pull-item-hdr .pull-itemprice { color: #16a34a; font-weight: 700; min-width: 60px; text-align: right; } .pull-item-hdr .pull-grab { background: #16a34a; color: #fff; border: 0; padding: 2px 8px; border-radius: 3px; cursor: pointer; font-size: 11px; font-weight: 700; } .pull-item-hdr .pull-grab:hover:not(:disabled) { background: #15803d; } .pull-item-hdr .pull-grab:disabled { background: #94a3b8; cursor: wait; } .pull-svc-list { background: #fafbfc; padding: 4px 10px 4px 44px; border-bottom: 1px solid #f1f5f9; } .pull-svc { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #475569; padding: 2px 0; } .pull-svc .pull-svcname { flex: 1; } .pull-svc .pull-svcqty { color: #94a3b8; min-width: 40px; text-align: right; } .pull-svc .pull-svcprice { color: #64748b; min-width: 60px; text-align: right; } .pull-svc-empty { color: #94a3b8; font-size: 11px; font-style: italic; } /* Pull-from-History v2 — pp2016 Add Item(s) to Order parity * (FB 2026-04-26 evening + 2026-04-27 morning) */ .pull2-rail { width: 220px; flex-shrink: 0; background: #fef2f2; border-right: 1px solid #fecaca; padding: 12px 10px; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; } .pull2-rail-h { font-size: 11px; font-weight: 700; color: #991b1b; text-transform: uppercase; letter-spacing: .4px; padding: 4px 6px; } .pull2-rail-list { list-style: none; margin: 0; padding: 0; } .pull2-rail-list li { padding: 6px 10px; cursor: pointer; border-radius: 4px; font-size: 13px; color: #1f2937; margin-bottom: 1px; } .pull2-rail-list li:hover { background: #fee2e2; } .pull2-rail-list li.active { background: #dc2626; color: #fff; font-weight: 600; } .pull2-rail-actions { margin-top: auto; display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid #fecaca; } .pull2-rail-actions .btn { width: 100%; } .pull2-rail-actions #pull2-ok:not([disabled]) { background: #16a34a; color: #fff; border-color: #15803d; font-weight: 700; } .pull2-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .pull2-toolbar { display: flex; gap: 8px; align-items: center; padding: 10px 14px; border-bottom: 1px solid #e5e7eb; background: #fafbfc; } .pull2-tabs { display: flex; gap: 0; border: 1px solid #cbd5e1; border-radius: 4px; overflow: hidden; } .pull2-tab { background: #fff; border: 0; border-right: 1px solid #cbd5e1; padding: 6px 12px; cursor: pointer; font-size: 12px; color: #475569; } .pull2-tab:last-child { border-right: 0; } .pull2-tab:hover { background: #f1f5f9; } .pull2-tab.active { background: #1e40af; color: #fff; } .pull2-results { flex: 1; overflow: auto; padding: 0; } .pull2-results .empty { padding: 24px; text-align: center; color: #94a3b8; font-size: 13px; } table.pull2-flat { width: 100%; border-collapse: collapse; font-size: 12.5px; } table.pull2-flat thead th { position: sticky; top: 0; background: #f1f5f9; border-bottom: 2px solid #cbd5e1; padding: 6px 10px; text-align: left; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .3px; color: #475569; } table.pull2-flat thead th.num { text-align: right; } table.pull2-flat thead th.ck { width: 28px; padding: 6px 4px; } table.pull2-flat tbody td { padding: 5px 10px; border-bottom: 1px solid #f1f5f9; vertical-align: top; } table.pull2-flat tbody td.num { text-align: right; font-variant-numeric: tabular-nums; } table.pull2-flat tbody td.ck { padding: 5px 4px; text-align: center; } table.pull2-flat tbody td.dim { color: #6b7280; font-size: 11.5px; } table.pull2-flat tbody td.ellipsis { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } table.pull2-flat tbody tr:nth-child(even) td { background: #fafbfc; } table.pull2-flat tbody tr:hover td { background: #fef3c7; } .pull2-prod { border-bottom: 1px solid #e5e7eb; } .pull2-prod-h { background: #1e40af; color: #fff; padding: 5px 12px; font-size: 12px; font-weight: 700; } .pull2-prod-h .dim { color: #c7d2fe; font-weight: 400; font-size: 11px; margin-left: 8px; } .pull2-prod table.pull2-flat tbody tr:hover td { background: #eff6ff; } .ss-dlg .ss-section { background: #dbeafe; color: var(--ink); padding: 3px 10px; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .3px; border-top: 1px solid #93c5fd; border-bottom: 1px solid #93c5fd; } .ss-dlg .ss-row { display: grid; grid-template-columns: 110px 1fr; align-items: center; border-bottom: 1px solid var(--line-soft); min-height: 22px; } .ss-dlg .ss-row .lbl { padding: 2px 10px; background: #fafbfc; color: var(--ink-mid); font-size: 11.5px; border-right: 1px solid var(--line-soft); display: flex; align-items: center; gap: 4px; font-style: italic; } .ss-dlg .ss-row .val { padding: 2px 10px; color: var(--ink); font-size: 12px; font-style: italic; } .ss-dlg .ss-row.edit .lbl { font-style: normal; color: var(--ink); font-weight: 500; } .ss-dlg .ss-row.edit .val { font-style: normal; } .ss-dlg .ss-row .val input, .ss-dlg .ss-row .val select { border: 0; background: transparent; font: inherit; font-size: 12px; width: 100%; padding: 1px 2px; } .ss-dlg .ss-row .val input:focus, .ss-dlg .ss-row .val select:focus { outline: 1px solid var(--brand); background: #fff; } .ss-dlg .ss-diagram { padding: 10px; background: #fafbfc; border-top: 1px solid var(--line-soft); display: flex; justify-content: center; } .ss-dlg .ss-foot { display: flex; gap: 8px; justify-content: center; padding: 8px; border-top: 1px solid var(--line); background: #fafbfc; } /* Floating skin-flip toggle (top-right, every page, both skins). */ .skin-flip { position: fixed; top: 10px; right: 14px; z-index: 250; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 18px; background: #0f172a; color: #f1f5f9; border: 1px solid rgba(255,255,255,.08); font-size: 11px; font-weight: 600; letter-spacing: .3px; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.18); font-family: inherit; } .skin-flip:hover { background: #1e293b; } .skin-flip-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 2px rgba(34,197,94,.25); } body.skin-openbooks .skin-flip-dot { background: #0ea5e9; box-shadow: 0 0 0 2px rgba(14,165,233,.25); } .skin-flip-cur { color: #f1f5f9; } .skin-flip-arrow { color: #64748b; font-size: 12px; } .skin-flip-next { color: #94a3b8; font-weight: 500; } /* Floating "Suggest a change" button + modal (bottom-left, every page). */ .fb-btn { position: fixed; left: 14px; bottom: 36px; z-index: 200; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 20px; background: var(--brand); color: #fff; border: 0; cursor: pointer; font-size: 12px; font-weight: 600; letter-spacing: .2px; box-shadow: 0 4px 10px rgba(0,0,0,.15); } .fb-btn:hover { background: var(--brand-ink); } .fb-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; background: rgba(15,23,42,.35); } .fb-modal[hidden] { display: none; } .fb-card { background: #fff; border-radius: 8px; width: min(560px, 92vw); /* FB Dave 2026-05-01_220729 — cap height + let body scroll so the send button isn't pushed below the viewport on smaller monitors. */ max-height: 90vh; box-shadow: 0 20px 40px rgba(0,0,0,.25); overflow: hidden; display: flex; flex-direction: column; } .fb-body { overflow-y: auto; min-height: 0; flex: 1; } .fb-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--brand-soft); border-bottom: 1px solid var(--line); font-weight: 600; color: var(--brand-ink); } .fb-x { background: transparent; border: 0; font-size: 16px; color: var(--ink-dim); cursor: pointer; } .fb-body { padding: 14px; display: flex; flex-direction: column; gap: 10px; } .fb-label { font-size: 12px; color: var(--ink-mid); font-weight: 500; } .fb-body textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px; font-family: inherit; font-size: 13px; resize: vertical; } .fb-body textarea:focus { outline: 1px solid var(--brand); border-color: var(--brand); } .fb-checkline { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-mid); } .fb-preview img { max-width: 100%; border: 1px solid var(--line); border-radius: 4px; } /* Multi-shot thumbnail strip (FB 2026-04-26 — before/after workflow) */ .fb-shots { display: flex; gap: 8px; padding: 8px 4px; margin: 8px 0; background: #f1f5f9; border: 1px solid var(--line); border-radius: 4px; overflow-x: auto; } .fb-thumb { position: relative; flex: 0 0 110px; width: 110px; border: 2px solid transparent; border-radius: 4px; cursor: pointer; background: #fff; transition: border-color .12s; } .fb-thumb.active { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); } .fb-thumb:hover { border-color: var(--brand-ink); } .fb-thumb img { display: block; width: 100%; height: 70px; object-fit: cover; border-radius: 2px; } .fb-thumb .fb-thumb-num { position: absolute; top: 2px; left: 2px; background: rgba(15,23,42,.85); color: #fff; font: 700 10px system-ui; padding: 1px 5px; border-radius: 8px; } .fb-thumb .fb-thumb-del { position: absolute; top: 2px; right: 2px; background: rgba(220,38,38,.85); color: #fff; border: 0; cursor: pointer; padding: 0 5px; border-radius: 8px; font: 700 10px system-ui; } .fb-thumb .fb-thumb-del:hover { background: #b91c1c; } .fb-shotline { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .fb-target-hint { font-size: 11.5px; color: #475569; background: #f1f5f9; border: 1px dashed #cbd5e1; border-radius: 4px; padding: 6px 8px; line-height: 1.4; } .fb-target-hint code { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; color: #0f172a; } .fb-anno-bar { display: flex; align-items: center; gap: 4px; padding: 6px; background: #0f172a; border-radius: 4px 4px 0 0; } .fb-anno-bar .fb-tool, .fb-anno-bar .fb-anno-btn { background: #1e293b; color: #e2e8f0; border: 1px solid #334155; padding: 4px 8px; border-radius: 3px; font-size: 12px; cursor: pointer; } .fb-anno-bar .fb-tool:hover, .fb-anno-bar .fb-anno-btn:hover { background: #334155; } .fb-anno-bar .fb-tool.active { background: #f59e0b; color: #0f172a; border-color: #f59e0b; } .fb-anno-bar .fb-swatch { width: 20px; height: 20px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; } .fb-anno-bar .fb-swatch.active { border-color: #fff; box-shadow: 0 0 0 1px #0f172a; } .fb-anno-sep { width: 1px; height: 18px; background: #334155; margin: 0 4px; } .fb-anno-btn { background: #fff; color: #334155; border: 1px solid #cbd5e1; padding: 5px 10px; border-radius: 3px; font-size: 11.5px; cursor: pointer; font-weight: 600; } .fb-anno-btn:hover { background: #f1f5f9; } .fb-canvas { display: block; max-width: 100%; height: auto; border: 1px solid #0f172a; border-top: 0; border-radius: 0 0 4px 4px; cursor: crosshair; touch-action: none; } .fb-foot { padding: 10px 14px; background: #fafbfc; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 8px; } .fb-status { flex: 1; font-size: 12px; color: var(--ink-dim); } /* ------- New Job wizard (new_job_bc.pdf) ------- Three stacked picker groups on a narrow dialog. Header color re-themes to match the selected Job type (Order=green, Quote=blue, Template=purple). */ .nj-dlg { min-width: 340px; max-width: 420px; background: #fff; border-radius: 6px; overflow: hidden; } .nj-title { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #6b7280; color: #fff; font-weight: 600; } .nj-title .x { margin-left: auto; background: transparent; border: 0; color: #fff; font-size: 16px; cursor: pointer; } .nj-title.nj-type-order { background: #16a34a; } .nj-title.nj-type-quote { background: #2563eb; } .nj-title.nj-type-template { background: #8b5cf6; } .nj-body { padding: 10px 14px; } .nj-step { margin-bottom: 12px; } .nj-step-head { font-weight: 600; color: var(--ink-mid); font-size: 12px; padding: 4px 0; display: flex; align-items: center; gap: 6px; } .nj-num { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; background: #e5e7eb; color: var(--ink-mid); border-radius: 50%; font-size: 11px; font-weight: 700; } .nj-choices { list-style: none; margin: 0; padding: 0 0 0 22px; } .nj-choices li { display: flex; align-items: center; gap: 8px; padding: 4px 8px; cursor: pointer; border-radius: 4px; font-size: 13px; color: var(--ink); } .nj-choices li:hover { background: var(--brand-soft-2); } .nj-choices li.active { background: var(--brand-soft); font-weight: 600; } .nj-choices li.nj-loading, .nj-choices li.nj-err { color: var(--ink-dim); font-style: italic; cursor: default; } .nj-ico { display: inline-block; width: 16px; height: 16px; background: #9ca3af; border-radius: 2px; flex-shrink: 0; } .nj-ico.type-order { background: #16a34a; } .nj-ico.type-quote { background: #2563eb; } .nj-ico.type-template { background: #8b5cf6; } .nj-ico.csr, .nj-ico.cus-find, .nj-ico.cus-regular, .nj-ico.cus-new, .nj-ico.cus-walk { background: transparent; width: auto; height: auto; font-size: 14px; } .nj-foot { padding: 8px 12px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 8px; background: var(--bg-alt); } .nj-foot .sep { flex: 1; } /* ------- Find dialog (find_button.pdf) ------- Four-column layout: scope / field / op / value input + inline results. */ .find-dlg { min-width: 860px; max-width: 960px; background: #fff; border-radius: 6px; overflow: hidden; } .find-title { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #374151; color: #fff; font-weight: 600; } .find-title .x { margin-left: auto; background: transparent; border: 0; color: #fff; font-size: 16px; cursor: pointer; } .find-body { display: grid; grid-template-columns: 1fr 1.3fr 1fr 1.4fr; gap: 0; border-bottom: 1px solid var(--line); } .find-col { border-right: 1px solid var(--line); min-height: 320px; background: #fafbfc; } .find-col:last-child { border-right: 0; } .find-colhead { padding: 6px 10px; background: var(--brand); color: #fff; font-weight: 600; font-size: 12px; letter-spacing: .2px; } .find-list { list-style: none; margin: 0; padding: 4px 0; max-height: 320px; overflow-y: auto; } .find-list li { padding: 3px 10px; cursor: pointer; font-size: 12px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .find-list li:hover { background: var(--brand-soft-2); } .find-list li.active { background: var(--brand); color: #fff; font-weight: 600; } .find-value-col { background: var(--brand-soft-2); } .find-val-body { padding: 12px; display: flex; flex-direction: column; gap: 10px; } .find-val-lbl { font-size: 12px; color: var(--ink-mid); font-weight: 600; } .find-val-input { padding: 6px 8px; border: 1px solid var(--line); border-radius: 4px; font-size: 13px; width: 100%; } .find-val-input:focus { outline: 1px solid var(--brand); border-color: var(--brand); } .find-actions { display: flex; gap: 6px; margin-top: 6px; } .find-status { font-size: 12px; color: var(--ink-dim); min-height: 14px; } .find-results { max-height: 260px; overflow-y: auto; border-top: 1px solid var(--line); } .find-rh { padding: 6px 12px; font-weight: 600; font-size: 12px; background: #f1f5f9; color: var(--ink-mid); } .find-rh-count { color: var(--ink-dim); font-weight: 400; } .find-rbody table { width: 100%; } .find-rbody tr { cursor: pointer; } .find-rbody tr:hover td { background: var(--brand-soft-2); } .find-foot { padding: 8px 12px; background: var(--bg-alt); border-top: 1px solid var(--line); } /* === A/R page === */ .ar-detail { display: flex; flex-direction: column; min-height: 0; } .ar-header { padding: 10px 16px 6px; border-bottom: 1px solid var(--line); background: var(--bg-alt); } .ar-header h2 { margin: 0; font-size: 15px; font-weight: 600; color: var(--brand-ink); } .ar-header h2 .muted { color: var(--ink-dim); font-weight: 400; font-size: 13px; margin-left: 8px; } .ar-header .small { font-size: 12px; margin-top: 2px; } .ar-header .back { color: var(--brand); text-decoration: none; margin-right: 10px; font-weight: 400; font-size: 13px; } .ar-header .back:hover { text-decoration: underline; } .ar-actions { display: flex; align-items: center; gap: 8px; padding: 4px 0 6px; } .ar-actions .btn-bulk { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .ar-body { flex: 1; overflow: auto; padding: 0; } .ar-body .empty { padding: 30px; text-align: center; color: var(--ink-dim); } .ar-body .empty.err { color: #b91c1c; } .ar-table { width: 100%; border-collapse: collapse; font-size: 12px; } .ar-table thead th { position: sticky; top: 0; background: var(--brand-soft); color: var(--brand-ink); padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--line); font-weight: 600; z-index: 1; } .ar-table th.num, .ar-table td.num { text-align: right; } .ar-table th.sortable { cursor: pointer; user-select: none; white-space: nowrap; } .ar-table th.sortable:hover { background: #fde68a; } .ar-table th.sortable .sort-chev { display: inline-block; min-width: 10px; color: #92400e; font-size: 10px; opacity: .9; margin-left: 2px; } .ar-table th.sortable.active { color: #92400e; } .ar-table tbody td { padding: 5px 10px; border-bottom: 1px solid var(--line); } .ar-table tbody tr:nth-child(even) td { background: var(--bg-stripe); } .ar-table tbody tr.clickable { cursor: pointer; } .ar-table tbody tr.clickable:hover td { background: var(--brand-soft); color: var(--brand-ink); } .ar-table td.warn { color: #b91c1c; font-weight: 600; } .ar-table td.ellipsis { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Inline per-row action buttons (FB 2026-04-26_134642) */ .ar-table .row-actions { padding: 2px 4px; } .ar-table .row-act { background: transparent; border: 1px solid #e2e8f0; border-radius: 3px; padding: 1px 4px; margin: 0 1px; cursor: pointer; font-size: 13px; line-height: 1; color: #334155; } .ar-table .row-act:hover { background: #f1f5f9; border-color: #94a3b8; color: #0f172a; } /* Aging row tints — left border bar */ .ar-table tr.age-0 td:first-child { border-left: 3px solid #16a34a; } .ar-table tr.age-1 td:first-child { border-left: 3px solid #ca8a04; } .ar-table tr.age-2 td:first-child { border-left: 3px solid #ea580c; } .ar-table tr.age-3 td:first-child { border-left: 3px solid #dc2626; } .ar-table tr.age-4 td:first-child { border-left: 3px solid #7f1d1d; } /* Pay Now dialog — opened from A/R unpaid rows */ .pay-dlg { display: flex; flex-direction: column; min-height: 0; } .pay-head { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--brand-soft); border-bottom: 1px solid var(--line); } .pay-head .pay-title { font-weight: 600; color: var(--brand-ink); font-size: 14px; flex: 1; } .pay-head .pay-title .muted { display: block; font-weight: 400; font-size: 12px; margin-top: 2px; } .pay-head .pay-x { width: 26px; height: 26px; border-radius: 4px; border: 0; background: transparent; color: var(--ink-mid); cursor: pointer; font-size: 18px; line-height: 1; } .pay-head .pay-x:hover { background: rgba(0,0,0,.08); color: var(--bad); } .pay-body { padding: 14px; overflow: auto; } .pay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .pay-summary { background: var(--bg-alt); border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px; font-size: 12px; } .pay-summary .ps-row { display: flex; justify-content: space-between; padding: 4px 0; } .pay-summary .ps-row + .ps-row { border-top: 1px dashed var(--line); } .pay-summary .ps-row.big { font-weight: 600; font-size: 13px; padding-top: 6px; } .pay-summary .ps-val { color: var(--ink); } .pay-summary .ps-val.num { font-variant-numeric: tabular-nums; } .pay-summary .ps-val.warn { color: #b91c1c; } .pay-form { display: flex; flex-direction: column; gap: 10px; } .pay-form label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--ink-mid); } .pay-form input, .pay-form select { padding: 6px 8px; border: 1px solid var(--line); border-radius: 4px; font-size: 13px; color: var(--ink); background: #fff; } .pay-form input:focus, .pay-form select:focus { outline: none; border-color: var(--brand); } .pay-form input:disabled, .pay-form select:disabled { background: var(--bg-alt); color: var(--ink-dim); } .pay-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; } .pay-msg { font-size: 12px; min-height: 16px; } .pay-msg.ok { color: #15803d; } .pay-msg.err { color: #b91c1c; } .pay-history { margin-top: 16px; } .pay-history h4 { margin: 0 0 6px 0; font-size: 13px; color: var(--brand-ink); } .ar-table.compact thead th { padding: 4px 8px; font-size: 11px; } .ar-table.compact tbody td { padding: 3px 8px; font-size: 11px; } /* Purchases (A/P) entry form ------------------------------------------- */ .modal.wide { max-width: 920px; } .modal-x { width: 26px; height: 26px; border-radius: 4px; border: 0; background: transparent; color: var(--ink-mid); cursor: pointer; font-size: 16px; margin-left: auto; } .modal-x:hover { background: rgba(0,0,0,.08); color: var(--bad); } .modal-head h3 { margin: 0; font-size: 14px; color: var(--brand-ink); font-weight: 600; flex: 1; } .purch-form { padding: 12px 14px; } .pf-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 10px; } .pf-row label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .3px; } .pf-row input, .pf-row select { padding: 5px 7px; border: 1px solid var(--line); border-radius: 3px; font-size: 13px; color: var(--ink); background: #fff; } .pf-row input:focus, .pf-row select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); } .pf-section { margin: 14px 0; border: 1px solid var(--line); border-radius: 4px; } .pf-section-head { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--brand-soft); border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--brand-ink); } .pf-section-head span { flex: 1; } .pf-lines { width: 100%; border-collapse: collapse; } .pf-lines th { background: var(--bg-alt); text-align: left; padding: 5px 8px; font-size: 11px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .3px; border-bottom: 1px solid var(--line); } .pf-lines td { padding: 4px 6px; border-bottom: 1px solid var(--line); } .pf-lines tfoot td { background: var(--bg-alt); font-size: 12px; } .pf-lines th.num, .pf-lines td.num { text-align: right; } .pf-lines input { width: 100%; box-sizing: border-box; padding: 4px 6px; border: 1px solid transparent; background: transparent; font-size: 12px; } .pf-lines input:focus { outline: none; border-color: var(--brand); background: #fff; box-shadow: 0 0 0 2px var(--brand-soft); } .pf-lines input.num { text-align: right; } .pf-lines .pf-rm { width: 22px; height: 22px; border: 0; background: transparent; color: var(--ink-dim); cursor: pointer; border-radius: 3px; } .pf-lines .pf-rm:hover { color: var(--bad); background: rgba(0,0,0,.06); } .pf-notes { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--ink-dim); text-transform: uppercase; } .pf-notes textarea { padding: 6px 8px; border: 1px solid var(--line); border-radius: 3px; font: inherit; font-size: 12px; resize: vertical; } .ar-table tr.s-overdue td { background: rgba(220, 38, 38, 0.06); } .ar-table tr.s-partial td { background: rgba(234, 179, 8, 0.06); } .ar-table tr.s-paid td { color: var(--ink-dim); } /* ---- Services secondary-category chips + tag buttons ---- */ .seccat-bar { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 10px; background: var(--bg-alt); border-bottom: 1px solid var(--line); } .seccat-chip { font: inherit; font-size: 11.5px; line-height: 1; padding: 4px 8px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; } .seccat-chip:hover { background: var(--bg-alt); } .seccat-chip.active { font-weight: 600; } .seccat-chip .n { font-size: 10px; opacity: .75; padding: 1px 5px; border-radius: 8px; background: rgba(0,0,0,.07); } .seccat-chip.active .n { background: rgba(255,255,255,.25); } .tag-cell { padding: 2px 4px; } .seccat-tag { font: inherit; font-size: 10.5px; line-height: 1; cursor: pointer; padding: 3px 7px; border-radius: 10px; border: 1px solid transparent; color: #fff; white-space: nowrap; } .seccat-tag.empty { background: transparent; color: var(--ink-dim); border: 1px dashed var(--line); } .seccat-tag.empty:hover { color: var(--brand); border-color: var(--brand); } .seccat-tag.set:hover { filter: brightness(1.08); } .seccat-pop { position: absolute; z-index: 9999; background: #fff; border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 6px 20px rgba(0,0,0,.18); padding: 4px; min-width: 160px; display: flex; flex-direction: column; gap: 1px; } .seccat-opt { font: inherit; font-size: 12px; text-align: left; cursor: pointer; padding: 5px 8px; border: 0; background: transparent; border-radius: 3px; display: flex; align-items: center; gap: 7px; color: var(--ink); } .seccat-opt:hover { background: var(--bg-alt); } .seccat-opt.selected { background: var(--brand-soft); font-weight: 600; } .seccat-opt .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; } .equip-tag { font: inherit; font-size: 10.5px; line-height: 1; cursor: pointer; padding: 3px 7px; border-radius: 10px; white-space: nowrap; background: #ede9fe; color: #5b21b6; border: 1px solid #c4b5fd; } .equip-tag.empty { background: transparent; color: var(--ink-dim); border: 1px dashed var(--line); } .equip-tag.empty:hover { color: #7c3aed; border-color: #7c3aed; } .equip-tag.set:hover { background: #ddd6fe; } .equip-grp-head { font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-dim); padding: 6px 8px 2px; border-top: 1px solid var(--line); margin-top: 2px; } .equip-grp-head:first-child { border-top: 0; margin-top: 0; } /* ---- Accounting workspace ---------------------------------------------- */ .acct-detail { display: flex; flex-direction: column; min-height: 0; } .acct-daterange { display: flex; align-items: center; gap: 8px; padding: 6px 14px; background: var(--bg); border-bottom: 1px solid var(--line); font-size: 12px; color: var(--ink-dim); } .acct-daterange .dr-label { font-weight: 600; color: var(--ink); margin-right: 4px; } .acct-daterange select, .acct-daterange input[type="date"] { font: inherit; font-size: 12px; padding: 3px 6px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 3px; min-width: 0; } .acct-daterange select { min-width: 130px; } .acct-daterange input[type="date"] { width: 130px; } .acct-daterange .dr-arrow { color: var(--ink-dim); font-weight: 600; } .acct-daterange .dr-readonly .acct-pill { font-size: 11px; } /* Balance-mode reports use only end date — disable from-input UNLESS the * user picked Custom (FB 2026-04-27_142935: previously couldn't type the * start date because pointer-events:none was blanket-applied). */ .acct-daterange[data-mode="balance"]:not([data-preset="custom"]) .dr-from, .acct-daterange[data-mode="balance"]:not([data-preset="custom"]) .dr-arrow { opacity: 0.35; pointer-events: none; } .acct-daterange[data-mode="none"] .dr-from, .acct-daterange[data-mode="none"] .dr-to, .acct-daterange[data-mode="none"] .dr-arrow, .acct-daterange[data-mode="none"] select { opacity: 0.35; pointer-events: none; } .acct-daterange .dr-hint { margin-left: auto; color: var(--ink-dim); font-size: 11px; font-style: italic; } .acct-header { padding: 10px 14px; background: var(--bg); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; } .acct-title { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--ink); } .acct-sub { font-size: 11.5px; color: var(--ink-dim); } .acct-pill { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 10px; border: 1px solid transparent; line-height: 1.5; } .acct-pill.ok { background: #dcfce7; color: #166534; border-color: #86efac; } .acct-pill.warn { background: #fef3c7; color: #92400e; border-color: #fcd34d; } .acct-body { flex: 1; min-height: 0; overflow: auto; padding: 12px 14px; background: var(--bg-alt); } .acct-body .empty { padding: 28px; text-align: center; color: var(--ink-dim); background: var(--bg); border: 1px dashed var(--line); border-radius: 4px; } .acct-body .empty.err { color: var(--bad); border-color: var(--bad); } .acct-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 4px; } @media (max-width: 1280px) { .acct-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 1100px) { .acct-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { .acct-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } } .acct-card { background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; box-shadow: 0 1px 2px rgba(0,0,0,.03); } .acct-card .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-dim); font-weight: 600; } .acct-card .big { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); margin-top: 3px; line-height: 1.15; } .acct-card .sub { font-size: 11px; color: var(--ink-dim); margin-top: 2px; } @media (max-width: 1100px) { .acct-card .big { font-size: 16px; } } /* Accordion sections — used on the loan detail page (and any other acct * subpage that wants collapsible blocks for narrower screens). */ .acct-section { margin-top: 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); } .acct-section + .acct-section { margin-top: 8px; } .acct-sec-head { display: flex; align-items: center; gap: 6px; padding: 6px 10px; cursor: pointer; user-select: none; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-dim); font-weight: 600; background: var(--bg-alt); border-bottom: 1px solid var(--line); } .acct-sec-head:hover { background: var(--brand-soft-2, #eef2ff); } .acct-sec-head .chev { font-size: 10px; color: var(--ink-dim); width: 12px; display: inline-block; } .acct-sec-body { padding: 8px 10px; } .acct-section.collapsed .acct-sec-body { display: none; } .acct-section.collapsed .acct-sec-head { border-bottom: 0; } /* When the cards section is inside an accordion, drop its own bottom margin * so the section padding governs spacing. */ .acct-section .acct-cards { margin-bottom: 0; } .suspect-grp { margin-bottom: 10px; } .suspect-grp .suspect-head { padding: 4px 8px; font-size: 12px; color: var(--ink); background: var(--bg-soft, #f8fafc); margin-bottom: 4px; } .acct-h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-dim); font-weight: 600; margin: 8px 0; } .acct-table { width: 100%; border-collapse: collapse; background: var(--bg); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; font-size: 12.5px; } .acct-table th { background: var(--bg-alt); text-align: left; padding: 7px 10px; font-size: 11px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .3px; border-bottom: 1px solid var(--line); font-weight: 600; } .acct-table th.num, .acct-table td.num { text-align: right; font-variant-numeric: tabular-nums; } .acct-table td { padding: 6px 10px; border-bottom: 1px solid var(--line-soft); } .acct-table.compact td, .acct-table.compact th { padding: 5px 8px; font-size: 12px; } .acct-table tbody tr:hover td { background: var(--brand-soft-2); } .acct-table tr.grp-head td { padding-top: 8px; padding-bottom: 8px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .acct-table tr.grp-head:hover td { background: inherit; } .acct-table code { font-family: "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; font-size: 11.5px; color: var(--brand-ink); background: var(--brand-soft); padding: 1px 5px; border-radius: 3px; } .acct-table .pos { color: #166534; } .acct-table .neg { color: #b91c1c; } .type-pill { font-size: 10.5px; font-weight: 600; padding: 1px 7px; border-radius: 8px; line-height: 1.5; } .src { font-size: 10.5px; padding: 1px 6px; border-radius: 8px; font-variant-numeric: tabular-nums; } .src.src-wh { background: #dbeafe; color: #1e3a8a; } .src.src-mn { background: #fef3c7; color: #92400e; } /* Mode chip in the sidebar bottom */ .acct-mode { padding: 8px; } .mode-chip { font-size: 10.5px; padding: 6px 8px; border-radius: 4px; border: 1px solid var(--line); background: var(--bg); color: var(--ink-dim); line-height: 1.4; } .mode-chip.live { background: #dcfce7; color: #166534; border-color: #86efac; font-weight: 600; } .mode-chip.stub { background: #fef3c7; color: #92400e; border-color: #fcd34d; } /* Period view card */ .acct-period { background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 16px 20px; max-width: 540px; } .acct-period .kv { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line-soft); } .acct-period .kv:last-of-type { border-bottom: 0; } .acct-period .lbl { color: var(--ink-dim); font-size: 11.5px; } .acct-period .val { font-weight: 600; } .acct-period .acct-actions { display: flex; gap: 8px; margin-top: 16px; } /* Coming-soon panel for Reconciliation stub */ .acct-coming { background: var(--bg); border: 1px dashed var(--line); border-radius: 4px; padding: 32px; text-align: center; max-width: 620px; margin: 24px auto; } .acct-coming .big { font-size: 18px; font-weight: 600; color: var(--ink); margin-bottom: 10px; } .acct-coming .sub { font-size: 12.5px; color: var(--ink-dim); line-height: 1.6; } /* JE detail dialog */ .je-dlg { display: flex; flex-direction: column; min-height: 300px; } .je-title { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--brand); color: #fff; font-size: 14px; font-weight: 600; } .je-title .x { margin-left: auto; background: transparent; border: 0; color: #fff; font-size: 16px; cursor: pointer; padding: 4px 8px; } .je-body { padding: 12px 16px; flex: 1; overflow: auto; } .je-meta { display: flex; gap: 24px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-size: 12px; } .je-meta .lbl { color: var(--ink-dim); margin-right: 4px; } .je-memo { font-size: 13px; margin-bottom: 12px; color: var(--ink); } .je-foot { padding: 10px 14px; background: var(--bg-alt); border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; } /* Account Register — GnuCash-style ledger with inline entry row */ .register-table { font-size: 12px; } .register-table tr.reg-hist { cursor: pointer; } .register-table tr.reg-hist:hover td { background: var(--brand-soft-2); } .register-table tr.reg-empty td { text-align: center; color: var(--ink-dim); padding: 24px; font-style: italic; } .register-table tfoot tr.reg-new td { background: #fefce8; border-top: 2px solid #fcd34d; padding: 4px 6px; vertical-align: middle; } .register-table tfoot tr.reg-new td:first-child { border-left: 3px solid #f59e0b; } .register-table tr.reg-editing td { background: #eff6ff; padding: 4px 6px; vertical-align: middle; border-top: 1px solid #93c5fd; border-bottom: 1px solid #93c5fd; } .register-table tr.reg-editing td:first-child { border-left: 3px solid #2563eb; } .register-table input.reg-in { width: 100%; box-sizing: border-box; border: 1px solid var(--line); background: var(--bg); padding: 4px 6px; font-size: 12px; font-family: inherit; border-radius: 3px; color: var(--ink); } .register-table input.reg-in:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); } .register-table input.reg-in.num { text-align: right; font-variant-numeric: tabular-nums; } .register-table input[type="number"].reg-in::-webkit-outer-spin-button, .register-table input[type="number"].reg-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Autocomplete dropdown attached to a positioned */ .reg-ac { position: absolute; top: 100%; left: 6px; right: 6px; z-index: 50; max-height: 240px; overflow-y: auto; background: var(--bg); border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,.12); margin-top: 2px; } .reg-ac-item { padding: 6px 10px; font-size: 12px; cursor: pointer; border-bottom: 1px solid var(--line-soft); color: var(--ink); } .reg-ac-item:last-child { border-bottom: 0; } .reg-ac-item.on, .reg-ac-item:hover { background: var(--brand-soft); } #reg-back:hover { color: var(--brand) !important; text-decoration: underline !important; } /* ---- Reconciliation panel ---- */ .recon-form { border: 1px solid var(--line); border-radius: 6px; background: var(--bg-soft); padding: 12px 14px; margin-bottom: 12px; } .recon-row { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; margin-bottom: 8px; } .recon-row:last-child { margin-bottom: 0; } .recon-row label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-soft); } .recon-row label input[type="date"], .recon-row label input[type="number"], .recon-row label input[type="text"] { border: 1px solid var(--line); background: var(--bg); padding: 4px 6px; font-size: 12px; font-family: inherit; border-radius: 3px; color: var(--ink); } .recon-row label input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); } .recon-row .sep { width: 1px; align-self: stretch; background: var(--line); } .recon-table { width: 100%; } .recon-table th, .recon-table td { font-size: 12px; } .recon-table tr.rec-fuzzy td { color: var(--ink-soft); background: var(--bg-soft); font-style: italic; } .recon-table tr.rec-fuzzy td:first-child { border-left: 3px solid #cbd5e1; } .recon-table tr:not(.rec-fuzzy) td:first-child { border-left: 3px solid transparent; } .recon-table input.rec-check { cursor: pointer; transform: scale(1.1); } .recon-table .rec-date-cell { cursor: pointer; border-bottom: 1px dotted var(--line); } .recon-table .rec-date-cell:hover { background: var(--brand-soft); color: var(--brand); } .recon-foot { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-soft); } .recon-summary { display: grid; gap: 4px; } .rs-line { display: flex; justify-content: space-between; padding: 3px 0; font-size: 12px; } .rs-line.rs-sub { border-top: 1px dashed var(--line-soft); padding-top: 6px; } .rs-line .num { font-variant-numeric: tabular-nums; } .rs-diff { margin-top: 6px; padding: 6px 8px; border-radius: 4px; font-weight: 600; } .rs-diff.ok { background: #dcfce7; color: #166534; border: 1px solid #86efac; } .rs-diff.warn { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; } .rs-line.rs-mismatch { color: #b91c1c; } .rs-line.rs-mismatch .num { font-weight: 600; } .recon-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft); } .recon-actions button[disabled] { opacity: .5; cursor: not-allowed; } /* Service picker rebuild (FB 2026-04-27_131017) — sticky-open multi-select with * a left category rail. Wider modal so the rail + service list both breathe. */ .sp-picker { display: flex; flex-direction: column; min-height: 0; flex: 1; height: 75vh; min-width: 880px; } .sp-body { display: grid; grid-template-columns: 240px 1fr; gap: 0; flex: 1; min-height: 0; } .sp-rail { background: var(--bg-alt); border-right: 1px solid var(--line); overflow: auto; padding: 6px; font-size: 12px; } .sp-rail .sp-dep { margin-bottom: 4px; } .sp-rail .sp-dep-h { display: flex; align-items: center; gap: 4px; padding: 4px 8px; cursor: pointer; color: var(--ink); font-weight: 600; user-select: none; border-radius: 4px; } .sp-rail .sp-dep-h:hover { background: var(--brand-soft-2, #eef2ff); } .sp-rail .sp-dep.open .sp-dep-h { background: #e0e7ff; color: #4338ca; } .sp-rail .sp-dep-h .chev { font-size: 10px; color: var(--ink-dim); width: 12px; } .sp-rail .sp-dep-h .sp-dep-n { margin-left: auto; font-size: 10px; color: var(--ink-dim); font-weight: 500; } .sp-rail .sp-cat-list { list-style: none; margin: 0 0 0 16px; padding: 0; } .sp-rail .sp-cat { display: flex; align-items: center; padding: 3px 8px; cursor: pointer; border-radius: 3px; color: var(--ink-mid); font-size: 11.5px; } .sp-rail .sp-cat:hover { background: rgba(0,0,0,.04); } .sp-rail .sp-cat.active { background: #fef3c7; color: #78350f; font-weight: 600; } .sp-rail .sp-cat .sp-cat-n { margin-left: auto; font-size: 10px; color: var(--ink-dim); } .sp-main { display: flex; flex-direction: column; min-height: 0; } .sp-search { padding: 8px 12px; border-bottom: 1px solid var(--line); } .sp-search input { width: 100%; padding: 6px 10px; font-size: 13px; border: 1px solid var(--line); border-radius: 4px; } .sp-list { flex: 1; overflow: auto; } .sp-list .sp-empty { padding: 32px; text-align: center; color: var(--ink-dim); font-style: italic; } .sp-svc-tbl { width: 100%; border-collapse: collapse; font-size: 12px; } .sp-svc-row { cursor: pointer; } .sp-svc-row:hover { background: var(--brand-soft-2, #eef2ff); } .sp-svc-row.picked { background: #ecfdf5; } .sp-svc-row.picked:hover { background: #d1fae5; } .sp-svc-row td { padding: 5px 8px; border-bottom: 1px solid var(--line-soft); } .sp-svc-row .sp-pick { width: 28px; text-align: center; } .sp-svc-row .sp-svc-cat { color: var(--ink-mid); font-size: 11px; max-width: 140px; } .sp-svc-row .sp-svc-name { color: var(--ink); font-weight: 500; } .sp-foot { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--line); background: var(--bg-alt); } /* Per-cell collapsible foot-grid items (FB 2026-04-27_142200) — each of * Notes / Memo / Job Totals has its own ▾ header click-toggle. */ .foot-grid .rail-cell.collapsible { display: flex; flex-direction: column; } .foot-grid .rail-cell.collapsible > .rail-head { display: flex; align-items: center; gap: 6px; padding: 4px 8px; cursor: pointer; user-select: none; font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-dim); font-weight: 600; background: var(--bg-alt); border-bottom: 1px solid var(--line-soft); } .foot-grid .rail-cell.collapsible > .rail-head:hover { background: var(--brand-soft-2, #eef2ff); } .foot-grid .rail-cell.collapsible > .rail-head .chev { font-size: 10px; width: 10px; } .foot-grid .rail-cell.collapsible > .rail-body { flex: 1; padding: 6px 8px; } .foot-grid .rail-cell.collapsible.collapsed > .rail-body { display: none; } .foot-grid .rail-cell.rail-finance .totals-table { width: 100%; font-size: 11.5px; } .foot-grid .rail-cell.rail-finance .totals-table td { padding: 1px 0; } .foot-grid .rail-cell.rail-finance .totals-table .v { text-align: right; font-variant-numeric: tabular-nums; } .foot-grid .rail-cell.rail-finance .totals-table .grand .v, .foot-grid .rail-cell.rail-finance .totals-table .balance .v { font-weight: 700; font-size: 13px; } .foot-grid .rail-cell.rail-finance .rail-finance-bot { border-top: 1px solid var(--line-soft); margin-top: 4px; padding-top: 4px; }