/*
 * thseen UI — the one stylesheet both sides share.
 *
 * The dashboard and the storefront load exactly this file, and the one
 * compiled Tailwind (public/ui/tailwind.css) after every stylesheet. It was
 * four files (alexandria.css, v10-tokens.css, this one, v10-components.css),
 * loaded back to back; they are here in that order, so the cascade is the
 * same. Everything here is class-based on purpose: an
 * element selector here would lose to Tailwind's preflight on order. A class
 * (or an element qualified with body) wins on specificity instead.
 *
 * One vocabulary on both sides: ui-btn, ui-field, ui-label, ui-help,
 * ui-card, ui-pill, ui-notice, ui-eyebrow, ui-section-head, ui-table… with
 * is-* modifiers, and Tailwind utilities in the brand's tokens (text-muted,
 * text-caption, bg-surface-2…) for the rest.
 *
 * Sections: 0 font and tokens · 1 base · 2 shell · 3 side navigation ·
 * 4 overlays (search, menus, toasts, dialog) · 5 components · 6 bare markup ·
 * 7 print · 8 narrow screens · 9 storefront tools (buy mode, client view,
 * cart) · 10 dashboard screens · 11 shared details · 12 the modal
 * · 13 the dashboard's screen components (orders board, order page, forms,
 * reports…) · 14 motion.
 */

/* =========================================================================
 * 0. font and tokens
 * ========================================================================= */
/* Alexandria (variable 400-700), self-hosted from Google Fonts v6 */
@font-face{font-family:'Alexandria';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/alexandria/alexandria-arabic.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:'Alexandria';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/alexandria/alexandria-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Alexandria';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/alexandria/alexandria-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Alexandria';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/alexandria/alexandria-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* the brand's tokens, the one source for both sides: colours, shadows, radii, type sizes, timing */

:root {
    --bg: #F6F8F6; --surface: #FFFFFF; --surface-2: #F0F4F1;
    --ink: #081510; --ink-2: #1B2A24;
    /* text greys and the brand's text green, each the lightest shade that
       still reads at 4.5:1 on the tinted surface it sits on (WCAG AA for small
       text). Measured over the 128 pages: the old #8A9690 was 2.8-3.1:1,
       #079C55 as text 3.2-3.6:1, #68756F 4.3:1 on --surface-2 — 113 distinct
       text styles below the line. A lighter tertiary grey cannot be legible
       here at 11-12px, so --muted-2 sits just above --muted and the labels
       that use it are told apart by size and weight. */
    --muted: #5C6862; --muted-2: #646F6A;
    --line: #DDE5E0; --line-strong: #CCD7D0;
    --brand: #0CD273; --brand-700: #067C44; --brand-900: #055C38; --brand-soft: #EAFBF2;
    --danger: #B93A46; --warning: #A87318; --success: #178353; --blue: #2F6DFA;
    --shadow-sm: 0 8px 22px rgba(7,23,16,.045); --shadow-md: 0 18px 46px rgba(7,23,16,.075);
    --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 26px;
    --fs-h1: 36px; --fs-h2: 25px; --fs-h3: 18px; --fs-body: 15px; --fs-small: 13px; --fs-caption: 12px;
    --w-regular: 400; --w-medium: 500; --w-semi: 600; --w-bold: 700;
    --header: 72px;
    --fast: 150ms; --normal: 220ms; --ease: cubic-bezier(.22,1,.36,1);
}

:root {
    --nav-w: 268px;
    --nav-rail: 78px;
    --content-max: 1320px;
    --pad: 28px;
    --strip-h: 30px;
    /* the focus ring, two layers: white, then the brand's dark green (5.3:1 on white, so it
       shows on the page, a card or a dark button alike). The pale glow it replaced was 1.25:1 */
    --focus: 0 0 0 2px #fff, 0 0 0 4px var(--brand-700);
}
@media (max-width: 720px) { :root { --pad: 16px; } }

/* =========================================================================
 * 1. base
 * ========================================================================= */
/* what a jump to a field (a validation message, an #anchor) leaves above it under the sticky
   header: on a phone the field's label sits above the field, so it needs the room too */
:root { --scroll-room: 12px; }
@media (max-width: 820px) { :root { --scroll-room: 44px; } }
html { background: var(--bg); -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header) + var(--scroll-room)); }
body.ui {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--ink);
    font-family: "Alexandria", Tahoma, Arial, sans-serif;
    font-size: var(--fs-body);
    font-weight: var(--w-regular);
    line-height: 1.8;
    text-align: start;
    -webkit-font-smoothing: antialiased;
}
body.ui :is(button, input, select, textarea, optgroup) { font-family: inherit; }
/* Element rules carry one element of weight (body h2, 0,0,2): enough to beat
   Tailwind's preflight (h2, 0,0,1), which the storefront injects after this
   file, and never enough to beat a page's own class (.card h2, 0,1,1). With a
   class here (body.ui h2) every page's own heading and link sizes lost. */
