/* ACE Inventory shared COMPONENT layer. Canonical chrome + component vocabulary for every WebView2 form. Consumes ONLY the variables from aceTheme.css. Injected by BuildShellFromAssets AFTER the theme variables and BEFORE the form's own shell CSS — so a form's file can still override any shared rule. NOTE: never write the literal token braces (COMPONENTS / THEME / SHELL CSS placeholders) in this file — a later replacement pass would expand them and, because form CSS contains comment terminators, corrupt the cascade. */ /* Convergence target (locked 2026-07-08, see forms-convergence-plan): - Header = the TALL 78px .topbar (brand chip + title/subtitle + status + window controls) but with IB's crisp SVG icons, not emoji/text glyphs. - Modal = IB's .modal-overlay/.modal. Buttons = .btn-primary/.ghost/.danger + .tool-btn. Toast = bottom-center. Resize handles = .resize-n .. .resize-se. Form-specific LAYOUT (card wall, workspace panels, drag-drop pools, viewports, hub nav, editor form-grid, dept tiles) stays in each form's own .css. */ /* ---- Global resets ----------------------------------------------------- */ * { box-sizing: border-box; } /* The `hidden` attribute must always win, even over elements that set an explicit display (.modal-overlay, .add-btn, etc.). */ [hidden] { display: none !important; } html, body { margin: 0; height: 100%; width: 100%; overflow: hidden; background: transparent; font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif; color: var(--ink); } button, input, select { font-family: inherit; } /* ---- Diagnostic Mode banner (shared across every form, aceDiagBanner.html) */ /* Fixed height so .shell (position:absolute; inset:0 - see below) can reserve exactly this much space at the top instead of the banner painting over it. */ .ace-diag-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 999999; height: 34px; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 0 16px; font-size: 12px; font-weight: 800; letter-spacing: .03em; background: var(--gold-bg); color: var(--gold-tx); border-bottom: 1px solid var(--gold); } .ace-diag-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex: 0 0 auto; } .ace-diag-banner span:nth-child(2) { flex: 1 1 auto; } .ace-diag-exit { flex: 0 0 auto; border: 1px solid var(--gold); background: transparent; color: var(--gold-tx); border-radius: 999px; padding: 4px 12px; font-size: 11.5px; font-weight: 800; cursor: pointer; } .ace-diag-exit:hover { background: var(--gold-bg); } /* __aceApplyDiagBanner toggles this on so every form's .shell (which fills the whole viewport via inset:0) yields its top 34px to the banner instead of being covered by it. */ body.ace-diag-active .shell { top: 34px; } /* ---- Borderless window frame ------------------------------------------- */ .shell { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--bg); border: 3px solid var(--frame); border-radius: 12px; overflow: hidden; } /* ---- Titlebar: SMALL = canonical CHILD-form header --------------------- */ /* Every form EXCEPT the landing dashboard uses this compact 46px bar. It visually marks the window as a child of the (taller-headed) dashboard. */ .titlebar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; height: 46px; padding: 0 8px 0 14px; background: var(--bg2); border-bottom: 1px solid var(--line); user-select: none; } .brand-mark { width: 22px; height: 22px; flex: 0 0 auto; color: var(--accent); } .brand-name { font-weight: 700; font-size: 15px; letter-spacing: .2px; } .top-right { display: flex; align-items: center; gap: 12px; } /* ---- Titlebar: TALL = PRIMARY (landing dashboard) ONLY ----------------- */ /* The one parent window wears the taller header so it reads as the hub. Do NOT apply .topbar to child forms — use .titlebar above. */ .topbar { flex: 0 0 auto; height: 78px; display: flex; align-items: center; gap: 16px; padding: 0 12px 0 22px; background: linear-gradient(180deg, var(--card2), var(--card)); color: var(--ink); border-bottom: 1px solid var(--line); box-shadow: 0 2px 8px var(--shadow); user-select: none; } .top-icon { width: 42px; height: 42px; flex: 0 0 auto; border: 1px solid var(--line2); border-radius: 12px; background: var(--accent-bg); display: grid; place-items: center; } .top-icon svg { width: 24px; height: 24px; color: var(--accent); } .title { font-size: 18px; font-weight: 800; letter-spacing: .04em; } .subtitle { font-size: 13px; font-weight: 650; color: var(--soft); margin-top: 4px; } .status { margin-left: auto; text-align: right; font-size: 12px; color: var(--soft); } .status b, .status .live { font-weight: 800; color: var(--ink); letter-spacing: .03em; } .status .sub { display: block; color: var(--muted); margin-top: 2px; } /* ---- Drag zone (both headers) ------------------------------------------ */ .dragzone { flex: 1 1 auto; height: 100%; display: flex; align-items: center; gap: 10px; -webkit-app-region: drag; cursor: default; } /* ---- Header pills ------------------------------------------------------ */ /* Generic pill (IB dept context, counts, misc badges). */ .pill { display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid var(--line); background: var(--accent-bg); padding: 3px 9px; font-weight: 750; font-size: 12px; color: var(--soft); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Live-sync pill — child-form (muted) default; the dashboard overrides it to a prominent green pill in its own css. */ .sync-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; } .sync-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--green-bg); } /* ---- App version + staged-update pill (both headers) ------------------- */ .app-version { font-size: 11px; font-weight: 700; color: var(--muted); white-space: nowrap; letter-spacing: .3px; } .update-pill { font-size: 11px; font-weight: 800; color: var(--on-accent, #fff); background: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 4px 11px; cursor: pointer; white-space: nowrap; letter-spacing: .2px; box-shadow: 0 1px 6px rgba(0,0,0,.25); } .update-pill:hover { filter: brightness(1.08); } /* ---- Window controls (both headers) — BORDERLESS SVG icon buttons ------ */ .chrome, .window-controls { display: flex; align-items: center; gap: 2px; } .chrome-btn { width: 34px; height: 30px; display: grid; place-items: center; border: none; background: transparent; color: var(--soft); border-radius: 8px; cursor: pointer; transition: .12s ease; padding: 0; } .chrome-btn svg { width: 17px; height: 17px; } .chrome-btn:hover { background: var(--chrome-hover); color: var(--ink); } .chrome-btn.close:hover { background: var(--close-hover); color: #fff; } /* ---- Footer (canonical status bar; every form) ------------------------- */ /* Left: live-sync "Watching …" message with a green dot. Right: instance id (#footerId — child forms show "ID ", the dashboard shows "name • guid"). */ .footer { flex: 0 0 auto; height: 34px; display: flex; align-items: center; gap: 9px; padding: 0 16px; border-top: 1px solid var(--line); background: var(--card); color: var(--muted); font-size: 12px; font-weight: 650; } .footer .grow, .grow { flex: 1 1 auto; } .footer .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--green); box-shadow: 0 0 0 3px var(--green-bg); } .footer .foot-id { color: var(--faint); font-weight: 650; white-space: nowrap; } /* ---- Chip token -------------------------------------------------------- */ /* The reusable pill-chip. Container bars that hold chips (IB's .dept-bar / .cat-bar nav) are form-specific layout and live in the consuming form's css. */ .chip { font-size: 12.5px; font-weight: 600; color: var(--soft); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; cursor: pointer; transition: .12s ease; white-space: nowrap; } .chip:hover { border-color: var(--accent2); color: var(--ink); } .chip.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); box-shadow: 0 4px 12px var(--accent-bg); } /* ---- Controls row (search / sort / tools) ------------------------------ */ .controls { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); } .search { display: flex; align-items: center; gap: 7px; flex: 1 1 auto; max-width: 420px; background: var(--field); border: 1px solid var(--line); border-radius: 9px; padding: 0 10px; height: 36px; } .search svg { width: 16px; height: 16px; color: var(--faint); flex: 0 0 auto; } .search input { flex: 1 1 auto; border: none; background: transparent; color: var(--ink); font-size: 13.5px; outline: none; height: 100%; } .search .clear { border: none; background: transparent; color: var(--faint); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px; } .search .clear:hover { color: var(--ink); } .sortbox { display: flex; align-items: center; gap: 7px; } .sort-label { font-size: 12px; color: var(--muted); font-weight: 600; } .sortbox select { height: 36px; border: 1px solid var(--line); background: var(--field); color: var(--ink); border-radius: 9px; padding: 0 10px; font-size: 13px; cursor: pointer; outline: none; } .sortbox .dir { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); background: var(--field); color: var(--soft); border-radius: 9px; cursor: pointer; } .sortbox .dir svg { width: 18px; height: 18px; } .sortbox .dir:hover { border-color: var(--accent2); color: var(--ink); } .sortbox .dir[data-dir="desc"] svg { transform: scaleY(-1); } .count { margin-left: auto; font-size: 12px; color: var(--muted); font-weight: 600; white-space: nowrap; } /* ---- Buttons ----------------------------------------------------------- */ .add-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: none; border-radius: 9px; background: var(--accent); color: var(--on-accent); font-size: 12.5px; font-weight: 600; cursor: pointer; } .add-btn svg { width: 16px; height: 16px; } .add-btn:hover { background: var(--accent2); } .tool-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 1px solid var(--line2); border-radius: 9px; background: var(--field); color: var(--soft); font-size: 12.5px; font-weight: 600; cursor: pointer; } .tool-btn svg { width: 16px; height: 16px; } .tool-btn:hover { border-color: var(--accent2); color: var(--ink); } .tool-btn.sm { height: 30px; padding: 0 10px; font-size: 11.5px; } .tool-btn.danger { color: var(--danger-tx); border-color: var(--danger); } .tool-btn.danger:hover { background: var(--danger-bg); border-color: var(--danger); color: var(--danger-tx); } .btn-primary, .btn-ghost, .btn-danger { height: 38px; padding: 0 16px; border-radius: 9px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid transparent; } .btn-primary { background: var(--accent); color: var(--on-accent); } .btn-primary:hover { background: var(--accent2); } .btn-ghost { background: transparent; color: var(--soft); border-color: var(--line2); } .btn-ghost:hover { background: var(--chrome-hover); color: var(--ink); } .btn-danger { background: var(--danger-bg); color: var(--danger-tx); border-color: var(--danger); } .btn-danger:hover { filter: brightness(1.05); } .btn-primary:disabled, .btn-ghost:disabled, .btn-danger:disabled { opacity: .45; cursor: not-allowed; } /* two-click-arm state (delete / move confirmations) */ .btn-ghost.armed, .btn-danger.armed { border-color: var(--gold); color: var(--gold-tx); } /* ---- Modal (canonical: overlay + card) --------------------------------- */ .modal-overlay { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; background: rgba(4, 10, 18, .55); padding: 20px; } .modal { width: min(560px, 100%); max-height: calc(100% - 40px); display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line2); border-radius: 14px; box-shadow: 0 24px 60px var(--shadow); overflow: hidden; } .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: linear-gradient(180deg, var(--card2), var(--card)); border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 800; letter-spacing: .02em; color: var(--ink); } .modal-x { border: none; background: transparent; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; border-radius: 6px; } .modal-x:hover { color: var(--ink); background: var(--chrome-hover); } /* Default modal body is a plain block (confirmation dialogs); add .grid2 for the two-column field layout (item CRUD). */ .modal-body { padding: 16px; overflow: auto; } .modal-body p { margin: 0 0 14px; color: var(--soft); font-weight: 650; } .modal-body.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; } .field { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .field.full { grid-column: 1 / -1; } .field label { font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--muted); } .field input, .field select { height: 36px; border: 1px solid var(--line2); background: var(--field); color: var(--ink); border-radius: 8px; padding: 0 10px; font-size: 13.5px; outline: none; } .field textarea { border: 1px solid var(--line2); background: var(--field); color: var(--ink); border-radius: 8px; padding: 8px 10px; font-size: 13.5px; outline: none; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent2); box-shadow: 0 0 0 2px var(--accent-bg); } .field .hint { font-size: 10.5px; color: var(--faint); } .modal-err { margin: 0 16px; padding: 9px 12px; border-radius: 8px; background: var(--danger-bg); color: var(--danger-tx); border: 1px solid var(--danger); font-size: 12.5px; } .modal-actions { display: flex; align-items: center; gap: 9px; padding: 14px 16px; border-top: 1px solid var(--line); } .modal-actions .spacer { flex: 1; } /* ---- Toast (bottom-center) --------------------------------------------- */ .toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 90; max-width: 70%; padding: 11px 16px; border-radius: 10px; background: var(--card2); color: var(--ink); border: 1px solid var(--line2); box-shadow: 0 16px 40px var(--shadow); font-size: 13px; font-weight: 500; } .toast.error { background: var(--danger-bg); color: var(--danger-tx); border-color: var(--danger); } /* ---- Lightbox (image preview) ------------------------------------------ */ .lightbox { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 32px; background: rgba(4, 10, 18, .82); cursor: zoom-out; } .lightbox img { max-width: 100%; max-height: 100%; border-radius: 10px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); } .lightbox-msg { color: #eef2f7; font-weight: 800; font-size: 14px; text-align: center; background: rgba(0, 0, 0, .4); border: 1px solid rgba(255, 255, 255, .14); padding: 18px 24px; border-radius: 12px; } /* ---- Bulk quantity move dialog (shared by assignment + location) ------- */ /* The rich allocate/stock dialog: banner header, destination row, All Single/ All Max/Clear bulk row, per-item cards with − N + Single Max steppers, and a live "N units queued" footer. Panel is wider than the standard .modal. */ .move-dialog-backdrop { position: fixed; inset: 0; z-index: 90000; display: flex; align-items: center; justify-content: center; background: rgba(4, 10, 18, .55); padding: 20px; } .move-dialog-panel { width: min(980px, calc(100vw - 56px)); max-height: calc(100vh - 58px); display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; border: 1px solid var(--line2); background: var(--card); box-shadow: 0 24px 60px var(--shadow); color: var(--ink); } .move-dialog-header { flex: 0 0 auto; padding: 14px 16px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--card2), var(--card)); } .move-dialog-title-row { display: flex; align-items: center; gap: 12px; min-width: 0; } .move-dialog-title-icon { flex: 0 0 44px; width: 44px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line2); border-radius: 12px; background: var(--accent-bg); color: var(--accent); } .move-dialog-title-icon svg { width: 24px; height: 24px; } .move-dialog-title-text { min-width: 0; } .move-dialog-title { font-size: 15px; font-weight: 800; letter-spacing: .02em; color: var(--ink); } .move-dialog-subtitle { margin-top: 3px; font-size: 12px; font-weight: 650; color: var(--soft); } .move-dialog-body { flex: 1 1 auto; overflow-y: auto; padding: 14px 16px 12px; background: var(--card); } .move-dialog-workspace { display: grid; grid-template-columns: 1fr; gap: 12px; } .move-control-card, .move-items-card { border-radius: 12px; border: 1px solid var(--line); background: var(--card2); padding: 12px; } .move-destination-row { display: flex; align-items: center; gap: 10px; } .move-destination-label { flex: 0 0 auto; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .35px; } .move-destination-fixed { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-size: 12px; font-weight: 800; } .move-destination-select { min-width: 260px; flex: 1 1 auto; height: 34px; border: 1px solid var(--line2); border-radius: 8px; background: var(--field); color: var(--ink); padding: 0 10px; font-weight: 700; outline: none; } .move-destination-select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-bg); } .move-bulk-row { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line2); display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .move-bulk-summary { color: var(--muted); font-size: 11px; font-weight: 750; } .move-bulk-buttons { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .move-items-list { display: grid; grid-template-columns: 1fr; gap: 10px; } .move-item-shell { display: grid; grid-template-columns: minmax(240px, 1fr) 300px; gap: 10px; align-items: stretch; } .move-item-info-card, .move-item-control-card { position: relative; border-radius: 12px; border: 1px solid var(--line); background: var(--inset); min-height: 74px; } .move-item-info-card { overflow: hidden; padding: 10px 12px; } .move-item-info-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--accent); } .move-item-name { color: var(--ink); font-weight: 800; font-size: 13px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 6px; } .move-item-meta { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 6px; } .move-item-pill-row { margin-top: 9px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-left: 6px; } .move-item-pill-left, .move-item-pill-right { display: flex; align-items: center; gap: 6px; min-width: 0; } .move-item-pill-right { margin-left: auto; justify-content: flex-end; } .move-badge-pill { display: inline-flex; align-items: center; justify-content: center; max-width: 180px; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 10px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid var(--line); } .move-badge-pill.stockroom { background: var(--inset); color: var(--ink); } .move-item-control-card { display: flex; align-items: center; justify-content: center; padding: 10px 12px; } .move-qty-controls { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; min-width: 0; } .move-stepper-btn, .move-preset-btn, .move-footer-btn { border: 1px solid var(--line2); border-radius: 8px; background: var(--field); color: var(--ink); font-family: inherit; font-size: 11px; font-weight: 800; cursor: pointer; } .move-stepper-btn { width: 34px; height: 30px; font-size: 18px; line-height: 26px; padding: 0; } .move-preset-btn { height: 28px; min-width: 58px; padding: 0 10px; } .move-stepper-btn:hover, .move-preset-btn:hover, .move-footer-btn:hover { border-color: var(--accent2); background: var(--card); } .move-qty-input { width: 58px; height: 30px; border: 1px solid var(--line2); border-radius: 8px; background: var(--field); color: var(--ink); font-family: inherit; font-size: 13px; font-weight: 800; text-align: center; outline: none; } .move-qty-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-bg); } .move-qty-input::-webkit-outer-spin-button, .move-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .move-dialog-footer { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); background: linear-gradient(180deg, var(--card2), var(--card)); } .move-footer-summary { flex: 1 1 auto; min-width: 0; color: var(--ink); font-size: 11px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .move-footer-btn { height: 32px; padding: 0 12px; } .move-footer-btn.primary { min-width: 150px; background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .move-footer-btn.primary:hover { background: var(--accent2); border-color: var(--accent2); } .move-footer-btn.primary:disabled { opacity: .45; cursor: not-allowed; } .move-dialog-error { margin-top: 10px; min-height: 16px; color: var(--danger-tx); font-size: 11px; font-weight: 800; } /* image manager (edit modal) */ .img-manage { display: flex; align-items: center; gap: 14px; } .img-thumb { width: 96px; height: 96px; flex: 0 0 auto; border: 1px solid var(--line2); border-radius: 10px; background: var(--field); display: grid; place-items: center; overflow: hidden; color: var(--faint); font-size: 11px; } .img-thumb.has { cursor: zoom-in; } .img-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .img-btns { display: flex; flex-direction: column; gap: 8px; } .img-btns .btn-ghost { height: 34px; } /* ---- Reusable light card face ------------------------------------------ */ /* The bare light-on-dark card face (fixed light palette) WITHOUT the inventory alert bar / stat tiles. Used by assignment & location item/target cards. Inventory's richer .card (below) is a separate, fuller treatment. */ .lightcard { background: linear-gradient(160deg, #ffffff, #f3f8fc); border: 1px solid #d3e0ec; border-radius: 10px; color: #11243a; box-shadow: 0 4px 12px rgba(15, 30, 50, .16); transition: border-color .12s ease, box-shadow .12s ease; } .lightcard:hover { border-color: #72b8f8; box-shadow: 0 8px 20px rgba(15, 30, 50, .24); } /* SELECTED = at-a-glance blue: tinted background + solid blue border + ring. Multi-select drag forms (assignment, location) rely on this being obvious. */ .lightcard.selected { border-color: #0f6fc7; background: linear-gradient(160deg, #9cc9f4, #bcdcfb); box-shadow: 0 0 0 2px rgba(20, 124, 224, .55), 0 12px 24px rgba(20, 45, 70, .3); } .lightcard.selected:hover { border-color: #147ce0; } /* ---- Item card face (shared item vocabulary) --------------------------- */ /* The card face uses a FIXED light palette (not theme vars) on purpose: light cards stay light in both modes, contrasting against the dark form background. Card-WALL grid layout stays in each consuming form's own .css. */ .card { display: flex; align-items: center; gap: 11px; padding: 11px 13px; background: linear-gradient(160deg, #ffffff, #f3f8fc); border: 1px solid #d3e0ec; border-left: 6px solid #9fb3c6; border-radius: 10px; color: #11243a; box-shadow: 0 4px 12px rgba(15, 30, 50, .16); transition: border-color .12s ease, box-shadow .12s ease; } .card:hover { border-color: #72b8f8; box-shadow: 0 8px 20px rgba(15, 30, 50, .24); } .card.critical { border-left-color: #d21f34; } .card.warning { border-left-color: #e0850f; } .card.optimal { border-left-color: #2f9e57; } .card.neutral { border-left-color: #9fb3c6; } .thumb { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 9px; display: grid; place-items: center; background: #eef4fa; border: 1px solid #dbe6f0; color: #5a7186; } .thumb svg { width: 18px; height: 18px; } .thumb.photo { background-size: cover; background-position: center; border-color: transparent; } /* Shared item-thumbnail tile (category icon, swapped to photo by uThumbCache). */ .ace-thumb-tile { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 9px; display: grid; place-items: center; border: 1px solid transparent; background-color: #eef4fa; overflow: hidden; } .ace-thumb-tile svg { width: 18px; height: 18px; } .ace-thumb-tile[data-preview] { cursor: pointer; } .ace-thumb-tile.has-thumb { border-color: transparent; } .card.critical .thumb { background: #f9dada; border-color: #f0b6b6; color: #c01f30; } .card.warning .thumb { background: #f9eccf; border-color: #eed3a0; color: #9a5a0e; } .stats { display: flex; gap: 5px; flex: 0 0 auto; } .stat { width: 48px; text-align: center; background: #eef4fa; border: 1px solid #dbe6f0; border-radius: 7px; padding: 4px 2px; } .stat b { display: block; font-size: 14px; font-weight: 700; color: #11243a; line-height: 1.15; } .stat b.na { color: #a7b7c6; font-weight: 500; } .stat i { display: block; font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #6a819a; font-style: normal; margin-top: 1px; } /* Coloured count tiles for a livelier read (alert states override .stock below). */ .stat.stock { background: #e2f5f1; border-color: #b6e6dc; } .stat.stock b { color: #0e7d5f; } .stat.stock i { color: #0e7d5f; } .stat.use { background: #fbeecf; border-color: #f0d79a; } .stat.use b { color: #9a5510; } .stat.use i { color: #9a5510; } .card.critical .stat.stock { background: #fdeaea; border-color: #f2c4c4; } .card.critical .stat.stock b { color: #c01f30; } .card.warning .stat.stock { background: #fdf4e3; border-color: #eed9a8; } .card.warning .stat.stock b { color: #9a5a0e; } .card.optimal .stat.stock { background: #eaf7f0; border-color: #bfe3cd; } .card.optimal .stat.stock b { color: #22794a; } .vd { width: 1px; align-self: stretch; background: #e6eef5; flex: 0 0 auto; margin: 2px 0; } .body { flex: 1 1 auto; min-width: 0; } .nm { font-weight: 700; font-size: 14px; color: #11243a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sub { font-size: 11.5px; color: #5a7186; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; min-height: 14px; } .right { flex: 0 0 auto; display: flex; align-items: center; gap: 9px; } .status-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: #fff; padding: 4px 8px; border-radius: 6px; white-space: nowrap; } .status-chip svg { width: 12px; height: 12px; } .status-chip.crit { background: #e12d42; } .status-chip.warn { background: #e0850f; } /* Unified "has image" indicator (Branden picked option T + picture glyph, 2026-07-08): a soft-blue rounded pill with the picture glyph + "View". Clickable on the cards that open an image preview. Shared by IB, assignment, and location item cards (replaces location's old .media-indicator). */ .img-pill { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 10px; white-space: nowrap; font-size: 10px; font-weight: 700; color: #0c6dc8; background: #e4f3ff; border: 1px solid #b5dcff; border-radius: 999px; cursor: pointer; transition: background .12s ease, border-color .12s ease; } .img-pill svg { width: 13px; height: 13px; } .img-pill:hover { background: #d3ecff; border-color: #8fc8f5; } /* ---- Empty state ------------------------------------------------------- */ .empty { margin: 40px auto; max-width: 380px; text-align: center; color: var(--muted); font-size: 14px; border: 1px dashed var(--line2); border-radius: 12px; padding: 28px; background: var(--card); } /* ---- Resize handles (canonical directional names) ---------------------- */ .resize-handle { position: fixed; z-index: 60; background: transparent; user-select: none; } .resize-n { top: 0; left: 8px; right: 8px; height: 6px; cursor: ns-resize; } .resize-s { bottom: 0; left: 8px; right: 8px; height: 6px; cursor: ns-resize; } .resize-w { left: 0; top: 8px; bottom: 8px; width: 6px; cursor: ew-resize; } .resize-e { right: 0; top: 8px; bottom: 8px; width: 6px; cursor: ew-resize; } .resize-nw { top: 0; left: 0; width: 12px; height: 12px; cursor: nwse-resize; } .resize-ne { top: 0; right: 0; width: 12px; height: 12px; cursor: nesw-resize; } .resize-sw { bottom: 0; left: 0; width: 12px; height: 12px; cursor: nesw-resize; } .resize-se { bottom: 0; right: 0; width: 12px; height: 12px; cursor: nwse-resize; }