so it scrolls
horizontally on small screens instead of pushing the whole page wider. */
.table-responsive {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* ── PAGINATION ───────────────────────────────────────────── */
/* Laravel's own paginator view is written for Tailwind, which this portal does
not load: its w-5/h-5 on the arrow icons resolve to nothing and the SVGs grow
to fill the page. Rather than sizing that away, the portal ships its own view
(vendor/pagination/portal.blade.php) and styles it here, so every page using
->links() looks the same and none of them depends on a stylesheet we do not
have. Any svg inside is still bounded, in case a view slips through. */
.pager {
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
font-size: 13px;
}
.pager a,
.pager span {
display: inline-block;
min-width: 32px;
padding: 5px 10px;
border-radius: var(--radius-sm, 6px);
text-align: center;
text-decoration: none;
color: var(--neutral-600);
border: 1px solid transparent;
}
.pager a:hover { background: var(--neutral-100); }
.pager .pager-current {
background: var(--croco-green, #0F172A);
color: var(--white, #fff);
font-weight: 600;
}
.pager .pager-disabled { color: var(--neutral-300); }
.pager .pager-gap { padding-left: 4px; padding-right: 4px; }
.pager-summary { font-size: 12px; color: var(--neutral-500); margin-left: auto; }
.pager svg { width: 14px; height: 14px; }
/* =============================================================
SHARED COMPONENTS (ticket #245, UI/UX audit 04-10-2026)
One card, section header, KPI card, button set and filter bar,
taken from the Settings page (card, section header, buttons) and
Inventory Overview (KPI card, filter bar). Prefixed `sb-` on purpose:
26 views define their own .card and 47 their own .btn variants, and an
unprefixed rule here would leak padding and shadows into every one of
them. A page moves over when it is touched anyway and drops its local
copy in the same change; there is no big-bang sweep.
Colours come from the tokens above only. A channel colour is an accent
(dot, logo, border), never a button colour.
============================================================= */
/* ── CARD ─────────────────────────────────────────────────── */
.sb-card {
background: var(--white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
margin-bottom: 16px;
overflow: hidden;
}
.sb-card-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 16px 20px;
border-bottom: 1px solid var(--neutral-100);
}
.sb-card-header h3 {
margin: 0;
font-family: var(--font-heading);
font-size: 17px;
font-weight: 500;
color: var(--neutral-800);
}
.sb-card-body { padding: 20px; }
.sb-card-desc {
margin: 0;
padding: 14px 20px 0;
font-size: 13px;
line-height: 1.5;
color: var(--neutral-500);
}
/* ── SECTION HEADER ───────────────────────────────────────── */
.sb-section-header {
background: var(--white);
border-radius: var(--radius-lg);
border-left: 4px solid var(--synca-dark);
box-shadow: var(--shadow-md);
padding: 20px 24px 18px;
margin-bottom: 16px;
}
.sb-section-header h2 {
margin: 0 0 4px;
font-family: var(--font-heading);
font-size: 22px;
font-weight: 600;
color: var(--neutral-900);
}
.sb-section-header p {
margin: 0;
font-size: 13px;
line-height: 1.5;
color: var(--neutral-500);
}
/* ── KPI CARD ─────────────────────────────────────────────── */
/*
Tones: none (navy), is-success, is-warning, is-danger. */
.sb-kpi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 16px;
margin-bottom: 24px;
}
.sb-kpi {
display: flex;
align-items: center;
gap: 16px;
padding: 20px 22px;
background: var(--white);
border: 1px solid var(--neutral-200);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
color: inherit;
text-decoration: none;
transition: box-shadow 0.2s, transform 0.2s;
}
a.sb-kpi:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.sb-kpi-icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 48px;
height: 48px;
border-radius: 14px;
background: var(--croco-green-subtle);
color: var(--synca-dark);
}
.sb-kpi-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sb-kpi-value {
margin-bottom: 3px;
font-family: var(--font-heading);
font-size: 26px;
font-weight: 600;
line-height: 1.1;
color: var(--synca-dark);
}
.sb-kpi-label {
font-family: var(--font-body);
font-size: 11px;
letter-spacing: 0.6px;
text-transform: uppercase;
color: var(--neutral-500);
}
.sb-kpi.is-success .sb-kpi-icon { background: #dcfce7; color: var(--color-success); }
.sb-kpi.is-success .sb-kpi-value { color: var(--color-success); }
.sb-kpi.is-warning .sb-kpi-icon { background: var(--synca-yellow-subtle); color: #92400e; }
.sb-kpi.is-warning .sb-kpi-value { color: var(--color-warning); }
.sb-kpi.is-danger .sb-kpi-icon { background: var(--lego-red-light); color: var(--lego-red); }
.sb-kpi.is-danger .sb-kpi-value { color: var(--lego-red); }
/* ── BUTTONS ──────────────────────────────────────────────── */
/* Four kinds and no more: primary (navy, the one main action of a block),
secondary (white with a border), ghost (text only) and danger. */
.sb-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px 16px;
border: 1px solid transparent;
border-radius: var(--radius-md);
font-family: var(--font-heading);
font-size: 13px;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
text-decoration: none;
cursor: pointer;
transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.sb-btn:focus-visible { outline: 2px solid var(--synca-dark); outline-offset: 2px; }
.sb-btn:disabled, .sb-btn.is-disabled { opacity: 0.5; cursor: not-allowed; }
.sb-btn-sm { padding: 5px 10px; font-size: 12px; border-radius: var(--radius-sm); }
.sb-btn-primary { background: var(--synca-dark); border-color: var(--synca-dark); color: var(--white); }
.sb-btn-primary:hover { background: var(--synca-dark-800); border-color: var(--synca-dark-800); color: var(--white); }
.sb-btn-secondary { background: var(--white); border-color: var(--neutral-200); color: var(--neutral-700); }
.sb-btn-secondary:hover { background: var(--neutral-50); border-color: var(--synca-dark); color: var(--synca-dark); }
.sb-btn-ghost { background: transparent; color: var(--neutral-700); }
.sb-btn-ghost:hover { background: var(--neutral-100); color: var(--neutral-900); }
.sb-btn-danger { background: var(--lego-red); border-color: var(--lego-red); color: var(--white); }
.sb-btn-danger:hover { background: #b91c1c; border-color: #b91c1c; color: var(--white); }
/* ── FILTER BAR ───────────────────────────────────────────── */
/* One strip of equal-height controls; a select showing "All types" already
says what it filters, so no caps label above each control. */
.sb-filter-bar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
padding: 14px 18px;
margin-bottom: 24px;
background: var(--white);
border: 1px solid var(--neutral-200);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.sb-filter-bar input[type="text"],
.sb-filter-bar input[type="search"],
.sb-filter-bar input[type="number"],
.sb-filter-bar input[type="date"],
.sb-filter-bar select {
height: 36px;
padding: 0 10px;
box-sizing: border-box;
border-radius: var(--radius-sm);
font-size: 13px;
}
.sb-filter-bar .sb-filter-search { flex: 1 1 240px; min-width: 190px; max-width: 340px; }
.sb-filter-bar .sb-filter-end { margin-left: auto; display: flex; gap: 8px; }
@media (max-width: 600px) {
.sb-filter-bar .sb-filter-search { max-width: none; }
.sb-filter-bar .sb-filter-end { margin-left: 0; }
}
/* ── PAGE TAB STRIP ───────────────────────────────────────── */
/* Rendered by the tab-strip component only (ticket #244); one per page.
Never wraps: when the tabs do not fit, the strip scrolls sideways and
the component's script fades whichever edge still hides tabs. */
.sb-tab-strip {
position: relative;
display: flex;
gap: 4px;
width: fit-content;
max-width: 100%;
box-sizing: border-box;
padding: 4px;
background: var(--white);
border: 1px solid var(--neutral-200);
border-radius: var(--radius-md);
overflow-x: auto;
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.sb-tab-strip::-webkit-scrollbar { display: none; }
.sb-tab-strip.has-more-end {
-webkit-mask-image: linear-gradient(to right, black calc(100% - 32px), transparent);
mask-image: linear-gradient(to right, black calc(100% - 32px), transparent);
}
.sb-tab-strip.has-more-start {
-webkit-mask-image: linear-gradient(to left, black calc(100% - 32px), transparent);
mask-image: linear-gradient(to left, black calc(100% - 32px), transparent);
}
.sb-tab-strip.has-more-start.has-more-end {
-webkit-mask-image: linear-gradient(to right, transparent, black 32px, black calc(100% - 32px), transparent);
mask-image: linear-gradient(to right, transparent, black 32px, black calc(100% - 32px), transparent);
}
.sb-tab {
display: inline-flex;
align-items: center;
flex-shrink: 0;
padding: 6px 14px;
border-radius: var(--radius-sm);
font-size: 13px;
font-weight: 600;
white-space: nowrap;
text-decoration: none;
color: var(--neutral-500);
transition: background 0.15s, color 0.15s;
}
.sb-tab:hover { background: var(--neutral-100); color: var(--neutral-700); }
.sb-tab.is-active,
.sb-tab.is-active:hover { background: var(--synca-dark); color: var(--white); }
.sb-tab:focus-visible { outline: 2px solid var(--synca-dark); outline-offset: -2px; }
.sb-tab-badge {
margin-left: 6px;
padding: 1px 6px;
border-radius: 10px;
background: #b91c1c;
color: var(--white);
font-size: 10px;
line-height: 1.4;
}
@media (hover: none) and (pointer: coarse) {
.sb-tab:not(.is-active):hover { background: transparent; color: var(--neutral-500); }
}
@media print {
.sb-tab-strip { display: none; }
}
/* ── FILTER CHIPS + SEGMENTED CONTROL ─────────────────────── */
/* A control that filters the list in place is a chip row, never a second
tab strip (ticket #297). Chips are buttons or links; the selected one
carries .is-active (or aria-pressed="true" / aria-current). On a phone
the row scrolls sideways instead of stacking into rows of pills.
.sb-segmented is the two-to-four option switch (view mode, period). */
.sb-chips {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
max-width: 100%;
}
.sb-chips-label {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.4px;
color: var(--neutral-400);
white-space: nowrap;
}
.sb-chip {
display: inline-flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
min-height: 32px;
box-sizing: border-box;
padding: 5px 12px;
border: 1px solid var(--neutral-200);
border-radius: 999px;
background: var(--white);
color: var(--neutral-600);
font-family: inherit;
font-size: 13px;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
text-decoration: none;
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sb-chip:hover { background: var(--neutral-100); color: var(--neutral-700); }
.sb-chip.is-active,
.sb-chip[aria-pressed="true"],
.sb-chip[aria-current] { background: var(--synca-dark); border-color: var(--synca-dark); color: var(--white); }
.sb-chip:focus-visible { outline: 2px solid var(--synca-dark); outline-offset: 2px; }
.sb-chip-count {
padding: 0 6px;
border-radius: 10px;
background: var(--neutral-100);
color: var(--neutral-600);
font-size: 11px;
line-height: 1.6;
}
.sb-chip.is-active .sb-chip-count,
.sb-chip[aria-pressed="true"] .sb-chip-count,
.sb-chip[aria-current] .sb-chip-count { background: rgba(255, 255, 255, 0.18); color: var(--white); }
.sb-segmented {
display: inline-flex;
gap: 2px;
max-width: 100%;
box-sizing: border-box;
padding: 3px;
border-radius: var(--radius-md);
background: var(--neutral-100);
overflow-x: auto;
scrollbar-width: none;
}
.sb-segmented::-webkit-scrollbar { display: none; }
.sb-segmented > button,
.sb-segmented > a {
flex-shrink: 0;
padding: 5px 12px;
border: 0;
border-radius: var(--radius-sm);
background: transparent;
color: var(--neutral-500);
font-family: inherit;
font-size: 13px;
font-weight: 600;
white-space: nowrap;
text-decoration: none;
cursor: pointer;
}
.sb-segmented > .is-active,
.sb-segmented > [aria-pressed="true"] { background: var(--white); color: var(--synca-dark); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.sb-segmented > :focus-visible { outline: 2px solid var(--synca-dark); outline-offset: -2px; }
@media (max-width: 767px) {
.sb-chips {
flex-wrap: nowrap;
overflow-x: auto;
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.sb-chips::-webkit-scrollbar { display: none; }
}
@media (hover: none) and (pointer: coarse) {
.sb-chip { min-height: 40px; }
.sb-chip:not(.is-active):not([aria-pressed="true"]):not([aria-current]):hover { background: var(--white); color: var(--neutral-600); }
}
/* ── CHANNEL ACCENT ───────────────────────────────────────── */
/* The page sets --channel-color on the element (or a parent); the colour
only ever marks, it never fills a button. */
.sb-channel-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--channel-color, var(--neutral-400));
flex-shrink: 0;
}
.sb-channel-accent { border-left: 3px solid var(--channel-color, var(--neutral-200)); }
/*
, slugs as in App\Support\Marketplace. */
.sb-channel-bricklink { --channel-color: var(--channel-bricklink); }
.sb-channel-shopify { --channel-color: var(--channel-shopify); }
.sb-channel-vinted { --channel-color: var(--channel-vinted); }
.sb-channel-bolcom { --channel-color: var(--channel-bolcom); }
.sb-channel-ebay { --channel-color: var(--channel-ebay); }
.sb-channel-brickowl { --channel-color: var(--channel-brickowl); }
.sb-channel-amazon { --channel-color: var(--channel-amazon); }
.sb-channel-whatnot { --channel-color: var(--channel-whatnot); }
.sb-channel-brickvillage { --channel-color: var(--channel-brickvillage); }
.sb-channel-marktplaats { --channel-color: var(--channel-marktplaats); }
.sb-channel-woocommerce { --channel-color: var(--channel-woocommerce); }
.sb-channel-brickscout { --channel-color: var(--channel-brickscout); }
.sb-channel-storefront { --channel-color: var(--channel-storefront); }
.sb-channel-local { --channel-color: var(--channel-local); }
@media (hover: none) and (pointer: coarse) {
a.sb-kpi:hover { box-shadow: var(--shadow-sm); transform: none; }
.sb-btn-primary:hover { background: var(--synca-dark); border-color: var(--synca-dark); }
.sb-btn-secondary:hover { background: var(--white); border-color: var(--neutral-200); color: var(--neutral-700); }
}
/* ── GUEST PAGES ──────────────────────────────────────────── */
/* layouts/guest.blade.php (ticket #246): login, setup, tracking, payment return,
the phone photo pages and the shared exports. The body defaults sit in :where()
so they weigh nothing: a page's own `body { … }` rule, loaded after brand.css,
still wins. */
:where(body.sb-guest) {
margin: 0;
background: var(--neutral-50);
color: var(--neutral-900);
line-height: 1.6;
}
/* The shop's logo and name on top of a buyer-facing card (components/guest-brand). */
.sb-guest-brand {
background: var(--synca-dark);
border-top: 4px solid var(--synca-yellow);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
padding: 28px 36px;
text-align: center;
}
.sb-guest-brand-logo {
display: block;
max-height: 48px;
max-width: 200px;
margin: 0 auto 8px;
border-radius: var(--radius-sm);
}
.sb-guest-brand-name {
display: block;
font-family: var(--font-heading);
font-size: 22px;
font-weight: 700;
line-height: 1.3;
color: var(--white);
letter-spacing: -0.3px;
}
@media (max-width: 600px) {
.sb-guest-brand { border-radius: 0; padding: 22px 24px; }
}
/* On its own above a page rather than on top of a card: rounded all round, on phones too. */
.sb-guest-brand.sb-guest-brand-standalone { border-radius: var(--radius-lg); }
/* The platform credit at the foot of a guest page (components/powered-by, `page`). */
.sb-powered-by {
padding: 16px 16px 24px;
text-align: center;
font-family: var(--font-body);
font-size: 11px;
line-height: 1.5;
color: var(--neutral-500);
letter-spacing: 0.3px;
}
.sb-powered-by a { color: inherit; text-decoration: none; }
.sb-powered-by a:hover { color: var(--neutral-700); text-decoration: underline; }
/* A channel's own logo (components/channel-logo, ticket #247): sized by its width and
height attributes, never stretched. */
.sb-channel-logo {
display: inline-block;
flex-shrink: 0;
object-fit: contain;
vertical-align: middle;
}
/* Two KPI cards per row on a phone, so the page's actions show on the first screen
instead of a column of numbers (ticket #249). */
@media (max-width: 600px) {
.sb-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sb-kpi { gap: 10px; padding: 14px; }
.sb-kpi-icon { width: 36px; height: 36px; border-radius: 10px; }
.sb-kpi-value { font-size: 20px; }
}