/* ────────────────────────────────────────
Shared app-shell design system: the .sk-list list shell, the .cd-page
detail shell and their pills/chips. Extracted from storekeeper.css so
EVERY theme gets them - they only read base --sk-* tokens, which each
theme defines, so dark mode and theme accents follow automatically.
Loaded from base.html.twig BEFORE the theme stylesheet: a theme can
still override any rule here by redefining it.
──────────────────────────────────────── */
/* ────────────────────────────────────────
Customer detail page (Option A)
Scoped to .cd-page; tokens mirror the design's --orange-x / --neutral-x
scale but resolve to the existing --sk-* theme so dark mode follows.
WCAG fixes from design chat: btn-primary = black-on-orange, fg-3 = #737373.
──────────────────────────────────────── */
.cd-page {
/* Local token scope */
--cd-orange-50: #FFF5E5;
--cd-orange-100: #FFEBCC;
--cd-orange-200: #FFD899;
--cd-orange-500: var(--sk-primary);
--cd-orange-600: var(--sk-primary-hover);
--cd-orange-700: #B36E00;
--cd-bg: var(--sk-bg);
--cd-surface: var(--sk-card-bg);
--cd-fg-1: var(--sk-text);
--cd-fg-2: var(--sk-text-muted);
--cd-fg-3: #737373;
--cd-fg-4: #9CA3AF;
--cd-border: var(--sk-border);
--cd-border-strong: var(--sk-border-strong);
--cd-success: #0F8A50;
--cd-danger: var(--sk-danger);
background: var(--cd-bg);
color: var(--cd-fg-1);
min-height: 100%;
}
html[data-scheme="dark"] .cd-page {
--cd-orange-50: #2A1F0A;
--cd-orange-100: #3D2C0E;
--cd-orange-700: #FFB020;
--cd-fg-3: #A0A3AA;
--cd-fg-4: #6B6E75;
}
/* ExactKassa's red (public/themes/storekeeper.css): the tints this scope sets as
literals. 500 and 600 already follow --sk-primary. */
body[data-sk-exact-kassa] .cd-page {
--cd-orange-50: #FCE6E7;
--cd-orange-100: #F9CDD0;
--cd-orange-200: #F49BA1;
--cd-orange-700: #9F040D;
}
html[data-scheme="dark"] body[data-sk-exact-kassa] .cd-page {
--cd-orange-50: #270A0C;
--cd-orange-100: #360A0D;
--cd-orange-200: #50090E;
--cd-orange-700: #E93842;
}
/* Left-aligned, gutter inherited from .sk-content (no centering / no extra
horizontal padding) so detail pages line up with list/overview pages. */
.cd-page .cd-inner { margin: 0; padding: 0 0 64px; }
/* Sticky frosted header */
.cd-page .cd-head {
position: sticky; top: 0; z-index: 5;
display: flex; align-items: center; gap: var(--sk-space-5);
background: color-mix(in srgb, var(--cd-bg) 88%, transparent);
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
margin: 0 0 var(--sk-space-8);
padding: var(--sk-space-5) 0;
border-bottom: 1px solid var(--cd-border);
min-width: 0;
}
.cd-page .cd-back {
width: 32px; height: 32px; border-radius: 8px;
border: 1px solid var(--cd-border); background: var(--cd-surface);
display: inline-flex; align-items: center; justify-content: center;
color: var(--cd-fg-2); text-decoration: none; flex: none;
}
.cd-page .cd-back:hover { color: var(--cd-fg-1); border-color: var(--sk-border-strong); }
.cd-page .cd-title {
font-size: 15px; font-weight: 600; margin: 0;
min-width: 0; flex: 0 1 auto;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
letter-spacing: -0.01em;
}
.cd-page .cd-id {
font-family: var(--sk-font-data); font-size: 12px; color: var(--cd-fg-3);
padding: 3px var(--sk-space-4); border: 1px solid var(--cd-border); border-radius: 999px;
background: var(--cd-surface); flex: none;
}
.cd-page .head-actions { margin-left: auto; display: flex; gap: var(--sk-space-3); flex: none; }
/* Buttons */
.cd-page .btn {
font-family: inherit; font-size: 13px; height: 36px; padding: 0 var(--sk-space-7);
border: 1px solid var(--cd-border); border-radius: 8px;
background: var(--cd-surface); color: var(--cd-fg-1);
display: inline-flex; align-items: center; gap: var(--sk-space-3); cursor: pointer;
}
.cd-page .btn:hover:not(:disabled) { background: var(--cd-bg); }
/* Without this a disabled button keeps full contrast and still lights up on
hover, so it reads as the most clickable thing on the page while doing
nothing. `.sk-list` below has always had it; `.cd-page` did not, which left
every detail-page app sharing the bug. Same values, deliberately. */
.cd-page .btn:disabled { opacity: 0.55; cursor: not-allowed; }
.cd-page .btn-primary {
background: var(--cd-orange-500); border-color: var(--cd-orange-500);
color: var(--sk-on-primary); font-weight: 600;
}
.cd-page .btn-primary:hover:not(:disabled) { background: var(--cd-orange-600); border-color: var(--cd-orange-600); }
.cd-page .btn-danger { color: var(--cd-danger); border-color: var(--cd-border); background: var(--cd-surface); }
.cd-page .btn-danger:hover:not(:disabled) { background: #FCE6E8; }
.cd-page .btn-iconbtn { width: 32px; height: 32px; padding: 0; justify-content: center; }
/* Hero band */
.cd-page .vA-hero {
background: var(--cd-surface); border: 1px solid var(--cd-border-strong);
box-shadow: 0 1px 3px rgba(17, 24, 39, 0.08);
border-radius: 12px; padding: var(--sk-space-8) 22px; margin-bottom: var(--sk-space-8);
display: flex; flex-direction: column; gap: var(--sk-space-7);
}
.cd-page .vA-hero-segs { display: flex; flex-wrap: wrap; gap: var(--sk-space-2); }
.cd-page .vA-hero-row2 {
display: grid; grid-template-columns: 1fr auto; gap: var(--sk-space-12);
align-items: center; padding-top: var(--sk-space-6); border-top: 1px solid var(--cd-border);
}
.cd-page .vA-hero-meta {
display: grid; grid-template-columns: auto 1fr; gap: var(--sk-space-3) var(--sk-space-6);
font-size: 13px; align-items: center; min-width: 0;
}
.cd-page .vA-hero-meta .ico { color: var(--cd-fg-3); display: inline-flex; }
.cd-page .vA-hero-meta .v { color: var(--cd-fg-1); word-break: break-word; min-width: 0; }
.cd-page .vA-hero-meta .v.mono { font-family: var(--sk-font-data); font-size: 12px; }
.cd-page .vA-hero-kpis { display: flex; gap: var(--sk-space-6); }
.cd-page .vA-hero-kpi {
padding: var(--sk-space-5) var(--sk-space-7); border-left: 1px solid var(--cd-border);
display: flex; flex-direction: column; gap: var(--sk-space-1);
}
.cd-page .vA-hero-kpi:first-child { border-left: 0; padding-left: var(--sk-space-2); }
.cd-page .vA-hero-kpi .lbl { font-size: 11px; color: var(--cd-fg-3); white-space: nowrap; }
.cd-page .vA-hero-kpi .val { font-family: var(--sk-font-data); font-size: 18px; font-weight: 500; white-space: nowrap; }
.cd-page .vA-hero-kpi .delta { font-size: 11px; color: var(--cd-success); font-family: var(--sk-font-data); white-space: nowrap; }
.cd-page .vA-hero-kpi .delta.warn { color: var(--cd-orange-700); }
/* Chips */
.cd-page .chip {
font-size: 11px; padding: 3px var(--sk-space-4); border-radius: 999px;
background: var(--cd-surface); border: 1px solid var(--cd-border-strong); color: var(--cd-fg-2);
}
.cd-page .chip.brand { background: var(--cd-orange-50); border-color: var(--cd-orange-100); color: var(--cd-orange-700); }
.cd-page .chip.more { background: transparent; color: var(--cd-fg-3); border-style: dashed; }
/* Tabs + content grid */
.cd-page .vA-grid { display: grid; grid-template-columns: 220px 1fr; gap: var(--sk-space-8); align-items: start; }
.cd-page .vA-grid.is-collapsed { grid-template-columns: 56px 1fr; }
.cd-page .cd-tabs {
position: sticky; top: 72px;
background: var(--cd-surface); border: 1px solid var(--cd-border);
border-radius: 12px; padding: var(--sk-space-4);
}
.cd-page .cd-tabs-toggle {
display: flex; align-items: center; gap: var(--sk-space-3); width: 100%;
padding: var(--sk-space-3) var(--sk-space-4) var(--sk-space-4); border: 0; background: transparent;
color: var(--cd-fg-3); font-size: 11px; font-weight: 500;
letter-spacing: 0.04em; cursor: pointer;
border-bottom: 1px solid var(--cd-border); margin-bottom: var(--sk-space-2);
}
.cd-page .cd-tabs-toggle:hover { color: var(--cd-fg-1); }
.cd-page .cd-tabs-toggle .lbl { text-transform: uppercase; letter-spacing: 0.06em; }
.cd-page .cd-tabs-toggle .chev { margin-left: auto; color: var(--cd-fg-3); display: inline-flex; }
.cd-page .cd-tabs-group {
padding: var(--sk-space-6) var(--sk-space-5) var(--sk-space-2); font-size: 10px; font-weight: 600;
letter-spacing: 0.06em; text-transform: uppercase; color: var(--cd-fg-3);
}
.cd-page .cd-tab {
display: flex; align-items: center; gap: var(--sk-space-5); padding: var(--sk-space-4) var(--sk-space-5);
border-radius: 6px; font-size: 13px; color: var(--cd-fg-1);
cursor: pointer; transition: background 0.18s; line-height: 1.2;
width: 100%; border: 0; background: transparent; text-align: left;
font-family: inherit;
}
.cd-page .cd-tab:hover { background: var(--cd-bg); }
.cd-page .cd-tab.active { background: var(--cd-orange-50); color: var(--cd-orange-700); font-weight: 500; }
.cd-page .cd-tab .ico { color: var(--cd-fg-3); display: inline-flex; flex: none; }
.cd-page .cd-tab.active .ico { color: var(--cd-orange-500); }
.cd-page .cd-tab .count {
margin-left: auto; font-family: var(--sk-font-data); font-size: 11px;
color: var(--cd-fg-3); padding: 1px var(--sk-space-3); border-radius: 999px;
background: var(--cd-bg); border: 1px solid var(--cd-border);
}
.cd-page .cd-tab.active .count { background: var(--cd-surface); color: var(--cd-orange-700); border-color: var(--cd-orange-100); }
/* Collapsed rail */
.cd-page .cd-tabs.collapsed { padding: var(--sk-space-3); }
.cd-page .cd-tabs.collapsed .cd-tabs-toggle { justify-content: center; padding: var(--sk-space-3) 0 var(--sk-space-4); }
.cd-page .cd-tabs.collapsed .cd-tabs-toggle .lbl { display: none; }
.cd-page .cd-tabs.collapsed .cd-tab { justify-content: center; padding: 9px 0; gap: 0; position: relative; }
.cd-page .cd-tabs.collapsed .cd-tab > span:not(.ico) { display: none; }
.cd-page .cd-tabs.collapsed .cd-tabs-group { display: none; }
.cd-page .cd-tabs.collapsed .cd-tab[data-has-count="true"]::after {
content: ''; position: absolute; top: 6px; right: 8px;
width: 6px; height: 6px; border-radius: 999px; background: var(--cd-orange-500);
}
/* Content */
.cd-page .cd-content { min-width: 0; display: flex; flex-direction: column; gap: var(--sk-space-8); }
.cd-page .cd-panel { display: flex; flex-direction: column; gap: var(--sk-space-8); }
.cd-page .cd-panel[hidden] { display: none; }
.cd-page .card {
background: var(--cd-surface); border: 1px solid var(--cd-border-strong); border-radius: 12px;
box-shadow: 0 1px 3px rgba(17, 24, 39, 0.08);
}
.cd-page .card-head {
display: flex; align-items: center; justify-content: space-between;
padding: var(--sk-space-7) 18px; border-bottom: 1px solid var(--cd-border);
}
.cd-page .card-title { font-size: 14px; font-weight: 600; margin: 0; }
.cd-page .card-body { padding: 18px; }
.cd-page .card-actions { display: flex; gap: var(--sk-space-4); }
/* KPI strip */
.cd-page .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sk-space-5); }
.cd-page .kpi {
background: var(--cd-surface); border: 1px solid var(--cd-border);
border-radius: 12px; padding: var(--sk-space-6) var(--sk-space-7); display: flex; flex-direction: column;
gap: var(--sk-space-2); min-width: 0;
}
.cd-page .kpi-label {
font-size: 11px; color: var(--cd-fg-3);
display: flex; align-items: center; gap: var(--sk-space-3);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cd-page .kpi-value {
font-family: var(--sk-font-data); font-size: 18px; font-weight: 500;
letter-spacing: -0.01em; color: var(--cd-fg-1); white-space: nowrap;
}
.cd-page .kpi-meta {
font-size: 11px; color: var(--cd-fg-3); font-family: var(--sk-font-data);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cd-page .kpi-meta.warn { color: var(--cd-orange-700); }
.cd-page .kpi-meta.up { color: var(--cd-success); }
/* Field grid */
.cd-page .fg-wide { display: grid; grid-template-columns: 160px 1fr 160px 1fr; gap: var(--sk-space-6) var(--sk-space-10); }
.cd-page .fg-wide .label { font-size: 12px; color: var(--cd-fg-3); padding-top: var(--sk-space-1); }
.cd-page .fg-wide .value { font-size: 14px; color: var(--cd-fg-1); word-break: break-word; min-width: 0; }
.cd-page .fg-wide .value.mono { font-family: var(--sk-font-data); }
.cd-page .fg-wide .value.muted { color: var(--cd-fg-3); }
/* Tables */
.cd-page .tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.cd-page .tbl th {
text-align: left; font-size: 11px; font-weight: 600;
letter-spacing: 0.04em; text-transform: uppercase; color: var(--cd-fg-3);
padding: var(--sk-space-5) var(--sk-space-7); border-bottom: 1px solid var(--cd-border);
background: var(--cd-bg);
}
.cd-page .tbl td { padding: var(--sk-space-6) var(--sk-space-7); border-bottom: 1px solid var(--cd-border); vertical-align: middle; }
.cd-page .tbl tr:last-child td { border-bottom: 0; }
.cd-page .tbl tr:hover td { background: var(--cd-bg); }
.cd-page .tbl .mono { font-family: var(--sk-font-data); }
.cd-page .tbl .num { font-family: var(--sk-font-data); text-align: right; }
.cd-page .cell-sub { font-size: 11px; color: var(--cd-fg-3); font-family: var(--sk-font-data); margin-top: var(--sk-space-1); }
/* Status pills */
.cd-page .status { display: inline-block; padding: var(--sk-space-1) var(--sk-space-4); border-radius: 999px; font-size: 11px; font-weight: 500; line-height: 1.5; }
.cd-page .status.new { background: #E6F7EE; color: #137A4D; }
.cd-page .status.draft { background: var(--cd-orange-50); color: var(--cd-orange-700); }
.cd-page .status.complete { background: #E6F7EE; color: #137A4D; }
.cd-page .status.warn { background: #FCE6E8; color: var(--cd-danger); }
.cd-page .status.muted { background: var(--cd-bg); color: var(--cd-fg-3); border: 1px solid var(--cd-border); }
/* Empty states */
.cd-page .empty { padding: 36px var(--sk-space-8); text-align: center; color: var(--cd-fg-3); font-size: 13px; }
.cd-page .empty .ico { display: inline-flex; color: var(--cd-fg-4); margin-bottom: var(--sk-space-4); }
/* Responsive: stack the hero KPIs under the meta on narrow screens */
@media (max-width: 1024px) {
.cd-page .vA-grid { grid-template-columns: 1fr; }
.cd-page .cd-tabs { position: static; }
.cd-page .vA-hero-row2 { grid-template-columns: 1fr; }
.cd-page .vA-hero-kpis { flex-wrap: wrap; }
.cd-page .kpis { grid-template-columns: repeat(2, 1fr); }
.cd-page .fg-wide { grid-template-columns: 1fr 1fr; }
}
/* ────────────────────────────────────────
Customer list page (.sk-list)
Scoped to .sk-list; tokens via existing --sk-* theme so dark mode works.
──────────────────────────────────────── */
.sk-list {
--sk-list-orange-50: #FFF5E5;
--sk-list-orange-100: #FFEBCC;
--sk-list-orange-200: #FFD899;
--sk-list-orange-500: var(--sk-primary);
--sk-list-orange-600: var(--sk-primary-hover);
--sk-list-orange-700: #B36E00;
--sk-list-bg: var(--sk-bg);
--sk-list-surface: var(--sk-card-bg);
--sk-list-fg-1: var(--sk-text);
--sk-list-fg-2: var(--sk-text-muted);
--sk-list-fg-3: #737373;
--sk-list-fg-4: #9CA3AF;
--sk-list-fg-450: #2A2A2A;
--sk-list-border: var(--sk-border);
--sk-list-border-strong: var(--sk-border-strong);
--sk-list-info-100: #E6EDFF;
--sk-list-chip: #ECEDEF;
--sk-list-danger: var(--sk-danger);
/* Horizontal + top gutter come from .sk-content so list pages line up with
every other page; only the extra bottom breathing room is local. */
padding: 0 0 40px;
width: 100%;
min-width: 0;
box-sizing: border-box;
font-family: var(--sk-font-body);
color: var(--sk-list-fg-1);
}
html[data-scheme="dark"] .sk-list {
--sk-list-orange-50: #2A1F0A;
--sk-list-orange-100: #3D2C0E;
--sk-list-orange-200: #5C400F;
--sk-list-fg-3: #A0A3AA;
--sk-list-fg-4: #6B6E75;
--sk-list-fg-450: #C5C7CC;
--sk-list-info-100: #1F2A4A;
--sk-list-chip: #262931;
}
/* ExactKassa's red (public/themes/storekeeper.css): the tints this scope sets as
literals. 500 and 600 already follow --sk-primary. */
body[data-sk-exact-kassa] .sk-list {
--sk-list-orange-50: #FCE6E7;
--sk-list-orange-100: #F9CDD0;
--sk-list-orange-200: #F49BA1;
--sk-list-orange-700: #9F040D;
}
html[data-scheme="dark"] body[data-sk-exact-kassa] .sk-list {
--sk-list-orange-50: #270A0C;
--sk-list-orange-100: #360A0D;
--sk-list-orange-200: #50090E;
--sk-list-orange-700: #E93842;
}
.sk-list .btn {
font-family: inherit; font-size: 13px; font-weight: 500;
height: 36px; padding: 0 var(--sk-space-7); border-radius: 8px;
border: 1px solid var(--sk-list-border); background: var(--sk-list-surface);
color: var(--sk-list-fg-450); cursor: pointer;
display: inline-flex; align-items: center; gap: var(--sk-space-4);
transition: background 0.12s, border-color 0.12s, color 0.12s;
white-space: nowrap; text-decoration: none;
}
.sk-list .btn:hover:not(:disabled) { background: var(--sk-list-bg); border-color: var(--sk-list-border-strong); }
.sk-list .btn:disabled { opacity: 0.55; cursor: not-allowed; }
.sk-list .btn-primary { background: var(--sk-list-orange-500); border-color: var(--sk-list-orange-500); color: var(--sk-on-primary); font-weight: 600; }
.sk-list .btn-primary:hover:not(:disabled) { background: var(--sk-list-orange-600); border-color: var(--sk-list-orange-600); }
.sk-list .btn-ghost { border-color: transparent; background: transparent; }
.sk-list .btn-ghost:hover { background: var(--sk-list-bg); }
.sk-list .btn-sm { height: 30px; padding: 0 var(--sk-space-5); font-size: 12px; }
.sk-list .btn-icon { width: 36px; height: 36px; padding: 0; justify-content: center; }
/* Header */
.sk-list .sk-list-header {
display: flex; align-items: flex-end; justify-content: space-between;
gap: var(--sk-space-12); margin-bottom: var(--sk-space-10);
/* The action buttons cannot shrink (their labels are nowrap), so without
this the title block absorbed every pixel of the squeeze: on /products at
1280 the subtitle was pressed into a ~110px column and broke across five
lines. Let the actions drop to their own row instead. */
flex-wrap: wrap;
}
/* Hold a readable floor for the title + subtitle. `flex-basis` alone is not
enough: the block still shrinks past it, which is how /products at 1600 kept
a two-line subtitle while the actions sat comfortably beside it. The
min-width makes the actions wrap first instead. `min()` keeps the floor from
overflowing a viewport narrower than the floor itself. */
.sk-list .sk-list-header-main { flex: 1 1 320px; min-width: min(320px, 100%); }
.sk-list .sk-list-crumb {
font-size: 12px; color: var(--sk-list-fg-3); letter-spacing: 0.02em;
margin-bottom: var(--sk-space-3); display: flex; align-items: center; gap: var(--sk-space-3);
}
.sk-list .sk-list-crumb svg { opacity: 0.5; }
/* The crumb as a link: the back control for a list that sits under a hub rather
than in the sidebar. Same line, same size; it only gains a hover. */
.sk-list a.sk-list-crumb { text-decoration: none; width: fit-content; }
.sk-list a.sk-list-crumb:hover { color: var(--sk-list-fg-1); }
.sk-list .sk-list-title {
font-size: 28px; font-weight: 700; letter-spacing: -0.02em;
line-height: 1.15; margin: 0; color: var(--sk-list-fg-1);
}
.sk-list .sk-list-subtitle {
font-size: 13px; color: var(--sk-list-fg-2); margin-top: var(--sk-space-3);
display: flex; align-items: center; gap: var(--sk-space-5); flex-wrap: wrap;
}
.sk-list .sk-list-subtitle b {
font-family: var(--sk-font-data); font-weight: 500;
color: var(--sk-list-fg-1); letter-spacing: 0.01em;
}
.sk-list .sk-list-subtitle .dot {
width: 3px; height: 3px; background: var(--sk-list-border-strong);
border-radius: 50%; display: inline-block;
}
/* `margin-left: auto` keeps the actions flush right on their own row too:
`justify-content: space-between` only positions a wrapped line's single item
at flex-start, which left-aligned the whole toolbar once it dropped. */
.sk-list .sk-list-header-actions {
display: flex; align-items: center; gap: var(--sk-space-4);
flex-wrap: wrap; justify-content: flex-end; margin-left: auto;
}
/* Segment tabs.
⛔ The unscoped block comes FIRST and is the one that matters. Every segment
rule below it was written as `.sk-list .sk-list-segment`, but the tab bars
that use these classes render ABOVE the list shell, not inside it - the
payments tabs have sat outside `.sk-list` since PR #130 and computed to
`display: block`, i.e. the whole bar rendered as bare body text on a screen
that returned a perfectly healthy 200. The unscoped rules read the page
tokens (`--sk-border`, `--sk-text-muted`, `--sk-primary`), which exist
everywhere; the `.sk-list`-scoped copies keep their `--sk-list-*` values and
still win inside a list by specificity, so list pages are unchanged. Any new
tab bar, inside the shell or above it, is styled by one of the two. */
.sk-list-segments {
display: flex; align-items: center; gap: var(--sk-space-1);
border-bottom: 1px solid var(--sk-border);
margin-bottom: var(--sk-space-10); flex-wrap: wrap;
}
.sk-list-segment {
display: inline-flex; align-items: center; gap: var(--sk-space-4);
padding: var(--sk-space-5) var(--sk-space-7) var(--sk-space-6);
border: none; background: transparent; font: inherit; font-size: 13px;
color: var(--sk-text-muted); cursor: pointer;
border-bottom: 2px solid transparent; margin-bottom: -1px;
white-space: nowrap; text-decoration: none;
transition: color 0.12s, border-color 0.12s;
}
.sk-list-segment:hover { color: var(--sk-text); }
.sk-list-segment.is-active {
color: var(--sk-text); border-bottom-color: var(--sk-primary); font-weight: 500;
}
.sk-list .sk-list-segments {
display: flex; align-items: center; gap: var(--sk-space-1);
border-bottom: 1px solid var(--sk-list-border);
margin-bottom: var(--sk-space-10); flex-wrap: wrap;
}
.sk-list .sk-list-segment {
display: inline-flex; align-items: center; gap: var(--sk-space-4);
padding: var(--sk-space-5) var(--sk-space-7) var(--sk-space-6); border: none; background: transparent;
font: inherit; font-size: 13px; color: var(--sk-list-fg-2);
cursor: pointer; border-bottom: 2px solid transparent;
margin-bottom: -1px; white-space: nowrap; text-decoration: none;
transition: color 0.12s, border-color 0.12s;
}
.sk-list .sk-list-segment:hover { color: var(--sk-list-fg-1); }
.sk-list .sk-list-segment.is-active {
color: var(--sk-list-fg-1); border-bottom-color: var(--sk-list-orange-500); font-weight: 500;
}
.sk-list .sk-list-segment-add {
margin-left: auto; color: var(--sk-list-fg-3); font-size: 12px;
padding: var(--sk-space-4) var(--sk-space-5); display: inline-flex; align-items: center; gap: var(--sk-space-3);
background: transparent; border: none; cursor: pointer;
}
.sk-list .sk-list-segment-add:hover:not(:disabled) { color: var(--sk-list-fg-450); }
.sk-list .sk-list-segment-add:disabled { opacity: 0.55; cursor: not-allowed; }
/* Toolbar */
.sk-list .sk-list-toolbar { display: flex; align-items: center; gap: var(--sk-space-5); margin-bottom: var(--sk-space-7); flex-wrap: wrap; }
.sk-list .sk-list-search { position: relative; flex: 1; min-width: 280px; max-width: 420px; display: block; }
.sk-list .sk-list-search input {
width: 100%; height: 36px; font: inherit; font-size: 13px;
padding: 0 36px; border: 1px solid var(--sk-list-border); border-radius: 8px;
background: var(--sk-list-surface); color: var(--sk-list-fg-1); outline: none;
transition: border-color 0.12s, box-shadow 0.12s; box-sizing: border-box;
}
.sk-list .sk-list-search input::placeholder { color: var(--sk-list-fg-4); }
.sk-list .sk-list-search input:focus { border-color: var(--sk-list-orange-500); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sk-list-orange-500) 20%, transparent); }
.sk-list .sk-list-search .lead { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--sk-list-fg-3); display: inline-flex; }
.sk-list .sk-list-search .kbd {
position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
font-family: var(--sk-font-data); font-size: 10.5px; color: var(--sk-list-fg-3);
border: 1px solid var(--sk-list-border); background: var(--sk-list-bg);
border-radius: 4px; padding: var(--sk-space-1) 5px; line-height: 1;
}
.sk-list .sk-list-popover-wrap { position: relative; }
.sk-list .sk-list-filter-btn .badge {
display: inline-flex; align-items: center; justify-content: center;
min-width: 18px; height: 18px; padding: 0 var(--sk-space-3); border-radius: 999px;
font-size: 11px; font-weight: 600; background: var(--sk-list-orange-500);
color: #000; margin-left: var(--sk-space-1);
}
.sk-list .sk-list-chips { display: flex; align-items: center; gap: var(--sk-space-3); flex-wrap: wrap; }
.sk-list .sk-list-chip {
display: inline-flex; align-items: center; gap: var(--sk-space-3); height: 28px;
padding: 0 var(--sk-space-2) 0 var(--sk-space-5); border-radius: 999px; border: 1px solid var(--sk-list-border);
background: var(--sk-list-surface); font-size: 12px; color: var(--sk-list-fg-450);
}
.sk-list .sk-list-chip .chip-key { color: var(--sk-list-fg-3); }
.sk-list .sk-list-chip .chip-val { font-weight: 500; color: var(--sk-list-fg-1); }
.sk-list .sk-list-chip .chip-x {
width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center;
border-radius: 999px; border: none; background: transparent; color: var(--sk-list-fg-3);
cursor: pointer; text-decoration: none;
}
.sk-list .sk-list-chip .chip-x:hover { background: var(--sk-list-bg); color: var(--sk-list-fg-1); }
.sk-list .sk-list-chip-clear {
font-size: 12px; color: var(--sk-list-fg-3); background: none; border: none;
cursor: pointer; padding: var(--sk-space-2) var(--sk-space-3); text-decoration: none;
}
.sk-list .sk-list-chip-clear:hover { color: var(--sk-list-orange-500); }
.sk-list .sk-list-right { margin-left: auto; display: flex; align-items: center; gap: var(--sk-space-4); }
/* Card
Background matches the header/footer band colour (not the white row surface):
with border-radius + overflow:hidden the card's own background is what peeks
through the rounded corners above the header row and below the footer. Rows
stay white via their own td background. */
.sk-list .sk-list-card {
background: var(--sk-list-bg); border: 1px solid var(--sk-list-border-strong);
border-radius: 12px; overflow: hidden;
box-shadow: 0 1px 3px rgba(17, 24, 39, 0.08);
}
/* Bulk action bar */
.sk-list .sk-list-bulk {
display: flex; align-items: center; gap: var(--sk-space-7); padding: var(--sk-space-5) var(--sk-space-8);
background: var(--sk-list-orange-50); border-bottom: 1px solid var(--sk-list-orange-200);
font-size: 13px; color: var(--sk-list-orange-700);
}
/* The class' display:flex outranks the UA [hidden] rule, so the bar must be
explicitly hidden until rows are selected (JS toggles the attribute). */
.sk-list .sk-list-bulk[hidden] { display: none; }
.sk-list .sk-list-bulk .bulk-count { font-weight: 600; color: var(--sk-list-fg-1); }
.sk-list .sk-list-bulk .bulk-actions { margin-left: auto; display: flex; gap: var(--sk-space-3); }
.sk-list .sk-list-bulk button {
font-family: inherit; font-size: 12px; font-weight: 500; height: 28px;
padding: 0 var(--sk-space-5); border-radius: 6px; border: 1px solid transparent;
background: rgba(255, 255, 255, 0.7); color: var(--sk-list-fg-1); cursor: pointer;
display: inline-flex; align-items: center; gap: var(--sk-space-3);
}
.sk-list .sk-list-bulk button:hover:not(:disabled) { background: #fff; border-color: var(--sk-list-orange-200); }
.sk-list .sk-list-bulk button:disabled { opacity: 0.55; cursor: not-allowed; }
.sk-list .sk-list-bulk button.danger { color: var(--sk-list-danger); }
/* Table */
.sk-list .sk-list-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
/* Below 1024px the responsive block further down hides columns 4-7, but a fixed
layout still reserves their widths, so the one flexible column (the name,
the tracking number) was left with nothing and its text ran over the next one.
Auto layout lets the hidden columns take no room; the card scrolls sideways
should what is left still not fit. */
@media (max-width: 1024px) {
.sk-list .sk-list-table { table-layout: auto; }
.sk-list .sk-list-card { overflow-x: auto; }
}
.sk-list .sk-list-table thead th {
position: sticky; top: 0; z-index: 1;
background: var(--sk-list-bg);
font-size: 11px; font-weight: 500; letter-spacing: 0.04em;
text-transform: uppercase; color: var(--sk-list-fg-3);
text-align: left; padding: var(--sk-space-5) var(--sk-space-6);
border-bottom: 1px solid var(--sk-list-border); white-space: nowrap;
}
.sk-list .sk-list-table thead th .th-inner {
display: inline-flex; align-items: center; gap: var(--sk-space-3); cursor: pointer;
user-select: none; text-decoration: none; color: inherit;
}
.sk-list .sk-list-table thead th .th-inner:hover { color: var(--sk-list-fg-450); }
.sk-list .sk-list-table thead th .th-inner.is-sorted { color: var(--sk-list-fg-1); }
/* A column the backend cannot sort on: no pointer, no hover, so the header
never looks like a control that does nothing when you press it. */
.sk-list .sk-list-table thead th .th-inner.is-locked { cursor: default; }
.sk-list .sk-list-table thead th .th-inner.is-locked:hover { color: inherit; }
.sk-list .sk-list-table thead th .sort-arrow { font-family: var(--sk-font-data); font-size: 10px; opacity: 0.7; }
.sk-list .sk-list-table thead th.col-right { text-align: right; }
.sk-list .sk-list-table thead th.col-right .th-inner { justify-content: flex-end; width: 100%; }
.sk-list .sk-list-table thead th.col-center { text-align: center; }
.sk-list .sk-list-table thead th.col-center .th-inner { justify-content: center; width: 100%; }
.sk-list .sk-list-table tbody td {
padding: var(--sk-space-6) var(--sk-space-6); border-bottom: 1px solid var(--sk-list-border);
font-size: 13px; color: var(--sk-list-fg-1); vertical-align: middle;
background: var(--sk-list-surface); transition: background 0.12s;
}
.sk-list .sk-list-table tbody tr:last-child td { border-bottom: none; }
.sk-list .sk-list-table tbody tr { cursor: pointer; }
.sk-list .sk-list-table tbody tr:hover td { background: var(--sk-list-bg); }
.sk-list .sk-list-table tbody tr.is-selected td { background: var(--sk-list-orange-50); }
.sk-list .sk-list-table tbody tr.is-selected:hover td { background: var(--sk-list-orange-100); }
.sk-list .col-check { width: 40px; }
.sk-list .col-type { width: 100px; }
.sk-list .col-location { width: 170px; }
.sk-list .col-lang { width: 56px; }
.sk-list .col-orders { width: 80px; }
.sk-list .col-last { width: 140px; }
.sk-list .col-ltv { width: 140px; }
.sk-list .col-end { width: 44px; }
/* Cell content */
.sk-list .c-customer { display: flex; align-items: center; gap: var(--sk-space-6); min-width: 0; }
.sk-list .avatar {
width: 34px; height: 34px; border-radius: 999px; flex: none;
display: inline-flex; align-items: center; justify-content: center;
font-weight: 500; font-size: 13px; text-transform: uppercase;
letter-spacing: 0.01em; background: var(--sk-list-bg); color: var(--sk-list-fg-450);
}
.sk-list .avatar.is-business { background: var(--sk-list-orange-50); color: var(--sk-list-orange-700); }
.sk-list .c-customer .stack { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sk-list .c-customer .stack .nm {
font-weight: 500; color: var(--sk-list-fg-1);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sk-list .c-customer .stack a.nm:hover { color: var(--sk-list-orange-500); }
.sk-list .c-customer .stack .em {
font-family: var(--sk-font-data); font-size: 11.5px; color: var(--sk-list-fg-3);
letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sk-list .pill {
display: inline-flex; align-items: center; gap: var(--sk-space-3);
height: 22px; padding: 0 9px; border-radius: 999px;
font-size: 11.5px; font-weight: 500; letter-spacing: 0.01em;
}
/* Same reason as the bulk bar above: `display: inline-flex` from a class outranks the
browser's own rule for `hidden`, so a pill that is switched off in markup has to be
switched off here too. Without it the quick view drew an empty grey pill for every
article that has no variants to count. */
.sk-list .pill[hidden] { display: none; }
.sk-list .pill::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: currentColor; opacity: 0.7; }
.sk-list .pill-private { background: var(--sk-list-chip); color: var(--sk-list-fg-2); }
/* `pill-group`: this row is a group, and the chip says how many are behind it. The
same tone as pill-business because it answers the same kind of question - what KIND
of thing is this row - and in the products list it is what separates an article from
a single product at a glance. */
.sk-list .pill-business,
.sk-list .pill-group { background: var(--sk-list-info-100); color: #2960c8; }
html[data-scheme="dark"] .sk-list .pill-business,
html[data-scheme="dark"] .sk-list .pill-group { color: #8AB0FF; }
.sk-list .muted { color: var(--sk-list-fg-3); }
/* Connection column (suppliers list) - type label + status pill, both
truncating independently instead of overflowing into the next column. */
.sk-list .connection-cell {
display: flex; align-items: center; gap: var(--sk-space-3); min-width: 0;
}
.sk-list .connection-type {
font-size: 12px; color: var(--sk-list-fg-2);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.sk-list .connection-cell .pill { flex: 0 0 auto; }
/* Field mapping column (suppliers list) - a tight, dot-less badge for
explicit config, and plain text (no badge) for the "system default,
nothing configured" case, matching the Retail OS design's mapInfo().
Both truncate with an ellipsis rather than overflowing into the Brands
column next to them. */
.sk-list .field-mapping-badge {
display: inline-flex; align-items: center; gap: var(--sk-space-2);
max-width: 100%; padding: 3px var(--sk-space-4); border-radius: 6px;
font-size: 10.5px; font-weight: 600; white-space: nowrap;
overflow: hidden; box-sizing: border-box;
}
.sk-list .field-mapping-badge-label { overflow: hidden; text-overflow: ellipsis; }
.sk-list .field-mapping-badge--custom { background: rgba(16, 185, 129, 0.15); color: #0F8A50; }
.sk-list .field-mapping-auto {
display: block; max-width: 100%; font-size: 11px; color: var(--sk-list-fg-3);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Suppliers connectors overview - two per row, matching the Retail OS design's
`grid-template-columns:1fr 1fr` (not auto-fit, which let a wide viewport
pack in 3+ and lose the card's intended proportions). */
.sk-list .suppliers-connectors-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sk-space-7); }
@media (max-width: 768px) {
.sk-list .suppliers-connectors-grid { grid-template-columns: 1fr; }
}
/* At-risk "not linked" hint (suppliers list) - hover to reveal, same
interaction as the Brands page's status flag: sits beside the pill, not
nested inside it, so the pill itself stays identical to the plain "not
linked" look. No click/JS needed - hovering doesn't fight the row's own
click-to-navigate behavior the way a click target would. */
.sk-list .risk-hint { position: relative; display: inline-flex; flex: 0 0 auto; }
.sk-list .risk-hint-mark {
display: inline-flex; align-items: center; justify-content: center;
width: 19px; height: 19px; border-radius: 50%;
background: rgba(230, 57, 70, 0.35); color: var(--sk-danger);
font-size: 12px; font-weight: 700; line-height: 1;
cursor: default;
}
.sk-list .risk-hint:hover .risk-hint-mark { background: rgba(230, 57, 70, 0.5); }
.sk-list .risk-hint-pop {
display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 5;
width: 210px; padding: 9px 11px; border-radius: 8px;
background: var(--sk-list-surface); border: 1px solid var(--sk-list-border);
box-shadow: 0 4px 14px rgba(16, 18, 23, 0.12);
font-size: 11.5px; font-weight: 400; line-height: 1.4; color: var(--sk-list-fg-2);
white-space: normal;
}
.sk-list .risk-hint:hover .risk-hint-pop { display: block; }
/* The customer list's Active / Inactive period, beside the tabs it belongs to. */
.sk-list .c-activity { display: inline-flex; align-items: center; gap: var(--sk-space-4); margin: 0; font-size: 12px; color: var(--sk-text-muted); white-space: nowrap; }
.sk-list .c-activity label { display: inline-flex; align-items: center; gap: var(--sk-space-3); }
.sk-list .c-activity input[type="number"] { width: 64px; height: 28px; padding: 0 var(--sk-space-3); border: 1px solid var(--sk-border); border-radius: var(--sk-radius-sm); background: var(--sk-card-bg); color: var(--sk-text); font: inherit; font-family: var(--sk-font-data); }
.sk-list .c-activity-when { color: var(--sk-text-subtle); }
.sk-list .c-activity-pending { margin: 0 0 var(--sk-space-6); padding: var(--sk-space-5) var(--sk-space-6); border: 1px solid var(--sk-border); border-left: 3px solid var(--sk-primary); border-radius: var(--sk-radius); background: var(--sk-card-bg); font-size: 13px; color: var(--sk-text); }
.sk-list .c-location { display: inline-flex; align-items: baseline; gap: var(--sk-space-3); }
.sk-list .c-location .country {
font-family: var(--sk-font-data); font-size: 10.5px; font-weight: 600;
color: var(--sk-list-fg-3); background: var(--sk-list-bg);
border-radius: 4px; padding: 1px 5px; letter-spacing: 0.04em;
}
.sk-list .lang-badge {
display: inline-block; font-family: var(--sk-font-data);
font-size: 10.5px; font-weight: 600; color: var(--sk-list-fg-2); letter-spacing: 0.04em;
}
.sk-list .ltv {
font-family: var(--sk-font-data); font-size: 13px; font-weight: 500;
color: var(--sk-list-fg-1); letter-spacing: 0;
}
.sk-list .orders-num { font-family: var(--sk-font-data); font-size: 12.5px; color: var(--sk-list-fg-450); }
/* Checkbox */
.sk-list .ck {
appearance: none; -webkit-appearance: none;
width: 16px; height: 16px; border: 1.5px solid var(--sk-list-border-strong);
border-radius: 4px; background: var(--sk-list-surface); cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
vertical-align: middle; transition: border-color 0.12s, background 0.12s;
position: relative;
}
.sk-list .ck:hover { border-color: var(--sk-list-orange-500); }
.sk-list .ck:checked, .sk-list .ck:indeterminate {
background: var(--sk-list-orange-500); border-color: var(--sk-list-orange-500);
}
.sk-list .ck:checked::after {
content: ""; width: 9px; height: 5px;
border-left: 2px solid #000; border-bottom: 2px solid #000;
transform: rotate(-45deg) translate(1px, -1px);
}
.sk-list .ck:indeterminate::after {
content: ""; width: 8px; height: 2px; background: #000;
}
/* Row end icon */
.sk-list .row-end {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px; border-radius: 6px;
color: var(--sk-list-fg-3); cursor: pointer; background: transparent;
border: none; opacity: 0; transition: opacity 0.12s, background 0.12s;
text-decoration: none;
}
.sk-list .sk-list-table tbody tr:hover .row-end { opacity: 1; }
.sk-list .row-end:hover { background: var(--sk-list-bg); color: var(--sk-list-fg-1); }
/* Footer */
.sk-list .sk-list-foot {
display: flex; align-items: center; justify-content: space-between;
padding: var(--sk-space-6) var(--sk-space-8); border-top: 1px solid var(--sk-list-border);
background: var(--sk-list-bg); font-size: 13px; color: var(--sk-list-fg-2); gap: var(--sk-space-8);
}
.sk-list .sk-list-foot .left { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.sk-list .sk-list-foot .right { display: flex; align-items: center; gap: var(--sk-space-2); }
.sk-list .sk-list-foot .perpage { display: inline-flex; align-items: center; gap: var(--sk-space-4); }
.sk-list .sk-list-foot select {
font: inherit; font-size: 12px; height: 28px;
border: 1px solid var(--sk-list-border); border-radius: 6px;
background: var(--sk-list-surface); padding: 0 26px 0 var(--sk-space-4);
color: var(--sk-list-fg-1); cursor: pointer; appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 6px center; background-size: 14px;
}
.sk-list .sk-list-foot .count { font-family: var(--sk-font-data); letter-spacing: 0.01em; color: var(--sk-list-fg-450); }
.sk-list .page-btn {
min-width: 30px; height: 30px; padding: 0 var(--sk-space-4);
border-radius: 6px; border: 1px solid transparent; background: transparent;
font-family: var(--sk-font-data); font-size: 12px; color: var(--sk-list-fg-450);
cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
text-decoration: none;
}
.sk-list .page-btn:hover:not(.is-disabled) { background: var(--sk-list-surface); border-color: var(--sk-list-border); }
.sk-list .page-btn.is-current { background: var(--sk-list-surface); border-color: var(--sk-list-border-strong); color: var(--sk-list-fg-1); font-weight: 600; }
.sk-list .page-btn.is-disabled { opacity: 0.4; cursor: default; pointer-events: none; }
.sk-list .page-ellipsis { color: var(--sk-list-fg-4); padding: 0 var(--sk-space-2); }
/* Filter popover */
.sk-list .sk-list-pop {
position: absolute; top: calc(100% + 6px); right: 0; z-index: 100;
width: 540px; max-width: calc(100vw - 32px); background: var(--sk-list-surface);
border: 1px solid var(--sk-list-border); border-radius: 12px;
box-shadow: 0 12px 32px rgba(17, 24, 39, 0.12), 0 2px 6px rgba(17, 24, 39, 0.06);
padding: var(--sk-space-8); display: grid; grid-template-columns: 1fr 1fr; gap: var(--sk-space-6) var(--sk-space-8);
}
.sk-list .sk-list-pop[hidden] { display: none; }
.sk-list .sk-list-pop .field { display: flex; flex-direction: column; gap: var(--sk-space-3); }
.sk-list .sk-list-pop .field-row { grid-column: 1 / -1; }
.sk-list .sk-list-pop label {
font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
color: var(--sk-list-fg-3); font-weight: 500;
}
.sk-list .sk-list-pop select, .sk-list .sk-list-pop input {
height: 34px; font: inherit; font-size: 13px;
border: 1px solid var(--sk-list-border); border-radius: 8px; padding: 0 var(--sk-space-5);
background: var(--sk-list-surface); color: var(--sk-list-fg-1); outline: none;
}
.sk-list .sk-list-pop select {
padding-right: 28px; appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 8px center; background-size: 14px;
}
.sk-list .sk-list-pop input:focus, .sk-list .sk-list-pop select:focus {
border-color: var(--sk-list-orange-500);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--sk-list-orange-500) 20%, transparent);
}
.sk-list .sk-list-pop .pop-foot {
grid-column: 1 / -1;
display: flex; justify-content: space-between; align-items: center;
padding-top: var(--sk-space-4); border-top: 1px solid var(--sk-list-border); margin-top: var(--sk-space-2);
}
/* Sort menu */
.sk-list .sk-list-menu {
position: absolute; top: calc(100% + 6px); right: 0; z-index: 100;
min-width: 260px; background: var(--sk-list-surface);
border: 1px solid var(--sk-list-border); border-radius: 10px;
box-shadow: 0 12px 32px rgba(17, 24, 39, 0.12), 0 2px 6px rgba(17, 24, 39, 0.06);
padding: var(--sk-space-3);
}
.sk-list .sk-list-menu[hidden] { display: none; }
/* An open menu inside the card (the bulk bar's More actions) must not be cut off by
the card's own overflow: on a short list its lower half - Print, with the shelf
cards and price stickers - sat past the card's bottom edge and could not be reached,
not even by scrolling. The card clips again as soon as the menu closes. */
.sk-list .sk-list-card:has(.sk-list-menu:not([hidden])) { overflow: visible; }
.sk-list .sk-list-menu .mi {
display: flex; align-items: center; gap: var(--sk-space-5); width: 100%;
padding: 7px var(--sk-space-5); border: none; background: transparent;
font: inherit; font-size: 13px; color: var(--sk-list-fg-1);
text-align: left; border-radius: 6px; cursor: pointer; text-decoration: none;
}
.sk-list .sk-list-menu .mi:hover { background: var(--sk-list-bg); }
.sk-list .sk-list-menu .mi .check { width: 16px; height: 16px; color: var(--sk-list-orange-500); display: inline-flex; }
.sk-list .sk-list-menu .mi .check.is-hidden { visibility: hidden; }
/* Empty state */
.sk-list .sk-list-empty { text-align: center; padding: 56px var(--sk-space-12); color: var(--sk-list-fg-3); }
.sk-list .sk-list-empty .ttl { font-size: 15px; color: var(--sk-list-fg-450); font-weight: 500; margin-bottom: var(--sk-space-2); }
.sk-list .sk-list-empty .sub { font-size: 13px; }
/* Responsive */
@media (max-width: 1024px) {
.sk-list { padding: 0 0 40px; }
.sk-list .sk-list-header { flex-direction: column; align-items: flex-start; }
/* In a column the 320px basis of the title block is a HEIGHT: every list stood
320px tall above its actions on a tablet or phone. */
.sk-list .sk-list-header-main { flex: none; width: 100%; min-width: 0; }
.sk-list .sk-list-header-actions { flex-wrap: wrap; }
.sk-list .sk-list-toolbar .sk-list-search { max-width: none; }
.sk-list .col-location, .sk-list .col-lang, .sk-list .col-orders, .sk-list .col-last { display: none; }
.sk-list .sk-list-table thead th:nth-child(4),
.sk-list .sk-list-table thead th:nth-child(5),
.sk-list .sk-list-table thead th:nth-child(6),
.sk-list .sk-list-table thead th:nth-child(7),
.sk-list .sk-list-table tbody td:nth-child(4),
.sk-list .sk-list-table tbody td:nth-child(5),
.sk-list .sk-list-table tbody td:nth-child(6),
.sk-list .sk-list-table tbody td:nth-child(7) { display: none; }
/* A list overrides that by marking cells: `.col-keep` stays whatever its place
(a payments list without its Amount and Status is no list at all), and
`.col-drop` goes in its stead. Same specificity as the rule above and later,
so it wins; the class goes on the | and on every | of the column. */
.sk-list .sk-list-table thead th.col-keep,
.sk-list .sk-list-table tbody td.col-keep { display: table-cell; }
.sk-list .sk-list-table thead th.col-drop,
.sk-list .sk-list-table tbody td.col-drop { display: none; }
.sk-list .sk-list-pop { width: calc(100vw - 32px); left: 0; }
}
/* Column picker (SK Bakery, W-06; list_columns_controller.js). A column the merchant
switched off. After the responsive block on purpose, and one element heavier than
its `.col-keep`, so a column kept on a small screen still goes when it is switched
off. */
.sk-list .sk-list-table thead tr th.sk-col-off,
.sk-list .sk-list-table tbody tr td.sk-col-off { display: none; }
.sk-list .sk-list-cols { width: 300px; max-width: calc(100vw - 32px); padding: var(--sk-space-6); }
.sk-list .sk-list-cols-head { font-size: 13px; font-weight: 600; color: var(--sk-list-fg-1); }
.sk-list .sk-list-cols-hint { margin: var(--sk-space-2) 0 var(--sk-space-5); font-size: 12px; line-height: 1.45; color: var(--sk-list-fg-3); }
.sk-list .sk-list-cols-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sk-space-1); max-height: 60vh; overflow-y: auto; }
.sk-list .sk-list-cols-item { display: flex; align-items: center; gap: var(--sk-space-2); padding: var(--sk-space-1) var(--sk-space-2); border-radius: 6px; }
.sk-list .sk-list-cols-item:hover { background: var(--sk-list-bg); }
.sk-list .sk-list-cols-label { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--sk-space-4); font-size: 13px; color: var(--sk-list-fg-1); cursor: pointer; }
.sk-list .sk-list-cols-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-list .sk-list-cols-item .btn-icon { width: 28px; height: 28px; flex: 0 0 auto; }
.sk-list .sk-list-cols-item .btn-icon:disabled { opacity: 0.35; cursor: default; }
.sk-list .sk-list-cols-foot { display: flex; justify-content: flex-end; margin-top: var(--sk-space-4); padding-top: var(--sk-space-4); border-top: 1px solid var(--sk-list-border); }
/* ────────────────────────────────────────
Settings app shell (.st-*): the secondary sidebar next to the main Cloud
sidebar, the "Instellingen / " header, the card grid, the index
rail, the change bar, the confirm dialog and the toast. Shared by every
settings page (templates/pages/settings/); no page restates any of it.
Tokens only, like .sk-list and .cd-page above, so the six themes and the
dark scheme follow. Spacing on the --sk-space-N scale.
See docs/parity/settings-build-plan.md §3.
──────────────────────────────────────── */
/* Flashes inside the shell's main column, under the crumb bar (see _hub_shell.html.twig).
The global .sk-flash margin is the theme strip's; here it lines up with the page. */
.st-flashes { display: flex; flex-direction: column; gap: var(--sk-space-4, 8px); padding: var(--sk-space-8) var(--sk-space-16) 0; }
.st-flashes .sk-flash { margin: 0; }
.st-shell {
--st-fg-1: var(--sk-text);
--st-fg-2: var(--sk-text-muted);
--st-fg-3: #737373;
--st-fg-4: #9CA3AF;
--st-border: var(--sk-border);
--st-border-strong: var(--sk-border-strong);
--st-bg: var(--sk-bg);
--st-surface: var(--sk-card-bg);
--st-accent: var(--sk-primary);
--st-accent-tint: var(--sk-primary-bg);
--st-accent-soft: color-mix(in srgb, var(--sk-primary) 12%, transparent);
--st-focus: color-mix(in srgb, var(--sk-primary) 24%, transparent);
--st-shadow: 0 1px 2px rgba(17, 24, 39, 0.06), 0 8px 24px rgba(17, 24, 39, 0.10);
/* The main top bar is sticky and the secondary sidebar and the rail stick
just under it - so the shell has to know how tall it is. Each theme's is a
different height (56 storekeeper, 48 german-commerce and central-business,
60 magnify, 32 wordcart), so the theme states it and 56px is only the
fallback. */
--st-top: var(--sk-topbar-h, 56px);
--st-side-w: 248px;
/* Bleed out of the content gutter so the secondary sidebar sits flush against
the main one. Same reason as --st-top: the gutter is the theme's, not this
file's (24px storekeeper and german-commerce, 24/32 central-business, 20
magnify, 20 wordcart), and it used to be hardcoded to storekeeper's. Six
themes x twenty-six screens is too many places for a guess. */
margin: calc(-1 * var(--sk-content-pad-y, var(--sk-space-12))) calc(-1 * var(--sk-content-pad-x, var(--sk-space-12)));
display: flex;
align-items: stretch;
min-height: calc(100vh - var(--st-top));
font-family: var(--sk-font-body);
color: var(--st-fg-1);
background: var(--st-bg);
}
html[data-scheme="dark"] .st-shell {
--st-fg-3: #A0A3AA;
--st-fg-4: #6B6E75;
--st-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.5);
}
@media (max-width: 640px) {
.st-shell { margin: calc(-1 * var(--sk-content-pad-y-sm, var(--sk-space-8))) calc(-1 * var(--sk-content-pad-x-sm, var(--sk-space-8))); }
}
.st-sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* ── Secondary sidebar ── */
.st-side {
width: var(--st-side-w); flex: none;
box-sizing: border-box;
position: sticky; top: var(--st-top);
height: calc(100vh - var(--st-top));
overflow-y: auto;
border-right: 1px solid var(--st-border);
background: var(--sk-sidebar-bg, var(--st-bg));
padding: var(--sk-space-8) var(--sk-space-6) var(--sk-space-12);
display: flex; flex-direction: column; gap: var(--sk-space-6);
}
.st-search { position: relative; }
.st-search-field { position: relative; display: block; }
.st-search-lead {
position: absolute; left: var(--sk-space-5); top: 50%; transform: translateY(-50%);
color: var(--st-fg-3); display: inline-flex; pointer-events: none;
}
.st-search-input {
width: 100%; box-sizing: border-box; height: 34px;
padding: 0 var(--sk-space-5) 0 30px;
border: 1px solid var(--st-border); border-radius: var(--sk-radius-sm);
background: var(--st-bg); color: var(--st-fg-1);
font: inherit; font-size: 13px;
}
.st-search-input::placeholder { color: var(--st-fg-4); }
.st-search-input:focus { outline: none; border-color: var(--st-accent); box-shadow: 0 0 0 3px var(--st-focus); }
.st-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
/* The dropdown. Absolutely positioned, so it must never live inside a
.sk-card (overflow: hidden would clip it); it lives in the sidebar. */
.st-search-results {
position: absolute; left: 0; right: 0; top: calc(100% + var(--sk-space-2)); z-index: 40;
background: var(--st-bg); border: 1px solid var(--st-border); border-radius: var(--sk-radius);
box-shadow: var(--st-shadow); max-height: 320px; overflow-y: auto;
}
.st-search-results[hidden] { display: none; }
.st-search-list { list-style: none; margin: 0; padding: var(--sk-space-2); }
.st-search-hit {
display: flex; flex-direction: column; gap: 1px;
padding: var(--sk-space-3) var(--sk-space-5); border-radius: var(--sk-radius-sm);
color: var(--st-fg-1); text-decoration: none; font-size: 13px;
}
.st-search-hit:hover, .st-search-hit.is-selected { background: var(--sk-bg-soft); }
.st-search-hit-context { font-size: 11px; color: var(--st-fg-3); }
.st-search-empty { padding: var(--sk-space-5) var(--sk-space-6); font-size: 12.5px; color: var(--st-fg-3); }
.st-nav { display: flex; flex-direction: column; gap: var(--sk-space-4); }
.st-nav-group { display: flex; flex-direction: column; gap: 1px; }
.st-nav-heading {
display: flex; align-items: center; gap: var(--sk-space-3);
padding: var(--sk-space-4) var(--sk-space-5) var(--sk-space-2);
font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--st-fg-3);
}
.st-nav-danger-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sk-danger); flex: none; }
.st-nav-item {
display: flex; align-items: center; gap: var(--sk-space-3);
padding: 7px var(--sk-space-5); border-radius: var(--sk-radius-sm);
font-size: 13px; color: var(--st-fg-1); text-decoration: none; min-width: 0;
}
.st-nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-nav-item:hover { background: var(--sk-bg-soft); }
.st-nav-item.is-active { background: var(--st-accent-tint); font-weight: 600; }
.st-nav-item.is-locked { color: var(--st-fg-4); cursor: not-allowed; }
.st-nav-item.is-locked:hover { background: transparent; }
.st-nav-glyph { display: inline-flex; color: var(--st-fg-4); flex: none; }
/* ── Topic sidebar ──
The same column, filled with one subject's settings instead of the whole app's
six scope groups: a head that says which subject and how much is in it, a
filter, the subject's own page, and the settings in groups with the counts the
endpoint fills in. Tokens only, like everything above, so the six themes and
the dark scheme follow. */
.st-topic {
gap: var(--sk-space-6);
/* The tab sticks OUT of this box, so the column cannot be the thing that scrolls:
a scroller clips. The list below scrolls instead, which also keeps the subject's
name and the filter in place while you go down a long one. */
overflow: visible;
}
/* The head lines up with the entries below it (the column's own padding plus an
entry's), which is also where the tab's outer edge stops. */
.st-topic-head { display: flex; flex-direction: column; gap: 1px; padding: 0 var(--sk-space-5); }
.st-topic-title-row { display: flex; align-items: flex-start; gap: var(--sk-space-3); }
.st-topic-eyebrow {
font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--st-fg-3); padding-top: var(--sk-space-2);
}
.st-topic-title { margin: 0; font-family: var(--sk-font-display); font-size: 17px; font-weight: 600; color: var(--st-fg-1); }
/* The toggle is a TAB on the column's OUTER edge, open or folded: the edge it
pulls. Folded, the column is zero wide and that edge is the main sidebar's, so
the tab lands there - it travels with the edge rather than staying behind.
Out of the flow is also what lets the eyebrow and the title start at the top of
the column instead of leaving a gap for a button. */
.st-topic-collapse {
position: absolute;
top: calc(var(--sk-space-8) - var(--sk-space-1));
left: 100%;
display: inline-flex; align-items: center; justify-content: center;
width: 20px; height: 28px; flex: none; margin: 0; padding: 0;
border: 1px solid var(--st-border); border-left: 0;
border-radius: 0 var(--sk-radius) var(--sk-radius) 0;
/* An opaque tab on the shell's own surface with the sidebar's colour over it:
`--sk-sidebar-bg` is `transparent` in central-business by design, so on its own
it would let whatever is behind the tab show through. */
--st-tab-bg: linear-gradient(var(--sk-sidebar-bg, transparent), var(--sk-sidebar-bg, transparent));
background: var(--st-tab-bg), var(--st-bg);
color: var(--st-fg-3); cursor: pointer;
box-shadow: 1px 0 2px rgba(17, 24, 39, 0.04);
}
.st-topic-collapse:hover {
color: var(--st-accent);
border-color: var(--st-border-strong);
/* The wash goes ON the tab, not instead of it: `--sk-bg-soft` is a 4% black, so
replacing the background made the tab translucent. */
background: linear-gradient(var(--sk-bg-soft), var(--sk-bg-soft)), var(--st-tab-bg), var(--st-bg);
}
.st-topic-collapse svg { transition: transform 0.15s ease; }
.st-topic-body { display: flex; flex-direction: column; gap: var(--sk-space-6); flex: 1; min-height: 0; overflow-y: auto; }
.st-topic-filter { margin: 0; }
/* A group heading is a label and a rule to the edge of the column, with the ADMIN
tag at the end of the rule. It separates the groups without a second colour. */
.st-topic .st-nav-heading { padding: var(--sk-space-5) var(--sk-space-4) var(--sk-space-3); gap: var(--sk-space-4); }
.st-topic-rule { flex: 1; height: 1px; background: var(--st-border); }
.st-topic-item { padding: 7px var(--sk-space-4); }
/* The count sits at the end of the row and never pushes the label around: the
label already truncates, and a number that moves as you type reads as a list
that is still loading. */
.st-topic-count {
flex: none; font-size: 11.5px;
color: var(--st-fg-3); font-variant-numeric: tabular-nums; font-weight: 400;
}
.st-topic-count[hidden] { display: none; }
.st-topic-item[hidden] { display: none; }
/* The entry that is on: the theme's own accent tint and its accent for the label.
Weight stays the same - the colour already says it, and bolding shifts the row. */
.st-topic-item.is-active { background: var(--st-accent-tint); color: var(--st-accent); font-weight: 500; }
.st-topic-item.is-active .st-topic-count { color: var(--st-accent); }
/* The subject's own page. First, ungrouped: it is where the work is, and it is
also how you get back - there is no "back to Producten" link above the column. */
.st-topic-root + * { margin-top: var(--sk-space-1); }
.st-nav-group[hidden] { display: none; }
.st-topic-empty { margin: 0; padding: var(--sk-space-4) var(--sk-space-4); font-size: 12.5px; color: var(--st-fg-3); }
.st-topic-empty[hidden] { display: none; }
/* The cog is the collapsed face of the toggle; the chevron is the open one. */
.st-topic-cog { display: none; }
/* Collapsed: the column takes no width at all, so the content starts straight
after the main sidebar - no strip, no second seam, nothing parked beside it.
The tab stays exactly where it was and swaps its chevron for a cog, which is
what says the settings are behind it: a lone chevron on a bare edge could mean
anything.
Remembered per browser by the controller; the page renders open, so a merchant
without JS never gets a sidebar they cannot open. */
.st-topic.is-collapsed {
width: 0;
padding: 0;
gap: 0;
border-right: 0;
/* The tab lives outside the column's own box, which is what lets the column be
zero wide and still be openable. */
overflow: visible;
}
.st-topic.is-collapsed .st-topic-body,
.st-topic.is-collapsed .st-topic-eyebrow,
.st-topic.is-collapsed .st-topic-title { display: none; }
.st-topic.is-collapsed .st-topic-head { padding: 0; height: 0; }
.st-topic.is-collapsed .st-topic-chevron { display: none; }
.st-topic.is-collapsed .st-topic-cog { display: inline; }
/* ── Main column ── */
.st-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.st-header {
height: 56px; box-sizing: border-box; flex: none;
display: flex; align-items: center; gap: var(--sk-space-4);
padding: 0 var(--sk-space-16);
border-bottom: 1px solid var(--st-border);
font-size: 13px;
}
.st-header-root { color: var(--st-fg-2); text-decoration: none; }
.st-header-root:hover { color: var(--st-fg-1); }
.st-header-sep { color: var(--st-fg-4); }
.st-header-page { font-weight: 600; color: var(--st-fg-1); }
/* The padding is named, so a page's own tab strip can bleed to the edge with the
same numbers instead of guessing: the strips were written for the old layout's
20px and sat 12px in on a wide screen and 4px past the edge on a narrow one. */
.st-body {
--st-pad-top: var(--sk-space-12); --st-pad-x: var(--sk-space-16);
padding: var(--st-pad-top) var(--st-pad-x) 120px; flex: 1;
}
.st-page-wrap { display: flex; gap: var(--sk-space-16); align-items: flex-start; }
.st-page { flex: 1 1 auto; min-width: 0; }
/* A detail page's own sticky header, inside a hub.
`.cd-page .cd-head` is `sticky; top: 0`, which is right when the page is the whole
content area: it stops under the theme's topbar because nothing else is above it.
Inside the hub shell there IS something above it - the "Instellingen / " bar -
and sticking at 0 slid it under the topbar on the five screens that use the detail
shell (the two merge tools, an add-on group and its delete view, and the attribute
category's attribute picker).
`--st-top` is the theme's own header height now, so this offset is right in all six
rather than in the one it was written for. */
.st-shell .cd-page .cd-head { top: var(--st-top); }
/* ── Page head ── */
.st-title {
font-family: var(--sk-font-display); font-size: 22px; font-weight: 600;
letter-spacing: -0.01em; margin: 0 0 var(--sk-space-3);
}
/* The scope line is load-bearing: it is how a merchant knows what a save
touches. Never hide it. */
.st-scope { display: flex; align-items: center; gap: var(--sk-space-4); font-size: 13px; color: var(--st-fg-2); margin-bottom: var(--sk-space-12); }
.st-scope-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--st-accent); flex: none; }
/* One line under the scope: what the page is and what it is not. Pulls up
against the scope line's bottom margin. */
.st-page-desc { font-size: 13px; color: var(--st-fg-3); margin: calc(-1 * var(--sk-space-8)) 0 var(--sk-space-12); max-width: 70ch; }
.st-notice {
padding: var(--sk-space-6) var(--sk-space-7); margin-bottom: var(--sk-space-8);
border: 1px solid var(--st-border); border-radius: var(--sk-radius);
background: var(--st-surface); font-size: 13px; color: var(--st-fg-2);
}
.st-notice.is-error { border-color: var(--sk-danger); color: var(--sk-danger); }
/* A save whose read-back lagged: quiet, success-tinted, never an error. */
.st-notice.is-stale { border-color: color-mix(in srgb, var(--sk-success) 40%, var(--st-border)); color: var(--st-fg-1); }
/* ── The settings root ──
Its own head. `.st-page-desc` is built to pull UP against the scope line that a
settings page carries, and the root has no scope line, so borrowed here its
negative margin pulled the description into the title. */
.st-root-head { margin-bottom: var(--sk-space-12); }
.st-root-head .st-title { margin-bottom: var(--sk-space-3); }
.st-root-desc { font-size: 13px; color: var(--st-fg-3); margin: 0; max-width: 70ch; }
/* The same search, on the settings root instead of in a 248px column. Wider than
the column's filter and labelled for what it is: this one reads the FIELDS of
every page, not the entry names beside it. */
.st-search-wide { max-width: 420px; margin-bottom: var(--sk-space-12); }
/* ── The settings root: an index ──
Every setting on one screen: one card, its blocks in columns (four, then two,
then one as the page narrows), a subject or one of Producten's groups each. A
block is a small heading over its screens; a row is a name and a line on what is
set there, with a hairline under it. The filter sits beside the title. */
.st-page:has(> .st-index-head) { container: st-root / inline-size; }
/* No room kept under the index for a change bar it does not have. */
.st-body:has(.st-index-head) { padding-bottom: var(--sk-space-12); }
.st-index-head {
display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sk-space-12);
margin-bottom: var(--sk-space-8);
}
.st-index-head .st-title { margin-bottom: var(--sk-space-2); }
.st-index-filter {
display: flex; align-items: center; gap: var(--sk-space-4); flex: 0 1 420px;
height: 42px; padding: 0 var(--sk-space-7);
border: 1px solid var(--st-border); border-radius: 12px; background: var(--st-surface);
color: var(--st-fg-3);
}
.st-index-filter-icon { display: inline-flex; flex: none; }
.st-index-filter:focus-within { border-color: var(--st-accent); box-shadow: 0 0 0 3px var(--st-focus); }
.st-index-filter input {
flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent;
font: inherit; font-size: 14px; color: var(--st-fg-1);
}
.st-index {
columns: 3; column-gap: var(--sk-space-16);
padding: var(--sk-space-10) var(--sk-space-16) var(--sk-space-4);
border: 1px solid var(--st-border); border-radius: 16px; background: var(--st-surface);
}
/* Four columns where they fit, so the whole index stands on one laptop screen
without a scroll (Rob liked it that way); two, then one as the page narrows. A
line too long for its column is cut short; the row's title holds all of it. */
@container st-root (min-width: 1040px) { .st-index { columns: 4; column-gap: var(--sk-space-12); padding-inline: var(--sk-space-12); } }
@container st-root (max-width: 1039px) { .st-index { columns: 2; } }
@container st-root (max-width: 700px) {
.st-index { columns: 1; padding: var(--sk-space-8); }
.st-index-head { flex-direction: column; align-items: stretch; }
.st-index-filter { flex-basis: auto; }
}
.st-index-block { break-inside: avoid; padding-bottom: var(--sk-space-8); }
.st-index-block[hidden] { display: none; }
/* The block heading is what the eye scans for: the subject in orange small caps, as
the wireframe has it, but at a size and weight that reads as a heading. */
.st-index-title {
display: flex; align-items: center; gap: var(--sk-space-4);
margin: 0 0 var(--sk-space-1);
font-size: 13.5px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
color: var(--sk-accent-ink, var(--st-accent));
}
.st-index-title-icon { display: inline-flex; flex: none; color: var(--st-accent); }
.st-index-list { margin: 0; padding: 0; list-style: none; }
.st-index-list > li { border-bottom: 1px solid var(--st-border); }
.st-index-list > li[hidden] { display: none; }
.st-index-row {
display: flex; flex-direction: column; gap: var(--sk-space-1);
padding: var(--sk-space-3) 0;
color: inherit; text-decoration: none;
}
a.st-index-row:hover .st-index-row-label { color: var(--st-accent); }
a.st-index-row:focus-visible { outline: 2px solid var(--st-accent); outline-offset: 2px; border-radius: 4px; }
.st-index-row-label {
display: inline-flex; align-items: center; gap: var(--sk-space-3);
font-family: var(--sk-font-display); font-size: 13.5px; font-weight: 600; color: var(--st-fg-1);
transition: color 0.12s ease;
}
.st-index-row-desc { font-size: 12.5px; color: var(--st-fg-3); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-index-row-glyph { display: inline-flex; flex: none; color: var(--st-fg-4); }
.st-index-row.is-locked { cursor: default; }
.st-index-row.is-locked .st-index-row-label { color: var(--st-fg-3); }
.st-index-empty { column-span: all; margin: 0; font-size: 13px; color: var(--st-fg-3); }
.st-index-empty[hidden] { display: none; }
/* ── Card ── */
.st-card {
background: var(--st-surface); border: 1px solid var(--st-border); border-radius: 12px;
padding: var(--sk-space-10); margin-bottom: var(--sk-space-8);
scroll-margin-top: calc(var(--st-top) + var(--sk-space-8));
}
.st-card-head { margin-bottom: var(--sk-space-8); }
.st-card-title { font-family: var(--sk-font-display); font-size: 15px; font-weight: 600; margin: 0; }
.st-card-desc { font-size: 13px; color: var(--st-fg-2); margin: var(--sk-space-2) 0 0; line-height: 1.45; }
.st-card-alert {
display: flex; align-items: flex-start; gap: var(--sk-space-4);
margin-top: var(--sk-space-6); padding: var(--sk-space-5) var(--sk-space-6);
border-radius: var(--sk-radius); background: var(--st-accent-soft);
color: var(--sk-warning); font-size: 12.5px; line-height: 1.4;
}
.st-card-alert svg { flex: none; margin-top: 1px; }
.st-card-note { font-size: 12px; color: var(--st-fg-3); margin: var(--sk-space-5) 0 0; }
.st-card-actions { display: flex; align-items: center; gap: var(--sk-space-6); margin-top: var(--sk-space-6); }
.st-card-link { display: inline-flex; align-items: center; gap: var(--sk-space-2); font-size: 13px; color: var(--st-fg-1); text-decoration: underline; text-underline-offset: 2px; }
/* The 6-column field grid. Field spans: full 6, half 3, third 2. */
.st-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sk-space-8); }
.st-field {
grid-column: span 6; min-width: 0;
display: flex; flex-direction: column; gap: var(--sk-space-3);
border-radius: var(--sk-radius);
/* The search highlight: 3px accent outline, 6px off, fades out. */
outline: 3px solid transparent; outline-offset: 6px;
transition: outline-color 0.4s;
}
.st-field.is-span-3 { grid-column: span 3; }
.st-field.is-span-2 { grid-column: span 2; }
.st-field.is-hidden { display: none; }
.st-field.is-focus { outline-color: var(--st-accent); }
@media (max-width: 720px) {
.st-field.is-span-3, .st-field.is-span-2 { grid-column: span 6; }
}
.st-label { display: flex; align-items: center; gap: var(--sk-space-4); font-size: 12px; font-weight: 600; color: var(--st-fg-1); }
.st-label-absent { font-size: 11px; font-weight: 400; color: var(--st-fg-4); }
.st-label-danger {
font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
color: var(--sk-warning); border: 1px solid currentColor; border-radius: 999px; padding: 0 var(--sk-space-3);
}
.st-input, .st-select, .st-textarea { width: 100%; box-sizing: border-box; }
.st-select { padding-right: 28px; }
.st-textarea {
min-height: 96px; padding: var(--sk-space-4) 11px;
border: 1px solid var(--st-border); border-radius: var(--sk-radius-sm);
background: var(--st-bg); color: var(--st-fg-1);
font: inherit; font-size: 13px; line-height: 1.45; resize: vertical;
}
.st-field.is-mono .st-input, .st-field.is-mono .st-textarea { font-family: var(--sk-font-data); }
.st-input::placeholder, .st-textarea::placeholder { color: var(--st-fg-4); font-style: italic; }
.st-input:focus, .st-select:focus, .st-textarea:focus {
outline: none; border-color: var(--st-accent); box-shadow: 0 0 0 3px var(--st-focus);
}
.st-field.has-error .st-input, .st-field.has-error .st-select { border-color: var(--sk-danger); }
.st-hint { font-size: 11.5px; line-height: 1.4; color: var(--st-fg-3); }
.st-error { font-size: 12px; color: var(--sk-danger); }
.st-error[hidden] { display: none; }
.st-switch-row { display: flex; align-items: flex-start; gap: var(--sk-space-6); }
.st-switch-row .sk-switch-btn { margin-top: 1px; }
/* Colour field: the picker as a swatch beside the hex value that posts. */
.st-color { display: flex; align-items: center; gap: var(--sk-space-4); }
.st-color-pick { flex: none; width: 36px; height: 36px; padding: 2px; border: 1px solid var(--sk-border-strong); border-radius: var(--sk-radius-sm); background: var(--sk-card-bg); cursor: pointer; }
.st-color-pick::-webkit-color-swatch-wrapper { padding: 0; }
.st-color-pick::-webkit-color-swatch { border: 0; border-radius: 4px; }
.st-color-hex { max-width: 130px; }
/* Image field: a preview on a checkerboard-free plain ground, the actions beside it. */
.st-image { display: flex; align-items: center; gap: var(--sk-space-6); flex-wrap: wrap; }
.st-image-preview { width: 180px; height: 72px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--sk-border); border-radius: var(--sk-radius-sm); background: var(--sk-bg); overflow: hidden; }
.st-image-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.st-image-preview.is-empty { border-style: dashed; }
.st-image-none { font-size: 12px; color: var(--sk-text-muted); }
.st-image-actions { display: flex; align-items: center; gap: var(--sk-space-4); flex-wrap: wrap; }
.st-image-actions [hidden], .st-image-preview [hidden] { display: none; }
.st-switch-text { display: flex; flex-direction: column; gap: var(--sk-space-2); min-width: 0; }
.st-switch-text .st-label { cursor: pointer; }
/* Row-typed fields: opening hours, special days, zones. */
.st-rows { display: flex; flex-direction: column; gap: var(--sk-space-4); }
.st-row { display: flex; align-items: center; gap: var(--sk-space-4); flex-wrap: wrap; }
.st-row-name { width: 96px; flex: none; font-size: 13px; color: var(--st-fg-2); }
.st-row .st-input { width: auto; flex: 1 1 120px; }
.st-row .st-time { flex: 0 0 104px; width: 104px; font-family: var(--sk-font-data); }
.st-row .st-date { flex: 0 0 150px; width: 150px; font-family: var(--sk-font-data); }
.st-row-sep { color: var(--st-fg-4); }
.st-row-check { display: inline-flex; align-items: center; gap: var(--sk-space-3); font-size: 12px; color: var(--st-fg-2); }
.st-row-check input { margin: 0; accent-color: var(--st-accent); }
.st-row-lock { display: inline-flex; align-items: center; gap: var(--sk-space-2); font-size: 11.5px; color: var(--st-fg-3); white-space: nowrap; }
/* ── Change bar: one per page, sticky at the bottom while dirty. ── */
.st-changebar {
position: sticky; bottom: var(--sk-space-8); z-index: 5;
display: none; align-items: center; justify-content: space-between; gap: var(--sk-space-8);
margin-top: var(--sk-space-8); padding: var(--sk-space-6) var(--sk-space-8);
border-radius: 12px; background: var(--st-fg-1); color: var(--st-bg);
box-shadow: var(--st-shadow);
}
.st-changebar.is-visible { display: flex; }
.st-changebar-text { display: flex; align-items: center; gap: var(--sk-space-6); font-size: 13px; font-weight: 600; }
.st-changebar-danger { display: inline-flex; align-items: center; gap: var(--sk-space-2); font-weight: 500; color: var(--st-accent); }
.st-changebar-danger[hidden] { display: none; }
.st-changebar-actions { display: flex; gap: var(--sk-space-4); flex: none; }
/* ── Confirm dialog for sensitive changes ── */
.st-confirm {
border: 1px solid var(--st-border); border-radius: 12px; padding: 0;
background: var(--st-bg); color: var(--st-fg-1);
width: min(480px, calc(100vw - 32px)); box-shadow: var(--st-shadow);
}
.st-confirm::backdrop { background: rgba(0, 0, 0, 0.45); }
/* Rendered `open` by the server (no JS): shown fixed above the change bar
rather than inline in the flow of the form. */
.st-confirm[open]:not(:modal) {
position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 50; margin: 0;
}
.st-confirm-body { padding: var(--sk-space-10); }
.st-confirm-title { font-family: var(--sk-font-display); font-size: 16px; font-weight: 600; margin: 0 0 var(--sk-space-2); }
.st-confirm-lead { font-size: 13px; color: var(--st-fg-2); margin: 0 0 var(--sk-space-6); }
.st-confirm-list { list-style: none; margin: 0 0 var(--sk-space-8); padding: 0; display: flex; flex-direction: column; gap: var(--sk-space-4); }
.st-confirm-list li { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.st-confirm-label { font-weight: 600; }
.st-confirm-diff { display: flex; align-items: center; gap: var(--sk-space-4); flex-wrap: wrap; font-family: var(--sk-font-data); font-size: 12px; }
.st-confirm-diff code { background: var(--sk-bg-soft); padding: 2px var(--sk-space-3); border-radius: 4px; font-family: inherit; }
.st-confirm-arrow { color: var(--st-fg-4); }
.st-confirm-actions { display: flex; justify-content: flex-end; gap: var(--sk-space-4); }
/* ── Toast ── */
.st-toast {
position: fixed; right: var(--sk-space-12); bottom: var(--sk-space-12); z-index: 60;
display: flex; align-items: center; gap: var(--sk-space-4);
padding: var(--sk-space-5) var(--sk-space-7); border-radius: 10px;
background: var(--st-fg-1); color: var(--st-bg); font-size: 13px; font-weight: 500;
box-shadow: var(--st-shadow);
transition: opacity 0.3s, transform 0.3s;
}
.st-toast svg { color: var(--sk-success); }
.st-toast.is-gone { opacity: 0; transform: translateY(8px); pointer-events: none; }
/* ── Narrow viewports (D8): the secondary sidebar becomes a scope tab strip. ── */
.st-tabs { display: none; }
@media (max-width: 1180px) {
.st-side { display: none; }
.st-tabs {
display: block; flex: none;
border-bottom: 1px solid var(--st-border);
padding: var(--sk-space-4) var(--sk-space-8) 0;
}
.st-tabs-row { display: flex; gap: var(--sk-space-2); overflow-x: auto; }
.st-tab {
display: inline-flex; align-items: center; gap: var(--sk-space-3);
height: 36px; padding: 0 var(--sk-space-6);
border: 0; border-bottom: 2px solid transparent; background: transparent;
font: inherit; font-size: 13px; color: var(--st-fg-2); white-space: nowrap; cursor: pointer;
}
.st-tab.is-active { color: var(--st-fg-1); font-weight: 600; border-bottom-color: var(--st-accent); }
.st-tabs-items { display: flex; flex-wrap: wrap; gap: var(--sk-space-3); padding: var(--sk-space-5) 0 var(--sk-space-6); }
.st-tabs-items[hidden] { display: none; }
.st-tabs-items .st-nav-item {
border: 1px solid var(--st-border); border-radius: 999px;
padding: 5px var(--sk-space-6); font-size: 12.5px;
}
.st-tabs-items .st-nav-item.is-active { border-color: var(--st-accent); background: var(--st-accent-tint); }
.st-header { padding: 0 var(--sk-space-8); }
.st-body { --st-pad-top: var(--sk-space-8); --st-pad-x: var(--sk-space-8); }
.st-flashes { padding: var(--sk-space-6, 12px) var(--sk-space-8) 0; }
}
/* ══════════════════════════════════════════════════════════════════════
Settings app, Locaties pages (Lane B): the .stl-* family.
Location picker chips, the status line with badges and actions, the
list page's quota line and table, the deactivate dialog's check rows,
the create form's actions. Tokens only; dark scheme through the same
--st-* variables the shell defines.
══════════════════════════════════════════════════════════════════════ */
.stl-head { margin: calc(-1 * var(--sk-space-4)) 0 var(--sk-space-10); display: flex; flex-direction: column; gap: var(--sk-space-6); }
/* Chips: one per location, the open one filled, inactive ones dimmed. */
.stl-chips { display: flex; flex-wrap: wrap; gap: var(--sk-space-3); }
.stl-chip {
display: inline-flex; align-items: center; gap: var(--sk-space-3);
padding: 5px var(--sk-space-6); border-radius: 999px;
border: 1px solid var(--st-border); background: var(--st-surface);
font-size: 12.5px; color: var(--st-fg-1); text-decoration: none; line-height: 1.3;
}
.stl-chip:hover { border-color: var(--st-border-strong); }
.stl-chip.is-active { border-color: var(--st-accent); background: var(--st-accent-tint); font-weight: 600; }
.stl-chip.is-inactive { color: var(--st-fg-3); border-style: dashed; }
.stl-chip-mark { width: 6px; height: 6px; border-radius: 50%; background: var(--st-accent); flex: none; }
.stl-status { display: flex; align-items: center; justify-content: space-between; gap: var(--sk-space-6); flex-wrap: wrap; min-height: 30px; }
.stl-badges { display: flex; align-items: center; gap: var(--sk-space-3); }
.stl-actions { display: flex; align-items: center; gap: var(--sk-space-6); }
.stl-muted { font-size: 12px; color: var(--st-fg-3); }
.stl-readonly-note { margin-bottom: 0; }
.st-form.is-readonly .st-card { opacity: 0.72; }
/* The list page. */
.stl-list { margin-bottom: var(--sk-space-8); }
.stl-list-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sk-space-6); flex-wrap: wrap; margin-bottom: var(--sk-space-6); }
.stl-loc-quota { margin: 0; font-size: 13px; color: var(--st-fg-2); }
.stl-list .sk-btn.is-disabled { opacity: 0.5; cursor: not-allowed; }
.stl-table-card { padding: 0; overflow: hidden; }
.stl-loc-table-wrap { overflow-x: auto; }
.stl-loc-table { width: 100%; margin: 0; }
.stl-loc-table th, .stl-loc-table td { vertical-align: middle; }
.stl-th-actions, .stl-cell-actions { text-align: right; white-space: nowrap; }
/* Flex goes on an inner span: a flex `td` stops being a table cell. */
.stl-flex { display: inline-flex; align-items: center; gap: var(--sk-space-3); flex-wrap: wrap; }
.stl-flex.is-end { justify-content: flex-end; flex-wrap: nowrap; }
.stl-loc-name { color: var(--st-fg-1); font-weight: 600; text-decoration: none; }
.stl-loc-name:hover { text-decoration: underline; text-underline-offset: 2px; }
.stl-row.is-inactive .stl-loc-name, .stl-row.is-inactive .stl-cell-address { color: var(--st-fg-3); }
.stl-cell-address { font-family: var(--sk-font-data); font-size: 12px; color: var(--st-fg-2); }
.stl-tag {
display: inline-block; padding: 1px var(--sk-space-4); border-radius: 999px;
border: 1px solid var(--st-border); background: var(--sk-bg-soft);
font-size: 11px; color: var(--st-fg-2); white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis;
}
.stl-tag.is-more { font-family: var(--sk-font-data); }
/* The activate / deactivate dialog. */
.stl-dialog-name { display: block; font-size: 13px; font-weight: 500; color: var(--st-fg-2); margin-top: 2px; }
.stl-checks { list-style: none; margin: 0 0 var(--sk-space-6); padding: 0; display: flex; flex-direction: column; gap: var(--sk-space-4); }
.stl-check { display: flex; align-items: flex-start; gap: var(--sk-space-4); font-size: 13px; }
.stl-check-glyph {
flex: none; width: 20px; height: 20px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 700; margin-top: -1px;
}
.stl-check.is-ok .stl-check-glyph { background: color-mix(in srgb, var(--sk-success) 16%, transparent); color: var(--sk-success); }
.stl-check.is-fail .stl-check-glyph { background: color-mix(in srgb, var(--sk-warning) 18%, transparent); color: var(--sk-warning); }
.stl-check.is-blocking .stl-check-glyph { background: color-mix(in srgb, var(--sk-danger) 16%, transparent); color: var(--sk-danger); }
.stl-check.is-unknown .stl-check-glyph { background: var(--sk-bg-soft); color: var(--st-fg-3); }
.stl-check-text { display: flex; flex-direction: column; gap: 1px; }
.stl-check-detail { font-size: 12px; color: var(--st-fg-3); }
.stl-dialog .st-error { margin: 0 0 var(--sk-space-6); }
.stl-dialog .st-card-note { margin: 0 0 var(--sk-space-6); }
/* The create form. */
.stl-form-actions { display: flex; justify-content: flex-end; gap: var(--sk-space-4); }
/* ══════════════════════════════════════════════════════════════════════════
Settings app: the pattern-derived list pages of the Technisch group
(webhooks, apps, system). `.stl-*` sits next to `.st-*` and only adds what
a table-above-cards page needs on top of `.sk-table` and `.sk-badge`:
the quota line, the table inside a card, the fact list, the small stat.
Colours come from the `.st-shell` tokens; nothing literal.
══════════════════════════════════════════════════════════════════════════ */
.stl-quota {
display: flex; align-items: center; gap: var(--sk-space-6); flex-wrap: wrap;
margin: calc(-1 * var(--sk-space-4)) 0 var(--sk-space-8);
font-size: 13px; color: var(--st-fg-2);
}
.stl-quota-main { font-weight: 600; color: var(--st-fg-1); }
.stl-quota-extra { display: inline-flex; align-items: center; gap: var(--sk-space-2); }
.stl-quota-extra.is-warn { color: var(--sk-warning); font-weight: 600; }
.stl-section .st-card-head { margin-bottom: var(--sk-space-6); }
.stl-table-wrap { overflow-x: auto; margin: 0 calc(-1 * var(--sk-space-10)); }
.stl-table { min-width: 560px; table-layout: fixed; }
.stl-table td, .stl-table th { overflow: hidden; text-overflow: ellipsis; }
.stl-table th:first-child, .stl-table td:first-child { padding-left: var(--sk-space-10); }
.stl-table th:last-child, .stl-table td:last-child { padding-right: var(--sk-space-10); }
.stl-table tbody tr:last-child td { border-bottom: 0; }
.stl-table td { border-bottom: 1px solid var(--st-border); vertical-align: top; font-size: 12.5px; }
/* Column widths for the fixed-layout tables (a `` per table). */
.stl-w9 { width: 9%; } .stl-w15 { width: 15%; } .stl-w25 { width: 25%; } .stl-w10 { width: 10%; } .stl-w14 { width: 14%; } .stl-w18 { width: 18%; } .stl-w20 { width: 20%; } .stl-w28 { width: 28%; } .stl-w11 { width: 11%; } .stl-w12 { width: 12%; } .stl-w16 { width: 16%; }
.stl-w22 { width: 22%; } .stl-w24 { width: 24%; } .stl-w26 { width: 26%; } .stl-w30 { width: 30%; }
.stl-w32 { width: 32%; } .stl-w34 { width: 34%; } .stl-w52 { width: 52%; } .stl-w62 { width: 62%; }
.stl-table th.stl-col-right, .stl-table td.stl-col-right { text-align: right; }
.stl-nowrap { white-space: nowrap; }
.stl-name { font-weight: 600; color: var(--st-fg-1); }
.stl-sub { font-size: 11.5px; color: var(--st-fg-3); margin-top: 2px; line-height: 1.35; }
.stl-sub-inline { font-weight: 400; color: var(--st-fg-3); font-size: 11.5px; }
.stl-url .data { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stl-msg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stl-row.is-failing .stl-msg { color: var(--sk-danger); }
.stl-badge { white-space: nowrap; }
/* The one tone app.css has no alias for: a row that is simply off. */
.stl-badge.sk-badge-muted { background: color-mix(in srgb, var(--st-fg-4) 18%, transparent); color: var(--st-fg-3); }
.stl-absent { color: var(--st-fg-4); font-style: italic; }
.stl-empty { margin: 0; padding: var(--sk-space-6) 0 0; font-size: 13px; color: var(--st-fg-3); font-style: italic; }
.stl-filters { display: flex; align-items: center; gap: var(--sk-space-3); margin-top: var(--sk-space-5); font-size: 12.5px; }
.stl-filter {
padding: 3px var(--sk-space-5); border-radius: 999px; border: 1px solid var(--st-border);
color: var(--st-fg-2); text-decoration: none;
}
.stl-filter:hover { color: var(--st-fg-1); }
.stl-filter.is-active { border-color: var(--st-accent); background: var(--st-accent-tint); color: var(--st-fg-1); font-weight: 600; }
.stl-filter-total { margin-left: auto; color: var(--st-fg-3); font-size: 11.5px; }
.stl-details summary { cursor: pointer; color: var(--st-fg-1); text-decoration: underline; text-underline-offset: 2px; font-size: 12.5px; }
.stl-methods { list-style: none; margin: var(--sk-space-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sk-space-2); font-size: 11.5px; max-width: 420px; }
.stl-methods-module { color: var(--st-fg-2); }
.stl-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sk-space-6) var(--sk-space-8); margin: 0; }
@media (max-width: 720px) { .stl-facts { grid-template-columns: 1fr; } }
.stl-fact { min-width: 0; }
.stl-fact-label { font-size: 12px; font-weight: 600; color: var(--st-fg-1); margin-bottom: var(--sk-space-2); }
.stl-fact-value { margin: 0; font-size: 13px; color: var(--st-fg-1); overflow-wrap: anywhere; }
.stl-fact-value.is-mono { font-family: var(--sk-font-data); font-size: 12px; }
.stl-fact-value a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.stl-stats { display: flex; gap: var(--sk-space-8); flex-wrap: wrap; }
.stl-stat { min-width: 120px; padding: var(--sk-space-6) var(--sk-space-8); border: 1px solid var(--st-border); border-radius: var(--sk-radius); }
.stl-stat-value { font-size: 22px; font-weight: 600; line-height: 1.1; color: var(--st-fg-1); }
.stl-stat.is-over .stl-stat-value { color: var(--sk-danger); }
.stl-stat-label { font-size: 11.5px; color: var(--st-fg-3); margin-top: var(--sk-space-2); }
.stl-modules { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sk-space-3) var(--sk-space-8); font-size: 12.5px; }
@media (max-width: 720px) { .stl-modules { grid-template-columns: 1fr; } }
.stl-module { display: flex; align-items: center; gap: var(--sk-space-3); min-width: 0; }
.stl-module .sk-status-dot { margin-bottom: 0; flex: none; }
.stl-module.is-off { color: var(--st-fg-3); }
/* ── App bar: an app's own tab strip, flush under the breadcrumb ──
Ten apps (Picking Pro, Tax, Distrib, RoutiGo, ...) each carry a private copy of
this strip. This is the shared one; new strips use it, and the copies can move
onto it as their pages are touched. It bleeds to the edges of .st-body with the
padding the shell names, so it sits flush at every width. */
.sk-appbar {
/* One row, always: a strip that wraps to two moves every title below it down by
a row. With more tabs than room, it scrolls sideways instead. */
display: flex; align-items: center; gap: var(--sk-space-7); flex-wrap: nowrap;
overflow-x: auto; scrollbar-width: none;
min-height: 48px; padding: 0 var(--st-pad-x, 20px);
margin: calc(-1 * var(--st-pad-top, 20px)) calc(-1 * var(--st-pad-x, 20px)) var(--sk-space-10);
background: var(--sk-card-bg); border-bottom: 1px solid var(--sk-border);
font-family: var(--sk-font-body);
}
.sk-appbar-brand { display: flex; align-items: center; gap: var(--sk-space-4); padding-right: var(--sk-space-2); }
.sk-appbar-tile {
width: 24px; height: 24px; border-radius: var(--sk-radius-sm); flex: none;
background: var(--sk-primary); color: #000;
display: inline-flex; align-items: center; justify-content: center;
}
.sk-appbar-title { font-size: 14px; font-weight: 600; color: var(--sk-text); letter-spacing: -0.01em; line-height: 1; }
.sk-appbar-divider { width: 1px; height: 22px; background: var(--sk-border); }
.sk-appbar-tabs { display: flex; align-items: stretch; gap: var(--sk-space-1); align-self: stretch; }
.sk-appbar-tab {
position: relative; display: inline-flex; align-items: center; gap: var(--sk-space-4);
padding: 0 var(--sk-space-6); min-height: 47px; text-decoration: none; white-space: nowrap;
font-size: 13px; color: var(--sk-text-muted); transition: color 180ms;
}
.sk-appbar-tab:hover { color: var(--sk-text); }
.sk-appbar-tab.is-active { color: var(--sk-text); font-weight: 600; }
.sk-appbar-tab.is-active::after {
content: ''; position: absolute; left: var(--sk-space-4); right: var(--sk-space-4); bottom: -1px;
height: 2px; background: var(--sk-primary); border-radius: 2px 2px 0 0;
}
.sk-appbar::-webkit-scrollbar { display: none; }
.sk-appbar > * { flex: none; }
/* An app that frames its screens in the detail shell (a rail on the left) still
opens with the entry header, not the compact bar: Boekhouding, Autorisatie. */
.cd-page .cd-inner > .sk-page-header { margin-bottom: var(--sk-space-10); }
|