/* EternalVault — warm cream ("office paper") theme. Status palette stays the
same so SKU colors mean the same thing across the app; what changes is the
shell (bg/surfaces/text) and the HUD accents. Dark grays are gone; tone is
ivory + soft gold + warm charcoal. */
:root {
/* Text-on-chip ink stays near-black so status pills read the same on
either theme (mostly used inside yellow/green/etc. backgrounds). */
--ev-ink: #0a0e17;
/* Status colors — slightly darker on this theme so they hold contrast
against cream backgrounds. */
--ev-status-active: #1e9e57;
--ev-status-consigned: #c9a100;
--ev-status-sold: #9333ea;
--ev-status-repair: #d97706;
--ev-status-returned: #c4342b;
--ev-location: #1e87a3;
/* Per-city accents — desktop parity; tuned for white surfaces. */
--ev-loc-dal: #0d7dd8;
--ev-loc-asp: #169b5e;
--ev-loc-pb: #a920bf;
--ev-shopify-sync: #5e8f2b;
--ev-consignment-settled: #b38a16;
/* Shell — warm cream canvas, paper-white floating surfaces */
--ev-bg: #f6f1e4; /* cream paper */
--ev-text: #1f1b14; /* warm near-black */
--ev-text-muted: #6b6456; /* warm gray */
--ev-surface: #ffffff; /* card/modal face */
--ev-surface-2: #fffdf8; /* elevated cream */
--ev-surface-header: #efe8d5; /* warm taupe header strip */
--ev-radius-sm: 8px;
--ev-radius-md: 12px;
--ev-radius-lg: 18px;
--ev-shadow-soft: 0 18px 50px rgba(80, 60, 20, 0.10);
--ev-shadow-lift: 0 26px 70px rgba(80, 60, 20, 0.16);
--ev-transition-lift: 220ms cubic-bezier(0.22, 1, 0.36, 1);
/* HUD — soft gold on cream (cyan still used for tiny hints) */
--ev-hud-cyan: #0e7e99;
--ev-hud-cyan-dim: rgba(14, 126, 153, 0.08);
--ev-hud-edge: rgba(31, 27, 20, 0.14);
--ev-hud-gold-dim: rgba(212, 175, 55, 0.14);
--ev-hud-glass-border: rgba(31, 27, 20, 0.10);
--ev-hud-sheen: rgba(212, 175, 55, 0.18);
/* Mouse-reactive sheen (set by JS on float surfaces) */
--ev-sheen-x: 50%;
--ev-sheen-y: 22%;
}
html {
background: var(--ev-bg);
}
body {
/* Subtle warm gradient so the canvas feels like paper, not a flat color.
Top is a whisper lighter, bottom settles into cream — gives the app
the same "lifted document" feel as the cards do. */
background:
radial-gradient(ellipse 110% 55% at 50% 0%, rgba(255, 253, 245, 0.9) 0%, transparent 45%),
linear-gradient(180deg, var(--ev-bg) 0%, #f0e9d5 100%);
background-attachment: fixed;
color: var(--ev-text);
font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
letter-spacing: 0.01em;
min-height: 100vh;
overflow-x: hidden;
}
/* Modern ambient canvas: soft blurred color fields, no mesh/grid. */
#main-app {
position: relative;
isolation: isolate;
}
#main-app::before {
content: '';
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(circle 34rem at 12% 8%, rgba(212, 175, 55, 0.18), transparent 58%),
radial-gradient(circle 28rem at 88% 18%, rgba(14, 126, 153, 0.12), transparent 60%),
radial-gradient(circle 30rem at 82% 86%, rgba(169, 32, 191, 0.08), transparent 62%);
filter: blur(2px);
opacity: 0.9;
}
#main-app > * {
position: relative;
z-index: 1;
}
/* Ensure all text is visible */
h1, h2, h3, h4, h5, h6, p, span, div {
color: var(--ev-text);
}
.text-muted {
color: var(--ev-text-muted) !important;
}
#loading-screen {
background: var(--ev-bg) !important;
}
/* Top bar — stationery masthead: off-white with subtle warm gradient,
double gold rule (thin, then hairline) below, gentle shadow below. */
#main-app .navbar {
background:
linear-gradient(180deg, rgba(255, 254, 250, 0.96) 0%, rgba(251, 246, 233, 0.92) 100%) !important;
backdrop-filter: blur(18px) saturate(125%);
-webkit-backdrop-filter: blur(18px) saturate(125%);
border-bottom: none !important;
box-shadow:
0 1px 0 rgba(212, 175, 55, 0.55),
0 3px 0 rgba(255, 253, 248, 1),
0 4px 0 rgba(212, 175, 55, 0.22),
0 8px 20px rgba(80, 60, 20, 0.07);
position: relative;
}
#main-app .navbar .nav-link {
letter-spacing: 0.03em;
color: var(--ev-text) !important;
transition: color 0.15s ease;
}
#main-app .navbar .nav-link:hover {
color: #6e5518 !important;
}
#main-app .dropdown-menu {
background: #ffffff;
border: 1px solid rgba(31, 27, 20, 0.12);
border-radius: 6px;
box-shadow: 0 14px 34px rgba(80, 60, 20, 0.18);
}
#main-app .dropdown-item {
color: var(--ev-text);
}
#main-app .dropdown-item:hover,
#main-app .dropdown-item:focus {
background: rgba(212, 175, 55, 0.10);
color: var(--ev-text);
}
#main-app .dropdown-divider {
border-color: rgba(31, 27, 20, 0.10);
}
/* Primary nav — active section (HUD tab) */
#main-app .ev-nav-main .nav-link {
position: relative;
border-radius: 999px;
margin: 0 0.1rem;
padding: 0.48rem 0.85rem !important;
transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
#main-app .ev-nav-main .nav-link:hover {
color: #6e5518 !important;
background: rgba(212, 175, 55, 0.10);
transform: translateY(-1px);
}
#main-app .ev-nav-main .nav-link.active {
color: #5d4614 !important;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.72) 0%,
rgba(212, 175, 55, 0.16) 100%
);
box-shadow:
inset 0 0 0 1px rgba(212, 175, 55, 0.42),
inset 0 1px 0 rgba(255, 255, 255, 0.75),
0 8px 18px rgba(138, 107, 17, 0.12);
}
#main-app .ev-nav-main .nav-link.active::after {
content: '';
position: absolute;
left: 0.65rem;
right: 0.65rem;
bottom: 0.2rem;
height: 2px;
border-radius: 1px;
background: linear-gradient(
90deg,
transparent,
rgba(212, 175, 55, 0.35),
rgba(240, 230, 200, 0.85),
rgba(212, 175, 55, 0.35),
transparent
);
opacity: 0.9;
}
/* Section reveal */
#main-app .section.ev-section-anim {
animation: evSectionReveal 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes evSectionReveal {
from {
opacity: 0;
transform: translateY(12px);
filter: blur(6px);
}
to {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
}
@media (prefers-reduced-motion: reduce) {
#main-app .section.ev-section-anim {
animation: none;
opacity: 1;
transform: none;
filter: none;
}
}
/* App footer */
.ev-app-footer {
border-top: 1px solid rgba(212, 175, 55, 0.35) !important;
background: rgba(255, 253, 248, 0.90);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 -6px 22px rgba(80, 60, 20, 0.08);
}
.ev-footer-product {
color: var(--ev-hud-cyan);
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
font-size: 0.7rem;
}
.ev-footer-meta {
font-size: 0.75rem;
opacity: 0.9;
}
/* Gold utility (spinners, SKU highlights, brand accents) */
.text-gold {
color: #d4af37 !important;
}
/* Section titles — letterpress feel: warm ink color, wide tracking, thin
gold underline flourish, small-caps numerals tabular. */
#main-app .section > h2.text-gold {
color: #3d2e0e !important;
letter-spacing: 0.08em;
font-weight: 600;
font-size: 1.5rem;
position: relative;
padding-bottom: 0.5rem;
margin-bottom: 1.15rem;
}
#main-app .section > h2.text-gold::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 2.5rem;
height: 2px;
background: linear-gradient(90deg, #d4af37 0%, rgba(212, 175, 55, 0) 100%);
border-radius: 1px;
}
/* Company logo — responsive, works on black / HUD */
.ev-brand-logo {
height: auto;
width: auto;
max-height: 38px;
max-width: min(200px, 42vw);
object-fit: contain;
vertical-align: middle;
}
.navbar-brand .ev-brand-logo {
max-height: 36px;
max-width: min(180px, 38vw);
}
.ev-brand-logo--hero {
display: block;
margin-left: auto;
margin-right: auto;
max-height: 120px;
max-width: min(280px, 88vw);
}
.ev-brand-logo--modal {
max-height: 72px;
max-width: min(240px, 85vw);
}
.ev-brand-logo--loading {
display: block;
margin-left: auto;
margin-right: auto;
max-height: 72px;
max-width: 220px;
margin-bottom: 1rem;
}
/* Location Selection Styles */
.btn-location {
background: var(--ev-surface);
border: 1px solid rgba(14, 126, 153, 0.35);
color: var(--ev-text);
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
height: auto;
margin-bottom: 15px;
border-radius: 6px;
box-shadow: 0 6px 18px rgba(80, 60, 20, 0.10);
}
.btn-location:hover {
background: rgba(14, 126, 153, 0.08);
color: var(--ev-text);
border-color: rgba(14, 126, 153, 0.65);
box-shadow: 0 8px 22px rgba(80, 60, 20, 0.14), 0 0 0 1px rgba(14, 126, 153, 0.2);
transform: translateY(-1px);
}
.btn-location.selected {
background: rgba(14, 126, 153, 0.14);
color: var(--ev-text);
border-color: var(--ev-hud-cyan);
box-shadow: 0 0 0 1px rgba(14, 126, 153, 0.35), 0 10px 28px rgba(80, 60, 20, 0.14);
}
.location-icon {
font-size: 2.5rem;
margin-bottom: 10px;
}
.location-title {
font-size: 1.2rem;
font-weight: bold;
margin-bottom: 5px;
}
.location-inline {
padding: 20px;
background: var(--ev-surface);
border-radius: 6px;
backdrop-filter: blur(10px);
border: 1px solid rgba(14, 126, 153, 0.22);
box-shadow: 0 8px 22px rgba(80, 60, 20, 0.10);
}
.location-inline .location-icon {
font-size: 3rem;
}
.location-inline .location-name {
font-size: 1.1rem;
font-weight: 500;
color: var(--ev-text);
}
.location-inline .location-count {
color: #d4af37 !important;
font-weight: bold;
}
.location-inline .location-count.text-gold {
color: #d4af37 !important;
}
/* Inventory Table Styles */
.table-header th {
background: linear-gradient(180deg, var(--ev-surface-header) 0%, #e4dcc4 100%) !important;
color: #5d4614 !important;
font-weight: 700;
border: none;
border-bottom: 2px solid rgba(212, 175, 55, 0.55);
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* Bootstrap's .table-dark is forced cream here so existing markup doesn't
need touching. Color/bg/stripe all re-pointed at the new palette. */
.table-dark {
--bs-table-bg: #ffffff;
--bs-table-striped-bg: #fbf6ea;
--bs-table-active-bg: rgba(212, 175, 55, 0.18);
--bs-table-hover-bg: rgba(212, 175, 55, 0.10);
--bs-table-border-color: rgba(31, 27, 20, 0.10);
--bs-table-color: var(--ev-text);
--bs-table-striped-color: var(--ev-text);
--bs-table-hover-color: var(--ev-text);
--bs-table-active-color: var(--ev-text);
background-color: #ffffff !important;
color: var(--ev-text) !important;
}
.table-dark th,
.table-dark td {
border-color: rgba(31, 27, 20, 0.08);
padding: 12px 8px;
vertical-align: middle;
}
/* Inventory results card */
.ev-inv-items-card {
background: var(--ev-surface) !important;
border: 1px solid rgba(31, 27, 20, 0.10);
box-shadow: 0 10px 28px rgba(80, 60, 20, 0.10);
}
.ev-inv-items-card .card-header {
background: var(--ev-surface-header) !important;
border-bottom-color: rgba(31, 27, 20, 0.10) !important;
color: var(--ev-text);
}
.ev-inv-items-card .table-dark {
--bs-table-bg: #ffffff;
--bs-table-striped-bg: #fbf6ea;
}
.ev-inv-items-card .card-body {
background: #ffffff;
}
/* Status color coding — same as :root item-status variables */
.status-active { color: var(--ev-status-active) !important; font-weight: bold; }
.status-returned { color: var(--ev-status-returned) !important; font-weight: bold; }
.status-sold { color: var(--ev-status-sold) !important; font-weight: bold; }
.status-consigned { color: var(--ev-status-consigned) !important; font-weight: bold; }
.status-repair { color: var(--ev-status-repair) !important; font-weight: bold; }
/* Pills — inventory item status (matches table / filters) */
.badge-ev {
font-weight: 700;
letter-spacing: 0.04em;
font-size: 0.8rem;
padding: 0.4em 0.65em;
}
.badge-ev-active {
background: var(--ev-status-active) !important;
color: #ffffff !important;
}
.badge-ev-consigned {
background: var(--ev-status-consigned) !important;
color: #2a1f08 !important;
}
.badge-ev-sold {
background: var(--ev-status-sold) !important;
color: #ffffff !important;
}
.badge-ev-repair {
background: var(--ev-status-repair) !important;
color: #ffffff !important;
}
.badge-ev-returned {
background: var(--ev-status-returned) !important;
color: #fff !important;
}
.badge-ev-unknown {
background: #6c757d !important;
color: #fff !important;
}
/* Consignment document (header) — not the same as item status */
.badge-ev-consignment-active {
background: var(--ev-status-active) !important;
color: #ffffff !important;
}
.badge-ev-consignment-settled {
background: var(--ev-consignment-settled) !important;
color: #ffffff !important;
}
.badge-ev-consignment-other {
background: #6c757d !important;
color: #ffffff !important;
}
/* Repair job workflow (Done / In Progress / Due Soon) — ties to same family */
.badge-ev-repairjob-done {
background: var(--ev-status-active) !important;
color: #ffffff !important;
}
.badge-ev-repairjob-progress {
background: var(--ev-status-repair) !important;
color: #ffffff !important;
}
.badge-ev-repairjob-due {
background: var(--ev-status-returned) !important;
color: #fff !important;
}
.badge-ev-repairjob-other {
background: #6c757d !important;
color: #ffffff !important;
}
/* Settle consignment line outcome */
.badge-ev-settle-return {
background: var(--ev-status-active) !important;
color: #ffffff !important;
}
.badge-ev-settle-sold {
background: var(--ev-status-sold) !important;
color: #ffffff !important;
}
.badge-ev-location-pill {
background: rgba(14, 126, 153, 0.12) !important;
color: var(--ev-location) !important;
border: 1px solid var(--ev-location);
}
.badge-ev-shopify {
background: var(--ev-shopify-sync) !important;
color: #fff !important;
}
.badge-ev-shopify-off {
background: rgba(212, 175, 55, 0.18) !important;
color: #5d4614 !important;
border: 1px solid rgba(212, 175, 55, 0.6);
}
/* ─── Paper surfaces — fine stationery: clean sheet, hairline gold rule,
soft shadow. No grid / mesh. Sophistication comes from restraint,
the top gold rule, the cursor-following sheen, and the ambient shadow. ─── */
#main-app .card,
.modal-content,
.inventory-search-panel--hud {
position: relative;
isolation: isolate;
overflow: hidden;
border-radius: var(--ev-radius-lg);
border: 1px solid rgba(31, 27, 20, 0.075) !important;
background:
radial-gradient(
ellipse 110% 75% at 0% 0%,
rgba(255, 253, 245, 0.95) 0%,
rgba(255, 253, 245, 0) 55%
),
linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(253, 250, 241, 0.94) 100%) !important;
color: var(--ev-text);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.9) inset,
0 0 0 1px rgba(212, 175, 55, 0.08),
var(--ev-shadow-soft),
0 2px 6px rgba(80, 60, 20, 0.04);
backdrop-filter: blur(14px) saturate(112%);
-webkit-backdrop-filter: blur(14px) saturate(112%);
transition: transform var(--ev-transition-lift),
box-shadow var(--ev-transition-lift),
border-color var(--ev-transition-lift);
}
#main-app .card:hover,
.modal-content:hover {
transform: translateY(-3px);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.9) inset,
0 0 0 1px rgba(212, 175, 55, 0.22),
var(--ev-shadow-lift),
0 4px 10px rgba(80, 60, 20, 0.05);
}
.inventory-search-panel--hud {
font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
letter-spacing: 0.01em;
}
/* Cursor-following specular — whisper of warm light that follows the
mouse, gives surfaces a hand-finished feel without drawing attention. */
#main-app .card::before,
.modal-content::before,
.inventory-search-panel--hud::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
z-index: 0;
background: radial-gradient(
circle 50% at var(--ev-sheen-x, 50%) var(--ev-sheen-y, 22%),
rgba(255, 255, 255, 0.38),
rgba(212, 175, 55, 0.07),
transparent 62%
);
opacity: 0.75;
transition: opacity 0.4s ease;
}
#main-app .card:hover::before,
.modal-content:hover::before,
.inventory-search-panel--hud:hover::before {
opacity: 0.9;
}
/* Top hairline gold rule — letterhead accent, not a sidebar stripe. */
#main-app .card::after,
.modal-content::after,
.inventory-search-panel--hud::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
z-index: 2;
background: linear-gradient(
90deg,
transparent 0%,
rgba(212, 175, 55, 0.55) 18%,
rgba(212, 175, 55, 0.75) 50%,
rgba(212, 175, 55, 0.55) 82%,
transparent 100%
);
pointer-events: none;
}
#main-app .card > .card-header,
#main-app .card > .card-body,
#main-app .card > .card-footer,
.modal-content > .modal-header,
.modal-content > .modal-body,
.modal-content > .modal-footer {
position: relative;
z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
#main-app .card:hover,
.modal-content:hover {
transform: none;
}
}
/* Nested cards — flatter, lower shadow, muted top rule so they recede */
#main-app .card .card,
.modal-content .card {
box-shadow:
0 0 0 1px rgba(31, 27, 20, 0.06),
0 4px 12px rgba(80, 60, 20, 0.05);
}
#main-app .card .card:hover,
.modal-content .card:hover {
transform: none;
box-shadow:
0 0 0 1px rgba(31, 27, 20, 0.08),
0 6px 16px rgba(80, 60, 20, 0.07);
}
#main-app .card .card::before,
.modal-content .card::before {
opacity: 0.35;
}
#main-app .card .card::after,
.modal-content .card::after {
background: linear-gradient(
90deg,
transparent 0%,
rgba(212, 175, 55, 0.35) 50%,
transparent 100%
);
}
@media (prefers-reduced-motion: reduce) {
#main-app .card .card:hover,
.modal-content .card:hover {
transform: none;
}
}
/* ─── Inventory search: vendor suggestion dropdown ─── */
.ev-inv-search-wrap {
position: relative;
z-index: 5;
}
.ev-inv-vendor-suggest {
position: absolute;
left: 0;
right: 0;
top: 100%;
margin-top: 4px;
z-index: 45;
max-height: 260px;
overflow-y: auto;
border-radius: 6px;
border: 1px solid rgba(31, 27, 20, 0.12);
box-shadow: 0 14px 34px rgba(80, 60, 20, 0.18);
background: #ffffff;
}
.ev-inv-vendor-suggest-item {
cursor: pointer;
border-color: rgba(31, 27, 20, 0.08) !important;
background: transparent !important;
color: var(--ev-text);
}
.ev-inv-vendor-suggest-item:hover,
.ev-inv-vendor-suggest-item:focus {
background: rgba(212, 175, 55, 0.14) !important;
color: var(--ev-text);
}
.ev-inv-vendor-scope {
font-size: 0.95rem;
color: #6e5518;
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.35rem 0.75rem;
border-radius: 999px;
background: linear-gradient(135deg, rgba(255, 214, 64, 0.35), rgba(255, 180, 0, 0.18));
border: 1px solid rgba(212, 165, 40, 0.75);
box-shadow:
0 0 0 1px rgba(212, 165, 40, 0.25),
0 0 14px rgba(212, 165, 40, 0.18);
animation: evVendorScopePulse 2.4s ease-in-out infinite;
}
.ev-inv-vendor-scope-intro {
color: #6e5518;
font-weight: 600;
letter-spacing: 0.01em;
}
.ev-inv-vendor-scope-intro i {
color: #b38a16;
}
.ev-inv-vendor-scope-intro strong {
color: #5d4614;
text-shadow: 0 0 8px rgba(212, 165, 40, 0.25);
}
.ev-inv-vendor-scope .btn-link {
color: #6e5518 !important;
text-decoration: underline;
font-weight: 600;
}
.ev-inv-vendor-scope .btn-link:hover {
color: #3d2e0e !important;
}
@keyframes evVendorScopePulse {
0%, 100% {
box-shadow:
0 0 0 1px rgba(212, 165, 40, 0.25),
0 0 14px rgba(212, 165, 40, 0.18);
}
50% {
box-shadow:
0 0 0 1px rgba(212, 165, 40, 0.5),
0 0 22px rgba(212, 165, 40, 0.35);
}
}
@media (prefers-reduced-motion: reduce) {
.ev-inv-vendor-scope {
animation: none;
}
}
/* ─── Inventory search: premium command bar ─── */
.inventory-search-input-group {
position: relative;
isolation: isolate;
border-radius: var(--ev-radius-md);
overflow: hidden;
border: 1px solid rgba(31, 27, 20, 0.12);
background:
radial-gradient(ellipse 120% 90% at 8% 0%, rgba(212, 175, 55, 0.10) 0%, transparent 55%),
linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(250, 244, 229, 0.92) 100%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.75),
0 0 0 1px rgba(212, 175, 55, 0.08),
0 10px 24px rgba(80, 60, 20, 0.08);
transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
/* Soft top sheen */
.inventory-search-input-group::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
z-index: 0;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.45) 0%,
transparent 28%,
transparent 100%
);
opacity: 0.75;
}
.inventory-search-input-group > .form-control,
.inventory-search-input-group > .btn {
position: relative;
z-index: 1;
}
.inventory-search-input-group:focus-within {
border-color: rgba(212, 175, 55, 0.65);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.7),
0 0 0 4px rgba(212, 175, 55, 0.13),
0 14px 34px rgba(80, 60, 20, 0.12);
transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
.inventory-search-input-group {
animation: none;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.6),
inset 0 -1px 0 rgba(0, 0, 0, 0.05),
inset 0 0 30px rgba(212, 175, 55, 0.05),
0 0 0 1px rgba(212, 175, 55, 0.12),
0 2px 10px rgba(80, 60, 20, 0.08);
}
}
.inventory-search-input-group .form-control:first-child {
border-radius: var(--ev-radius-md) 0 0 var(--ev-radius-md) !important;
}
.inventory-search-input-group .inventory-search-submit:last-child {
border-radius: 0 var(--ev-radius-md) var(--ev-radius-md) 0 !important;
}
.inventory-search-panel #inventory-search {
background: rgba(255, 255, 255, 0.55);
color: var(--ev-text);
font-weight: 500;
letter-spacing: 0.02em;
}
.inventory-search-panel #inventory-search::placeholder {
color: rgba(31, 27, 20, 0.42);
font-weight: 400;
}
.inventory-search-submit {
border: none;
background: linear-gradient(180deg, #f6e9b5 0%, #e8d68a 100%);
color: #5d4614;
font-weight: 700;
font-size: 0.72rem;
letter-spacing: 0.2em;
text-transform: uppercase;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
border-left: 1px solid rgba(212, 175, 55, 0.3);
transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.inventory-search-submit:hover {
background: linear-gradient(180deg, #eddda1 0%, #d6bf6d 100%);
color: #3d2e0e;
box-shadow: inset 0 0 18px rgba(212, 175, 55, 0.22);
}
.inventory-search-submit:active {
transform: translateY(1px);
}
.inventory-search-submit-label {
display: inline-block;
}
.inventory-search-hint {
color: var(--ev-text-muted);
line-height: 1.5;
letter-spacing: 0.03em;
font-size: 0.8rem !important;
}
.inventory-search-hint strong {
color: #5d4614;
font-weight: 600;
letter-spacing: 0.06em;
}
.inventory-search-filters {
position: relative;
padding-top: 1.35rem;
margin-top: 0.25rem;
}
.inventory-search-filters::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.08) 20%,
rgba(212, 175, 55, 0.22) 50%,
rgba(255, 255, 255, 0.08) 80%,
transparent 100%
);
}
/* Quick opacity-in only — no bounce */
.inv-filter-row-buttons .inv-filter-btn {
animation: invHudIn 0.22s ease-out backwards;
}
.inv-filter-grid > .inv-filter-row-buttons:nth-child(2) .inv-filter-btn:nth-child(1) { animation-delay: 0.03s; }
.inv-filter-grid > .inv-filter-row-buttons:nth-child(2) .inv-filter-btn:nth-child(2) { animation-delay: 0.05s; }
.inv-filter-grid > .inv-filter-row-buttons:nth-child(2) .inv-filter-btn:nth-child(3) { animation-delay: 0.07s; }
.inv-filter-grid > .inv-filter-row-buttons:nth-child(2) .inv-filter-btn:nth-child(4) { animation-delay: 0.09s; }
.inv-filter-grid > .inv-filter-row-buttons:nth-child(2) .inv-filter-btn:nth-child(5) { animation-delay: 0.11s; }
.inv-filter-grid > .inv-filter-row-buttons:nth-child(2) .inv-filter-btn:nth-child(6) { animation-delay: 0.13s; }
.inv-filter-grid > .inv-filter-row-buttons:nth-child(2) .inv-filter-btn:nth-child(7) { animation-delay: 0.15s; }
.inv-filter-grid > .inv-filter-row-buttons:nth-child(4) .inv-filter-btn:nth-child(1) { animation-delay: 0.08s; }
.inv-filter-grid > .inv-filter-row-buttons:nth-child(4) .inv-filter-btn:nth-child(2) { animation-delay: 0.1s; }
.inv-filter-grid > .inv-filter-row-buttons:nth-child(4) .inv-filter-btn:nth-child(3) { animation-delay: 0.12s; }
@keyframes invHudIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.inv-filter-row-buttons .inv-filter-btn {
animation: none;
}
.inventory-search-submit:active {
transform: none;
}
.inventory-search-filters .inv-filter-btn:hover {
transform: none;
}
}
/* Inventory search — status filter buttons (matches .status-* table colors) */
/* Status / Location rows share one label column so buttons align vertically */
.inv-filter-grid {
display: grid;
grid-template-columns: 6.25rem 1fr;
gap: 0.5rem 0.75rem;
align-items: center;
}
.inv-filter-row-label {
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ev-text-muted);
line-height: 1.2;
padding-right: 0.25rem;
}
.inv-filter-row-buttons {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
align-items: center;
}
.inventory-search-filters .inv-filter-btn {
font-weight: 600;
font-size: 0.8125rem;
border-width: 2px;
border-radius: 11px;
background: #ffffff;
transition:
background 0.2s ease,
color 0.2s ease,
border-color 0.2s ease,
transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.22s ease;
width: 9.25rem;
min-height: 2.35rem;
padding: 0.3rem 0.4rem;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
line-height: 1.15;
box-sizing: border-box;
box-shadow: 0 1px 4px rgba(80, 60, 20, 0.08);
}
.inventory-search-filters .inv-filter-btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(80, 60, 20, 0.14);
}
.inventory-search-filters .inv-filter-btn.active {
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(80, 60, 20, 0.18);
}
.inventory-search-filters .inv-filter-all {
border-color: rgba(31, 27, 20, 0.25);
color: var(--ev-text);
}
.inventory-search-filters .inv-filter-all:hover {
border-color: #d4af37;
color: #5d4614;
}
.inventory-search-filters .inv-filter-all.active {
background: rgba(212, 175, 55, 0.20);
border-color: #d4af37;
color: #5d4614;
}
/* Inventory search filters — use :root status variables */
.inventory-search-filters .inv-filter-status-active {
border-color: var(--ev-status-active);
color: var(--ev-status-active);
}
.inventory-search-filters .inv-filter-status-active:hover {
background: rgba(46, 204, 113, 0.12);
}
.inventory-search-filters .inv-filter-status-active.active {
background: var(--ev-status-active);
border-color: var(--ev-status-active);
color: var(--ev-ink);
}
.inventory-search-filters .inv-filter-status-consigned {
border-color: var(--ev-status-consigned);
color: var(--ev-status-consigned);
}
.inventory-search-filters .inv-filter-status-consigned:hover {
background: rgba(255, 251, 0, 0.08);
}
.inventory-search-filters .inv-filter-status-consigned.active {
background: var(--ev-status-consigned);
border-color: var(--ev-status-consigned);
color: var(--ev-ink);
}
.inventory-search-filters .inv-filter-status-sold {
border-color: var(--ev-status-sold);
color: var(--ev-status-sold);
}
.inventory-search-filters .inv-filter-status-sold:hover {
background: rgba(222, 113, 255, 0.1);
}
.inventory-search-filters .inv-filter-status-sold.active {
background: var(--ev-status-sold);
border-color: var(--ev-status-sold);
color: var(--ev-ink);
}
.inventory-search-filters .inv-filter-status-repair {
border-color: var(--ev-status-repair);
color: var(--ev-status-repair);
}
.inventory-search-filters .inv-filter-status-repair:hover {
background: rgba(255, 136, 0, 0.1);
}
.inventory-search-filters .inv-filter-status-repair.active {
background: var(--ev-status-repair);
border-color: var(--ev-status-repair);
color: var(--ev-ink);
}
.inventory-search-filters .inv-filter-status-returned {
border-color: var(--ev-status-returned);
color: var(--ev-status-returned);
}
.inventory-search-filters .inv-filter-status-returned:hover {
background: rgba(241, 87, 87, 0.1);
}
.inventory-search-filters .inv-filter-status-returned.active {
background: var(--ev-status-returned);
border-color: var(--ev-status-returned);
color: var(--ev-ink);
}
.inventory-search-filters .inv-filter-location {
border-color: var(--ev-location);
color: var(--ev-location);
}
.inventory-search-filters .inv-filter-location:hover {
background: rgba(14, 126, 153, 0.10);
color: #0b5e73;
border-color: #0e7e99;
}
.inventory-search-filters .inv-filter-location:active {
transform: translateY(-1px);
}
.inventory-search-filters .inv-filter-location.active {
background: rgba(14, 126, 153, 0.20);
color: #ffffff;
background-color: var(--ev-location);
border-color: var(--ev-location);
box-shadow: 0 0 0 1px rgba(14, 126, 153, 0.35), 0 4px 14px rgba(14, 126, 153, 0.18);
}
/* Inventory select-all column + row checkboxes */
.inv-bulk-check-col {
width: 40px;
min-width: 40px;
max-width: 40px;
text-align: center;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
#inventory-tbody .inv-row-check,
#inventory-select-all {
cursor: pointer;
width: 1.1rem;
height: 1.1rem;
/* Tick styling is delegated to the global .form-check-input rules so
the gold fill + dark tick SVG show consistently. Don't override
background-color/image here or the tick disappears. */
}
/* Multi-pill group in the result bar */
.ev-inv-status-tag-group {
display: inline-flex;
align-items: center;
gap: 0.3rem;
flex-wrap: wrap;
}
.ev-inv-status-tag--location {
background: rgba(14, 126, 153, 0.14);
color: #0b5e73;
border: 1px solid rgba(14, 126, 153, 0.45);
}
/* Softer colored glow when a status chip is selected */
.inventory-search-filters .inv-filter-status-active.active {
box-shadow: 0 8px 28px rgba(46, 204, 113, 0.33);
}
.inventory-search-filters .inv-filter-status-consigned.active {
box-shadow: 0 8px 28px rgba(255, 251, 0, 0.22);
}
.inventory-search-filters .inv-filter-status-sold.active {
box-shadow: 0 8px 28px rgba(222, 113, 255, 0.28);
}
.inventory-search-filters .inv-filter-status-repair.active {
box-shadow: 0 8px 28px rgba(255, 136, 0, 0.3);
}
.inventory-search-filters .inv-filter-status-returned.active {
box-shadow: 0 8px 28px rgba(241, 87, 87, 0.32);
}
.inventory-search-filters .inv-filter-all.active {
box-shadow: 0 8px 28px rgba(212, 175, 55, 0.25);
}
/* Search result / selection bar — cream paper, dark copy */
#selected-item-info.ev-inv-result-bar {
margin-bottom: 1rem;
padding: 0.65rem 1rem;
border-radius: 6px;
border: 1px solid rgba(31, 27, 20, 0.12);
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, transparent 42%),
#fffdf6;
box-shadow:
0 0 0 1px rgba(212, 175, 55, 0.14),
0 6px 18px rgba(80, 60, 20, 0.10),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
color: var(--ev-text) !important;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.1rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#selected-item-info.ev-inv-result-bar .ev-inv-result-text,
#selected-item-info.ev-inv-result-bar .ev-inv-result-text strong {
color: var(--ev-text) !important;
}
#selected-item-info.ev-inv-result-bar .ev-inv-result-print {
color: var(--ev-text) !important;
border: 1px solid rgba(31, 27, 20, 0.28);
background: rgba(255, 255, 255, 0.85);
font-weight: 600;
}
#selected-item-info.ev-inv-result-bar .ev-inv-result-print:hover {
color: #5d4614 !important;
border-color: rgba(212, 175, 55, 0.65);
background: rgba(212, 175, 55, 0.12);
}
#selected-item-info.ev-inv-result-bar .text-danger {
color: #b02a37 !important;
}
/* Status pill in "Found N for … · Active only" */
.ev-inv-status-tag {
display: inline-block;
font-weight: 600;
font-size: 0.88em;
line-height: 1.35;
padding: 0.12em 0.5em;
border-radius: 4px;
vertical-align: middle;
margin-left: 0.1em;
border: 1px solid transparent;
}
.ev-inv-status-tag--active {
color: #0f5b34 !important;
background: rgba(30, 158, 87, 0.14);
border-color: rgba(30, 158, 87, 0.45);
}
.ev-inv-status-tag--consigned {
color: #6e5518 !important;
background: rgba(201, 161, 0, 0.14);
border-color: rgba(201, 161, 0, 0.38);
}
.ev-inv-status-tag--sold {
color: #5a1e88 !important;
background: rgba(147, 51, 234, 0.14);
border-color: rgba(147, 51, 234, 0.38);
}
.ev-inv-status-tag--repair {
color: #7a3d02 !important;
background: rgba(217, 119, 6, 0.14);
border-color: rgba(217, 119, 6, 0.38);
}
.ev-inv-status-tag--returned {
color: #7a1a17 !important;
background: rgba(196, 52, 43, 0.12);
border-color: rgba(196, 52, 43, 0.35);
}
/* HUD: chips — angular, flat motion (panel-only) */
.inventory-search-panel--hud .inv-filter-row-label {
color: var(--ev-text-muted);
text-shadow: none;
letter-spacing: 0.08em;
}
.inventory-search-panel--hud .inventory-search-filters .inv-filter-btn {
border-width: 1px;
border-radius: 3px;
box-shadow: 0 0 0 1px rgba(31, 27, 20, 0.06), 0 1px 4px rgba(80, 60, 20, 0.08);
transition:
background 0.18s ease,
color 0.18s ease,
border-color 0.18s ease,
box-shadow 0.18s ease;
}
.inventory-search-panel--hud .inventory-search-filters .inv-filter-btn:hover {
transform: translateY(-1px);
box-shadow: 0 0 0 1px rgba(31, 27, 20, 0.12), 0 4px 10px rgba(80, 60, 20, 0.12);
}
.inventory-search-panel--hud .inventory-search-filters .inv-filter-btn.active {
transform: none;
}
/* Selected row highlighting */
.table-hover tbody tr:hover {
background-color: rgba(212, 175, 55, 0.08) !important;
box-shadow: inset 3px 0 0 rgba(212, 175, 55, 0.45);
}
.batch-item-row {
cursor: pointer;
}
.batch-item-row td {
vertical-align: middle;
}
.batch-item-row:hover {
background: rgba(212, 175, 55, 0.12) !important;
}
.batch-item-row:hover td {
color: var(--ev-text) !important;
}
.batch-item-row:hover .text-gold {
color: #8a6b11 !important;
}
.ev-batch-edit-link {
color: #8a6b11 !important;
font-weight: 800;
letter-spacing: 0.03em;
text-decoration: underline;
text-underline-offset: 3px;
}
.ev-batch-edit-link:hover,
.ev-batch-edit-link:focus {
color: #5d4614 !important;
}
.ev-batch-edit-desc {
color: var(--ev-text);
font-weight: 600;
}
.ev-batch-edit-hint {
color: #6e5518;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.ev-repair-summary-row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.75rem;
}
.ev-repair-summary-card {
padding: 0.9rem 1rem;
border-radius: var(--ev-radius-md);
background:
radial-gradient(circle 10rem at 100% 0%, rgba(217, 119, 6, 0.12), transparent 58%),
rgba(255, 255, 255, 0.82);
border: 1px solid rgba(31, 27, 20, 0.09);
box-shadow: 0 8px 22px rgba(80, 60, 20, 0.07);
}
.ev-repair-summary-label {
display: block;
color: var(--ev-text-muted);
font-size: 0.74rem;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 700;
}
.ev-repair-summary-card strong {
display: block;
margin-top: 0.25rem;
color: #7a3d02;
font-size: 1.45rem;
line-height: 1;
}
.ev-repair-selected-item {
padding: 0.7rem 0.85rem;
border-radius: var(--ev-radius-md);
background: rgba(30, 158, 87, 0.10);
border: 1px solid rgba(30, 158, 87, 0.35);
color: #0f5b34;
}
.ev-repair-selected-list {
border-radius: var(--ev-radius-md);
background:
radial-gradient(circle 12rem at 100% 0%, rgba(217, 119, 6, 0.10), transparent 60%),
rgba(255, 255, 255, 0.82);
border: 1px solid rgba(31, 27, 20, 0.10);
padding: 0.85rem;
}
.ev-repair-selected-empty {
color: var(--ev-text-muted);
font-weight: 700;
padding: 0.35rem 0.2rem;
}
.ev-repair-selected-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.55rem;
}
.ev-repair-selected-head strong {
color: #3d2e0e;
letter-spacing: 0.04em;
}
.ev-repair-selected-head span {
color: var(--ev-text-muted);
font-size: 0.82rem;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 700;
}
.ev-repair-selected-rows {
display: grid;
gap: 0.45rem;
max-height: 220px;
overflow: auto;
}
.ev-repair-selected-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.75rem;
align-items: center;
padding: 0.65rem 0.75rem;
border-radius: var(--ev-radius-sm);
background: rgba(255, 255, 255, 0.84);
border: 1px solid rgba(31, 27, 20, 0.08);
}
.ev-repair-selected-copy {
min-width: 0;
display: grid;
gap: 0.1rem;
}
.ev-repair-selected-copy strong {
color: #8a6b11;
letter-spacing: 0.04em;
}
.ev-repair-selected-copy span {
color: var(--ev-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ev-repair-selected-meta {
display: inline-flex;
align-items: center;
gap: 0.4rem;
color: var(--ev-text-muted);
font-size: 0.8rem;
}
.ev-repair-selected-meta em {
font-style: normal;
padding: 0.12rem 0.4rem;
border-radius: 999px;
background: rgba(31, 27, 20, 0.06);
}
.ev-repair-search-results {
border-radius: var(--ev-radius-md);
border: 1px solid rgba(31, 27, 20, 0.10);
background: #ffffff;
box-shadow: 0 14px 34px rgba(80, 60, 20, 0.14);
overflow: hidden;
}
.ev-repair-result-list {
display: grid;
max-height: 320px;
overflow: auto;
}
.ev-repair-result-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 0.75rem;
width: 100%;
padding: 0.75rem 0.9rem;
border: 0;
border-bottom: 1px solid rgba(31, 27, 20, 0.08);
background: transparent;
color: var(--ev-text);
text-align: left;
}
.ev-repair-result-row:hover,
.ev-repair-result-row:focus {
background: rgba(212, 175, 55, 0.10);
}
.ev-repair-result-main {
min-width: 0;
display: grid;
gap: 0.1rem;
}
.ev-repair-result-main strong {
color: #8a6b11;
letter-spacing: 0.04em;
}
.ev-repair-result-main span {
color: var(--ev-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ev-repair-result-meta {
display: inline-flex;
gap: 0.4rem;
color: var(--ev-text-muted);
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.ev-repair-result-meta em {
font-style: normal;
padding: 0.12rem 0.4rem;
border-radius: 999px;
background: rgba(31, 27, 20, 0.06);
}
@media (max-width: 720px) {
.ev-repair-summary-row {
grid-template-columns: 1fr;
}
.ev-repair-result-row {
grid-template-columns: 1fr;
}
.ev-repair-selected-row {
grid-template-columns: 1fr;
}
.ev-repair-selected-meta {
flex-wrap: wrap;
}
}
.selected-row {
background-color: rgba(212, 175, 55, 0.14) !important;
border-left: 3px solid rgba(212, 175, 55, 0.65);
}
/* Search input styling */
#inventory-search {
border-radius: var(--ev-radius-md);
}
#inventory-search:focus {
box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.15);
border-color: rgba(212, 175, 55, 0.35);
}
.inventory-search-panel--hud #inventory-search:focus {
box-shadow: none;
outline: none;
border-color: transparent;
}
/* Vendor list styling */
#vendor-list .list-group-item:hover {
background-color: rgba(14, 126, 153, 0.10) !important;
border-color: rgba(14, 126, 153, 0.35) !important;
cursor: pointer;
}
#vendor-list .list-group-item {
transition: all 0.2s ease;
}
#vendor-list .list-group-item:first-child {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
#vendor-list .list-group-item:last-child {
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
/* Vendor search input styling */
#vendor-search {
border-radius: 8px;
}
#vendor-search:focus {
box-shadow: 0 0 0 2px rgba(14, 126, 153, 0.15);
border-color: rgba(14, 126, 153, 0.55);
}
/* Markup buttons */
.btn-markup {
background: #ffffff;
border: 1px solid rgba(14, 126, 153, 0.35);
color: var(--ev-text);
font-weight: 600;
transition: background 0.2s ease, border-color 0.2s ease;
border-radius: 4px;
}
.btn-markup:hover {
background: rgba(14, 126, 153, 0.10);
color: var(--ev-text);
}
.btn-markup.active-markup {
background: linear-gradient(180deg, #d4af37 0%, #b8942c 100%) !important;
border-color: rgba(160, 130, 30, 0.35) !important;
color: #2a1f08 !important;
font-weight: 700;
}
.location-desc {
font-size: 0.9rem;
opacity: 0.8;
margin-bottom: 10px;
}
.location-count {
font-size: 0.8rem;
background: rgba(14, 126, 153, 0.10);
padding: 2px 8px;
border-radius: 4px;
border: 1px solid rgba(14, 126, 153, 0.3);
display: inline-block;
}
/* Location Badge */
.bg-gold {
background-color: #d4af37 !important;
}
/* Dashboard Cards */
.dashboard-card {
transition: transform var(--ev-transition-lift), box-shadow var(--ev-transition-lift), border-color var(--ev-transition-lift);
cursor: default;
}
.dashboard-card:hover {
transform: translateY(-4px);
box-shadow: var(--ev-shadow-lift), 0 0 0 1px rgba(212, 175, 55, 0.34);
}
/* Green "consignee locked in" pill shown under the Send-to input while
building a new consignment. Purely a visual confirmation — disappears
the instant the user edits the name so it never lies about state. */
.ev-consignee-picked {
display: inline-flex;
align-items: center;
gap: 0.15rem;
padding: 0.4rem 0.7rem;
border-radius: 999px;
background: rgba(30, 158, 87, 0.14);
border: 1px solid rgba(30, 158, 87, 0.55);
color: #0f5b34;
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.02em;
box-shadow: 0 0 0 1px rgba(30, 158, 87, 0.18), 0 4px 12px rgba(30, 158, 87, 0.18);
animation: evConsigneePickedIn 0.22s ease-out both;
}
.ev-consignee-picked .fa-check-circle {
color: #1e9e57;
font-size: 1rem;
}
.ev-consignee-picked strong {
color: #0a4023;
margin-left: 0.15rem;
}
.ev-consignee-picked-kind {
background: rgba(30, 158, 87, 0.25);
color: #0a4023;
border: 1px solid rgba(30, 158, 87, 0.55);
font-size: 0.7rem;
letter-spacing: 0.04em;
padding: 0.2rem 0.45rem;
text-transform: uppercase;
}
@keyframes evConsigneePickedIn {
from { opacity: 0; transform: translateY(-2px); }
to { opacity: 1; transform: translateY(0); }
}
/* Cyan "Consignees" directory button next to the page title. */
.btn-ev-consignee-dir {
background: transparent;
color: var(--ev-hud-cyan);
border: 1px solid var(--ev-hud-cyan);
font-weight: 600;
padding: 0.25rem 0.7rem;
letter-spacing: 0.02em;
transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.btn-ev-consignee-dir:hover,
.btn-ev-consignee-dir:focus-visible {
background: var(--ev-hud-cyan);
color: #ffffff;
box-shadow: 0 0 0 2px rgba(14, 126, 153, 0.22);
}
/* Clickable dashboard tiles — turn the whole card into a focusable button. */
.dashboard-card.ev-dash-clickable {
cursor: pointer;
}
.dashboard-card.ev-dash-clickable:hover {
box-shadow: var(--ev-shadow-lift), 0 0 0 1px rgba(212, 175, 55, 0.52);
}
.dashboard-card.ev-dash-clickable:focus-visible {
outline: 2px solid #d4af37;
outline-offset: 3px;
}
/* Per-city dashboard tiles — colors match the PC app (tabs/status_tab.py)
so the three stores read the same no matter which tool is open. */
.dashboard-card.ev-dash-loc {
border: 1px solid rgba(31, 27, 20, 0.08);
background:
radial-gradient(circle 12rem at 92% 12%, color-mix(in srgb, var(--ev-dash-loc-color, var(--ev-hud-cyan)) 13%, transparent), transparent 58%),
linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(253, 250, 241, 0.94) 100%) !important;
}
.dashboard-card.ev-dash-loc .ev-dash-loc-icon .fas,
.dashboard-card.ev-dash-loc .ev-dash-loc-count {
color: var(--ev-dash-loc-color, var(--ev-hud-cyan));
}
.dashboard-card.ev-dash-loc .ev-dash-loc-count {
font-weight: 700;
letter-spacing: 0.02em;
text-shadow: 0 0 10px color-mix(in srgb, var(--ev-dash-loc-color, var(--ev-hud-cyan)) 25%, transparent);
}
.dashboard-card.ev-dash-loc:hover {
box-shadow:
var(--ev-shadow-lift),
0 0 0 1px color-mix(in srgb, var(--ev-dash-loc-color, var(--ev-hud-cyan)) 55%, transparent);
}
.dashboard-card.ev-dash-loc--dal { --ev-dash-loc-color: var(--ev-loc-dal); }
.dashboard-card.ev-dash-loc--asp { --ev-dash-loc-color: var(--ev-loc-asp); }
.dashboard-card.ev-dash-loc--pb { --ev-dash-loc-color: var(--ev-loc-pb); }
/* Dashboard Location Cards */
.location-card {
transition: transform var(--ev-transition-lift), box-shadow var(--ev-transition-lift);
cursor: pointer;
}
.location-card:hover {
transform: translateY(-4px);
box-shadow: var(--ev-shadow-lift), 0 0 0 1px rgba(212, 175, 55, 0.3);
}
.location-icon {
font-size: 2rem;
margin-bottom: 8px;
}
.location-name {
font-weight: bold;
font-size: 1rem;
margin-bottom: 4px;
}
.location-count {
font-size: 1.2rem;
font-weight: bold;
opacity: 0.9;
}
#main-app .card.bg-secondary {
color: var(--ev-text) !important;
background: var(--ev-surface) !important;
}
.card-header, .modal-header {
background:
linear-gradient(180deg, rgba(255, 253, 248, 0.92) 0%, rgba(239, 232, 213, 0.82) 100%);
border-bottom: 1px solid rgba(212, 175, 55, 0.22);
color: var(--ev-text);
}
.card-body, .modal-body {
background: transparent;
color: var(--ev-text);
}
/* Form elements */
.form-label, label {
color: var(--ev-text) !important;
font-weight: 600;
letter-spacing: 0.02em;
}
.form-control, select, textarea, input {
background: rgba(255, 255, 255, 0.88) !important;
border: 1px solid rgba(31, 27, 20, 0.14) !important;
color: var(--ev-text) !important;
border-radius: var(--ev-radius-sm);
box-shadow: inset 0 1px 2px rgba(80, 60, 20, 0.035);
transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.form-control::placeholder,
input::placeholder,
textarea::placeholder {
color: rgba(31, 27, 20, 0.42) !important;
}
.form-control:focus {
background: #ffffff !important;
border-color: rgba(212, 175, 55, 0.65) !important;
color: var(--ev-text) !important;
box-shadow:
0 0 0 4px rgba(212, 175, 55, 0.14),
inset 0 1px 2px rgba(80, 60, 20, 0.035);
}
button:focus-visible,
.btn:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 3px solid rgba(212, 175, 55, 0.48);
outline-offset: 3px;
}
.btn-gold {
background: linear-gradient(180deg, #e4c757 0%, #d4af37 45%, #b8942c 100%);
border: 1px solid rgba(138, 107, 17, 0.5);
color: #2a1f08;
font-weight: 700;
letter-spacing: 0.04em;
border-radius: var(--ev-radius-sm);
box-shadow:
0 1px 0 rgba(255, 240, 170, 0.6) inset,
0 -1px 0 rgba(80, 60, 20, 0.12) inset,
0 2px 6px rgba(138, 107, 17, 0.22),
0 1px 2px rgba(80, 60, 20, 0.08);
transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease, filter 0.2s ease;
}
.btn-gold:hover {
background: linear-gradient(180deg, #efd572 0%, #e1be44 45%, #c9a227 100%);
border-color: rgba(138, 107, 17, 0.65);
color: #2a1f08;
box-shadow:
0 1px 0 rgba(255, 245, 190, 0.75) inset,
0 -1px 0 rgba(80, 60, 20, 0.14) inset,
0 4px 12px rgba(138, 107, 17, 0.28),
0 2px 4px rgba(80, 60, 20, 0.10);
filter: saturate(1.05);
}
.btn-gold:active {
transform: translateY(1px);
box-shadow:
0 1px 0 rgba(255, 240, 170, 0.4) inset,
0 -1px 0 rgba(80, 60, 20, 0.18) inset,
0 1px 3px rgba(138, 107, 17, 0.18);
}
.table {
color: var(--ev-text);
--bs-table-bg: transparent;
}
.table thead th {
border-bottom: 1px solid rgba(212, 175, 55, 0.45);
color: #5d4614;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
font-size: 0.78rem;
padding-top: 0.85rem;
padding-bottom: 0.65rem;
}
.table tbody td {
color: var(--ev-text);
border-color: rgba(31, 27, 20, 0.08);
vertical-align: middle;
}
.table tbody tr {
transition: background-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}
.modal-title {
color: #5d4614 !important;
font-weight: 700;
letter-spacing: 0.05em;
}
.ev-app-notice {
border-radius: var(--ev-radius-lg);
border: 1px solid rgba(212, 175, 55, 0.28) !important;
box-shadow: 0 28px 80px rgba(31, 27, 20, 0.22);
}
.ev-app-notice .modal-title {
color: #3d2e0e !important;
}
.ev-app-notice .modal-title i {
color: #b38a16;
}
.ev-app-notice--warning .modal-title i {
color: #b38a16;
}
.ev-app-notice--danger .modal-title i {
color: #a4261f;
}
.ev-app-notice--success .modal-title i {
color: #0f5b34;
}
.ev-app-notice .modal-body p {
color: var(--ev-text) !important;
font-size: 1rem;
line-height: 1.45;
}
.ev-notification-stack {
position: fixed;
right: 1.25rem;
bottom: 1.25rem;
z-index: 2000;
display: grid;
gap: 0.75rem;
width: min(380px, calc(100vw - 2rem));
pointer-events: none;
}
.ev-notification {
pointer-events: auto;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 0.75rem;
align-items: start;
padding: 0.9rem 0.95rem;
border-radius: var(--ev-radius-md);
background:
radial-gradient(circle 10rem at 0% 0%, rgba(255, 255, 255, 0.9), transparent 55%),
#fffdf8;
border: 1px solid rgba(31, 27, 20, 0.10);
box-shadow: 0 18px 48px rgba(31, 27, 20, 0.20);
animation: evNoticeIn 180ms ease-out both;
}
.ev-notification--leaving {
animation: evNoticeOut 180ms ease-in both;
}
.ev-notification-icon {
color: #0f5b34;
font-size: 1.25rem;
line-height: 1.2;
}
.ev-notification--warning .ev-notification-icon {
color: #8a6b11;
}
.ev-notification--danger .ev-notification-icon {
color: #a4261f;
}
.ev-notification-title {
color: #3d2e0e;
font-weight: 800;
letter-spacing: 0.03em;
margin-bottom: 0.1rem;
}
.ev-notification-message {
color: var(--ev-text);
font-size: 0.94rem;
line-height: 1.35;
}
.ev-notification-close {
border: 0;
background: transparent;
color: var(--ev-text-muted);
font-size: 1.25rem;
line-height: 1;
padding: 0;
}
@keyframes evNoticeIn {
from { opacity: 0; transform: translateY(10px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes evNoticeOut {
from { opacity: 1; transform: translateY(0) scale(1); }
to { opacity: 0; transform: translateY(8px) scale(0.98); }
}
/* List items */
.list-group-item {
background: #ffffff !important;
border-color: rgba(31, 27, 20, 0.10) !important;
color: var(--ev-text) !important;
}
/* Badge improvements */
.badge {
font-size: 0.8em;
}
/* Edit status buttons */
.btn-status-option {
background: #ffffff;
border: 1px solid rgba(31, 27, 20, 0.20);
color: var(--ev-text-muted);
font-weight: 600;
transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
border-radius: 4px;
}
.btn-status-option:hover {
border-color: rgba(212, 175, 55, 0.55);
color: var(--ev-text);
background: rgba(212, 175, 55, 0.06);
}
.btn-status-option.btn-gold {
background: linear-gradient(180deg, #d4af37 0%, #b8942c 100%) !important;
border-color: rgba(160, 130, 30, 0.35) !important;
color: #2a1f08 !important;
}
/* View item modal info cards — nested float (see .modal-content .card) */
#view-item-body .card {
background: transparent !important;
}
/* View detail table — labels always visible */
.view-detail-table {
background: transparent !important;
}
.view-detail-table th,
.view-detail-table th * {
width: 40%;
color: #5d4614 !important;
font-weight: 600 !important;
font-size: 0.85em;
text-transform: uppercase;
letter-spacing: 0.06em;
padding-right: 12px;
background: transparent !important;
}
.view-detail-table td,
.view-detail-table td * {
color: var(--ev-text) !important;
background: transparent !important;
}
/* Shopify push button */
.btn-shopify {
background: #96bf48;
border-color: #96bf48;
color: #fff;
font-weight: bold;
transition: all 0.2s ease;
}
.btn-shopify:hover {
background: #7ea83a;
border-color: #7ea83a;
color: #fff;
}
.btn-shopify-synced {
background: transparent;
border: 1px solid #96bf48;
color: #96bf48;
font-weight: bold;
transition: all 0.2s ease;
}
.btn-shopify-synced:hover {
background: rgba(150, 191, 72, 0.15);
color: #96bf48;
}
/* Inventory bulk selection (return / sold mode) */
/* Bulk return / sold / audit — large selected count */
.inventory-bulk-count-wrap {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 0.35rem 0.6rem;
line-height: 1.05;
}
.inventory-bulk-count-num {
font-size: clamp(2.25rem, 6vw, 3.75rem);
font-weight: 800;
color: #d4af37;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
.inventory-bulk-count-suffix {
font-size: 1.15rem;
font-weight: 600;
opacity: 0.95;
}
#inventory-tbody tr.inv-bulk-selected {
box-shadow: inset 4px 0 0 #c4342b;
background: rgba(196, 52, 43, 0.14) !important;
}
#inventory-tbody tr.inv-bulk-selected td {
color: var(--ev-text) !important;
}
/* Consignee typeahead (vendors + consignees) */
.consignee-suggest-panel {
z-index: 1060;
max-height: 240px;
overflow-y: auto;
margin-top: 2px;
border: 1px solid rgba(31, 27, 20, 0.12);
border-radius: 6px;
box-shadow: 0 14px 34px rgba(80, 60, 20, 0.18);
background: #ffffff;
}
.consignee-suggest-panel .list-group-item {
background: transparent;
color: var(--ev-text);
border-color: rgba(31, 27, 20, 0.08);
cursor: pointer;
}
.consignee-suggest-panel .list-group-item:hover {
background: rgba(212, 175, 55, 0.14);
}
/* Consignment modal — checkboxes: override Bootstrap so ticks stay visible */
#consignmentModal .consignment-item-cb,
#consignmentModal .consignment-header-cb {
-webkit-appearance: none;
appearance: none;
flex-shrink: 0;
width: 1.15rem;
height: 1.15rem;
margin: 0;
cursor: pointer;
border: 2px solid #d4af37 !important;
border-radius: 0.25rem;
background-color: #ffffff !important;
background-image: none !important;
box-shadow: inset 0 0 0 1px rgba(160, 130, 30, 0.18);
}
#consignmentModal .consignment-item-cb:checked,
#consignmentModal .consignment-header-cb:checked {
background-color: #d4af37 !important;
border-color: #f5e6b8 !important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23111' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
background-size: 0.85rem !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
#consignmentModal .consignment-header-cb:indeterminate {
background-color: #b8962e !important;
border-color: #f0dc82 !important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23111' stroke-linecap='round' stroke-width='2.5' d='M5 10h10'/%3e%3c/svg%3e") !important;
background-size: 0.75rem !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
#consignmentModal .consignment-header-cb:disabled {
opacity: 0.45;
cursor: not-allowed;
}
#consignmentModal tr.consignment-search-row {
cursor: pointer;
}
#consignmentModal tr.consignment-search-row:hover {
background: rgba(212, 175, 55, 0.10);
}
/* ─── Cream canvas: Bootstrap dark tokens overridden ─── */
.bg-dark {
background-color: var(--ev-surface) !important;
color: var(--ev-text) !important;
}
.bg-black {
background-color: var(--ev-surface) !important;
color: var(--ev-text) !important;
}
.bg-secondary {
background-color: var(--ev-surface-2) !important;
color: var(--ev-text) !important;
}
.text-light,
.text-white {
color: var(--ev-text) !important;
}
#main-app .border-secondary,
#main-app .border-light {
border-color: rgba(31, 27, 20, 0.12) !important;
}
/* Bootstrap modal shell — make the outer frame transparent so our .modal-content rules win */
.modal-backdrop {
background-color: #1f1b14;
}
.modal-backdrop.show {
opacity: 0.55;
}
/* Inline bulk HUD — lives inside #selected-item-info now. Mode tints
piggy-back on the existing result bar so there's no separate card. */
.ev-inv-bulk-inline {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.6rem 0.9rem;
width: 100%;
padding-bottom: 0.55rem;
margin-bottom: 0.55rem;
border-bottom: 1px solid rgba(31, 27, 20, 0.10);
}
.ev-inv-bulk-inline .ev-bulk-mode-pill {
font-weight: 700;
letter-spacing: 0.02em;
padding: 0.2rem 0.7rem;
border-radius: 999px;
border: 1px solid rgba(31, 27, 20, 0.15);
background: #ffffff;
font-size: 0.9rem;
color: var(--ev-text);
}
.ev-inv-bulk-inline .inventory-bulk-count-wrap {
display: inline-flex;
align-items: baseline;
gap: 0.35rem;
margin: 0;
}
.ev-inv-bulk-inline .inventory-bulk-count-num {
font-size: 1.35rem;
font-weight: 700;
line-height: 1;
color: #5d4614;
}
.ev-inv-bulk-inline .inventory-bulk-count-suffix {
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ev-text-muted);
}
.ev-inv-bulk-inline .ev-bulk-scan-input {
max-width: 260px;
background: #fffdf6 !important;
color: #5d4614 !important;
border: 2px solid rgba(14, 126, 153, 0.55) !important;
}
.ev-bulk-live-list {
width: 100%;
margin: 0 0 1rem;
padding: 1rem;
border-radius: var(--ev-radius-lg);
border: 1px solid rgba(31, 27, 20, 0.10);
background:
radial-gradient(circle 16rem at 100% 0%, rgba(212, 175, 55, 0.12), transparent 60%),
linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(253, 250, 241, 0.94) 100%);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.85) inset,
0 14px 34px rgba(80, 60, 20, 0.10);
}
.ev-bulk-live-empty {
padding: 1rem 1.1rem;
border-radius: var(--ev-radius-md);
background: rgba(255, 255, 255, 0.68);
border: 1px dashed rgba(31, 27, 20, 0.18);
color: var(--ev-text-muted);
font-size: 1.05rem;
font-weight: 700;
}
.ev-bulk-live-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.5rem;
color: var(--ev-text);
}
.ev-bulk-live-head strong {
color: #3d2e0e;
letter-spacing: 0.04em;
font-size: 1.05rem;
}
.ev-bulk-live-head span {
color: var(--ev-text-muted);
font-size: 0.86rem;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.ev-bulk-live-items {
display: grid;
gap: 0.45rem;
max-height: 340px;
overflow: auto;
padding-right: 0.2rem;
}
.ev-bulk-live-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.75rem;
align-items: center;
padding: 0.65rem 0.75rem;
border-radius: var(--ev-radius-md);
background: rgba(255, 255, 255, 0.80);
border: 1px solid rgba(31, 27, 20, 0.08);
box-shadow: 0 4px 14px rgba(80, 60, 20, 0.06);
}
.ev-bulk-live-main {
min-width: 0;
display: grid;
gap: 0.1rem;
}
.ev-bulk-live-sku {
color: #0f5b34;
font-weight: 800;
letter-spacing: 0.04em;
}
.ev-bulk-live-desc {
color: var(--ev-text-muted);
font-size: 0.9rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ev-bulk-live-meta {
display: inline-flex;
align-items: center;
gap: 0.4rem;
color: var(--ev-text-muted);
font-size: 0.82rem;
}
@media (max-width: 720px) {
.ev-bulk-live-row {
grid-template-columns: 1fr;
}
.ev-bulk-live-meta {
justify-content: flex-start;
flex-wrap: wrap;
}
}
/* Mode tint applied on the info bar itself (keeps one surface, no card). */
#selected-item-info.ev-bulk-mode-return {
border-color: rgba(196, 52, 43, 0.55) !important;
box-shadow:
0 0 0 1px rgba(196, 52, 43, 0.25),
0 8px 22px rgba(196, 52, 43, 0.15),
inset 4px 0 0 rgba(196, 52, 43, 0.85) !important;
}
#selected-item-info.ev-bulk-mode-return .ev-bulk-mode-pill {
color: #7a1a17;
border-color: rgba(196, 52, 43, 0.5);
background: rgba(196, 52, 43, 0.10);
}
/* Purple text utility — Sold mode label. */
.ev-text-purple {
color: #6d28d9 !important;
}
/* Purple-accented buttons (outline + solid). */
.ev-btn-outline-purple {
color: #6d28d9;
border: 1px solid #8b5cf6;
background: #ffffff;
}
.ev-btn-outline-purple:hover,
.ev-btn-outline-purple:focus {
color: #ffffff;
background: #8b5cf6;
border-color: #8b5cf6;
}
.ev-btn-outline-purple:active,
.ev-btn-outline-purple.active {
color: #ffffff !important;
background: #7c3aed !important;
border-color: #7c3aed !important;
}
.ev-btn-purple {
color: #ffffff;
background: #8b5cf6;
border: 1px solid #8b5cf6;
}
.ev-btn-purple:hover,
.ev-btn-purple:focus {
color: #ffffff;
background: #7c3aed;
border-color: #7c3aed;
}
.ev-btn-purple:active {
background: #6d28d9 !important;
border-color: #6d28d9 !important;
}
/* Sold mode — violet/purple on cream. */
#selected-item-info.ev-bulk-mode-sold {
border-color: rgba(139, 92, 246, 0.55) !important;
box-shadow:
0 0 0 1px rgba(139, 92, 246, 0.25),
0 8px 22px rgba(139, 92, 246, 0.15),
inset 4px 0 0 rgba(139, 92, 246, 0.85) !important;
}
#selected-item-info.ev-bulk-mode-sold .ev-bulk-mode-pill {
color: #5a1e88;
border-color: rgba(139, 92, 246, 0.55);
background: rgba(139, 92, 246, 0.10);
}
#selected-item-info.ev-bulk-mode-audit {
border-color: rgba(14, 126, 153, 0.55) !important;
box-shadow:
0 0 0 1px rgba(14, 126, 153, 0.25),
0 8px 22px rgba(14, 126, 153, 0.15),
inset 4px 0 0 rgba(14, 126, 153, 0.85) !important;
}
#selected-item-info.ev-bulk-mode-audit .ev-bulk-mode-pill {
color: #0b5e73;
border-color: rgba(14, 126, 153, 0.55);
background: rgba(14, 126, 153, 0.10);
}
/* Change-status mode — gold/amber. */
#selected-item-info.ev-bulk-mode-status {
border-color: rgba(212, 175, 55, 0.65) !important;
box-shadow:
0 0 0 1px rgba(212, 175, 55, 0.28),
0 8px 22px rgba(212, 175, 55, 0.18),
inset 4px 0 0 rgba(212, 175, 55, 0.85) !important;
}
#selected-item-info.ev-bulk-mode-status .ev-bulk-mode-pill {
color: #6e5518;
border-color: rgba(212, 175, 55, 0.55);
background: rgba(212, 175, 55, 0.12);
}
.ev-bulk-store-badge {
background: rgba(14, 126, 153, 0.12) !important;
color: #0b5e73 !important;
border: 1px solid rgba(14, 126, 153, 0.35);
font-weight: 500;
}
.ev-audit-store-hint {
color: #0b5e73 !important;
border-left: 3px solid rgba(14, 126, 153, 0.45);
padding-left: 0.75rem;
}
#main-app.ev-inventory-bulk-audit #inventory-tbody tr.inv-bulk-selected {
box-shadow: inset 4px 0 0 #0e7e99;
background: rgba(14, 126, 153, 0.14) !important;
}
#main-app.ev-inventory-bulk-audit #inventory-tbody tr.inv-bulk-selected td {
color: var(--ev-text) !important;
}
/* Sold mode — violet selection stripe. */
#main-app.ev-inventory-bulk-sold #inventory-tbody tr.inv-bulk-selected {
box-shadow: inset 4px 0 0 #8b5cf6;
background: rgba(139, 92, 246, 0.14) !important;
}
#main-app.ev-inventory-bulk-sold #inventory-tbody tr.inv-bulk-selected td {
color: var(--ev-text) !important;
}
/* Bulk modes used to paint a screen-wide border halo. We dropped that —
the local cues (tinted info bar + subtle search-bar ring) are enough.
The search bar gets a very soft mode-colored ring so the user still
knows the query box doubles as the scanner, without the whole app
going red/purple/yellow. */
#main-app.ev-inventory-bulk-return #inventory-search,
#main-app.ev-inventory-bulk-return .inventory-search-input-group {
box-shadow: 0 0 0 1px rgba(196, 52, 43, 0.45);
border-radius: 0.6rem;
}
#main-app.ev-inventory-bulk-sold #inventory-search,
#main-app.ev-inventory-bulk-sold .inventory-search-input-group {
box-shadow: 0 0 0 1px rgba(109, 40, 217, 0.45);
border-radius: 0.6rem;
}
#main-app.ev-inventory-bulk-status #inventory-search,
#main-app.ev-inventory-bulk-status .inventory-search-input-group {
box-shadow: 0 0 0 1px rgba(180, 142, 20, 0.45);
border-radius: 0.6rem;
}
/* Vendor picker modal — no inline styles */
#vendorSelectionModal .ev-vendor-search-input {
font-size: 1.05rem;
}
#vendorSelectionModal .ev-vendor-list {
max-height: 400px;
overflow-y: auto;
border: 1px solid rgba(31, 27, 20, 0.12);
border-radius: 6px;
background: #ffffff;
}
#vendorSelectionModal .ev-vendor-list .ev-vendor-row {
background: #fffdf6;
border-bottom: 1px solid rgba(31, 27, 20, 0.08);
display: flex;
}
#vendorSelectionModal .ev-vendor-list .ev-vendor-row:last-child {
border-bottom: none;
}
/* Dashboard — icon rows (replaces emoji) */
.ev-dash-status-icon .fas {
font-size: 1.35rem;
opacity: 0.95;
}
.ev-dash-loc-icon .fas {
font-size: 1.35rem;
color: var(--ev-hud-cyan);
opacity: 0.9;
}
.card .card-header .card-title {
letter-spacing: 0.04em;
font-weight: 600;
font-size: 0.9rem;
text-transform: uppercase;
color: #5d4614;
margin-bottom: 0;
}
.card .card-header .card-title .fas {
color: var(--ev-hud-cyan);
opacity: 0.95;
}
/* Walk-in intake — secondary CTA (gold rim; matches HUD, not Bootstrap info) */
.btn-ev-walkin {
color: #5d4614 !important;
border: 1px solid rgba(212, 175, 55, 0.55) !important;
background: rgba(212, 175, 55, 0.10) !important;
font-weight: 600;
letter-spacing: 0.02em;
border-radius: 4px;
transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.btn-ev-walkin:hover {
color: #3d2e0e !important;
border-color: rgba(212, 175, 55, 0.85) !important;
background: rgba(212, 175, 55, 0.22) !important;
box-shadow: 0 4px 14px rgba(212, 175, 55, 0.18);
}
.btn-ev-walkin:focus-visible {
outline: none;
box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.45);
}
.ev-consignments-split {
display: grid;
gap: 1rem;
}
.ev-consign-tab-card {
overflow: hidden;
box-shadow: 0 16px 38px rgba(55, 42, 18, 0.08);
}
.ev-consign-tab-card .card-header {
background:
linear-gradient(135deg, rgba(212, 175, 55, 0.10), rgba(14, 126, 153, 0.06)),
rgba(255, 253, 246, 0.76) !important;
}
.ev-consign-tab-card .card-header h5 {
letter-spacing: 0.01em;
}
.ev-consign-card-action {
display: inline-flex;
align-items: center;
min-width: 11.5rem;
justify-content: center;
white-space: nowrap;
}
/* Walk-in modal — intro strip + next code */
#walkInIntakeModal .ev-walkin-intro {
padding: 0.85rem 1.1rem;
border-radius: 6px;
border: 1px solid rgba(14, 126, 153, 0.3);
background:
linear-gradient(125deg, rgba(14, 126, 153, 0.08) 0%, transparent 52%),
#fffdf6;
line-height: 1.55;
color: var(--ev-text);
}
#walkInIntakeModal .ev-walkin-intro code {
font-size: 0.9em;
padding: 0.15em 0.4em;
border-radius: 4px;
background: #fbf3d9;
border: 1px solid rgba(212, 175, 55, 0.35);
color: #5d4614;
}
/* Next code — title-style (not an input) */
#walkInIntakeModal .ev-walkin-next-hud {
padding: 1rem 1.25rem 1.1rem;
border-radius: 8px;
border: 1px solid rgba(212, 175, 55, 0.35);
background: linear-gradient(
180deg,
rgba(212, 175, 55, 0.14) 0%,
#fffdf6 100%
);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
#walkInIntakeModal .ev-walkin-next-code-value {
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-weight: 700;
font-size: clamp(1.35rem, 3.2vw, 1.85rem);
letter-spacing: 0.1em;
line-height: 1.2;
text-shadow: 0 0 18px rgba(212, 175, 55, 0.25);
}
/* Focus ring — gold HUD like main nav tabs */
#walkInIntakeModal .ev-walkin-field:focus,
#walkInIntakeModal .ev-walkin-field:focus-visible {
outline: none;
border-color: rgba(212, 175, 55, 0.75) !important;
background-color: #ffffff !important;
color: var(--ev-text) !important;
box-shadow:
inset 0 0 0 1px rgba(212, 175, 55, 0.35),
0 0 0 1px rgba(212, 175, 55, 0.22),
0 0 14px rgba(212, 175, 55, 0.18),
inset 0 0 16px rgba(212, 175, 55, 0.05);
}
#walkInIntakeModal #walk-in-result:not(.d-none) {
padding: 0.65rem 0.9rem;
border-radius: 6px;
border: 1px solid rgba(30, 158, 87, 0.45);
background: rgba(30, 158, 87, 0.10);
color: #0f5b34;
}
#walkInIntakeModal .walk-in-lines-wrap {
background: #ffffff;
max-height: min(50vh, 28rem);
overflow-y: auto;
}
#walkInIntakeModal .walk-in-lines-wrap thead th {
position: sticky;
top: 0;
z-index: 2;
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #5d4614;
border-bottom-color: rgba(212, 175, 55, 0.35);
padding-top: 0.5rem;
padding-bottom: 0.5rem;
background: var(--ev-surface-header);
box-shadow: 0 1px 0 rgba(212, 175, 55, 0.2);
}
#walkInIntakeModal .walk-in-lines-wrap tbody td {
vertical-align: middle;
padding: 0.35rem 0.5rem;
}
/* New consignment modal — layout + items panel */
#consignmentModal .ev-consign-section {
padding-bottom: 1.25rem;
margin-bottom: 1.25rem;
border-bottom: 1px solid var(--ev-hud-edge);
}
#consignmentModal .ev-consign-section-title {
margin: 0 0 0.9rem;
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ev-text-muted);
}
#consignmentModal .ev-consign-kicker {
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ev-text-muted);
}
#consignmentModal .ev-consign-count-badge {
min-width: 2rem;
padding: 0.35em 0.65em;
font-size: 0.85rem;
font-weight: 600;
background: rgba(212, 175, 55, 0.22) !important;
color: #5d4614 !important;
border: 1px solid rgba(212, 175, 55, 0.55);
}
#consignmentModal .ev-consign-hint {
max-width: 22rem;
text-align: right;
line-height: 1.35;
}
@media (max-width: 767.98px) {
#consignmentModal .ev-consign-hint {
text-align: left;
max-width: none;
}
}
#consignmentModal .ev-consign-items-panel {
padding: 1rem 1.15rem 1.15rem;
border-radius: 8px;
border: 1px solid var(--ev-hud-glass-border);
background:
linear-gradient(180deg, rgba(212, 175, 55, 0.08) 0%, transparent 42%),
#fffdf6;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
#consignmentModal .ev-consign-list-label {
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ev-text-muted);
}
#consignmentModal .ev-consign-selected-badges {
min-height: 2.75rem;
padding: 0.55rem 0.8rem;
border-radius: 6px;
border: 1px solid rgba(14, 126, 153, 0.22);
border-left: 3px solid rgba(14, 126, 153, 0.55);
background: #ffffff;
color: var(--ev-text-muted);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem;
}
#consignmentModal .ev-consign-selected-badges:empty {
min-height: 2.75rem;
}
/* Gold HUD on the inventory search field (not the selected-SKU list) */
#consignmentModal .ev-consign-search-hud {
border-radius: 8px;
padding: 2px;
background: linear-gradient(
135deg,
rgba(212, 175, 55, 0.45) 0%,
rgba(212, 175, 55, 0.14) 45%,
rgba(14, 126, 153, 0.14) 100%
);
box-shadow:
0 0 0 1px rgba(212, 175, 55, 0.35),
0 4px 14px rgba(80, 60, 20, 0.10),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
#consignmentModal .ev-consign-search-hud:focus-within {
box-shadow:
0 0 0 1px rgba(212, 175, 55, 0.65),
0 0 18px rgba(212, 175, 55, 0.25),
0 6px 16px rgba(80, 60, 20, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
#consignmentModal .ev-consign-search-hud .form-control {
border: none;
border-radius: 6px 0 0 6px;
}
#consignmentModal .ev-consign-search-hud .btn-gold {
border-radius: 0 6px 6px 0;
min-width: 5.5rem;
}
#consignmentModal #consignment-create-btn:disabled {
opacity: 0.92;
cursor: wait;
}
#consignmentModal .ev-consign-table-wrap {
max-height: min(320px, 42vh);
overflow: auto;
border-radius: 6px;
border: 1px solid var(--ev-hud-edge);
background: #ffffff;
}
#consignmentModal .ev-consign-table thead th {
position: sticky;
top: 0;
z-index: 2;
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #5d4614 !important;
border-bottom: 1px solid rgba(212, 175, 55, 0.35) !important;
padding: 0.55rem 0.65rem;
vertical-align: middle;
background: var(--ev-surface-header) !important;
box-shadow: 0 1px 0 rgba(212, 175, 55, 0.2);
}
#consignmentModal .ev-consign-table thead th.ev-consign-th-check {
width: 2.75rem;
}
#consignmentModal .ev-consign-table tbody td {
vertical-align: middle;
padding: 0.45rem 0.65rem;
border-color: rgba(31, 27, 20, 0.08);
}
#consignmentModal .ev-consign-table tbody tr:hover {
background: rgba(212, 175, 55, 0.08);
}
/* Consignment detail (read-only) modal — toolbar on top, summary + table */
#consignmentDetailModal .ev-consign-detail-toolbar {
background: var(--ev-surface-header);
box-shadow: inset 0 -1px 0 rgba(212, 175, 55, 0.28);
}
#consignmentDetailModal .ev-consign-detail-summary {
padding: 0.35rem 0 0.25rem;
}
#consignmentDetailModal .ev-consign-detail-kv {
display: flex;
flex-direction: column;
gap: 0.2rem;
}
#consignmentDetailModal .ev-consign-detail-k {
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ev-text-muted);
}
#consignmentDetailModal .ev-consign-detail-v {
font-size: 0.95rem;
line-height: 1.35;
color: var(--ev-text);
}
#consignmentDetailModal .ev-consign-detail-notes {
padding: 0.75rem 1rem;
border-radius: 8px;
border: 1px solid var(--ev-hud-glass-border);
background: #fffdf6;
}
#consignmentDetailModal .ev-consign-detail-notes-body {
font-size: 0.9rem;
line-height: 1.45;
white-space: pre-wrap;
}
#consignmentDetailModal .ev-consign-detail-section-title {
margin: 0;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ev-text-muted);
}
#consignmentDetailModal .ev-consign-detail-table-wrap {
max-height: min(48vh, 22rem);
overflow: auto;
border-radius: 8px;
border: 1px solid var(--ev-hud-edge);
background: #ffffff;
}
#consignmentDetailModal .ev-consign-detail-items-table thead th.ev-consign-detail-th {
position: sticky;
top: 0;
z-index: 1;
font-size: 0.68rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #5d4614 !important;
background: var(--ev-surface-header) !important;
border-bottom: 1px solid rgba(212, 175, 55, 0.35) !important;
padding: 0.5rem 0.65rem;
}
#consignmentDetailModal .ev-consign-detail-items-table tbody td {
border-color: rgba(31, 27, 20, 0.08);
padding: 0.45rem 0.65rem;
}
#consignmentDetailModal .ev-consign-detail-items-table tbody tr:hover td {
background: rgba(212, 175, 55, 0.10);
}
/* ─────────────────────────────────────────────────────────────────────────
Cream-theme compat shim — overrides Bootstrap dark utility classes
sprinkled across index.html / app.js without needing to touch markup.
Goal: anything that previously assumed a black canvas reads on cream.
───────────────────────────────────────────────────────────────────────── */
/* Force readable text on cream for Bootstrap dark shells */
.modal-content.bg-dark,
.modal-content.bg-black,
.card.bg-dark,
.card.bg-black,
div.bg-dark,
div.bg-black,
section.bg-dark,
section.bg-black,
.alert-dark {
background-color: var(--ev-surface) !important;
color: var(--ev-text) !important;
}
/* Nav/header strips Bootstrap tints dark */
.navbar-dark {
background-color: rgba(255, 253, 248, 0.92) !important;
}
.navbar-dark .navbar-brand,
.navbar-dark .nav-link,
.navbar-dark .navbar-text {
color: var(--ev-text) !important;
}
/* Bootstrap alerts — keep the tints but land them on cream, not black */
.alert-info {
background-color: #e6f3f7 !important;
border-color: rgba(14, 126, 153, 0.35) !important;
color: #0b5e73 !important;
}
.alert-success {
background-color: #e8f5ed !important;
border-color: rgba(30, 158, 87, 0.35) !important;
color: #0f5b34 !important;
}
.alert-warning {
background-color: #fdf4d3 !important;
border-color: rgba(201, 161, 0, 0.45) !important;
color: #6e5518 !important;
}
.alert-danger {
background-color: #fbe6e5 !important;
border-color: rgba(196, 52, 43, 0.35) !important;
color: #7a1a17 !important;
}
/* Close-button in modals — Bootstrap ships an inverted (white) SVG; flip it */
.btn-close,
.btn-close-white {
filter: none !important;
opacity: 0.7;
}
.btn-close:hover { opacity: 1; }
/* Bootstrap buttons that assumed a dark canvas */
.btn-outline-light {
color: var(--ev-text) !important;
border-color: rgba(31, 27, 20, 0.25) !important;
background: #ffffff !important;
}
.btn-outline-light:hover,
.btn-outline-light:focus {
background: #f7efd8 !important;
color: #5d4614 !important;
border-color: #d4af37 !important;
}
/* Form-check (checkboxes/radios) — tint the box face cream instead of dark.
When checked, paint gold + force an ink-dark tick SVG so the check is
always obvious on our gold surface (Bootstrap ships a white tick which
washes out on gold). */
.form-check-input {
background-color: #ffffff !important;
border-color: rgba(31, 27, 20, 0.35) !important;
}
.form-check-input:checked {
background-color: #d4af37 !important;
border-color: #8a6b11 !important;
}
.form-check-input[type=checkbox]:checked {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%231f1b14' stroke-linecap='round' stroke-linejoin='round' stroke-width='3.2' d='M5 10.5l3.2 3.2L15.5 6'/%3e%3c/svg%3e") !important;
background-size: 70% 70% !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
.form-check-input[type=radio]:checked {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2.2' fill='%231f1b14'/%3e%3c/svg%3e") !important;
}
.form-check-input[type=checkbox]:indeterminate {
background-color: #b8962e !important;
border-color: #8a6b11 !important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath stroke='%231f1b14' stroke-linecap='round' stroke-width='3' d='M5 10h10'/%3e%3c/svg%3e") !important;
background-size: 65% 65% !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
.form-check-input:focus {
border-color: #d4af37 !important;
box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.28) !important;
}
.form-check-label {
color: var(--ev-text) !important;
}
/* Make sure ANY bare checkbox (not just .form-check-input) still shows a
tick. Many of our tree-view rows use plain and
rely on the UA default paint — on some platforms that paints invisible
on a cream background. Force a consistent checked look. */
input[type="checkbox"] {
accent-color: #d4af37;
}
/* Text helpers that appear on dark backgrounds historically */
.text-body,
.text-dark {
color: var(--ev-text) !important;
}
/* Inventory tabs / pills that use btn-outline-secondary on dark */
.btn-outline-secondary {
color: var(--ev-text) !important;
border-color: rgba(31, 27, 20, 0.25) !important;
background: #ffffff;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
background: #f2ead4;
border-color: rgba(31, 27, 20, 0.35) !important;
color: var(--ev-text) !important;
}
/* Html/body fallback color so lonely text doesn't vanish */
body, html {
color: var(--ev-text);
}
/* Placeholder color for any fields without our earlier rule */
::placeholder {
color: rgba(31, 27, 20, 0.42);
opacity: 1;
}
/* Input groups that carry their own dark background */
.input-group-text {
background: var(--ev-surface-header) !important;
color: var(--ev-text) !important;
border-color: rgba(31, 27, 20, 0.18) !important;
}
/* Code / kbd / pre on cream */
code, kbd, pre, samp {
color: #5d4614;
background: rgba(212, 175, 55, 0.08);
}
pre {
background: #fffdf6;
border: 1px solid rgba(31, 27, 20, 0.10);
padding: 0.75rem;
border-radius: 4px;
}
/* Muted small print everywhere */
small,
.small,
.form-text {
color: var(--ev-text-muted) !important;
}
/* Bootstrap semantic text utilities — darken so they pass on cream.
Defaults (#0dcaf0 cyan, #ffc107 yellow, #198754 green-on-white) are
legible on black but flat on paper. These darker tones preserve the
"this is info / warning / success" cue without washing out. */
.text-info {
color: #0b5e73 !important;
}
.text-warning {
color: #8a6b11 !important;
}
.text-success {
color: #0f5b34 !important;
}
.text-danger {
color: #a4261f !important;
}
.text-primary {
color: #0b4e87 !important;
}
.text-secondary {
color: var(--ev-text-muted) !important;
}
/* Bootstrap background utilities used for little inline tints
(e.g. ) — land them on cream, not pure yellow */
.bg-warning {
background-color: #fdf4d3 !important;
color: #6e5518 !important;
}
.bg-info {
background-color: #e6f3f7 !important;
color: #0b5e73 !important;
}
.bg-success {
background-color: #e8f5ed !important;
color: #0f5b34 !important;
}
.bg-danger {
background-color: #fbe6e5 !important;
color: #7a1a17 !important;
}
/* Scrollbars — warm cream-tone thumbs so scrollable lists don't jar */
*::-webkit-scrollbar {
width: 10px;
height: 10px;
}
*::-webkit-scrollbar-track {
background: transparent;
}
*::-webkit-scrollbar-thumb {
background: rgba(31, 27, 20, 0.18);
border-radius: 10px;
border: 2px solid transparent;
background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
background: rgba(212, 175, 55, 0.55);
background-clip: content-box;
}
/* Selection — warm gold tint */
::selection {
background: rgba(212, 175, 55, 0.45);
color: #2a1f08;
}
/* Gold utility on cream reads better as darker amber than pure #d4af37 when
used as prose text (headings/section titles still want #d4af37 for brand). */
.text-gold-on-cream {
color: #8a6b11 !important;
}
/* Links — give them a stable brand tone instead of Bootstrap blue */
a,
a:visited {
color: #0b5e73;
}
a:hover,
a:focus {
color: #094a5a;
text-decoration: underline;
}
a.btn,
a.nav-link,
a.dropdown-item,
a.list-group-item {
color: inherit;
text-decoration: none;
}
a.btn:hover {
text-decoration: none;
}