/* ==========================================================================
BEKHERHA (بخيرها) — shared web design system
Link on every page: )
.card__header > .card__title [+ .card__subtitle] + actions
.card__body, .card__footer
Stat tile
.stat-grid > .stat > .stat__icon, .stat__value, .stat__label,
.stat__delta (.stat__delta--up / --down)
.stat--accent (solid green tile)
Bars (orders by hour)
.bars > .bars__col[style="--value:72"] > .bars__value, .bars__bar, .bars__label
(--value is 0–100, percent of the tallest bar)
Buttons ( or )
.btn + .btn--primary | .btn--secondary | .btn--ghost | .btn--danger |
.btn--danger-ghost
sizes: .btn--sm (34px), default (44px), .btn--lg (52px)
.btn--icon (square, icon only; give it aria-label), .btn--block (full width)
.is-loading (spinner, disables clicks), [disabled] / [aria-disabled="true"]
.btn-row (wrapping row of buttons), .btn-row--end
.link (inline text link)
Forms
.field > label.label (+ .label__hint), control, .help, .error
.field.is-invalid (red border + shows .error styling)
.input, .select, .textarea (bare input/select/textarea inside .field are
styled the same automatically)
.input--sm, .input-group (control with leading .input-group__icon)
label.check > input[type=checkbox|radio] + text (all checkboxes/radios
are styled globally)
input.switch[type=checkbox] (toggle); wrap as label.check for a caption
.form-grid (responsive 2 columns; .form-grid--3), .field--full spans all
.form-actions (button row at the end of a form)
.choice-grid > label.choice > input + .choice__body (selectable card)
Toolbar / filters
.toolbar > controls ... , .toolbar__spacer (pushes the rest to the end)
.search (input wrapper with magnifier): div.search > input.input
Tabs
.tabs > button.tab (.is-active or aria-selected="true") [+ .tab__count]
.segmented > button.segmented__item (.is-active) (pill switcher)
Pill / badge
.pill + .pill--success | --warning | --danger | --info | --neutral | --primary
.pill--dot (leading status dot), .pill--lg, .pill--live (pulsing dot)
.badge (small count bubble), .badge--danger
.tag (quiet outlined label)
Table
.table-wrap (scrolls horizontally) > table.table
th.num / td.num (end aligned, tabular), .table__actions (button cell),
.table--compact, tr.is-selected, .cell-title + .cell-meta (two-line cell)
List rows
.list > .list__row (div, a or button) > .list__media, .list__body
(.list__title, .list__meta), .list__end
.thumb (48px rounded image; .thumb--lg 72px), .avatar (initials circle)
Key/value
dl.kv > div.kv__row > dt + dd (order summary, totals)
.kv__row--total (bold, top border)
Order progress
ol.timeline > li.timeline__step (.is-done | .is-current | .is-warning)
> .timeline__title, .timeline__meta, .timeline__time
.pickup-code (large spaced numeric code)
Feedback
.empty > .empty__icon, .empty__title, .empty__text, actions
.notice + .notice--success | --warning | --danger | --info
> .notice__icon, .notice__body (.notice__title + text), actions
.toast-stack (fixed corner) > .toast (+ .toast--success | --danger | --warning)
.skeleton (.skeleton--text | --title | --block | --circle), .spinner (.spinner--lg)
.loading (centred spinner + label block)
Overlays
.modal (backdrop; add .is-open to show) > .modal__panel
> .modal__header (.modal__title + button.modal__close), .modal__body,
.modal__footer
.modal__panel--sm | --lg ; on phones the panel docks to the bottom as a sheet
.modal--drawer : panel slides in from the inline end, full height
Native gets the same panel look.
body.has-overlay stops the page scrolling behind an open modal.
Pagination
nav.pagination > a/button.pagination__item (.is-active, [disabled]),
.pagination__gap, .pagination__info
Auth pages
.auth > .auth__card > .auth__brand(.brand), h1.auth__title,
p.auth__subtitle, form..., .auth__footer
.auth__aside : optional dark-green brand panel beside the card on wide screens
.auth__brand--wide / --narrow : brand shown with / without the aside
Utilities
.stack (vertical gap 16; .stack--sm 8, .stack--lg 24)
.row (horizontal, centred, gap 12, wraps; .row--between, .row--end, .row--nowrap)
.grid-2 / .grid-3 / .grid-4 (responsive equal columns), .grid-auto
.split (main + 360px side column, stacks under 1024px)
.muted, .faint, .strong, .text-sm, .text-xs, .text-lg, .num (tabular),
.mono, .truncate, .nowrap, .text-center, .text-end, .price (green, bold)
.text-success, .text-warning, .text-danger
.divider (hr), .sr-only, .hide-phone (<=640px), .only-phone
.mt-0 .mt-2 .mt-4 .mt-6 / .mb-0 .mb-2 .mb-4 .mb-6
========================================================================== */
/* ---------- Tokens ------------------------------------------------------- */
:root {
color-scheme: light;
--color-bg: #FFF8EE;
--color-surface: #FFFFFF;
--color-surface-2: #FAF1E1;
--color-surface-3: #EFE2CB;
--color-border: #EADFCB;
--color-border-strong: #CDBEA4;
--color-ink: #10231A;
--color-muted: #5A6056;
--color-faint: #878273;
--color-primary: #157A3C;
--color-primary-hover: #0B4A2F;
--color-on-primary: #FFFFFF;
--color-primary-soft: #E4F1DB;
--color-primary-text: #0F5C2C;
--color-warning: #955400;
--color-warning-soft: #FFEFC2;
--color-danger: #B3261E;
--color-danger-soft: #FDE8E4;
--color-on-danger: #FFFFFF;
--color-info: #1B5E9E;
--color-info-soft: #E3EEF9;
--color-neutral: #4C5247;
--color-neutral-soft: #F1E8D7;
--color-brand-dark: #0B4A2F;
--color-on-brand-dark: #FFFFFF;
--color-accent-lime: #8CC63F;
--color-accent-lime-soft: #EDF6DC;
--color-accent-yellow: #F9C22E;
--color-accent-yellow-soft: #FEF0C3;
--color-accent-coral: #FF6B6B;
--color-focus: rgba(21, 122, 60, 0.38);
--color-overlay: rgba(11, 40, 26, 0.5);
--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
"Noto Sans", "Noto Sans Arabic", "Geeza Pro", "Segoe UI Arabic", Tahoma,
Arial, sans-serif;
--font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
"Liberation Mono", monospace;
--text-xs: 0.75rem;
--text-sm: 0.8125rem;
--text-base: 0.9375rem;
--text-md: 1.0625rem;
--text-lg: 1.25rem;
--text-xl: 1.5rem;
--text-2xl: 1.875rem;
--text-3xl: 2.375rem;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--radius-sm: 10px;
--radius-md: 14px;
--radius-lg: 18px;
--radius-xl: 24px;
--radius-pill: 999px;
--shadow-sm: 0 1px 2px rgba(58, 44, 16, 0.06);
--shadow-md: 0 6px 20px -8px rgba(58, 44, 16, 0.18);
--shadow-lg: 0 24px 60px -20px rgba(40, 32, 12, 0.32);
--sidebar-width: 264px;
--topbar-height: 64px;
--content-max: 1240px;
--control-height: 44px;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--color-bg: #061C13;
--color-surface: #0A2A1C;
--color-surface-2: #0E3524;
--color-surface-3: #16452F;
--color-border: #17402C;
--color-border-strong: #2B6248;
--color-ink: #F2F8F0;
--color-muted: #A9C2B2;
--color-faint: #7A9585;
--color-primary: #4FC777;
--color-primary-hover: #72D692;
--color-on-primary: #04200E;
--color-primary-soft: #11402A;
--color-primary-text: #7FE0A1;
--color-warning: #F6C667;
--color-warning-soft: #3D2E0B;
--color-danger: #FF9288;
--color-danger-soft: #451A17;
--color-on-danger: #2B0906;
--color-info: #93C1F5;
--color-info-soft: #12304A;
--color-neutral: #B9CCBF;
--color-neutral-soft: #123024;
--color-brand-dark: #0B4A2F;
--color-on-brand-dark: #FFFFFF;
--color-accent-lime: #8CC63F;
--color-accent-lime-soft: #1F4A1F;
--color-accent-yellow: #F9C22E;
--color-accent-yellow-soft: #453A10;
--color-accent-coral: #FF6B6B;
--color-focus: rgba(79, 199, 119, 0.5);
--color-overlay: rgba(2, 12, 8, 0.68);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
--shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.6);
--shadow-lg: 0 28px 70px -20px rgba(0, 0, 0, 0.8);
}
}
:root[data-theme="dark"] {
color-scheme: dark;
--color-bg: #061C13;
--color-surface: #0A2A1C;
--color-surface-2: #0E3524;
--color-surface-3: #16452F;
--color-border: #17402C;
--color-border-strong: #2B6248;
--color-ink: #F2F8F0;
--color-muted: #A9C2B2;
--color-faint: #7A9585;
--color-primary: #4FC777;
--color-primary-hover: #72D692;
--color-on-primary: #04200E;
--color-primary-soft: #11402A;
--color-primary-text: #7FE0A1;
--color-warning: #F6C667;
--color-warning-soft: #3D2E0B;
--color-danger: #FF9288;
--color-danger-soft: #451A17;
--color-on-danger: #2B0906;
--color-info: #93C1F5;
--color-info-soft: #12304A;
--color-neutral: #B9CCBF;
--color-neutral-soft: #123024;
--color-brand-dark: #0B4A2F;
--color-on-brand-dark: #FFFFFF;
--color-accent-lime: #8CC63F;
--color-accent-lime-soft: #1F4A1F;
--color-accent-yellow: #F9C22E;
--color-accent-yellow-soft: #453A10;
--color-accent-coral: #FF6B6B;
--color-focus: rgba(79, 199, 119, 0.5);
--color-overlay: rgba(2, 12, 8, 0.68);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
--shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.6);
--shadow-lg: 0 28px 70px -20px rgba(0, 0, 0, 0.8);
}
/* ---------- Base / reset ------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-padding-top: calc(var(--topbar-height) + var(--space-4));
}
body {
margin: 0;
min-height: 100vh;
min-height: 100dvh;
background: var(--color-bg);
color: var(--color-ink);
font-family: var(--font-sans);
font-size: var(--text-base);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-wrap: break-word;
}
/* Arabic script needs more leading and must never be letter-spaced. */
:lang(ar),
[dir="rtl"] {
line-height: 1.7;
letter-spacing: 0 !important;
}
[hidden] {
display: none !important;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
margin: 0;
}
h1,
h2,
h3,
h4 {
font-weight: 800;
line-height: 1.2;
letter-spacing: -0.015em;
text-wrap: balance;
}
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-md); }
h4 { font-size: var(--text-base); }
ul[class],
ol[class] {
margin: 0;
padding: 0;
list-style: none;
}
img,
svg,
video {
display: block;
max-width: 100%;
}
img {
height: auto;
}
a {
color: var(--color-primary-text);
text-decoration: none;
}
button,
input,
select,
textarea {
font: inherit;
color: inherit;
letter-spacing: inherit;
}
button {
cursor: pointer;
}
table {
border-collapse: collapse;
}
:focus-visible {
outline: 3px solid var(--color-focus);
outline-offset: 2px;
}
::selection {
background: var(--color-primary);
color: var(--color-on-primary);
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ---------- Brand -------------------------------------------------------- */
.brand {
display: inline-flex;
align-items: center;
gap: var(--space-3);
color: var(--color-ink);
min-width: 0;
}
.brand__logo {
display: block;
flex: none;
width: auto;
height: 52px;
max-width: 100%;
}
.brand__logo--stacked {
height: 208px;
}
.brand__logo--mascot {
height: 220px;
}
.brand--lg .brand__logo--compact {
height: 64px;
}
/* The partial prints both colourways; the theme shows one. */
.brand__logo--dark {
display: none;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .brand__logo--light {
display: none;
}
:root:not([data-theme="light"]) .brand__logo--dark {
display: block;
}
}
:root[data-theme="dark"] .brand__logo--light {
display: none;
}
:root[data-theme="dark"] .brand__logo--dark {
display: block;
}
.brand__mark {
width: 36px;
height: 36px;
flex: none;
}
.brand__text {
display: grid;
min-width: 0;
line-height: 1.15;
}
.brand__name {
font-size: 1.25rem;
font-weight: 800;
letter-spacing: -0.03em;
}
.brand__tagline {
font-size: var(--text-xs);
font-weight: 600;
color: var(--color-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.brand--lg .brand__mark {
width: 48px;
height: 48px;
}
.brand--lg .brand__name {
font-size: 1.625rem;
}
.brand--stacked {
flex-direction: column;
text-align: center;
}
.brand--stacked .brand__text {
justify-items: center;
}
/* Logo with a small context label under it ("Admin console"). */
.brand--labelled {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.brand--labelled .brand__tagline {
/* Lines the label up with the bag, past the artwork's own clear space. */
padding-inline-start: 9px;
font-size: 0.6875rem;
font-weight: 750;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-primary-text);
}
/* ---------- App shell ---------------------------------------------------- */
.app {
display: grid;
grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
min-height: 100vh;
min-height: 100dvh;
}
.app__sidebar {
position: sticky;
top: 0;
display: flex;
flex-direction: column;
gap: var(--space-5);
height: 100vh;
height: 100dvh;
padding: var(--space-5) var(--space-4);
background: var(--color-surface);
border-inline-end: 1px solid var(--color-border);
overflow-y: auto;
overscroll-behavior: contain;
}
.app__brand {
display: flex;
align-items: center;
padding-inline: var(--space-2);
min-height: 40px;
}
.app__sidebar-footer {
margin-top: auto;
padding-top: var(--space-4);
border-top: 1px solid var(--color-border);
display: grid;
gap: var(--space-3);
}
.app__main {
display: flex;
flex-direction: column;
min-width: 0;
}
.app__content {
width: 100%;
max-width: var(--content-max);
margin-inline: auto;
padding: var(--space-8);
display: grid;
gap: var(--space-6);
align-content: start;
flex: 1;
}
.app__content > * {
min-width: 0;
}
.app__content--narrow {
max-width: 820px;
}
.app__content--wide {
max-width: none;
}
.nav {
display: grid;
gap: 2px;
}
.nav__label {
padding: var(--space-4) var(--space-3) var(--space-2);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-faint);
}
.nav__label:first-child {
padding-top: 0;
}
.nav__item {
display: flex;
align-items: center;
gap: var(--space-3);
width: 100%;
min-height: 44px;
padding: 0 var(--space-3);
border: 0;
border-radius: var(--radius-md);
background: transparent;
color: var(--color-muted);
font-weight: 650;
text-align: start;
white-space: nowrap;
transition: background-color 0.15s, color 0.15s;
}
.nav__item:hover {
background: var(--color-surface-2);
color: var(--color-ink);
}
.nav__item.is-active,
.nav__item[aria-current="page"] {
background: var(--color-primary-soft);
color: var(--color-primary-text);
font-weight: 750;
}
.nav__icon {
width: 20px;
height: 20px;
flex: none;
}
.nav__badge {
margin-inline-start: auto;
min-width: 22px;
padding: 1px 7px;
border-radius: var(--radius-pill);
background: var(--color-primary);
color: var(--color-on-primary);
font-size: var(--text-xs);
font-weight: 750;
text-align: center;
font-variant-numeric: tabular-nums;
}
.topbar {
position: sticky;
top: 0;
z-index: 20;
display: flex;
align-items: center;
gap: var(--space-4);
min-height: var(--topbar-height);
padding: var(--space-2) var(--space-8);
background: color-mix(in srgb, var(--color-bg) 86%, transparent);
-webkit-backdrop-filter: saturate(1.4) blur(12px);
backdrop-filter: saturate(1.4) blur(12px);
border-bottom: 1px solid var(--color-border);
}
.topbar__title {
font-size: var(--text-md);
font-weight: 800;
letter-spacing: -0.01em;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.topbar__subtitle {
display: block;
font-size: var(--text-sm);
font-weight: 500;
letter-spacing: 0;
color: var(--color-muted);
overflow: hidden;
text-overflow: ellipsis;
}
.topbar__actions {
margin-inline-start: auto;
display: flex;
align-items: center;
gap: var(--space-2);
flex: none;
}
.bottomnav {
display: none;
}
.container {
width: 100%;
max-width: var(--content-max);
margin-inline: auto;
padding-inline: var(--space-8);
}
.container--narrow {
max-width: 820px;
}
.site-header {
position: sticky;
top: 0;
z-index: 20;
background: color-mix(in srgb, var(--color-bg) 88%, transparent);
-webkit-backdrop-filter: saturate(1.4) blur(12px);
backdrop-filter: saturate(1.4) blur(12px);
border-bottom: 1px solid var(--color-border);
}
.site-header > .container {
display: flex;
align-items: center;
gap: var(--space-4);
min-height: var(--topbar-height);
}
.site-footer {
margin-top: var(--space-12);
padding-block: var(--space-8);
border-top: 1px solid var(--color-border);
color: var(--color-muted);
font-size: var(--text-sm);
}
@media (max-width: 900px) {
.app {
display: block;
}
.app__sidebar {
z-index: 30;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: var(--space-2) var(--space-3);
height: auto;
padding: var(--space-3) var(--space-4) 0;
border-inline-end: 0;
border-bottom: 1px solid var(--color-border);
overflow: visible;
}
.app__brand {
padding-inline: 0;
}
.app__brand .brand--labelled {
flex-direction: row;
align-items: center;
gap: var(--space-3);
}
.app__brand .brand__logo--compact {
height: 42px;
}
.app__brand .brand--labelled .brand__tagline {
padding-inline-start: 0;
}
.app__sidebar-footer {
grid-column: 2;
grid-row: 1;
margin: 0;
padding: 0;
border: 0;
display: flex;
align-items: center;
}
.app__sidebar .nav {
grid-column: 1 / -1;
display: flex;
gap: var(--space-1);
margin-inline: calc(var(--space-4) * -1);
padding: 0 var(--space-4) var(--space-2);
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.app__sidebar .nav::-webkit-scrollbar {
display: none;
}
.app__sidebar .nav__label {
display: none;
}
.app__sidebar .nav__item {
width: auto;
flex: none;
min-height: 38px;
padding-inline: var(--space-3);
border-radius: var(--radius-pill);
font-size: var(--text-sm);
}
.app__sidebar .nav__badge {
margin-inline-start: 0;
}
/* The sidebar strip is the sticky element on phones, so the top bar scrolls. */
.topbar {
position: static;
min-height: 0;
padding: var(--space-3) var(--space-4);
background: transparent;
-webkit-backdrop-filter: none;
backdrop-filter: none;
border-bottom: 0;
flex-wrap: wrap;
}
.app__content {
padding: var(--space-4);
gap: var(--space-5);
}
.container {
padding-inline: var(--space-4);
}
.app--bottomnav .app__sidebar {
padding-bottom: var(--space-3);
}
.app--bottomnav .app__sidebar .nav {
display: none;
}
.app--bottomnav .app__content {
padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
}
.bottomnav {
position: fixed;
inset-inline: 0;
bottom: 0;
z-index: 40;
display: flex;
padding: 6px var(--space-2) calc(6px + env(safe-area-inset-bottom, 0px));
background: var(--color-surface);
border-top: 1px solid var(--color-border);
}
.bottomnav__item {
position: relative;
flex: 1 1 0;
min-width: 0;
display: grid;
justify-items: center;
gap: 2px;
padding: 6px 2px;
border: 0;
border-radius: var(--radius-md);
background: transparent;
color: var(--color-muted);
font-size: 0.6875rem;
font-weight: 700;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bottomnav__icon {
width: 22px;
height: 22px;
}
.bottomnav__item.is-active,
.bottomnav__item[aria-current="page"] {
color: var(--color-primary-text);
background: var(--color-primary-soft);
}
}
/* ---------- Page header -------------------------------------------------- */
.page-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-4);
}
.page-header > :first-child {
min-width: 0;
flex: 1 1 280px;
}
.page-header__title {
font-size: var(--text-2xl);
font-weight: 800;
letter-spacing: -0.025em;
}
.page-header__subtitle {
margin-top: var(--space-1);
color: var(--color-muted);
max-width: 64ch;
}
.page-header__actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-2);
}
.eyebrow {
display: block;
margin-bottom: var(--space-1);
font-size: var(--text-xs);
font-weight: 750;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-primary-text);
}
.section-title {
font-size: var(--text-lg);
font-weight: 800;
letter-spacing: -0.015em;
}
/* ---------- Card --------------------------------------------------------- */
.card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-6);
box-shadow: var(--shadow-sm);
min-width: 0;
}
.card--flush {
padding: 0;
overflow: hidden;
}
.card--soft {
background: var(--color-primary-soft);
border-color: transparent;
box-shadow: none;
}
.card--interactive {
display: block;
color: inherit;
transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.card--interactive:hover {
border-color: var(--color-border-strong);
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
.card__header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-3);
margin-bottom: var(--space-5);
}
.card--flush > .card__header {
margin: 0;
padding: var(--space-5) var(--space-6);
border-bottom: 1px solid var(--color-border);
}
.card__title {
font-size: var(--text-md);
font-weight: 800;
letter-spacing: -0.01em;
}
.card__subtitle {
margin-top: 2px;
font-size: var(--text-sm);
color: var(--color-muted);
}
.card--flush > .card__body {
padding: var(--space-6);
}
.card__footer {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: var(--space-2);
margin-top: var(--space-5);
padding-top: var(--space-5);
border-top: 1px solid var(--color-border);
}
.card--flush > .card__footer {
margin: 0;
padding: var(--space-4) var(--space-6);
}
@media (max-width: 640px) {
.app__brand .brand--labelled .brand__text {
display: none;
}
}
@media (max-width: 640px) {
.card {
padding: var(--space-4);
border-radius: var(--radius-lg);
}
.card--flush {
padding: 0;
}
.card--flush > .card__header,
.card--flush > .card__body,
.card--flush > .card__footer {
padding-inline: var(--space-4);
}
}
/* ---------- Stat tile ---------------------------------------------------- */
.stat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--space-4);
}
.stat {
display: grid;
gap: var(--space-1);
align-content: start;
padding: var(--space-5);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
min-width: 0;
}
.stat__icon {
display: grid;
place-items: center;
width: 40px;
height: 40px;
margin-bottom: var(--space-3);
border-radius: var(--radius-md);
background: var(--color-primary-soft);
color: var(--color-primary-text);
}
.stat__icon svg {
width: 20px;
height: 20px;
}
.stat__value {
font-size: var(--text-2xl);
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.03em;
font-variant-numeric: tabular-nums;
}
.stat__label {
color: var(--color-muted);
font-weight: 600;
font-size: var(--text-sm);
}
.stat__delta {
margin-top: var(--space-2);
font-size: var(--text-xs);
font-weight: 700;
color: var(--color-muted);
}
.stat__delta--up {
color: var(--color-primary-text);
}
.stat__delta--down {
color: var(--color-danger);
}
.stat--accent {
background: var(--color-primary);
border-color: transparent;
color: var(--color-on-primary);
}
.stat--accent .stat__label,
.stat--accent .stat__delta {
color: inherit;
opacity: 0.86;
}
.stat--accent .stat__icon {
background: color-mix(in srgb, var(--color-on-primary) 16%, transparent);
color: inherit;
}
@media (max-width: 640px) {
.stat-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-3);
}
.stat {
padding: var(--space-4);
}
.stat__value {
font-size: var(--text-xl);
}
}
/* ---------- Bars (single series) ---------------------------------------- */
.bars {
display: flex;
align-items: stretch;
gap: clamp(4px, 1.4vw, 14px);
height: 220px;
padding-top: var(--space-2);
}
.bars__col {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
gap: 6px;
}
.bars__bar {
width: 100%;
max-width: 56px;
height: calc(var(--value, 0) * 1%);
min-height: 4px;
border-radius: 8px 8px 3px 3px;
background: var(--color-primary);
transition: height 0.3s ease;
}
.bars__col.is-muted .bars__bar {
background: var(--color-surface-3);
}
.bars__value {
font-size: var(--text-xs);
font-weight: 750;
font-variant-numeric: tabular-nums;
}
.bars__label {
font-size: 0.6875rem;
font-weight: 600;
color: var(--color-muted);
white-space: nowrap;
}
/* ---------- Buttons ------------------------------------------------------ */
.btn {
--btn-bg: var(--color-surface);
--btn-fg: var(--color-ink);
--btn-border: var(--color-border-strong);
--btn-bg-hover: var(--color-surface-2);
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-height: var(--control-height);
padding: 0 var(--space-5);
border: 1px solid var(--btn-border);
border-radius: var(--radius-pill);
background: var(--btn-bg);
color: var(--btn-fg);
font-size: var(--text-base);
font-weight: 700;
line-height: 1.2;
text-align: center;
text-decoration: none;
white-space: nowrap;
user-select: none;
cursor: pointer;
transition: background-color 0.15s, border-color 0.15s, color 0.15s,
transform 0.08s;
}
.btn:hover {
background: var(--btn-bg-hover);
}
.btn:active {
transform: scale(0.98);
}
.btn svg {
width: 18px;
height: 18px;
flex: none;
}
.btn--primary {
--btn-bg: var(--color-primary);
--btn-fg: var(--color-on-primary);
--btn-border: transparent;
--btn-bg-hover: var(--color-primary-hover);
}
.btn--secondary {
--btn-bg: var(--color-surface);
--btn-fg: var(--color-primary-text);
--btn-border: var(--color-border-strong);
--btn-bg-hover: var(--color-primary-soft);
}
.btn--ghost {
--btn-bg: transparent;
--btn-fg: var(--color-ink);
--btn-border: transparent;
--btn-bg-hover: var(--color-surface-3);
}
.btn--danger {
--btn-bg: var(--color-danger);
--btn-fg: var(--color-on-danger);
--btn-border: transparent;
--btn-bg-hover: color-mix(in srgb, var(--color-danger) 86%, #000);
}
.btn--danger-ghost {
--btn-bg: transparent;
--btn-fg: var(--color-danger);
--btn-border: transparent;
--btn-bg-hover: var(--color-danger-soft);
}
.btn--sm {
min-height: 34px;
padding-inline: var(--space-3);
font-size: var(--text-sm);
}
.btn--sm svg {
width: 16px;
height: 16px;
}
.btn--lg {
min-height: 52px;
padding-inline: var(--space-8);
font-size: var(--text-md);
}
.btn--block {
display: flex;
width: 100%;
}
.btn--icon {
width: var(--control-height);
padding: 0;
flex: none;
}
.btn--icon.btn--sm {
width: 34px;
}
.btn:disabled,
.btn[aria-disabled="true"] {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
.btn.is-loading {
color: transparent !important;
pointer-events: none;
}
.btn.is-loading::after {
content: "";
position: absolute;
inset: 0;
margin: auto;
width: 18px;
height: 18px;
border-radius: 50%;
border: 2px solid var(--btn-fg);
border-inline-end-color: transparent;
animation: adham-spin 0.7s linear infinite;
}
.btn-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
}
.btn-row--end {
justify-content: flex-end;
}
.link {
color: var(--color-primary-text);
font-weight: 700;
text-decoration: underline;
text-decoration-color: transparent;
text-underline-offset: 3px;
transition: text-decoration-color 0.15s;
background: none;
border: 0;
padding: 0;
}
.link:hover {
text-decoration-color: currentColor;
}
/* ---------- Forms -------------------------------------------------------- */
.field {
display: grid;
gap: 6px;
min-width: 0;
align-content: start;
}
.label {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-2);
font-size: var(--text-sm);
font-weight: 700;
color: var(--color-ink);
}
.label__hint {
font-weight: 500;
color: var(--color-muted);
}
.help {
font-size: var(--text-sm);
color: var(--color-muted);
}
.error {
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-danger);
}
.input,
.select,
.textarea,
.field :where(input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="hidden"], [type="submit"], [type="button"]), select, textarea) {
display: block;
width: 100%;
min-width: 0;
min-height: var(--control-height);
padding: 10px 14px;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-md);
background-color: var(--color-surface);
color: var(--color-ink);
font-size: var(--text-base);
line-height: 1.4;
appearance: none;
-webkit-appearance: none;
transition: border-color 0.15s, box-shadow 0.15s;
}
:where(.input, .select, .textarea, .field input, .field select, .field textarea)::placeholder {
color: var(--color-faint);
opacity: 1;
}
:where(.input, .select, .textarea, .field input, .field select, .field textarea):hover {
border-color: var(--color-faint);
}
.input:focus,
.select:focus,
.textarea:focus,
.field :where(input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"]), select, textarea):focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-focus);
}
:where(.input, .select, .textarea, .field input, .field select, .field textarea):disabled {
background-color: var(--color-surface-2);
color: var(--color-faint);
cursor: not-allowed;
}
.select,
.field :where(select) {
padding-inline-end: 40px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%237A8B81' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 18px;
background-position: right 12px center;
cursor: pointer;
}
[dir="rtl"] .select,
[dir="rtl"] .field :where(select) {
background-position: left 12px center;
}
.textarea,
.field :where(textarea) {
min-height: 104px;
resize: vertical;
}
.input--sm {
min-height: 34px;
padding: 5px 10px;
font-size: var(--text-sm);
border-radius: var(--radius-sm);
}
.field.is-invalid :where(.input, .select, .textarea, input, select, textarea),
.input.is-invalid,
.select.is-invalid,
.textarea.is-invalid,
.input[aria-invalid="true"] {
border-color: var(--color-danger);
}
.field.is-invalid :where(.input, .select, .textarea, input, select, textarea):focus {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 30%, transparent);
}
.input-group {
position: relative;
display: block;
}
.input-group__icon {
position: absolute;
inset-block: 0;
inset-inline-start: 14px;
width: 18px;
height: 18px;
margin-block: auto;
color: var(--color-faint);
pointer-events: none;
}
.input-group > .input,
.input-group > input {
padding-inline-start: 42px;
}
/* Checkbox + radio: styled everywhere, no wrapper class needed. */
input[type="checkbox"]:not(.switch),
input[type="radio"] {
appearance: none;
-webkit-appearance: none;
display: inline-grid;
place-content: center;
flex: none;
width: 20px;
height: 20px;
min-height: 0;
margin: 0;
padding: 0;
border: 1.5px solid var(--color-border-strong);
border-radius: 6px;
background: var(--color-surface);
vertical-align: -4px;
cursor: pointer;
transition: background-color 0.12s, border-color 0.12s;
}
input[type="radio"] {
border-radius: 50%;
}
input[type="checkbox"]:not(.switch)::before {
content: "";
width: 12px;
height: 12px;
background: var(--color-on-primary);
clip-path: polygon(14% 52%, 6% 62%, 38% 90%, 96% 24%, 87% 15%, 37% 70%);
transform: scale(0);
transition: transform 0.12s;
}
input[type="radio"]::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-on-primary);
transform: scale(0);
transition: transform 0.12s;
}
input[type="checkbox"]:not(.switch):checked,
input[type="radio"]:checked {
background: var(--color-primary);
border-color: var(--color-primary);
}
input[type="checkbox"]:not(.switch):checked::before,
input[type="radio"]:checked::before {
transform: scale(1);
}
input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.check {
display: inline-flex;
align-items: flex-start;
gap: var(--space-3);
font-weight: 600;
cursor: pointer;
min-height: 28px;
line-height: 1.4;
}
.check > input {
margin-top: 1px;
}
.check > input.switch {
margin-top: -2px;
}
input.switch {
appearance: none;
-webkit-appearance: none;
position: relative;
flex: none;
width: 44px;
height: 26px;
min-height: 0;
margin: 0;
padding: 0;
border: 0;
border-radius: var(--radius-pill);
background: var(--color-border-strong);
vertical-align: -7px;
cursor: pointer;
transition: background-color 0.18s;
}
input.switch::before {
content: "";
position: absolute;
top: 3px;
inset-inline-start: 3px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
transition: inset-inline-start 0.18s;
}
input.switch:checked {
background: var(--color-primary);
}
input.switch:checked::before {
inset-inline-start: 21px;
}
.form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-4) var(--space-5);
}
.form-grid--3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.field--full {
grid-column: 1 / -1;
}
.form-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: var(--space-2);
margin-top: var(--space-2);
}
.choice-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: var(--space-3);
}
.choice {
position: relative;
display: block;
cursor: pointer;
}
.choice > input {
position: absolute;
top: 14px;
inset-inline-end: 14px;
}
.choice__body {
display: grid;
gap: 2px;
height: 100%;
padding: var(--space-4);
padding-inline-end: 44px;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-md);
background: var(--color-surface);
font-weight: 700;
transition: border-color 0.15s, background-color 0.15s;
}
.choice__body small {
font-size: var(--text-sm);
font-weight: 500;
color: var(--color-muted);
}
.choice > input:checked + .choice__body {
border-color: var(--color-primary);
background: var(--color-primary-soft);
box-shadow: inset 0 0 0 1px var(--color-primary);
}
.choice > input:focus-visible + .choice__body {
outline: 3px solid var(--color-focus);
outline-offset: 2px;
}
@media (max-width: 640px) {
.form-grid,
.form-grid--3 {
grid-template-columns: minmax(0, 1fr);
}
/* 16px stops iOS Safari zooming the page when a field is focused. */
.input,
.select,
.textarea,
.field :where(input, select, textarea) {
font-size: 1rem;
}
.form-actions > .btn {
flex: 1 1 auto;
}
}
/* ---------- Toolbar ------------------------------------------------------ */
.toolbar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-3);
}
.toolbar > .input,
.toolbar > .select,
.toolbar > .search {
width: auto;
flex: 0 1 220px;
}
.toolbar > .search {
flex: 1 1 240px;
max-width: 380px;
}
.toolbar__spacer {
flex: 1 1 auto;
}
.search {
position: relative;
display: block;
}
.search::before {
content: "";
position: absolute;
inset-block: 0;
inset-inline-start: 14px;
width: 18px;
height: 18px;
margin-block: auto;
background: var(--color-faint);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='9' cy='9' r='5.5'/%3E%3Cpath d='m13.5 13.5 3.5 3.5'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='9' cy='9' r='5.5'/%3E%3Cpath d='m13.5 13.5 3.5 3.5'/%3E%3C/svg%3E") center / contain no-repeat;
pointer-events: none;
}
.search > input {
padding-inline-start: 42px;
border-radius: var(--radius-pill);
}
@media (max-width: 640px) {
.toolbar > .input,
.toolbar > .select,
.toolbar > .search {
flex: 1 1 100%;
max-width: none;
}
.toolbar__spacer {
display: none;
}
}
/* ---------- Tabs --------------------------------------------------------- */
.tabs {
display: flex;
gap: var(--space-1);
border-bottom: 1px solid var(--color-border);
overflow-x: auto;
scrollbar-width: none;
}
.tabs::-webkit-scrollbar {
display: none;
}
.tab {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--space-2);
flex: none;
min-height: 44px;
padding: 0 var(--space-4);
border: 0;
background: none;
color: var(--color-muted);
font-weight: 700;
white-space: nowrap;
transition: color 0.15s;
}
.tab::after {
content: "";
position: absolute;
inset-inline: var(--space-3);
bottom: -1px;
height: 3px;
border-radius: 3px 3px 0 0;
background: transparent;
}
.tab:hover {
color: var(--color-ink);
}
.tab.is-active,
.tab[aria-selected="true"] {
color: var(--color-primary-text);
}
.tab.is-active::after,
.tab[aria-selected="true"]::after {
background: var(--color-primary);
}
.tab__count {
min-width: 22px;
padding: 1px 7px;
border-radius: var(--radius-pill);
background: var(--color-surface-3);
color: var(--color-ink);
font-size: var(--text-xs);
font-weight: 750;
text-align: center;
font-variant-numeric: tabular-nums;
}
.tab.is-active .tab__count,
.tab[aria-selected="true"] .tab__count {
background: var(--color-primary);
color: var(--color-on-primary);
}
.segmented {
display: inline-flex;
max-width: 100%;
padding: 4px;
gap: 2px;
border-radius: var(--radius-pill);
background: var(--color-surface-3);
overflow-x: auto;
scrollbar-width: none;
}
.segmented::-webkit-scrollbar {
display: none;
}
.segmented__item {
flex: none;
min-height: 36px;
padding: 0 var(--space-4);
border: 0;
border-radius: var(--radius-pill);
background: transparent;
color: var(--color-muted);
font-size: var(--text-sm);
font-weight: 700;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
.segmented__item:hover {
color: var(--color-ink);
}
.segmented__item.is-active,
.segmented__item[aria-selected="true"],
.segmented__item[aria-pressed="true"] {
background: var(--color-surface);
color: var(--color-ink);
box-shadow: var(--shadow-sm);
}
/* ---------- Pill / badge ------------------------------------------------- */
.pill {
--pill-fg: var(--color-neutral);
--pill-bg: var(--color-neutral-soft);
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 24px;
padding: 2px 10px;
border-radius: var(--radius-pill);
background: var(--pill-bg);
color: var(--pill-fg);
font-size: var(--text-xs);
font-weight: 750;
line-height: 1.4;
white-space: nowrap;
vertical-align: middle;
}
.pill svg {
width: 14px;
height: 14px;
flex: none;
}
.pill--success,
.pill--primary {
--pill-fg: var(--color-primary-text);
--pill-bg: var(--color-primary-soft);
}
.pill--warning {
--pill-fg: var(--color-warning);
--pill-bg: var(--color-warning-soft);
}
.pill--danger {
--pill-fg: var(--color-danger);
--pill-bg: var(--color-danger-soft);
}
.pill--info {
--pill-fg: var(--color-info);
--pill-bg: var(--color-info-soft);
}
.pill--lg {
min-height: 32px;
padding-inline: 14px;
font-size: var(--text-sm);
}
.pill--dot::before,
.pill--live::before {
content: "";
width: 7px;
height: 7px;
flex: none;
border-radius: 50%;
background: currentColor;
}
.pill--live::before {
animation: adham-pulse 1.6s ease-in-out infinite;
}
.badge {
display: inline-grid;
place-items: center;
min-width: 20px;
height: 20px;
padding: 0 6px;
border-radius: var(--radius-pill);
background: var(--color-primary);
color: var(--color-on-primary);
font-size: 0.6875rem;
font-weight: 800;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.badge--danger {
background: var(--color-danger);
color: var(--color-on-danger);
}
.tag {
display: inline-flex;
align-items: center;
padding: 1px 8px;
border: 1px solid var(--color-border-strong);
border-radius: 7px;
font-size: var(--text-xs);
font-weight: 650;
color: var(--color-muted);
white-space: nowrap;
}
/* ---------- Table -------------------------------------------------------- */
.table-wrap {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface);
}
.card--flush > .table-wrap {
border: 0;
border-radius: 0;
}
.table {
width: 100%;
min-width: 560px;
font-size: var(--text-base);
}
.table th,
.table td {
padding: 14px var(--space-4);
text-align: start;
vertical-align: middle;
border-bottom: 1px solid var(--color-border);
}
.table th:first-child,
.table td:first-child {
padding-inline-start: var(--space-6);
}
.table th:last-child,
.table td:last-child {
padding-inline-end: var(--space-6);
}
.table thead th {
position: sticky;
top: 0;
padding-block: 11px;
background: var(--color-surface-2);
color: var(--color-muted);
font-size: var(--text-xs);
font-weight: 750;
letter-spacing: 0.05em;
text-transform: uppercase;
white-space: nowrap;
}
.table tbody tr:last-child > * {
border-bottom: 0;
}
.table tbody tr {
transition: background-color 0.12s;
}
.table tbody tr:hover {
background: var(--color-surface-2);
}
.table tr.is-selected {
background: var(--color-primary-soft);
}
.table .num {
text-align: end;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.table__actions {
text-align: end !important;
white-space: nowrap;
}
.table__actions > * + * {
margin-inline-start: var(--space-1);
}
.table--compact th,
.table--compact td {
padding-block: 9px;
font-size: var(--text-sm);
}
.cell-title {
display: block;
font-weight: 700;
}
.cell-meta {
display: block;
font-size: var(--text-sm);
color: var(--color-muted);
}
@media (max-width: 640px) {
.table th:first-child,
.table td:first-child {
padding-inline-start: var(--space-4);
}
.table th:last-child,
.table td:last-child {
padding-inline-end: var(--space-4);
}
}
/* ---------- List rows ---------------------------------------------------- */
.list {
display: grid;
}
.list__row {
display: flex;
align-items: center;
gap: var(--space-4);
width: 100%;
padding: var(--space-4) var(--space-6);
border: 0;
border-bottom: 1px solid var(--color-border);
background: transparent;
color: inherit;
text-align: start;
}
.list__row:last-child {
border-bottom: 0;
}
a.list__row:hover,
button.list__row:hover {
background: var(--color-surface-2);
}
.list__media {
flex: none;
}
.list__body {
flex: 1 1 auto;
min-width: 0;
display: grid;
gap: 2px;
}
.list__title {
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.list__meta {
font-size: var(--text-sm);
color: var(--color-muted);
}
.list__end {
flex: none;
display: flex;
align-items: center;
gap: var(--space-2);
text-align: end;
}
@media (max-width: 640px) {
.list__row {
padding-inline: var(--space-4);
gap: var(--space-3);
}
}
.thumb {
width: 48px;
height: 48px;
flex: none;
display: grid;
place-items: center;
border-radius: var(--radius-md);
background: var(--color-primary-soft);
color: var(--color-primary-text);
object-fit: cover;
overflow: hidden;
}
.thumb--lg {
width: 72px;
height: 72px;
border-radius: var(--radius-lg);
}
.avatar {
width: 40px;
height: 40px;
flex: none;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--color-primary-soft);
color: var(--color-primary-text);
font-size: var(--text-sm);
font-weight: 800;
text-transform: uppercase;
object-fit: cover;
}
/* ---------- Key / value -------------------------------------------------- */
.kv {
display: grid;
gap: var(--space-2);
margin: 0;
}
.kv__row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-4);
}
.kv__row > dt {
color: var(--color-muted);
}
.kv__row > dd {
font-weight: 650;
text-align: end;
font-variant-numeric: tabular-nums;
}
.kv__row--total {
margin-top: var(--space-2);
padding-top: var(--space-3);
border-top: 1px solid var(--color-border);
font-size: var(--text-md);
}
.kv__row--total > dt {
color: var(--color-ink);
font-weight: 800;
}
.kv__row--total > dd {
font-weight: 800;
}
/* ---------- Order progress ----------------------------------------------- */
.timeline {
display: grid;
}
.timeline__step {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0 var(--space-3);
padding-inline-start: 40px;
padding-bottom: var(--space-5);
color: var(--color-faint);
}
.timeline__step:last-child {
padding-bottom: 0;
}
/* Dot */
.timeline__step::before {
content: "";
position: absolute;
top: 0;
inset-inline-start: 0;
width: 24px;
height: 24px;
border-radius: 50%;
border: 2px solid var(--color-border-strong);
background: var(--color-surface);
}
/* Connector */
.timeline__step::after {
content: "";
position: absolute;
top: 28px;
bottom: 4px;
inset-inline-start: 11px;
width: 2px;
border-radius: 2px;
background: var(--color-border);
}
.timeline__step:last-child::after {
display: none;
}
.timeline__title {
font-weight: 750;
line-height: 24px;
}
.timeline__time {
font-size: var(--text-sm);
font-weight: 650;
line-height: 24px;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.timeline__meta {
grid-column: 1 / -1;
font-size: var(--text-sm);
}
.timeline__step.is-done,
.timeline__step.is-current,
.timeline__step.is-warning {
color: var(--color-muted);
}
.timeline__step.is-done .timeline__title,
.timeline__step.is-current .timeline__title,
.timeline__step.is-warning .timeline__title {
color: var(--color-ink);
}
.timeline__step.is-done::before {
border-color: var(--color-primary);
background: var(--color-primary)
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 10.5 3 3 6-7'/%3E%3C/svg%3E")
center / 16px no-repeat;
}
.timeline__step.is-done::after {
background: var(--color-primary);
}
.timeline__step.is-current::before {
border-color: var(--color-primary);
background: radial-gradient(var(--color-primary) 0 5px, var(--color-surface) 6px);
box-shadow: 0 0 0 4px var(--color-primary-soft);
}
.timeline__step.is-current .timeline__title {
color: var(--color-primary-text);
}
.timeline__step.is-warning::before {
border-color: var(--color-warning);
background: radial-gradient(var(--color-warning) 0 5px, var(--color-surface) 6px);
box-shadow: 0 0 0 4px var(--color-warning-soft);
}
.timeline__step.is-warning .timeline__title {
color: var(--color-warning);
}
.pickup-code {
display: inline-block;
padding: var(--space-3) var(--space-6);
border: 1px dashed var(--color-primary);
border-radius: var(--radius-lg);
background: var(--color-primary-soft);
color: var(--color-primary-text);
font-family: var(--font-mono);
font-size: var(--text-3xl);
font-weight: 800;
line-height: 1.1;
letter-spacing: 0.18em !important;
/* Trailing letter-space would push the digits off centre. */
text-indent: 0.18em;
direction: ltr;
font-variant-numeric: tabular-nums;
}
/* ---------- Empty state -------------------------------------------------- */
.empty {
display: grid;
justify-items: center;
gap: var(--space-2);
padding: var(--space-12) var(--space-6);
text-align: center;
}
.empty__icon {
display: grid;
place-items: center;
width: 64px;
height: 64px;
margin-bottom: var(--space-2);
border-radius: 50%;
background: var(--color-primary-soft);
color: var(--color-primary-text);
}
.empty__icon svg {
width: 28px;
height: 28px;
}
.empty__title {
font-size: var(--text-md);
font-weight: 800;
}
.empty__text {
max-width: 44ch;
color: var(--color-muted);
}
.empty > .btn,
.empty > .btn-row {
margin-top: var(--space-3);
}
/* ---------- Notice / toast ----------------------------------------------- */
.notice {
--notice-fg: var(--color-neutral);
--notice-bg: var(--color-neutral-soft);
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-md);
border: 1px solid color-mix(in srgb, var(--notice-fg) 22%, transparent);
background: var(--notice-bg);
color: var(--color-ink);
}
.notice__icon {
width: 20px;
height: 20px;
flex: none;
margin-top: 1px;
color: var(--notice-fg);
}
.notice__body {
flex: 1 1 auto;
min-width: 0;
}
.notice__title {
display: block;
font-weight: 800;
color: var(--notice-fg);
}
.notice--success {
--notice-fg: var(--color-primary-text);
--notice-bg: var(--color-primary-soft);
}
.notice--warning {
--notice-fg: var(--color-warning);
--notice-bg: var(--color-warning-soft);
}
.notice--danger {
--notice-fg: var(--color-danger);
--notice-bg: var(--color-danger-soft);
}
.notice--info {
--notice-fg: var(--color-info);
--notice-bg: var(--color-info-soft);
}
.toast-stack {
position: fixed;
z-index: 100;
bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
inset-inline-end: var(--space-6);
display: grid;
gap: var(--space-2);
width: min(380px, calc(100vw - var(--space-8)));
pointer-events: none;
}
.toast {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-md);
background: #0B3A26;
color: #F2F8F0;
border: 1px solid rgba(255, 255, 255, 0.1);
border-inline-start: 4px solid #8CC63F;
box-shadow: var(--shadow-lg);
font-weight: 600;
pointer-events: auto;
animation: adham-rise 0.22s ease-out;
}
.toast--success {
border-inline-start-color: #8CC63F;
}
.toast--warning {
border-inline-start-color: #F9C22E;
}
.toast--danger {
border-inline-start-color: #FF6B6B;
}
@media (max-width: 640px) {
.toast-stack {
inset-inline: var(--space-4);
width: auto;
}
.app--bottomnav ~ .toast-stack,
.app--bottomnav .toast-stack {
bottom: calc(84px + env(safe-area-inset-bottom, 0px));
}
}
/* ---------- Skeleton / loading ------------------------------------------- */
.skeleton {
display: block;
border-radius: var(--radius-sm);
background: linear-gradient(
90deg,
transparent 0%,
color-mix(in srgb, var(--color-surface) 70%, transparent) 50%,
transparent 100%
)
var(--color-surface-3);
background-size: 200% 100%;
animation: adham-shimmer 1.4s linear infinite;
color: transparent;
user-select: none;
}
.skeleton--text {
height: 12px;
border-radius: 6px;
}
.skeleton--title {
height: 22px;
width: 45%;
border-radius: 8px;
}
.skeleton--block {
height: 96px;
border-radius: var(--radius-lg);
}
.skeleton--circle {
width: 48px;
height: 48px;
border-radius: 50%;
}
.spinner {
display: inline-block;
width: 20px;
height: 20px;
flex: none;
border-radius: 50%;
border: 2.5px solid var(--color-surface-3);
border-top-color: var(--color-primary);
animation: adham-spin 0.7s linear infinite;
vertical-align: middle;
}
.spinner--lg {
width: 36px;
height: 36px;
border-width: 3.5px;
}
.loading {
display: grid;
justify-items: center;
gap: var(--space-3);
padding: var(--space-12) var(--space-6);
color: var(--color-muted);
font-weight: 600;
text-align: center;
}
/* ---------- Modal / drawer ----------------------------------------------- */
.modal {
position: fixed;
inset: 0;
z-index: 80;
display: none;
align-items: center;
justify-content: center;
padding: var(--space-6);
background: var(--color-overlay);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
overflow-y: auto;
overscroll-behavior: contain;
}
.modal.is-open {
display: flex;
animation: adham-fade 0.16s ease-out;
}
.modal__panel,
dialog.dialog {
width: min(560px, 100%);
max-height: calc(100dvh - var(--space-12));
display: flex;
flex-direction: column;
padding: 0;
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
background: var(--color-surface);
color: var(--color-ink);
box-shadow: var(--shadow-lg);
overflow: hidden;
}
.modal.is-open > .modal__panel {
animation: adham-rise 0.2s ease-out;
}
.modal__panel--sm {
width: min(420px, 100%);
}
.modal__panel--lg {
width: min(820px, 100%);
}
dialog.dialog:not([open]) {
display: none;
}
dialog.dialog::backdrop {
background: var(--color-overlay);
backdrop-filter: blur(3px);
}
.modal__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-5) var(--space-6);
border-bottom: 1px solid var(--color-border);
flex: none;
}
.modal__title {
font-size: var(--text-lg);
font-weight: 800;
letter-spacing: -0.015em;
}
.modal__close {
display: grid;
place-items: center;
width: 36px;
height: 36px;
flex: none;
margin-inline-end: -6px;
border: 0;
border-radius: 50%;
background: var(--color-surface-2);
color: var(--color-muted);
font-size: 1.25rem;
line-height: 1;
}
.modal__close:hover {
background: var(--color-surface-3);
color: var(--color-ink);
}
.modal__body {
padding: var(--space-6);
overflow-y: auto;
display: grid;
gap: var(--space-4);
align-content: start;
flex: 1 1 auto;
}
.modal__footer {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: var(--space-2);
padding: var(--space-4) var(--space-6);
border-top: 1px solid var(--color-border);
background: var(--color-surface-2);
flex: none;
}
.modal--drawer {
padding: 0;
justify-content: flex-end;
align-items: stretch;
}
.modal--drawer > .modal__panel {
width: min(480px, 100%);
max-height: none;
height: 100%;
border-radius: 0;
border-block: 0;
border-inline-end: 0;
animation-name: adham-slide;
}
[dir="rtl"] .modal--drawer > .modal__panel {
animation-name: adham-slide-rtl;
}
body.has-overlay {
overflow: hidden;
}
@media (max-width: 640px) {
.modal:not(.modal--drawer) {
padding: 0;
align-items: flex-end;
}
.modal:not(.modal--drawer) > .modal__panel {
width: 100%;
max-height: 92dvh;
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
border-bottom: 0;
border-inline: 0;
}
.modal__header,
.modal__body,
.modal__footer {
padding-inline: var(--space-4);
}
.modal__footer {
padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
}
.modal__footer > .btn {
flex: 1 1 auto;
}
}
/* ---------- Pagination --------------------------------------------------- */
.pagination {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-1);
}
.pagination__item {
display: inline-grid;
place-items: center;
min-width: 38px;
height: 38px;
padding: 0 var(--space-3);
border: 1px solid transparent;
border-radius: var(--radius-pill);
background: transparent;
color: var(--color-ink);
font-size: var(--text-sm);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.pagination__item:hover {
background: var(--color-surface-3);
}
.pagination__item.is-active,
.pagination__item[aria-current="page"] {
background: var(--color-primary);
color: var(--color-on-primary);
}
.pagination__item:disabled,
.pagination__item[aria-disabled="true"] {
opacity: 0.4;
pointer-events: none;
}
.pagination__gap {
padding-inline: var(--space-1);
color: var(--color-faint);
}
.pagination__info {
margin-inline-end: auto;
font-size: var(--text-sm);
color: var(--color-muted);
}
@media (max-width: 640px) {
.pagination__info {
flex: 1 1 100%;
}
}
/* ---------- Auth page ---------------------------------------------------- */
.auth {
min-height: 100vh;
min-height: 100dvh;
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-12);
padding: var(--space-8) var(--space-4);
background: var(--color-bg);
}
.auth__card {
width: min(440px, 100%);
display: grid;
gap: var(--space-5);
padding: var(--space-8);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-md);
}
.auth__brand {
margin-bottom: var(--space-2);
}
/* Without the aside the card carries the full stacked logo; beside it, the compact one. */
.auth__brand--narrow {
justify-self: center;
}
.auth__brand--wide {
display: none;
}
.auth__title {
font-size: var(--text-xl);
font-weight: 800;
letter-spacing: -0.02em;
}
.auth__subtitle {
margin-top: calc(var(--space-3) * -1);
color: var(--color-muted);
}
.auth__card form {
display: grid;
gap: var(--space-4);
}
.auth__footer {
padding-top: var(--space-4);
border-top: 1px solid var(--color-border);
font-size: var(--text-sm);
color: var(--color-muted);
text-align: center;
}
.auth__aside {
display: none;
}
@media (min-width: 1024px) {
.auth__aside {
display: grid;
align-content: end;
gap: var(--space-3);
width: min(420px, 38vw);
min-height: 520px;
padding: var(--space-8);
border-radius: var(--radius-xl);
background: var(--color-brand-dark);
color: var(--color-on-brand-dark);
}
.auth__aside .brand__logo--stacked {
height: 264px;
}
.auth__aside .eyebrow {
color: var(--color-accent-lime);
}
.auth__brand--narrow {
display: none;
}
.auth__brand--wide {
display: inline-flex;
}
.auth__aside h2 {
font-size: var(--text-2xl);
letter-spacing: -0.025em;
}
.auth__aside p {
color: rgba(255, 255, 255, 0.84);
}
}
@media (max-width: 480px) {
.auth {
align-items: flex-start;
padding-top: var(--space-6);
}
.auth__card {
padding: var(--space-5);
}
.auth__brand .brand__logo--stacked {
height: 192px;
}
}
/* ---------- Utilities ---------------------------------------------------- */
.stack {
display: grid;
gap: var(--space-4);
align-content: start;
}
.stack > * {
min-width: 0;
}
.stack--sm { gap: var(--space-2); }
.stack--lg { gap: var(--space-6); }
.row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-3);
}
.row--between { justify-content: space-between; }
.row--end { justify-content: flex-end; }
.row--nowrap { flex-wrap: nowrap; }
.grid-2,
.grid-3,
.grid-4,
.grid-auto {
display: grid;
gap: var(--space-4);
}
.grid-2 > *,
.grid-3 > *,
.grid-4 > *,
.grid-auto > * {
min-width: 0;
}
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.split {
display: grid;
grid-template-columns: minmax(0, 1fr) 360px;
gap: var(--space-6);
align-items: start;
}
.split > * {
min-width: 0;
}
@media (max-width: 1024px) {
.grid-3,
.grid-4 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.split {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 640px) {
.grid-2,
.grid-3,
.grid-4,
.grid-auto {
grid-template-columns: minmax(0, 1fr);
}
.hide-phone {
display: none !important;
}
}
@media (min-width: 641px) {
.only-phone {
display: none !important;
}
}
.muted { color: var(--color-muted); }
.faint { color: var(--color-faint); }
.strong { font-weight: 750; }
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-lg { font-size: var(--text-lg); }
.text-center { text-align: center; }
.text-end { text-align: end; }
.text-success { color: var(--color-primary-text); }
.text-warning { color: var(--color-warning); }
.text-danger { color: var(--color-danger); }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); }
.nowrap { white-space: nowrap; }
.price {
color: var(--color-primary-text);
font-weight: 800;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.truncate {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.divider {
height: 1px;
margin: 0;
border: 0;
background: var(--color-border);
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
/* ---------- Motion ------------------------------------------------------- */
@keyframes adham-spin {
to { transform: rotate(360deg); }
}
@keyframes adham-shimmer {
from { background-position: 200% 0; }
to { background-position: -200% 0; }
}
@keyframes adham-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.35; transform: scale(0.8); }
}
@keyframes adham-fade {
from { opacity: 0; }
}
@keyframes adham-rise {
from { opacity: 0; transform: translateY(10px); }
}
@keyframes adham-slide {
from { transform: translateX(100%); }
}
@keyframes adham-slide-rtl {
from { transform: translateX(-100%); }
}
@media print {
.app__sidebar,
.topbar,
.bottomnav,
.toast-stack {
display: none !important;
}
.app {
display: block;
}
}