vw + , max),
tuned so a 1280px viewport reproduces the previous fixed values exactly (13px
type, 14px side padding, 6px icon gap, 4px tab gap, 24px icon) — it grows on
wide monitors and gives back space on narrow ones instead of scrolling sooner.
Floor is 12px type / 18px icon: below that the row is unreadable, so overflow-x
takes over. */
.tabs {
display: flex; gap: clamp(2px, 0.16vw + 1.2px, 5px);
border-bottom: 1px solid var(--color-border);
/* Hug the panel below: small gap under the row, larger space above (from the
preceding element) — so the row reads as grouped with the content it controls,
matching the .subtabs 8px. */
margin-bottom: 8px;
/* Narrow viewports scroll the strip rather than squeezing it. Without this the
flex items compress below their content: the longest label wraps to two lines
and the icon — an SVG, so shrinkable — distorts. */
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.tab {
/* Horizontal padding is the cheapest width in the strip: seven tabs pay it
fourteen times over, so trimming ~2px a side buys back ~28px and is what
keeps the row off a scrollbar in the 950–1100px band. */
padding: clamp(8px, 0.55vw + 3px, 12px) clamp(7px, 0.62vw + 3.3px, 15px);
font-size: clamp(12px, 0.35vw + 8.5px, 14px);
color: var(--color-text-muted);
border-bottom: 2px solid transparent;
background: transparent;
border-left: 0; border-right: 0; border-top: 0;
cursor: pointer;
transition: color 150ms, border-color 150ms;
display: inline-flex; align-items: center; gap: clamp(4px, 0.3vw + 2.2px, 8px);
font-family: inherit;
/* Multi-word labels ("Tiles / Pavers") must not wrap — a two-line tab is taller
than its siblings and knocks the whole row out of alignment. */
white-space: nowrap;
flex: none;
}
/* Keep the icon at its intrinsic size. Default flex-shrink lets the SVG compress
horizontally when the row is tight, which visibly deforms grid-style glyphs. */
.tab svg {
flex: none;
width: clamp(15px, 1.15vw + 4px, 20px);
height: clamp(15px, 1.15vw + 4px, 20px);
}
/* Per-glyph tuning for a tab whose icon needs it (Catalog's Pricing dollar-sign).
Two adjustments, both scoped to this class — remove it from the button if the icon
is ever swapped for one that fills its box at the default size.
- Size: 25% down from the sibling tab icon, tracking the same fluid curve.
- Gap: most tab icons fill their 24-unit viewBox to within ~2 units of each edge,
but dollar-sign draws only to x=18, leaving ~4 units empty on the label side, so
the same 6px gap reads wider than its neighbours'. 4 units at 18px is 3px, so
that is what comes back off to make the OPTICAL distance match. */
.tab--icon-narrow svg {
width: clamp(11.25px, 0.8625vw + 3px, 15px);
height: clamp(11.25px, 0.8625vw + 3px, 15px);
margin-right: -3px;
}
.tab:hover { color: var(--color-primary-700); }
/* A locked step in a wizard stepper — the tab still shows where the flow goes,
it just can't be jumped to yet. */
.tab:disabled { opacity: 0.45; cursor: not-allowed; }
.tab:disabled:hover { color: var(--color-text-muted); }
/* A required field that is still blank. The message sits on the field itself —
a summary in the wizard's navigation row names fields the user then has to hunt
for, and competes with Back/Next for the same space. */
.field-req-note { margin: 5px 0 0; font-size: 12px; color: var(--color-danger); }
.field.is-missing .input,
.field.is-missing .select,
.field.is-missing .textarea { border-color: var(--color-danger); }
/* Summary of what another step is still missing, shown under the action it blocks
(Create Product) — never in a navigation row. */
.step-hint { font-size: 12px; color: var(--color-danger); }
.tab.active {
color: var(--color-primary-700);
border-bottom-color: var(--color-primary);
font-weight: 500;
background: var(--color-primary-50);
border-radius: 5px 5px 0 0;
}
/* ---- Attached: the strip joins the panel it controls --------------------
The strip's own bottom rule becomes the panel's top edge and the active tab
takes the panel surface, so tab and panel read as one continuous surface
with nothing between them.
The active indicator moves to the tab's TOP edge. On the bottom edge it
draws a line exactly where the tab joins the panel — separating the two
things it is meant to connect.
Opt-in, because most strips do not qualify. Measured across all 25 `.tabs`
in the portal: 6 sit above a two-column grid, where the panel is not one
surface and a tab on the right of the strip would have nothing under it;
the wizard steppers (import, receive, product-wizard, settings-api-v2) put
a step header between the strip and the first card, 52–109px of it; and
`stock.html` nests its card three levels inside a studio layout. Those keep
the detached look. Nine strips qualify and carry this class.
Panels are addressed with `~`, not `+`: only the first panel is the strip's
adjacent sibling, so `+` would leave every other tab's panel with its top
border intact and draw a line under the active tab as soon as you switched.
`.tabs` computes `overflow-y: auto` — a non-visible `overflow-x` forces it —
so the active tab cannot hang 1px below the strip to cover its rule without
being clipped or raising a scrollbar. The strip carries 1px of bottom
padding instead and the tab's overhang lands inside it. */
/* The strip gives up its own bottom rule and sits 1px INTO the panel, so the
panel's own top border becomes the rule. That is what makes this work without
knowing anything about the panel's structure: the rule is drawn by whatever is
below, at whatever nesting depth, and the strip simply overlaps it. The active
tab's 2px surface-coloured bottom border then paints over that 1px where the
two meet, which is the whole join.
The earlier version kept the strip's rule and removed the panel card's top
border by selector. That needs one selector per layout, and panels differ
*within* a page — clients.html reaches its card through `.card-header`,
catalog-bundle through `.stack`, stock through the studio wrapper — so any
list of selectors leaves some tab drawing a 2px double line. Overlapping is
structure-independent and cannot double-draw. */
.tabs--attached {
border-bottom: 0;
margin-bottom: -1px;
padding-bottom: 0;
position: relative;
z-index: 1;
}
.tabs--attached .tab.active {
background: var(--color-surface);
border-bottom-color: var(--color-surface);
box-shadow: inset 0 2px 0 0 var(--color-primary);
}
/* The panel draws its own top edge, so the strip has something to sit on no
matter what the panel opens with — a card, a sub-tab row, an alert banner, a
toolbar. This is what makes the join independent of panel contents: the tab
attaches to the PANEL, not to whatever happens to be first inside it.
It is an inset shadow rather than a border on purpose. A border would add 1px
to the panel's box and push a flush card down by that much, leaving the
panel's rule and the card's own top border as two lines a pixel apart. An
inset shadow paints inside the box without occupying space, so a flush card's
border lands on exactly the same pixel row and the two coincide as one line. */
.tabs--attached ~ [data-tab-panel],
.tabs--attached ~ * > [data-tab-panel] {
box-shadow: inset 0 1px 0 0 var(--color-border);
}
/* Cosmetic only, and deliberately best-effort: square off the top corners of the
panel card so the active tab does not sit over a rounded corner. Where a
selector does not reach, the result is a 7px rounded corner under the leftmost
tab — not a broken join, which is why this list does not have to be complete. */
.tabs--attached ~ .card,
.tabs--attached ~ [data-tab-panel] > .card:first-child,
.tabs--attached ~ [data-tab-panel] > .cols-2-1 > .card,
.tabs--attached ~ [data-tab-panel] > .cols-2-1 > :is(.stack, .pm-stack) > .card:first-child {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.tab .count,
.subtab .count {
background: var(--color-primary-50);
color: var(--color-primary-700);
padding: 0 6px;
border-radius: 5px;
font-size: 11px;
font-family: 'Hanken Grotesk', sans-serif;
}
/* On a product-type tab the count READS AS PART OF THE LABEL — "7 Blocks", "642 Slabs" —
so it leads the label and is set in the label's own type, with no chip around it. The
count span therefore comes first in the markup, after the icon.
- No chip: the shared rule above gives every `.count` a tinted background, side padding
and a radius. All three are unset here, so nothing boxes the number in.
- Same type as the label: `font-size`, `font-family` and `color` are reset to `inherit`
rather than restated, so the count tracks `.tab`'s own fluid 12→14px curve and its own
colour automatically — muted while the tab is idle, primary-700 once it is active. The
shared rule's `--color-primary-700` is dropped: nothing should set the figure apart from
the word it qualifies, since the two are read as one phrase.
- Tight: `.tab` is a flex row and its `gap` would space the number from its label exactly
as far as it spaces the icon, which is what made the old trailing count read as a
floating figure. Cancelling the gap and re-stating it as a fixed 4px pairs the two.
Subtracting the same clamp the gap uses keeps that 4px true at every viewport instead
of drifting from 4px to 8px; the icon keeps the full fluid gap. */
.tab .count {
background: none;
padding: 0;
border-radius: 0;
font-size: inherit;
font-family: inherit;
color: inherit;
margin-right: calc(4px - clamp(4px, 0.3vw + 2.2px, 8px));
}
/* Segmented sub-tabs — a nested tab row on a grey track (e.g. Catalog › Pricing).
The global tab JS ignores .subtab / [data-subtab-panel]; a [data-subtabs] handler
toggles .active. The selected segment MUST read as clearly chosen — a primary
ring + lift, never a bare white pill on the grey track (see "always contrast"). */
.subtabs {
display: flex; gap: 4px; flex-wrap: wrap;
padding: 4px;
background: var(--color-surface-alt);
border-radius: 5px;
margin-bottom: 8px;
}
.subtab {
padding: 7px 13px;
font-size: 13px;
color: var(--color-text-muted);
background: transparent;
border: 0; border-radius: 5px;
cursor: pointer;
display: inline-flex; align-items: center; gap: 6px;
font-family: inherit;
transition: background 120ms, color 120ms, box-shadow 120ms;
}
.subtab:hover { color: var(--color-primary-700); }
.subtab.active {
background: var(--color-primary-50);
color: var(--color-primary-700);
font-weight: 600;
box-shadow: var(--shadow-sm);
}
/* on the tinted active pill the count chip would blend — flip it to white */
.subtab.active .count { background: var(--color-surface); }
/* Choice variant — a form answer (Yes / No, Priced by, …), not tab navigation.
Every option carries a fill of its own, never white: white is the page's own
surface, so a white option reads as background rather than as a choice. The
chosen one takes the stronger of the two fills — a primary tint plus a soft
lift. Options run two per row, sized by their column, so a long label can't
push a group to one-option-per-row in a narrow column. */
.subtabs--choice {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 4px;
padding: 4px;
/* Sized by its own options, not by the column — a Yes/No must not stretch across a
card the way a four-option group does. Both options stay equal width (1fr each). */
width: fit-content;
max-width: 100%;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 7px;
}
.subtabs--choice .subtab {
justify-content: center;
text-align: center;
padding: 6px 10px;
min-width: 72px;
line-height: 1.2;
background: var(--color-surface-alt);
}
.subtabs--choice .subtab:hover { background: var(--color-border); color: var(--color-primary-700); }
.subtabs--choice .subtab.active {
background: var(--color-primary-50);
color: var(--color-primary-700);
font-weight: 600;
box-shadow: var(--shadow-sm);
}
/* -------------------------------------------------------------------------
Expandable table rows (per-item price overrides as children) + toggle switch
------------------------------------------------------------------------- */
.row-toggle {
border: 0; background: transparent; cursor: pointer;
color: var(--color-text-subtle);
display: inline-flex; align-items: center; justify-content: center;
padding: 0; width: 16px; height: 16px; flex: none;
transition: transform 120ms, color 120ms;
}
.row-toggle svg { width: 15px; height: 15px; }
.row-toggle[aria-expanded="true"] { transform: rotate(90deg); color: var(--color-primary-700); }
.row-toggle-spacer { display: inline-block; width: 16px; flex: none; }
tr.price-child > td { background: var(--color-surface-alt); }
.child-branch { color: var(--color-text-subtle); flex: none; }
/* Row-level add — blue "+" to add a sub-price (override) to a product row.
Hidden until the row is hovered / keyboard-focused (space is reserved, so no layout shift). */
.row-add {
width: 20px; height: 20px; flex: none; padding: 0;
display: inline-flex; align-items: center; justify-content: center;
border: 0; border-radius: 5px;
background: var(--color-primary); color: #fff;
opacity: 0;
transition: opacity 120ms ease, background 120ms ease;
}
tr:hover .row-add,
tr:focus-within .row-add { opacity: 1; }
.row-add:hover { background: var(--color-primary-600); }
.row-add svg { width: 13px; height: 13px; stroke-width: 2.6; }
/* Sub-price counter — shown only on products that have overrides */
.row-count {
flex: none;
font-size: 11px; font-weight: 600;
color: var(--color-primary-700); background: var(--color-primary-50);
padding: 0 7px; border-radius: 5px;
font-variant-numeric: tabular-nums;
}
.switch-field {
display: inline-flex; align-items: center; gap: 8px;
font-size: 13px; color: var(--color-text-muted);
cursor: pointer; user-select: none;
}
/* A control whose label runs to more than one row aligns to the *first* row —
the main label — not to the middle of the block. The switch belongs to the
setting's name; centred against a two- or three-line description it drifts
down beside the explanation instead of the thing it switches. Scoped by
`:has(.cell-stack)` so single-line toggles keep their centred alignment. */
.switch-field:has(.cell-stack) { align-items: flex-start; }
/* Same rule where the switch is a bare child of a generic .row rather than
wrapped in its own .switch-field label (e.g. Settings › Product Types). */
.row:has(> .switch):has(> .cell-stack) { align-items: flex-start; }
/* Flush with the text box reads a touch high — a label's glyphs start below the
top of their line box, the switch's pill does not. 1px puts the two on the
same optical line. */
.switch-field:has(.cell-stack) > .switch,
.row:has(> .switch):has(> .cell-stack) > .switch { margin-top: 1px; }
.switch {
position: relative; width: 34px; height: 20px; flex: none;
border-radius: 5px; background: var(--color-border-strong);
transition: background 140ms;
}
.switch::after {
content: ""; position: absolute; top: 2px; left: 2px;
width: 16px; height: 16px; border-radius: 4px;
background: #fff; box-shadow: var(--shadow-sm);
transition: transform 140ms;
}
.switch[aria-checked="true"] { background: var(--color-primary); }
.switch[aria-checked="true"]::after { transform: translateX(14px); }
/* -------------------------------------------------------------------------
Alerts
------------------------------------------------------------------------- */
.alert {
display: flex; align-items: flex-start; gap: 10px;
padding: 10px 12px;
border-radius: 5px;
border: 1px solid;
font-size: 13px;
}
.alert svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.alert-warn { background: var(--color-warn-50); color: #92400E; border-color: #FDE68A; }
.alert-info { background: var(--color-info-50); color: #1E40AF; border-color: #BFDBFE; }
.alert-danger { background: var(--color-danger-50); color: #991B1B; border-color: #FECACA; }
/* -------------------------------------------------------------------------
Grid utilities (data-dense)
------------------------------------------------------------------------- */
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1100px) {
.grid-4, .grid-5, .grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.grid-2, .grid-3, .grid-4, .grid-5, .grid-6 { grid-template-columns: 1fr; }
}
/* Tablet: KPI/stat rows flex-fill so trailing cards grow into the row instead
of leaving an empty orphan slot (e.g. a 5-up row collapsing to 2 columns).
The basis is what decides how many fit, not the content: a card's widest
figure needs ~155px, but a 200px basis made four of them ask for 848px and
drop the last onto a second row while every card still had ~100px spare.
160px keeps a four-up row together down to a 688px container. */
@media (max-width: 1100px) {
.grid:has(> .kpi) { display: flex; flex-wrap: wrap; }
.grid:has(> .kpi) > .kpi { flex: 1 1 160px; }
}
@media (max-width: 640px) {
.grid:has(> .kpi) > .kpi { flex: 1 1 100%; }
}
.cols-3-1 { display: grid; gap: 16px; grid-template-columns: 3fr 1fr; }
.cols-2-1 { display: grid; gap: 16px; grid-template-columns: 2fr 1fr; }
.cols-3-2 { display: grid; gap: 16px; grid-template-columns: 3fr 2fr; }
.cols-1-2 { display: grid; gap: 16px; grid-template-columns: 1fr 2fr; }
@media (max-width: 1100px) {
.cols-3-1, .cols-2-1, .cols-3-2, .cols-1-2 { grid-template-columns: 1fr; }
}
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* -------------------------------------------------------------------------
Misc
------------------------------------------------------------------------- */
.muted { color: var(--color-text-muted); }
.subtle { color: var(--color-text-subtle); }
.mono { font-family: 'Hanken Grotesk', sans-serif; }
.footer-link { color: inherit; text-decoration: none; }
.footer-link:hover { color: inherit; text-decoration: none; font-weight: 700; }
.tnum { font-variant-numeric: tabular-nums; }
.divider { height: 1px; background: var(--color-border); border: 0; margin: 12px 0; }
.dot-status { width: 6px; height: 6px; border-radius: 999px; display: inline-block; }
.dot-status.ok { background: var(--color-success); }
.dot-status.warn { background: var(--color-warn); }
.dot-status.bad { background: var(--color-danger); }
.kbd {
display: inline-flex; align-items: center;
padding: 1px 5px;
border-radius: 4px;
background: var(--color-surface-alt);
border: 1px solid var(--color-border);
border-bottom-width: 2px;
font-family: 'Hanken Grotesk', sans-serif;
font-size: 10px;
color: var(--color-text-muted);
}
/* Bar gauge */
.bars { display: flex; align-items: flex-end; gap: 3px; height: 28px; }
.bars span {
flex: 1;
background: var(--color-primary);
border-radius: 2px 2px 0 0;
opacity: 0.9;
}
/* Donut placeholder */
.donut {
width: 132px; height: 132px;
border-radius: 999px;
background:
conic-gradient(var(--color-primary) 0 82%,
var(--color-secondary) 82% 94%,
var(--color-cta) 94% 98%,
#FBBF24 98% 100%);
display: inline-flex; align-items: center; justify-content: center;
position: relative;
}
.donut::after {
content: '';
position: absolute; inset: 18px;
background: var(--color-surface);
border-radius: 999px;
}
.donut-label {
position: relative; z-index: 1; text-align: center;
font-family: 'Hanken Grotesk', sans-serif;
}
/* Legend */
.legend { display: flex; flex-wrap: wrap; gap: 10px 14px; font-size: 12px; color: var(--color-text-muted); }
.legend .swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; margin-right: 6px; vertical-align: -1px; }
/* Drawer / Modal (kept simple, html-only) */
details.drawer { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
details.drawer > summary {
list-style: none;
padding: 10px 14px;
cursor: pointer;
display: flex; align-items: center; justify-content: space-between;
font-weight: 500;
}
details.drawer > summary::-webkit-details-marker { display: none; }
details.drawer[open] > summary { border-bottom: 1px solid var(--color-border); }
details.drawer .drawer-body { padding: 14px; }
/* Tablet (portrait): collapse the sidebar to an icon rail instead of hiding it,
so navigation is never lost. Mirrors the .app.collapsed state. */
@media (max-width: 900px) {
.app { grid-template-columns: var(--sidebar-w-collapsed) 1fr; }
.sidebar-brand { overflow: hidden; background: url('../img/vava-sales-logomark.svg') center / auto 28px no-repeat; }
.sidebar-brand img { display: none; }
.sidebar-section { font-size: 0; padding: 10px 0 0; margin-bottom: 0; }
.nav-link { justify-content: center; gap: 0; font-size: 0; padding: 9px 0; }
.nav-link svg { width: 20px; height: 20px; }
.nav-badge { display: none; }
.sidebar-footer { justify-content: center; padding: 12px 0; }
.sidebar-footer > div,
.sidebar-footer > .icon-btn { display: none; }
}
/* Print-friendly basics (not used here) */
@media print {
.sidebar, .header, .page-actions { display: none; }
}
body > div:nth-of-type(1) > main > header > label > input {
border-color: var(--border-input-1);
background-color: var(--color-search-bg);
}
.value.tnum {
color: var(--color-value-tnum);
}
/* ============================================================
TOPBAR USER CLUSTER (V1-style) — name over a pin+location line
(click -> Switch Location dropdown) + avatar (click -> user menu).
Ported from the V1 app shell (np.vavastone.com js/shell.js + css/shell.css).
============================================================ */
.topbar-user-cluster{display:flex;align-items:center;gap:10px;padding:4px 4px 4px 8px;border-radius:var(--radius-md);}
.topbar-user-info{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15;gap:2px;}
.topbar-user-info .topbar-user-name{font-size:13px;font-weight:600;color:var(--color-text);}
.topbar-loc,.topbar-user{position:relative;}
.topbar-user-info .topbar-loc{display:inline-flex;align-items:center;gap:4px;background:transparent;border:0;padding:0;cursor:pointer;font-size:12px;color:var(--color-text-muted);}
.topbar-user-info .topbar-loc:hover{color:var(--color-primary);}
.topbar-user-info .topbar-loc .loc-pin{color:var(--color-primary);flex-shrink:0;}
.topbar-user-info .topbar-loc .location-picker__label{color:var(--color-primary);font-weight:500;white-space:nowrap;}
.location-picker__menu{position:absolute;top:calc(100% + 6px);left:auto;right:0;min-width:280px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:4px;z-index:100;display:none;text-align:left;}
.topbar-loc.open .location-picker__menu{display:block;}
.location-picker__option{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:var(--radius-sm);cursor:pointer;}
.location-picker__option:hover,.location-picker__option.active{background:var(--color-surface-alt);}
.location-picker__opt-text{display:flex;flex-direction:column;}
.location-picker__opt-name{font-size:13px;font-weight:600;color:var(--color-text);}
.location-picker__opt-sub{font-size:11px;color:var(--color-text-muted);}
.dropdown-section-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);padding:6px 10px 4px;}
.topbar-user-cluster > .topbar-user{display:inline-flex;align-items:center;background:transparent;border:0;padding:0;cursor:pointer;}
.topbar-user-cluster .avatar{width:28px;height:28px;}
.topbar-user-cluster > .topbar-user:hover .avatar{outline:2px solid color-mix(in oklab, var(--color-primary) 50%, transparent);outline-offset:1px;}
.dropdown-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:200px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:6px;z-index:100;display:none;text-align:left;}
.dropdown-menu.open{display:block;}
.dropdown-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--radius-sm);font-size:13px;color:var(--color-text);text-decoration:none;cursor:pointer;}
.dropdown-item:hover{background:var(--color-primary-50);}
.dropdown-divider{height:1px;background:var(--color-border);margin:4px 0;}
/* Page-level settings menus (dashboard/catalog/stock) — roomy, even rhythm; divider sits in the gap instead of carving a hole */
/* The menu is absolute, so the cluster has to be its containing block — every page
that used this carried `position:relative` as an inline style to get it. */
.page-settings{position:relative;}
.page-settings .dropdown-item{padding:9px 12px;}
.page-settings .dropdown-divider{margin:0;}
/* Lucide ships icons at 24px. In a 13px menu row that reads as an icon list with
labels attached rather than a menu; 15px puts the icon under the cap height. */
.page-settings .dropdown-item svg{width:15px;height:15px;flex:none;}
/* Sized to the longest entry ("Storefront URL & Domain") so the menu does not
redraw at a different width from one page to the next. */
.page-settings .dropdown-menu{min-width:232px;}
/* Help menu — the wrapper, the rows and both dialogs are built by js/app.js.
Mirrors .page-settings: the menu is absolute, so the wrapper is its containing block. */
.topbar-help{position:relative;}
.topbar-help .dropdown-menu{min-width:226px;}
.topbar-help .dropdown-item{padding:9px 12px;}
.topbar-help .dropdown-item svg{width:15px;height:15px;flex:none;}
.topbar-help .dropdown-divider{margin:0;}
/* Keyboard Shortcuts dialog. Key first, description second, tight — a key column
wide enough for "Esc" keeps the descriptions on one left edge. */
.help-sc{margin:0;display:flex;flex-direction:column;}
.help-sc__row{position:relative;display:flex;align-items:center;gap:11px;padding:9px 0;}
.help-sc__key{flex:none;min-width:38px;}
.help-sc__desc{margin:0;font-size:13px;color:var(--color-text);}
/* What's New dialog */
.help-wn{display:flex;flex-direction:column;}
.help-wn__item{position:relative;display:flex;flex-direction:column;gap:3px;padding:16px 0;}
.help-wn__item:first-child{padding-top:0;}
.help-wn__when{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-subtle);}
.help-wn__title{font-size:13px;font-weight:600;color:var(--color-text);}
.help-wn__desc{margin:0;font-size:12px;line-height:1.55;color:var(--color-text-muted);}
/* Same gesture as the table row separator above: hold --color-border-strong for the
first 35% and decay across the rest, so the boundary is stated where the row's
content starts and is spent before the dialog's edge. A full-width hairline here
read as a band behind the rows. The last row needs none — the dialog closes it. */
.help-sc__row::after,
.help-wn__item::after{
content:"";position:absolute;bottom:0;left:0;right:0;height:1px;
background:linear-gradient(to right,
var(--color-border-strong) 0%,
var(--color-border-strong) 35%,
var(--color-border) 65%,
transparent 100%);
}
.help-sc__row:last-child::after,
.help-wn__item:last-child::after{content:none;}
/* Themes submenu — injected into the profile dropdown by js/app.js. Flyout opens
to the LEFT of the item (the profile menu is pinned to the top-right corner). */
.dropdown-submenu{position:relative;}
.dropdown-submenu__toggle{width:100%;justify-content:flex-start;background:transparent;border:0;font:inherit;}
.dropdown-submenu__caret{margin-left:auto;width:14px;height:14px;flex-shrink:0;}
.dropdown-submenu__panel{position:absolute;top:-6px;right:100%;margin-right:5px;min-width:168px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:6px;z-index:110;display:none;}
.dropdown-submenu.open > .dropdown-submenu__panel{display:block;}
.theme-opt{width:100%;justify-content:space-between;background:transparent;border:0;font:inherit;text-align:left;}
.theme-opt .theme-check{width:15px;height:15px;flex-shrink:0;visibility:hidden;color:var(--color-primary-700);}
.theme-opt.active{color:var(--color-primary-700);font-weight:500;}
.theme-opt.active .theme-check{visibility:visible;}
/* The full-color logo (used on the light Modern/Sandstone sidebars) is wider than
the white one — fit it to the brand area so it doesn't clip. Default/Graphite keep
the white logo at its native size. */
[data-theme="modern"] .sidebar-brand img,
[data-theme="sandstone"] .sidebar-brand img{max-width:100%;height:auto;}
/* --- Graphite (dark) component tint fixes: icon tiles + status pills carry
hardcoded light values that don't ride the token swap. Remap them onto
graphite's own tokens. Light themes stay untouched (base rules unchanged). --- */
[data-theme="graphite"] .thumb { background: var(--color-primary-50); border-color: var(--color-border-strong); }
[data-theme="graphite"] .badge-neutral { background: var(--bg-input-1); color: var(--color-text); border-color: var(--color-border-strong); }
[data-theme="graphite"] .badge-info { color: var(--color-info); border-color: var(--color-border-strong); }
[data-theme="graphite"] .badge-success { color: var(--color-success); border-color: var(--color-border-strong); }
[data-theme="graphite"] .badge-warn { color: var(--color-warn); border-color: var(--color-border-strong); }
[data-theme="graphite"] .badge-danger { color: var(--color-danger); border-color: var(--color-border-strong); }
[data-theme="graphite"] .badge-primary { border-color: var(--color-border-strong); }
/* --- Ensure the hidden attribute always hides (incl. flex/grid elements) --- */
[hidden] { display: none !important; }
/* Add-warehouse tile — mirrors the catalog price-type add tile */
.wh-add-tile { width:110px; display:flex; align-items:center; justify-content:center; min-height:120px; border:1.5px dashed var(--color-border-strong); background:transparent; box-shadow:none; color:var(--color-text-subtle); cursor:pointer; font:inherit; transition:border-color 120ms, color 120ms; }
.wh-add-tile:hover { border-color:var(--color-primary); color:var(--color-primary); }
/* -------------------------------------------------------------------------
Modal / dialog — shared overlay primitive (opened via data-modal-open="id",
closed via data-modal-close / backdrop / Escape; engine in js/app.js)
------------------------------------------------------------------------- */
.modal-overlay {
position: fixed; inset: 0; z-index: 200;
display: flex; align-items: flex-start; justify-content: center;
/* Dialogs open ABOVE the vertical midline. On a tall monitor a truly centred box
reads as low, and the eye is already in the upper half of the screen.
The lift is bottom padding: `.modal` centres itself with auto margins inside
this content box, so a deeper bottom inset raises it. Done with padding rather
than a transform, which `modal-pop` overwrites on its final frame. */
--modal-lift: 18vh;
padding: 48px 16px calc(48px + var(--modal-lift)); overflow-y: auto;
background: rgba(15, 23, 42, 0.44);
animation: modal-fade 120ms ease-out;
}
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
.modal {
width: 100%; max-width: 520px; margin: auto;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
/* The lift eats into the height a dialog may claim, so it is subtracted here —
otherwise a full-height modal would push past the bottom inset and scroll the
overlay. Falls back to 0 for any `.modal` used outside `.modal-overlay`. */
display: flex; flex-direction: column; max-height: calc(100vh - 96px - var(--modal-lift, 0px));
animation: modal-pop 140ms ease-out;
}
@keyframes modal-pop { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-sm { max-width: 400px; }
.modal-lg { max-width: 760px; }
.modal-header {
display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
padding: 14px 16px; border-bottom: 1px solid var(--color-border); flex: none;
}
.modal-header h2 { margin: 0; font-size: 17px; }
.modal-header .sub { color: var(--color-text-subtle); font-size: 12px; margin-top: 2px; }
.modal-body { padding: 16px; overflow-y: auto; }
.modal-footer {
display: flex; align-items: center; justify-content: flex-end; gap: 8px;
padding: 12px 16px; border-top: 1px solid var(--color-border); flex: none;
}
.modal-footer .spacer { flex: 1; }
.modal-close {
flex: none; display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px; border: 0; background: transparent; cursor: pointer;
border-radius: var(--radius-sm); color: var(--color-text-muted);
}
.modal-close:hover { background: var(--color-surface-alt); color: var(--color-text); }
.modal-close svg { width: 18px; height: 18px; }
/* stacked form fields inside modals */
.modal-body .field + .field,
.modal-body .form-row + .field,
.modal-body .field + .form-row,
.modal-body .form-row + .form-row { margin-top: 14px; }
/* Fields laid out horizontally in a form-row must not inherit the stacked-field top margin. */
.modal-body .form-row > .field + .field { margin-top: 0; }
/* Page Settings › Options dialog — one flat list of per-user page defaults, no subsections.
Toggles stack as full rows (.switch-field is inline-flex by default, which would
otherwise run them together on one line). The first toggle needs breathing room from
the controls above it whether those sit in a bare .field or a .form-row wrapper. */
.opt-dialog .switch-field { display: flex; padding: 7px 0; }
.opt-dialog .field + .switch-field,
.opt-dialog .form-row + .switch-field { margin-top: 12px; }
.opt-dialog__reset { margin-right: auto; }
/* Assign-salesperson picker rows (account-ownership visibility) */
.assign-opt {
gap: 10px; align-items: center;
padding: 8px 10px; border: 1px solid var(--color-border);
border-radius: 5px; cursor: pointer;
transition: background 120ms, border-color 120ms;
}
.assign-opt:hover { border-color: var(--color-primary); background: var(--color-surface-alt); }
.assign-opt:has(input:checked) {
background: var(--color-primary-50); border-color: #D6E2FA;
}
[data-assign-hint] {
display: flex; align-items: center; gap: 8px;
padding: 9px 11px; border-radius: 5px; font-size: 12px;
background: var(--color-surface-alt); color: var(--color-text-muted);
}
[data-assign-hint][data-state="gated"] { background: var(--color-primary-50); color: var(--color-primary-700); }
[data-assign-hint] svg { width: 14px; height: 14px; flex: none; }
/* Switches sit directly in centered table cells here (no flex row) — give them a box */
#users-roles .switch { display: inline-block; vertical-align: middle; }
.form-row { display: flex; gap: 12px; }
.form-row > .field { flex: 1; }
/* Toast — transient action feedback */
.toast-host { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 300; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 14px; border-radius: var(--radius-md);
background: var(--color-text); color: #fff; font-size: 13px; font-weight: 500;
box-shadow: var(--shadow-lg); animation: toast-in 160ms ease-out;
}
.toast svg { width: 16px; height: 16px; }
.toast.is-success { background: var(--color-success); }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.wh-add-tile svg { width:48px; height:48px; stroke-width:3; }
/* ===================== STOCK REBUILD ADDITIONS ===================== */
/* Slide-over (right-anchored modal variant) */
/* Slide-overs start below the top bar (header stays visible); centered modals unaffected. */
/* Edge-anchored and full-height, so the centred dialogs' upward lift does not apply. */
.slideover-overlay { top: var(--header-h); align-items: stretch; justify-content: flex-end; padding: 0; --modal-lift: 0px; }
.slideover {
width: min(500px, 100%); max-width: 100%; height: 100%; max-height: 100%;
margin: 0; border-radius: 0; border: 0; border-left: 1px solid var(--color-border);
background: var(--color-surface); box-shadow: var(--shadow-lg);
display: flex; flex-direction: column; animation: slideover-in 180ms ease-out;
}
@keyframes slideover-in { from { transform: translateX(24px); opacity: .6 } to { transform: none; opacity: 1 } }
.slideover-head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
padding: 16px; border-bottom: 1px solid var(--color-border); flex: none;
}
.slideover-head .sub { color: var(--color-text-subtle); font-size: 12px; margin-top: 3px; }
.slideover-body { padding: 16px; overflow-y: auto; flex: 1; }
.slideover-foot {
display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px;
border-top: 1px solid var(--color-border); flex: none; background: var(--color-surface-alt);
}
/* Slide-over product gallery — hero + up to 4 thumbnails, all crops of one --img source */
.so-gallery { margin-bottom: 16px; }
.so-gallery-hero {
width: 100%; aspect-ratio: 1.7 / 1; border-radius: 5px; border: 1px solid var(--color-border);
background-image: var(--img); background-size: cover; background-position: center; background-repeat: no-repeat;
}
.so-gallery-thumbs { display: flex; gap: 8px; margin-top: 8px; }
.so-thumb {
width: 56px; height: 56px; flex: none; padding: 0; cursor: pointer;
border-radius: 5px; border: 1px solid var(--color-border);
background-image: var(--img); background-size: cover; background-repeat: no-repeat;
}
.so-thumb:hover { border-color: var(--color-border-strong); }
.so-thumb.active { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary-50); }
/* Tree (hierarchical detail) */
.tree { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.tree-node { display: flex; flex-direction: column; }
.tree-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 5px; }
.tree-row:hover { background: var(--color-surface-alt); }
.tree-toggle {
flex: none; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center;
border: 0; background: transparent; cursor: pointer; color: var(--color-text-muted); border-radius: 5px;
}
.tree-toggle svg { width: 15px; height: 15px; }
.tree-ico { width: 15px; height: 15px; color: var(--color-text-subtle); flex: none; }
.tree-label { color: var(--color-primary-700); text-decoration: none; font-weight: 500; }
.tree-label:hover { text-decoration: none; color: var(--color-primary); }
.tree-meta { margin-left: auto; color: var(--color-text-subtle); font-size: 12px; }
.tree-children {
margin-left: 15px; padding-left: 12px; border-left: 1px solid var(--color-border);
display: flex; flex-direction: column; gap: 2px; margin-top: 2px;
}
.tree-spacer { width: 20px; flex: none; }
/* Import step-flow */
.step-flow { display: flex; align-items: center; gap: 0; margin-bottom: 16px; }
.step { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.step-num {
flex: none; width: 28px; height: 28px; border-radius: 999px;
display: inline-flex; align-items: center; justify-content: center;
font-weight: 600; font-size: 13px; background: var(--color-surface-alt);
color: var(--color-text-muted); border: 1px solid var(--color-border-strong);
}
.step.is-current .step-num { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.step.is-done .step-num { background: var(--color-success); color: #fff; border-color: var(--color-success); }
.step-label { font-size: 13px; font-weight: 500; white-space: nowrap; }
.step.is-current .step-label { color: var(--color-primary-700); }
.step-line { flex: 1; height: 1px; background: var(--color-border-strong); margin: 0 12px; }
/* Dropzone (import upload) */
.dropzone {
border: 1.5px dashed var(--color-border-strong); border-radius: 5px;
background: var(--color-primary-50); padding: 32px; text-align: center;
display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.dropzone .dz-ico { width: 40px; height: 40px; color: var(--color-primary); }
/* Media Uploader — up to 5 Images + 2 Videos per stock item.
Tiles, counter, buttons and dropzone are all built by js/media-uploader.js;
the page only writes + an optional seed list. */
.media-up-ui { display: flex; flex-direction: column; gap: 10px; }
.media-up-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.media-up-count { font-size: 12px; color: var(--color-text-muted); }
.media-up-count b { color: var(--color-text); font-weight: 600; }
.media-up-count .sep { margin: 0 7px; color: var(--color-border-strong); }
.media-up-actions { display: flex; gap: 6px; margin-left: auto; }
.media-up-grid {
display: grid; gap: 8px;
grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
}
.media-up-grid:empty { display: none; }
.media-tile {
position: relative; aspect-ratio: 1.4 / 1; overflow: hidden;
border: 1px solid var(--color-border); border-radius: var(--radius);
background-color: var(--color-surface-alt);
background-size: cover; background-repeat: no-repeat;
}
.media-tile--image { cursor: grab; }
.media-tile.is-dragging { opacity: .4; }
.media-tile.is-drop-target { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary-50); }
.media-tile video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }
.media-tile-layer { position: absolute; inset: 0; }
.media-tile-badge {
position: absolute; left: 6px; top: 6px;
display: inline-flex; align-items: center; gap: 4px;
height: 20px; padding: 0 7px; border-radius: var(--radius);
background: var(--color-primary); color: #fff;
font-size: 12px; font-weight: 600; line-height: 1;
}
.media-tile-badge--video { background: rgba(20,22,26,.72); font-weight: 500; }
.media-tile-badge i, .media-tile-badge svg { width: 12px; height: 12px; }
.media-tile-acts {
position: absolute; right: 5px; top: 5px;
display: flex; gap: 4px; opacity: 0; transition: opacity .12s;
}
.media-tile:hover .media-tile-acts,
.media-tile:focus-within .media-tile-acts { opacity: 1; }
.media-tile-act {
width: 26px; height: 26px; padding: 0; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid rgba(255,255,255,.35); border-radius: var(--radius);
background: rgba(20,22,26,.62); color: #fff;
}
.media-tile-act:hover { background: rgba(20,22,26,.88); }
.media-tile-act--danger:hover { background: var(--color-danger); border-color: var(--color-danger); }
.media-tile-act i, .media-tile-act svg { width: 14px; height: 14px; }
.media-tile-name {
position: absolute; inset: auto 0 0 0; padding: 12px 7px 4px;
background: linear-gradient(to top, rgba(20,22,26,.8), rgba(20,22,26,0));
color: #fff; font-size: 12px; line-height: 1.25;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.media-up-drop {
display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
padding: 14px; text-align: center;
border: 1.5px dashed var(--color-border-strong); border-radius: var(--radius);
background: var(--color-surface-alt);
font-size: 13px; color: var(--color-text-muted);
}
.media-up-drop.is-over { border-color: var(--color-primary); background: var(--color-primary-50); }
.media-up-drop .dz-ico { width: 20px; height: 20px; color: var(--color-primary); }
.media-up.is-full .media-up-drop { display: none; }
@media (max-width: 768px) {
.media-up-grid { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
/* Tile actions are hover-revealed on desktop; on touch there is no hover, so they stay
visible and grow to the 44px minimum tap target. */
.media-tile-acts { opacity: 1; }
.media-tile-act { width: 44px; height: 44px; }
.media-tile-act i, .media-tile-act svg { width: 18px; height: 18px; }
.media-up-actions .btn { min-height: 44px; }
}
@media (max-width: 480px) {
.media-up-actions { width: 100%; margin-left: 0; }
.media-up-actions .btn { flex: 1; justify-content: center; }
}
/* Responsive 16:9 video embed (video-help modal) */
.video-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 5px; overflow: hidden; background: #000; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Product photo thumbnails (1.7 : 1) + person face avatars — background-image set by app.js.
font-size:0 hides the initials visually while keeping them in the DOM for table search. */
.thumb.is-photo {
width: 61px; /* 1.7 : 1 against the 36px base height */
background-size: cover; background-position: center; background-repeat: no-repeat;
color: transparent; font-size: 0; border-color: rgba(0,0,0,.08);
}
.thumb.is-face, .avatar.is-face {
background-size: cover; background-position: center 30%; background-repeat: no-repeat;
color: transparent; font-size: 0; border-color: rgba(0,0,0,.08);
}
body > div:nth-of-type(1) > main > div {
background-color: var(--bg-page-1);
}
/* ---- Import entry grid + image tiles --------------------------------------
The inline editable grid in the import slide-overs, and the thumbnail grid
beside it. Hoisted out of nine pages'