/* ==========================================================================
Beautifly Shop — INVENTORY
Loaded after style.css and scoped entirely under #inventoryView, so it
cannot reach any existing screen. Every colour, radius, shadow and font
comes from the variables already defined in style.css :root — there are
no new hard-coded brand colours here, which is what keeps Inventory
looking like the rest of the app when the brand colour is changed in
Settings.
========================================================================== */
#inventoryView {
display: flex;
flex-direction: column;
gap: 14px;
/* THE reason Inventory still looked narrow after the max-width override.
style.css sets `.layout { align-items: start }` above 1000px, which is
harmless on a CSS grid but, once this view became a flex column, told
every panel to shrink to its own content width instead of filling the
row. That is why the table panel was only as wide as its columns and
Category summary sat in a small box on the left. */
align-items: stretch;
}
/* Every direct block inside the Inventory panel — the stat cards, the
category tabs, the sub-category tabs, the toolbar, the table and the
pager — used to sit with zero space between them because .panel only
adds padding around the whole group, not gaps between its children.
Making the panel itself a column flexbox with a consistent gap fixes
every one of those "rows are touching" spots in one place, including
the page-number strip that was pressed up against the table above it. */
#inventoryView .panel {
display: flex;
flex-direction: column;
gap: 16px;
}
#inventoryView .panel-head {
margin-bottom: 0; /* spacing now comes from the panel's own gap */
}
/* ==========================================================================
FULL-WIDTH DESKTOP LAYOUT
style.css caps .layout-single at 640px — right for the Fraud Checker and
Tracking tabs, which are a single narrow form. A spreadsheet is the
opposite case: 17 columns, 7 dashboard cards and a filter bar all need
room, and squeezing them into 640px forced the cards to wrap 3/3/1 and the
toolbar onto three lines. Settings already takes the same override at
1250px; Inventory goes further and uses the whole window, because unlike
Settings its content is a wide table.
========================================================================== */
@media (min-width: 1000px) {
#inventoryView.layout-single {
max-width: none;
width: 100%;
padding-left: 22px;
padding-right: 22px;
}
/* Six cards, one row — the figures are meant to be read at a glance as a
single set, not hunted for across wrapped lines. (Six, not seven: Total
Buying Value was removed at the shop's request.) */
#inventoryView .inv-cards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
/* The filter bar fits on one line at this width; the search box takes
whatever is left over rather than every control stretching. */
#inventoryView .inv-toolbar { flex-wrap: nowrap; }
#inventoryView .inv-search-wrap { flex: 1 1 auto; min-width: 180px; }
#inventoryView .inv-toolbar select,
#inventoryView .inv-toolbar .inv-btn { flex: 0 0 auto; }
/* Column widths are set by the user via , so the layout stays
fixed at every screen size. */
#inventoryView .inv-table tbody td { padding: 8px 11px; }
#inventoryView .inv-table thead th { padding: 11px 11px; }
#inventoryView .inv-breakdown { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Between 1000px and ~1350px six equal cards get too narrow to read the
longer labels, so they go two rows of three rather than being truncated. */
@media (min-width: 1000px) and (max-width: 1350px) {
#inventoryView .inv-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#inventoryView .inv-toolbar { flex-wrap: wrap; }
}
/* Very wide monitors: stop the table stretching so far that the eye has to
travel from a product name on the left to its quantity on the right. */
@media (min-width: 2100px) {
#inventoryView.layout-single { max-width: 2040px; margin-inline: auto; }
}
/* ---------------------------------------------------------- panel head */
#inventoryView .panel-head-icon { align-items: center; }
/* ------------------------------------------------------------- notices */
.inv-notice {
padding: 10px 14px;
border-radius: var(--r-sm);
font-size: 13.5px;
line-height: 1.5;
border: 1px solid var(--line);
}
.inv-notice.ok { background: var(--success-soft); border-color: #cfe2d5; color: var(--success); }
.inv-notice.err { background: var(--warn-soft); border-color: #f0cfc9; color: var(--warn); }
/* Half-succeeded: amber, and deliberately not the red used for failure —
the photo still exists, it just did not reach both destinations. */
.inv-notice.warn { background: #fff6e5; border-color: #f0dcb4; color: #8a5b00; }
.inv-drive-mirror {
margin: .25rem 0 0;
font-size: .78rem;
color: var(--muted);
}
.inv-drive-mirror.is-low { color: #8a5b00; font-weight: 600; }
.inv-engine-warn {
padding: 9px 13px;
border-radius: var(--r-sm);
background: #FDF4E3;
border: 1px solid #EBD9B4;
color: #7A5A1E;
font-size: 12.5px;
line-height: 1.55;
}
/* ---------------------------------------------------------- dash cards */
.inv-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
gap: 10px;
}
.inv-card {
display: flex;
align-items: center;
gap: 11px;
padding: 13px 14px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r);
box-shadow: var(--shadow);
min-width: 0;
}
.inv-card-badge {
flex: 0 0 auto;
width: 38px; height: 38px;
display: grid; place-items: center;
border-radius: var(--r-pill);
background: var(--accent-soft);
color: var(--accent);
}
.inv-card-badge svg { width: 20px; height: 20px; }
.inv-card.tone-danger .inv-card-badge { background: var(--warn-soft); color: var(--warn); }
.inv-card.tone-warn .inv-card-badge { background: #FDF1E0; color: #A96A17; }
.inv-card.tone-purple .inv-card-badge { background: #EDE7FB; color: #7C5CD6; }
.inv-card.tone-blue .inv-card-badge { background: #E3EEFC; color: #2F6FE0; }
.inv-card.tone-peach .inv-card-badge { background: #FCEBDD; color: #D97A3E; }
.inv-card.tone-green .inv-card-badge { background: #E1F5EA; color: #21A366; }
.inv-card { align-items: flex-start; }
.inv-card-body { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
/* The label wraps to a second line rather than truncating. "Total Product
Variants" was showing as "Total Product Var…" once seven cards shared one
row, which defeats the point of a label. Two lines are reserved either way
so the seven cards stay the same height. */
.inv-card-label {
font-size: 11.5px; color: var(--muted); letter-spacing: .1px;
line-height: 1.3;
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
line-clamp: 2; overflow: hidden;
min-height: 2.6em;
}
.inv-card-value {
font-family: var(--font-display);
font-size: 20px; line-height: 1.15; color: var(--ink);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.inv-card-sub { font-size: 10.5px; color: var(--muted-soft); }
/* ------------------------------------------------------ category tabs */
.inv-cat-tabs {
display: flex; gap: 4px; flex-wrap: wrap;
padding: 5px;
background: var(--accent-soft);
border-radius: var(--r);
}
.inv-cat-tab {
flex: 1 1 auto;
display: inline-flex; align-items: center; justify-content: center; gap: 7px;
padding: 9px 16px;
border: 0;
border-radius: var(--r-sm);
background: transparent;
color: var(--accent-dark);
font: inherit; font-size: 14px; font-weight: 600;
cursor: pointer;
transition: background .15s, color .15s;
white-space: nowrap;
}
.inv-cat-tab-ic { width: 16px; height: 16px; flex: 0 0 auto; }
.inv-cat-tab:hover { background: rgba(255, 255, 255, .55); }
.inv-cat-tab.active { background: var(--accent); color: #fff; }
/* Desktop reads the full name (Face Makeup); mobile switches to the short
one (Face) — see the 780px block below. */
.inv-cat-tab-short { display: none; }
.inv-sub-tabs { display: flex; gap: 7px; flex-wrap: wrap; }
.inv-sub-tab {
padding: 7px 14px;
border: 1px solid var(--line-strong);
border-radius: var(--r-pill);
background: var(--surface);
color: var(--ink);
font: inherit; font-size: 13px;
cursor: pointer;
transition: background .15s, border-color .15s, color .15s;
}
.inv-sub-tab:hover { border-color: var(--accent); color: var(--accent); }
.inv-sub-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }
/* ---------------------------------------------------------- toolbar */
.inv-toolbar {
display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.inv-search-wrap { flex: 1 1 220px; min-width: 0; position: relative; }
.inv-toolbar input[type="search"],
.inv-toolbar select {
width: 100%;
padding: 9px 12px;
border: 1px solid var(--line-strong);
border-radius: var(--r-sm);
background: var(--surface);
color: var(--ink);
font: inherit; font-size: 13.5px;
}
.inv-toolbar select { width: auto; cursor: pointer; }
.inv-toolbar input[type="search"]:focus,
.inv-toolbar select:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.inv-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 9px 14px;
border: 1px solid var(--line-strong);
border-radius: var(--r-sm);
background: var(--surface);
color: var(--ink);
font: inherit; font-size: 13.5px; font-weight: 500;
cursor: pointer;
transition: background .15s, border-color .15s, color .15s;
}
.inv-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.inv-btn:disabled { opacity: .4; cursor: default; }
.inv-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.inv-btn.primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.inv-btn.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-dark); }
/* ---------------------------------------------------------- bulk bar */
.inv-bulk-bar {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
padding: 9px 13px;
background: var(--accent-soft);
border: 1px solid var(--accent);
border-radius: var(--r-sm);
}
.inv-bulk-count { font-size: 13px; font-weight: 600; color: var(--accent-dark); margin-right: 4px; }
.inv-bulk-bar .inv-btn { padding: 6px 11px; font-size: 12.5px; }
/* ------------------------------------------------------------- table */
.inv-table-wrap {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r);
box-shadow: var(--shadow);
overflow-x: auto;
transition: opacity .15s;
}
.inv-table-wrap.loading { opacity: .5; pointer-events: none; }
.inv-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
/* fixed layout is what makes widths authoritative — with the
default `auto`, the browser would ignore a dragged width the moment a
cell's content wanted more room. */
table-layout: fixed;
}
.inv-table th, .inv-table td { overflow: hidden; }
.inv-table thead th {
position: relative;
position: sticky; top: 0; z-index: 2;
background: #FAF8F7;
color: var(--ink);
font-weight: 700; font-size: 12.5px;
letter-spacing: 0; text-transform: none;
text-align: left;
padding: 12px 9px;
white-space: nowrap;
border-bottom: 1px solid var(--line-strong);
}
.inv-table tbody td {
padding: 7px 9px;
border-bottom: 1px solid var(--line);
vertical-align: middle;
color: var(--ink);
}
.inv-row { transition: background .15s; }
.inv-row:hover { background: #FCF8F7; }
/* Stock state, and only one of them: zero left is red, anything in stock is
plain white. Strong enough to pick out while scrolling — the earlier tint
was so faint it read as a stripe rather than a warning. */
.inv-row.is-out {
background: #F8CFC8;
/* The grey used for SL, Product ID and the mobile labels only reaches 3:1
against this tint. Overriding the variable on the row re-darkens every
one of them at once, and only inside these rows. */
--muted: #66494D;
}
.inv-row.is-out:hover { background: #F4BCB3; }
.inv-row.is-selected { background: var(--accent-soft) !important; }
.inv-row.dragging { opacity: .45; }
.inv-row.drop-above td { box-shadow: inset 0 2px 0 var(--accent); }
.inv-row.drop-below td { box-shadow: inset 0 -2px 0 var(--accent); }
@keyframes invFlash { from { background: var(--accent-soft); } to { background: transparent; } }
.inv-row.flash { animation: invFlash 1.6s ease-out; }
.inv-table .c-drag { width: 26px; }
.inv-table .c-check { width: 30px; }
.inv-table .c-sl { width: 40px; color: var(--muted); font-variant-numeric: tabular-nums; }
.inv-table .c-qty { width: 118px; }
.inv-table .c-price { width: 96px; font-variant-numeric: tabular-nums; }
.inv-table .c-pid { width: 106px; }
.inv-table .c-gid { width: 130px; }
.inv-group-cell {
display: inline-flex;
align-items: center;
gap: 3px;
border-radius: 6px;
padding: 1px 4px;
max-width: 100%;
transition: all 0.15s ease;
}
.inv-group-cell.has-gid {
background: rgba(84, 29, 255, 0.05);
border: 1px solid rgba(84, 29, 255, 0.15);
}
/* 6 distinct aesthetic palettes for Group IDs */
.inv-group-cell.gid-palette-0 { background: #ecfdf5; border-color: #a7f3d0; }
.inv-group-cell.gid-palette-0 .group-val { color: #047857; }
.inv-group-cell.gid-palette-0 .inv-group-btn.gen,
.inv-group-cell.gid-palette-0 .inv-group-btn.copy { color: #059669; }
.inv-group-cell.gid-palette-0 .inv-group-btn:hover:not(:disabled) { background: rgba(5, 150, 105, 0.15); color: #047857; }
.inv-group-cell.gid-palette-1 { background: #f5f3ff; border-color: #ddd6fe; }
.inv-group-cell.gid-palette-1 .group-val { color: #6d28d9; }
.inv-group-cell.gid-palette-1 .inv-group-btn.gen,
.inv-group-cell.gid-palette-1 .inv-group-btn.copy { color: #7c3aed; }
.inv-group-cell.gid-palette-1 .inv-group-btn:hover:not(:disabled) { background: rgba(124, 58, 237, 0.15); color: #6d28d9; }
.inv-group-cell.gid-palette-2 { background: #eff6ff; border-color: #bfdbfe; }
.inv-group-cell.gid-palette-2 .group-val { color: #1d4ed8; }
.inv-group-cell.gid-palette-2 .inv-group-btn.gen,
.inv-group-cell.gid-palette-2 .inv-group-btn.copy { color: #2563eb; }
.inv-group-cell.gid-palette-2 .inv-group-btn:hover:not(:disabled) { background: rgba(37, 99, 235, 0.15); color: #1d4ed8; }
.inv-group-cell.gid-palette-3 { background: #fff1f2; border-color: #fecdd3; }
.inv-group-cell.gid-palette-3 .group-val { color: #be123c; }
.inv-group-cell.gid-palette-3 .inv-group-btn.gen,
.inv-group-cell.gid-palette-3 .inv-group-btn.copy { color: #e11d48; }
.inv-group-cell.gid-palette-3 .inv-group-btn:hover:not(:disabled) { background: rgba(225, 29, 72, 0.15); color: #be123c; }
.inv-group-cell.gid-palette-4 { background: #fffbeb; border-color: #fde68a; }
.inv-group-cell.gid-palette-4 .group-val { color: #b45309; }
.inv-group-cell.gid-palette-4 .inv-group-btn.gen,
.inv-group-cell.gid-palette-4 .inv-group-btn.copy { color: #d97706; }
.inv-group-cell.gid-palette-4 .inv-group-btn:hover:not(:disabled) { background: rgba(217, 119, 6, 0.15); color: #b45309; }
.inv-group-cell.gid-palette-5 { background: #f0fdfa; border-color: #99f6e4; }
.inv-group-cell.gid-palette-5 .group-val { color: #0f766e; }
.inv-group-cell.gid-palette-5 .inv-group-btn.gen,
.inv-group-cell.gid-palette-5 .inv-group-btn.copy { color: #0d9488; }
.inv-group-cell.gid-palette-5 .inv-group-btn:hover:not(:disabled) { background: rgba(13, 148, 136, 0.15); color: #0f766e; }
.inv-group-cell.no-gid {
background: transparent;
border: 1px solid transparent;
}
.inv-group-cell.no-gid:hover {
background: rgba(0, 0, 0, 0.03);
border-color: rgba(0, 0, 0, 0.08);
}
.inv-group-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border: none;
background: transparent;
color: #64748b;
cursor: pointer;
border-radius: 4px;
padding: 0;
transition: all 0.15s ease;
flex: 0 0 auto;
}
.inv-group-btn:hover:not(:disabled) {
background: rgba(84, 29, 255, 0.12);
color: #541dff;
}
.inv-group-btn.gen {
color: #8b5cf6;
}
.inv-group-btn.copy {
color: #64748b;
}
.inv-group-btn.copy.is-copied {
color: #10b981;
background: rgba(16, 185, 129, 0.12);
}
.inv-group-btn:disabled {
opacity: 0.18;
cursor: default;
pointer-events: none;
}
.inv-group-cell .group-val {
font-family: var(--mono, monospace);
font-size: 11.5px;
font-weight: 600;
color: #4338ca;
min-width: 32px;
text-align: center;
padding: 2px 3px;
outline: none;
border: 1px dashed transparent;
border-radius: 4px;
}
.inv-group-cell .group-val:focus {
background: #fff;
border-color: #6366f1;
}
.inv-group-cell .group-val.is-empty {
color: #cbd5e1;
font-weight: 400;
}
.inv-table .c-media { width: 60px; }
.inv-table .c-count { width: 54px; text-align: center; font-variant-numeric: tabular-nums; }
.inv-table .c-act { width: 66px; white-space: nowrap; }
/* ✎ and ⋮ were rendered with no separation and read as one wide button.
inline-flex + gap, rather than a margin, so the pair still sits inside the
fixed column width the gives it. */
.inv-table .c-act { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.inv-table .c-act .inv-icon-btn { flex: 0 0 auto; }
.inv-grip {
display: block; text-align: center;
color: var(--muted-soft); cursor: grab; font-size: 15px; line-height: 1;
user-select: none;
}
.inv-grip:active { cursor: grabbing; }
/* Editable cells look like plain text until you touch them — a grid of
input boxes would be visually exhausting at 25 rows a page. */
.inv-cell {
display: block;
min-height: 20px;
padding: 4px 6px;
margin: -4px -6px;
border-radius: 5px;
border: 1px solid transparent;
cursor: pointer;
word-break: break-word;
user-select: text;
box-sizing: border-box;
}
.inv-cell:hover {
border-color: #cbd5e1;
background: #f8fafc;
}
.inv-cell:focus {
outline: none;
}
.inv-cell.is-editing-active,
.inv-cell[contenteditable="true"]:focus {
outline: none !important;
border: 1.5px solid var(--accent, #be123c) !important;
background: #ffffff !important;
color: #111827 !important;
box-shadow: 0 0 0 3px rgba(190, 18, 60, 0.15), 0 2px 4px rgba(0,0,0,0.06) !important;
border-radius: 5px !important;
z-index: 20 !important;
position: relative !important;
cursor: text !important;
}
.inv-cell.num { text-align: right; font-variant-numeric: tabular-nums; }
.inv-qty { display: inline-flex; align-items: center; gap: 2px; }
.inv-qty-btn {
width: 24px; height: 24px;
display: grid; place-items: center;
border: 1px solid var(--line-strong);
border-radius: 6px;
background: var(--surface);
color: var(--accent);
font-size: 14px; line-height: 1;
cursor: pointer;
opacity: 0;
transition: opacity .12s, background .12s;
}
.inv-row:hover .inv-qty-btn,
.inv-qty-input:focus ~ .inv-qty-btn,
.inv-qty-btn:focus { opacity: 1; }
.inv-qty-btn:hover { background: var(--accent-soft); }
.inv-qty-input {
width: 46px; text-align: center;
padding: 3px 2px;
border: 1px solid transparent;
border-radius: 5px;
background: transparent;
font: inherit; font-size: 13px; font-variant-numeric: tabular-nums;
color: var(--ink);
-moz-appearance: textfield;
}
.inv-qty-input::-webkit-outer-spin-button,
.inv-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.inv-qty-input:hover { border-color: var(--line-strong); }
.inv-qty-input:focus { outline: none; border-color: var(--accent); background: var(--surface); }
/* Touch devices have no hover, so the buttons must always be visible. */
@media (hover: none) { .inv-qty-btn { opacity: 1; } }
.inv-table code {
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--muted);
background: var(--bg);
padding: 2px 5px;
border-radius: 4px;
}
.inv-place { display: flex; flex-direction: column; font-size: 11.5px; line-height: 1.3; }
.inv-place i { font-style: normal; color: var(--muted); }
.inv-thumb {
width: 34px; height: 34px;
object-fit: cover;
border-radius: 6px;
border: 1px solid var(--line);
display: block;
background: var(--bg);
}
.inv-thumb-empty { background: repeating-linear-gradient(45deg, var(--bg), var(--bg) 4px, #F3EAE8 4px, #F3EAE8 8px); }
.inv-post {
padding: 3px 6px;
border: 1px solid var(--line-strong);
border-radius: var(--r-pill);
background: var(--surface);
font: inherit; font-size: 11.5px;
cursor: pointer;
max-width: 120px;
}
.inv-post.ok { background: var(--success-soft); border-color: #cfe2d5; color: var(--success); }
.inv-post.warn { background: #FDF1E0; border-color: #EBD9B4; color: #A96A17; }
.inv-post.muted { color: var(--muted); }
.inv-icon-btn {
width: 26px; height: 26px;
border: 1px solid var(--line-strong);
border-radius: 6px;
background: var(--surface);
color: var(--muted);
cursor: pointer;
font-size: 13px; line-height: 1;
transition: color .15s, border-color .15s, background .15s;
}
.inv-icon-btn:hover { color: var(--accent); border-color: var(--accent); }
.inv-icon-btn.danger:hover { color: var(--warn); border-color: var(--warn); background: var(--warn-soft); }
/* ---------------------------------------------------- row action menu
Popover for the ⋮ button — AI action / History / Move to Trash. Lives
in document.body (not inside the row) so it's never clipped by the
table's horizontal scroll container. */
.inv-row-menu {
z-index: 70;
min-width: 172px;
padding: 6px;
background: var(--surface);
border: 1px solid var(--line-strong);
border-radius: var(--r-sm);
box-shadow: 0 10px 28px rgba(42, 32, 35, .16);
display: flex; flex-direction: column; gap: 1px;
}
.inv-row-menu button {
display: flex; align-items: center; gap: 9px;
width: 100%;
padding: 8px 9px;
border: 0;
border-radius: 6px;
background: transparent;
color: var(--ink);
font: inherit; font-size: 13px; text-align: left;
cursor: pointer;
}
.inv-row-menu button:hover { background: var(--accent-soft); color: var(--accent-dark); }
.inv-row-menu button.danger:hover { background: var(--warn-soft); color: var(--warn); }
.inv-rm-ic { flex: 0 0 auto; width: 16px; text-align: center; }
/* -------------------------------------------------------------- edit form */
.inv-edit-form { display: flex; flex-direction: column; gap: 12px; }
.inv-edit-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.inv-edit-field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); }
.inv-edit-field input, .inv-edit-field select {
padding: 9px 11px;
border: 1px solid var(--line-strong);
border-radius: var(--r-sm);
background: var(--surface);
color: var(--ink);
font: inherit; font-size: 13.5px;
}
.inv-edit-field input:focus, .inv-edit-field select:focus {
outline: 2px solid var(--accent-soft); border-color: var(--accent);
}
.inv-edit-field input[readonly] { background: var(--bg); color: var(--muted); }
.inv-edit-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
@media (max-width: 480px) {
.inv-edit-row2 { grid-template-columns: 1fr; }
}
.inv-addrow {
display: block; width: 100%;
padding: 11px;
border: 0; border-top: 1px dashed var(--line-strong);
background: transparent;
color: var(--accent);
font: inherit; font-size: 13.5px; font-weight: 600;
cursor: pointer;
transition: background .15s;
}
.inv-addrow:hover { background: var(--accent-soft); }
/* --------------------------------------------------------- draft row
Shared by desktop and mobile: "+ Add Product" opens one editable row
with these input styles and a Save / Cancel bar underneath, instead of
creating a real product straight away. Only the layout differs between
desktop (normal table row) and mobile (3-line card) — see the 780px
block for that. */
.inv-table tbody tr.inv-draft-row {
background: var(--accent-soft) !important;
}
.inv-table tbody tr.inv-draft-row td { padding-top: 10px; padding-bottom: 10px; }
.inv-draft-input {
width: 100%;
border: 1px solid var(--line-strong);
border-radius: var(--r-sm);
background: var(--surface);
padding: 6px 8px;
font: inherit; font-size: 13.5px;
color: var(--ink);
}
.inv-draft-input:focus {
outline: 2px solid var(--accent-soft); border-color: var(--accent);
}
.inv-draft-input.num { text-align: right; font-variant-numeric: tabular-nums; }
.inv-draft-pid {
display: inline-block;
background: var(--bg);
border: 1px dashed var(--line-strong);
border-radius: 6px;
padding: 4px 8px;
font-size: 11.5px; color: var(--muted-soft); font-style: italic;
white-space: nowrap;
}
.inv-draft-row .c-act .inv-icon-btn { opacity: .3; cursor: default; }
.inv-draft-actions {
display: flex; gap: 10px; flex-wrap: wrap;
padding: 11px 13px;
background: var(--accent-soft);
border: 1px solid var(--accent);
border-radius: var(--r-sm);
}
.inv-draft-actions .inv-btn { padding: 9px 20px; font-size: 13.5px; font-weight: 600; }
.inv-empty {
padding: 44px 22px;
text-align: center;
color: var(--muted);
font-size: 14px;
line-height: 1.7;
}
.inv-empty strong { display: block; color: var(--ink); font-size: 15px; margin-bottom: 4px; }
.inv-empty-hint { font-size: 12.5px; color: var(--muted-soft); }
/* -------------------------------------------------------------- pager */
.inv-pager {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; flex-wrap: wrap;
font-size: 12.5px; color: var(--muted);
}
.inv-pager-btns { display: flex; gap: 4px; align-items: center; }
.inv-page {
min-width: 30px; height: 30px;
padding: 0 8px;
border: 1px solid var(--line-strong);
border-radius: 7px;
background: var(--surface);
color: var(--ink);
font: inherit; font-size: 12.5px;
cursor: pointer;
}
.inv-page:hover:not(:disabled):not(.active) { border-color: var(--accent); color: var(--accent); }
.inv-page.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.inv-page:disabled { opacity: .35; cursor: default; }
.inv-page-gap { padding: 0 3px; color: var(--muted-soft); }
/* ------------------------------------------------------------- drawer */
.inv-drawer {
position: fixed; inset: 0; z-index: 60;
background: rgba(42, 32, 35, .38);
display: flex; justify-content: flex-end;
}
body.inv-drawer-open { overflow: hidden; }
.inv-drawer-panel {
width: min(430px, 100%);
height: 100%;
background: var(--surface);
display: flex; flex-direction: column;
box-shadow: -8px 0 28px rgba(42, 32, 35, .16);
}
.inv-drawer-head {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 14px 16px;
border-bottom: 1px solid var(--line);
}
.inv-drawer-head h3 {
margin: 0; font-family: var(--font-display); font-size: 16px; color: var(--ink);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.inv-drawer-body { padding: 16px; overflow-y: auto; flex: 1; }
.inv-drawer-facts { margin: 0 0 18px; display: flex; flex-direction: column; gap: 6px; }
.inv-drawer-facts > div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.inv-drawer-facts dt { color: var(--muted); margin: 0; }
.inv-drawer-facts dd { margin: 0; color: var(--ink); text-align: right; }
.inv-drawer-h {
margin: 18px 0 8px; font-size: 12px; text-transform: uppercase;
letter-spacing: .5px; color: var(--accent); font-weight: 700;
}
.inv-drawer-none, .inv-drawer-loading { font-size: 12.5px; color: var(--muted-soft); margin: 0; }
.inv-moves, .inv-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.inv-moves li {
display: grid;
grid-template-columns: 46px 1fr auto;
gap: 4px 8px;
align-items: baseline;
padding: 7px 9px;
border-radius: var(--r-sm);
background: var(--bg);
font-size: 12.5px;
}
.inv-moves .mv-qty { font-weight: 700; font-variant-numeric: tabular-nums; }
.inv-moves li.up .mv-qty { color: var(--success); }
.inv-moves li.down .mv-qty { color: var(--warn); }
.inv-moves .mv-after { color: var(--muted); font-variant-numeric: tabular-nums; }
.inv-moves .mv-at { grid-column: 1 / -1; font-size: 11px; color: var(--muted-soft); }
.inv-moves .mv-why { grid-column: 1 / -1; font-size: 11.5px; color: var(--muted); }
.inv-hist li {
display: flex; flex-direction: column; gap: 2px;
padding: 7px 9px;
border-left: 2px solid var(--line-strong);
font-size: 12.5px;
}
.inv-hist .hs-at { font-size: 11px; color: var(--muted-soft); }
.inv-hist .hs-what { color: var(--ink); word-break: break-word; }
.inv-hist .hs-src { font-size: 10.5px; color: var(--muted-soft); text-transform: uppercase; letter-spacing: .4px; }
/* ==========================================================================
MOBILE
Built to match the shop's approved mobile reference exactly:
- 2 headline cards instead of 6 (Total Selling Value, Total Units in
Stock)
- category tabs shortened (Face / Lip / Eye / Others) and spread across
the full width instead of scrolling
- a trimmed toolbar: just Search (half width), All Stock and Trash
- a 4-column product card (Brand/Name, Shade/Size, QTY/Selling Price,
Action/Product ID) instead of the old single-column stack
Every hidden control here is a *mobile view* choice only — nothing is
removed from the DOM, the API, or the desktop layout above 780px.
========================================================================== */
@media (max-width: 780px) {
/* --------------------------------------------------------- dash cards
Only Total Selling Value and Total Units in Stock stay on mobile; the
other four headline cards are desktop-only. CARD_DEFS renders them in
this fixed order: 1 variants, 2 units, 3 selling_value, 4 profit,
5 out_of_stock, 6 low_stock — so units and selling_value are kept and
the rest are hidden by position rather than by adding mobile-only
markup in JS. */
.inv-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.inv-card:nth-child(1),
.inv-card:nth-child(4),
.inv-card:nth-child(5),
.inv-card:nth-child(6) { display: none; }
.inv-card { padding: 12px; gap: 9px; }
.inv-card-badge { width: 33px; height: 33px; }
.inv-card-badge svg { width: 17px; height: 17px; }
.inv-card-value { font-size: 17px; }
.inv-card-label { min-height: 0; -webkit-line-clamp: 1; line-clamp: 1; }
/* ---------------------------------------------------- category tabs
Full width, four equal tabs, no horizontal scroll — and the short
label ("Face") rather than the desktop one ("Face Makeup"). */
.inv-cat-tabs { flex-wrap: nowrap; overflow-x: visible; }
.inv-cat-tab { flex: 1 1 0; padding: 10px 6px; font-size: 13px; gap: 5px; }
.inv-cat-tab-full { display: none; }
.inv-cat-tab-short { display: inline; }
/* ------------------------------------------------------- sub tabs
Left as a horizontal-scroll strip (Primer / Concealer / … / More) —
just tightened so it sits with even spacing above and below. */
.inv-sub-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
.inv-sub-tab { flex: 0 0 auto; }
/* ------------------------------------------------------------ toolbar
Only Search, All Stock and Trash remain. Brand, Post status, Display
order (sort), Rows-per-page, Undo, Redo, More filters, Columns,
Import, Export and Add Product are desktop-only controls. */
.inv-toolbar { gap: 8px; flex-wrap: nowrap; }
.inv-search-wrap { flex: 0 1 50%; }
#invStockFilter { flex: 1 1 auto; min-width: 0; }
#invBrandFilter,
#invPostFilter,
#invSort,
#invPerPage,
#invUndoBtn,
#invRedoBtn,
#invMoreBtn,
#invColsBtn,
#invImportBtn,
#invExportBtn,
#invAddBtn { display: none; }
#invTrashBtn {
flex: 0 0 auto;
width: 38px; height: 38px;
padding: 0;
justify-content: center;
}
#invTrashBtn .inv-btn-label { display: none; }
.inv-toolbar select, .inv-btn { font-size: 12.5px; padding: 8px 11px; }
/* ------------------------------------------------------------- table
Exact Mobile Card UI/UX matching Screenshot 2 */
.inv-table-wrap { overflow-x: visible; border: 0; background: transparent; box-shadow: none; }
.inv-table, .inv-table tbody { display: block; width: 100%; }
.inv-table thead { display: none; }
.inv-table tbody tr.inv-row {
display: grid !important;
grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
row-gap: 8px !important;
column-gap: 0 !important;
background: #ffffff !important;
border: 1px solid #e5e7eb !important;
border-radius: 14px !important;
box-shadow: 0 1px 2px rgba(0,0,0,0.02) !important;
margin-bottom: 12px !important;
padding: 12px !important;
box-sizing: border-box !important;
align-items: start !important;
}
.inv-row.is-out {
background: #ffffff !important;
border-color: #fca5a5 !important;
}
.inv-table tbody td {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
border: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* Hidden desktop-only controls on mobile */
.inv-table .c-drag,
.inv-table .c-check,
.inv-table .c-place,
.inv-table .c-post,
.inv-table .c-posted,
.inv-table .c-sync,
.inv-table .c-count,
.inv-table .c-pid,
.inv-table .c-gid,
.inv-table .c-act {
display: none !important;
}
/* 1. Top Row: Circular SL Badge */
.inv-table .c-sl {
grid-column: 1 / 2 !important;
grid-row: 1 / 3 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 28px !important;
height: 28px !important;
min-width: 28px !important;
max-width: 28px !important;
border-radius: 50% !important;
background: #f1f5f9 !important;
color: #1e293b !important;
font-size: 13px !important;
font-weight: 700 !important;
margin: 0 !important;
padding: 0 !important;
align-self: start !important;
}
/* 2. Top Row: Product Name (Max 2 lines) */
.inv-table .c-name {
grid-column: 2 / 11 !important;
grid-row: 1 !important;
padding: 0 0 0 8px !important;
margin: 0 !important;
min-width: 0 !important;
width: auto !important;
}
.inv-table .c-name .inv-cell {
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 2 !important;
line-clamp: 2 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: break-word !important;
font-size: 13.5px !important;
font-weight: 700 !important;
color: #111827 !important;
line-height: 1.3 !important;
border: 0 !important;
padding: 0 !important;
background: transparent !important;
}
/* 3. Top Row: Stock Badge */
.inv-table .c-stock {
grid-column: 2 / 11 !important;
grid-row: 2 !important;
margin-top: 1px !important;
padding: 0 0 0 8px !important;
min-width: 0 !important;
width: auto !important;
}
.inv-table .c-stock .inv-stock {
display: inline-flex !important;
align-items: center !important;
gap: 5px !important;
font-size: 11.5px !important;
font-weight: 600 !important;
background: transparent !important;
border: 0 !important;
padding: 0 !important;
}
.inv-table .c-stock .inv-stock i {
width: 6px !important;
height: 6px !important;
border-radius: 50% !important;
display: inline-block !important;
}
.inv-table .c-stock .inv-stock.lvl-out {
color: #dc2626 !important;
}
.inv-table .c-stock .inv-stock.lvl-out i {
background: #dc2626 !important;
}
.inv-table .c-stock .inv-stock.lvl-normal {
color: #16a34a !important;
}
.inv-table .c-stock .inv-stock.lvl-normal i {
background: #16a34a !important;
}
.inv-table .c-stock .inv-stock.lvl-low,
.inv-table .c-stock .inv-stock.lvl-critical {
color: #d97706 !important;
}
.inv-table .c-stock .inv-stock.lvl-low i,
.inv-table .c-stock .inv-stock.lvl-critical i {
background: #d97706 !important;
}
/* 4. Top Row: Website Toggle Switch */
.inv-table .c-web {
grid-column: 11 / 13 !important;
grid-row: 1 / 3 !important;
justify-self: end !important;
align-self: start !important;
padding: 0 !important;
margin: 0 !important;
width: auto !important;
}
.inv-web {
min-height: 24px !important;
padding: 2px 6px !important;
font-size: 11px !important;
font-weight: 600 !important;
border-radius: 14px !important;
background: #f1f5f9 !important;
border: 1px solid #e2e8f0 !important;
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
}
.inv-web[aria-checked="true"] {
background: #dcfce7 !important;
border-color: #86efac !important;
color: #15803d !important;
}
.inv-web[aria-checked="true"] i {
background: #16a34a !important;
}
.inv-web i {
width: 22px !important;
height: 13px !important;
border-radius: 999px !important;
background: #cbd5e1 !important;
position: relative !important;
}
.inv-web i::after {
content: '' !important;
position: absolute !important;
top: 2px !important;
left: 2px !important;
width: 9px !important;
height: 9px !important;
border-radius: 50% !important;
background: #ffffff !important;
transition: transform .12s !important;
}
.inv-web[aria-checked="true"] i::after {
transform: translateX(9px) !important;
}
/* 5. Middle Row: Brand (1/3 equal part = 4 cols out of 12, Max 2 lines) */
.inv-table .c-brand {
grid-column: 1 / 5 !important;
grid-row: 3 !important;
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
min-width: 0 !important;
padding-top: 6px !important;
padding-right: 4px !important;
}
.inv-table .c-brand::before {
content: 'Brand' !important;
font-size: 11px !important;
color: #64748b !important;
font-weight: 500 !important;
height: 15px !important;
line-height: 15px !important;
}
.inv-table .c-brand .inv-cell {
font-size: 11.5px !important;
font-weight: 700 !important;
color: #111827 !important;
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 2 !important;
line-clamp: 2 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: normal !important;
word-break: keep-all !important;
overflow-wrap: normal !important;
word-wrap: normal !important;
hyphens: none !important;
line-height: 1.25 !important;
}
/* 6. Middle Row: Shade (1/3 equal part = 4 cols out of 12, Max 2 lines, No syllable breaking) */
.inv-table .c-shade {
grid-column: 5 / 9 !important;
grid-row: 3 !important;
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
min-width: 0 !important;
border-left: 1px solid #e5e7eb !important;
padding-left: 8px !important;
padding-right: 4px !important;
padding-top: 6px !important;
}
.inv-table .c-shade::before {
content: 'Shade' !important;
font-size: 11px !important;
color: #64748b !important;
font-weight: 500 !important;
height: 15px !important;
line-height: 15px !important;
}
.inv-table .c-shade .inv-cell {
font-size: 11.5px !important;
font-weight: 700 !important;
color: #111827 !important;
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 2 !important;
line-clamp: 2 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: normal !important;
word-break: keep-all !important;
overflow-wrap: normal !important;
word-wrap: normal !important;
hyphens: none !important;
line-height: 1.25 !important;
}
/* 7. Middle Row: Size (1/3 equal part = 4 cols out of 12, Max 2 lines) */
.inv-table .c-size {
grid-column: 9 / 13 !important;
grid-row: 3 !important;
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
min-width: 0 !important;
border-left: 1px solid #e5e7eb !important;
padding-left: 8px !important;
padding-top: 6px !important;
}
.inv-table .c-size::before {
content: 'Size' !important;
font-size: 11px !important;
color: #64748b !important;
font-weight: 500 !important;
height: 15px !important;
line-height: 15px !important;
}
.inv-table .c-size .inv-cell {
font-size: 11.5px !important;
font-weight: 700 !important;
color: #111827 !important;
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 2 !important;
line-clamp: 2 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: normal !important;
word-break: keep-all !important;
overflow-wrap: normal !important;
word-wrap: normal !important;
hyphens: none !important;
line-height: 1.25 !important;
}
/* 8. Bottom Row: Qty (1/3 equal part = 4 cols out of 12 = 33.33%) */
.inv-table .c-qty {
grid-column: 1 / 5 !important;
grid-row: 4 !important;
display: flex !important;
flex-direction: column !important;
gap: 3px !important;
min-width: 0 !important;
padding-top: 6px !important;
}
.inv-table .c-qty::before {
content: 'Qty' !important;
font-size: 11px !important;
color: #64748b !important;
font-weight: 500 !important;
height: 15px !important;
line-height: 15px !important;
}
.inv-table .c-qty .inv-qty {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: #ffffff !important;
border: 1px solid #d1d5db !important;
border-radius: 6px !important;
padding: 0 2px !important;
width: fit-content !important;
height: 32px !important;
box-sizing: border-box !important;
}
.inv-table .c-qty .inv-qty-btn {
width: 22px !important;
height: 28px !important;
border: 0 !important;
background: transparent !important;
font-size: 16px !important;
font-weight: 700 !important;
color: #111827 !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
}
.inv-table .c-qty .inv-qty-input {
width: 22px !important;
height: 28px !important;
border: 0 !important;
background: transparent !important;
text-align: center !important;
font-size: 13.5px !important;
font-weight: 700 !important;
color: #dc2626 !important;
padding: 0 !important;
}
/* 9. Bottom Row: Price (1/3 equal part = 4 cols out of 12 = 33.33%, Center Aligned) */
.inv-table .c-price {
grid-column: 5 / 9 !important;
grid-row: 4 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 3px !important;
min-width: 0 !important;
padding-top: 6px !important;
}
.inv-table .c-price::before {
content: 'Price' !important;
font-size: 11px !important;
color: #64748b !important;
font-weight: 500 !important;
height: 15px !important;
line-height: 15px !important;
text-align: center !important;
width: 100% !important;
}
.inv-table .c-price .inv-cell {
font-size: 13.5px !important;
font-weight: 700 !important;
color: #111827 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 3px !important;
height: 32px !important;
line-height: 32px !important;
box-sizing: border-box !important;
width: 100% !important;
text-align: center !important;
}
.inv-table .c-price .inv-cell::before {
content: 'Tk ' !important;
font-size: 12px !important;
font-weight: 600 !important;
color: #4b5563 !important;
}
/* 10. Bottom Row: Media (1/3 equal part = 4 cols out of 12 = 33.33%, with left divider) */
.inv-table .c-media {
grid-column: 9 / 13 !important;
grid-row: 4 !important;
border-left: 1px solid #e5e7eb !important;
padding-left: 12px !important;
display: flex !important;
flex-direction: column !important;
gap: 3px !important;
min-width: 0 !important;
width: 100% !important;
max-width: 100% !important;
padding-top: 6px !important;
}
.inv-table .c-media::before {
content: '\00a0' !important;
display: block !important;
height: 15px !important;
line-height: 15px !important;
font-size: 11px !important;
}
.inv-media {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 8px !important;
height: 35px !important;
width: 100% !important;
}
/* Hide the 1st Editor / Pen button on mobile */
.inv-mbtn.is-editor {
display: none !important;
}
.inv-mbtn {
width: 35px !important;
height: 35px !important;
min-width: 35px !important;
max-width: 35px !important;
border-radius: 8px !important;
border: 1px solid #cbd5e1 !important;
background: #ffffff !important;
color: #374151 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
box-sizing: border-box !important;
flex: 0 0 35px !important;
}
.inv-mbtn svg {
width: 18px !important;
height: 18px !important;
display: block !important;
}
.inv-table .c-name .inv-cell.is-empty,
.inv-table .c-brand .inv-cell.is-empty,
.inv-table .c-shade .inv-cell.is-empty,
.inv-table .c-size .inv-cell.is-empty,
.inv-table .c-price .inv-cell.is-empty {
border: 0; min-height: 0;
}
.inv-table .c-name .inv-cell.is-empty:not(:focus)::before,
.inv-table .c-brand .inv-cell.is-empty:not(:focus)::before,
.inv-table .c-shade .inv-cell.is-empty:not(:focus)::before,
.inv-table .c-size .inv-cell.is-empty:not(:focus)::before,
.inv-table .c-price .inv-cell.is-empty:not(:focus)::before {
content: none;
}
.inv-table .c-name .inv-cell,
.inv-table .c-brand .inv-cell,
.inv-table .c-shade .inv-cell,
.inv-table .c-size .inv-cell,
.inv-table .c-price .inv-cell,
.inv-table .c-qty .inv-qty-input,
.inv-draft-input {
max-width: 100%;
}
.inv-table .c-brand .inv-cell { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.inv-table .c-shade .inv-cell, .inv-table .c-size .inv-cell,
.inv-table .c-price .inv-cell { font-size: 13.5px; color: var(--ink); }
/* Locked = read-only until ⋮ → Edit is pressed for this card. No dashed
box, no caret, no accidental taps into edit mode. Once a card is
unlocked (is-inline-editing), its cells get a light dashed box so it's
obvious which fields can now be typed into. */
.inv-table .c-name .inv-cell.is-locked,
.inv-table .c-brand .inv-cell.is-locked,
.inv-table .c-shade .inv-cell.is-locked,
.inv-table .c-size .inv-cell.is-locked,
.inv-table .c-price .inv-cell.is-locked {
cursor: default; -webkit-user-select: none; user-select: none;
}
/* The edit-mode box moved to the rebuilt mobile block at the end of this
file, where it is a solid white input box rather than a dashed hint. */
.inv-row.is-inline-editing .c-name .inv-cell:focus,
.inv-row.is-inline-editing .c-brand .inv-cell:focus,
.inv-row.is-inline-editing .c-shade .inv-cell:focus,
.inv-row.is-inline-editing .c-size .inv-cell:focus,
.inv-row.is-inline-editing .c-price .inv-cell:focus {
border-style: solid; border-color: var(--accent); outline: none;
}
/* .inv-cell.num is right-aligned for the desktop column layout; on the
mobile card the value sits stacked directly under its own "Price"
label, so it must stay left-aligned like every other field instead
of drifting to the right edge of the card. */
.inv-table .c-price .inv-cell.num { text-align: left; }
.inv-table .c-qty .inv-qty { align-self: flex-start; }
.inv-qty-btn { width: 26px; height: 26px; opacity: 1; font-size: 14px; }
.inv-qty-input { width: 36px; font-size: 13.5px; font-weight: 600; }
/* Product ID reads as a soft pill, same as the reference design. */
.inv-table .c-pid code {
display: inline-block;
max-width: 100%;
background: var(--bg);
border-radius: 6px;
padding: 3px 7px;
font-size: 11.5px; word-break: break-all;
}
.inv-draft-pid { max-width: 100%; }
/* Only the "more actions" (⋮) button belongs on a mobile card — the
separate pencil/edit icon stays a desktop affordance. */
/* The pencil now sits beside ⋮ on mobile too (it used to open a desktop
drawer, so it was hidden here and duplicated inside the ⋮ menu). */
.inv-icon-btn { width: 32px; height: 32px; font-size: 14px; }
.inv-addrow {
border: 1px dashed var(--accent);
border-radius: var(--r);
background: var(--surface);
padding: 13px;
}
/* ------------------------------------------------------ draft card
Same 3-row card layout as a real product, but every field is an
editable input and the ⋮ corner is dimmed (nothing to act on until
the row is actually saved). Base styling for .inv-draft-* lives
outside this media query so desktop gets the same Save/Cancel flow;
these are just the phone-sized tweaks. */
.inv-draft-row { background: var(--bg) !important; border-style: dashed !important; }
.inv-table .c-name .inv-draft-input { font-size: 14.5px; font-weight: 600; }
.inv-draft-actions { margin-top: -2px; margin-bottom: 4px; border: 0; background: transparent; padding: 0; }
.inv-draft-actions .inv-btn { flex: 1 1 0; justify-content: center; padding: 11px; font-size: 14px; }
.inv-drawer-panel { width: 100%; }
.inv-pager { justify-content: center; }
.inv-pager-info { width: 100%; text-align: center; }
}
/* Inventory is a screen tool; it never belongs on a printed slip. */
@media print { #inventoryView { display: none !important; } }
/* ==========================================================================
PHASES 4-7 — import mapper, column menu, AI panel, API keys, webhooks
========================================================================== */
/* ---------------------------------------------------- extra filter row */
.inv-more-row {
display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end;
padding: 10px 12px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--r-sm);
}
.inv-more-row label { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--muted); }
.inv-more-row input {
padding: 7px 10px;
border: 1px solid var(--line-strong);
border-radius: var(--r-sm);
background: var(--surface);
color: var(--ink);
font: inherit; font-size: 13px;
min-width: 110px;
}
.inv-more-row input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
/* -------------------------------------------------------- column menu */
.inv-col-menu {
position: absolute; z-index: 40;
margin-top: 6px;
min-width: 190px;
padding: 8px;
background: var(--surface);
border: 1px solid var(--line-strong);
border-radius: var(--r-sm);
box-shadow: 0 6px 22px rgba(42, 32, 35, .14);
display: flex; flex-direction: column; gap: 1px;
}
.inv-col-menu-head {
margin: 0 0 4px; padding: 0 6px;
font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px;
color: var(--muted); font-weight: 700;
}
.inv-col-menu label {
display: flex; align-items: center; gap: 8px;
padding: 5px 6px;
border-radius: 5px;
font-size: 12.5px; cursor: pointer;
}
.inv-col-menu label:hover { background: var(--accent-soft); }
/* ------------------------------------------------------ import mapper */
.inv-map-intro { font-size: 13px; color: var(--muted); margin: 0 0 12px; }
.inv-map-grid { display: flex; flex-direction: column; gap: 5px; }
.inv-map-row {
display: grid;
grid-template-columns: 118px 1fr;
gap: 4px 9px;
align-items: center;
}
.inv-map-row label { font-size: 12px; color: var(--ink); }
.inv-map-row select {
padding: 6px 8px;
border: 1px solid var(--line-strong);
border-radius: 6px;
background: var(--surface);
font: inherit; font-size: 12.5px;
width: 100%;
}
.inv-map-preview {
grid-column: 2;
font-size: 11px; color: var(--muted-soft);
font-family: var(--font-mono);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.inv-map-foot { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.inv-map-inline { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 12.5px; }
.inv-map-inline select {
padding: 6px 9px;
border: 1px solid var(--line-strong);
border-radius: 6px;
background: var(--surface);
font: inherit; font-size: 12.5px;
}
.inv-map-actions { display: flex; gap: 8px; margin-top: 4px; }
.inv-import-stats { list-style: none; margin: 6px 0 10px; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.inv-import-stats li {
padding: 5px 11px;
border-radius: var(--r-pill);
background: var(--bg);
border: 1px solid var(--line);
font-size: 12.5px;
}
.inv-import-stats li.ok { background: var(--success-soft); border-color: #cfe2d5; color: var(--success); }
.inv-import-errhead { font-size: 12.5px; color: var(--warn); margin: 8px 0 4px; }
.inv-import-errs { margin: 0; padding-left: 18px; font-size: 12px; color: var(--muted); }
.inv-import-errs li { margin-bottom: 2px; }
/* ---------------------------------------------------------- AI panel */
.inv-ai-note { font-size: 12.5px; color: var(--muted); margin: 0 0 12px; line-height: 1.6; }
.inv-ai-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.inv-ai-grid .inv-btn { justify-content: center; text-align: center; font-size: 12.5px; padding: 9px 8px; }
.inv-dupes { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.inv-dupes li {
display: flex; flex-direction: column; gap: 2px;
padding: 8px 10px;
border-radius: var(--r-sm);
background: var(--bg);
border-left: 3px solid var(--line-strong);
font-size: 12.5px;
}
.inv-dupes li.same { border-left-color: var(--warn); background: var(--warn-soft); }
.inv-dupes li.variant { border-left-color: var(--info); }
.inv-dupes .dp-name { font-weight: 600; }
.inv-dupes .dp-shade, .inv-dupes .dp-verdict { font-size: 11.5px; color: var(--muted); }
/* ------------------------------------------------- API keys & webhooks */
.inv-perm-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
gap: 4px;
margin: 8px 0 14px;
}
.inv-perm {
display: flex; align-items: center; gap: 7px;
padding: 6px 9px;
border: 1px solid var(--line);
border-radius: var(--r-sm);
background: var(--surface);
font-size: 12px; cursor: pointer;
}
.inv-perm:hover { border-color: var(--accent); }
.inv-perm span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-newkey {
margin: 12px 0;
padding: 12px 14px;
border: 1px solid var(--accent);
border-radius: var(--r-sm);
background: var(--accent-soft);
}
.inv-newkey p { margin: 0 0 7px; font-size: 12.5px; color: var(--accent-dark); }
.inv-newkey-value {
display: block;
padding: 9px 11px;
margin-bottom: 8px;
background: var(--surface);
border: 1px solid var(--line-strong);
border-radius: 6px;
font-family: var(--font-mono);
font-size: 12px;
word-break: break-all;
user-select: all;
}
.inv-key-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.inv-key-list li {
display: grid;
grid-template-columns: 1fr auto;
gap: 3px 10px;
align-items: center;
padding: 9px 11px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-sm);
font-size: 12.5px;
}
.inv-key-list li.revoked { opacity: .55; }
.inv-key-list .ik-label { font-weight: 600; }
.inv-key-list code {
grid-column: 1;
font-family: var(--font-mono); font-size: 11px; color: var(--muted);
word-break: break-all;
}
.inv-key-list .ik-perms, .inv-key-list .ik-meta { grid-column: 1; font-size: 11px; color: var(--muted-soft); }
.inv-key-list .ik-revoked { color: var(--warn); font-size: 11.5px; }
.inv-key-list .inv-btn { grid-row: 1 / 3; grid-column: 2; padding: 5px 10px; font-size: 12px; }
.inv-deliv-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.inv-deliv-list li {
display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline;
padding: 6px 9px;
border-radius: 6px;
background: var(--bg);
font-size: 11.5px;
}
.inv-deliv-list li.delivered { background: var(--success-soft); }
.inv-deliv-list li.failed { background: var(--warn-soft); }
.inv-deliv-list .dl-status { font-weight: 600; }
.inv-deliv-list .dl-at { color: var(--muted-soft); margin-left: auto; }
.inv-deliv-list .dl-err { flex: 1 1 100%; color: var(--warn); }
@media (max-width: 780px) {
.inv-ai-grid { grid-template-columns: 1fr; }
.inv-map-row { grid-template-columns: 1fr; }
.inv-map-preview { grid-column: 1; }
.inv-more-row label { flex: 1 1 45%; }
}
/* ==========================================================================
RESIZABLE COLUMNS
========================================================================== */
.inv-resizer {
position: absolute;
top: 0; right: 0; bottom: 0;
width: 10px;
cursor: col-resize;
z-index: 3;
touch-action: none;
}
/* A soft visible divider line so users can see where column dividers are */
.inv-resizer::after {
content: '';
position: absolute;
top: 7px; bottom: 7px; right: 0;
width: 1px;
background: #cbd5e1;
border-radius: 1px;
transition: all .12s ease;
}
.inv-resizer:hover::after, .inv-resizer.active::after {
width: 3px;
right: -1px;
background: var(--accent, #be123c);
box-shadow: 0 0 5px rgba(190, 18, 60, 0.4);
}
body.inv-resizing { cursor: col-resize !important; user-select: none !important; }
body.inv-resizing .inv-cell { pointer-events: none; }
.inv-reset-widths {
display: block;
margin: 0 0 0 auto;
padding: 6px 12px;
border: 0;
background: transparent;
color: var(--muted);
font: inherit; font-size: 11.5px;
cursor: pointer;
}
.inv-reset-widths:hover { color: var(--accent); text-decoration: underline; }
/* ==========================================================================
EMPTY CELLS
A brand-new row used to render as a blank strip — nothing to see, nothing
to aim at. Empty cells now show a dashed outline and a faint hint.
========================================================================== */
.inv-cell.is-empty {
border-color: var(--line-strong);
border-style: dashed;
min-height: 22px;
}
.inv-cell.is-empty:not(:focus)::before {
content: attr(data-placeholder);
color: var(--muted-soft);
font-size: 11.5px;
font-style: italic;
pointer-events: none;
}
.inv-cell.is-empty:focus { border-style: solid; }
.inv-row.flash .inv-cell.is-empty { border-color: var(--accent); }
/* ==========================================================================
MEDIA LINK
n8n writes a Drive URL into this column, so it holds and shows a link —
not a picture. A thumbnail would only ever render as a broken image.
========================================================================== */
.inv-media { display: flex; align-items: center; gap: 4px; min-width: 0; }
.inv-media-link {
flex: 1 1 auto;
min-width: 0;
font-family: var(--font-mono);
font-size: 11px;
color: var(--info);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.inv-media-link:focus { white-space: normal; word-break: break-all; }
.inv-media-link.is-empty { font-family: var(--font-body); color: var(--muted-soft); }
.inv-media-open {
flex: 0 0 auto;
width: 20px; height: 20px;
display: grid; place-items: center;
border-radius: 4px;
color: var(--muted);
text-decoration: none;
font-size: 12px;
}
.inv-media-open:hover { background: var(--accent-soft); color: var(--accent); }
@media (max-width: 780px) {
/* Resizing is a desktop affordance; on a phone the rows are cards. */
.inv-resizer, .inv-reset-widths { display: none; }
.inv-table { table-layout: auto; }
.inv-media-link { white-space: normal; word-break: break-all; }
}
/* ==========================================================================
ROW EDIT MODE (replaces the right-hand drawer)
A row is read-only until its ✎ is pressed. QTY is the exception — it stays
live in both modes, because adjusting stock is the most frequent action and
making it wait behind an edit mode would slow down the common case.
========================================================================== */
/* Locked cells read as plain text: no hover box, no caret, no invitation to
click. A stray click used to be enough to change a price. */
.inv-cell.is-locked {
cursor: default;
-webkit-user-select: none; user-select: none;
border-color: transparent !important;
background: transparent !important;
}
.inv-cell.is-locked:hover { border-color: transparent; background: transparent; }
.inv-cell.is-locked.is-empty { border-color: transparent; }
.inv-cell.is-locked.is-empty:not(:focus)::before { content: none; }
/* The row being edited is called out, and its editable cells become real
input boxes so it is obvious what can be typed into. */
.inv-row.is-inline-editing > td { background: var(--accent-soft); }
.inv-row.is-inline-editing .c-brand .inv-cell,
.inv-row.is-inline-editing .c-name .inv-cell,
.inv-row.is-inline-editing .c-shade .inv-cell,
.inv-row.is-inline-editing .c-size .inv-cell,
.inv-row.is-inline-editing .c-price .inv-cell {
box-sizing: border-box;
display: block;
width: 100%;
margin: 0;
padding: 6px 8px;
background: var(--surface);
border: 1px solid var(--line-strong);
border-radius: 6px;
min-height: 1.5em;
}
.inv-row.is-inline-editing .inv-cell:focus {
border-color: var(--accent);
box-shadow: 0 0 0 2px var(--accent-soft);
}
.inv-row.is-inline-editing .inv-icon-btn[data-act="edit"] {
background: var(--accent); border-color: var(--accent); color: #fff;
}
/* The Save / Cancel bar: its own spanning every column, so it can never
fall out of step with the fixed column widths. */
.inv-editbar-row > td {
padding: 0 11px 11px !important;
background: var(--accent-soft);
border-bottom: 1px solid var(--line);
}
.inv-inline-edit-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
align-items: center;
}
.inv-inline-edit-actions .inv-btn { min-width: 108px; justify-content: center; }
.inv-inline-edit-actions .inv-btn.primary {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
.inv-inline-edit-actions .inv-btn.primary:hover {
background: var(--accent-dark); border-color: var(--accent-dark);
}
/* ==========================================================================
ROW EDIT MODE (Inline actions on card)
========================================================================== */
@media (max-width: 780px) {
.inv-row.is-inline-editing > td { background: transparent; }
.inv-row.is-inline-editing {
border-color: var(--accent);
box-shadow: none;
margin-bottom: 0;
border-bottom: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.inv-editbar-row {
display: block;
margin: 0 0 12px;
padding: 0 14px 14px;
background: var(--surface);
border: 1px solid var(--accent);
border-top: 0;
border-bottom-left-radius: 16px;
border-bottom-right-radius: 16px;
}
.inv-editbar-row > td {
display: block;
padding: 0 !important;
background: transparent;
border: 0;
}
.inv-inline-edit-actions {
display: flex;
justify-content: center;
gap: 10px;
}
.inv-inline-edit-actions .inv-btn {
flex: 1 1 0;
min-width: 0;
padding: 10px;
font-size: 14px;
font-weight: 600;
border-radius: 8px;
}
}
/* ==========================================================================
MEDIA BUTTONS
The raw URL in this column became four buttons: the media link, the
product's Drive folder, the camera, and a file picker. Green means a link
is set; grey means it is not — which is the whole point of the first one.
========================================================================== */
.inv-media {
display: flex;
align-items: center;
gap: 4px;
min-width: 0;
}
.inv-mbtn {
flex: 0 0 auto;
width: 28px; height: 28px;
display: grid; place-items: center;
padding: 0;
border: 1px solid var(--line-strong);
border-radius: 7px;
background: var(--surface);
color: var(--muted-soft);
cursor: pointer;
text-decoration: none;
transition: color .13s, border-color .13s, background .13s;
}
.inv-mbtn svg { width: 15px; height: 15px; }
.inv-mbtn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
/* Product editor deep-link button. Beautifly brand rose pink tone. */
.inv-mbtn.is-editor {
color: #C9005D;
border-color: #FECDD3;
background: #FFF1F2;
}
.inv-mbtn.is-editor:hover {
color: #ffffff;
background: #C9005D;
border-color: #C9005D;
box-shadow: 0 2px 6px rgba(201, 0, 93, 0.28);
}
/* A link is present. Green is used here and nowhere else in the table, so it
reads at a glance down a column of 25 rows. */
.inv-mbtn.is-on { color: var(--success); border-color: #cfe2d5; background: var(--success-soft); }
.inv-mbtn.is-on:hover { color: #fff; background: var(--success); border-color: var(--success); }
/* No link yet. */
.inv-mbtn.is-off { color: var(--muted-soft); }
.inv-mbtn.is-busy { opacity: .5; pointer-events: none; }
.inv-mbtn.is-busy svg { animation: invPulse .9s ease-in-out infinite; }
@keyframes invPulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
/* ------------------------------------------------------- Drive settings */
.inv-drive-state {
padding: 9px 13px;
border-radius: var(--r-sm);
background: var(--bg);
border: 1px solid var(--line);
font-size: 13px;
margin: 0 0 14px;
}
.inv-drive-state.is-on { background: var(--success-soft); border-color: #cfe2d5; color: var(--success); }
.inv-drive-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 16px; }
.inv-drive-steps > li { font-size: 13px; }
.inv-drive-steps > li > b { display: block; margin-bottom: 3px; font-size: 13.5px; }
.inv-drive-authrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.inv-drive-authrow input {
flex: 1 1 220px; min-width: 0;
padding: 8px 11px;
border: 1px solid var(--line-strong);
border-radius: var(--r-sm);
background: var(--surface);
font: inherit; font-size: 13px;
}
.inv-drive-authrow input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.inv-drive-progress { margin-top: 10px; }
.inv-drive-bar {
height: 8px;
background: var(--line);
border-radius: var(--r-pill);
overflow: hidden;
}
.inv-drive-bar > span {
display: block; height: 100%; width: 0;
background: var(--accent);
border-radius: var(--r-pill);
transition: width .25s;
}
/* ==========================================================================
v33 — Inventory design pass ported from the v0 mock
Colour, shape and type only. No grid definitions are touched here, because
the mobile card layout below 780px was tuned against real phone widths and
a stray grid-template-columns in this block would silently undo it.
Every selector stays scoped to .inv-* so nothing leaks into Orders.
========================================================================== */
/* ------------------------------------------------------- stat cards */
/* The mock uses a rounded-square icon tile, a small muted label, then a
large tight number — rather than a circular badge beside centred text. */
.inv-card { padding: 15px; border-radius: 18px; transition: box-shadow .15s ease; }
.inv-card:hover { box-shadow: var(--shadow-md); }
.inv-card-badge { width: 36px; height: 36px; border-radius: 11px; }
.inv-card-badge svg { width: 18px; height: 18px; }
.inv-card-label { font-size: 11.5px; font-weight: 500; color: var(--muted); }
.inv-card-value { font-size: 21px; font-weight: 600; letter-spacing: -.4px; }
.inv-card-sub { font-size: 11px; color: var(--muted-soft); }
/* Tints restated against the new palette so they sit on the off-white card
at the same weight the mock gives them. */
.inv-card.tone-danger .inv-card-badge { background: #FDEAEB; color: #C22C39; }
.inv-card.tone-warn .inv-card-badge { background: var(--warning-soft); color: var(--warning-ink); }
.inv-card.tone-purple .inv-card-badge { background: #EEEDFE; color: #534AB7; }
.inv-card.tone-blue .inv-card-badge { background: #E6F1FB; color: #185FA5; }
.inv-card.tone-peach .inv-card-badge { background: #FAECE7; color: #993C1D; }
.inv-card.tone-green .inv-card-badge { background: #E8F5EE; color: #1F7A4A; }
/* --------------------------------------------------- category tabs */
.inv-cat-tabs {
background: var(--secondary);
border: 1px solid var(--line);
border-radius: 18px;
padding: 6px; gap: 6px;
}
.inv-cat-tab {
border-radius: 13px; font-weight: 500; font-size: 13.5px; color: var(--muted);
}
.inv-cat-tab:hover { background: var(--accent-soft); color: var(--ink); }
.inv-cat-tab.active {
background: var(--accent); color: #fff; font-weight: 600; box-shadow: var(--shadow);
}
.inv-cat-tab.active:hover { background: var(--accent); color: #fff; }
.inv-sub-tab {
border-color: var(--line); border-radius: var(--r-pill);
font-size: 13px; font-weight: 500; padding: 7px 15px; box-shadow: var(--shadow);
}
.inv-sub-tab:hover { background: var(--accent-soft); border-color: var(--line-strong); color: var(--ink); }
.inv-sub-tab.active { box-shadow: var(--shadow); font-weight: 600; }
.inv-sub-tab.active:hover { background: var(--accent); color: #fff; }
/* -------------------------------------------------------- toolbar */
.inv-toolbar input[type="search"],
.inv-toolbar select {
border-color: var(--line); border-radius: var(--r-sm);
padding: 10px 13px; box-shadow: var(--shadow);
}
.inv-toolbar input[type="search"]:focus,
.inv-toolbar select:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.inv-btn {
border-color: var(--line); border-radius: var(--r-sm);
font-weight: 500; padding: 10px 14px; box-shadow: var(--shadow);
}
.inv-btn:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--line-strong); color: var(--ink); }
.inv-btn.primary { font-weight: 600; }
.inv-btn.primary:hover { background: var(--accent); border-color: var(--accent); filter: brightness(1.1); }
.inv-btn.active { border-color: var(--accent); }
/* ---------------------------------------------------------- table */
.inv-table-wrap { border-radius: 18px; }
.inv-table thead th {
background: var(--secondary);
color: var(--muted);
font-size: 11px; font-weight: 600;
text-transform: uppercase; letter-spacing: .06em;
padding: 13px 9px;
border-bottom: 1px solid var(--line);
}
.inv-table tbody td { padding: 9px; border-bottom-color: var(--line); }
.inv-row:hover { background: var(--secondary); }
.inv-table code { background: var(--secondary); border-radius: 6px; font-size: 11px; }
/* Small controls inside a row: same rounded-square language as the mock. */
.inv-qty-btn { border-radius: 8px; border-color: var(--line); width: 26px; height: 26px; }
.inv-qty-btn:hover { background: var(--accent-soft); }
.inv-icon-btn { border-radius: 9px; border-color: var(--line); width: 28px; height: 28px; }
.inv-icon-btn:hover { background: var(--accent-soft); }
.inv-mbtn { border-radius: 9px; }
.inv-thumb { border-radius: 8px; border-color: var(--line); }
/* Post status reads as a pill, not a bordered select. */
.inv-post {
border-color: transparent; background: var(--secondary); color: var(--muted);
font-size: 11.5px; font-weight: 500; padding: 4px 10px;
}
.inv-post.ok { background: #E8F5EE; border-color: transparent; color: #1F7A4A; }
.inv-post.warn { background: var(--warning-soft); border-color: transparent; color: var(--warning-ink); }
.inv-post.muted { background: var(--secondary); color: var(--muted); }
/* --------------------------------------------------- empty + pager */
.inv-empty {
border: 1px dashed var(--line-strong); border-radius: 18px; padding: 56px 20px;
}
.inv-page { border-radius: 9px; border-color: var(--line); }
.inv-page.active { background: var(--accent); border-color: var(--accent); color: #fff; }
/* ------------------------------------------------------- panels */
.inv-drawer-panel, .inv-row-menu, .inv-col-menu { border-radius: 16px; }
.inv-notice, .inv-bulk-bar { border-radius: var(--r-sm); }
.inv-edit-field input, .inv-edit-field select, .inv-edit-field textarea { border-radius: 10px; }
/* ==========================================================================
v34 — the structural half of the v0 port
v33 only repainted. These are the pieces the mock actually adds to a row:
a Stock badge, an always-visible quantity stepper, prices carrying their
unit, and bigger media buttons. The Action column is off by default now,
so nothing here assumes it is present.
========================================================================== */
/* ---------------------------------------------------------- stock badge */
.inv-table .c-stock { white-space: nowrap; }
.inv-stock {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px;
border-radius: var(--r-pill);
font-size: 11.5px; font-weight: 500; line-height: 1.4;
white-space: nowrap;
}
.inv-stock i { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
.inv-stock.lvl-normal { background: #E8F5EE; color: #1F7A4A; }
.inv-stock.lvl-normal i { background: #2C965D; }
.inv-stock.lvl-low { background: var(--warning-soft); color: var(--warning-ink); }
.inv-stock.lvl-low i { background: var(--warning); }
/* Critical and Out both read red; the words carry the difference, so the
two do not need two shades of the same alarm. */
.inv-stock.lvl-critical { background: #FDEAEB; color: #C22C39; }
.inv-stock.lvl-critical i { background: var(--warn); }
.inv-stock.lvl-out { background: #FBDDDF; color: #A9232F; }
.inv-stock.lvl-out i { background: #A9232F; }
/* Inside an already-red row the pale badge would disappear, so it goes white. */
.inv-row.is-out .inv-stock.lvl-out { background: #fff; color: #A9232F; }
/* ------------------------------------------------------- website switch
Reads as a switch, not a checkbox, because it changes the world the
moment it is pressed — there is no Save button on this table.
Draft is amber rather than green even though the switch is on. The shop
turned it on and the storefront is honouring that, but the product page
has not been published, so no customer can reach it; showing the same
green as a live row would hide exactly the thing they need to act on. */
.inv-table .c-web { white-space: nowrap; }
.inv-web {
display: inline-flex; align-items: center; gap: 6px;
min-height: 30px; padding: 4px 10px 4px 8px;
border: 1px solid var(--line);
border-radius: var(--r-pill);
background: var(--surface);
color: var(--muted);
font: inherit; font-size: 11.5px; font-weight: 600; line-height: 1.4;
cursor: pointer;
transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.inv-web i {
width: 26px; height: 15px; border-radius: 999px;
background: #C9CDD4; position: relative; flex: 0 0 auto;
transition: background .12s ease;
}
.inv-web i::after {
content: ''; position: absolute; top: 2px; left: 2px;
width: 11px; height: 11px; border-radius: 50%;
background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.28);
transition: transform .14s ease;
}
.inv-web[aria-checked="true"] i::after { transform: translateX(11px); }
.inv-web.st-on { background: #E8F5EE; border-color: #BFE3CE; color: #1F7A4A; }
.inv-web.st-on i { background: #2C965D; }
.inv-web.st-draft { background: var(--warning-soft); border-color: var(--warning); color: var(--warning-ink); }
.inv-web.st-draft i { background: var(--warning); }
.inv-web.st-loading,
.inv-web.st-busy { opacity: .55; cursor: default; }
.inv-web:hover:not([disabled]) { border-color: var(--brand, #8A5CF6); }
.inv-web:focus-visible { outline: 2px solid var(--brand, #8A5CF6); outline-offset: 2px; }
.inv-web-na { color: var(--muted); font-size: 12px; }
@media (prefers-reduced-motion: reduce) {
.inv-web, .inv-web i, .inv-web i::after { transition: none; }
}
/* ------------------------------------------------------- quantity stepper */
/* The mock keeps − and + on screen at all times. They used to appear only on
hover, which a phone never delivers and which made the column look empty. */
.inv-qty { gap: 6px; }
.inv-qty-btn {
opacity: 1;
width: 28px; height: 28px;
border-radius: 9px; border-color: var(--line);
color: var(--ink); font-size: 15px;
box-shadow: var(--shadow);
}
.inv-row:hover .inv-qty-btn, .inv-qty-btn:focus { opacity: 1; }
.inv-qty-btn:hover { background: var(--accent-soft); }
.inv-qty-input {
width: 40px;
font-size: 15px; font-weight: 600;
color: var(--ink);
}
.inv-row.is-out .inv-qty-input { color: var(--warn); }
/* -------------------------------------------------------------- price */
/* "990" becomes "Tk 990" without touching the stored value: the prefix is
generated, so it is never part of what gets edited or saved. It steps out
of the way the moment the cell is focused for typing. */
.inv-table .c-price { text-align: right; }
.inv-table .c-price .inv-cell {
font-weight: 600; font-variant-numeric: tabular-nums;
}
.inv-table .c-price .inv-cell:not(.is-empty):not(:focus)::before {
content: 'Tk ';
color: var(--muted);
font-weight: 500;
}
/* ------------------------------------------------------- media buttons */
.inv-mbtn { width: 30px; height: 30px; border-radius: 9px; }
.inv-media { gap: 6px; }
/* ------------------------------------------------------- product id chip */
.inv-table .c-pid code { padding: 4px 8px; font-size: 11px; }
/* ==========================================================================
v35 — the corrections, measured off the v0 mock
Sizes below are the mock's Tailwind classes resolved to pixels, so this is
a transcription rather than an eyeball: text-sm = 14px, text-xs = 12px,
text-[11px] = 11px, size-8 = 32px, size-9 = 36px, size-[18px] = 18px,
rounded-lg = 8px, rounded-xl = 12px, rounded-2xl = 16px.
========================================================================== */
/* ------------------------------------------------------------ checkboxes */
/* 18px with a 5px corner, as the mock has it.
*
* The first attempt at this left the box distorted, and the reason is worth
* writing down: every