, so the global .card/.list used by customer
screens are never touched. Rows keep the shared .card surface; only the
rhythm, radius, hairline and the serif title are layered on to match the
Verde admin mock (docs/redesign/verde.dc.html + docs/redesign/README §5). */
.admin-list { gap: 9px; }
.admin-list .card {
border: 1px solid var(--hairline);
border-radius: var(--r-tile);
}
/* List-item name → Cormorant serif (mock's product/list rows). Scoped to
admin so customer .card titles stay on Manrope. */
.admin-item-title {
font-family: var(--font-serif);
font-weight: 600;
font-size: 15px;
line-height: 1.15;
color: var(--forest-deep);
}
/* Money on an admin row (orders total) — forest, keeps the Manrope weight. */
.admin-amount { color: var(--forest); }
/* Header add-button pill ("+ Новий"), replacing the plain .btn-link look. */
.admin-add {
flex: 0 0 auto;
padding: 7px 14px;
border: none;
border-radius: var(--r-pill);
background: var(--forest);
color: var(--on-forest);
font: inherit;
font-weight: 600;
font-size: 12px;
cursor: pointer;
}
.admin-add:active { filter: brightness(.95); }
/* Settings panel (integrations) — a Verde surface wrapping a shared form so the
page reads as a card, without restyling the .field inputs inside. */
.admin-panel {
background: var(--surface-2);
border: 1px solid var(--hairline);
border-radius: var(--r-card);
padding: 16px;
margin-bottom: 12px;
}
.admin-panel > :first-child { margin-top: 0; }
.admin-panel > :last-child { margin-bottom: 0; }
/* products.html — full Verde mock row: thumb | body | price + "Редагувати". */
.admin-product { display: flex; align-items: center; gap: 12px; padding: 11px; }
.admin-product-thumb { flex: 0 0 auto; width: 40px; }
/* product_thumb() defaults to a full-width catalog element — clamp to 40×52. */
.admin-product-thumb .product-thumb-img,
.admin-product-thumb .product-thumb {
width: 40px;
height: 52px;
aspect-ratio: auto;
margin-bottom: 0;
border-radius: var(--r-thumb);
}
.admin-product-thumb .product-thumb { font-size: 20px; }
.admin-product-body { flex: 1; min-width: 0; }
.admin-product-meta {
font-size: 12px;
line-height: 1.3;
color: var(--text-muted);
margin-top: 2px;
}
.admin-product-aside { flex: 0 0 auto; text-align: right; }
.admin-product-price { font-weight: 700; font-size: 13px; line-height: 1; color: var(--forest); }
.admin-product-edit {
font-weight: 500;
font-size: 11px;
line-height: 1;
color: var(--leaf);
margin-top: 5px;
}
.admin-images-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 12px;
margin: 12px 0;
}
.admin-image-card {
display: flex;
flex-direction: column;
gap: 6px;
}
.admin-image-card img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
border-radius: 8px;
background: var(--surface-2);
}
.admin-image-meta {
display: flex;
justify-content: space-between;
align-items: center;
gap: 4px;
font-size: 12px;
}
/* ---- New states (Stage 7): skeleton · error · success · toast ---------- */
/* Skeleton: generic shimmer shell.ts drops into #content while a slow /view
fetch is in flight. Hook-free and transient — replaced by the real fragment
on arrival. Shimmer sweeps across the Verde surface tokens. */
.skeleton { display: flex; flex-direction: column; gap: 12px; }
.skeleton-card {
height: 76px;
border-radius: var(--r-card);
background: linear-gradient(
100deg,
var(--surface-2) 30%,
var(--surface-3) 50%,
var(--surface-2) 70%
);
background-size: 200% 100%;
animation: skeleton-shimmer 1.3s ease-in-out infinite;
}
.skeleton-card:first-child { height: 132px; } /* hero-ish lead block */
@keyframes skeleton-shimmer {
from { background-position: 200% 0; }
to { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
.skeleton-card { animation: none; }
}
/* Error state: centred Verde block with a retry button (data-action=navigate
re-runs loadView on the same path). Replaces the old flat . */
.error-state {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
text-align: center;
padding: 48px 16px 32px;
}
/* Danger disc with a pure-CSS "!" mark (stem + dot as pseudo-elements) — no
emoji, no asset, CSP-clean. */
.error-state-icon {
position: relative;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--danger-soft);
}
.error-state-icon::before,
.error-state-icon::after {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
background: var(--danger);
}
.error-state-icon::before {
top: 15px;
width: 4px;
height: 20px;
border-radius: 2px;
}
.error-state-icon::after {
bottom: 13px;
width: 4px;
height: 4px;
border-radius: 50%;
}
.error-state-text {
margin: 0;
max-width: 32ch;
font-size: 15px;
line-height: 1.5;
color: var(--text);
}
.error-state .btn-primary { margin-top: 4px; }
/* Diagnostic dump (init failure / unhandled rejection). Verde-tokened — no raw
hex — monospace + pre-wrapped so a stack trace stays readable. */
.error-dump {
white-space: pre-wrap;
word-break: break-word;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 11px;
line-height: 1.5;
color: var(--danger);
}
/* Checkout success overlay. Scope a true centred-modal treatment to ONLY this
overlay via :has() — the PIN and secret-reveal overlays carry no
.success-dialog, so they keep their existing in-flow rendering untouched.
Where :has() is unsupported the dialog simply renders in flow — still clear. */
#overlay:has(.success-dialog) {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: var(--scrim);
}
.success-dialog {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
text-align: center;
width: 100%;
max-width: 340px;
padding: 32px 24px 24px;
border-radius: var(--r-banner);
background: var(--surface);
box-shadow: var(--shadow-float);
}
/* Success disc with a pure-CSS check mark (rotated L drawn from two borders) —
no emoji, no asset, CSP-clean. */
.success-check {
position: relative;
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--success-soft);
}
.success-check::after {
content: "";
position: absolute;
left: 50%;
top: 46%;
width: 15px;
height: 26px;
border: solid var(--success);
border-width: 0 4px 4px 0;
transform: translate(-50%, -50%) rotate(45deg);
}
.success-title { margin: 6px 0 0; font-size: 22px; color: var(--forest-deep); }
.success-sub { margin: 0; font-size: 14px; color: var(--text-muted); }
/* Write-access priming copy. Rendered only when the bot may not message this
client yet (needsWriteAccess in shell.ts), so the dialog keeps its current
two-line shape for everyone who already allowed. */
.success-note {
margin: 4px 0 0;
font-size: 14px;
line-height: 1.45;
color: var(--text-muted);
}
.success-dialog .btn-primary {
margin-top: 10px;
width: 100%;
box-shadow: var(--shadow-cta);
}
.success-dialog .btn-link { margin-top: 2px; font-size: 14px; }
/* Toast — Verde surface pill: dark scrim for contrast, CTA elevation, Manrope
type, safe-area-aware. Logic (toast() in shell.ts) is unchanged. */
#toast {
position: fixed;
left: 50%;
bottom: calc(24px + env(safe-area-inset-bottom, 0px));
transform: translateX(-50%);
max-width: 90%;
padding: 12px 18px;
border-radius: var(--r-cta);
background: var(--scrim);
color: var(--on-forest);
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
line-height: 1.35;
text-align: center;
box-shadow: var(--shadow-cta);
z-index: 9999;
}
/* ==== Admin price editor (price_list_detail.html + priceEditor.ts) ======== */
/* Slim header: title + one meta line + a settings-accordion toggle. */
.pl-head {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 14px;
}
.pl-head-main { flex: 1; min-width: 0; }
.pl-title {
margin: 0;
font-family: var(--font-serif);
font-weight: 600;
font-size: 22px;
color: var(--forest-deep);
}
.pl-head-meta {
margin: 4px 0 0;
font-size: 12px;
color: var(--text-muted);
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.pl-head-actions {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 6px;
}
.pl-head-gear {
flex: 0 0 auto;
padding: 8px 12px;
border-radius: var(--r-thumb);
background: var(--surface-3);
color: var(--forest-deep);
font-size: 12px;
font-weight: 500;
cursor: pointer;
text-align: center;
}
/* Publish toggle — the only one-tap way to flip draft ↔ published. */
.pl-head-publish {
padding: 8px 12px;
border: 0;
border-radius: var(--r-thumb);
background: var(--forest-deep);
color: #fff;
font-family: inherit;
font-size: 12px;
font-weight: 600;
cursor: pointer;
}
.pl-head-publish.is-published {
background: var(--surface-3);
color: var(--text-muted);
font-weight: 500;
}
/* Settings collapse: a name-less checkbox toggles the panel (no JS).
The checkbox is a sibling of .pl-settings (see price_list_detail.html). */
.pl-settings-toggle { position: absolute; opacity: 0; pointer-events: none; }
.pl-settings { display: none; margin-bottom: 8px; }
.pl-settings-toggle:checked ~ .pl-settings { display: flex; }
/* Rule editor card. */
.pl-rule {
display: flex;
flex-direction: column;
gap: 12px;
padding: 14px;
border-radius: var(--r-card);
background: var(--surface-2);
margin-bottom: 14px;
}
/* Segmented control (rule type + sheet mode): radios drawn as pills. */
.pl-rule-seg {
display: flex;
gap: 4px;
padding: 4px;
border-radius: var(--r-tile);
background: var(--surface-3);
}
.pl-seg-opt { flex: 1; margin: 0; }
.pl-seg-opt input { position: absolute; opacity: 0; pointer-events: none; }
.pl-seg-opt span {
display: block;
text-align: center;
padding: 8px 6px;
border-radius: var(--r-thumb);
font-size: 12px;
font-weight: 500;
color: var(--text-muted-2);
cursor: pointer;
}
.pl-seg-opt input:checked + span {
background: var(--forest);
color: var(--on-forest);
font-weight: 600;
}
.pl-rule-value {
display: flex;
align-items: center;
gap: 8px;
}
.pl-rule-value input {
flex: 1;
min-width: 0;
padding: 12px 14px;
border: 1px solid var(--hairline);
border-radius: var(--r-tile);
background: var(--surface);
color: var(--forest-deep);
font: inherit;
font-size: 20px;
font-weight: 600;
}
.pl-rule-unit {
flex: 0 0 auto;
font-size: 16px;
font-weight: 600;
color: var(--text-muted);
}
.pl-rule-presets { display: flex; gap: 8px; }
.pl-preset {
flex: 1;
padding: 8px;
border: none;
border-radius: var(--r-thumb);
background: var(--leaf-tile);
color: var(--forest);
font: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
.pl-preset:active { filter: brightness(.97); }
.pl-rule-round { margin: 0; }
.pl-search { margin-bottom: 10px; }
.pl-chips { margin-bottom: 10px; }
.pl-select-all {
width: 100%;
padding: 10px;
margin-bottom: 12px;
border: 1px dashed var(--hairline);
border-radius: var(--r-tile);
background: transparent;
color: var(--forest);
font: inherit;
font-size: 13px;
font-weight: 500;
cursor: pointer;
}
/* Product rows. */
.pl-rows { display: flex; flex-direction: column; gap: 8px; }
.pl-row {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
border-radius: var(--r-card);
background: var(--surface-2);
}
.pl-row-off { opacity: .55; }
.pl-row-check { flex: 0 0 auto; margin: 0; display: flex; }
.pl-row-check input {
width: 22px;
height: 22px;
accent-color: var(--forest);
}
.pl-row-body { flex: 1; min-width: 0; }
.pl-row-name {
font-family: var(--font-serif);
font-weight: 600;
font-size: 15px;
line-height: 1.15;
color: var(--forest-deep);
}
.pl-row-sub {
display: flex;
align-items: center;
gap: 8px;
margin-top: 3px;
flex-wrap: wrap;
}
.pl-row-base {
font-size: 12px;
color: var(--text-muted);
text-decoration: line-through;
}
.pl-row-tag {
font-size: 11px;
font-weight: 600;
padding: 2px 7px;
border-radius: 999px;
}
.pl-tag-rule { background: var(--success-soft); color: var(--success); }
.pl-tag-override { background: var(--warn-soft); color: var(--warn); }
.pl-tag-off { background: var(--surface-3); color: var(--text-muted); }
.pl-row-aside {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
}
.pl-row-price {
font-family: var(--font-serif);
font-weight: 700;
font-size: 17px;
color: var(--forest);
}
.pl-row-edit {
border: none;
background: none;
padding: 0;
color: var(--leaf);
font: inherit;
font-size: 12px;
font-weight: 600;
cursor: pointer;
}
.pl-empty { text-align: center; padding: 24px 0; }
/* Pinned summary bar. */
.pl-summary {
position: sticky;
bottom: 0;
display: flex;
align-items: center;
gap: 12px;
margin: 14px -16px 0;
padding: 12px 16px;
padding-bottom: max(12px, env(safe-area-inset-bottom));
background: var(--surface);
border-top: 1px solid var(--hairline);
}
.pl-summary-text { flex: 1; font-size: 12px; color: var(--text-muted); }
.pl-save-cta { flex: 0 0 auto; box-shadow: var(--shadow-cta); }
.pl-danger { color: var(--danger); }
/* Override bottom sheet. */
.pl-sheet {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: flex-end;
justify-content: center;
}
.pl-sheet[hidden] { display: none; }
.pl-sheet-scrim { position: absolute; inset: 0; background: var(--scrim); }
.pl-sheet-panel {
position: relative;
width: 100%;
max-width: 480px;
display: flex;
flex-direction: column;
gap: 12px;
padding: 20px 18px;
padding-bottom: max(20px, env(safe-area-inset-bottom));
border-radius: var(--r-banner) var(--r-banner) 0 0;
background: var(--surface);
box-shadow: var(--shadow-float);
}
.pl-sheet-title {
font-family: var(--font-serif);
font-weight: 600;
font-size: 18px;
color: var(--forest-deep);
}
.pl-sheet-compare { font-size: 13px; color: var(--text-muted); }
.pl-sheet-compare strong { color: var(--forest); }
.pl-sheet-hint { font-size: 12px; }
.pl-sheet-valuewrap {
display: flex;
align-items: center;
gap: 8px;
}
.pl-sheet-value {
flex: 1;
min-width: 0;
padding: 12px 14px;
border: 1px solid var(--hairline);
border-radius: var(--r-tile);
background: var(--surface);
color: var(--forest-deep);
font: inherit;
font-size: 20px;
font-weight: 600;
}
.pl-sheet-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 4px;
}
.pl-sheet-actions .btn-primary { flex: 1; }