/* ═══════════════════════════════════════════════════════════════════════
99ERP — the application stylesheet (design v2, «99;»).
THESIS Calm paper on a warm ground, and an ink sidebar that is the
logo's own disc. Things are separated by SPACE and SURFACE —
a white card on the ground, a tinted inset in a card — and
almost never by a rule. One brand colour, the semicolon's orange,
marks «you are here» and focus; meaning (gain, loss, wait) has
its own green / red / amber.
MOTION Emil Kowalski's rules, from the start: feedback on press
(scale .97, 160ms, ease-out), state changes under 300ms with
custom curves, entrances with @starting-style, hover only on
devices that hover. Nothing opened from the keyboard animates
(F3 palette, suggestion lists, sidebar groups).
CONTRACT The class vocabulary is the API: ninety-odd screens emit these
names. Restyle against them; never rename one. See DESIGN.md.
── Rules that are not style ──────────────────────────────────────────
1 · No letter-spacing anywhere Persian can appear (its letters join).
2 · Figures are tabular. Peyda's digits are proportional and it has no
`tnum`, so every digit is set in Vazirmatn by the figures face below.
3 · Peyda never sets Latin (its Latin collapses word spaces).
4 · Colour never speaks alone: every state carries its word.
5 · Logical properties only.
6 · CSP is `style-src 'self'`: no inline styles; state is classes and
data-* hooks.
═══════════════════════════════════════════════════════════════════════ */
/* ═══════════ fonts ═══════════
One family, «N99», composed from three faces per weight by unicode-range:
Latin (Vazirmatn) · Persian/Arabic script (Peyda) · figures (Vazirmatn).
The figures face is declared LAST so it wins the overlap. */
@font-face { font-family: "N99"; font-style: normal; font-weight: 400; font-display: swap;
src: url("fonts/vazirmatn-400.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "N99"; font-style: normal; font-weight: 500; font-display: swap;
src: url("fonts/vazirmatn-500.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "N99"; font-style: normal; font-weight: 700; font-display: swap;
src: url("fonts/vazirmatn-700.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "N99"; font-style: normal; font-weight: 400; font-display: swap;
src: url("fonts/peyda-400.woff2") format("woff2");
unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "N99"; font-style: normal; font-weight: 500; font-display: swap;
src: url("fonts/peyda-500.woff2") format("woff2");
unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "N99"; font-style: normal; font-weight: 700; font-display: swap;
src: url("fonts/peyda-700.woff2") format("woff2");
unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "N99"; font-style: normal; font-weight: 400; font-display: swap;
src: url("fonts/vazirmatn-400.woff2") format("woff2");
unicode-range: U+0030-0039, U+0660-066C, U+06F0-06F9; }
@font-face { font-family: "N99"; font-style: normal; font-weight: 500; font-display: swap;
src: url("fonts/vazirmatn-500.woff2") format("woff2");
unicode-range: U+0030-0039, U+0660-066C, U+06F0-06F9; }
@font-face { font-family: "N99"; font-style: normal; font-weight: 700; font-display: swap;
src: url("fonts/vazirmatn-700.woff2") format("woff2");
unicode-range: U+0030-0039, U+0660-066C, U+06F0-06F9; }
/* ═══════════ tokens ═══════════ */
:root {
/* The logo, measured off the owner's file (brand/tools/logo99.py). */
--logo-ink: #1d1713;
--logo-cream: #f9f4ec;
--logo-orange: #f4741e;
/* Grounds. The page is a warm ground; work sits on white paper. */
--canvas: #f4f1ec;
--surface: #ffffff;
--surface-2: #f9f7f3; /* an inset inside paper: a head, a quiet strip */
--surface-3: #f0ece6; /* hover / selected on paper */
--surface-4: #e8e2d9; /* pressed */
--wash: rgba(29,23,19,.045); /* a hover on the ground itself */
/* Ink — the disc, and warm steps down. */
--ink: #1d1713; /* 17.6:1 on white */
--ink-2: #4a423b; /* 9.8:1 on white, 8.7:1 on canvas */
--ink-3: #6f665d; /* 5.6:1 on white, 4.9:1 on canvas */
--ink-4: #9a9086; /* decoration only: placeholders' icons, separators */
--cream: #f9f4ec; /* text on ink */
/* Hairlines are for TABLE ROWS and nothing else. */
--hair: rgba(29,23,19,.07);
--hair-2: rgba(29,23,19,.12);
/* A control's edge. */
--edge: #ddd5ca;
--edge-hover: #c2b8ab;
/* The brand orange. #f4741e is 2.8:1 on white, so it is a fill, a dot or
a ring — never body text. --brand-strong clears 3:1 for rings,
--brand-ink clears 4.5:1 for the rare orange word. */
--brand: #f4741e;
--brand-strong: #d4600f;
--brand-ink: #a8470a;
--brand-tint: #fdefe4;
--focus: var(--brand-strong);
--focus-ring: 0 0 0 3px rgba(244,116,30,.25);
/* Meaning. Text steps clear 4.5:1 on their tints. */
--pos: #1b7647; --pos-fill: #2a9d63; --pos-tint: #e7f4ec;
--neg: #b4152f; --neg-fill: #d6293f; --neg-tint: #fcecef;
--neg-hover: #980f27; --neg-press: #7d0c20;
--warn: #855d00; --warn-fill: #f2c230; --warn-tint: #fcf4d9;
--money: var(--ink);
/* Depth. Paper is lifted by a ring and a soft fall, never by a border. */
--shadow-xs: 0 1px 2px rgba(29,23,19,.05);
--shadow-card: 0 0 0 1px rgba(29,23,19,.05), 0 1px 2px rgba(29,23,19,.04),
0 8px 20px -12px rgba(29,23,19,.12);
--shadow-lift: 0 0 0 1px rgba(29,23,19,.06), 0 2px 4px rgba(29,23,19,.05),
0 14px 28px -14px rgba(29,23,19,.2);
--shadow-pop: 0 0 0 1px rgba(29,23,19,.07), 0 24px 48px -16px rgba(29,23,19,.3),
0 6px 12px -6px rgba(29,23,19,.1);
--shadow-btn: 0 1px 2px rgba(29,23,19,.18), inset 0 1px 0 rgba(255,255,255,.09);
--ring-quiet: 0 0 0 1px rgba(29,23,19,.1), 0 1px 2px rgba(29,23,19,.05);
/* The sidebar is the logo's disc: ink, cream type, orange «here». */
--side-bg: #1d1713;
--side-fg: #f9f4ec; /* 15.8:1 */
--side-fg-2: rgba(249,244,236,.66); /* 7.4:1 */
--side-fg-3: rgba(249,244,236,.42); /* decoration only */
--side-fill: rgba(249,244,236,.06);
--side-fill-2: rgba(249,244,236,.1);
/* Geometry. */
--r-xs: 6px; --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; --r-pill: 999px;
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
--sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 48px;
--card-pad: 24px;
--gutter: 32px;
/* Sizes. */
--h-ctl: 38px;
--h-ctl-sm: 32px;
--h-ctl-xs: 28px;
--h-row: 44px;
--side-w: 268px;
--top-h: 64px;
--tap: 44px;
--content-max: 1560px;
/* Type — 14px reads; 13.5px in grids; weights 400/500/700 only. */
--fs-11: .6875rem;
--fs-12: .75rem;
--fs-13: .8125rem;
--fs-135: .84375rem;
--fs-14: .875rem;
--fs-15: .9375rem;
--fs-16: 1rem;
--fs-18: 1.125rem;
--fs-20: 1.25rem;
--fs-24: 1.5rem;
--fs-28: 1.75rem;
--font-body: "N99", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-mono: var(--font-body);
/* Motion. Custom curves; the built-in ones are too weak. */
--ease-out: cubic-bezier(.23, 1, .32, 1);
--ease-in-out: cubic-bezier(.77, 0, .175, 1);
--ease-drawer: cubic-bezier(.32, .72, 0, 1);
--dur-press: 160ms;
--dur-fast: 150ms;
--dur-base: 220ms;
/* Layers. */
--z-sticky: 2;
--z-sug: 40;
--z-top: 50;
--z-side: 60;
--z-skip: 200;
/* Icons used by more than one rule. */
--icon-search: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2020%2020'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%3E%3Ccircle%20cx='9'%20cy='9'%20r='5.4'/%3E%3Cpath%20d='M13.2%2013.2%2017%2017'/%3E%3C/svg%3E");
/* A chevron pointing toward reading's END (left, in this RTL app). */
--icon-chev-end: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2020%2020'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%205%207%2010l5%205'/%3E%3C/svg%3E");
--icon-chev-down: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2020%2020'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m5.5%208%204.5%204.5L14.5%208'/%3E%3C/svg%3E");
--icon-menu: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2020%2020'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%3E%3Cpath%20d='M3.5%206h13M3.5%2010h13M3.5%2014h13'/%3E%3C/svg%3E");
--icon-close: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2020%2020'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%3E%3Cpath%20d='m5.5%205.5%209%209M14.5%205.5l-9%209'/%3E%3C/svg%3E");
--icon-out: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2020%2020'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M8%204H5.5A1.5%201.5%200%200%200%204%205.5v9A1.5%201.5%200%200%200%205.5%2016H8'/%3E%3Cpath%20d='M12%206.5%208.5%2010l3.5%203.5M8.5%2010H16'/%3E%3C/svg%3E");
/* Chart series — every mark ≥ 3:1 on white. lib/chart.php names its marks
`.erp-s1…8`; nothing in PHP knows a hex. */
--s1: #1d1713; --s2: #d4600f; --s3: #8c8276; --s4: #8a3d0e;
--s5: #3d6b85; --s6: #9a7344; --s7: #4f6f3a; --s8: #5c4033;
--chart-grid: #efeae3; --chart-axis: #cfc6ba; --chart-ink: #6f665d;
--chart-title: #4a423b; --chart-strong: #1d1713;
--gauge: #f4741e; --gauge-track: #efeae3;
--spark-pos: #1b7647; --area-pos: rgba(42,157,99,.13);
--spark-neg: #b4152f; --area-neg: rgba(214,41,63,.1);
/* Module hook: the icon is set per [data-g] at the end of the sheet. */
--g: var(--ink-2);
}
/* ═══════════ reset & page ═══════════ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent; /* our own :active is the feedback */
color-scheme: light;
overscroll-behavior: none;
overflow-x: clip; /* clip, not hidden: sticky survives */
background: var(--canvas);
/* An in-page anchor lands below the pinned module row, not under it. */
scroll-padding-block-start: 76px;
}
body {
min-block-size: 100vh;
min-block-size: 100dvh;
background: var(--canvas);
color: var(--ink);
font-family: var(--font-body);
font-size: var(--fs-14);
line-height: 1.6;
font-weight: 400;
font-variant-numeric: tabular-nums; /* load-bearing: rule 2 */
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: clip;
overscroll-behavior: none;
}
img, svg { max-inline-size: 100%; display: block; }
a {
color: var(--ink);
text-decoration: underline;
text-decoration-color: rgba(29,23,19,.25);
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
a:hover { text-decoration-color: var(--brand-strong); }
}
b, strong { font-weight: 700; }
h1, h2, h3, h4 { font-weight: 700; line-height: 1.35; }
/* One focus treatment, instant: it follows the keyboard. */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--brand-tint); color: var(--ink); }
.ltr {
direction: ltr;
unicode-bidi: isolate;
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
}
.erp-sr {
position: absolute; inline-size: 1px; block-size: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip-path: inset(50%); white-space: nowrap; border: 0;
}
.erp-skip {
position: fixed; inset-block-start: 0; inset-inline-start: 0;
transform: translateY(-200%);
z-index: var(--z-skip); padding: var(--sp-3) var(--sp-4);
background: var(--ink); color: var(--cream);
font-weight: 500; text-decoration: none;
border-end-end-radius: var(--r-md);
}
.erp-skip:focus { transform: translateY(0); }
/* Controls are not content: no long-press selection, no callout, no
double-tap delay. Text in cells and paragraphs stays selectable. */
button, summary, [role="button"],
.erp-btn, .erp-chip, .erp-gsearch, .erp-rail-g, .erp-rail-home, .erp-rail-a,
.erp-mod, .erp-pal-opt, .erp-sug-opt, .erp-linkbtn, .erp-iconbtn, .erp-who {
touch-action: manipulation;
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
}
/* ═══════════ the frame ═══════════
The header is the logo's own disc: ink, cream type, and the semicolon's
orange for «you are here». Two rows — the brand row (logo, the books'
owner, search, year, person) scrolls away; the module row under it stays
pinned. The module row is a [popover]: on a desk the sheet shows it as a
bar; below 64rem it is a drawer with light-dismiss and Esc, no script. */
.erp-top {
background: var(--side-bg);
color: var(--side-fg);
padding-block-start: env(safe-area-inset-top, 0px);
}
.erp-top-in {
display: flex; align-items: center; gap: var(--sp-4);
min-block-size: 64px;
max-inline-size: var(--content-max);
margin-inline: auto;
padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.erp-brand {
flex: none;
display: inline-flex; align-items: center;
color: var(--side-fg); text-decoration: none;
border-radius: var(--r-sm);
}
/* «99;» alone: the header IS the disc, so the glyphs sit straight on it. */
.erp-brand .erp-logo { block-size: 28px; inline-size: auto; color: var(--logo-cream); }
.erp-brand-sub {
flex: 0 1 auto; min-inline-size: 0;
display: inline-flex; align-items: center; gap: var(--sp-3);
font-size: var(--fs-14); font-weight: 500; color: var(--side-fg-2);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.erp-brand-sub::before {
content: ""; flex: none;
inline-size: 4px; block-size: 4px; border-radius: 50%;
background: var(--side-fg-3);
}
/* The search field opens the F3 palette; a button dressed as a field. */
.erp-gsearch {
flex: 0 1 26rem; min-inline-size: 0;
margin-inline: auto;
display: flex; align-items: center; gap: var(--sp-2);
block-size: 40px;
padding-inline: var(--sp-4) var(--sp-2);
background: var(--side-fill);
border: 0; border-radius: var(--r-md);
color: var(--side-fg-2);
font: inherit; font-size: var(--fs-14);
text-align: start; cursor: pointer;
transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease,
transform var(--dur-press) var(--ease-out);
}
.erp-gsearch::before {
content: ""; flex: none;
inline-size: 17px; block-size: 17px;
background-color: currentColor;
-webkit-mask: var(--icon-search) center / contain no-repeat;
mask: var(--icon-search) center / contain no-repeat;
}
.erp-gsearch span { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erp-gsearch kbd {
flex: none;
font-family: var(--font-mono); font-size: var(--fs-11); font-weight: 500;
padding: 2px 7px; margin: 0; border-radius: var(--r-xs);
background: var(--side-fill-2); color: var(--side-fg-2); box-shadow: none;
}
.erp-gsearch:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) {
.erp-gsearch:hover { background: var(--side-fill-2); color: var(--side-fg); }
}
.erp-top-end {
flex: none;
display: flex; align-items: center; gap: var(--sp-3);
}
/* «نمایشی» — the demo company's mark. The logo's yellow, solid, and it stays on
phones where the company name and the env tag go: a screenshot of the demo
must never read as somebody's real books. */
.erp-demo-tag {
flex: none;
font-size: var(--fs-11); font-weight: 600;
padding: 2px var(--sp-2); border-radius: var(--r-pill);
background: var(--warn-fill); color: var(--ink);
white-space: nowrap;
}
.erp-env {
font-size: var(--fs-11); font-weight: 500;
padding: 2px var(--sp-2); border-radius: var(--r-pill);
background: rgba(242,194,48,.16); color: #f6d779;
white-space: nowrap;
}
/* «Unsaved» — appears on the first edit and goes on submit (js/erp.js). */
.erp-dirty {
display: inline-flex; align-items: center; gap: 6px;
font-size: var(--fs-12); font-weight: 500;
padding: 3px 10px; border-radius: var(--r-pill);
background: rgba(242,194,48,.16); color: #f6d779;
white-space: nowrap;
transition: opacity var(--dur-base) var(--ease-out), translate var(--dur-base) var(--ease-out);
}
.erp-dirty::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--warn-fill); }
@starting-style { .erp-dirty { opacity: 0; translate: 0 -4px; } }
.erp-dirty[hidden] { display: none; }
/* The fiscal-year switcher: a pill on the ink. Amber off the live year,
because every figure below is then from a closed year. */
.erp-fysw { flex: none; display: flex; align-items: center; gap: var(--sp-1); }
.erp-fysw select {
appearance: none;
font: inherit; font-size: var(--fs-13); font-weight: 500;
color: var(--side-fg);
background-color: var(--side-fill);
background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2010%206'%20fill='none'%20stroke='%23f9f4ec'%20stroke-opacity='.7'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M1%201l4%204%204-4'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: left 12px center;
background-size: 10px 6px;
block-size: 36px;
padding-inline: 14px 32px;
border: 0; border-radius: var(--r-pill);
cursor: pointer;
transition: background-color var(--dur-fast) ease;
}
.erp-fysw select option { color: var(--ink); background: var(--surface); }
.erp-fysw [hidden] { display: none !important; }
@media (hover: hover) and (pointer: fine) {
.erp-fysw select:hover { background-color: var(--side-fill-2); }
}
.erp-fysw.is-archive select { background-color: var(--warn-fill); color: var(--ink); }
/* The person: an orange disc with their initial, their name, today. */
.erp-who {
display: flex; align-items: center; gap: var(--sp-3);
color: var(--side-fg); text-decoration: none;
border-radius: var(--r-md);
min-inline-size: 0;
}
.erp-who-av {
flex: none;
inline-size: 34px; block-size: 34px; border-radius: 50%;
background: var(--brand); color: var(--logo-ink);
display: grid; place-items: center;
font-size: var(--fs-14); font-weight: 700;
}
.erp-who-t { display: flex; flex-direction: column; line-height: 1.35; min-inline-size: 0; }
.erp-who-n, .erp-who-r { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.erp-who-n { font-size: var(--fs-13); font-weight: 500; color: var(--side-fg); }
.erp-who-r { font-size: var(--fs-12); color: var(--side-fg-2); }
@media (hover: hover) and (pointer: fine) {
.erp-who:hover .erp-who-n { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--side-fg-3); }
}
/* An icon-only button. Its name is in an .erp-sr span or aria-label. */
.erp-iconbtn {
flex: none;
display: inline-grid; place-items: center;
inline-size: 38px; block-size: 38px;
padding: 0; border: 0; border-radius: var(--r-md);
background: transparent; color: var(--ink-2);
cursor: pointer;
transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease,
transform var(--dur-press) var(--ease-out);
}
.erp-iconbtn::before {
content: ""; inline-size: 20px; block-size: 20px;
background-color: currentColor;
-webkit-mask: var(--i) center / contain no-repeat;
mask: var(--i) center / contain no-repeat;
}
.erp-iconbtn:active { transform: scale(.94); }
.erp-top .erp-iconbtn, .erp-rail .erp-iconbtn { color: var(--side-fg-2); }
@media (hover: hover) and (pointer: fine) {
.erp-iconbtn:hover { background: var(--wash); color: var(--ink); }
.erp-top .erp-iconbtn:hover, .erp-rail .erp-iconbtn:hover { background: var(--side-fill-2); color: var(--side-fg); }
}
.erp-iconbtn.is-out { --i: var(--icon-out); }
.erp-iconbtn.is-menu { --i: var(--icon-menu); }
.erp-iconbtn.is-close { --i: var(--icon-close); }
.erp-menu-btn { display: none; }
/* ── the module row ──────────────────────────────────────────────────── */
.erp-rail {
/* Undo the popover's UA sheet: on a desk the row is simply there. */
display: block;
position: sticky; inset: auto; inset-block-start: 0;
margin: 0; padding: 0; border: 0;
inline-size: auto; block-size: auto;
max-inline-size: none; max-block-size: none;
overflow: visible;
z-index: var(--z-top);
background: var(--side-bg);
color: var(--side-fg-2);
}
/* It earns a shadow once it has stuck (scroll-driven, no script). */
@supports (animation-timeline: scroll()) {
.erp-rail {
animation: erp-rail-lift linear both;
animation-timeline: scroll(root);
animation-range: 56px 96px;
}
@keyframes erp-rail-lift {
from { box-shadow: 0 0 0 rgba(29,23,19,0); }
to { box-shadow: 0 10px 24px -14px rgba(29,23,19,.45); }
}
}
.erp-rail-in {
position: relative;
display: flex; align-items: center; flex-wrap: wrap; gap: 2px;
max-inline-size: var(--content-max);
margin-inline: auto;
padding-block: 0 var(--sp-3);
padding-left: max(calc(var(--gutter) - 12px), env(safe-area-inset-left, 0px));
padding-right: max(calc(var(--gutter) - 12px), env(safe-area-inset-right, 0px));
}
.erp-rail-head { display: none; }
/* A module (summary) and home share one shape: glyph + word, a soft pill.
Menus are opened tens of times a day: nothing here animates. */
.erp-rail-home,
.erp-rail-g {
display: inline-flex; align-items: center; gap: var(--sp-2);
block-size: 40px;
padding-inline: var(--sp-3);
border-radius: var(--r-md);
color: var(--side-fg-2);
font-size: var(--fs-14); font-weight: 500;
text-decoration: none; white-space: nowrap;
cursor: pointer;
list-style: none;
transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.erp-rail-g::-webkit-details-marker { display: none; }
.erp-rail-home::before,
.erp-rail-g::before {
content: ""; flex: none;
inline-size: 17px; block-size: 17px;
background-color: currentColor;
-webkit-mask: var(--icon) center / contain no-repeat;
mask: var(--icon) center / contain no-repeat;
}
.erp-rail-home:active, .erp-rail-g:active { background: var(--side-fill-2); }
@media (hover: hover) and (pointer: fine) {
.erp-rail-home:hover, .erp-rail-g:hover { background: var(--side-fill); color: var(--side-fg); }
}
.erp-rail-home:focus-visible, .erp-rail-g:focus-visible,
.erp-gsearch:focus-visible, .erp-top .erp-iconbtn:focus-visible, .erp-rail .erp-iconbtn:focus-visible,
.erp-brand:focus-visible, .erp-who:focus-visible {
outline: 2px solid var(--brand); outline-offset: 2px;
}
/* Open: filled. Here: filled, cream, and the module's glyph in orange. */
.erp-rail-grp[open] > .erp-rail-g { background: var(--side-fill-2); color: var(--side-fg); }
.erp-rail-home.is-here,
.erp-rail-grp.is-here > .erp-rail-g { background: var(--side-fill-2); color: var(--side-fg); }
.erp-rail-home.is-here::before,
.erp-rail-grp.is-here > .erp-rail-g::before { background-color: var(--brand); }
/* The panel: paper hung from its own title, origin at that title. */
.erp-rail-grp { position: relative; }
.erp-rail-list {
list-style: none; margin: 0;
position: absolute;
inset-block-start: calc(100% + 8px);
inset-inline-start: 0;
z-index: 70;
min-inline-size: 250px;
max-inline-size: min(24rem, 92vw);
max-block-size: min(32rem, calc(100dvh - 140px));
overflow-y: auto; overscroll-behavior: contain;
padding: 6px;
background: var(--surface);
border-radius: var(--r-lg);
box-shadow: var(--shadow-pop);
}
/* A menu near the far end of the bar opens toward the start instead. */
.erp-rail-grp:nth-last-child(-n+3) > .erp-rail-list { inset-inline-start: auto; inset-inline-end: 0; }
.erp-rail-a {
position: relative;
display: flex; align-items: center; gap: var(--sp-3);
min-block-size: 40px;
padding-inline: var(--sp-3);
border-radius: var(--r-sm);
color: var(--ink-2);
font-size: var(--fs-14);
text-decoration: none;
white-space: nowrap;
}
.erp-rail-a::before {
content: ""; flex: none;
inline-size: 6px; block-size: 6px; border-radius: 50%;
background: var(--surface-4);
}
@media (hover: hover) and (pointer: fine) {
.erp-rail-a:hover { background: var(--surface-2); color: var(--ink); }
.erp-rail-a.is-soon:hover { background: none; color: var(--ink-3); }
}
.erp-rail-a:active { background: var(--surface-3); }
.erp-rail-a:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.erp-rail-a.is-on { background: var(--surface-3); color: var(--ink); font-weight: 500; }
.erp-rail-a.is-on::before { background: var(--brand); }
.erp-rail-a.is-soon { color: var(--ink-3); cursor: default; }
.erp-rail-soon, .erp-rail-key {
margin-inline-start: auto;
font-style: normal; font-family: var(--font-mono); font-size: var(--fs-11); font-weight: 500;
padding: 1px 6px; border-radius: var(--r-xs);
background: var(--surface-3); color: var(--ink-3);
}
/* ── the work column ─────────────────────────────────────────────────── */
.erp-shell { display: block; min-inline-size: 0; }
.erp-main {
inline-size: 100%;
max-inline-size: var(--content-max);
margin-inline: auto;
min-inline-size: 0;
padding-block: var(--sp-7) var(--sp-9);
padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
/* Where am I: module › list › this page, above the title. */
.erp-crumbs {
display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2);
margin-block-end: var(--sp-2);
font-size: var(--fs-13); color: var(--ink-3);
}
.erp-crumbs a { color: var(--ink-3); text-decoration: none; border-radius: var(--r-xs); }
@media (hover: hover) and (pointer: fine) {
.erp-crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
}
.erp-crumbs > :last-child { color: var(--ink-2); }
.erp-crumbs > * + *::before {
content: ""; display: inline-block; vertical-align: -3px;
inline-size: 14px; block-size: 14px; margin-inline-end: var(--sp-2);
background-color: var(--ink-4);
-webkit-mask: var(--icon-chev-end) center / contain no-repeat;
mask: var(--icon-chev-end) center / contain no-repeat;
}
.erp-crumbs + .erp-h, .erp-crumbs + .erp-flash + .erp-h { margin-block-start: 0; }
/* «You are looking at a closed year» — a banner in the flow, not a chip. */
.erp-archive {
display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
max-inline-size: calc(var(--content-max) - 2 * var(--gutter));
margin: var(--sp-5) max(var(--gutter), calc((100% - var(--content-max)) / 2 + var(--gutter))) 0;
padding: var(--sp-3) var(--sp-4);
border-radius: var(--r-lg);
background: var(--warn-tint); color: var(--warn);
font-size: var(--fs-13); line-height: 1.6;
}
.erp-archive b {
font-weight: 700; font-size: var(--fs-12);
padding: 1px 10px; border-radius: var(--r-pill);
background: var(--warn-fill); color: var(--ink);
white-space: nowrap;
}
.erp-archive span { flex: 1 1 20rem; min-inline-size: 0; }
.erp-archive + .erp-main { padding-block-start: var(--sp-5); }
/* «This copy is a read-only mirror» (M4) — the archive banner's shape and
amber, because it answers the same question: why is there no «ثبت» here.
It is on every page of a mirror, so it never animates. A fenced copy is red:
that is a problem somebody has to act on, not a state to live in. */
:is(.erp-node, .erp-licence) {
display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
max-inline-size: calc(var(--content-max) - 2 * var(--gutter));
margin: var(--sp-5) max(var(--gutter), calc((100% - var(--content-max)) / 2 + var(--gutter))) 0;
padding: var(--sp-3) var(--sp-4);
border-radius: var(--r-lg);
background: var(--warn-tint); color: var(--warn);
font-size: var(--fs-13); line-height: 1.6;
}
:is(.erp-node, .erp-licence) b {
font-weight: 700; font-size: var(--fs-12);
padding: 1px 10px; border-radius: var(--r-pill);
background: var(--warn-fill); color: var(--ink);
white-space: nowrap;
}
:is(.erp-node, .erp-licence) span { flex: 1 1 20rem; min-inline-size: 0; }
/* .erp-licence (M5) wears the same shape: its own class, because «erp-node»
means «this copy is not the main» and tests and tools read it that way.
is-stop is the licence's red — new documents are refused, same urgency. */
.erp-node.is-fenced, .erp-licence.is-stop { background: var(--neg-tint); color: var(--neg); }
:is(.erp-node.is-fenced, .erp-licence.is-stop) b { background: var(--neg-fill); color: #fff; }
:is(.erp-node, .erp-licence) + .erp-main { padding-block-start: var(--sp-5); }
:is(.erp-node, .erp-licence) + :is(.erp-node, .erp-licence, .erp-archive) { margin-block-start: var(--sp-3); }
/* ═══════════ page header ═══════════
Title and its count on one line, the sentence under it, and the page's
own actions at the far end — where the eye goes after reading the title. */
.erp-h {
display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
gap: var(--sp-4) var(--sp-6);
margin-block: var(--sp-3) var(--sp-7);
}
.erp-h-main { flex: 1 1 28rem; min-inline-size: 0; }
.erp-h h1 {
font-size: var(--fs-28); font-weight: 700; line-height: 1.3;
color: var(--ink);
display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3);
}
.erp-h-note {
font-family: var(--font-mono);
font-size: var(--fs-13); font-weight: 500; line-height: 1.5;
color: var(--ink-2);
padding: 2px 12px; border-radius: var(--r-pill);
background: var(--wash);
font-variant-numeric: tabular-nums;
unicode-bidi: isolate;
}
.erp-h-lede {
margin-block-start: var(--sp-2);
max-inline-size: 78ch;
color: var(--ink-3); font-size: var(--fs-14); line-height: 1.75;
}
/* A detail page's status line (pills) directly under its title belongs to
the title, not to the content below it. */
.erp-h + p:has(> .erp-pill) {
display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
margin-block: calc(var(--sp-7) * -1 + var(--sp-2)) var(--sp-6);
}
/* The same lede, used as a section's opening sentence. */
.erp-h-lede:not(.erp-h-main > .erp-h-lede) { margin-block: 0 var(--sp-4); }
.erp-sec-h + .erp-h-lede { margin-block-start: calc(var(--sp-2) * -1); }
.erp-h-actions {
flex: none;
display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
}
/* ═══════════ sections, cards ═══════════ */
.erp-sec { margin-block-start: var(--sp-8); }
.erp-sec-h {
display: flex; flex-wrap: wrap; align-items: baseline;
justify-content: space-between; gap: var(--sp-2) var(--sp-4);
margin-block: var(--sp-8) var(--sp-4);
}
.erp-sec-h:first-child { margin-block-start: 0; }
.erp-sec-h h2 { font-size: var(--fs-18); font-weight: 700; color: var(--ink); }
/* Quiet links in heads: a destination, not an instruction. */
.erp-sec-h a, .erp-card-h a {
display: inline-flex; align-items: center; gap: 4px;
font-size: var(--fs-13); font-weight: 500; color: var(--ink-3);
text-decoration: none; border-radius: var(--r-xs);
white-space: nowrap;
}
.erp-sec-h a::after, .erp-card-h a::after {
content: ""; inline-size: 14px; block-size: 14px;
background-color: currentColor;
-webkit-mask: var(--icon-chev-end) center / contain no-repeat;
mask: var(--icon-chev-end) center / contain no-repeat;
}
@media (hover: hover) and (pointer: fine) {
.erp-sec-h a:hover, .erp-card-h a:hover { color: var(--ink); }
}
.erp-card {
background: var(--surface);
border-radius: var(--r-xl);
box-shadow: var(--shadow-card);
padding: var(--card-pad);
min-inline-size: 0;
}
.erp-card + .erp-card { margin-block-start: var(--sp-5); }
.erp-grid > .erp-card + .erp-card,
.erp-sc-grid > .erp-card + .erp-card,
.erp-dash-col > .erp-card + .erp-card { margin-block-start: 0; }
.erp-card-h {
display: flex; flex-wrap: wrap; align-items: center;
justify-content: space-between; gap: var(--sp-2) var(--sp-4);
margin-block-end: var(--sp-4);
}
.erp-card-h h3 { font-size: var(--fs-16); font-weight: 700; color: var(--ink); }
/* A short form (two to six fields) reads as a sheet, not a banner across the
whole screen. */
.erp-card.is-narrow, .erp-form.is-narrow { max-inline-size: 46rem; }
.erp-h-actions form { display: inline-flex; }
.erp-card-inset {
background: var(--surface-2);
border-radius: var(--r-lg);
padding: var(--sp-4);
}
.erp-card > * + * { margin-block-start: var(--sp-3); }
.erp-card > .erp-card-h + * { margin-block-start: 0; }
/* The dashboard: the work column and a side column. */
.erp-dash {
display: grid; gap: var(--sp-5);
grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
align-items: start;
}
.erp-dash-col { display: flex; flex-direction: column; gap: var(--sp-5); min-inline-size: 0; }
.erp-dash-cmp { margin-block: calc(var(--sp-3) * -1) var(--sp-4); }
@media (max-width: 80rem) {
.erp-dash { grid-template-columns: minmax(0, 1fr); }
}
.erp-grid { display: grid; gap: var(--sp-5); align-items: start; }
.erp-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); }
.erp-grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
/* Flow: the main column's blocks keep one rhythm whatever order a page puts
them in — 20px before paper, 12px before a note that follows paper. */
.erp-main > :is(.erp-note, .erp-sub-note, .erp-empty, .erp-alert, .erp-tbl-wrap, .erp-card,
.erp-grid, .erp-chart, .erp-pager, p, details, form, ul, ol)
+ :is(.erp-card, .erp-tbl-wrap, .erp-grid, .erp-chart, .erp-mods) { margin-block-start: var(--sp-5); }
.erp-main > :is(.erp-tbl-wrap, .erp-card, .erp-grid, .erp-chart)
+ :is(.erp-note, .erp-sub-note, p) { margin-block-start: var(--sp-3); }
.erp-main > :is(.erp-card, .erp-tbl-wrap, .erp-grid) + .erp-empty { margin-block-start: var(--sp-2); }
/* ═══════════ figures (KPI tiles) ═══════════ */
.erp-kpis {
display: grid; gap: var(--sp-4);
grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
margin-block-end: var(--sp-7);
}
/* One or two figures are tiles, not banners across the page. */
.erp-kpis:not([class*="erp-kpis-"]):has(> .erp-kpi:only-child) { grid-template-columns: minmax(0, 22rem); }
.erp-kpis:not([class*="erp-kpis-"]):has(> .erp-kpi:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 22rem)); }
.erp-kpis-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.erp-kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.erp-kpis-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 64rem) {
.erp-kpis-3, .erp-kpis-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 34rem) {
.erp-kpis-2, .erp-kpis-3, .erp-kpis-4 { grid-template-columns: minmax(0, 1fr); }
}
.erp-kpi {
display: flex; flex-direction: column;
min-inline-size: 0;
container-type: inline-size;
padding: var(--sp-5);
background: var(--surface);
border-radius: var(--r-lg);
box-shadow: var(--shadow-card);
}
.erp-kpi-l {
display: block; color: var(--ink-3);
font-size: var(--fs-13); font-weight: 500; line-height: 1.45;
margin-block-end: var(--sp-2);
}
.erp-kpi-v {
display: block;
font-family: var(--font-mono); font-weight: 500;
font-size: var(--fs-28); line-height: 1.2;
font-variant-numeric: tabular-nums;
color: var(--ink);
}
.erp-kpi-n { white-space: nowrap; }
.erp-kpi-n.is-text { white-space: normal; font-family: var(--font-body); }
/* A rial figure can be seventeen characters wide. It is sized from its
tile (container units) so it never overflows and never wraps. */
.erp-kpi-v.is-money, .erp-kpi-v.is-short { font-size: clamp(.95rem, 10.5cqi, var(--fs-24)); color: var(--money); }
.erp-kpi-u {
font-family: var(--font-body); font-weight: 400; font-style: normal;
font-size: var(--fs-12); color: var(--ink-3);
margin-inline-start: var(--sp-1);
}
.erp-kpi-note { font-size: var(--fs-12); color: var(--ink-3); line-height: 1.5; margin-block-start: var(--sp-1); }
.erp-kpi-foot {
display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2);
margin-block-start: var(--sp-2); min-block-size: 1.3rem;
}
.erp-kpi-foot:empty, .erp-kpi-note:empty { display: none; }
.erp-kpi > .erp-spark { margin-block-start: auto; padding-block-start: var(--sp-3); align-self: stretch; max-inline-size: none; }
.erp-kpi .erp-amt-exact { margin-block-start: 2px; }
.erp-kpis.is-tight { gap: var(--sp-3); margin-block-end: var(--sp-3); }
.erp-kpis.is-tight .erp-kpi { padding: var(--sp-3) var(--sp-4); }
.erp-kpis.is-tight .erp-kpi-v { font-size: var(--fs-18); }
.erp-kpis.is-tight .erp-kpi-v.is-money { font-size: clamp(.875rem, 9.5cqi, var(--fs-18)); }
/* Inside a card the figures are cells of the card, not tiles of their own:
no paper, no divider — the gap separates them. */
.erp-card .erp-kpis { gap: var(--sp-6) var(--sp-6); margin-block-end: 0; }
.erp-card .erp-kpi { padding: 0; background: transparent; box-shadow: none; border-radius: 0; }
.erp-cmp-n { display: block; white-space: nowrap; }
.erp-cmp-p { display: block; font-size: var(--fs-11); color: var(--ink-3); line-height: 1.45; white-space: normal; }
/* The change badge: a soft pill in the colour of its meaning. */
.erp-d {
display: inline-flex; align-items: center;
font-size: var(--fs-12); font-family: var(--font-mono); font-weight: 500;
padding: 1px 8px; border-radius: var(--r-pill);
white-space: nowrap; font-variant-numeric: tabular-nums;
background: var(--surface-3); color: var(--ink-3);
}
.erp-d-up { background: var(--pos-tint); color: var(--pos); }
.erp-d-down { background: var(--neg-tint); color: var(--neg); }
.erp-d-partial { background: var(--warn-tint); color: var(--warn); }
.erp-d.is-word {
font-family: var(--font-body); background: none; padding: 0;
white-space: normal; display: inline-block; min-inline-size: 4.25rem;
}
.erp-amt-short { display: block; font-variant-numeric: tabular-nums; white-space: nowrap; }
.erp-amt-exact {
display: block; font-size: var(--fs-12); font-weight: 400; color: var(--ink-3);
font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.5;
}
/* ═══════════ the data grid ═══════════
Paper, rows divided by a hairline (the one place a rule earns its keep:
it carries the eye across a wide row), numeric columns shrink-wrapped so
the slack collects in the text column. */
.erp-tbl-wrap {
inline-size: 100%;
max-inline-size: 100%;
overflow-x: auto;
overscroll-behavior-x: contain;
contain: paint;
border-radius: var(--r-lg);
box-shadow: var(--shadow-card);
/* A grid that scrolls sideways says so: covers travel with the content and
hide shadows pinned to the box. No script; both directions. */
--wrap-bg: var(--surface);
background:
linear-gradient(to right, var(--wrap-bg) 30%, transparent) 0 0 / 32px 100% no-repeat local,
linear-gradient(to left, var(--wrap-bg) 30%, transparent) 100% 0 / 32px 100% no-repeat local,
radial-gradient(farthest-side at 0 50%, rgba(29,23,19,.12), rgba(29,23,19,0)) 0 0 / 14px 100% no-repeat scroll,
radial-gradient(farthest-side at 100% 50%, rgba(29,23,19,.12), rgba(29,23,19,0)) 100% 0 / 14px 100% no-repeat scroll,
var(--wrap-bg);
}
.erp-tbl-wrap + .erp-tbl-wrap, .erp-tbl-wrap + .erp-pager { margin-block-start: var(--sp-4); }
.erp-tbl {
inline-size: 100%;
border-collapse: collapse;
font-size: var(--fs-135);
}
.erp-tbl .n, .erp-tbl .amt,
.erp-tbl th.n, .erp-tbl th.amt { inline-size: 1%; }
.erp-tbl thead th {
padding: var(--sp-3) var(--sp-4);
text-align: start;
font-size: var(--fs-12); font-weight: 500; color: var(--ink-3);
white-space: nowrap;
background: var(--wrap-bg, var(--surface));
border-block-end: 1px solid var(--hair-2);
}
.erp-tbl tbody td, .erp-tbl tbody th {
padding: 0 var(--sp-4);
block-size: var(--h-row);
vertical-align: middle;
border-block-end: 1px solid var(--hair);
}
.erp-tbl tbody tr:last-child > * { border-block-end: 0; }
.erp-tbl th:first-child, .erp-tbl td:first-child { padding-inline-start: var(--sp-5); }
.erp-tbl th:last-child, .erp-tbl td:last-child { padding-inline-end: var(--sp-5); }
/* Row hover is instant: a list is crossed many times a minute. */
@media (hover: hover) and (pointer: fine) {
.erp-tbl tbody tr:hover > * { background: var(--surface-2); }
}
/* Links in a grid are its keys (a document number): ink, weight, no line. */
.erp-tbl a { text-decoration: none; font-weight: 500; }
@media (hover: hover) and (pointer: fine) {
.erp-tbl a:hover { text-decoration: underline; text-decoration-color: var(--brand-strong); }
}
.erp-tbl .amt, .erp-tbl .num, .amt {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
text-align: end;
white-space: nowrap;
min-inline-size: 9ch;
}
.erp-tbl .amt.is-zero { color: var(--ink-4); }
.erp-tbl .n {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
text-align: end;
white-space: nowrap;
}
/* A total is weight on a tinted floor — no heavy rule. */
.erp-tbl tr.is-total > *,
.erp-tbl tfoot td, .erp-tbl tfoot th {
font-weight: 700;
background: var(--surface-2);
border-block: 1px solid var(--hair-2) 0;
border-block-end: 0;
}
.erp-tbl tfoot td, .erp-tbl tfoot th { padding: 0 var(--sp-4); block-size: var(--h-row); }
.erp-tbl tfoot .n, .erp-tbl tfoot .amt { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: end; }
@media (hover: hover) and (pointer: fine) {
.erp-tbl tbody tr.is-total:hover > * { background: var(--surface-2); }
}
/* Nothing is deleted; a voided row stays legible as a state. */
.erp-tbl tr.is-void td { color: var(--ink-3); }
.erp-tbl tr.is-void td:first-child { text-decoration: line-through; }
/* A key/value table: an object's facts. Sized to its content. */
.erp-tbl-kv { inline-size: auto; min-inline-size: 0; max-inline-size: 100%; }
.erp-tbl-wrap:has(> .erp-tbl-kv) { inline-size: max-content; max-inline-size: 100%; }
.erp-tbl-kv th {
color: var(--ink-3); font-weight: 400;
padding-inline-end: var(--sp-7);
white-space: nowrap;
}
.erp-tbl-kv thead th { position: static; }
/* A facts table's column heads («شرح / مقدار») say nothing the rows don't:
kept for screen readers, gone from the page. Keys are muted whether they
are | or | . */
.erp-tbl-kv thead {
position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden;
clip-path: inset(50%); white-space: nowrap;
}
.erp-tbl-kv tbody td:first-child { color: var(--ink-3); padding-inline-end: var(--sp-7); white-space: nowrap; }
.erp-empty {
padding: var(--sp-8) var(--sp-4);
text-align: center; color: var(--ink-3); font-size: var(--fs-14);
}
.erp-empty .erp-btn { margin-inline-start: var(--sp-2); }
/* A cell you may type in: a warm tint whose control IS the cell. */
.erp-tbl td.is-edit { background: #fffaf1; padding: 4px var(--sp-2); }
@media (hover: hover) and (pointer: fine) {
.erp-tbl tbody tr:hover td.is-edit { background: #fff6e6; }
}
.erp-tbl .erp-cell-inp {
inline-size: 100%; min-inline-size: 0; max-inline-size: none;
block-size: 32px;
padding-inline: var(--sp-2);
font: inherit; font-size: var(--fs-13);
font-family: var(--font-mono); font-variant-numeric: tabular-nums;
text-align: end; color: var(--ink);
background: transparent;
border: 1px solid transparent; border-radius: var(--r-sm);
}
.erp-tbl .erp-cell-inp:focus {
outline: none;
background: var(--surface);
border-color: var(--focus);
box-shadow: var(--focus-ring);
}
@media (hover: hover) and (pointer: fine) {
.erp-tbl .erp-cell-inp:hover { background: var(--surface); border-color: var(--edge); }
}
.erp-tbl td.is-edit, .erp-tbl th.is-edit { inline-size: 1%; }
.erp-tbl th.is-edit { text-align: end; }
.erp-tbl .erp-inp, .erp-tbl .erp-sel { min-inline-size: 16ch; }
/* Two inline forms in one cell («بهروزرسانی», «حذف») keep their distance. */
.erp-tbl .erp-inline + .erp-inline { margin-inline-start: var(--sp-3); }
.erp-tbl td:has(> .erp-inline) { white-space: nowrap; }
.erp-acc-lvl { display: inline-block; }
.erp-acc-lvl.lvl-0 { padding-inline-start: 0; font-weight: 700; }
.erp-acc-lvl.lvl-1 { padding-inline-start: var(--sp-5); }
.erp-acc-lvl.lvl-2 { padding-inline-start: var(--sp-8); }
.erp-gl-future td { color: var(--ink-3); }
.erp-diff { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
/* ═══════════ charts ═══════════
lib/chart.php draws inline SVG and names its marks by class; every colour
lives here. The canvas is LTR geometry. */
.erp-chart { inline-size: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.erp-chart > svg { max-inline-size: 100%; block-size: auto; }
.erp-spark { inline-size: 100%; max-inline-size: 220px; block-size: auto; margin-block-start: var(--sp-2); }
.erp-chart-line, .erp-chart-bar, .erp-chart-donut,
.erp-chart-gauge, .erp-chart-empty, .erp-spark, .erp-minibar { direction: ltr; }
.erp-minibar { display: inline-block; vertical-align: middle; max-inline-size: 100%; block-size: auto; }
.erp-s1 { --c: var(--s1); } .erp-s2 { --c: var(--s2); }
.erp-s3 { --c: var(--s3); } .erp-s4 { --c: var(--s4); }
.erp-s5 { --c: var(--s5); } .erp-s6 { --c: var(--s6); }
.erp-s7 { --c: var(--s7); } .erp-s8 { --c: var(--s8); }
.erp-ch-f { fill: var(--c, currentColor); }
.erp-ch-s { stroke: var(--c, currentColor); }
.erp-ch-grid { stroke: var(--chart-grid); }
.erp-ch-axis { stroke: var(--chart-axis); }
.erp-ch-tx { fill: var(--chart-ink); }
.erp-ch-title { fill: var(--chart-title); }
.erp-ch-strong{ fill: var(--chart-strong); }
.erp-ch-track { stroke: var(--gauge-track); }
.erp-ch-gauge { stroke: var(--gauge); }
.erp-ch-marker{ fill: var(--surface); stroke: var(--chart-strong); }
.erp-ch-spark.is-pos { stroke: var(--spark-pos); }
.erp-ch-spark.is-neg { stroke: var(--spark-neg); }
.erp-ch-area.is-pos { fill: var(--area-pos); }
.erp-ch-area.is-neg { fill: var(--area-neg); }
.erp-ch-bar.is-pos { fill: var(--pos-fill); }
.erp-ch-bar.is-neg { fill: var(--neg-fill); }
.erp-ch-bar.is-flat { fill: var(--ink-4); }
.erp-ch-tbar { fill: var(--chart-grid); }
.erp-chart-empty text { fill: var(--chart-ink); }
/* ═══════════ status pills ═══════════
A soft pill in the state's own tint, its word, and a dot. */
.erp-pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 2px 10px;
border-radius: var(--r-pill);
font-size: var(--fs-12); font-weight: 500; line-height: 1.5;
white-space: nowrap;
background: var(--surface-3); color: var(--ink-2);
}
.erp-pill::before {
content: ""; flex: none;
inline-size: 6px; block-size: 6px; border-radius: 50%;
background: var(--ink-3);
}
.erp-pill.is-go { background: var(--pos-tint); color: var(--pos); }
.erp-pill.is-go::before { background: var(--pos-fill); }
.erp-pill.is-now { background: var(--surface-3); color: var(--ink); }
.erp-pill.is-now::before { background: var(--ink); }
.erp-pill.is-wait { background: var(--warn-tint); color: var(--warn); }
.erp-pill.is-wait::before { background: var(--warn-fill); }
.erp-pill.is-stop { background: var(--neg-tint); color: var(--neg); }
.erp-pill.is-stop::before { background: var(--neg-fill); }
.erp-pill.is-off { background: transparent; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--hair-2); }
.erp-pill.is-off::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-4); }
/* ═══════════ messages ═══════════ */
.erp-alert {
display: block;
padding: var(--sp-3) var(--sp-4);
margin-block: var(--sp-4);
background: var(--warn-tint);
color: var(--warn);
border-radius: var(--r-lg);
font-size: var(--fs-14); line-height: 1.7;
}
.erp-alert .erp-pill { margin-inline-end: var(--sp-1); }
/* The flash after a redirect. It arrives — opacity and 6px, ease-out —
because a message that is simply there is easy to read past. */
.erp-flash {
display: flex; align-items: center; gap: var(--sp-3);
padding: var(--sp-3) var(--sp-4);
margin-block-end: var(--sp-5);
border-radius: var(--r-lg);
font-size: var(--fs-14); font-weight: 500;
opacity: 1; translate: 0 0;
transition: opacity var(--dur-base) var(--ease-out), translate var(--dur-base) var(--ease-out);
}
@starting-style { .erp-flash { opacity: 0; translate: 0 -6px; } }
.erp-flash::before {
content: ""; flex: none;
inline-size: 8px; block-size: 8px; border-radius: 50%;
}
.erp-flash.is-ok { background: var(--pos-tint); color: var(--pos); }
.erp-flash.is-ok::before { background: var(--pos-fill); box-shadow: 0 0 0 4px rgba(42,157,99,.16); }
.erp-flash.is-err { background: var(--neg-tint); color: var(--neg); }
.erp-flash.is-err::before { background: var(--neg-fill); box-shadow: 0 0 0 4px rgba(214,41,63,.14); }
/* The one-time pairing code (settings/devices.php). It is shown exactly once,
on the page the POST lands on, so it arrives like the flash above it does.
One press selects all of it: it is copied, never edited. Latin only, so the
tracking is allowed. */
.erp-paircode-card {
opacity: 1; translate: 0 0;
transition: opacity var(--dur-base) var(--ease-out), translate var(--dur-base) var(--ease-out);
}
@starting-style { .erp-paircode-card { opacity: 0; translate: 0 -6px; } }
.erp-paircode {
margin-block: var(--sp-2) var(--sp-4);
padding: var(--sp-4) var(--sp-5);
border-radius: var(--r-lg);
background: var(--surface-2); color: var(--ink);
font-family: var(--font-mono); font-size: var(--fs-28); font-weight: 700; line-height: 1.2;
letter-spacing: .08em; text-align: center;
-webkit-user-select: all; user-select: all;
}
.erp-note { color: var(--ink-2); font-size: var(--fs-14); line-height: 1.75; max-inline-size: 82ch; }
.erp-note + .erp-note { margin-block-start: var(--sp-2); }
/* A note inside a grid cell is a caption of that cell. */
.erp-tbl .erp-note { display: block; font-size: var(--fs-12); line-height: 1.55; color: var(--ink-3); max-inline-size: 48ch; }
.erp-sub-note { color: var(--ink-3); font-size: var(--fs-13); line-height: 1.65; }
.erp-field-note{ display: block; color: var(--ink-3); font-size: var(--fs-12); line-height: 1.55; margin-block-start: 6px; }
.erp-field-err { display: block; color: var(--neg); font-size: var(--fs-12); font-weight: 500; margin-block-start: 6px; }
.erp-field.is-bad .erp-inp,
.erp-field.is-bad .erp-sel,
.erp-field.is-bad .erp-textarea { border-color: var(--neg); }
.erp-field.is-bad .erp-lbl { color: var(--neg); }
/* ═══════════ controls ═══════════
One height for every control on a row. White paper on a soft edge; focus
is an orange ring, instant. */
.erp-inp, .erp-sel, .erp-textarea {
font-family: inherit; font-size: var(--fs-14); color: var(--ink);
background: var(--surface);
border: 1px solid var(--edge);
border-radius: var(--r-md);
box-shadow: var(--shadow-xs);
padding: 0 var(--sp-3);
block-size: var(--h-ctl);
inline-size: 100%;
}
.erp-inp::placeholder, .erp-textarea::placeholder { color: #8f857a; }
::placeholder { unicode-bidi: plaintext; }
@media (hover: hover) and (pointer: fine) {
.erp-inp:hover, .erp-sel:hover, .erp-textarea:hover { border-color: var(--edge-hover); }
}
.erp-inp:focus, .erp-sel:focus, .erp-textarea:focus {
outline: none;
border-color: var(--focus);
box-shadow: var(--focus-ring);
}
.erp-inp:disabled, .erp-sel:disabled, .erp-inp[readonly] {
background: var(--surface-2); color: var(--ink-3);
box-shadow: none;
}
.erp-inp:disabled, .erp-sel:disabled { cursor: not-allowed; }
.erp-inp.ltr, .erp-inp-sm.ltr, .erp-inp-xs.ltr { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.erp-inp.ltr, .erp-inp-sm.ltr { max-inline-size: 26ch; }
.erp-inp.ltr, .erp-inp-sm.ltr, .erp-inp-xs.ltr { min-inline-size: 14ch; }
.erp-jdate { max-inline-size: 16ch; }
.erp-inp-sm { block-size: var(--h-ctl-sm); font-size: var(--fs-13); padding-inline: 10px; border-radius: var(--r-sm); }
.erp-inp-xs { block-size: var(--h-ctl-xs); font-size: var(--fs-13); padding-inline: var(--sp-2); inline-size: auto; border-radius: var(--r-sm); }
/* One chevron. Physical `left`, deliberately: background-position has no
logical form, and this app is RTL. */
:root {
--chev-img: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2010%206'%20fill='none'%20stroke='%236f665d'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M1%201l4%204%204-4'/%3E%3C/svg%3E");
}
.erp-sel {
appearance: none;
padding-inline-end: var(--sp-7);
background-image: var(--chev-img);
background-position: left var(--sp-3) center;
background-size: 10px 6px;
background-repeat: no-repeat;
cursor: pointer;
}
.erp-sel:disabled { background-image: none; }
/* The machine-format box (CSV paste): LTR and unwrapped. */
.erp-textarea {
block-size: auto; min-block-size: 9rem;
padding: var(--sp-3);
font-family: var(--font-mono); font-size: var(--fs-13); line-height: 1.6;
direction: ltr; text-align: left; white-space: pre; overflow: auto;
}
textarea.erp-inp, textarea.erp-inp-sm, textarea.erp-inp-xs {
block-size: auto;
padding-block: 10px;
line-height: 1.7;
resize: vertical;
}
input[type="checkbox"], input[type="radio"] {
inline-size: 16px; block-size: 16px;
accent-color: var(--ink);
cursor: pointer; flex: none;
}
/* ── buttons ────────────────────────────────────────────────────────────
Primary is ink with cream type — the logo's own pair. It answers the
press: scale .97 in 160ms, ease-out. */
.erp-btn {
display: inline-flex; align-items: center; justify-content: center;
gap: var(--sp-2);
block-size: var(--h-ctl);
padding-inline: 18px;
border-radius: var(--r-md);
border: 0;
background: var(--ink); color: var(--cream);
box-shadow: var(--shadow-btn);
font-family: inherit; font-size: var(--fs-14); font-weight: 500; line-height: 1;
cursor: pointer; white-space: nowrap; text-decoration: none;
transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease,
box-shadow var(--dur-fast) ease, transform var(--dur-press) var(--ease-out);
}
.erp-btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
.erp-btn:hover { background: #352d27; color: var(--cream); }
}
.erp-btn[disabled], .erp-btn:disabled {
background: var(--surface-3); color: var(--ink-3);
box-shadow: none; cursor: not-allowed; transform: none;
}
.erp-btn-quiet {
background: var(--surface); color: var(--ink);
box-shadow: var(--ring-quiet);
}
@media (hover: hover) and (pointer: fine) {
.erp-btn-quiet:hover { background: var(--surface-2); color: var(--ink); }
}
.erp-btn-quiet:active { background: var(--surface-3); }
.erp-btn-sm { block-size: var(--h-ctl-sm); padding-inline: 14px; font-size: var(--fs-13); border-radius: var(--r-sm); }
.erp-btn-full { inline-size: 100%; }
/* Consequence is a second axis: an irreversible action is red, and says so
in words too. Never the primary. */
.erp-btn-danger { background: var(--neg); color: #fff; }
.erp-btn-danger:active { background: var(--neg-press); }
@media (hover: hover) and (pointer: fine) {
.erp-btn-danger:hover { background: var(--neg-hover); color: #fff; }
}
.erp-btn-quiet.erp-btn-danger { background: var(--surface); color: var(--neg); box-shadow: 0 0 0 1px rgba(180,21,47,.28), var(--shadow-xs); }
@media (hover: hover) and (pointer: fine) {
.erp-btn-quiet.erp-btn-danger:hover { background: var(--neg-tint); color: var(--neg); }
}
/* ── the two-press confirm ──────────────────────────────────────────────
js/erp.js stacks the label and the question in one grid cell so the
button never changes width; arming cross-fades them (opacity + 2px blur)
and turns it red with a ring: colour, words and shape. */
.erp-btn-stack { display: inline-grid; justify-items: center; }
.erp-btn-stack > span {
grid-area: 1 / 1;
transition: opacity var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out);
}
.erp-btn-q { opacity: 0; filter: blur(2px); }
.erp-btn.is-armed .erp-btn-lbl { opacity: 0; filter: blur(2px); }
.erp-btn.is-armed .erp-btn-q { opacity: 1; filter: none; }
.erp-btn.is-armed,
.erp-btn-quiet.is-armed,
.erp-btn-danger.is-armed {
background: var(--neg); color: #fff;
box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px rgba(180,21,47,.45);
}
@media (hover: hover) and (pointer: fine) {
.erp-btn.is-armed:hover { background: var(--neg-hover); color: #fff; }
}
/* A control that is a link by nature («جزئیات», «همه», «پاککردن»). */
.erp-linkbtn {
background: none; border: 0; padding: 0;
color: var(--ink-2); font: inherit; font-size: var(--fs-13); font-weight: 500;
cursor: pointer;
text-decoration: underline; text-decoration-color: rgba(29,23,19,.22); text-underline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
.erp-linkbtn:hover { color: var(--ink); text-decoration-color: currentColor; }
}
.erp-linkbtn.is-armed { color: var(--neg); text-decoration-color: currentColor; }
.erp-inline { display: inline-flex; align-items: center; gap: var(--sp-2); }
/* ── forms ───────────────────────────────────────────────────────────────
Fields flow (auto-fill, so a field is a field's width wherever it is);
`.erp-field-row` keeps a set together; everything else owns the row. */
.erp-form {
--fld-min: 15rem;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(var(--fld-min), 100%), 1fr));
gap: var(--sp-5) var(--sp-5);
align-items: start;
}
.erp-field { display: block; min-inline-size: 0; }
.erp-lbl {
display: block; margin-block-end: var(--sp-2);
font-size: var(--fs-13); font-weight: 500; color: var(--ink-2);
line-height: 1.45;
}
.erp-form > * { grid-column: 1 / -1; }
.erp-form > :where(.erp-field) { grid-column: auto; }
.erp-field:has(.erp-textarea),
.erp-field:has(textarea),
.erp-field.is-wide { grid-column: 1 / -1; }
.erp-field.is-wide > .erp-inp,
.erp-field:has(.erp-textarea) > .erp-textarea,
.erp-field:has(textarea) > textarea { max-inline-size: 72rem; }
.erp-field-row {
display: grid; gap: var(--sp-4) var(--sp-5);
grid-template-columns: repeat(auto-fill, minmax(min(var(--fld-min, 15rem), 100%), 1fr));
align-items: start;
}
.erp-form-actions {
display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
margin-block-start: var(--sp-3);
}
.erp-form > .erp-form-actions { margin-block-start: var(--sp-2); }
.erp-form > .erp-field-row .erp-inp.ltr,
.erp-form > .erp-field-row .erp-jdate { max-inline-size: 16ch; }
/* A form's own heading inside a card. */
.erp-form h3, .erp-form h4 { font-size: var(--fs-15); margin-block-start: var(--sp-2); }
.erp-check, .erp-checks label, .erp-lbl:has(input[type="checkbox"]) {
display: inline-flex; align-items: center; gap: var(--sp-2);
flex-wrap: wrap; max-inline-size: 100%;
font-size: var(--fs-14); font-weight: 400; color: var(--ink); cursor: pointer;
}
.erp-checks { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); }
.erp-jdate-wrap { display: block; }
.erp-jdate { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: start; }
.erp-jdate-note { display: block; font-size: var(--fs-12); color: var(--ink-3); margin-block-start: 4px; }
/* ── filter bars and chips ───────────────────────────────────────────────
A filter band belongs to the grid under it: no box and no rule — just
the controls in a row, and space under them. */
.erp-rangeform, .erp-rangebar {
display: flex; flex-wrap: wrap; align-items: flex-end;
gap: var(--sp-3);
margin-block-end: var(--sp-6);
}
.erp-rangebar {
--jnote: 1.05rem;
align-items: center;
row-gap: var(--sp-4);
column-gap: var(--sp-5);
}
.erp-main > .erp-rangebar:first-child,
.erp-h + .erp-rangebar { margin-block-start: 0; }
.erp-rangeform > *, .erp-rangebar > * { flex: 0 1 auto; min-inline-size: 0; }
.erp-rangebar > .erp-rangeform { flex: 1 1 22rem; margin: 0; }
.erp-rangebar > .erp-chips-row { flex: 0 1 auto; margin-inline-start: 0; }
.erp-rangebar .erp-form { gap: var(--sp-3); }
.erp-rangeform .erp-inp, .erp-rangeform .erp-sel,
.erp-rangebar .erp-inp, .erp-rangebar .erp-sel { inline-size: auto; min-inline-size: 11rem; max-inline-size: 17rem; }
.erp-rangeform .erp-inp.ltr, .erp-rangebar .erp-inp.ltr,
.erp-rangeform .erp-jdate, .erp-rangebar .erp-jdate { min-inline-size: 11ch; max-inline-size: 14ch; }
.erp-rangeform .erp-form-actions, .erp-rangebar .erp-form-actions { margin-block-start: 0; }
.erp-rangeform .erp-field-row, .erp-rangebar .erp-field-row {
display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3);
}
.erp-rangeform .erp-chips-row, .erp-rangebar .erp-chips-row { margin-inline-start: auto; }
/* In a band, a labelled field is ONE control: the label sits inside the
field's own box, before the value («از تاریخ ۱۴۰۵/۰۶/۰۱»), so every
control on the band is the same 38px and the row lines up. The weekday
under a date is a typing aid for forms; a filter shows it on hover. */
.erp-rangebar .erp-field, .erp-rangeform .erp-field {
display: flex; align-items: center;
min-inline-size: 0;
block-size: var(--h-ctl);
padding-inline-start: var(--sp-3);
background: var(--surface);
border: 1px solid var(--edge);
border-radius: var(--r-md);
box-shadow: var(--shadow-xs);
cursor: text;
}
@media (hover: hover) and (pointer: fine) {
.erp-rangebar .erp-field:hover, .erp-rangeform .erp-field:hover { border-color: var(--edge-hover); }
}
.erp-rangebar .erp-field:focus-within, .erp-rangeform .erp-field:focus-within {
border-color: var(--focus); box-shadow: var(--focus-ring);
}
.erp-rangebar .erp-field .erp-lbl, .erp-rangeform .erp-field .erp-lbl {
flex: none; margin: 0; padding-inline-end: var(--sp-2);
font-size: var(--fs-12); color: var(--ink-3); white-space: nowrap;
cursor: inherit;
}
.erp-rangebar .erp-field .erp-jdate-wrap, .erp-rangeform .erp-field .erp-jdate-wrap { flex: 1 1 auto; min-inline-size: 0; }
.erp-rangebar .erp-field :is(.erp-inp, .erp-sel), .erp-rangeform .erp-field :is(.erp-inp, .erp-sel) {
block-size: calc(var(--h-ctl) - 2px);
min-inline-size: 0;
border: 0; box-shadow: none; background-color: transparent;
padding-inline-start: 0;
}
.erp-rangebar .erp-field .erp-jdate, .erp-rangeform .erp-field .erp-jdate { inline-size: calc(11ch + var(--sp-3)); min-inline-size: calc(11ch + var(--sp-3)); max-inline-size: none; padding-inline-end: var(--sp-3); }
.erp-rangebar .erp-field .erp-sel, .erp-rangeform .erp-field .erp-sel { min-inline-size: 9rem; }
.erp-rangebar .erp-field :is(.erp-inp, .erp-sel):focus, .erp-rangeform .erp-field :is(.erp-inp, .erp-sel):focus { box-shadow: none; }
.erp-rangebar .erp-jdate-note, .erp-rangeform .erp-jdate-note { display: none; }
.erp-rangebar:has(.erp-jdate-note), .erp-rangeform:has(.erp-jdate-note),
.erp-rangebar .erp-field-row:has(.erp-jdate-note),
.erp-rangeform .erp-field-row:has(.erp-jdate-note) { row-gap: var(--sp-3); }
.erp-rangebar .erp-btn-sm, .erp-rangeform .erp-btn-sm { block-size: var(--h-ctl); padding-inline: var(--sp-4); }
/* The free-text box leads the band and carries a magnifier. */
.erp-rangebar > input[type="search"], .erp-rangeform > input[type="search"] {
min-inline-size: 14rem;
padding-inline-start: 36px;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2020%2020'%20fill='none'%20stroke='%236f665d'%20stroke-width='1.8'%20stroke-linecap='round'%3E%3Ccircle%20cx='9'%20cy='9'%20r='5.4'/%3E%3Cpath%20d='M13.2%2013.2%2017%2017'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 16px 16px;
background-position: right 12px center;
}
.erp-rangebar .erp-check, .erp-rangeform .erp-check { min-block-size: var(--h-ctl); }
/* A band at the foot of a card (e.g. «change the customer» under the
customer's facts) sits on a tinted strip that runs to the card's edges. */
.erp-card > .erp-card-foot {
margin: var(--sp-5) calc(var(--card-pad) * -1) 0;
padding: var(--sp-4) var(--card-pad);
background: var(--surface-2);
}
.erp-card > .erp-card-foot:last-child { margin-block-end: calc(var(--card-pad) * -1); border-end-start-radius: var(--r-xl); border-end-end-radius: var(--r-xl); }
.erp-card-foot .erp-sug { flex: 1 1 22rem; max-inline-size: 32rem; }
.erp-card-foot .erp-sug .erp-inp { inline-size: 100%; max-inline-size: none; }
/* Inside a card the band is part of the card. */
.erp-card .erp-rangeform, .erp-card .erp-rangebar { margin-block-end: var(--sp-4); }
/* Chips sit in a soft track, like a segmented control: the chosen one is
paper lifted out of it. */
.erp-chips, .erp-chips-row { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.erp-rangebar > .erp-chips-row, .erp-chips {
padding: 3px;
border-radius: var(--r-md);
background: var(--wash);
}
.erp-chip {
display: inline-flex; align-items: center;
block-size: 30px;
padding-inline: 12px;
border-radius: var(--r-sm);
border: 0;
background: transparent; color: var(--ink-2);
font-family: inherit; font-size: var(--fs-13); font-weight: 500;
text-decoration: none; cursor: pointer; white-space: nowrap;
transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease,
box-shadow var(--dur-fast) ease, transform var(--dur-press) var(--ease-out);
}
.erp-chip:active { transform: scale(.96); }
.erp-chip.is-on { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px rgba(29,23,19,.06), 0 1px 3px rgba(29,23,19,.1); }
@media (hover: hover) and (pointer: fine) {
.erp-chip:hover { color: var(--ink); background: rgba(29,23,19,.05); }
.erp-chip.is-on:hover { background: var(--surface); }
}
.erp-pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-block-start: var(--sp-4); }
.erp-pager-n { font-family: var(--font-mono); font-size: var(--fs-13); color: var(--ink-3); font-variant-numeric: tabular-nums; }
/* ═══════════ the line editor ═══════════ */
.erp-lines { inline-size: 100%; border-collapse: collapse; font-size: var(--fs-135); }
.erp-lines thead th {
padding: var(--sp-3) var(--sp-2);
text-align: start; white-space: nowrap;
font-size: var(--fs-12); font-weight: 500; color: var(--ink-3);
background: var(--wrap-bg, var(--surface));
border-block-end: 1px solid var(--hair-2);
}
.erp-lines tbody td {
padding: 6px var(--sp-1);
border-block-end: 1px solid var(--hair);
vertical-align: middle;
}
.erp-lines tbody tr:last-child td { border-block-end: 0; }
@media (hover: hover) and (pointer: fine) {
.erp-lines tbody tr:hover > * { background: var(--surface-2); }
}
.erp-lines .n {
font-family: var(--font-mono); font-size: var(--fs-12); color: var(--ink-3);
text-align: end; inline-size: 1%; padding-inline: var(--sp-2);
}
.erp-lines .erp-inp, .erp-lines .erp-sel { inline-size: 100%; box-shadow: none; }
/* The till reads at arm's length: a bigger step for this one screen. */
body.is-till .erp-lines { font-size: var(--fs-15); }
body.is-till .erp-lines td,
body.is-till .erp-lines th { block-size: 48px; }
body.is-till .erp-lines .erp-cell-inp,
body.is-till .erp-lines .erp-inp,
body.is-till .erp-lines .erp-inp-sm,
body.is-till .erp-lines .erp-inp-xs { block-size: 40px; font-size: var(--fs-15); }
body.is-till .erp-tbl tfoot .amt { font-size: var(--fs-18); font-weight: 700; }
/* ── the barcode / item scan box ──────────────────────────────────────── */
.erp-scan-box {
padding: var(--sp-4) var(--sp-5);
background: var(--surface);
border-radius: var(--r-xl);
box-shadow: var(--shadow-card);
margin-block-end: var(--sp-5);
}
.erp-scan-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.erp-scan-box > .erp-scan-form { inline-size: 100%; min-inline-size: 0; }
.erp-scan-form .erp-sug { flex: 1 1 24rem; max-inline-size: 56rem; }
.erp-scan-form .erp-sug::before {
content: "";
position: absolute; z-index: 1;
inset-block-start: 50%; transform: translateY(-50%);
inset-inline-start: 14px;
inline-size: 18px; block-size: 18px;
pointer-events: none;
background-color: var(--ink-3);
-webkit-mask: var(--icon-search) center / contain no-repeat;
mask: var(--icon-search) center / contain no-repeat;
}
.erp-scan-inp {
block-size: 48px;
font-size: var(--fs-16);
border-radius: var(--r-lg);
padding-inline-start: calc(14px + 18px + var(--sp-3));
}
.erp-scan-form > .erp-scan-inp { flex: 1 1 24rem; max-inline-size: 56rem; padding-inline-start: var(--sp-4); }
.erp-scan-btn { flex: none; block-size: 48px; padding-inline: var(--sp-6); font-size: var(--fs-15); border-radius: var(--r-lg); }
.erp-scan-keys {
display: flex; flex-wrap: wrap; align-items: center;
gap: var(--sp-2) var(--sp-5);
margin-block-start: var(--sp-3);
font-size: var(--fs-12); color: var(--ink-3);
}
.erp-scan-wh { margin-inline-start: auto; font-size: var(--fs-13); color: var(--ink-3); white-space: nowrap; }
.erp-scan-wh b { color: var(--ink); font-weight: 500; }
kbd, .erp-scan-keys kbd, .erp-pal-foot kbd {
font-family: var(--font-mono); font-size: var(--fs-11); font-weight: 500;
padding: 1px 6px; margin-inline-end: 4px;
border-radius: var(--r-xs);
background: var(--surface); color: var(--ink-2);
box-shadow: 0 0 0 1px var(--hair-2), 0 1px 0 var(--hair-2);
}
/* ═══════════ the command palette (F3) ═══════════
A |