body :is(h1, h2, h3, h4, h5, h6) { color: var(--ink); font-family: inherit; }
body h1 { font-size: var(--fs-h1); font-weight: var(--w-bold); line-height: 1.3; letter-spacing: -.02em; }
body h2 { font-size: var(--fs-h2); font-weight: var(--w-semi); line-height: 1.4; letter-spacing: -.01em; }
body h3 { font-size: var(--fs-h3); font-weight: var(--w-semi); line-height: 1.5; }
body :is(h4, h5, h6) { font-size: var(--fs-body); font-weight: var(--w-semi); line-height: 1.6; }
body a { color: inherit; text-decoration: none; }
body a:hover { color: var(--brand-700); }
body.ui bdi { unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
/* a pound figure (Money::html, @money): the number and «ج.م» never split over two lines */
.money { white-space: nowrap; }
/* a struck-out figure in its own <bdi> (an inline-block, so the parent's line-through skipped it) */
:is(del, s, .off-price-was, .pu-old) bdi { text-decoration: inherit; text-decoration-line: line-through; }
body.ui ::selection { background: var(--brand); color: #03150C; }
body.ui :focus-visible { outline: 2px solid var(--brand-700); outline-offset: 2px; box-shadow: 0 0 0 2px #fff; }
body.ui [hidden] { display: none !important; }

.ui-skip {
    position: fixed; inset-inline-start: 12px; top: -60px; z-index: 2000;
    background: var(--ink); color: #fff !important; padding: 10px 16px; border-radius: var(--r-sm);
    font-size: var(--fs-small); transition: top var(--fast);
}
.ui-skip:focus { top: 12px; }
/* read by a screen reader, not drawn: a word the eye gets from the styling
   (a struck figure) and the ear would otherwise miss */
.ui-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

html.ui-lock, html.ui-lock body { overflow: hidden; }

/* thin scrollbars in the brand colour, the same on both sides */
html { scrollbar-width: thin; scrollbar-color: var(--brand) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--brand); border-radius: 40px; }
::-webkit-scrollbar-track { background: transparent; }

/* =========================================================================
 * 2. shell
 * ========================================================================= */

/* --- the top bar --- */
.ui-header {
    position: sticky; top: 0; z-index: 40;
    height: var(--header);
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
}
.ui-header-inner {
    height: 100%; padding: 0 16px;
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center; gap: 10px;
}
.ui-h-start, .ui-h-end { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ui-h-start { justify-content: flex-start; }
.ui-h-end { justify-content: flex-end; }
.ui-brand-cell { display: flex; justify-content: center; min-width: 0; }
.ui-brand { display: block; line-height: 0; }
.ui-brand img { display: block; height: auto; max-height: 38px; width: auto; max-width: 100%; }

.icon-btn {
    width: 44px; height: 44px; min-width: 44px; padding: 0;
    border: 1px solid transparent; border-radius: var(--r-sm);
    background: transparent; color: var(--ink);
    display: inline-grid; place-items: center; position: relative; cursor: pointer;
    transition: background var(--fast), border-color var(--fast), color var(--fast);
}
.icon-btn:hover { background: var(--surface-2); border-color: var(--line); color: var(--ink); }
.icon-btn:active { transform: scale(.96); }
.icon-btn .count-badge {
    position: absolute; top: 2px; inset-inline-end: 2px;
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px;
    background: var(--brand); border: 2px solid #fff; color: #03150C;
    font-size: 10px; font-weight: var(--w-bold); line-height: 1; display: grid; place-items: center;
}

/* the account chip (same on both sides) */
.account-chip {
    min-height: 42px; padding: 0 10px 0 11px;
    border: 1px solid var(--line); border-radius: var(--r-md);
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--surface); color: var(--ink);
    font-size: var(--fs-caption); font-weight: var(--w-semi); cursor: pointer; white-space: nowrap;
}
.account-chip:hover { border-color: var(--line-strong); }
.account-avatar {
    width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
    background: var(--ink); color: #fff; overflow: hidden;
    display: grid; place-items: center; font-size: 11px; font-weight: var(--w-semi);
}
.account-avatar.is-lg { width: 40px; height: 40px; font-size: 15px; border-radius: 12px; }
.account-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ui-account-chev .icon { width: 14px; height: 14px; color: var(--muted); }
.ui-account[open] .ui-account-chev .icon { transform: rotate(180deg); }

/* --- announcement strips (top of the content column) --- */
.ui-strip {
    min-height: var(--strip-h); padding: 4px 16px;
    display: flex; align-items: center; justify-content: center; text-align: center;
    font-size: var(--fs-caption); font-weight: var(--w-medium); line-height: 1.5;
}
.ui-strip.is-cause { background: var(--brand-soft); color: var(--brand-900); border-bottom: 1px solid var(--line); }
.ui-strip.is-closed { background: var(--ink); color: #E3EDE7; }

/* --- «عرض الحساب»: a team member looking at a user's account (x-ui.view-as) ---
   Above the header and sticky with it, so the way back is on screen however
   far the page scrolls. --header grows by the bar's height on <html>, so the
   side navigation, the drawers and the toasts that sit under the header
   (top: var(--header)) sit under both; the header itself keeps its height. */
html.is-viewing-as { --viewas-h: 52px; --header: calc(72px + 52px); }
html.is-viewing-as .ui-header { top: var(--viewas-h); height: calc(var(--header) - var(--viewas-h)); }
.ui-viewas {
    position: sticky; top: 0; z-index: 41;
    height: var(--viewas-h); box-sizing: border-box; padding: 0 16px;
    display: flex; align-items: center; gap: 12px;
    background: var(--ink); color: #C3D2CA;
    border-bottom: 2px solid var(--brand);
}
.ui-viewas-ico {
    flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px;
    display: grid; place-items: center;
    background: rgba(12, 210, 115, .16); color: var(--brand);
}
body.ui .ui-viewas-text {
    flex: 1; min-width: 0; margin: 0;
    display: flex; align-items: center; gap: 12px;
    font-size: var(--fs-small); line-height: 1.45;
}
.ui-viewas-who, .ui-viewas-meta { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-viewas-who { color: #fff; font-weight: var(--w-semi); }
.ui-viewas-meta { font-size: var(--fs-caption); color: #93A79C; }
.ui-viewas-tag {
    display: inline-block; margin-inline-end: 4px; padding: 0 8px; border-radius: 99px;
    background: var(--brand); color: #03150C; font-size: 11px; font-weight: var(--w-bold); line-height: 1.7;
}
.ui-viewas-back { margin: 0; flex: 0 0 auto; }
/* the name on one line, what it means on the next; the button keeps its whole label */
@media (max-width: 820px) {
    html.is-viewing-as { --viewas-h: 58px; --header: calc(66px + 58px); }
    .ui-viewas { padding: 0 12px; gap: 10px; }
    .ui-viewas-ico { display: none; }
    body.ui .ui-viewas-text { flex-direction: column; align-items: flex-start; gap: 1px; font-size: var(--fs-caption); }
    .ui-viewas-who, .ui-viewas-meta { max-width: 100%; }
}
/* Fixed, not sticky, below 768px: a browser without overflow-x:clip falls
   back to hidden on html and body (see "fixes after first render"), which
   turns sticky off, and the bar must stay on screen there too. The body
   makes room for it instead. */
@media (max-width: 767px) {
    html.is-viewing-as body.ui { padding-top: var(--viewas-h); }
    html.is-viewing-as .ui-header { top: 0; }
    .ui-viewas { position: fixed; inset-inline: 0; }
}

/* --- the frame: navigation + main column --- */
.ui-frame {
    display: grid;
    grid-template-columns: var(--nav-w) minmax(0, 1fr);
    align-items: start;
    min-height: calc(100vh - var(--header));
}
html.ui-nav-collapsed .ui-frame { grid-template-columns: var(--nav-rail) minmax(0, 1fr); }

.ui-main {
    min-width: 0; min-height: calc(100vh - var(--header));
    display: flex; flex-direction: column;
    outline: 0;
}
.ui-content {
    flex: 1 0 auto; width: 100%; box-sizing: border-box;
    max-width: var(--content-max); margin: 0 auto;
    padding: 4px var(--pad) 36px;
}

/* --- footer (same frame on both sides) --- */
.ui-footer {
    box-sizing: border-box;
    width: calc(100% - 2 * var(--pad)); max-width: calc(var(--content-max) - 2 * var(--pad));
    margin: 12px auto var(--pad);
    background: var(--ink); color: #C3D2CA;
    border-radius: var(--r-xl); padding: 26px 28px 20px;
}
.ui-footer-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.ui-footer-brand { max-width: 320px; }
.ui-footer-brand img { display: block; height: auto; max-height: 34px; width: auto; }
.ui-footer-brand p { margin: 10px 0 0; font-size: var(--fs-caption); line-height: 1.8; color: #93A79C; }
.ui-footer-links { display: flex; gap: 40px; flex-wrap: wrap; }
.ui-footer-links h2 { color: var(--brand) !important; font-size: var(--fs-caption) !important; font-weight: var(--w-semi) !important; letter-spacing: .04em; margin: 0 0 10px; line-height: 1.5 !important; }
.ui-footer-links ul { list-style: none; margin: 0; padding: 0; }
.ui-footer-links li + li { margin-top: 0; }
/* The text is 15px, so the link was a 15px-tall target with eleven of them
   stacked: padding makes the tap area 25px without changing how it reads. */
body.ui .ui-footer-links a, body.ui .ui-footer-base a { color: #C3D2CA; font-size: var(--fs-small); display: inline-block; padding-block: 5px; }
body.ui .ui-footer-links a:hover, body.ui .ui-footer-base a:hover { color: var(--brand); }
.ui-footer-base {
    margin-top: 20px; padding-top: 14px; border-top: 1px solid #1B2F26;
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.ui-footer-base p { margin: 0; font-size: var(--fs-caption); color: #7E938A; }

/* --- the phone's bottom bar --- */
.ui-bottom { display: none; }
@media (max-width: 720px) {
    .ui-bottom {
        display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
        position: fixed; inset-inline: 0; bottom: 0; z-index: 38;
        background: rgba(255, 255, 255, .97);
        -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
        border-top: 1px solid var(--line);
        padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    }
    .ui-bottom > a, .ui-bottom > button {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
        min-height: 52px; border: 0; background: none; border-radius: 12px;
        color: var(--muted); font-size: 11px; font-weight: var(--w-semi); cursor: pointer;
    }
    .ui-bottom > .is-active { color: var(--brand-900); background: var(--brand-soft); }
    .ui-bottom-ico { position: relative; display: grid; place-items: center; }
    .ui-bottom-badge {
        position: absolute; top: -6px; inset-inline-end: -10px;
        min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px;
        background: var(--ink); color: #fff; font-size: 10px; font-weight: var(--w-bold);
        display: grid; place-items: center; line-height: 1;
    }
    body.ui { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
    .ui-footer { margin-bottom: 16px; border-radius: var(--r-lg); padding: 22px 18px 18px; }
    .ui-footer-links { gap: 26px; }
}

/* =========================================================================
 * 3. side navigation
 * ========================================================================= */
.ui-nav {
    position: sticky; top: var(--header); z-index: 30;
    height: calc(100vh - var(--header));
    box-sizing: border-box;
    background: var(--surface);
    border-inline-end: 1px solid var(--line);
    overflow: hidden;
}
.ui-nav-scroll {
    height: 100%; overflow-y: auto; overscroll-behavior: contain;
    padding: 12px 12px 32px; box-sizing: border-box;
    scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.ui-nav-group + .ui-nav-group { margin-top: 10px; }
.ui-nav-label {
    margin: 8px 10px 6px !important; padding: 0;
    font-size: 11px; font-weight: var(--w-semi); color: var(--muted-2); line-height: 1.6; letter-spacing: .02em;
}
.ui-nav-list, .ui-nav-children { list-style: none; margin: 0; padding: 0; }
.ui-nav-link {
    position: relative;
    display: flex; align-items: center; gap: 11px;
    min-height: 46px; padding: 0 8px; margin: 1px 0;
    border-radius: var(--r-md);
    color: var(--ink) !important; font-size: 14px; font-weight: var(--w-medium); line-height: 1.4;
    cursor: pointer; list-style: none; user-select: none;
    transition: background var(--fast), color var(--fast);
}
.ui-nav-link::-webkit-details-marker { display: none; }
.ui-nav-link:hover { background: var(--surface-2); }
.ui-nav-ico {
    position: relative; flex: 0 0 auto;
    width: 34px; height: 34px; border-radius: 10px;
    display: grid; place-items: center;
    background: var(--surface-2); color: var(--muted);
    transition: background var(--fast), color var(--fast);
}
.ui-nav-ico .icon { width: 18px; height: 18px; }
.ui-nav-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-nav-link.is-active { background: var(--brand-soft); color: var(--brand-900) !important; font-weight: var(--w-semi); }
.ui-nav-link.is-active .ui-nav-ico { background: var(--surface); color: var(--brand-700); }
.ui-nav-link.is-active::after {
    content: ''; position: absolute; inset-inline-start: -12px; top: 10px; bottom: 10px;
    width: 3px; border-radius: 0 3px 3px 0; background: var(--brand);
}
.ui-nav-link.is-within .ui-nav-ico { color: var(--brand-700); }
.ui-nav-badge {
    flex: 0 0 auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 99px;
    background: var(--ink); color: #fff; font-size: 11px; font-weight: var(--w-bold); line-height: 1;
    display: grid; place-items: center;
}
.ui-nav-link.is-active .ui-nav-badge { background: var(--brand-900); }
.ui-nav-chev { flex: 0 0 auto; color: var(--muted); display: grid; transition: transform var(--fast); }
.ui-nav-sub[open] > .ui-nav-link .ui-nav-chev { transform: rotate(180deg); }
.ui-nav-children { margin: 2px 0 6px; padding-inline-start: 26px; position: relative; }
.ui-nav-children::before { content: ''; position: absolute; inset-inline-start: 24px; top: 4px; bottom: 4px; width: 1px; background: var(--line); }
.ui-nav-child {
    display: flex; align-items: center; gap: 8px;
    min-height: 38px; padding: 0 14px; margin: 1px 0;
    border-radius: var(--r-sm);
    color: var(--muted) !important; font-size: 13px; font-weight: var(--w-medium);
    transition: background var(--fast), color var(--fast);
}
.ui-nav-child:hover { background: var(--surface-2); color: var(--ink) !important; }
.ui-nav-child.is-active { background: var(--brand-soft); color: var(--brand-900) !important; font-weight: var(--w-semi); }
.ui-nav-foot { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
/* The menu is twice the height of a laptop screen and scrolls inside the
   bar, with nothing saying so: half of it (reports, settings) read as
   missing. While there is more below, a fade and «باقي القائمة» say it
   and take you there (ui.js sets .has-more). */
.ui-nav-more {
    position: absolute; inset-inline: 0; bottom: 0; z-index: 2;
    display: none; align-items: flex-end; justify-content: center;
    height: 64px; padding-bottom: 10px; border: 0; cursor: pointer;
    background: linear-gradient(to bottom, transparent, var(--surface) 62%);
    font: inherit; font-size: 12px; font-weight: var(--w-semi); color: var(--brand-700);
}
.ui-nav-more span { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 99px; background: var(--brand-soft); }
.ui-nav.has-more .ui-nav-more { display: flex; }
@media (min-width: 1024px) {
    /* rows a little tighter on a wide screen, so more of the menu fits */
    .ui-nav-link { min-height: 40px; gap: 10px; }
    .ui-nav-ico { width: 30px; height: 30px; border-radius: 9px; }
    .ui-nav-ico .icon { width: 17px; height: 17px; }
    .ui-nav-child { min-height: 34px; }
    .ui-nav-group + .ui-nav-group { margin-top: 6px; }
    .ui-nav-label { margin: 6px 10px 4px !important; }
    .ui-nav-link.is-active::after { top: 8px; bottom: 8px; }
    html.ui-nav-collapsed .ui-nav-more { display: none; }
}
.ui-nav-foot form { margin: 0; }
button.ui-nav-link { width: 100%; border: 0; background: none; font: inherit; text-align: start; }

/* the icon rail (wide screens, collapsed) */
@media (min-width: 1200px) {
    html.ui-nav-collapsed .ui-nav-scroll { padding-inline: 10px; }
    html.ui-nav-collapsed :is(.ui-nav-text, .ui-nav-label, .ui-nav-chev, .ui-nav-children) { display: none; }
    html.ui-nav-collapsed .ui-nav-link { justify-content: center; padding: 0; }
    html.ui-nav-collapsed .ui-nav-link .ui-nav-badge {
        position: absolute; top: 3px; inset-inline-end: 4px; min-width: 18px; height: 18px; padding: 0 5px; font-size: 9px;
    }
    html.ui-nav-collapsed .ui-nav-group + .ui-nav-group { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
    html.ui-nav-collapsed .ui-nav-link.is-active::after { inset-inline-start: -10px; }
}

/* the drawer (narrow screens) */
.ui-scrim { display: none; }
@media (max-width: 1199.98px) {
    .ui-frame, html.ui-nav-collapsed .ui-frame { grid-template-columns: minmax(0, 1fr); }
    .ui-nav {
        position: fixed; top: var(--header); bottom: 0; inset-inline-start: 0; z-index: 36;
        width: min(300px, 86vw); height: auto;
        border-inline-end: 1px solid var(--line); box-shadow: var(--shadow-md);
        transform: translateX(100%); visibility: hidden;
        transition: transform var(--normal) var(--ease), visibility var(--normal);
    }
    html.ui-nav-open .ui-nav { transform: none; visibility: visible; }
    .ui-frame > .ui-scrim {
        position: fixed; inset: var(--header) 0 0 0; z-index: 35;
        border: 0; padding: 0; margin: 0; background: rgba(8, 21, 16, .48); cursor: pointer;
    }
    html.ui-nav-open .ui-frame > .ui-scrim { display: block; }
}
@media (max-width: 720px) {
    .ui-nav { bottom: calc(64px + env(safe-area-inset-bottom)); }
    .ui-frame > .ui-scrim { inset: var(--header) 0 calc(64px + env(safe-area-inset-bottom)) 0; }
}

/* the client view (storefront) is a server-rendered catalog now (App\Support\ClientView);
   this is only a marketer page restored from history after it was turned on, hidden
   while ui.js asks the server for the catalog in its place */
html.ui-client-view body { visibility: hidden; }

/* =========================================================================
 * 4. overlays: search, menus, toasts, dialog
 * ========================================================================= */

/* --- dropdown menus built on <details> --- */
.ui-menu { position: relative; }
.ui-menu > summary { list-style: none; }
.ui-menu > summary::-webkit-details-marker { display: none; }
.ui-menu-panel {
    position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 60;
    min-width: 260px; padding: 6px; box-sizing: border-box;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
    box-shadow: var(--shadow-md); text-align: start;
}
.ui-menu-head { display: flex; gap: 10px; align-items: center; padding: 10px 10px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.ui-menu-head strong { display: block; font-size: var(--fs-small); color: var(--ink); line-height: 1.5; }
/* the email under the name — the avatar beside it is a span too, and this rule
   (0,1,1) used to outrank .account-avatar: its letter went grey on the dark
   square, 3.9:1, and lost its centring to display:block */
.ui-menu-head > div span { display: block; font-size: 11px; color: var(--muted); line-height: 1.5; text-align: end; }
.ui-menu-head small { display: block; font-size: 11px; color: var(--brand-900); font-weight: var(--w-semi); margin-top: 2px; }
.ui-menu-item {
    display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box;
    min-height: 40px; padding: 0 10px; border: 0; border-radius: var(--r-sm);
    background: none; color: var(--ink) !important; font-size: var(--fs-small); font-weight: var(--w-medium);
    cursor: pointer; text-align: start;
}
.ui-menu-item:hover { background: var(--surface-2); }
.ui-menu-item .icon { color: var(--muted); }
.ui-menu-item.is-danger { color: var(--danger) !important; }
.ui-menu-item.is-danger .icon { color: var(--danger); }
.ui-menu-sep { height: 1px; background: var(--line); margin: 4px 6px; }
/* where the account works (the dashboard, a supplier's or a courier's pages, back to the store): first, in the brand's ink */
.ui-menu-item.is-place { font-weight: var(--w-semi); }
.ui-menu-item.is-place .icon { color: var(--brand-700); }
/* «حساباتك على الجهاز ده» (DeviceAccounts): a small heading over the other accounts */
.ui-menu-label { padding: 8px 10px 2px; font-size: 11px; color: var(--muted); font-weight: var(--w-semi); }
.ui-menu-item .account-avatar.is-sm { width: 24px; height: 24px; font-size: 11px; border-radius: 8px; }

/* «ثبّت تحسين على موبايلك» (WebSite/layouts/install): a card above the bottom nav on a phone */
.ui-install { display: none; }
@media (max-width: 720px) {
    .ui-install:not([hidden]) {
        display: flex; align-items: center; gap: 10px;
        position: fixed; inset-inline: 10px; bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 39;
        padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
        box-shadow: var(--shadow-md);
    }
}
.ui-install img { width: 44px; height: 44px; border-radius: 11px; flex: 0 0 auto; }
.ui-install-text { flex: 1; min-width: 0; }
.ui-install-text strong { display: block; font-size: var(--fs-caption); font-weight: var(--w-semi); line-height: 1.6; }
.ui-install-text span { display: block; font-size: 11px; color: var(--muted); line-height: 1.6; }
.ui-install-text .icon { vertical-align: -3px; }
.ui-install-x { width: 32px; height: 32px; border: 0; background: none; color: var(--muted); display: grid; place-items: center; border-radius: var(--r-sm); cursor: pointer; flex: 0 0 auto; }
.ui-install-x:hover { background: var(--surface-2); color: var(--ink); }

/* the bell (WebSite/layouts/bell): the latest lines, unread ones marked */
.ui-bell-panel { min-width: 320px; max-width: min(92vw, 380px); padding: 6px 6px 4px; }
/* hung from the sticky header, the panel does not move when the page scrolls: eight
   lines with their buttons ran 920px tall and «كل الإشعارات» sat under a laptop's
   768px screen, out of reach. It scrolls inside itself instead. */
@media (min-width: 481px) {
    .ui-bell-panel { max-height: calc(100vh - var(--header) - 24px); max-height: calc(100dvh - var(--header) - 24px); overflow-y: auto; overscroll-behavior: contain; }
}
/* on a phone the bell sits mid-header, 100px from the left of a 390px screen: hung
   from it, the 320px panel ran 30px past the right edge and cut the start of each
   line. Under the header instead, the screen's width less its gutters. */
@media (max-width: 480px) {
    .ui-bell-panel { position: fixed; top: calc(var(--header) + 4px); inset-inline: 8px; min-width: 0; max-width: none; max-height: calc(100dvh - var(--header) - 96px); overflow-y: auto; }
}
.ui-bell-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.ui-bell-head strong { font-size: var(--fs-small); color: var(--ink); }
.ui-bell-head form { margin: 0; }
.ui-bell-item { display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px; border-radius: var(--r-sm); color: var(--ink) !important; text-decoration: none; }
.ui-bell-item:hover { background: var(--surface-2); }
.ui-bell-item.is-unread { background: var(--brand-soft); }
.ui-bell-item.is-unread:hover { background: var(--brand-soft); filter: brightness(.97); }
.ui-bell-ico { flex: 0 0 auto; margin-top: 2px; color: var(--muted); }
.ui-bell-text { display: block; min-width: 0; }
.ui-bell-text strong { display: block; font-size: var(--fs-caption); font-weight: var(--w-semi); line-height: 1.6; }
.ui-bell-text span { display: block; font-size: 12px; color: var(--muted); line-height: 1.6; }
.ui-bell-text time { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.ui-bell-push { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; width: 100%; text-align: start; margin: 2px 0 4px; padding: 9px 10px; border: 1px dashed var(--line-strong); border-radius: var(--r-sm); background: var(--brand-soft); color: var(--ink); font-size: var(--fs-caption); font-weight: var(--w-semi); cursor: pointer; }
.ui-bell-push .icon { color: var(--brand-900); }
.ui-bell-push small { grid-column: 2; display: block; font-size: 11px; color: var(--muted); font-weight: var(--w-regular); line-height: 1.6; }
.ui-bell-push:hover { border-color: var(--brand-700); }
.ui-bell-empty { margin: 0; padding: 14px 10px; font-size: var(--fs-caption); color: var(--muted); line-height: 1.7; }
.ui-bell-all { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0; }
/* a line's buttons (InAppNotice actions): under its text, inside the bell and the full list */
.ui-notice-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 10px 8px; padding-inline-start: 38px; }
.ui-notice-actions form { margin: 0; }
.ntf-entry .ui-notice-actions { padding: 8px 0 0; }
.ui-menu-form { margin: 0; }

/* --- search sheet --- */
.ui-search { position: fixed; inset: 0; z-index: 70; }
.ui-search-scrim { position: absolute; inset: 0; background: rgba(8, 21, 16, .5); }
.ui-search-panel {
    position: relative; box-sizing: border-box;
    width: min(660px, calc(100% - 24px)); margin: 76px auto 0;
    background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-md);
    overflow: hidden;
}
.ui-search-field { display: flex; align-items: center; gap: 10px; padding: 0 10px 0 16px; border-bottom: 1px solid var(--line); margin: 0; }
.ui-search-field > .icon { color: var(--muted); }
body.ui .ui-search-field input {
    flex: 1; min-width: 0; height: 60px; border: 0 !important; outline: 0; box-shadow: none !important;
    background: transparent; color: var(--ink); font-size: 16px; padding: 0;
}
/* the sheet has its own close button; the browser's clear button would be a second "×" */
.ui-search-field input::-webkit-search-cancel-button, .ui-search-field input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.ui-search-results { max-height: min(62vh, 540px); overflow-y: auto; padding: 8px; }
.ui-search-hint, .ui-search-empty { margin: 0; padding: 22px 16px; text-align: center; color: var(--muted); font-size: var(--fs-small); line-height: 1.8; }
.ui-search-group { margin: 8px 10px 4px; font-size: 11px; font-weight: var(--w-semi); color: var(--muted-2); }
.ui-search-item {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 10px; border-radius: var(--r-md);
    color: var(--ink) !important; cursor: pointer;
}
.ui-search-item.is-active, .ui-search-item:hover { background: var(--surface-2); }
.ui-search-item.is-active { box-shadow: inset 0 0 0 1px var(--line-strong); }
.ui-search-ico { width: 36px; height: 36px; border-radius: 10px; background: var(--surface-2); color: var(--muted); display: grid; place-items: center; flex: 0 0 auto; }
.ui-search-item.is-active .ui-search-ico { background: var(--surface); color: var(--brand-700); }
.ui-search-text { flex: 1; min-width: 0; }
.ui-search-text strong { display: block; font-size: var(--fs-small); font-weight: var(--w-semi); line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-search-text small { display: block; font-size: 11px; color: var(--muted); line-height: 1.6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-search-tag { flex: 0 0 auto; font-size: 10px; font-weight: var(--w-semi); padding: 3px 8px; border-radius: 99px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.ui-search-more { display: block; margin: 6px 10px 4px; font-size: var(--fs-caption); font-weight: var(--w-semi); color: var(--brand-700) !important; }
.ui-search-foot { display: flex; gap: 16px; flex-wrap: wrap; padding: 9px 16px; border-top: 1px solid var(--line); background: var(--surface-2); font-size: 11px; color: var(--muted); }
.ui-search-foot kbd { font: 10px/1 "Alexandria", sans-serif; padding: 3px 6px; margin-inline-end: 3px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 6px; background: var(--surface); color: var(--ink); }
.ui-search-shortcut { margin-inline-start: auto; }
.ui-search-loading { height: 2px; background: linear-gradient(90deg, transparent, var(--brand), transparent); background-size: 200% 100%; animation: ui-slide 1s linear infinite; }
@keyframes ui-slide { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (max-width: 720px) {
    .ui-search-panel { margin-top: 10px; }
    .ui-search-foot { display: none; }
}

/* --- toasts --- */
.ui-toasts {
    position: fixed; z-index: 1200; inset-inline: 0; top: calc(var(--header) + 12px);
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 0 12px; pointer-events: none;
}
.ui-toast {
    pointer-events: auto; box-sizing: border-box;
    display: flex; align-items: flex-start; gap: 10px;
    width: min(520px, 100%); padding: 11px 12px 11px 14px;
    background: var(--ink); color: #F1F6F3; border-radius: var(--r-md);
    box-shadow: 0 18px 40px rgba(7, 23, 16, .22);
    font-size: var(--fs-small); line-height: 1.75;
    opacity: 0; transform: translateY(-10px) scale(.98);
    transition: opacity var(--normal) var(--ease), transform var(--normal) var(--ease);
}
.ui-toast.is-in { opacity: 1; transform: none; }
.ui-toast.is-out { opacity: 0; transform: translateY(-6px); }
.ui-toast-ico { width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; margin-top: 1px; }
.ui-toast.is-success .ui-toast-ico { background: var(--brand); color: #03150C; }
.ui-toast.is-error .ui-toast-ico { background: #E5484D; color: #fff; }
.ui-toast.is-warning .ui-toast-ico { background: #F5B83D; color: #241A04; }
.ui-toast.is-info .ui-toast-ico { background: #3D7BF5; color: #fff; }
.ui-toast-body { flex: 1; min-width: 0; padding-top: 2px; overflow-wrap: anywhere; white-space: pre-line; }
.ui-toast-body ul, .ui-toast-body li { white-space: normal; }
.ui-toast-body strong { font-weight: var(--w-semi); }
.ui-toast-body ul { margin: 4px 0 0; padding-inline-start: 18px; }
.ui-toast-x { flex: 0 0 auto; width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: #9FB4AA; display: grid; place-items: center; cursor: pointer; }
.ui-toast-x:hover { background: rgba(255, 255, 255, .08); color: #fff; }

/* --- dialog (confirmations) --- */
.ui-dialog { position: fixed; inset: 0; z-index: 1300; display: grid; place-items: center; padding: 16px; opacity: 0; transition: opacity var(--fast) var(--ease); }
.ui-dialog.is-open { opacity: 1; }
.ui-dialog-scrim { position: absolute; inset: 0; background: rgba(8, 21, 16, .52); }
.ui-dialog-card {
    position: relative; box-sizing: border-box; width: min(420px, 100%);
    background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-md);
    padding: 24px 22px 18px; text-align: center; outline: 0;
    transform: translateY(8px) scale(.98); transition: transform var(--normal) var(--ease);
}
.ui-dialog.is-open .ui-dialog-card { transform: none; }
.ui-dialog-badge { width: 52px; height: 52px; border-radius: 16px; margin: 0 auto 12px; display: grid; place-items: center; background: var(--surface-2); color: var(--ink); }
.ui-dialog-badge .icon { width: 24px; height: 24px; }
.ui-dialog-card.is-danger .ui-dialog-badge { background: #FCECEF; color: var(--danger); }
.ui-dialog-card.is-success .ui-dialog-badge { background: var(--brand-soft); color: var(--brand-900); }
.ui-dialog-card.is-warning .ui-dialog-badge { background: #FFF5DA; color: #8B5A08; }
body.ui .ui-dialog-title { margin: 0 0 6px; font-size: var(--fs-h3); font-weight: var(--w-bold); line-height: 1.5; }
.ui-dialog-text { margin: 0; font-size: var(--fs-small); color: var(--muted); line-height: 1.8; white-space: pre-line; }
.ui-dialog-actions { display: flex; gap: 8px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.ui-dialog-actions .ui-btn { min-width: 120px; }

/* =========================================================================
 * 5. components (one vocabulary for both sides)
 * ========================================================================= */

/* --- buttons: .ui-btn, with is-primary / is-brand / is-danger / is-danger-outline / is-outline /
 *     is-ghost / is-light for the kind and is-sm / is-lg / is-block for the size --- */
body .ui-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 0 18px; box-sizing: border-box;
    border: 1px solid var(--line-strong); border-radius: var(--r-sm);
    background: var(--surface); color: var(--ink);
    font-family: inherit; font-size: var(--fs-small); font-weight: var(--w-semi); line-height: 1.2;
    white-space: nowrap; text-decoration: none; cursor: pointer; box-shadow: none;
    transition: background var(--fast), border-color var(--fast), color var(--fast), transform var(--fast);
}
body .ui-btn:hover { background: var(--surface-2); border-color: #AEBBB4; color: var(--ink); }
body .ui-btn:active:not(:disabled) { transform: scale(.98); }
body .ui-btn:focus-visible { outline: 0; box-shadow: var(--focus); }
body .ui-btn:is(:disabled, .disabled, [aria-disabled="true"]) { opacity: .45; cursor: not-allowed; pointer-events: none; }
body .ui-btn.is-primary { background: var(--ink); border-color: var(--ink); color: #fff; }
body .ui-btn.is-primary:hover { background: var(--brand-900); border-color: var(--brand-900); color: #fff; }
body .ui-btn.is-brand { background: var(--brand); border-color: var(--brand); color: #03150C; }
body .ui-btn.is-brand:hover { background: var(--brand-700); border-color: var(--brand-700); color: #fff; }
body .ui-btn.is-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
body .ui-btn.is-danger:hover { background: #9A2C37; border-color: #9A2C37; color: #fff; }
body .ui-btn.is-danger-outline { background: var(--surface); border-color: #E8C6CA; color: var(--danger); }
body .ui-btn.is-danger-outline:hover { background: #FCECEF; border-color: var(--danger); color: var(--danger); }
body .ui-btn.is-outline { background: var(--surface); border-color: var(--line-strong); color: var(--brand-900); }
body .ui-btn.is-ghost { background: transparent; border-color: transparent; color: var(--brand-700); padding-inline: 8px; }
body .ui-btn.is-ghost:hover { background: var(--surface-2); color: var(--brand-900); }
body .ui-btn.is-sm { min-height: 38px; padding: 0 12px; font-size: var(--fs-caption); }
body .ui-btn.is-lg { min-height: 52px; padding: 0 22px; font-size: var(--fs-body); }
body .ui-btn.is-block { display: flex; width: 100%; }
body .ui-btn .icon { width: 18px; height: 18px; }

/* --- fields: .ui-field (is-sm for the compact one), its .ui-label and .ui-help --- */
body .ui-field {
    display: block; width: 100%; box-sizing: border-box;
    min-height: 44px; padding: 8px 13px;
    border: 1px solid var(--line-strong); border-radius: var(--r-sm);
    background: var(--surface); color: var(--ink);
    font-family: inherit; font-size: var(--fs-small); line-height: 1.6;
    box-shadow: none; transition: border-color var(--fast), box-shadow var(--fast);
}
body .ui-field:focus { outline: 0; border-color: var(--brand-700); box-shadow: var(--focus); }
body .ui-field::placeholder { color: var(--muted-2); opacity: 1; }
body .ui-field:is(:disabled, [readonly]) { background: var(--surface-2); color: var(--muted); }
body textarea.ui-field { min-height: 110px; resize: vertical; line-height: 1.8; }
/* a select looks like one: the forms reset hides the native arrow and the field's
   background shorthand dropped the plugin's, so selects on both sides had none */
body select.ui-field {
    padding-inline-end: 34px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7C73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m6 9 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat; background-size: 16px 16px; background-position: left 12px center;
}
body select.ui-field:dir(ltr) { background-position: right 12px center; }
body select.ui-field[multiple] { background-image: none; padding-inline-end: 13px; }
body .ui-field.is-sm { min-height: 38px; padding: 4px 10px; font-size: var(--fs-caption); }
body .ui-label { display: block; margin: 0 0 6px; font-size: var(--fs-caption); font-weight: var(--w-semi); color: var(--ink-2); line-height: 1.6; }
body .ui-help { display: block; margin-top: 6px; font-size: var(--fs-caption); color: var(--muted); line-height: 1.7; }
body .ui-help.is-error { color: var(--danger); font-weight: var(--w-semi); }
/* a card's one-line description under its title */
.ui-lead { margin: 4px 0 14px; font-size: var(--fs-small); color: var(--muted); line-height: 1.75; }
body input[type=checkbox], body input[type=radio] { accent-color: var(--brand-700); }
/* the forms reset draws checkboxes and radios itself, in Tailwind's blue; in the brand instead */
body :is([type='checkbox'], [type='radio']) { color: var(--brand-700); border-color: var(--line-strong); }
body :is([type='checkbox'], [type='radio']):focus { --tw-ring-color: var(--brand-700); }

/* --- surfaces --- */
body .ui-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; box-sizing: border-box; }

/* --- status pills: .ui-pill with is-good / is-warn / is-bad / is-info --- */
body .ui-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 99px; border: 1px solid var(--line);
    background: var(--surface-2); color: var(--ink-2);
    font-size: var(--fs-caption); font-weight: var(--w-semi); line-height: 1.5; white-space: nowrap;
}
body .ui-pill.is-good { background: #E8F7EF; border-color: #CFEADB; color: #147A4D; }
body .ui-pill.is-warn { background: #FFF5DA; border-color: #F3E2B0; color: #8B5A08; }
body .ui-pill.is-bad { background: #FCECEF; border-color: #E8C6CA; color: #A52E3B; }
body .ui-pill.is-info { background: #EEF3FF; border-color: #D3DEFB; color: #2457C6; }

/* --- a page's head: the eyebrow, the title, a line under it; the page's actions at the end
 *     (components/ui/page-head; the dashboard's pages get it through their page-title partial) --- */
.ui-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; margin: 0 0 18px; }
.ui-page-title { flex: 1 1 320px; min-width: 0; }
.ui-page-title h1 { margin: 0; font-size: var(--fs-h1); font-weight: var(--w-bold); line-height: 1.25; letter-spacing: -.02em; }
.ui-page-title > p { margin: 8px 0 0; max-width: 70ch; font-size: var(--fs-small); line-height: 1.85; color: var(--muted); }
.ui-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ui-page-actions form { display: inline; margin: 0; }
/* the dashboard's pages open straight in the content column, with room above */
:where(.is-admin) .ui-page-head { margin: 28px 0; }
@media (max-width: 820px) { :where(.is-admin) .ui-page-head { margin: 22px 0 18px; } }
@media (max-width: 767px) {
    .ui-page-head { flex-direction: column; align-items: stretch; }
    .ui-page-title { flex: 0 1 auto; }
}
@media (max-width: 600px) {
    .ui-page-title h1 { font-size: 27px; }
    :where(.is-admin) .ui-page-head { margin: 18px 0 16px; }
}

/* --- an empty list or section: an icon, what is missing, a line on what to do, the way out
 *     (components/ui/empty) --- */
body .ui-empty { padding: 34px 18px; text-align: center; }
.ui-empty-icon { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 50%; background: var(--surface-2); color: var(--brand-700); }
.ui-empty-title { margin: 0 0 6px; font-size: var(--fs-h3); font-weight: var(--w-bold); line-height: 1.4; color: var(--ink); }
.ui-empty-text { margin: 0 auto; max-width: 52ch; font-size: var(--fs-caption); line-height: 1.7; color: var(--muted); }
.ui-empty-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
body .ui-empty.is-inline { padding: 18px; background: var(--surface-2); border-radius: var(--r-md); }
.ui-empty.is-inline .ui-empty-title { font-size: var(--fs-small); margin-bottom: 4px; }
.ui-empty.is-inline .ui-empty-text { font-size: var(--fs-small); }

/* --- a figure and its label, with an icon, a unit and a note when it has them: the stat tile
 *     both sides open their pages with (components/ui/stat). Four to a row, two from 1100px. --- */
.ui-stats { display: grid; grid-template-columns: repeat(var(--stat-cols, 4), minmax(0, 1fr)); gap: 10px; margin: 0 0 18px; }
.ui-stats.is-3 { --stat-cols: 3; }
.ui-stats.is-5 { --stat-cols: 5; }
.ui-stat { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); container-type: inline-size; }
.ui-stat-icon { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; background: var(--surface-2); color: var(--brand-700); }
.ui-stat-body { min-width: 0; }
.ui-stat-label { display: block; font-size: var(--fs-caption); font-weight: var(--w-semi); line-height: 1.5; color: var(--muted); }
.ui-stat-value { display: block; margin-top: 2px; font-size: 20px; font-weight: var(--w-bold); line-height: 1.35; color: var(--ink); }
/* a figure reads left to right, its sign first ("-2,875.00", not "2,875.00-") */
.ui-stat-value bdi { direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.ui-stat-unit { margin-inline-start: 4px; font-size: var(--fs-caption); font-weight: var(--w-semi); color: var(--muted); }
.ui-stat-note { display: block; margin-top: 2px; font-size: 11px; line-height: 1.6; color: var(--muted-2); }
/* the figure that matters most */
.ui-stat.is-brand { background: var(--brand-soft); border-color: #BFEBD4; }
.ui-stat.is-brand .ui-stat-icon { background: var(--surface); }
.ui-stat.is-brand :is(.ui-stat-label, .ui-stat-unit) { color: var(--brand-700); }
/* not money yet: it reads as the odd one out on purpose */
.ui-stat.is-pending { background: var(--surface-2); border-style: dashed; border-color: var(--line-strong); }
.ui-stat.is-pending .ui-stat-icon { background: var(--surface); color: var(--muted); }
/* a figure that moved the right or the wrong way */
.ui-stat.is-good .ui-stat-icon { background: var(--brand-soft); color: var(--brand-900); }
.ui-stat.is-good .ui-stat-value { color: var(--brand-700); }
.ui-stat.is-bad .ui-stat-icon { background: #FDF3F4; color: var(--danger); }
.ui-stat.is-bad .ui-stat-value { color: var(--danger); }
/* nothing to count yet: the figure is a sentence */
.ui-stat.is-empty .ui-stat-value { font-size: var(--fs-body); font-weight: var(--w-semi); color: var(--muted); }
/* a tile too narrow for the icon beside the figure (a phone, a side card) gives the figure the room */
@container (max-width: 180px) { .ui-stat-icon { display: none; } }
@media (max-width: 1100px) { .ui-stats, .ui-stats:is(.is-3, .is-5) { --stat-cols: 2; } }
@media (max-width: 767px) {
    .ui-stat { padding: 11px; gap: 9px; }
    .ui-stat-icon { width: 34px; height: 34px; }
    .ui-stat-value { font-size: 17px; }
}
@media (max-width: 600px) {
    .ui-stats { gap: 8px; margin-bottom: 14px; }
    .ui-stats.is-3 { --stat-cols: 1; }
}

/* --- a section's head: an eyebrow, the title, a line of text; its actions at the end --- */
.ui-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.ui-section-head p { margin: 4px 0 0; }
.ui-eyebrow { display: block; margin-bottom: 6px; font-size: var(--fs-caption); font-weight: var(--w-semi); color: var(--brand-700); }
.ui-divider { height: 1px; background: var(--line); margin: 16px 0; border: 0; }

/* --- a table of records: the header row on the soft surface, a hairline between rows. is-compact
 *     packs a report's rows tighter; is-stacked makes each row a card on a phone, every cell
 *     labelled from its data-label (cells without one head the card). .ui-table-wrap scrolls a
 *     wide table sideways inside its own border. --- */
.ui-table { width: 100%; margin: 0; border-collapse: collapse; color: var(--ink); background: transparent; }
.ui-table th { padding: 11px 14px; text-align: start; vertical-align: middle; white-space: nowrap; font-size: var(--fs-caption); font-weight: var(--w-semi); color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--line); }
.ui-table td { padding: 13px 14px; vertical-align: middle; font-size: var(--fs-small); border-bottom: 1px solid var(--line); }
.ui-table tbody tr:last-child > td { border-bottom: 0; }
/* an order number in a cell was a 26x15 target; a button in a cell brings
   its own padding, so only the bare links are padded here */
.ui-table td > a:not(.ui-btn):not(.ui-pill), .ui-table th > a:not(.ui-btn):not(.ui-pill) { display: inline-block; padding-block: 5px; }
.ui-table tfoot td { border-top: 1px solid var(--line-strong); border-bottom: 0; background: var(--surface-2); font-weight: var(--w-semi); }
.ui-table tbody tr { transition: background var(--fast) var(--ease); }
.ui-table tbody tr:hover { background: var(--surface-2); }
/* a report: more rows to a screen, every cell but the first on one line */
/* (0,1,1) like the base, which they follow: a page's own .x td rules, later still, win over both */
:where(.ui-table).is-compact th { padding: 8px 10px; font-size: 11px; }
:where(.ui-table).is-compact td { padding: 10px; font-size: 13px; }
/* kept as weak as a page's own column rules, which win over them */
:where(.ui-table.is-compact) td { white-space: nowrap; }
:where(.ui-table.is-compact) td:first-child { min-width: 170px; white-space: normal; }
.ui-table.is-compact td .cluster { flex-wrap: nowrap; }
/* rows of fields, not records (the variant editor, an order's lines, the attribute dictionary):
   no header band and no rules, a little air between the rows */
:where(.ui-table).is-form { border-collapse: separate; border-spacing: 0 4px; font-size: 12px; }
:where(.ui-table).is-form th { padding: 4px 6px; background: transparent; border: 0; font-size: inherit; font-weight: 600; }
:where(.ui-table).is-form td { padding: 2px 4px; border: 0; font-size: inherit; }
:where(.ui-table).is-form tfoot td { border: 0; }
:where(.ui-table).is-form tbody tr:hover { background: transparent; }
/* a share of the largest, drawn in a cell */
.ui-table .bar { height: 6px; min-width: 80px; overflow: hidden; border-radius: 99px; background: var(--line); }
.ui-table .bar i { display: block; height: 100%; width: var(--value); border-radius: inherit; background: var(--brand-700); }
/* a share against a limit (a budget): amber near it, red past it */
.ui-table .bar.is-warn i { background: #C98A12; }
.ui-table .bar.is-bad i { background: var(--danger); }
/* a figure: left to right, its digits lined up (in a table or anywhere) */
.ui-num { direction: ltr; unicode-bidi: isolate; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* a variant's SKU beside its name (x-ui.sku): small, monospace, left to right;
   "SKU" is drawn here so copying the caption copies the code alone */
.ui-sku { display: inline-block; margin-inline-start: 6px; font: 500 11px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; color: var(--muted); white-space: nowrap; vertical-align: baseline; }
.ui-sku::before { content: "SKU"; margin-inline-end: 4px; font-size: 9px; letter-spacing: .04em; opacity: .75; }
.ui-sku bdi { direction: ltr; unicode-bidi: isolate; }
.ui-sku.is-block { display: block; margin-inline-start: 0; }
/* a long code wraps rather than push a phone screen sideways */
@media (max-width: 767px) { .ui-sku { white-space: normal; overflow-wrap: anywhere; } }
/* a product's name leading to its page (x-ui.product): the text's own colour over a faint
   underline (a phone has no hover to tell it is a link), the brand's on hover */
a.ui-product-link { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a.ui-product-link:hover, a.ui-product-link:focus-visible { color: var(--brand-700); text-decoration-color: currentColor; }
/* on paper a link is only its text: an invoice prints the name, not a faint underline */
@media print { a.ui-product-link { text-decoration: none; } }
body .ui-table-wrap { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
/* inside a padded card: the card is the border, the header row rounds its corners */
body .ui-table-wrap.is-bare { border: 0; border-radius: 0; background: transparent; }
.ui-table-wrap.is-bare .ui-table th:first-child { border-start-start-radius: var(--r-sm); }
.ui-table-wrap.is-bare .ui-table th:last-child { border-start-end-radius: var(--r-sm); }
@media (max-width: 767px) {
    .ui-table.is-stacked, .ui-table.is-stacked :is(tbody, tr, td) { display: block; width: auto; }
    .ui-table.is-stacked :is(thead, tfoot) { display: none; }
    .ui-table.is-stacked tbody tr { margin: 0 0 10px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
    .ui-table.is-stacked tbody tr:last-child { margin-bottom: 0; }
    .ui-table.is-stacked tbody tr:hover { background: var(--surface); }
    body .ui-table.is-stacked td { padding: 5px 0; border: 0; white-space: normal; }
    body .ui-table.is-stacked td[data-label] { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; text-align: end; }
    .ui-table.is-stacked td[data-label]::before { content: attr(data-label); flex: none; font-size: var(--fs-caption); font-weight: var(--w-semi); color: var(--muted); text-align: start; }
    body .ui-table.is-stacked td:not([data-label]) + td[data-label] { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
    /* a cell too rich for one line (a price change, buttons) puts its label above it */
    body .ui-table.is-stacked td[data-label].is-block { display: block; text-align: start; }
    .ui-table.is-stacked td[data-label].is-block::before { display: block; margin-bottom: 5px; }
    /* in a card without padding the cards keep off its edges */
    .ui-table.is-stacked.is-inset tbody tr, .ui-table.is-stacked.is-inset tbody tr:last-child { margin: 12px; }
}

/* --- tabs (a list's main filter, each with its count) --- */
.ui-tabs {
    display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
    margin: 0 0 12px; padding: 4px; box-sizing: border-box;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md);
}
.ui-tabs::-webkit-scrollbar { display: none; }
body.ui .ui-tab {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
    min-height: 40px; padding: 0 14px; border-radius: var(--r-sm);
    color: var(--muted); font-size: var(--fs-small); font-weight: var(--w-semi); white-space: nowrap;
    transition: background var(--fast), color var(--fast);
}
body.ui .ui-tab:hover { color: var(--ink); background: rgba(255, 255, 255, .7); }
body.ui .ui-tab.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.ui-tab-count {
    min-width: 24px; height: 22px; padding: 0 7px; border-radius: 99px; box-sizing: border-box;
    display: inline-grid; place-items: center;
    background: var(--line); color: var(--ink-2); font-size: 11px; font-weight: var(--w-bold);
}
.ui-tab.is-active .ui-tab-count { background: var(--ink); color: #fff; }
/* a place's strip with its «المزيد» beside it: the strip scrolls, the menu opens outside it (_section_tabs) */
.ui-tabs-row { display: flex; gap: 8px; align-items: stretch; margin: 0 0 12px; }
.ui-tabs-row > .ui-tabs { flex: 1 1 auto; min-width: 0; margin: 0; }
.ui-tabs-more { flex: 0 0 auto; }
.ui-tabs-more > summary.ui-btn { height: 100%; min-height: 50px; white-space: nowrap; }
.ui-tabs-more > summary.ui-btn.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.ui-tabs-more .ui-menu-item[aria-current="page"] { background: var(--surface-2); font-weight: var(--w-semi); }
.ui-tabs-row + .ui-chips { margin-top: -4px; }

/* --- chips (a second, finer filter) --- */
.ui-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
body.ui .ui-chip {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 34px; padding: 0 12px; border-radius: 99px;
    border: 1px solid var(--line); background: var(--surface);
    color: var(--ink-2); font-size: var(--fs-caption); font-weight: var(--w-semi); white-space: nowrap;
}
body.ui .ui-chip:hover { border-color: var(--line-strong); color: var(--ink); }
body.ui .ui-chip.is-active { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-900); }
.ui-chip bdi { color: var(--muted); font-weight: var(--w-medium); }
.ui-chip.is-active bdi { color: var(--brand-900); }
.ui-chip .unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); display: inline-block; }
body.ui .ui-chip.is-empty:not(.is-active) { color: var(--muted-2); background: var(--surface-2); }
@media (max-width: 720px) {
    .ui-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad); }
    .ui-chips::-webkit-scrollbar { display: none; }
}

/* --- a list's toolbar: search on the server, then the result line --- */
.ui-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.ui-toolbar-search { position: relative; flex: 1 1 220px; max-width: 560px; margin: 0; }
.ui-toolbar-search > .icon { position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
body .ui-toolbar-search .ui-field { padding-inline-start: 40px; }
.ui-toolbar-end { margin-inline-start: auto; }
.ui-result-line { margin: 0 0 12px; font-size: var(--fs-caption); color: var(--muted); }

/* --- pager --- */
.ui-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 18px 0 4px; }
.ui-pager ul { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; }
.ui-pager p { margin: 0; font-size: var(--fs-caption); color: var(--muted); }
body.ui :is(.ui-pager-btn, .ui-pager-page, .ui-pager-gap) {
    min-width: 40px; height: 40px; padding: 0 10px; box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface);
    color: var(--ink); font-size: var(--fs-small); font-weight: var(--w-semi);
}
body.ui :is(.ui-pager-btn, .ui-pager-page):hover { border-color: var(--line-strong); background: var(--surface-2); }
body.ui .ui-pager-page.is-current { background: var(--ink); border-color: var(--ink); color: #fff; }
body.ui .ui-pager-btn.is-disabled { opacity: .45; pointer-events: none; }
body.ui .ui-pager-gap { border-color: transparent; background: none; color: var(--muted); }
@media (max-width: 720px) {
    .ui-pager-btn span { display: none; }
    .ui-toolbar-end { margin-inline-start: 0; }
}

/* =========================================================================
 * 6. bare markup: what the pages write without a class
 * ========================================================================= */
body label { font-size: var(--fs-caption); font-weight: var(--w-semi); color: var(--ink-2); margin-bottom: 6px; }
/* a field's label sits above its field; the dashboard writes them without a
   class (every storefront label is a .ui-label) */
label:where(:not([class])) { display: inline-block; }

/* =========================================================================
 * 7. print: only the page's own content goes on paper
 * ========================================================================= */
@media print {
    .ui-header, .ui-viewas, .ui-nav, .ui-scrim, .ui-strips, .ui-footer, .ui-bottom, .ui-toasts, .ui-search, .ui-dialog, .ui-skip { display: none !important; }
    .ui-frame { display: block; }
    .ui-content { max-width: none; padding: 0; }
    body.ui { background: #fff; padding: 0; }
}

/* =========================================================================
 * 8. narrow screens: the bar keeps the brand centred
 * ========================================================================= */
@media (max-width: 720px) {
    .ui-header-inner { padding: 0 8px; gap: 4px; }
    .ui-h-start, .ui-h-end { gap: 2px; }
    .ui-brand img { max-height: 28px; }
    .ui-h-hide-sm { display: none !important; }
    .ui-account .ui-account-name, .ui-account .ui-account-chev { display: none; }
    .account-chip { padding: 0 7px; min-height: 40px; }
}
/* a visitor's bar on a phone: «دخول» and «سجّل مجانًا» both show (the menu's 11th line was the only
   way in), so the brand gives up the centre and the two buttons take what is left */
@media (max-width: 720px) {
    .ui-header-inner:has(.ui-h-login) { grid-template-columns: auto auto minmax(0, 1fr); }
    .ui-h-end .ui-h-login, .ui-h-end .ui-h-login + .ui-btn { padding: 0 10px; white-space: nowrap; }
}
/* the bell's badge ran into the logo at 360px: the three buttons beside it and the logo shrink */
@media (max-width: 380px) {
    .ui-brand img { max-height: 22px; }
    .ui-h-end .icon-btn { width: 38px; min-width: 38px; }
    .account-chip { padding: 0 5px; }
}

/* =========================================================================
 * 9. storefront tools: buy mode, client view, cart drawer, help button
 * ========================================================================= */

/* the cart and wishlist endpoints re-render the bar inside this wrapper; it
   must not become a box of its own, or the sticky bar would stick to it */
#header-ajax { display: contents; }

/* an in-flow notice at the top of the content (an account under review…) */
.ui-notice {
    display: flex; align-items: center; gap: 12px;
    margin: 16px 0 4px; padding: 12px 14px;
    border: 1px solid var(--line); border-radius: var(--r-md);
    background: var(--surface); font-size: var(--fs-small); line-height: 1.7;
}
.ui-notice > .icon { flex: 0 0 auto; }
.ui-notice > div { flex: 1; min-width: 0; }
.ui-notice strong { display: block; font-weight: var(--w-semi); color: var(--ink); }
.ui-notice span { display: block; color: var(--muted); font-size: var(--fs-caption); }
/* …not the words on a button or a pill, nor a figure, in the notice: «سجّل كمسوّق مجانًا» read
   grey on the near-black button (3.2:1) on every product page */
.ui-notice :is(.ui-btn, .ui-pill) span, .ui-notice .ui-btn > span { display: inline; color: inherit; font-size: inherit; }
.ui-notice .money { display: inline; color: inherit; font-size: inherit; }
.ui-notice.is-warn { background: #FFF8E6; border-color: #F3E2B0; }
.ui-notice.is-warn > .icon { color: #8B5A08; }
.ui-notice.is-info { background: #EEF3FF; border-color: #D3DEFB; }
.ui-notice.is-info > .icon { color: #2457C6; }
.ui-notice.is-good { background: #E8F7EF; border-color: #CFEADB; }
.ui-notice.is-good > .icon { color: #147A4D; }
.ui-notice.is-bad { background: #FCECEF; border-color: #E8C6CA; }
.ui-notice.is-bad > .icon { color: var(--danger); }
.ui-notice ul { margin: 4px 0 0; padding-inline-start: 18px; list-style: disc; }

/* the client view switch */
.ui-switch { position: relative; display: inline-flex; align-items: center; gap: 8px; margin: 0 4px; cursor: pointer; user-select: none; }
html.is-store .ui-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.ui-switch-track {
    position: relative; flex: 0 0 auto; width: 40px; height: 24px; border-radius: 99px;
    background: var(--line-strong); transition: background var(--normal) var(--ease);
}
.ui-switch-track::before {
    content: ''; position: absolute; top: 3px; inset-inline-start: 3px;
    width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm);
    transition: inset-inline-start var(--normal) var(--ease);
}
.ui-switch input:checked + .ui-switch-track { background: var(--brand); }
.ui-switch input:checked + .ui-switch-track::before { inset-inline-start: 19px; }
.ui-switch input:focus-visible + .ui-switch-track { box-shadow: var(--focus); }
.ui-switch-label { font-size: var(--fs-caption); font-weight: var(--w-semi); color: var(--muted); white-space: nowrap; }
html.is-store .ui-switch-form { display: contents; }

/* the buy mode: a segmented control, in the bar on wide screens and atop the menu on a phone */
.ui-mode { margin: 0; }
.ui-seg {
    display: inline-flex; align-items: center; gap: 2px; padding: 3px;
    border: 1px solid var(--line); border-radius: 99px; background: var(--surface-2);
}
html .ui-seg button {
    appearance: none; border: 0; margin: 0; cursor: pointer; white-space: nowrap;
    padding: 7px 12px; border-radius: 99px; background: transparent; color: var(--muted);
    font: inherit; font-size: var(--fs-caption); font-weight: var(--w-semi); line-height: 1;
    transition: background var(--fast), color var(--fast);
}
html .ui-seg button:hover { color: var(--ink); }
html .ui-seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
html .ui-seg button[value="supply"][aria-pressed="true"] { background: var(--ink); color: #fff; }
.ui-nav-head { padding: 2px 2px 12px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.ui-nav-mode, .ui-nav-mode .ui-seg { display: flex; width: 100%; }
.ui-nav-mode .ui-seg button { flex: 1; }
.ui-nav-head:has(> .ui-nav-mode:only-child) { display: none; }
@media (max-width: 720px) {
    .ui-h-mode { display: none !important; }
    .ui-nav-head:has(> .ui-nav-mode:only-child) { display: block; }
}
@media (max-width: 940px) {
    .ui-switch-label { display: none; }
    .ui-switch { margin: 0 2px; }
    .ui-account .ui-account-name, .ui-account .ui-account-chev { display: none; }
    .account-chip { padding: 0 7px; }
}

/* the supply tint reaches the bar too, so the marketer always knows the mode */
body.mode-supply .ui-header { box-shadow: inset 0 -2px 0 var(--brand); }

/* the cart drawer (inline-end side, under the bar, above the phone bar) */
.sf-cart {
    position: fixed; top: var(--header); bottom: 0; inset-inline-end: 0; z-index: 40;
    width: min(360px, 92vw); box-sizing: border-box;
    display: flex; flex-direction: column;
    background: var(--surface); border-inline-start: 1px solid var(--line); box-shadow: var(--shadow-md);
}
html .sf-cart-scrim { position: fixed; inset: var(--header) 0 0 0; z-index: 39; border: 0; padding: 0; margin: 0; background: rgba(8, 21, 16, .48); cursor: pointer; }
.sf-cart-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 10px 10px 16px; border-bottom: 1px solid var(--line); }
.sf-cart-head strong { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-small); font-weight: var(--w-semi); }
.sf-cart-total { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 12px 16px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.sf-cart-total strong { font-size: var(--fs-h3); font-weight: var(--w-bold); }
.sf-cart-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px; }
.sf-cart-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) 38px; gap: 10px; align-items: start; padding: 10px 8px; border-radius: var(--r-md); }
.sf-cart-row + .sf-cart-row { border-top: 1px solid var(--line); border-radius: 0; }
.sf-cart-row img { width: 56px; height: 56px; border-radius: var(--r-sm); object-fit: cover; border: 1px solid var(--line); }
body.ui .sf-cart-row h3 { margin: 0; font-size: var(--fs-small); font-weight: var(--w-semi); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sf-cart-meta { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 2px 10px; }
.sf-cart-row .icon-btn { width: 38px; height: 38px; min-width: 38px; color: var(--muted); }
.sf-cart-row .icon-btn:hover { color: var(--danger); background: #FCECEF; border-color: #E8C6CA; }
.sf-cart-row.is-supply { background: var(--brand-soft); }
.sf-cart-tag { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: var(--w-semi); background: var(--surface); border: 1px solid var(--brand); color: var(--brand-900); }
.sf-cart-tag .icon { width: 14px; height: 14px; }
.sf-cart-hold { display: block; margin-top: 4px; font-size: var(--fs-caption); color: var(--brand-900); }
.sf-cart-hold.is-dead { color: var(--danger); font-weight: var(--w-semi); }
.sf-cart-note { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 10px; padding: 9px 11px; border-radius: var(--r-md); background: #FCECEF; border: 1px solid #E8C6CA; color: var(--danger); font-size: var(--fs-caption); line-height: 1.6; }
.sf-cart-empty { padding: 36px 16px; text-align: center; color: var(--muted); }
.sf-cart-empty .icon { display: block; margin: 0 auto 10px; color: var(--muted-2); }
.sf-cart-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.sf-cart-foot .ui-btn { width: 100%; }

/* the help button (WhatsApp), clear of the phone bar */
.ui-fab {
    position: fixed; bottom: 24px; inset-inline-end: 24px; z-index: 34;
    width: 54px; height: 54px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--brand); color: #06120D !important; box-shadow: var(--shadow-md);
    transition: transform var(--normal) var(--ease), background var(--fast);
}
.ui-fab:hover { background: var(--brand-700); color: #fff !important; transform: translateY(-2px); }
.ui-fab .icon { width: 26px; height: 26px; }
html:is(.ui-cart-open, .ui-nav-open, .ui-search-open) .ui-fab { opacity: 0; visibility: hidden; pointer-events: none; }
@media (max-width: 720px) {
    .ui-fab { bottom: calc(80px + env(safe-area-inset-bottom)); inset-inline-end: 14px; width: 48px; height: 48px; }
}

@media print {
    .ui-fab, #side-cart, .ui-notice { display: none !important; }
}

/* =========================================================================
 * 10. dashboard screens: a person's page, the home's action list
 * ========================================================================= */
.account-avatar.is-xl { width: 64px; height: 64px; border-radius: 20px; font-size: 24px; }

.person-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 24px 0 18px; }
.person-id { flex: 1 1 320px; min-width: 0; }
.person-id .ui-eyebrow { margin-bottom: 2px; }
body.ui .person-id h1 { margin: 0 0 6px; font-size: var(--fs-h2); }
.person-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.person-actions form { margin: 0; }

.person-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
/* minmax(0, …), not the implicit auto column: a wide table scrolls in its wrapper instead of pushing the card off a phone */
.person-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; min-width: 0; }
.person-section .ui-section-head { margin-bottom: 14px; align-items: center; }
body.ui .person-section h2, body.ui .person-side h2 { font-size: var(--fs-h3); margin: 0; }
.person-families { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-bottom: 14px; }
body.ui .person-family {
    display: flex; flex-direction: column; gap: 2px; padding: 10px 12px;
    border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); color: var(--ink);
}
body.ui a.person-family:hover { border-color: var(--line-strong); background: var(--surface); }
.person-family span { font-size: 11px; color: var(--muted); font-weight: var(--w-semi); }
.person-family strong { font-size: var(--fs-h3); font-weight: var(--w-bold); }
.person-table .ui-table td { font-size: var(--fs-caption); }
.person-list { list-style: none; margin: 0; padding: 0; }
.person-list li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--line); font-size: var(--fs-small); }
.person-list li:first-child { border-top: 0; padding-top: 0; }
.person-list-ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); flex: 0 0 auto; }
.person-list a { font-weight: var(--w-semi); }
.person-side { position: sticky; top: calc(var(--header) + 16px); }
.person-facts { margin: 12px 0 0; }
.person-facts > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; padding: 9px 0; border-top: 1px solid var(--line); }
.person-facts > div:first-child { border-top: 0; }
.person-facts dt { font-size: 11px; color: var(--muted); font-weight: var(--w-semi); }
.person-facts dd { margin: 0; font-size: var(--fs-caption); overflow-wrap: anywhere; }
.person-side-links { display: grid; gap: 8px; margin-top: 14px; }
@media (max-width: 1100px) {
    .person-grid { grid-template-columns: minmax(0, 1fr); }
    .person-side { position: static; }
}

/* the home screen: queues first, then today, then the latest orders */
.home-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; margin-bottom: 18px; }
body.ui .home-action {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    color: var(--ink); transition: border-color var(--fast), box-shadow var(--fast), transform var(--fast);
}
body.ui .home-action:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); transform: translateY(-1px); color: var(--ink); }
.home-action-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto; background: #FFF5DA; color: #8B5A08; }
.home-action-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.home-action-body strong { font-size: var(--fs-small); font-weight: var(--w-semi); line-height: 1.5; }
.home-action-body small { font-size: 11px; color: var(--muted); line-height: 1.6; }
.home-action-extra { color: var(--ink-2) !important; font-weight: var(--w-semi); }
/* the what-to-do line two lines at most, the figures one: the whole of each is in its title */
.home-action-hint { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.home-action-extra { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-action-count { font-size: 26px; font-weight: var(--w-bold); line-height: 1; color: var(--ink); }
body.ui .home-action.is-clear { background: var(--surface-2); }
/* the empty queues: one line, opened on demand */
.home-clear { margin: -8px 0 18px; }
.home-clear > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 10px 14px; border: 1px dashed var(--line-strong); border-radius: var(--r-lg); cursor: pointer; color: #147A4D; font-weight: var(--w-semi); font-size: var(--fs-small); list-style: none; }
.home-clear > summary::-webkit-details-marker { display: none; }
.home-clear[open] > summary { margin-bottom: 10px; }
.home-clear .home-actions { margin-bottom: 0; }
.money-today { margin-bottom: 18px; }
.home-action.is-clear .home-action-ico { background: #E8F7EF; color: #147A4D; }
.home-action.is-clear .home-action-count { color: var(--muted-2); font-size: 20px; }
.home-today { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 18px; }
body.ui .home-today > * { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.home-today span { font-size: 11px; font-weight: var(--w-semi); color: var(--muted); }
.home-today strong { font-size: 24px; font-weight: var(--w-bold); line-height: 1.3; }
.home-today small { font-size: 11px; color: var(--muted); }
body.ui .home-today > a:hover { border-color: var(--line-strong); }
.home-latest .ui-section-head { align-items: center; }
body.ui .home-latest h2 { font-size: var(--fs-h3); margin: 0; }
/* «تنبيهات المخزون» on the home: what reached its minimum, and what runs out within a week */
.home-stock { margin-bottom: 18px; }
.home-stock-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.home-stock-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
body.ui .home-stock h3 { font-size: 15px; font-weight: var(--w-bold); margin: 0; }

/* one title size inside any dashboard card (they ranged from 15px to 24px on the
   same page); the storefront's cards size their own titles */
:where(.is-admin) body.ui :is(.pform-card, .create-panel, .ui-card, .customer-card, .products-card) > h2,
:where(.is-admin) body.ui :is(.pform-card, .ui-card) .ui-section-head h2,
:where(.is-admin) body.ui .inv-details > summary h2 { font-size: 18px; font-weight: var(--w-bold); line-height: 1.45; margin: 0 0 6px; }
body.ui .create-panel > h2 { display: flex; align-items: center; gap: 8px; }

/* a collapsible card: the chevron sits at the end of its title row (it floated into a column of its own) */
body .inv-details > summary { position: relative; padding-inline-end: 30px; }
body .inv-details > summary::before { position: absolute; float: none; inset-inline-end: 6px; top: 8px; margin: 0; }
body .inv-details[open] > summary::before { top: 12px; margin: 0; }
body .inv-details > summary .hint { font-size: var(--fs-caption); color: var(--muted); }

/* the order page's head: status and dates under the number */
.order-page-head .ui-page-title h1 small { font-size: .55em; font-weight: var(--w-semi); }
.order-page-head .ui-page-title p.cluster { gap: 8px; margin-top: 8px; max-width: none; }
/* in a column of several cards a sticky summary slides over the cards under it */
.order-side .summary-card { position: static; }

/* =========================================================================
 * 11. shared details: links in content, raised cards, the cart spinner, the
 *     FAQ caret, stars, plain tables in a storefront page, the supply tint
 * ========================================================================= */

/* a plain text link in the content reads as a link, on both sides */
:where(.ui-content) a:not([class]) { color: var(--brand-700); }
:where(.ui-content) a:not([class]):hover { color: var(--brand-900); text-decoration: underline; text-underline-offset: 3px; }

.ui-card.is-flat { box-shadow: none; }
.ui-card.is-raised { box-shadow: var(--shadow-sm); }

/* the in-flight spinner the cart scripts inject */
@keyframes v10spin { to { transform: rotate(360deg); } }

/* A form that was sent: its button spins in place and takes no further press
   (ui.js marks it). The label stays, so the button keeps its width and the
   layout does not jump. */
body .ui-btn.is-busy { position: relative; color: transparent !important; pointer-events: none; }
body .ui-btn.is-busy > * { visibility: hidden; }
body .ui-btn.is-busy::after {
    content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
    width: 18px; height: 18px; margin: -9px 0 0 -9px;
    border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
    color: var(--ink); animation: v10spin .7s linear infinite;
}
body .ui-btn.is-primary.is-busy::after, body .ui-btn.is-brand.is-busy::after, body .ui-btn.is-danger.is-busy::after { color: #fff; }
@media (prefers-reduced-motion: reduce) { body .ui-btn.is-busy::after { animation-duration: 2s; } }

/* the FAQ caret and a rating without an icon font */
.faq-caret { position: absolute; inset-inline-end: 0; margin-top: 4px; transition: transform var(--fast) var(--ease); }
details[open] > summary .faq-caret, .group[open] .faq-caret { transform: rotate(180deg); }

/* supply mode: the tint that tells the marketer where they are; the html
   carries it too, or a short page leaves an untinted strip under the footer */
html:has(body.mode-supply) { background-color: var(--brand-soft); }
body.ui.mode-supply { background-color: var(--brand-soft); }
body.mode-supply :is(.ui-card, .pcard) { background: var(--surface); }

/* =========================================================================
 * 12. the modal, one on both sides (components/ui/modal, run by ui.js)
 * ========================================================================= */
body.ui-modal-open { overflow: hidden; }
.ui-modal { position: fixed; inset: 0; z-index: 1050; display: none; overflow-x: hidden; overflow-y: auto; outline: 0; opacity: 0; transition: opacity var(--normal) var(--ease); }
.ui-modal.is-open { opacity: 1; }
.ui-modal-dialog { position: relative; width: auto; margin: 10px; pointer-events: none; transform: translateY(-10px) scale(.98); transition: transform var(--normal) var(--ease); }
.ui-modal.is-open .ui-modal-dialog { transform: none; }
@media (min-width: 576px) { .ui-modal-dialog { max-width: 500px; margin: 28px auto; } }
.ui-modal-card {
    position: relative; display: flex; flex-direction: column; width: 100%; pointer-events: auto; outline: 0;
    background: var(--surface); background-clip: padding-box;
    border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-md);
}
.ui-modal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
body .ui-modal-title { margin: 0; font-size: var(--fs-h3); font-weight: var(--w-semi); line-height: 1.5; }
.ui-modal-close {
    display: inline-grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; padding: 0; margin: 0; margin-inline-start: auto;
    border: 0; border-radius: var(--r-sm); background: transparent; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer;
}
.ui-modal-close:hover { background: var(--surface-2); color: var(--ink); }
.ui-modal-body { position: relative; flex: 1 1 auto; padding: 20px; }
.ui-modal-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--line); }
.ui-modal-foot > * { margin: 0; }
.ui-modal-backdrop { position: fixed; inset: 0; z-index: 1040; background: #07120D; opacity: 0; transition: opacity var(--normal) var(--ease); }
.ui-modal-backdrop.is-open { opacity: .5; }
@media (max-width: 600px) { .ui-modal-body { padding: 16px; } }


/* =========================================================================
 * 13. the dashboard's screen components (was v10-components.css): the
 *     orders board, the order page, product and purchase forms, reports
 * ========================================================================= */
/* layout primitives */
.stack{display:flex;flex-direction:column;gap:18px}
.cluster{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.spread{display:flex;align-items:center;justify-content:space-between;gap:18px}

.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:26px}

.numeric,bdi{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums;display:inline-block}

/* typography contract */
.display{font-size:44px;line-height:1.36;font-weight:var(--w-bold);letter-spacing:-.04em}
.section{padding:34px 0}.section.tight{padding:22px 0}

/* icons + icon buttons */
.icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;display:block;flex-shrink:0}
.icon.sm{width:16px;height:16px}.icon.lg{width:24px;height:24px}
/* inside a .ui-btn or a menu item the icon flows with its label instead of breaking it */
.icon.is-inline{display:inline-block;vertical-align:-.2em;margin-inline-end:.35em}
#back-to-top .icon{width:20px;height:20px;margin-top:15px;color:#fff}
/* ---- variant editor (Backend/product/_variant_editor) ---- */
.variant-editor{display:flex;flex-direction:column;gap:12px}
.ve-toolbar{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border:1px solid var(--line,#e5e7eb);border-radius:12px;background:var(--surface-2,#f8faf9)}
.ve-toolbar-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ve-toolbar-row strong{font-size:13px;margin-inline-end:4px}
.ve-add-input{max-width:320px}
.ve-chips{display:flex;flex-wrap:wrap;gap:6px}
.ve-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 8px 3px 6px;border-radius:999px;background:#fff;border:1px solid var(--line,#e5e7eb);font-size:12px;font-weight:600}
.ve-chip.is-new{border-style:dashed;border-color:var(--brand,#0dd273)}
.ve-chip-x{display:inline-flex;border:0;background:none;padding:0;color:var(--muted,#6b7280);cursor:pointer;line-height:0}
.ve-chip-x .icon{width:13px;height:13px}
.ve-chip-x:hover{color:var(--danger,#dc2626)}
.ve-table-wrap{overflow-x:auto}
.ve-table .ve-num{width:44px;color:var(--muted,#6b7280);white-space:nowrap}
.ve-table .ve-actions{width:64px;white-space:nowrap;text-align:end}
.ve-table tr.is-dup td{background:#fff1f2}
.ve-table tr.is-dup td:first-child{box-shadow:inset 3px 0 0 var(--danger,#dc2626)}
.ve-table input.ve-value{min-width:110px}
.ve-table input.ve-num-input{min-width:84px}
.ve-table input.ve-sku{min-width:120px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px}
.ve-table td select.ui-field{min-width:96px}
.ve-fill{border:0;background:none;padding:0 2px;color:var(--muted,#6b7280);cursor:pointer;vertical-align:middle;line-height:0}
.ve-fill .icon{width:13px;height:13px}
.ve-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:1px solid var(--line,#e5e7eb);border-radius:7px;background:#fff;color:var(--ink,#111);cursor:pointer}
.ve-icon-btn.is-danger{color:var(--danger,#dc2626)}
.ve-icon-btn:hover{background:var(--surface-2,#f8faf9)}
.ve-table-foot{display:flex;align-items:center;gap:12px}
.ve-errors:empty{display:none}
.ve-error,.ve-flash{padding:6px 10px;border-radius:8px;font-size:12px;margin-bottom:4px;background:#fff1f2;color:#9f1239}
.ve-flash.is-ok{background:#ecfdf5;color:#065f46}
.ve-generator{border:1px dashed var(--line,#e5e7eb);border-radius:12px;padding:10px 14px}
.ve-generator summary{cursor:pointer;font-weight:600;font-size:13px;display:flex;align-items:center;gap:6px}
.ve-gen-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;margin-top:8px}
.ve-gen-grid label{display:flex;flex-direction:column;gap:3px;font-size:12px;margin:0}
.ve-gen-actions{display:flex;align-items:center;gap:10px;margin-top:8px}
.pp-table{max-width:720px}
.pp-table td:last-child{width:40px}

.icon-btn{width:44px;height:44px;min-width:44px;border:1px solid transparent;border-radius:var(--r-sm);background:transparent;color:var(--ink);display:inline-grid;place-items:center;transition:background var(--fast),border-color var(--fast),transform var(--fast);padding:0}
.icon-btn:hover{background:var(--surface-2);border-color:var(--line);color:var(--ink)}
.icon-btn:active{transform:scale(.96)}
.icon-btn.relative{position:relative}
.icon-btn .count-badge{position:absolute;top:1px;left:1px;min-width:17px;height:17px;border-radius:99px;background:var(--brand);border:2px solid white;font-size:9px;font-weight:700;display:grid;place-items:center;color:#03150C}

/* header (V10 site-header grid inside the stock .main-header shell) */

.brand{display:flex;align-items:center;justify-content:center;min-width:138px}
.brand img{height:38px;width:auto}
.account-chip{min-height:42px;border:1px solid var(--line);border-radius:var(--r-md);padding:0 11px;display:flex;align-items:center;gap:8px;background:white;font-size:12px;font-weight:var(--w-semi);color:var(--ink);cursor:pointer}
.account-avatar{width:24px;height:24px;border-radius:50%;background:var(--ink);color:white;display:grid;place-items:center;font-size:10px;overflow:hidden}
.account-avatar img{width:100%;height:100%;object-fit:cover}

/* orders page */
.orders-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.orders-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.orders-search{position:relative;min-width:260px}
/* the search box's form takes no room of its own: the box stays a tool among the others */
.board-search-form{display:contents}
.orders-search .icon{position:absolute;inset-inline-start:13px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.orders-search .ui-field{padding-inline-start:40px}
.orders-filter-btn{position:relative}
.filter-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--ink);color:#fff;font-size:10px;font-weight:var(--w-semi)}
.orders-filter-panel{display:none;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;margin-bottom:14px;box-shadow:var(--shadow-sm)}
.orders-filter-panel.open{display:block}
.orders-filter-panel h3{font-size:15px;margin-bottom:12px}
.orders-filter-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.check-chip{display:flex;align-items:center;gap:10px;min-height:48px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);cursor:pointer;margin:0}
.check-chip input{accent-color:var(--brand);margin:0;width:16px;height:16px;min-height:0}
.check-chip strong{font-size:12px;display:block}
.check-chip span{display:block;font-size:10px;color:var(--muted);margin-top:2px}
.orders-filter-actions{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px}
.orders-filter-summary{font-size:11px;color:var(--muted)}
.orders-board{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.orders-head-row,.premium-order-row{display:grid;grid-template-columns:150px minmax(240px,1fr) 150px 120px 150px 110px;gap:16px;align-items:center}
.orders-head-row{padding:12px 18px;background:var(--surface-2);color:var(--muted);font-size:10px;font-weight:var(--w-semi)}
.order-list{display:flex;flex-direction:column}
.premium-order-row{width:100%;border:0;border-bottom:1px solid var(--line);background:var(--surface);padding:16px 18px;text-align:start;transition:background var(--fast),transform var(--fast);color:var(--ink)}
.premium-order-row:last-child{border-bottom:0}
.premium-order-row:hover{background:#FBFDFC}
.premium-order-row.unread{background:var(--brand-soft)}
.order-ref strong{font-size:16px;display:flex;align-items:center;gap:6px}
.order-ref .unread-dot{width:8px;height:8px;border-radius:50%;background:var(--brand);display:inline-block}
.order-ref small,.order-customer small,.order-money small{display:block;color:var(--muted);font-size:10px;margin-top:3px}
.order-customer{display:grid;grid-template-columns:38px minmax(0,1fr);gap:10px;align-items:center}
.order-customer-meta strong{font-size:14px;display:block}
.order-customer-meta .contact{display:flex;gap:4px;margin-top:6px}
.order-customer-meta .contact a{width:30px;height:30px;border-radius:9px;border:1px solid var(--line);display:grid;place-items:center;color:var(--ink);background:var(--surface)}
.order-customer-meta .contact a:hover{background:var(--surface-2);color:var(--brand-700)}
.order-products{font-size:11px;color:var(--muted);margin-top:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mini-avatar{width:38px;height:38px;border-radius:12px;background:var(--ink);color:white;display:grid;place-items:center;font-size:12px;font-weight:var(--w-semi)}
.order-money strong{font-size:14px;display:block}
.order-money.profit strong{color:var(--brand-700)}
.order-marketer strong{font-size:13px;display:block}
.order-marketer small{display:block;color:var(--muted);font-size:10px;margin-top:3px;direction:ltr;text-align:end}
.order-marketer .ui-btn{margin-top:6px}
.order-open{display:flex;gap:6px;justify-content:flex-end;align-items:center;flex-wrap:wrap}
.order-open form.order-quick{margin:0;display:flex}
.order-status{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:6px 10px;font-size:10px;font-weight:var(--w-semi);width:max-content;line-height:1.4}
.order-status.pending{color:#8B5A08;background:#FFF5DA}
.order-status.confirmed{color:#2457C6;background:#EEF3FF}
.order-status.preparing{color:#7650A8;background:#F4EEFF}
.order-status.shipping{color:#0B6B78;background:#E8F8FA}
.order-status.done{color:#147A4D;background:#E8F7EF}
.order-status.rejected{color:#A52E3B;background:#FCECEF}

/* order detail */

.order-number{font-size:42px;font-weight:var(--w-bold);line-height:1.25}

.order-status-card{display:flex;align-items:center;justify-content:space-between;gap:20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;margin-bottom:20px}
.current-state{display:flex;align-items:center;gap:12px}
.state-icon{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand-900)}
.current-state strong{display:block;font-size:16px}
.current-state span{font-size:11px;color:var(--muted)}
.order-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;align-items:start}
.customer-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px}
.customer-card h2{font-size:19px;margin-bottom:15px}
.customer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.label-value span{display:block;font-size:10px;color:var(--muted)}
.label-value strong{font-size:13px}
.order-product{display:grid;grid-template-columns:62px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.order-product:last-child{border-bottom:0}
.order-product img,.order-product .thumb-fallback{width:62px;height:62px;object-fit:cover;border-radius:10px;background:var(--surface-2)}
.order-product .thumb-fallback{display:grid;place-items:center;color:var(--muted)}
.order-product strong{font-size:13px;display:block}
.updates{margin-top:20px}
.updates details{border-bottom:1px solid var(--line)}
.updates summary{cursor:pointer;padding:14px 0;font-weight:var(--w-medium)}

/* summary card (dark) */
.summary-card{background:var(--ink);color:white;border-radius:var(--r-lg);padding:20px;position:sticky;top:calc(var(--header) + 22px)}
.summary-card h3{font-size:17px;margin-bottom:13px;color:white}
.summary-line{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid #23372F;font-size:12px}
.summary-line span{color:#B8C5BF}
.summary-line strong{font-size:13px;color:white}
.summary-line.profit strong{color:var(--brand)}
.summary-line.total{border-bottom:0;border-top:1px solid #31483E;margin-top:6px;padding-top:15px}
.summary-line.total strong{font-size:18px}
.summary-card .ui-btn{width:100%;margin-top:15px}
.summary-card .ui-btn.is-light{background:white!important;color:var(--ink)!important;border-color:white!important}
.summary-card .ui-field{background:#10271D;border-color:#2B4438;color:white}
.summary-card label{color:#B8C5BF}
.summary-card .ui-help{color:#8FA39A}
/* the light-surface grey is 3.2:1 on this dark card; its own secondary grey is 7:1 */
.summary-card .text-muted{color:#8FA39A}

/* forms */
.form-section{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;margin-bottom:14px}
.form-section h2{font-size:19px;margin-bottom:18px}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.field.full,.fields .full{grid-column:1/-1}
.ui-help{font-size:11px;color:var(--muted);margin-top:6px}

/* the orders list with its selection column (orders/index, data-board) */
.orders-bulk-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 10px}
.orders-board.is-selectable .orders-head-row,.orders-board.is-selectable .premium-order-row{grid-template-columns:36px 150px minmax(240px,1fr) 150px 120px 150px 110px}
@media(max-width:1300px){.orders-board.is-selectable .orders-head-row,.orders-board.is-selectable .premium-order-row{grid-template-columns:36px 130px minmax(200px,1fr) 140px 110px 130px 100px}}
/* a denser row (~96px): the reference on one line, the phone and its three links on one, the store with its WhatsApp on one,
   the actions two by two inside their column (nothing clipped by the board) */
@media(min-width:768px){
  .orders-board.is-selectable .premium-order-row{padding:10px 14px}
  .orders-board.is-selectable .orders-head-row{padding:10px 14px}
  .orders-board .order-ref strong{white-space:nowrap;font-size:14px}
  .orders-board .order-customer-meta .contact{align-items:center;margin-top:3px}
  .orders-board .order-customer-meta .contact small{margin:0 0 0 4px}
  .orders-board .order-customer-meta .contact a{width:26px;height:26px;border-radius:8px}
  .orders-board .order-products{margin-top:3px;-webkit-line-clamp:1}
  .orders-board .order-open{gap:4px}
  .ui-tabs.orders-tabs{flex-wrap:wrap;gap:2px}
  body.ui .orders-tabs .ui-tab{padding:0 10px;gap:6px}
  .orders-board .order-customer-meta .contact{flex-wrap:wrap}
  .orders-board .order-customer{grid-template-columns:minmax(0,1fr)}
  .orders-board .order-customer .mini-avatar{display:none}
}
.orders-result-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.orders-result-row .ui-result-line{margin:0}
.order-marketer-line{display:flex;align-items:center;gap:6px;min-width:0}
.order-marketer-line strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.order-marketer-wa{flex:0 0 auto;width:26px;height:26px;border-radius:8px;border:1px solid var(--line);display:grid;place-items:center;color:var(--ink);background:var(--surface)}
.order-marketer-wa:hover{background:var(--surface-2);color:var(--brand-700)}
@media(max-width:767px){
  .orders-board.is-selectable .premium-order-row{grid-template-columns:auto 1fr auto;grid-template-areas:"check ref status" "customer customer customer" "total total marketer" "open open open"}
  .orders-board.is-selectable .premium-order-row>.board-check{grid-area:check;align-self:start}
}

/* home */


/* responsive */
@media(max-width:1300px){
  .orders-head-row,.premium-order-row{grid-template-columns:130px minmax(200px,1fr) 140px 110px 130px 100px;gap:12px}
}
@media(max-width:1100px){
  .order-grid{grid-template-columns:minmax(0,1fr) 330px}

  .grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:820px){
  .order-grid{grid-template-columns:minmax(0,1fr)}
  .summary-card{position:static}

  .fields{grid-template-columns:1fr}
  .orders-toolbar{flex-direction:column;align-items:stretch}
  .orders-tools{width:100%}
  .orders-search{flex:1}
}
@media(max-width:767px){
  .orders-head-row{display:none}
  .orders-board{background:transparent;border:0;overflow:visible}
  .orders-filter-grid{grid-template-columns:1fr}
  .orders-filter-actions{flex-direction:column;align-items:stretch}
  .premium-order-row{grid-template-columns:1fr auto;grid-template-areas:"ref status" "customer customer" "total marketer" "open open";gap:11px;border:1px solid var(--line);border-radius:14px;margin-bottom:9px;padding:14px}
  .order-ref{grid-area:ref}
  .premium-order-row>.order-status-cell{grid-area:status;justify-self:end}
  .order-customer{grid-area:customer;padding-block:9px;border-block:1px solid var(--line)}
  .premium-order-row>.order-money{grid-area:total}
  .premium-order-row>.order-marketer{grid-area:marketer;text-align:end}
  .order-open{grid-area:open;justify-content:stretch}
  .order-open .ui-btn{flex:1}
  .order-open form.order-quick{flex:1}
  .order-status{font-size:9px;padding:5px 7px}
  .order-number{font-size:36px}
  .order-status-card{align-items:flex-start;flex-direction:column}
  .customer-grid{grid-template-columns:1fr 1fr}

  .brand{min-width:110px}.brand img{height:31px}
  .account-chip span:last-child{display:none}
}
@media(max-width:600px){
  .customer-grid{grid-template-columns:1fr}
}

/* fixes after first render */

.premium-order-row .order-status{width:auto;max-width:100%}
.premium-order-row .order-status span{white-space:normal;line-height:1.35}
@media(max-width:767px){
  /* clip, not hidden: hidden makes html and body scroll containers, which
     turns position:sticky off, so the header (.ui-header) scrolled away on a
     phone. clip cuts the sideways overflow the same way and keeps the header
     pinned. A browser without clip (Safari before 16) keeps hidden. */
  html,body{overflow-x:hidden;overflow-x:clip}
  .orders-tools{flex-direction:column;align-items:stretch}
  .orders-search{min-width:0}
  .orders-tools .ui-btn{width:100%}
}

/* ---------- mobile (V10 ≤820 / ≤600) ---------- */

@media(max-width:820px){
  :root{--fs-h1:30px;--fs-h2:22px;--fs-h3:17px;--header:66px}

  .icon-btn{width:40px;height:40px;min-width:40px}
}
@media(max-width:600px){
  /* 11px captions and 12px small print were below what a phone reads comfortably */
  :root{--fs-h1:28px;--fs-h2:21px;--fs-h3:16px;--fs-body:14px;--fs-small:13px;--fs-caption:12px}
  body{padding-bottom:78px}
  /* under 16px iOS zooms the page into a field when it is tapped, and leaves it zoomed */
  body .ui-field,body .ui-field.is-sm{font-size:16px}
  /* a small button is still a finger's target on a phone */
  body .ui-btn.is-sm{min-height:44px;font-size:13px}

  .orders-toolbar{margin-bottom:10px;gap:8px}
  .orders-filter-panel{padding:14px;border-radius:14px}
  .check-chip{min-height:44px;padding:10px 12px}
  .premium-order-row{padding:12px;gap:9px;border-radius:14px}
  .order-ref strong{font-size:15px}
  .order-products{-webkit-line-clamp:1}
  .order-open .ui-btn{min-height:42px}
  .order-marketer .ui-btn{min-height:36px;padding:4px 10px}
  .order-customer-meta .contact a{width:34px;height:34px}

  .order-number{font-size:34px}

  .order-status-card{padding:14px;gap:12px}
  .state-icon{width:40px;height:40px}
  .customer-card,.form-section{padding:16px;border-radius:14px}
  .customer-card h2,.form-section h2{font-size:17px;margin-bottom:12px}
  .fields{gap:12px}
  .customer-grid{gap:12px}
  .order-product{grid-template-columns:52px minmax(0,1fr) auto;gap:10px}
  .order-product img,.order-product .thumb-fallback{width:52px;height:52px}
  .summary-card{padding:16px;border-radius:14px}

  }

/* analytics */
.range-form{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.range-form .field{min-width:160px}
.range-chips{display:flex;gap:6px;flex-wrap:wrap}
.range-chips a{border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:12px;color:var(--ink);background:var(--surface)}
.range-chips a.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.chart-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px}
.chart-panel h3{font-size:16px;margin:0}
.chart-panel .chart-note{font-size:11px;color:var(--muted);margin-top:3px}
.chart-panel .chart-box{position:relative;height:280px;margin-top:14px}
.chart-panel .chart-box.tall{height:360px}
.chart-panel .chart-box.short{height:220px}
.chart-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:16px}
.chart-grid .wide{grid-column:1/-1}
.legend-note{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--muted);margin-top:10px}
.legend-note i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-inline-end:5px;vertical-align:middle}
@media(max-width:820px){.chart-grid{grid-template-columns:minmax(0,1fr)}.chart-panel .chart-box{height:240px}.chart-panel .chart-box.tall{height:320px}}

/* the dialog takes focus, not the button, so no ring is drawn on a mouse open */


/* ---- product form (Backend/product/add, edit) ---- */
.pform{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
@media (max-width:1100px){.pform{grid-template-columns:1fr}}
.pform-main,.pform-side{display:flex;flex-direction:column;gap:14px;min-width:0}
.pform-side{position:sticky;top:84px}
.pform-card{background:#fff;border:1px solid var(--line,#e5e7eb);border-radius:14px;padding:18px 20px}
.pform-card>h2{margin:0 0 4px;font-size:15px;font-weight:700}
.pform-card>p.ui-lead{margin:0 0 14px;font-size:12px;color:var(--muted,#6b7280);line-height:1.7}
.pform-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.pform-field:last-child{margin-bottom:0}
.pform-field>label{font-size:12px;font-weight:600;color:var(--ink,#111)}
.pform-field>label .req{color:var(--danger,#dc2626);margin-inline-start:3px}
.pform-field.is-missing>label{color:var(--danger,#dc2626)}
.pform-field.is-missing .dz,.pform-field.is-missing .ck-editor__editable_inline{border-color:var(--danger,#dc2626)}
.pform-field .hint{font-size:11px;color:var(--muted,#6b7280);line-height:1.6}
.pform-field .ui-field{border-radius:10px;min-height:42px}
.pform-field textarea.ui-field{min-height:110px}
.pform-card .ck-editor__editable_inline{min-height:140px;max-height:460px;overflow:auto;border-radius:0 0 10px 10px}
.pform-field:has(#summary) .ck-editor__editable_inline{min-height:90px}
.pform-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:640px){.pform-grid2{grid-template-columns:1fr}}
.pform-actions{display:flex;flex-direction:column;gap:8px}
.pform-actions .ui-btn{min-height:44px;font-weight:700}
.pform-status{display:flex;gap:8px}
.pform-status label{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;min-height:40px;border:1px solid var(--line,#e5e7eb);border-radius:10px;cursor:pointer;font-size:13px;font-weight:600;margin:0}
.pform-status input{position:absolute;opacity:0;width:1px;height:1px}
.pform-status label:has(input:checked){border-color:var(--brand,#0dd273);background:#ecfdf5;color:#065f46}
.pform-status label.off:has(input:checked){border-color:#f59e0b;background:#fffbeb;color:#92400e}
/* drop zones */
.dz{border:1.5px dashed var(--line-strong,#cbd5d1);border-radius:12px;padding:16px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;background:var(--surface-2,#f8faf9)}
.dz:hover,.dz.is-over{border-color:var(--brand,#0dd273);background:#ecfdf5}
.dz input{display:none}
.dz .dz-text{font-size:12px;color:var(--muted,#6b7280);line-height:1.7}
.dz .dz-text b{color:var(--ink,#111);font-weight:600;display:block;font-size:13px}
.dz .icon{width:26px;height:26px;color:var(--muted,#6b7280);margin-bottom:6px}
.dz-previews{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.dz-previews:empty{display:none}
.dz-item{position:relative;width:96px}
.dz-item img,.dz-item .dz-file{display:block;width:96px;height:96px;object-fit:cover;border-radius:10px;border:1px solid var(--line,#e5e7eb);background:#fff}
.dz-item .dz-file{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;font-size:10px;color:var(--muted,#6b7280);text-decoration:none}
.dz-item .dz-file .icon{width:22px;height:22px}
.dz-item .dz-name{display:block;font-size:10px;color:var(--muted,#6b7280);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dz-item .dz-x{position:absolute;top:-6px;inset-inline-end:-6px;width:22px;height:22px;border-radius:50%;border:0;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);color:var(--danger,#dc2626);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}
.dz-item .dz-x .icon{width:12px;height:12px}
.dz-main .dz-previews .dz-item,.dz-main .dz-previews img{width:160px;height:160px}
/* tabs on the product page */
.ptabs{display:flex;gap:4px;border-bottom:1px solid var(--line,#e5e7eb);margin-bottom:16px;overflow-x:auto}
.ptabs a{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:2px solid transparent;margin-bottom:-1px;color:var(--muted,#6b7280);font-size:13px;font-weight:600;white-space:nowrap;text-decoration:none}
.ptabs a .count{font-size:11px;padding:1px 7px;border-radius:999px;background:var(--surface-2,#f8faf9);border:1px solid var(--line,#e5e7eb);color:var(--muted,#6b7280)}
.ptabs a:hover{color:var(--ink,#111)}
.ptabs a.is-active{color:var(--brand-700,#047857);border-bottom-color:var(--brand,#0dd273)}
.ptab{display:none}
.ptab.is-active{display:block}
.ve-empty{margin:0 0 6px;font-size:12px;color:#92400e;background:#fffbeb;border:1px solid #fde68a;border-radius:10px;padding:8px 12px;line-height:1.7}

/* ---- checkbox chips (roles, permissions) ---- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip-check{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border:1px solid var(--line,#e5e7eb);border-radius:999px;background:#fff;font-size:12px;font-weight:600;cursor:pointer;margin:0;user-select:none}
.chip-check input{position:absolute;opacity:0;width:1px;height:1px}
.chip-check .icon{width:14px;height:14px;color:var(--muted,#6b7280)}
.chip-check:has(input:checked){border-color:var(--brand,#0dd273);background:#ecfdf5;color:#065f46}
.chip-check:has(input:checked) .icon{color:#065f46}
.chip-check:has(input:focus-visible){outline:2px solid var(--brand-700,#067C44);outline-offset:2px;box-shadow:0 0 0 2px #fff}
.chips-tools{display:flex;gap:10px;margin:0 0 10px;font-size:12px}
.chips-tools button{border:0;background:none;padding:0;color:var(--brand-700,#047857);font-weight:600;cursor:pointer}
.pform-avatar .dz-previews img{border-radius:50%}

/* ---- list boards (users, products, categories, banners, roles) ---- */
.board-chips{display:flex;flex-wrap:wrap;gap:6px}
.board-chip{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px;border:1px solid var(--line,#e5e7eb);border-radius:999px;background:#fff;font-size:12px;font-weight:600;cursor:pointer;color:var(--muted,#6b7280)}
.board-chip .count{font-size:11px;padding:0 6px;border-radius:999px;background:var(--surface-2,#f8faf9)}
.board-chip.is-active{border-color:var(--brand,#0dd273);background:#ecfdf5;color:#065f46}
.board-check{display:flex;align-items:center;justify-content:center}
.board-check input{width:16px;height:16px;accent-color:var(--brand,#0dd273);cursor:pointer}
.board-thumb{width:44px;height:44px;border-radius:10px;object-fit:cover;border:1px solid var(--line,#e5e7eb);background:var(--surface-2,#f8faf9);flex:none}
.board-thumb.is-round{border-radius:50%}
.board-thumb-empty{display:inline-flex;align-items:center;justify-content:center;color:var(--muted,#6b7280)}
.board-tags{display:flex;flex-wrap:wrap;gap:4px}
.board-tag{display:inline-flex;padding:2px 8px;border-radius:999px;background:var(--surface-2,#f8faf9);border:1px solid var(--line,#e5e7eb);font-size:11px;font-weight:600}
.board-actions{display:flex;justify-content:flex-end;gap:6px}
.board-actions .ui-menu-panel{min-width:190px}
.orders-toolbar .orders-tools .ui-btn.is-sm{min-height:34px}
.users-board .orders-head-row,.users-board .premium-order-row{grid-template-columns:36px minmax(220px,1.4fr) minmax(200px,1fr) 150px 130px 110px}
.products-board .orders-head-row,.products-board .premium-order-row{grid-template-columns:36px minmax(260px,2fr) 160px 110px 120px 110px}
.categories-board .orders-head-row,.categories-board .premium-order-row{grid-template-columns:36px minmax(240px,1.6fr) 180px 120px 110px}
.banners-board .orders-head-row,.banners-board .premium-order-row{grid-template-columns:36px minmax(240px,1.6fr) 120px 120px 110px}
.roles-board .orders-head-row,.roles-board .premium-order-row{grid-template-columns:minmax(200px,1fr) minmax(200px,2fr) 160px}
.cash-board .orders-head-row,.cash-board .premium-order-row{grid-template-columns:150px minmax(200px,1fr) 120px 140px minmax(160px,1fr)}
@media (max-width:900px){.users-board .orders-head-row,.products-board .orders-head-row,.categories-board .orders-head-row,.banners-board .orders-head-row,.roles-board .orders-head-row{display:none}
 .users-board .premium-order-row,.products-board .premium-order-row,.categories-board .premium-order-row,.banners-board .premium-order-row,.roles-board .premium-order-row{grid-template-columns:1fr 1fr;gap:10px}
 .users-board .premium-order-row>*:first-child,.products-board .premium-order-row>*:first-child{grid-column:1/-1}
 /* the cash ledger: date and direction, then who and how much, then the note */
 .cash-board .orders-head-row{display:none}
 .cash-board .premium-order-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"ref status" "marketer total" "notes notes";gap:10px}
 .cash-board .premium-order-row>.order-marketer{grid-area:marketer;text-align:start}
 .cash-board .premium-order-row>.order-money{grid-area:total;text-align:end}
 .cash-board .premium-order-row>:last-child{grid-area:notes}}

.requisits-board .orders-head-row,.requisits-board .premium-order-row{grid-template-columns:110px minmax(220px,1.4fr) 150px 140px 150px 110px}
.problems-board .orders-head-row,.problems-board .premium-order-row{grid-template-columns:36px 120px minmax(260px,2fr) 170px 140px 110px}
.transactions-board .orders-head-row,.transactions-board .premium-order-row{grid-template-columns:110px minmax(220px,1.4fr) 120px minmax(160px,1fr) 120px minmax(150px,auto)}
.transactions-board .board-actions{flex-wrap:wrap}
.recommends-board .orders-head-row,.recommends-board .premium-order-row{grid-template-columns:36px minmax(200px,1fr) minmax(240px,1.6fr) 110px}
@media (max-width:900px){.requisits-board .orders-head-row,.problems-board .orders-head-row,.transactions-board .orders-head-row,.recommends-board .orders-head-row{display:none}
 .requisits-board .premium-order-row,.problems-board .premium-order-row,.transactions-board .premium-order-row,.recommends-board .premium-order-row{grid-template-columns:1fr 1fr;gap:10px}}
.board-note{font-size:12px;color:var(--muted,#6b7280);line-height:1.6;white-space:normal}
.chips-sep{width:1px;align-self:stretch;background:var(--line,#e5e7eb);margin:4px 4px}
a.board-chip{text-decoration:none}
/* inline create panel above a board */
.create-panel{background:#fff;border:1px solid var(--line,#e5e7eb);border-radius:14px;padding:16px 18px;margin-bottom:18px}
.create-panel>h2{margin:0 0 2px;font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px}
.create-panel>h2 .icon{width:16px;height:16px;color:var(--brand-700,#047857)}
.create-panel>p.ui-lead{margin:0 0 12px;font-size:12px;color:var(--muted,#6b7280);line-height:1.7}
.create-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px 12px;align-items:end}
.create-grid .pform-field{margin:0}
.create-grid .ui-field{min-height:40px;border-radius:10px}
.create-grid textarea.ui-field{min-height:40px}
.create-grid .pform-field.wide{grid-column:1/-1}
/* «تسجيل مصروف»: three to a row, «اتدفع إزاي» and its account two wide so the account's name is never cut */
@media(min-width:768px){.create-grid.expense-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.expense-grid .paid-with-account{grid-column:span 2}}
.paid-with{border:0;padding:0;margin:0;min-width:0;display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;align-self:end}
.paid-with legend{font-weight:600;font-size:13px;margin-bottom:6px;padding:0}
.paid-with .chip-check{min-height:36px;height:auto;padding:6px 12px;width:auto;flex:0 1 auto}
.create-actions{display:flex;justify-content:flex-start;gap:8px;margin-top:12px}
/* a page sets its own columns in --repeat-cols, not in an inline grid-template-columns that the phone layout below could not undo */
.repeat-row{display:grid;grid-template-columns:var(--repeat-cols,28px repeat(auto-fit,minmax(150px,1fr)) 40px);gap:10px 12px;align-items:end;padding:10px 0;border-top:1px dashed var(--line,#e5e7eb)}
.repeat-row:first-child{border-top:0;padding-top:0}
.repeat-row .n{font-size:12px;font-weight:700;color:var(--muted,#6b7280);align-self:center;padding-top:16px}
.repeat-row .pform-field{margin:0}
.repeat-row .icon-btn[disabled]{opacity:.3;pointer-events:none}
.repeat-tools{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line,#e5e7eb)}
.governorates-board .orders-head-row,.governorates-board .premium-order-row{grid-template-columns:minmax(220px,1.4fr) 140px 150px 90px}
.areas-board .orders-head-row,.areas-board .premium-order-row{grid-template-columns:minmax(200px,1fr) minmax(280px,2fr) 90px}
.shipping-board .orders-head-row,.shipping-board .premium-order-row{grid-template-columns:minmax(160px,1fr) minmax(150px,1fr) 130px 120px 120px 130px 90px}
.options-board .orders-head-row,.options-board .premium-order-row{grid-template-columns:minmax(240px,1.6fr) 130px 150px 90px}
.companies-board .orders-head-row,.companies-board .premium-order-row{grid-template-columns:minmax(240px,1.6fr) 140px 220px}
/* with the custody columns (units held, owed, overdue) for whoever works the couriers' custody */
@media (min-width:901px){.companies-board.has-custody .orders-head-row,.companies-board.has-custody .premium-order-row{grid-template-columns:minmax(160px,1.3fr) 80px 120px 150px 80px 230px}}
.costs-board .orders-head-row,.costs-board .premium-order-row{grid-template-columns:minmax(200px,1.2fr) 150px 150px 130px minmax(160px,1fr) 90px}
.route-arrow{display:inline-flex;align-items:center;gap:6px}
.route-arrow .icon{width:14px;height:14px;color:var(--muted,#6b7280);transform:scaleX(-1)}
@media (max-width:900px){.governorates-board .orders-head-row,.areas-board .orders-head-row,.shipping-board .orders-head-row,.options-board .orders-head-row,.companies-board .orders-head-row,.costs-board .orders-head-row{display:none}
 .governorates-board .premium-order-row,.areas-board .premium-order-row,.shipping-board .premium-order-row,.options-board .premium-order-row,.companies-board .premium-order-row,.costs-board .premium-order-row{grid-template-columns:1fr 1fr;gap:10px}
 .repeat-row{grid-template-columns:1fr 1fr}.repeat-row .n{grid-column:1/-1;padding-top:0}}
/* price update requests */
.price-list{display:flex;flex-direction:column;gap:12px}
.price-list .price-card{display:block;background:#fff;border:1px solid var(--line,#e5e7eb);border-radius:14px;padding:14px 16px}
.price-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px}
.price-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px 16px;padding:10px 0;border-top:1px dashed var(--line,#e5e7eb);border-bottom:1px dashed var(--line,#e5e7eb)}
.price-facts small{display:block;font-size:11px;color:var(--muted,#6b7280)}
.price-facts strong{font-size:13px}
.price-inputs{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px 12px;align-items:end;margin-top:12px}
.price-inputs .pform-field{margin:0}
.price-inputs .ui-field{min-height:40px;border-radius:10px}
.price-inputs .ui-field[readonly]{background:var(--surface-2,#f8faf9);color:var(--muted,#6b7280)}
/* auction */
.auction-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-top:14px}
.auction-card{background:#fff;border:1px solid var(--line,#e5e7eb);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.auction-thumb{display:block;aspect-ratio:4/3;background:var(--surface-2,#f8faf9);overflow:hidden}
.auction-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.auction-thumb .board-thumb-empty{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--muted,#6b7280)}
.auction-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:10px}
.auction-body h3{margin:0;font-size:14px;font-weight:700;line-height:1.5}
.auction-body h3 a{color:var(--ink,#111)}
.auction-form{display:flex;flex-direction:column;gap:10px}
.auction-form .pform-field{margin:0}
.auction-form .pform-field>span{font-size:12px;font-weight:600}
.auction-lowest{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:baseline;padding:8px 10px;border-radius:10px;background:var(--brand-soft,#ecfdf5)}
.auction-lowest small{font-size:11px;color:var(--muted,#6b7280)}
.auction-lowest strong{font-size:14px;color:#065f46}
.auction-lowest .user_name{grid-column:1/-1;font-size:12px;color:var(--muted,#6b7280)}
.auction-lowest .user_name:empty{display:none}
.auction-bid{display:flex;gap:8px}
.auction-bid .ui-field{min-height:38px;border-radius:10px}
/* reports */
.report-filter .board-chip input{position:absolute;opacity:0;width:1px;height:1px}
.report-filter .board-chip{position:relative;cursor:pointer;margin:0}
.report-board .orders-head-row,.report-board .premium-order-row{grid-template-columns:150px minmax(240px,2fr) 140px 120px 190px}
.suppliers-report .orders-head-row,.suppliers-report .premium-order-row{grid-template-columns:170px minmax(220px,1.6fr) 130px 140px 140px}
@media (max-width:900px){.report-board .orders-head-row{display:none}.report-board .premium-order-row{grid-template-columns:1fr 1fr;gap:10px}}
.ledger-board .orders-head-row,.ledger-board .premium-order-row{grid-template-columns:170px 150px 120px minmax(200px,1fr)}
/* requisit thread */
.thread-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:16px;align-items:start}
.thread-side{display:flex;flex-direction:column;gap:12px;position:sticky;top:16px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;margin:0;font-size:13px}
.kv dt{color:var(--muted,#6b7280);font-weight:500}
.kv dd{margin:0}
.thread{display:flex;flex-direction:column;gap:12px;max-height:60vh;overflow:auto;padding:4px 2px 12px}
.msg{max-width:78%;padding:12px 14px;border-radius:16px;background:#fff;border:1px solid var(--line,#e5e7eb)}
.msg.is-user{align-self:flex-start;border-start-start-radius:4px}
.msg.is-admin{align-self:flex-end;background:var(--brand-soft,#ecfdf5);border-color:#bbf7d0;border-start-end-radius:4px}
.msg header{display:flex;justify-content:space-between;gap:12px;font-size:12px;margin-bottom:4px}
.msg header strong{font-weight:700}
.msg header time{color:var(--muted,#6b7280)}
.msg p{margin:0;white-space:pre-wrap;line-height:1.7;font-size:13px}
.msg-files{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.msg-img img{width:96px;height:96px;object-fit:cover;border-radius:10px;border:1px solid var(--line,#e5e7eb)}
.msg-file{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:10px;border:1px solid var(--line,#e5e7eb);background:#fff;font-size:12px;font-weight:600}
.composer{margin-top:12px}
.composer-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.composer-tools .is-primary{margin-inline-start:auto}
.composer-attach{cursor:pointer;margin:0}
@media (max-width:900px){.thread-layout{grid-template-columns:1fr}.thread-side{position:static}.msg{max-width:100%}}
/* order page */
.order-page{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.order-main{display:flex;flex-direction:column;gap:16px;min-width:0}
.order-side{display:flex;flex-direction:column;gap:16px;position:sticky;top:16px}
.inv-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
.inv-head h2{margin:0 0 4px;font-size:18px}
.inv-parties{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:12px 0;border-top:1px solid var(--line,#e5e7eb);border-bottom:1px solid var(--line,#e5e7eb);margin-bottom:14px}
.inv-parties>div{display:flex;flex-direction:column;gap:3px;font-size:13px}
.inv-parties small{font-size:11px;color:var(--muted,#6b7280);margin-bottom:2px}
.inv-items tfoot td{font-weight:600;background:var(--surface-2,#f8faf9)}
.inv-items tfoot tr.grand td{font-size:15px;font-weight:800;background:var(--brand-soft,#ecfdf5)}
.inv-row-actions{display:flex;gap:6px;align-items:center;white-space:nowrap}
.inv-row-actions form{margin:0}
.inv-note{margin:12px 0 0;font-size:13px;padding:10px 12px;border-radius:10px;background:#fffbeb;border:1px solid #fde68a}
.inv-details summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;gap:2px}
.inv-details summary::-webkit-details-marker{display:none}
.inv-details summary h2{margin:0;font-size:15px;font-weight:700}
.inv-details summary::before{content:'';float:inline-end;width:8px;height:8px;border-inline-end:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);margin:6px 4px 0 0}
.inv-details[open] summary::before{transform:rotate(-135deg);margin-top:10px}
.inv-details[open] summary{margin-bottom:12px}
.inv-sub{font-size:13px;font-weight:700;margin:12px 0 6px}
.timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.timeline li{display:grid;grid-template-columns:18px 1fr;gap:10px;position:relative}
.timeline li:not(:last-child)::before{content:'';position:absolute;inset-inline-start:8px;top:18px;bottom:-14px;width:2px;background:var(--line,#e5e7eb)}
.tl-dot{width:18px;height:18px;border-radius:50%;border:4px solid #fff;box-shadow:0 0 0 2px var(--line,#e5e7eb);background:var(--muted,#6b7280);margin-top:2px}
.tl-dot.done{background:#147A4D}.tl-dot.pending{background:#eab308}.tl-dot.rejected{background:#A52E3B}.tl-dot.shipping{background:#0B6B78}.tl-dot.confirmed{background:#2457C6}.tl-dot.preparing{background:#7650A8}
.tl-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.tl-head time{font-size:12px;color:var(--muted,#6b7280)}
.tl-meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--muted,#6b7280);margin-top:4px}
.tl-body p{margin:6px 0 0;font-size:13px;white-space:pre-wrap}
.labels{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.label-card{border:1px dashed var(--ink,#111);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:4px;font-size:13px;background:#fff}
.label-card hr{margin:6px 0;border:0;border-top:1px dashed var(--line,#e5e7eb)}
/* the order's barcode on its shipping card: scanned at the courier handover */
.label-card .barcode{display:block;width:60mm;max-width:100%;height:12mm;margin:2px 0}
.label-total{font-size:15px;font-weight:800;color:#b91c1c;margin-top:4px}
.st-group{display:flex;flex-direction:column;gap:0;padding:10px 12px;margin-bottom:14px;border-radius:10px;background:var(--surface-2,#f8faf9);border:1px solid var(--line,#e5e7eb)}
.st-toggle{margin:0 0 14px;width:100%;justify-content:flex-start}
@media (max-width:1100px){.order-page{grid-template-columns:1fr}.order-side{position:static}}
@media (max-width:700px){.inv-parties{grid-template-columns:1fr}}
.table-scroll{overflow:auto;margin:0 -4px;padding:0 4px}
.inv-items{min-width:720px}
.inv-row-actions .is-sm{padding:4px 8px;font-size:11px}
.board-actions form{display:inline;margin:0}
/* the shared top bar (dashboard + storefront) */
.shell-header{background:rgba(255,255,255,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line);box-shadow:none;z-index:20;margin:0}
.shell-header.is-sticky{position:sticky;top:0}
.shell-header.is-fixed{position:fixed;inset-inline:0;top:0}

.shell-header .brand{min-width:0}
.shell-header .brand img{display:block;height:auto;max-height:38px;width:auto}
.shell-header .account-avatar{flex:0 0 auto}
.main-header.shell-header{height:auto!important}

@media (max-width:720px){
 .shell-header .brand img{max-height:26px}
}
@media (max-width:720px){
 .shell-header .account-chip span:last-child{display:none}
}
.main-header.shell-header{display:block!important;padding:0!important;width:auto}

/* a contact link that carries the number itself (boards built later), not just an icon */
.order-customer-meta .contact a[dir="ltr"]{width:auto;height:auto;border:0;background:none;display:inline;padding:0 2px;font-size:12px}
.order-customer-meta .contact .icon{width:14px;height:14px;color:var(--muted);align-self:center}

/* «الأرباح والخسائر» and «المصروفات»: a statement in two columns, one on a phone */
.pnl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:16px}
@media(max-width:900px){.pnl-grid{grid-template-columns:minmax(0,1fr)}}
.pnl-card{margin-bottom:16px;min-width:0}
.pnl-table td:last-child{text-align:end}
.pnl-table tr.is-sub td{background:var(--surface-2,#f8faf9)}
.pnl-table tr.is-total td{border-top:2px solid var(--line);font-size:14px}
.pnl-table .is-loss,.is-loss{color:#A52E3B}
.pnl-notes{margin:6px 0 0;padding-inline-start:18px;font-size:12px;line-height:1.7}
.pnl-mini{display:grid;gap:6px;margin-top:10px;font-size:12px}
.pnl-mini div{display:flex;justify-content:space-between;gap:10px}
.ship-compare td.is-loss{background:rgba(185,58,70,.08)}
.ship-compare td.is-missing{color:var(--muted)}
.expenses-board .orders-head-row,.expenses-board .premium-order-row{grid-template-columns:140px 150px 130px 150px minmax(160px,1fr) 90px}
@media (max-width:900px){.expenses-board .orders-head-row{display:none}
 .expenses-board .premium-order-row{grid-template-columns:1fr 1fr;gap:10px}}
.profit-card{margin-bottom:18px}
.profit-card .ui-stats{margin-bottom:0}

/* 14. motion: the rules are in ui-motion.css (fetched after load). Less motion
   asked for: all of it instant, old and new; the busy spinner alone turns, slowly */
@media (prefers-reduced-motion: reduce) {
    html *, html *::before, html *::after {
        animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
        transition-duration: 1ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
    }
    html.js .fx-wait { opacity: 1 !important; transform: none !important; }
    body .ui-btn.is-busy::after { animation-duration: 2s !important; animation-iteration-count: infinite !important; }
}

/* ---------- the bar on a phone: one row ----------
   The buy mode and «عرض العميل» have no room in a 390px bar. They had a
   second row inside the sticky bar (114px pinned over every page); they are
   atop the menu now (WebSite/layouts/app, the nav's head), and the shop
   carries the buy mode on the page itself. The bar is 66px, and --header
   (scroll-padding, the drawers under it) is that one height on every page. */
.ui-nav-cv { display: none !important; }
@media (min-width: 721px) {
    .ui-nav-head > .ui-nav-mode { display: none; }
}
@media (max-width: 720px) {
    .ui-h-cv { display: none !important; }
    html.is-store .ui-switch-form.ui-nav-cv { display: contents !important; }
    .ui-nav-head .ui-switch { display: flex; min-height: 44px; margin: 8px 0 0; padding: 0 4px; }
    .ui-nav-head .ui-switch-label { display: inline; font-size: var(--fs-small); color: var(--ink-2); }
    .ui-nav-mode .ui-seg button { min-height: 40px; }
}

/* «كتالوج عميلك»: its link copied or sent on WhatsApp (layouts/catalog_share), atop the menu and on the account's card */
.ui-cshare { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.ui-cshare-label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); font-weight: var(--w-semi); color: var(--ink); }
.ui-cshare-label .icon { color: var(--brand-700); }
.ui-cshare-actions { display: flex; flex-wrap: wrap; gap: 6px; }
body .ui-btn.is-wa { background: #0E7A40; border-color: #0E7A40; color: #fff; }
body .ui-btn.is-wa:hover { background: #0A5E31; border-color: #0A5E31; color: #fff; }
.ui-cshare:first-child { margin-top: 0; }

/* ---- admin reorg (dashboard IA pass): a list's danger actions sit under it, apart from the filters ---- */
.board-danger-bar { margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed var(--line, #e5e7eb); }
/* the orders list next to the open sidebar: its fixed columns came to more than the card, and the
   last cell (status + «فتح») spilled past the card edge. The columns give a little instead. */
@media (min-width: 768px) {
    .orders-board.is-selectable .orders-head-row,
    .orders-board.is-selectable .premium-order-row { grid-template-columns: 28px minmax(122px, 140px) minmax(210px, 1fr) minmax(104px, 130px) minmax(88px, 116px) minmax(104px, 150px) 158px; gap: 10px; }
}
/* a tablet, where even those don't fit: the list scrolls inside its card (the page itself doesn't) */
@media (min-width: 768px) and (max-width: 1099px) {
    .orders-board.is-selectable { overflow-x: auto; }
}

/* ---- admin round 2 ---- */
/* the orders list on a tablet (768–1099; the menu is a drawer over the page here): seven columns did
   not fit the card and the list scrolled sideways. Each order takes two lines instead: the order, the
   customer, the amount and the marketer on top; the status and the actions («فتح») under them. */
@media (min-width: 768px) and (max-width: 1099px) {
    .orders-board.is-selectable { overflow: hidden; }
    .orders-board.is-selectable .orders-head-row,
    .orders-board.is-selectable .premium-order-row {
        grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, .8fr) minmax(0, 1fr);
        gap: 10px 14px;
    }
    .orders-board.is-selectable .orders-head-row > :nth-child(4),
    .orders-board.is-selectable .orders-head-row > :nth-child(7) { display: none; }
    .orders-board.is-selectable .premium-order-row {
        grid-template-areas: "check ref customer total marketer" "check status status open open";
        align-items: start;
    }
    .orders-board.is-selectable .premium-order-row > * { min-width: 0; }
    .orders-board.is-selectable .premium-order-row > .board-check { grid-area: check; }
    .orders-board.is-selectable .premium-order-row > .order-ref { grid-area: ref; }
    .orders-board.is-selectable .premium-order-row > .order-customer { grid-area: customer; }
    .orders-board.is-selectable .premium-order-row > .order-money { grid-area: total; }
    .orders-board.is-selectable .premium-order-row > .order-marketer { grid-area: marketer; }
    .orders-board.is-selectable .premium-order-row > .order-status-cell { grid-area: status; align-self: center; }
    .orders-board.is-selectable .premium-order-row > .order-open { grid-area: open; align-self: center; }
    .orders-board.is-selectable .premium-order-row .order-ref strong { flex-wrap: wrap; overflow-wrap: anywhere; }
    .orders-board.is-selectable .premium-order-row .order-marketer strong { overflow-wrap: anywhere; }
    .orders-board.is-selectable .premium-order-row .order-marketer small { text-align: start; }
    .orders-board.is-selectable .premium-order-row .order-marketer .contact { flex-wrap: wrap; }
    .orders-board.is-selectable .premium-order-row .order-open .ui-btn { flex: 0 0 auto; }
}
/* the settings pages' «إضافة …» forms open in a modal from the page head; a form with rows of
   several fields (shipping costs, couriers' prices, areas) gets a wider one */
@media (min-width: 576px) { .ui-modal.is-wide .ui-modal-dialog { max-width: min(880px, calc(100vw - 40px)); } }
.ui-modal .ui-modal-lead { margin: 0 0 14px; font-size: 12px; color: var(--muted); line-height: 1.7; }
.ui-modal .repeat-tools { justify-content: flex-start; }
/* the shipping costs' rows in their modal: the six fields on two lines of three, the number and the
   remove button beside both lines */
@media (min-width: 700px) {
    .ui-modal .repeat-row.is-two-lines { grid-template-columns: 28px repeat(3, minmax(0, 1fr)) 40px; }
    .ui-modal .repeat-row.is-two-lines > .n { grid-column: 1; grid-row: 1 / span 2; }
    .ui-modal .repeat-row.is-two-lines > [data-repeat-remove] { grid-column: 5; grid-row: 1 / span 2; align-self: center; }
}

/* ---- phone QA ---- */
@media (max-width: 767px) {
    /* a row with more than one figure (a shipping cost and its two taxes, a courier's orders and
       custody): every figure took the one «total» cell and they were drawn over each other. The
       second and later take the next free cells, each under its column's name (data-label). */
    .premium-order-row > .order-money ~ .order-money { grid-area: auto; }
    .premium-order-row > .order-money[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 10px; font-weight: 600; color: var(--muted); }
    /* a figure's cell (.ui-num reads left to right) keeps its label at the start of a stacked row */
    .ui-table.is-stacked td.ui-num[data-label] { direction: rtl; }
}
/* a small select (.is-sm) lost the room its arrow is drawn in (the size's padding is the later
   rule), so the chosen option ran under the arrow: «كل الأنواع», «الكل». On every screen. */
body select.ui-field.is-sm { padding-inline-end: 30px; background-position: left 9px center; }
body select.ui-field.is-sm:dir(ltr) { background-position: right 9px center; }
/* an order's lines (Print_invoice) on a phone's screen, not on paper: seven columns 720px wide put
   the totals' figures off the screen's edge. Each line is a card of labelled figures (data-label),
   the totals under them as label · figure rows. */
@media screen and (max-width: 767px) {
    .table-scroll > .inv-items { min-width: 0; }
    .inv-items, .inv-items > tbody, .inv-items > tfoot, .inv-items > tbody > tr, .inv-items > tbody > tr > td { display: block; }
    .inv-items > thead { display: none; }
    .inv-items > tbody > tr { margin: 0 0 10px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
    .inv-items > tbody > tr > td { padding: 4px 0; }
    .inv-items > tbody > tr > td[data-label] { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; text-align: end; }
    .inv-items > tbody > tr > td[data-label]::before { content: attr(data-label); flex: none; font-size: var(--fs-caption); font-weight: 600; color: var(--muted); text-align: start; }
    .inv-items > tbody > tr > td.inv-row-actions { display: flex; flex-wrap: wrap; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
    .inv-items > tfoot > tr { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 4px; padding: 8px 12px; border-radius: var(--r-sm); background: var(--surface-2, #f8faf9); }
    .inv-items > tfoot > tr.grand { background: var(--brand-soft, #ecfdf5); }
    .inv-items > tfoot > tr > td { display: block; padding: 0; background: transparent; }
    .inv-items > tfoot > tr > td:empty { display: none; }
}

/* the courier page's way to «استلام المرتجعات» (custody.blade) */
.custody-scanbar { margin: 4px 0 14px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.custody-scanbar-foot { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.custody-scanbar-foot .ui-help { flex: 1 1 220px; margin: 0; }

/* «استلام المرتجع» (Backend/order/_return_receipt): one short row per line, where its units went */
/* «تغيير الحالة»: one order (_status_popup) and several (bulk_status) */
.st-modal .ui-modal-dialog, #bulk_status .ui-modal-dialog { max-width: 560px; }
.st-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.st-damaged { display: grid; grid-template-columns: 1fr 72px minmax(0, 140px); gap: 6px; align-items: center; }
.st-damaged label { font-size: var(--t-caption, 13px); }
.bulk-rows { display: grid; gap: 6px; max-height: 46vh; overflow: auto; }
.bulk-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-md); border-inline-start: 3px solid var(--line); }
.bulk-row.is-good { border-inline-start-color: var(--success, #10b981); }
.bulk-row.is-bad { border-inline-start-color: var(--danger); background: #FFF6F7; }
.bulk-row-main { min-width: 0; overflow-wrap: anywhere; }
.bulk-policy { width: 128px; }
.ui-toast-link { font-weight: var(--w-semi, 600); text-decoration: underline; white-space: nowrap; }
.ui-toast-undo { display: inline; margin: 0; }
.ui-toast-undo button.ui-toast-link { background: none; border: 0; padding: 0; margin-inline-start: 6px; color: inherit; font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; }
.bulk-row [data-bulk-remove] { font-size: var(--fs-caption); line-height: 1; min-width: 40px; }
.bulk-scan-note { margin-top: 6px; font-weight: var(--w-semi, 600); }
.bulk-scan-note.is-good { color: var(--brand-700); }
@media (max-width: 480px) {
    .st-pair { grid-template-columns: 1fr; }
    .bulk-row { grid-template-columns: minmax(0, 1fr) auto; }
    .bulk-policy { grid-column: 1 / -1; width: 100%; grid-row: 2; }
}
.rr-modal .ui-modal-dialog { max-width: 560px; }
.rr-body { display: grid; gap: 8px; }
.rr-line { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-md); border-inline-start: 3px solid var(--brand-700); }
.rr-line.is-red { border-inline-start-color: var(--danger); }
.rr-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rr-name { min-width: 0; font-weight: var(--w-semi); font-size: var(--fs-small); line-height: 1.5; }
.rr-name small { display: block; font-weight: var(--w-medium); }
.rr-sum { flex: none; }
.rr-top .rr-more { margin-inline-start: auto; }
.rr-name { flex: 1 1 auto; }
.rr-cells { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.rr-cell { display: inline-flex; align-items: center; gap: 4px; padding: 2px 2px 2px 8px; border-radius: 999px; background: var(--surface-2); font-size: var(--fs-caption); font-weight: var(--w-semi); }
.rr-cell[hidden] { display: none; }
.rr-cell.is-kept { background: #EEF4FF; }
.rr-cell.is-damaged, .rr-cell.is-destroyed, .rr-cell.is-lost { background: #FDF3F4; }
.rr-step { display: inline-flex; align-items: center; }
.rr-step button { width: 24px; height: 24px; border: 0; border-radius: 50%; background: var(--surface); cursor: pointer; font-weight: 700; line-height: 1; padding: 0; }
.rr-step input { width: 34px; border: 0; background: none; text-align: center; font-weight: 700; font-size: 14px; padding: 0; -moz-appearance: textfield; }
.rr-step input::-webkit-inner-spin-button, .rr-step input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.rr-more { flex: none; width: 26px; height: 26px; padding: 0; line-height: 1; border: 1px dashed var(--line); border-radius: 50%; background: none; cursor: pointer; color: var(--muted); }
.rr-extra { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.rr-extra:not(:has(> :not([hidden]))) { display: none; }
.rr-extra .ui-field { flex: 1 1 180px; min-width: 0; }
.rr-lost-amount { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: var(--fs-caption); font-weight: var(--w-semi); }
.rr-lost-amount[hidden] { display: none; }
.rr-lost-amount .ui-field { flex: 0 1 140px; }
.rr-arrive { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; font-size: var(--fs-caption); font-weight: var(--w-semi); }
.rr-arrive .ui-field { width: 72px; flex: none; text-align: center; }
.rr-verify { display: grid; gap: 6px; padding: 10px; border: 1px dashed var(--brand-700); border-radius: var(--r-md); background: var(--surface-2); }
.rr-verify[hidden] { display: none; }
.rr-verify .ui-field { font-size: 16px; }
.rr-verify-flash { margin: 0; padding: 6px 10px; border-radius: var(--r-sm, 6px); font-size: var(--fs-small); font-weight: var(--w-semi); }
.rr-verify-flash.is-bad { background: #FDF3F4; color: var(--danger); }
.rr-verify-flash.is-good { background: var(--brand-soft); color: var(--brand-900); }
.rr-scanned { flex: none; }
.rr-scanned[hidden] { display: none; }
.rr-line.is-v-short { border-inline-start-color: var(--danger); background: #FDF3F4; }
.rr-line.is-v-done { border-inline-start-color: var(--brand-700); background: var(--brand-soft); }
.rr-order { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rr-why { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 260px; }
.rr-why[hidden] { display: none; }
.rr-why .ui-field { flex: 1 1 160px; }
.rr-foot { align-items: center; }
.rr-status { flex: 1; color: var(--muted); font-size: var(--fs-caption); }
.rr-status.is-bad { color: var(--danger); font-weight: var(--w-semi); }

/* «تقييم العميل» (x-ui.stars, OrderRatings): five stars, the lit ones gold, a low rating's in red */
.ui-stars { display: inline-flex; align-items: center; gap: 1px; font-size: 18px; line-height: 1; color: var(--line-strong); white-space: nowrap; }
.ui-stars .is-on { color: #E8A317; }
.ui-stars.is-low .is-on { color: var(--danger); }
.ui-stars-figure { margin-inline-start: 6px; font-size: var(--fs-small); font-weight: var(--w-bold); color: var(--ink); }
.order-rating-comment { margin: 8px 0 0; line-height: 1.8; overflow-wrap: anywhere; }
/* «صورة الكرتونة»: the packed box's photo, on the packing screen and the order page */
.pk-photo { display: block; max-width: 320px; margin-top: 10px; }
.pk-photo img { display: block; width: 100%; height: auto; border-radius: var(--r-md); border: 1px solid var(--line); }
/* «الصلاحية والتشغيلات»: the batches of a variant flagged «له صلاحية» */
.batch-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.batch-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-caption); }
.batch-edit { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.batch-edit .ui-field { flex: 1 1 130px; min-width: 0; min-height: 36px; }
.pick-batch { font-size: 11px; font-weight: var(--w-semi); margin-top: 2px; }
/* «احسب ربحك» (ProfitCalculatorController): the fields, then the server's figures as rows */
.pcalc { margin-top: 4px; }
/* a field takes a whole row unless marked: three equal columns cut the shipping
   choice («العميل يدفعه فوق السعر») in the product page's narrow column. The price
   and the governorate share a row where both fit whole, else each takes its own */
.pcalc-fields { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.pcalc-fields > div { min-width: 0; flex: 1 1 100%; }
.pcalc-fields > .is-price { flex: 1 1 120px; }
.pcalc-fields > .is-rate { flex: 2 1 240px; }
.pcalc-result { margin-top: 10px; }
.pcalc-result[aria-busy="true"] { opacity: .6; }
.pcalc-result .ui-notice { margin-bottom: 10px; }
.pcalc-rows { margin: 0; padding: 0; }
.pcalc-rows > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); }
.pcalc-rows dt { color: var(--muted); min-width: 0; }
.pcalc-rows dd { margin: 0; font-weight: var(--w-semi); color: var(--ink); white-space: nowrap; }
.pcalc-rows .is-profit dd { color: var(--brand-700); }
.pcalc-rows .is-total { border-bottom: 0; font-size: var(--fs-body); }
.pcalc-how { margin-top: 8px; font-size: var(--fs-caption); color: var(--muted); }
.pcalc-how summary { cursor: pointer; font-weight: var(--w-semi); }
.pcalc-rules { margin: 6px 0 0; padding-inline-start: 18px; list-style: disc; }

/* «المحتوى الجاهز» (ProductKit): a product's ads, its media in one ZIP and its texts one click to copy */
.kit-texts { display: grid; gap: 8px; margin-top: 10px; }
.kit-text { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.kit-text p { flex: 1; min-width: 0; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-small); line-height: 1.7; }
.kit-text .ui-btn { flex: none; }
.kit-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.kit-file { position: relative; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface-2); }
.kit-file img, .kit-file video { display: block; width: 100%; height: 110px; object-fit: cover; }
.kit-file figcaption { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 8px; font-size: var(--fs-caption); color: var(--muted); }
.kit-file figcaption span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* --- suppliers: «تقييم المورد», «مقارنة أسعار الموردين», «منتجاتي» / «منتجات الموردين» --- */
.rating-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 12px 0; }
.rating-score { font-size: 30px; font-weight: var(--w-bold); line-height: 1; }
.price-compare { margin-bottom: 16px; }
.price-compare h3 { font-size: 15px; margin: 0; }
.ui-table tr.is-cheapest > td { background: var(--brand-soft); }
.ui-table tr.is-unavailable > td { color: var(--muted); }
.sp-photos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.sp-photo { position: relative; width: 96px; }
.sp-photo img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface-2); display: block; }
.sp-photo label { display: flex; align-items: center; gap: 4px; font-size: var(--fs-caption); color: var(--muted); margin-top: 4px; }
.sp-rows { display: grid; gap: 8px; }
.sp-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.sp-row.has-price { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
.sp-reason { margin-top: 8px; }
/* --- «صور الأصناف» on the product page in the dashboard (owner, item 55) --- */
.vm-list { display: grid; gap: 12px; }
.vm-row { margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-md); min-width: 0; }
.vm-row legend { padding: 0 6px; font-size: var(--fs-small); }
.vm-row .dz-previews { margin: 0 0 10px; }
.vm-remove { display: inline-flex; gap: 4px; align-items: center; cursor: pointer; }
/* the product page: the chosen variant's video under the gallery */
.pd-variant-video { margin-top: 12px; }
.pd-variant-video iframe, .pd-variant-video video { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--r-md); background: #000; }
/* --- «استيراد المنتجات»: the sheet checked row by row (owner, item 54) --- */
.pi-row-bad td { background: #FDF3F4; }
.pi-errors { margin: 0; padding-inline-start: 16px; color: var(--danger); font-size: var(--fs-caption); line-height: 1.7; }
.pi-cols { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.pi-cols li { padding: 2px 8px; border-radius: 999px; background: var(--surface-2); font-size: var(--fs-caption); }
/* --- «مركز المساعدة»: the marketer's answers, and «قبل ما تفتح تذكرة» on the tickets --- */
.help-before { display: grid; gap: 8px; padding: 14px 16px; margin-bottom: 14px; min-width: 0; }
.help-before h2 { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--fs-body); font-weight: var(--w-bold); }
.help-before p { margin: 0; font-size: var(--fs-small); color: var(--ink-2); line-height: 1.8; }
.help-search { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.help-search .ui-field { flex: 1 1 200px; min-width: 0; }
.help-before-links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-small); }
.help-before-links a { color: var(--brand-700); }
.help-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.help-item { display: grid; gap: 4px; padding: 14px 16px; color: var(--ink); text-decoration: none; min-width: 0; }
.help-item:hover { border-color: var(--brand); }
.help-item strong { font-size: var(--fs-body); font-weight: var(--w-semi); overflow-wrap: anywhere; }
.help-item span { font-size: var(--fs-small); color: var(--muted); line-height: 1.75; overflow-wrap: anywhere; }
.help-section { margin: 18px 0 8px; font-size: var(--fs-h3); font-weight: var(--w-bold); }
.help-body { line-height: 2; color: var(--ink-2); overflow-wrap: anywhere; }
.help-body p { margin: 0 0 12px; }
.help-body p:last-child { margin-bottom: 0; }

/* «المخازن»: the warehouse picker, the forms of the warehouses page, each warehouse's share on the inventory list */
.wh-filter { margin-bottom: 12px; max-width: 320px; }
.wh-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 12px; }
.wh-edit { min-width: min(280px, 86vw); padding: 12px; }
.wh-shares { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.wh-shares span { white-space: nowrap; }
.wh-sign { display: flex; justify-content: space-between; gap: 16px; margin-top: 28px; flex-wrap: wrap; }
/* --- «الوضع التجريبي»: the yellow strip on every page of a demo session (x-ui.demo-strip) ---
   Above the header like «عرض الحساب», so the way out stays on screen however
   far the page scrolls; --header grows by its height. */
html.is-demo { --demo-h: 40px; --header: calc(72px + var(--demo-h)); }
html.is-demo .ui-header { top: var(--demo-h); height: calc(var(--header) - var(--demo-h)); }
.ui-demo {
    position: sticky; top: 0; z-index: 42;
    height: var(--demo-h); box-sizing: border-box; padding: 2px 16px;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; align-content: center; gap: 0 8px;
    background: #FACC15; color: #1F1A00; border-bottom: 2px solid #CA8A04; text-align: center;
}
body.ui .ui-demo-text { margin: 0; min-width: 0; font-size: var(--fs-small); font-weight: var(--w-bold); line-height: 1.45; }
.ui-demo-out { margin: 0; }
.ui-demo-btn {
    appearance: none; border: 0; background: none; padding: 0; cursor: pointer;
    font: inherit; font-size: var(--fs-small); font-weight: var(--w-bold); line-height: 1.45;
    color: #1F1A00; text-decoration: underline; text-underline-offset: 3px;
}
.ui-demo-btn:focus-visible { outline: 2px solid #1F1A00; outline-offset: 2px; border-radius: 4px; }
/* a call or WhatsApp link on a demo page: the demo numbers are made up, so it dials nobody (DemoMode::disarm) */
[data-demo-phone] { cursor: not-allowed; opacity: .5; }
@media (max-width: 820px) {
    html.is-demo { --header: calc(66px + var(--demo-h)); }
}
@media (max-width: 767px) {
    html.is-demo { --demo-h: 52px; }
    html.is-demo body.ui { padding-top: var(--demo-h); }
    html.is-demo .ui-header { top: 0; }
    .ui-demo { position: fixed; inset-inline: 0; padding: 4px 12px; }
}
/* the «الوضع التجريبي» page */
.demo-points { margin: 0 0 14px; padding-inline-start: 18px; display: grid; gap: 6px; line-height: 1.9; color: var(--ink-2); }
.demo-meta { margin: 0; color: var(--muted); font-size: var(--fs-small); overflow-wrap: anywhere; }
.demo-panel form { margin-top: 10px; }
/* --- «ربط متجرك»: the marketer's Shopify/WooCommerce stores and the orders waiting --- */
.sc-page { padding-top: calc(var(--sf-top) + 14px); padding-bottom: 40px; }
.sc-stack { display: grid; gap: 16px; margin-top: 16px; }
.sc-card { padding: 18px; min-width: 0; }
.sc-card h2 { margin: 0 0 6px; font-size: var(--fs-h3); font-weight: var(--w-bold); }
.sc-card h3 { margin: 14px 0 6px; font-size: var(--fs-body); font-weight: var(--w-bold); }
.sc-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; }
.sc-row > .ui-field { flex: 1 1 220px; min-width: 0; }
.sc-ltr { direction: ltr; text-align: left; }
.sc-grid { display: grid; gap: 12px; margin-top: 12px; }
@media (min-width: 768px) { .sc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sc-grid > div { min-width: 0; }
.sc-steps { margin: 6px 0 0; padding-inline-start: 20px; line-height: 1.9; color: var(--ink-2); overflow-wrap: anywhere; }
.sc-steps code, .sc-reason { overflow-wrap: anywhere; }
.sc-codes { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.sc-check { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
@media (max-width: 767px) { .sc-page { padding-top: calc(var(--sf-top) + 2px); } .sc-card { padding: 14px; } }
/* «الفواتير الإلكترونية»: the steps card, the refusal reasons under a status, the authority's uuid; the printed tax invoice */
.eta-steps { margin-bottom: 18px; }
.eta-step-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 10px; }
.eta-step { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: 12px; min-width: 0; }
.eta-dates, .eta-import { display: flex; flex-wrap: wrap; gap: 6px; max-width: 100%; }
.eta-dates .ui-field, .eta-import .ui-field { flex: 1 1 140px; min-width: 0; }
.eta-errors { margin: 6px 0 0; padding-inline-start: 16px; font-size: var(--fs-caption); color: var(--danger, #b42318); line-height: 1.7; overflow-wrap: anywhere; }
.eta-uuid { overflow-wrap: anywhere; word-break: break-all; }
.eta-row-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.eta-inv { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px; max-width: 900px; }
.eta-inv-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; align-items: flex-start; border-bottom: 2px solid var(--ink, #111); padding-bottom: 10px; margin-bottom: 12px; }
.eta-inv-parties { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 12px; }
.eta-inv-parties > div { border: 1px solid var(--line); border-radius: 10px; padding: 10px; overflow-wrap: anywhere; }
.eta-inv-totals { margin-top: 12px; margin-inline-start: auto; max-width: 320px; }
.eta-inv-totals div { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px dashed var(--line); }
.eta-inv-qr { width: 120px; }
.eta-inv-qr svg { display: block; width: 100%; height: auto; }
@media print { .eta-inv { border: 0; padding: 0; max-width: none; } }

/* --- «تغيير الحالة»: the picked courier's last 90 days in the order's governorate (CourierSuggest) --- */
.courier-hint { display: flex; gap: 6px; align-items: flex-start; margin: 6px 0 0; overflow-wrap: anywhere; }
.courier-hint[hidden] { display: none; }
.courier-hint .icon { flex: none; margin-top: 3px; }
/* «رسوم مرتجعات الشحن» (Backend.shipping.return_fees): who pays, as three cards to pick from */
.rf-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 6px 0 4px; }
.rf-mode { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; min-width: 0; }
.rf-mode input { margin-top: 4px; }
.rf-mode span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rf-mode small { color: var(--muted, #667085); line-height: 1.6; }
.rf-sub { margin: 8px 0 0; font-size: 1rem; }
/* «كلّمني بعدين» (status popup, order page, list pill) and «سكريبت المكالمة» on the order page */
.callback-box { margin: 0 16px 16px; padding: 10px 12px; border: 1px dashed var(--line-strong); border-radius: var(--r-md); }
.callback-box > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; cursor: pointer; font-weight: var(--w-semi); }
.callback-box > summary small { font-weight: normal; }
.callback-box[open] > summary { margin-bottom: 8px; }
.callback-now { margin: 0 0 8px; }
.callback-at .ui-field { flex: 1 1 180px; min-width: 0; max-width: 260px; }
.order-callback-pill { margin-top: 4px; max-width: 100%; white-space: normal; }
.call-script { border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px 12px; margin-bottom: 8px; }
.call-script > summary { display: flex; align-items: center; gap: 6px; cursor: pointer; font-weight: var(--w-semi); }
.call-script-text { margin-top: 8px; line-height: 1.9; overflow-wrap: anywhere; }
/* «ملف التحويلات» (Backend/transactions/batches): the form above the withdrawals queue, the row ticks, the bad numbers */
/* «ملف التحويلات» under the withdrawals list, folded; the pay popup's copy buttons */
/* a dashboard page's eyebrow links back to the hubs it names (App\Support\Ui\Crumbs) */
html.is-admin .ui-page-head .ui-crumb { color: inherit; text-decoration: none; }
html.is-admin .ui-page-head .ui-crumb:hover, html.is-admin .ui-page-head .ui-crumb:focus-visible { text-decoration: underline; }
/* «الخزنة»: the filters in one row from 1100px, and the movements fit 1280 without a sideways scroll */
@media (min-width: 1100px) {
    .ui-toolbar.treasury-filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto auto; align-items: center; }
    .ui-toolbar.treasury-filters > * { width: auto; min-width: 0; }
}
@media (min-width: 768px) {
    .treasury-table td, .treasury-table th { white-space: normal; }
    .treasury-table .flow-cell { min-width: 160px; }
    .treasury-table td.ui-num { min-width: 110px; }
    .treasury-table td.ui-num .cell-wrap { max-width: 220px; white-space: normal; overflow-wrap: anywhere; }
}
.payout-file-fold { margin-top: 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.payout-file-fold > summary { display: flex; align-items: center; gap: 8px; padding: 14px 16px; cursor: pointer; font-weight: var(--w-semi); }
.payout-file-fold > .payout-file { border: 0; margin: 0; }
.tx-copy-row { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 14px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); }
.tx-copy { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--w-semi); }
.payout-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; margin-top: 10px; }
.payout-form > div { flex: 0 1 220px; min-width: 0; }
.payout-scope { display: flex; flex-wrap: wrap; gap: 6px 14px; border: 0; padding: 0; margin: 0; min-width: 0; }
.payout-scope legend { font-size: 13px; color: var(--muted, #6b7280); margin-bottom: 4px; }
.payout-scope label, .payout-skip { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.payout-pick { width: 16px; height: 16px; accent-color: var(--brand, #0dd273); vertical-align: middle; cursor: pointer; }
.payout-invalid { margin: 6px 0 0; padding-inline-start: 18px; list-style: disc; font-size: 13px; line-height: 1.8; overflow-wrap: anywhere; }
.payout-columns { margin-top: 10px; }
.payout-columns summary { cursor: pointer; font-weight: 600; font-size: 14px; }
/* «مستني اعتماد» (stock_approvals/show): the draft's facts, the lines against what they are checked with, the attachments */
.sa-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px 18px; margin: 0; }
.sa-meta div { min-width: 0; }
.sa-meta dt { font-size: var(--fs-caption); color: var(--muted); margin: 0 0 2px; }
.sa-meta dd { margin: 0; font-weight: var(--w-semi); overflow-wrap: anywhere; }
.sa-note { margin: 12px 0 0; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); font-size: var(--fs-small); line-height: 1.8; overflow-wrap: anywhere; }
.sa-note strong { display: block; font-size: var(--fs-caption); color: var(--muted); }
.sa-item, .sa-summary { min-width: 0; overflow-wrap: anywhere; }
.sa-num { width: 96px; max-width: 100%; }
.sa-differs { color: var(--danger); font-weight: var(--w-semi); }
.sa-pay { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 12px; }
.sa-files { display: flex; flex-wrap: wrap; gap: 10px; }
.sa-file { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 120px; height: 120px; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface-2); }
.sa-file img { width: 100%; height: 100%; object-fit: cover; }
/* «مطالبات شركات الشحن» (Backend/shipping/claims, claim): the register's tabs, a late row, a claim's next steps and evidence */
.claims-section { margin-top: 14px; }
.claims-section:first-of-type { margin-top: 0; }
.claims-tabs { flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.claims-row-late td { background: #FFF6F7; }
.claims-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 8px; }
.claims-steps form { min-width: 0; }
.claims-files { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; padding: 0; list-style: none; }
.claims-files a { display: inline-flex; align-items: center; gap: 6px; overflow-wrap: anywhere; }
.claims-note, .claims-history { white-space: pre-line; overflow-wrap: anywhere; line-height: 1.8; }
.claims-history { margin: 6px 0 0; padding-inline-start: 18px; list-style: disc; font-size: 14px; }

/* «المتاح فعلًا»: the note under a quantity beyond what is available (WebSite.layouts.stock_note), and the list's pill */
.stock-note { margin: 8px 0 0; padding: 10px 12px; align-items: flex-start; font-size: 13px; line-height: 1.7; }
.stock-note > div { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.order-short-pill { width: max-content; max-width: 100%; }
/* «أداء موظفين التأكيد» (reports/team_performance) */
.tp-table td.is-name { min-width: 0; overflow-wrap: anywhere; }
.tp-sub { display: block; color: var(--muted); font-size: 12px; font-weight: 400; }
.tp-gap { display: block; font-size: 12px; font-weight: 600; }
.tp-gap.is-up { color: var(--brand-700); }
.tp-gap.is-down { color: var(--danger); }
.tp-reasons .ui-pill { margin: 0 0 4px; white-space: normal; }
.tp-how { margin: 0 0 16px; }
.tp-how ul { margin: 8px 0 0; padding-inline-start: 18px; list-style: disc; line-height: 1.9; font-size: 14px; }
.tp-picked { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
/* «المتابعة بعد الشحن» (followups/index, the order page) */
.fu-table td.is-name { min-width: 0; overflow-wrap: anywhere; }
.fu-sub { display: block; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.fu-sub.is-bad { color: var(--danger); font-weight: 600; }
.fu-line { display: block; overflow-wrap: anywhere; }
.fu-results { gap: 6px; }
.fu-results .ui-btn { white-space: normal; }
.fu-more { margin-top: 6px; }
.fu-more > summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.fu-more-fields { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.fu-more-fields > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 140px; }
.fu-history { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fu-history li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; border-top: 1px solid var(--line); padding-top: 8px; }
.fu-history-note { flex-basis: 100%; margin: 0; overflow-wrap: anywhere; }
/* «ربحك بعد الإعلانات» (WebSite/user/ads, its partial, and the team's Backend/reports/ads*) */
.ad-page { padding-top: calc(var(--sf-top, 0px) + 14px); padding-bottom: 40px; display: grid; gap: 16px; }
.ad-page > *, .ad-stack > * { min-width: 0; }
.ad-stack { display: grid; gap: 16px; }
.ad-card { padding: 16px 18px; min-width: 0; }
.ad-card h2 { margin: 0 0 6px; font-size: var(--fs-h3, 1.05rem); font-weight: var(--w-bold, 700); }
.ad-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ad-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.ad-grid > div { min-width: 0; }
.ad-actions, .ad-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ad-actions { margin-top: 12px; }
.ad-funnel { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); padding: 14px 16px; }
.ad-funnel > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ad-funnel strong { font-size: 1.25rem; }
.ad-roas-more { display: block; margin-top: 4px; line-height: 1.8; }
.ad-table td.is-name { white-space: normal; min-width: 0; }
.ad-sub { display: block; color: var(--muted); font-size: 12px; font-weight: 400; }
.ad-neg { color: var(--danger); }
.ad-pos { color: var(--brand-ink, inherit); }
.ad-chart { position: relative; height: 260px; }
.ad-text { min-height: 120px; font-family: ui-monospace, monospace; }
.ad-check { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; }
.ad-errors { margin: 0; padding-inline-start: 18px; list-style: disc; line-height: 1.8; overflow-wrap: anywhere; }
.ad-range { margin-bottom: 0; }
@media (max-width: 767px) { .ad-page { padding-top: calc(var(--sf-top, 0px) + 2px); } .ad-card { padding: 14px; } }

/* «إعلانات تحسين» (AdOps): a proof attached under a charge, a refusal's reason beside its button */
.adops-proof, .adops-inline { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.adops-proof .ui-field, .adops-inline .ui-field { flex: 1 1 160px; min-width: 0; }

/* «ربحية الحملات» (CampaignProfit): the campaign under a house order, its filter and bulk pick, an ad's link on a campaign */
.order-campaign { display: block; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.order-campaign-filter { flex: 0 1 220px; min-width: 0; max-width: 100%; }
.order-campaign-bulk .ui-field { flex: 0 1 240px; min-width: 0; max-width: 100%; }
.campaign-links { margin-top: 14px; display: grid; gap: 8px; min-width: 0; }
.campaign-links h3 { font-size: 14px; margin: 0; }
.campaign-link { gap: 6px; flex-wrap: nowrap; min-width: 0; }
.campaign-link .ui-field { flex: 1 1 auto; min-width: 0; }
.campaign-table td { overflow-wrap: anywhere; }
/* the notes under a figure wrap; the figure itself stays on one line */
.campaign-table .ui-num .text-caption, .campaign-rollups .ui-num .text-caption { white-space: normal; }
/* six columns each: the two rollups stack, one under the other */
.pnl-grid.campaign-rollups { grid-template-columns: minmax(0, 1fr); }

/* «طلب بيع مباشر» popup (Backend.direct_sales._popup) and «الحملة» popup (Backend.order._campaign_popup) */
.fields .pform-field { margin: 0; min-width: 0; }
.fields .pform-field textarea.ui-field { min-height: 64px; }
.direct-modal .ui-modal-dialog { max-width: 640px; }
.direct-lines { display: grid; gap: 8px; min-width: 0; }
.direct-line-head, .direct-line { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr) minmax(0, 1fr) 36px; gap: 8px; align-items: center; min-width: 0; }
.direct-line-head { font-size: 12px; font-weight: 600; color: var(--muted); }
.direct-line .ui-field { min-width: 0; width: 100%; }
.direct-line-note { grid-column: 1 / -1; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.direct-line-note:empty { display: none; }
.direct-line-note.is-bad { color: var(--danger); }
.direct-total { gap: 10px; flex-wrap: wrap; }
.direct-total strong { font-size: 16px; }
@media (max-width: 480px) { .direct-line-head { display: none; } .direct-line { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px; } .direct-line [data-dl-code] { grid-column: 1 / -1; } }
.order-campaign-line { display: block; overflow-wrap: anywhere; }
.order-campaign-line .icon-btn { display: inline-flex; vertical-align: middle; width: 28px; height: 28px; margin-inline-start: 2px; }
/* «إعلانات تحسين» (Backend/ad_ops): the segmented switch as links too, the wallets' cards, the
   spend split, the proof in a row and in its viewer, «يوم بيوم» folded */
html .ui-seg a {
    display: inline-flex; align-items: center; padding: 7px 12px; border-radius: 99px; white-space: nowrap;
    color: var(--muted); font-size: var(--fs-caption); font-weight: var(--w-semi); line-height: 1; text-decoration: none;
}
html .ui-seg a:hover { color: var(--ink); }
html .ui-seg a[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.adw-seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.adw-seg::-webkit-scrollbar { display: none; }
.adw-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.adw-card {
    display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px 16px; border: 1px solid var(--line);
    border-radius: var(--r-lg, 14px); background: var(--surface); color: inherit; text-decoration: none;
    transition: border-color var(--fast), box-shadow var(--fast);
}
.adw-card:hover, .adw-card:focus-visible { border-color: var(--brand); box-shadow: var(--shadow-sm); }
.adw-card.is-off { opacity: .75; }
.adw-card-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.adw-card-name { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }
.adw-platform {
    flex: 0 0 auto; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
    background: var(--surface-2); color: var(--ink); font-weight: 700;
}
.adw-platform.is-facebook { background: #E7F0FF; color: #1658C9; }
.adw-platform.is-tiktok { background: #111; color: #fff; }
.adw-platform.is-snapchat { background: #FFF8C4; color: #6B5D00; }
.adw-platform.is-google { background: #E9F6EE; color: #146C2E; }
.adw-balance { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.adw-balance small { font-size: 12px; font-weight: 500; color: var(--muted); }
.adw-balance.is-loss { color: var(--danger); }
.adw-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.adw-split { display: grid; gap: 8px; padding: 12px; border: 1px dashed var(--line-strong, var(--line)); border-radius: 12px; min-width: 0; }
.adw-split-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px; }
.adw-split-list { display: grid; gap: 8px; }
.adw-split-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 120px) minmax(0, 110px); gap: 8px; align-items: center; }
.adw-split-row > label { overflow-wrap: anywhere; font-size: 14px; }
.adw-split-row:not(.is-new) > label:nth-last-child(2) { grid-column: 1 / 3; }
.adw-split-row .ui-field { min-width: 0; }
.adw-split .ui-help { margin: 0; }
.adw-proof { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.adw-proof legend { font-weight: 600; font-size: 14px; margin-bottom: 6px; padding: 0; }
.adw-flow { margin: 0; font-weight: 600; color: var(--brand-900, var(--ink)); overflow-wrap: anywhere; }
.adw-flow:empty { display: none; }
.adw-proof-btn, .adw-proof-add {
    display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 99px;
    background: var(--surface); color: var(--ink); font: inherit; font-size: 12px; cursor: pointer;
}
.adw-proof-btn:hover, .adw-proof-add:hover { border-color: var(--brand); }
.adw-media { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.adw-media img, .adw-media video { width: 100%; max-height: 360px; object-fit: contain; border-radius: 10px; background: var(--surface-2); display: block; }
.adw-proof-link { margin: 0; overflow-wrap: anywhere; }
.adw-proof-note { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.adw-table td { overflow-wrap: anywhere; }
.adw-table .ui-num .text-caption, .adw-split-note { white-space: normal; }
.adw-caption { margin: 12px 0 0; }
.adw-more { padding: 0; }
.adw-more > summary { cursor: pointer; padding: 14px 18px; font-weight: 600; }
.adw-more[open] > summary { border-bottom: 1px solid var(--line); }
.adw-more .chart-box { position: relative; height: 260px; margin: 14px 18px 18px; }
.ui-modal .adw-more { border: 1px solid var(--line); border-radius: 12px; }
.adw-h3 { font-size: 14px; margin: 0; }
.campaign-table tr.is-link { cursor: pointer; }
.campaign-table tr.is-link:hover td, .campaign-table tr.is-link:focus-visible td { background: var(--surface-2); }
@media (max-width: 600px) {
    .adw-split-row { grid-template-columns: minmax(0, 1fr) minmax(0, 96px); }
    .adw-split-row > label { grid-column: 1 / -1; }
    .adw-split-row.is-new > input:first-child { grid-column: 1 / -1; }
}
/* «من ← إلى» (سجل الفلوس، كشف حساب الخزنة، محفظة إعلانات): the two names wrap, never widen the table */
.ui-table td[data-label="من ← إلى"], .ui-table td[data-label="البيان"], .ui-table td[data-label="النوع"] { white-space: normal; overflow-wrap: anywhere; min-width: 9rem; }

/* «التدفق النقدي»: what the couriers owe (six columns, a «ورّد» on each row) takes the whole width,
   what is owed out below it, so its table never scrolls sideways */
.pnl-grid.cashflow-in-out { grid-template-columns: minmax(0, 1fr); }

/* a courier's custody (Backend.shipping.custody): its one-line links, and the money flow line of the remittance popup */
.custody-line a { font-weight: var(--w-semi); }
.remit-flow { margin: 0; font-weight: var(--w-semi); color: var(--ink); }
/* a compact table's cell that may wrap (its buttons, a long description), so the table fits its card at 1024 */
.ui-table.is-compact td.cell-wrap { white-space: normal; }
.ui-table.is-compact td.cell-wrap .cluster { flex-wrap: wrap; }
/* the couriers list: its row icons (custody, remittance, performance, orders, edit) wrap in their column, never cut */
.companies-board .board-actions { flex-wrap: wrap; }

/* «دفعة مورد» (Backend/suppliers/_payment_popup, _payment_fields): the «من ← إلى» line over the money fields */
.sp-flow { display: flex; align-items: center; gap: 6px; margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--surface-2, #f4f6f5); font-size: 13px; font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.sp-flow .icon { flex: none; }
.st-pair > .pform-field, .st-pair > .wh-pick { margin: 0; min-width: 0; }
/* «الدفع» on a purchase receipt (Backend/purchase/_payment_fields) */
.pay-fields { margin-bottom: 10px; }
.pay-fields-cash .pform-field { margin-bottom: 10px; }
/* «تسجيل هالك» popup (Backend/wastage/_form): the search over the form */
.ui-modal .wastage-found { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ui-modal .wastage-found li { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 6px; min-width: 0; }
/* «بنود المصروفات» gear popup (Backend/expenses/index) */
.exp-cat-new { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 12px; align-items: end; }
.exp-cat-new .pform-field { margin: 0; min-width: 0; }
#wastageRecord > * + * { margin-top: 10px; }

/* «معاملة مالية» (_wallet_entry_popup): «من ← إلى» as two choices, or one fixed line from a ticket */
.wallet-dir { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.wallet-dir legend { font-weight: 600; font-size: 13px; margin-bottom: 6px; padding: 0; }
.wallet-dir .chip-check { max-width: 100%; overflow-wrap: anywhere; }
.wallet-dir-fixed { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
/* the bulk «تغيير الحالة»: what came home damaged, on each order's row */
.bulk-dmg { margin-top: 6px; min-width: 0; }
.bulk-dmg summary { cursor: pointer; }
.bulk-dmg .st-damaged { margin-top: 6px; grid-template-columns: 72px minmax(0, 1fr); }
.bulk-dmg .st-damaged label { grid-column: 1 / -1; overflow-wrap: anywhere; }
/* «المتابعة بعد الشحن»: the call buttons wrap inside their column instead of pushing the table sideways */
.fu-table .fu-form, .fu-table .fu-results { min-width: 0; max-width: 100%; }
.ui-table.is-compact td .cluster.fu-results { flex-wrap: wrap; }
.fu-table .fu-line { overflow-wrap: anywhere; }
.fu-table td:last-child { min-width: 0; }
@media (min-width: 768px) { .fu-table { table-layout: fixed; width: 100%; } .fu-table th:first-child { width: 20%; } .fu-table th:last-child { width: 32%; } }

/* «من ← إلى» (components/ui/money-flow): the two names of a money row with a small arrow, wrapping inside its cell */
.money-flow { position: relative; display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; max-width: 100%; min-width: 0; white-space: normal; }
.money-flow-party { overflow-wrap: anywhere; min-width: 0; }
.money-flow-arrow { flex: none; color: var(--muted); font-size: 0.85em; }
.money-flow-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.money-flow-note { flex-basis: 100%; color: var(--muted); font-size: 12px; }
/* a money table's cell that holds the flow wraps, so the table fits its card at 1024 */
.ui-table td.flow-cell { white-space: normal; min-width: 0; }
/* «تفاصيل» (components/ui/row-more): a row's figures past the table's six columns, folded in its last cell */
.row-more { min-width: 0; }
.row-more > summary { cursor: pointer; font-size: var(--fs-caption); font-weight: var(--w-semi); color: var(--brand-700); white-space: nowrap; }
.row-more > dl { display: grid; grid-template-columns: minmax(0, auto) minmax(0, auto); gap: 4px 12px; margin: 6px 0 0; font-size: 12px; white-space: normal; }
.row-more > dl > dt { color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
.row-more > dl > dd { margin: 0; text-align: end; }
.ui-table td.row-more-cell { white-space: normal; }
/* a figure's second line inside its cell (the counts that make a rate, the cost under a revenue) */
.ui-table .cell-sub { display: block; color: var(--muted); font-size: 12px; font-weight: 400; white-space: normal; }
/* the gear popups' option blocks («إعدادات المخزن», «إعدادات التجهيز») */
.inv-setting h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 15px; }
.inv-setting + .inv-setting { border-top: 1px solid var(--line); padding-top: 14px; }
.inv-setting-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px 12px; margin-bottom: 10px; }
.inv-setting-fields > div { min-width: 0; }
/* the stock ledger (Backend/inventory/_movements_table): its lines wrap inside their columns, never past the card */
.ui-table.mv-table td { white-space: normal; }
/* an order's items: five columns now (the variant under the product), so the table takes its card's width */
.ui-table.inv-items { min-width: 0; }
/* the API reference tables (WebSite/user/partials/api_docs): a long description or path wraps in its cell */
.ui-table.api-table td { white-space: normal; overflow-wrap: anywhere; }
.ui-table.api-table td code { white-space: normal; overflow-wrap: anywhere; }
.ui-table.mv-table td:first-child { min-width: 0; }
.ui-table.inv-items td.inv-row-actions { white-space: normal; min-width: 0; }
.ui-table.inv-items td.inv-row-actions form { display: inline-block; margin: 2px 0; }
@media (min-width: 768px) { .ui-table.inv-items td.inv-row-actions { display: table-cell; } }

/* «حركة رصيد» (Backend/financial/_money_entry): the person's search over its grouped list, and «من ← إلى» as two choices that wrap */
#moneyEntry .me-find { margin-bottom: 6px; }
#moneyEntry .me-party { width: 100%; max-width: 100%; min-width: 0; height: auto; padding: 4px; background-image: none; }
#moneyEntry .me-party optgroup { font-weight: 700; }
#moneyEntry .me-chip { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
#moneyEntry .me-chip strong { flex: 1; min-width: 0; overflow-wrap: anywhere; }
#moneyEntry .me-choice { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; }
#moneyEntry .me-choice legend { font-weight: 600; font-size: 13px; margin-bottom: 6px; padding: 0; }
#moneyEntry .me-choice .chip-check { max-width: 100%; min-height: 36px; height: auto; padding: 6px 12px; white-space: normal; overflow-wrap: anywhere; }
#moneyEntry .me-choice .chip-check:has(input:disabled) { opacity: .45; cursor: not-allowed; }
#moneyEntry .me-choice .hint { flex-basis: 100%; }
#moneyEntry .me-wallet { margin: 0; }
/* «مطالبة جديدة»: «اتحسبت على الشركة على طول» */
.claim-now { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.claim-now input { width: 18px; height: 18px; }
.claim-lines[hidden] { display: none; }
.claim-lines-list { display: grid; gap: 6px; }
.claim-line { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.claim-line > span { flex: 1 1 auto; min-width: 0; }
.claim-line .ui-field { width: 72px; flex: none; text-align: center; }
/* «تقسيم التسليم الجزئي»: the amount on the courier for the lost units charged now (free, prefilled with their sale price) */
.split-lost-amount { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 160px); align-items: center; gap: 4px 10px; font-size: 13px; font-weight: 600; }
.split-lost-amount[hidden] { display: none; }
.split-lost-amount input { min-width: 0; }
.split-lost-amount small { grid-column: 1 / -1; color: var(--muted); font-size: 12px; font-weight: 400; }
/* «حركة رصيد»: an ad account's dollar rate and transfer target */
#moneyEntry [data-me-only="fx"] .hint, #moneyEntry [data-me-only="move"] .hint { display: block; }

/* «التقارير»: a card per report (Backend.reports.index) */
.reports-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-bottom: 24px; }
.reports-card { display: flex; gap: 12px; align-items: flex-start; padding: 16px; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.reports-card:hover, .reports-card:focus-visible { border-color: var(--brand-500, #0CD273); box-shadow: 0 4px 16px rgba(0,0,0,.06); }
.reports-card > span:last-child { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.reports-card-icon { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-50, #E9FBF2); color: var(--brand-700, #067C44); }

/* The dashboard's menu in sections that fold (components/ui/nav): the section of the page open,
   the others closed with a count and what waits in them; on the icon rail every section shows */
.ui-nav-section + .ui-nav-section, .ui-nav-group + .ui-nav-section, .ui-nav-section + .ui-nav-group { margin-top: 2px; }
.ui-nav-section-head {
    display: flex; align-items: center; gap: 8px;
    min-height: 38px; padding: 0 10px; margin: 2px 0;
    border-radius: var(--r-md); cursor: pointer; list-style: none; user-select: none;
    font-size: 13px; font-weight: var(--w-bold); color: var(--ink);
}
.ui-nav-section-head::-webkit-details-marker { display: none; }
.ui-nav-section-head:hover { background: var(--surface-2); }
.ui-nav-section-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-nav-section-count { flex: 0 0 auto; font-size: 11px; font-weight: var(--w-semi); color: var(--muted-2); }
.ui-nav-section[open] > .ui-nav-section-head .ui-nav-section-count { display: none; }
/* a section's (and a folded item's) sum of what waits shows while it is folded; open, each line shows its own */
.ui-nav-section[open] > .ui-nav-section-head .ui-nav-sum, .ui-nav-sub[open] > .ui-nav-link .ui-nav-sum { display: none; }
.ui-nav-section[open] > .ui-nav-section-head .ui-nav-chev { transform: rotate(180deg); }
.ui-nav-section[open] > .ui-nav-section-head { color: var(--brand-800, var(--ink)); }
.ui-nav-section > .ui-nav-list { padding-bottom: 6px; }
.ui-nav-section[data-here] > .ui-nav-section-head { color: var(--brand-700); }
html.ui-nav-collapsed .ui-nav-section-head { display: none; }

/* «تقفيل الشهور»: the oldest open month first with what to look at before closing it (a green tick when nothing waits),
   the other open months folded under it, the closed ones in a table below */
.mc-next { margin-bottom: 14px; }
.mc-next-head { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: flex-start; }
.mc-next-head h2 { margin: 2px 0 4px; font-size: 20px; }
.mc-next-head .ui-help { margin: 0; }
.mc-check { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.mc-check li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; min-width: 0; }
.mc-check li.is-open { border-color: color-mix(in srgb, var(--warning) 40%, var(--line)); background: color-mix(in srgb, var(--warning) 6%, transparent); }
.mc-check-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; }
.mc-check li.is-done .mc-check-ico { color: #fff; background: var(--success); }
.mc-check li.is-open .mc-check-ico { color: var(--warning); background: color-mix(in srgb, var(--warning) 14%, transparent); }
.mc-check-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.mc-check li .ui-btn { flex: none; }
.mc-others { margin-bottom: 14px; }
.mc-others > summary { cursor: pointer; font-weight: var(--w-bold); }
.mc-others-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.mc-others-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); }
.mc-closed-title { font-size: 15px; margin: 18px 0 8px; }
@media (max-width: 520px) { .mc-check li { flex-wrap: wrap; } .mc-check li .ui-btn { margin-inline-start: 38px; } }

/* the courier and supplier statements (<x-ui.signed-amount>): one signed «المبلغ» from our side, + green toward us,
   − what we owe; the description on one line (the full note in its title); five columns that fit an A4 page */
.signed-amount { white-space: nowrap; font-variant-numeric: tabular-nums; }
.signed-amount.is-in { color: var(--success); }
.signed-amount.is-out { color: var(--ink); }
.signed-amount.is-zero { color: var(--muted); }
.ledger-table td:first-child { white-space: nowrap; }
.ledger-desc { max-width: 340px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 768px) { .ledger-table .money-flow { flex-wrap: nowrap; white-space: nowrap; } }
.ledger-table tr.ledger-total td { border-top: 2px solid var(--line); }
@media (max-width: 767px) { .ledger-desc { max-width: none; white-space: normal; } }
@media print {
    body .ledger-table .ui-table :is(th, td) { font-size: 11px; }
    .ledger-table td:first-child { width: 1%; }
    .ledger-table :is(th, td) { padding: 4px 6px; }
    .ledger-desc { max-width: none; white-space: normal; }
    .signed-amount.is-in { color: #0b6b3f; }
    .ledger-table tr { break-inside: avoid; }
}