/* FoodBooth app layer · fb-uplift.css · Direction 1 "The Ledger" + dark mode
   Load AFTER Bootstrap 5.3 (bootstrap.rtl.min.css for Arabic, bootstrap.min.css for English) and AFTER site.css.
   Sections: 1 tokens (identical to the website's fb.css) · 2 app tokens · 3 Bootstrap 5.3 bridge · 4 base ·
   5 shell (fb-shell, fb-sidebar, fb-topbar, fb-drawer) · 6 controls (fb-seg, fb-chip, fb-iconbtn) ·
   7 dashboard blocks (fb-strip, fb-kpi, fb-measures, fb-meter, fb-alert, fb-st) · 8 fb-ledger tables ·
   9 fb-chart · 10 fb-empty, cards, outlets · 11 responsive · 12 print.
   Rules: logical properties only (the one physical value is text-align:right on numeric cells, on purpose: the
   cell is LTR, so the units digit lines up in both languages). Orange #F26322 is never text under 24 px; it appears
   on the primary button, focus rings, the active-nav edge and link underlines only. Dark mode = the same tokens on
   ink, switched by <html data-theme="dark|light"> (set by fb-uplift.js) or by prefers-color-scheme when no choice
   is stored. */

/* ---------- 1. Tokens (copied from site/src/css/fb.css; keep values identical) ---------- */
:root{
  --fb-ink-66:#665F5B; /* ink 66 % over paper: secondary text on paper, mist and selected rows (>= 4.5:1) */
  /* brand package v1 (do not change) */
  --fb-ink:#17120F; --fb-body:#4A3F39; --fb-mute:#8A7A70; --fb-paper:#FFF6F0; --fb-mist:#FBE9DF; --fb-surface:#FFFFFF;
  --fb-hairline:#EBD9CE; --fb-brand:#F26322; --fb-brand-light:#FF9248; --fb-brand-deep:#B3201F;
  --fb-status-ok:#1F7A4D; --fb-status-warn:#9A5B00; --fb-status-bad:#B3261E; --fb-status-info:#0E5F62;
  /* Ledger enhancements (derived, see audit/04-design-directions/README.md) */
  --fb-ink-60:#746D69; --fb-ink-40:#A29B96; --fb-ink-20:#D1C8C3; --fb-brand-12:#FDE4D7;
  --fb-paper-72:#BEB6B1; --fb-paper-55:#978F8B; --fb-paper-30:#5D5653;
  --fb-ink-raised:#25201C; --fb-ink-raised-2:#332D2A; --fb-hairline-dark:#3C3633;
  --fb-ok-on-ink:#79AC8E; --fb-warn-on-ink:#C29960; --fb-bad-on-ink:#D17972; --fb-info-on-ink:#6E9B9B;
  /* type */
  --fb-font-heading:Poppins,"IBM Plex Sans Arabic",system-ui,sans-serif;
  --fb-font-label:"Josefin Sans",system-ui,sans-serif;
  --fb-font-body:Archivo,"IBM Plex Sans Arabic",system-ui,sans-serif;
  --fb-font-arabic:"IBM Plex Sans Arabic","Segoe UI","Noto Sans Arabic","Noto Naskh Arabic",Tahoma,system-ui,sans-serif;
  /* semantic roles (these flip in dark mode) */
  --ground:var(--fb-paper); --ground-2:var(--fb-mist); --surface:var(--fb-surface);
  --ink:var(--fb-ink); --text:var(--fb-body); --text-2:var(--fb-ink-66); --stroke:var(--fb-hairline); --stroke-2:var(--fb-ink-40);
  --series-1:var(--fb-ink-20); --series-2:var(--fb-ink); --selected:var(--fb-brand-12);
  --ok:var(--fb-status-ok); --warn:var(--fb-status-warn); --bad:var(--fb-status-bad); --info:var(--fb-status-info);
  --glass:rgb(255 246 240 / .92); --on-brand:#fff;
  --shadow:0 1px 2px rgb(23 18 15 / .04),0 12px 32px rgb(23 18 15 / .08);
  --radius:4px; --max:1200px; --gutter:40px;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --ground:var(--fb-ink); --ground-2:var(--fb-ink-raised); --surface:var(--fb-ink-raised);
  --ink:var(--fb-paper); --text:var(--fb-paper-72); --text-2:var(--fb-paper-55); --stroke:var(--fb-hairline-dark); --stroke-2:var(--fb-paper-30);
  --series-1:var(--fb-paper-30); --series-2:var(--fb-paper); --selected:rgb(242 99 34 / .16);
  --ok:var(--fb-ok-on-ink); --warn:var(--fb-warn-on-ink); --bad:var(--fb-bad-on-ink); --info:var(--fb-info-on-ink);
  --glass:rgb(23 18 15 / .88); --on-brand:var(--fb-ink);
  --shadow:0 1px 2px rgb(0 0 0 / .3),0 12px 32px rgb(0 0 0 / .4);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:var(--fb-ink); --ground-2:var(--fb-ink-raised); --surface:var(--fb-ink-raised);
    --ink:var(--fb-paper); --text:var(--fb-paper-72); --text-2:var(--fb-paper-55); --stroke:var(--fb-hairline-dark); --stroke-2:var(--fb-paper-30);
    --series-1:var(--fb-paper-30); --series-2:var(--fb-paper); --selected:rgb(242 99 34 / .16);
    --ok:var(--fb-ok-on-ink); --warn:var(--fb-warn-on-ink); --bad:var(--fb-bad-on-ink); --info:var(--fb-info-on-ink);
    --glass:rgb(23 18 15 / .88); --on-brand:var(--fb-ink);
    --shadow:0 1px 2px rgb(0 0 0 / .3),0 12px 32px rgb(0 0 0 / .4);
    color-scheme:dark;
  }
}

/* ---------- 2. App tokens (additive; derived from the roles above) ---------- */
:root{
  --fb-app-font:var(--fb-font-body);
  --link:var(--fb-brand-deep);            /* body links: brand-deep, 6.3:1 on paper */
  --on-status:#fff;                       /* text on a filled status badge */
  --ok-rgb:31,122,77; --warn-rgb:154,91,0; --bad-rgb:179,38,30; --info-rgb:14,95,98;
  --ink-rgb:23,18,15; --ground-rgb:255,246,240; --text-rgb:74,63,57; --text-2-rgb:116,109,105; --link-rgb:179,32,31;
  --fb-sidebar-w:232px; --fb-topbar-h:60px; --fb-pad:28px; --fb-row:36px;
}
html[lang="ar"]{--fb-app-font:var(--fb-font-arabic)}
:root[data-theme="dark"]{
  --link:var(--fb-paper); --on-status:var(--fb-ink);
  --ok-rgb:121,172,142; --warn-rgb:194,153,96; --bad-rgb:209,121,114; --info-rgb:110,155,155;
  --ink-rgb:255,246,240; --ground-rgb:23,18,15; --text-rgb:190,182,177; --text-2-rgb:151,143,139; --link-rgb:255,246,240;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --link:var(--fb-paper); --on-status:var(--fb-ink);
    --ok-rgb:121,172,142; --warn-rgb:194,153,96; --bad-rgb:209,121,114; --info-rgb:110,155,155;
    --ink-rgb:255,246,240; --ground-rgb:23,18,15; --text-rgb:190,182,177; --text-2-rgb:151,143,139; --link-rgb:255,246,240;
  }
}

/* ---------- 3. Bootstrap 5.3 bridge (runtime variables; no Sass rebuild needed) ---------- */
:root{
  --bs-body-font-family:var(--fb-app-font);
  --bs-body-font-size:.9375rem; --bs-body-line-height:1.6;
  --bs-body-bg:var(--ground); --bs-body-bg-rgb:var(--ground-rgb);
  --bs-body-color:var(--text); --bs-body-color-rgb:var(--text-rgb);
  --bs-emphasis-color:var(--ink); --bs-emphasis-color-rgb:var(--ink-rgb);
  --bs-heading-color:var(--ink);
  --bs-secondary-color:var(--text-2); --bs-secondary-color-rgb:var(--text-2-rgb);
  --bs-secondary-bg:var(--ground-2); --bs-tertiary-bg:var(--ground-2); --bs-tertiary-color:var(--text-2);
  --bs-border-color:var(--stroke); --bs-border-color-translucent:var(--stroke);
  --bs-border-radius:var(--radius); --bs-border-radius-sm:var(--radius); --bs-border-radius-lg:var(--radius);
  --bs-link-color:var(--link); --bs-link-color-rgb:var(--link-rgb);
  --bs-link-hover-color:var(--ink); --bs-link-hover-color-rgb:var(--ink-rgb);
  --bs-primary:#F26322; --bs-primary-rgb:242,99,34;
  --bs-success-rgb:var(--ok-rgb); --bs-warning-rgb:var(--warn-rgb); --bs-danger-rgb:var(--bad-rgb); --bs-info-rgb:var(--info-rgb);
  --bs-secondary-rgb:var(--text-2-rgb); --bs-dark-rgb:var(--ink-rgb);
  --bs-focus-ring-color:rgb(242 99 34 / .45); --bs-focus-ring-width:2px;
  --bs-highlight-bg:var(--selected);
}
a{color:var(--link);text-decoration-color:var(--fb-brand);text-underline-offset:4px}
a:hover{color:var(--ink)}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{color:var(--ink);font-weight:600}
html[lang="ar"] :is(h1,h2,h3,h4,h5,h6){font-family:var(--fb-font-arabic);font-weight:700}
html[lang="en"] :is(h1,h2,h3,h4,h5,h6){font-family:var(--fb-font-heading);letter-spacing:-.01em}

/* buttons: Bootstrap compiles .btn-primary colours, so set its runtime variables here */
.btn{--bs-btn-font-family:var(--fb-app-font);--bs-btn-font-weight:500;--bs-btn-font-size:.875rem;--bs-btn-padding-y:.5rem;--bs-btn-padding-x:1.125rem;--bs-btn-border-radius:var(--radius);--bs-btn-focus-box-shadow:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
html[lang="en"] .btn{--bs-btn-font-family:var(--fb-font-heading);--bs-btn-font-weight:600}
.btn:focus-visible{outline:2px solid var(--fb-brand);outline-offset:2px}
.btn-sm{--bs-btn-padding-y:.3125rem;--bs-btn-padding-x:.75rem;--bs-btn-font-size:.8125rem}
.btn-primary{
  --bs-btn-color:var(--fb-ink);--bs-btn-bg:var(--fb-brand);--bs-btn-border-color:var(--fb-brand);
  --bs-btn-hover-color:var(--fb-ink);--bs-btn-hover-bg:var(--fb-brand-light);--bs-btn-hover-border-color:var(--fb-brand-light);
  --bs-btn-active-color:#fff;--bs-btn-active-bg:var(--fb-brand-deep);--bs-btn-active-border-color:var(--fb-brand-deep);
  --bs-btn-disabled-color:var(--fb-ink);--bs-btn-disabled-bg:var(--fb-brand);--bs-btn-disabled-border-color:var(--fb-brand);
  font-weight:700;
}
:root[data-theme="dark"] .btn-primary{--bs-btn-color:var(--fb-ink);--bs-btn-hover-color:var(--fb-ink);--bs-btn-active-color:var(--fb-paper);--bs-btn-disabled-color:var(--fb-ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn-primary{--bs-btn-color:var(--fb-ink);--bs-btn-hover-color:var(--fb-ink);--bs-btn-active-color:var(--fb-paper);--bs-btn-disabled-color:var(--fb-ink)}}
/* secondary = ink outline; ghost = no border */
.btn-outline-secondary{--bs-btn-color:var(--ink);--bs-btn-bg:transparent;--bs-btn-border-color:var(--stroke-2);--bs-btn-hover-color:var(--ink);--bs-btn-hover-bg:var(--surface);--bs-btn-hover-border-color:var(--ink);--bs-btn-active-color:var(--ink);--bs-btn-active-bg:var(--ground-2);--bs-btn-active-border-color:var(--ink)}
.btn-link,.fb-btn-ghost{--bs-btn-color:var(--ink);--bs-btn-bg:transparent;--bs-btn-border-color:transparent;--bs-btn-hover-color:var(--ink);--bs-btn-hover-bg:var(--ground-2);--bs-btn-hover-border-color:transparent;--bs-btn-active-color:var(--ink);--bs-btn-active-bg:var(--ground-2);--bs-btn-active-border-color:transparent;text-decoration:none}

/* forms */
.form-control,.form-select{background-color:var(--surface);color:var(--ink);border-color:var(--stroke-2);border-radius:var(--radius);font-family:var(--fb-app-font)}
.form-control::placeholder{color:var(--text-2);opacity:1}
.form-control:focus,.form-select:focus{background-color:var(--surface);color:var(--ink);border-color:var(--fb-brand);box-shadow:none;outline:2px solid var(--fb-brand);outline-offset:1px}
.form-control:disabled,.form-select:disabled{background-color:var(--ground-2);color:var(--text-2)}
.form-label{color:var(--ink);font-weight:600;font-size:.875rem}
.form-text{color:var(--text-2)}
.form-check-input{background-color:var(--surface);border-color:var(--stroke-2)}
.form-check-input:checked{background-color:var(--fb-brand);border-color:var(--fb-brand)}
.form-check-input:focus{box-shadow:none;outline:2px solid var(--fb-brand);outline-offset:1px}
/* the chevron in .form-select is a compiled dark SVG; swap to a paper-coloured one in dark mode */
:root[data-theme="dark"] .form-select{--bs-form-select-bg-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23FFF6F0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .form-select{--bs-form-select-bg-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23FFF6F0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")}}

/* tables */
.table{--bs-table-color:var(--text);--bs-table-bg:transparent;--bs-table-border-color:var(--stroke);--bs-table-striped-bg:var(--ground-2);--bs-table-striped-color:var(--text);--bs-table-hover-bg:var(--ground-2);--bs-table-hover-color:var(--ink);--bs-table-active-bg:var(--selected);--bs-table-active-color:var(--ink);color:var(--text)}

/* badges: filled status variants (white on status in light, ink on the on-ink status in dark) */
.badge{--bs-badge-font-weight:500;--bs-badge-border-radius:var(--radius);--bs-badge-padding-x:.5rem;--bs-badge-padding-y:.3rem;font-family:var(--fb-app-font)}
.badge.text-bg-success{background-color:var(--ok)!important;color:var(--on-status)!important}
.badge.text-bg-warning{background-color:var(--warn)!important;color:var(--on-status)!important}
.badge.text-bg-danger{background-color:var(--bad)!important;color:var(--on-status)!important}
.badge.text-bg-info{background-color:var(--info)!important;color:var(--on-status)!important}
.badge.text-bg-secondary{background-color:var(--ground-2)!important;color:var(--ink)!important}
.badge.text-bg-primary{background-color:var(--selected)!important;color:var(--ink)!important}

/* cards: surface + hairline + 4 px radius, no shadow */
.card{--bs-card-bg:var(--surface);--bs-card-color:var(--text);--bs-card-border-color:var(--stroke);--bs-card-border-radius:var(--radius);--bs-card-inner-border-radius:calc(var(--radius) - 1px);--bs-card-cap-bg:transparent;--bs-card-title-color:var(--ink);--bs-card-spacer-y:1.125rem;--bs-card-spacer-x:1.25rem}

/* ---------- 4. Base ---------- */
body{background:var(--ground);color:var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
html[lang="ar"] body{line-height:1.7}
:focus-visible{outline:2px solid var(--fb-brand);outline-offset:2px}
::selection{background:var(--fb-brand-12);color:var(--fb-ink)}
*{scrollbar-width:thin;scrollbar-color:var(--stroke-2) transparent}
.fb-skip{position:absolute;inset-inline-start:16px;inset-block-start:-48px;z-index:1100;background:var(--ink);color:var(--ground);padding-block:10px;padding-inline:14px;border-radius:var(--radius)}
.fb-skip:focus{inset-block-start:12px;color:var(--ground)}
/* numbers never mirror; the face of the line carries its digits */
.fb-num{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.fb-fig{font-family:var(--fb-font-heading);font-weight:600;color:var(--ink);letter-spacing:-.02em;line-height:1;direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.fb-cur{font:300 11px/1 var(--fb-font-label);letter-spacing:.22em;text-transform:uppercase;color:var(--text-2)}
.fb-lab{font:500 12px/1.4 var(--fb-app-font);color:var(--text-2)}
html[lang="en"] .fb-lab{font:300 11px/1.4 var(--fb-font-label);letter-spacing:.2em;text-transform:uppercase}
.fb-muted{color:var(--text-2)}
.fb-strong{color:var(--ink);font-weight:600}
.fb-lk{color:var(--ink);font-weight:500;text-decoration:underline;text-decoration-color:var(--fb-brand);text-decoration-thickness:2px;text-underline-offset:5px}
.fb-lk:hover{color:var(--ink);text-decoration-thickness:3px}
.fb-ic{inline-size:16px;block-size:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
[hidden]{display:none!important}

/* ---------- 5. Shell ---------- */
.fb-shell{display:grid;grid-template-columns:var(--fb-sidebar-w) minmax(0,1fr);min-block-size:100vh}
.fb-main{min-inline-size:0;display:flex;flex-direction:column}
.fb-content{padding-block:20px 56px;padding-inline:var(--fb-pad);inline-size:100%;max-inline-size:1240px}

/* sidebar: index numbers instead of icons */
.fb-sidebar{position:sticky;inset-block-start:0;block-size:100vh;overflow-y:auto;display:flex;flex-direction:column;padding-block:20px 16px;border-inline-end:1px solid var(--stroke);background:var(--ground)}
.fb-sidebar-logo{display:block;inline-size:150px;margin-inline:20px;margin-block-end:18px}
.fb-sidebar-logo img{display:block;inline-size:100%;block-size:auto}
.fb-logo-dark{display:none!important}
:root[data-theme="dark"] .fb-logo-light{display:none!important}
:root[data-theme="dark"] .fb-logo-dark{display:block!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fb-logo-light{display:none!important}:root:not([data-theme="light"]) .fb-logo-dark{display:block!important}}
.fb-co{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-inline:20px;margin-block-end:14px;padding-block:9px;padding-inline:12px;border:1px solid var(--stroke);border-radius:var(--radius);background:var(--surface);font-size:13px;font-weight:500;color:var(--ink);inline-size:calc(100% - 40px);text-align:start;cursor:pointer}
.fb-co:hover{border-color:var(--stroke-2)}
.fb-co > span{min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-nav{display:flex;flex-direction:column}
.fb-nav a{display:flex;align-items:center;gap:12px;padding-block:9px;padding-inline:20px;font-size:14px;color:var(--text);text-decoration:none;border-inline-start:2px solid transparent}
.fb-nav a:hover{background:var(--ground-2);color:var(--ink)}
.fb-nav a[aria-current="page"]{border-inline-start-color:var(--fb-brand);color:var(--ink);font-weight:700;background:var(--surface)}
.fb-nav-i{font:400 11px/1 var(--fb-font-label);letter-spacing:.1em;color:var(--text-2);inline-size:18px;flex:none;direction:ltr;unicode-bidi:isolate}
.fb-sidebar-foot{margin-block-start:auto;padding-block-start:14px;padding-inline:20px;border-block-start:1px solid var(--stroke);font-size:12px;color:var(--text-2);line-height:1.6}

/* sticky top bar */
.fb-topbar{position:sticky;inset-block-start:0;z-index:20;block-size:var(--fb-topbar-h);display:flex;align-items:center;gap:14px;padding-inline:var(--fb-pad);background:var(--glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-block-end:1px solid var(--stroke)}
.fb-topbar-title{margin:0;font-size:20px;line-height:1;white-space:nowrap}
.fb-topbar-range{font-size:13px;color:var(--text-2);white-space:nowrap}
.fb-topbar-actions{margin-inline-start:auto;display:flex;align-items:center;gap:6px}
.fb-iconbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;inline-size:36px;block-size:36px;padding:0;border:1px solid transparent;border-radius:var(--radius);background:transparent;color:var(--ink);cursor:pointer;text-decoration:none}
.fb-iconbtn:hover{background:var(--ground-2);color:var(--ink)}
.fb-iconbtn .fb-ic{inline-size:18px;block-size:18px}
.fb-dot-count{position:absolute;inset-block-start:2px;inset-inline-end:2px;min-inline-size:16px;block-size:16px;padding-inline:4px;border-radius:8px;background:var(--ink);color:var(--ground);font:600 10px/16px var(--fb-font-body);text-align:center}
.fb-theme .fb-moon{display:none}
:root[data-theme="dark"] .fb-theme .fb-sun{display:none}
:root[data-theme="dark"] .fb-theme .fb-moon{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fb-theme .fb-sun{display:none}:root:not([data-theme="light"]) .fb-theme .fb-moon{display:block}}
.fb-lang{font-size:13px;font-weight:500;color:var(--ink);text-decoration:none;padding-block:8px;padding-inline:10px;border-radius:var(--radius)}
.fb-lang:hover{background:var(--ground-2);color:var(--ink)}
html[lang="ar"] .fb-lang{font-family:var(--fb-font-body)}
html[lang="en"] .fb-lang{font-family:var(--fb-font-arabic)}
.fb-burger{display:none!important}

/* phone drawer (closed = [hidden] = display:none, so nothing sits off-canvas) */
.fb-drawer-backdrop{position:fixed;inset:0;z-index:1040;background:rgb(23 18 15 / .45)}
.fb-drawer{position:fixed;inset-block:0;inset-inline-start:0;z-index:1045;inline-size:min(320px,86vw);display:flex;flex-direction:column;background:var(--ground);border-inline-end:1px solid var(--stroke);box-shadow:var(--shadow);padding-block:16px;overflow-y:auto}
.fb-drawer-head{display:flex;align-items:center;justify-content:space-between;padding-inline:20px 12px;margin-block-end:14px}
.fb-drawer-head img{inline-size:132px;block-size:auto}
.fb-drawer .fb-nav a{padding-block:12px;font-size:16px}
.fb-drawer-foot{margin-block-start:auto;display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding-block-start:14px;padding-inline:20px;border-block-start:1px solid var(--stroke)}
body.fb-noscroll{overflow:hidden}

/* phone bottom bar: Home · Reports · Upload · More (shown below 992 px) */

/* ---------- 6. Controls ---------- */
/* segmented period control */
.fb-seg{display:inline-flex;flex:none;border:1px solid var(--stroke-2);border-radius:var(--radius);overflow:hidden}
.fb-seg a,.fb-seg button{display:block;padding-inline:12px;block-size:32px;line-height:32px;font-size:13px;color:var(--text);background:transparent;border:0;border-inline-start:1px solid var(--stroke-2);white-space:nowrap;text-decoration:none;cursor:pointer}
.fb-seg > :first-child{border-inline-start:0}
.fb-seg a:hover,.fb-seg button:hover{background:var(--ground-2);color:var(--ink)}
.fb-seg [aria-current="true"],.fb-seg [aria-pressed="true"]{background:var(--ink);color:var(--ground);font-weight:500}
.fb-seg [aria-current="true"]:hover{background:var(--ink);color:var(--ground)}
.fb-period-select{display:none}

/* status chips: glyph + word + colour (never colour alone) */
.fb-chip{display:inline-flex;align-items:center;gap:6px;block-size:24px;padding-inline:9px;border:1px solid currentColor;border-radius:var(--radius);font-size:12px;font-weight:500;line-height:1;white-space:nowrap;color:var(--text-2);background:var(--surface);text-decoration:none;vertical-align:middle}
.fb-chip .fb-ic{inline-size:12px;block-size:12px}
.fb-chip-dot{inline-size:6px;block-size:6px;border-radius:50%;background:currentColor;flex:none}
.fb-chip--ok{color:var(--ok)}
.fb-chip--warn{color:var(--warn)}
.fb-chip--bad{color:var(--bad)}
.fb-chip--info{color:var(--info)}
.fb-chip--neutral{color:var(--text-2)}
.fb-chip--launching{color:var(--text-2);border-style:dashed}
.fb-chip--fill{background:var(--selected);border-color:transparent;color:var(--ink)}
a.fb-chip:hover{background:var(--ground-2)}
a.fb-chip--fill:hover{background:var(--selected);text-decoration:underline;text-decoration-color:var(--fb-brand)}
/* a small inline tag after a label (e.g. «جاهز يقول») */
.fb-tag{display:inline-block;margin-inline-start:6px;padding-inline:5px;border:1px solid var(--stroke);border-radius:3px;font-size:11px;font-weight:400;line-height:16px;color:var(--text-2);vertical-align:middle;white-space:nowrap;direction:inherit}

/* ---------- 7. Dashboard blocks ---------- */
/* status strip: one line replacing the banners */
.fb-strip{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;min-block-size:40px;padding-block:6px;padding-inline:12px;margin-block-end:22px;border:1px solid var(--stroke);border-radius:var(--radius);background:var(--surface);font-size:13px;color:var(--text)}
.fb-strip-item{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.fb-strip-item b{color:var(--ink);font-weight:600}
.fb-strip-sep{inline-size:3px;block-size:3px;border-radius:50%;background:var(--stroke-2);flex:none}
.fb-strip-end{margin-inline-start:auto;display:inline-flex;align-items:center;gap:10px;flex:none}
.fb-strip--warn{border-inline-start:3px solid var(--warn)}
.fb-strip--bad{border-inline-start:3px solid var(--bad)}
.fb-strip--info{border-inline-start:3px solid var(--info)}

/* the hero number: type on paper, hairline below, no card */
.fb-kpi{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px 48px;align-items:end;padding-block:4px 22px;border-block-end:1px solid var(--stroke)}
.fb-kpi-label{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0;font-size:14px;font-weight:500;color:var(--text-2)}
.fb-kpi-fig{display:flex;align-items:baseline;gap:12px;margin:10px 0 0;font-size:72px}
.fb-kpi-fig .fb-cur{font-size:12px;letter-spacing:.22em}
.fb-kpi-sub{margin:12px 0 0;font-size:15px;color:var(--text)}
.fb-kpi-sub + .fb-kpi-sub{margin-block-start:4px}
.fb-kpi-sub bdi{color:var(--ink);font-weight:600}
.fb-kpi-dot{display:inline-block;margin-inline:6px;color:var(--stroke-2)}

/* secondary measures */
.fb-measures{display:flex;flex-wrap:wrap;justify-content:flex-end;row-gap:16px;margin:0;padding:0;list-style:none}
.fb-measures > li{padding-inline:22px;border-inline-start:1px solid var(--stroke)}
.fb-measures > li:first-child{border-inline-start:0;padding-inline-start:0}
.fb-measures > li:last-child{padding-inline-end:0}
.fb-measure-label{margin:0;font-size:13px;font-weight:500;color:var(--text-2);white-space:nowrap}
.fb-measure-fig{display:block;margin-block-start:6px;font-size:24px}
.fb-measure-note{display:block;margin-block-start:4px;font-size:12px;color:var(--text-2);white-space:nowrap}

/* completion meter (a native <progress>, so no inline style) */
.fb-meter{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;padding-block:12px;border-block-end:1px solid var(--stroke);font-size:14px}
.fb-meter-label{color:var(--ink);font-weight:600;white-space:nowrap}
.fb-meter-bar{appearance:none;-webkit-appearance:none;inline-size:160px;block-size:4px;border:0;border-radius:2px;background:var(--stroke);overflow:hidden;flex:none;vertical-align:middle}
.fb-meter-bar::-webkit-progress-bar{background:var(--stroke);border-radius:2px}
.fb-meter-bar::-webkit-progress-value{background:var(--ink);border-radius:2px}
.fb-meter-bar::-moz-progress-bar{background:var(--ink);border-radius:2px}
.fb-meter-next{color:var(--text)}
.fb-meter-locked{margin-inline-start:auto;font-size:12px;color:var(--text-2)}

/* one compact alert row, collapsed to a count above one */
.fb-alert{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding-block:10px;border-block-end:1px solid var(--stroke);font-size:14px;color:var(--text)}
.fb-alert-count{display:inline-flex;align-items:center;justify-content:center;min-inline-size:22px;block-size:22px;padding-inline:6px;border-radius:11px;background:var(--ink);color:var(--ground);font:600 11px/1 var(--fb-font-body)}
.fb-alert-text{min-inline-size:0;flex:1 1 220px}
.fb-alert-action{margin-inline-start:auto}
.fb-block{margin-block-start:40px}

/* section titles */
.fb-st{margin:0 0 2px;font-size:18px;line-height:1.3;color:var(--ink)}
html[lang="en"] .fb-st{font-size:17px}
.fb-sd{margin:0 0 12px;font-size:13px;color:var(--text-2)}
.fb-g2{display:grid;grid-template-columns:7fr 5fr;gap:40px;align-items:start}

/* ---------- 8. Ledger tables ---------- */
.fb-ledger{inline-size:100%;margin:0;border-collapse:collapse;vertical-align:middle;font-size:14px;color:var(--text)}
.fb-ledger > :not(caption) > * > *{padding-block:8px;padding-inline:10px;background:transparent;box-shadow:none;border-block-end:1px solid var(--stroke);color:inherit}
.fb-ledger > thead > tr > th{font-size:12px;font-weight:500;color:var(--text-2);text-align:start;padding-block:7px;border-block-end:1px solid var(--ink);white-space:nowrap;vertical-align:bottom}
.fb-ledger > :not(caption) > tr > :first-child{padding-inline-start:0}
.fb-ledger > :not(caption) > tr > :last-child{padding-inline-end:0}
.fb-ledger > tbody > tr > td{block-size:var(--fb-row)}
/* numeric cells: LTR, isolated, tabular; right-aligned in BOTH languages so the units digit lines up */
.fb-ledger .n{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.fb-ledger td.n{color:var(--ink)}
.fb-ledger th.n{direction:inherit}
/* the scroller is the containing block, so a .visually-hidden label in a cell cannot escape it and widen the page */
.table-responsive{position:relative}
.fb-ledger td.n > bdi{direction:ltr;unicode-bidi:isolate}
.fb-ledger td.n.fb-muted{color:var(--text-2)}
.fb-ledger > tbody > tr:not(.tot):not(.fb-orders):hover > td{background:var(--ground-2)}
.fb-ledger tr.tot > td{border-block-start:1px solid var(--ink);border-block-end:3px double var(--ink);font-weight:700;color:var(--ink);background:transparent}
.fb-ledger tr.tot > td.n{font-family:var(--fb-font-heading);font-size:16px}
.fb-ledger .fb-row-head{color:var(--ink);font-weight:600}
.fb-ledger-sm{font-size:13px}
.fb-ledger-sm > :not(caption) > * > *{padding-block:6px}
.fb-ledger-sm > tbody > tr > td{block-size:32px}
/* running-balance bar (a decorative <progress>) */
.fb-wbar{appearance:none;-webkit-appearance:none;display:inline-block;inline-size:96px;block-size:4px;margin-inline-end:12px;border:0;border-radius:2px;background:var(--stroke);vertical-align:middle;overflow:hidden}
.fb-wbar::-webkit-progress-bar{background:var(--stroke)}
.fb-wbar::-webkit-progress-value{background:var(--ink)}
.fb-wbar::-moz-progress-bar{background:var(--ink)}
/* expand control on a waterfall line */
.fb-expand{display:inline-flex;align-items:center;gap:8px;padding:0;border:0;background:transparent;color:inherit;font:inherit;text-align:start;cursor:pointer}
.fb-expand .fb-chev{inline-size:14px;block-size:14px;color:var(--text-2);transition:transform .15s}
.fb-expand[aria-expanded="true"] .fb-chev{transform:rotate(180deg)}   /* a down chevron: direction-neutral */
.fb-expand:hover .fb-expand-label{text-decoration:underline;text-decoration-color:var(--fb-brand);text-underline-offset:4px}
/* the orders row under a deduction line */
.fb-ledger > tbody > tr.fb-orders > td{padding-block:4px 14px;padding-inline:0;background:transparent}
.fb-orders-box{padding-block:10px 12px;padding-inline:14px;border:1px solid var(--stroke);border-radius:var(--radius);background:var(--surface)}
.fb-orders-head{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;margin-block-end:6px;font-size:13px;color:var(--text-2)}
.fb-orders-head b{color:var(--ink)}
.fb-orders-foot{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;margin-block-start:10px;font-size:13px}
.fb-orders-foot .btn{margin-inline-start:auto}

/* ---------- 9. Day chart (server-rendered SVG; sales + three non-sales day states) ---------- */
.fb-chart{display:block;inline-size:100%;block-size:auto;overflow:visible}
.fb-chart-grid{stroke:var(--stroke);stroke-width:1}
.fb-chart-base{stroke:var(--stroke-2);stroke-width:1}
.fb-chart-t{font:10px var(--fb-font-body);fill:var(--text-2)}
.fb-day--sales .fb-day-bar{fill:var(--ink)}
.fb-day--zero .fb-day-bar{fill:var(--ink)}                 /* a 2 px cap on the baseline: zero, read as zero */
.fb-day--noreport .fb-day-tick{stroke:var(--stroke-2);stroke-width:1;stroke-dasharray:2 3}
.fb-day--noreport .fb-day-gap{fill:var(--ground);stroke:var(--stroke-2);stroke-width:1}
.fb-day--closed .fb-day-tick{stroke:var(--text-2);stroke-width:2}
.fb-day:hover .fb-day-bar{fill:var(--text)}
.fb-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:8px 0 0;padding:0;list-style:none;font-size:12px;color:var(--text-2)}
.fb-legend li{display:inline-flex;align-items:center;gap:6px}
.fb-legend-sw{display:inline-block;inline-size:10px;block-size:10px;flex:none}
.fb-legend-sw--sales{background:var(--ink)}
.fb-legend-sw--zero{block-size:2px;background:var(--ink)}
.fb-legend-sw--noreport{inline-size:8px;block-size:8px;border:1px solid var(--stroke-2);border-radius:50%}
.fb-legend-sw--closed{inline-size:2px;block-size:8px;background:var(--text-2)}
.fb-chart-note{margin:6px 0 0;font-size:12px;color:var(--text-2)}

/* ---------- 10. Empty state, cards, outlets ---------- */
.fb-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding-block:36px;padding-inline:20px;border:1px dashed var(--stroke-2);border-radius:var(--radius);text-align:center;color:var(--text)}
.fb-empty-title{margin:0;font-size:17px;color:var(--ink)}
.fb-empty p{margin:0;max-inline-size:52ch;color:var(--text-2);font-size:14px}
.fb-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-block-end:10px}
.fb-card-title{margin:0;font-size:16px;color:var(--ink)}
.fb-kv{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0;font-size:14px}
.fb-kv dt{font-weight:400;color:var(--text-2)}
.fb-kv dd{margin:0;color:var(--ink)}
.fb-outlet-ch{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;padding-block:10px;border-block-start:1px solid var(--stroke);font-size:14px}
.fb-outlet-ch .fb-strong{min-inline-size:96px}
.fb-outlet-ch .fb-end{margin-inline-start:auto}

/* ---------- 11. Responsive ---------- */
@media (max-width:1199.98px){
  .fb-topbar-range{display:none}
  .fb-kpi{grid-template-columns:1fr}
  .fb-measures{justify-content:flex-start}
}
@media (max-width:991.98px){
  :root{--fb-pad:16px;--fb-topbar-h:56px}
  .fb-shell{grid-template-columns:minmax(0,1fr)}
  .fb-shell > .fb-sidebar{display:none}
  .fb-burger{display:inline-flex!important}
  .fb-topbar{gap:8px}
  .fb-topbar-title{font-size:18px}
  .fb-topbar .fb-seg,.fb-hide-phone{display:none!important}
  .fb-period-select{display:block;margin-block-end:14px}
  .fb-content{padding-block:12px 48px}
  .fb-g2{grid-template-columns:minmax(0,1fr);gap:32px}
}
@media (max-width:767.98px){
  /* one-line strip: optional items drop out, the first item truncates, the chip stays */
  .fb-strip{flex-wrap:nowrap;margin-block-end:14px}
  .fb-strip .fb-strip-opt,.fb-strip .fb-strip-sep{display:none}
  .fb-strip-item:first-child{min-inline-size:0;overflow:hidden}
  .fb-strip-item:first-child > span{overflow:hidden;text-overflow:ellipsis}
  .fb-kpi{padding-block-end:16px;gap:16px}
  .fb-kpi-fig{font-size:46px;gap:8px}
  .fb-kpi-sub{font-size:14px}
  .fb-measures{display:grid;grid-template-columns:1fr 1fr;row-gap:14px;padding-block-start:14px;border-block-start:1px solid var(--stroke)}
  .fb-measures > li,.fb-measures > li:first-child,.fb-measures > li:last-child{padding-inline:0 12px;border:0}
  .fb-measures > li:nth-child(2n){padding-inline:12px 0;border-inline-start:1px solid var(--stroke)}
  .fb-measure-fig{font-size:20px}
  .fb-measure-note{white-space:normal}
  .fb-meter-bar{inline-size:100%;order:3}
  .fb-meter-locked{margin-inline-start:0}
  .fb-alert{font-size:13px;flex-wrap:nowrap;align-items:flex-start}
  .fb-alert .fb-chip{display:none}
  .fb-alert-text{flex:1 1 0}
  .fb-block{margin-block-start:30px}
  .fb-ledger{font-size:13px}
  .fb-ledger > :not(caption) > * > *{padding-inline:6px}
  .fb-wbar,.fb-hide-sm{display:none!important}
  .fb-orders-box{padding-inline:12px}
  /* stacked card variant below 768 px: header hidden, each row a block, labels from data-label */
  .fb-stack > thead{display:none}   /* each cell carries its label in data-label */
  .fb-stack,.fb-stack > tbody,.fb-stack > tbody > tr,.fb-stack > tbody > tr > td{display:block;inline-size:100%}
  .fb-stack > tbody > tr{padding-block:10px;border-block-end:1px solid var(--stroke)}
  .fb-stack > tbody > tr.tot{border-block-start:1px solid var(--ink);border-block-end:3px double var(--ink);font-weight:700}
  .fb-stack > :not(caption) > * > *{border:0!important;padding-block:3px!important;padding-inline:0!important;block-size:auto!important}
  .fb-stack > tbody > tr > td[data-label]{text-align:end}
  .fb-stack > tbody > tr > td[data-label]::before{content:attr(data-label);float:inline-start;margin-inline-end:12px;font-family:var(--fb-app-font);font-size:12px;font-weight:400;color:var(--text-2);text-align:start}
  .fb-stack > tbody > tr > td.n{direction:inherit;text-align:end}
  .fb-stack > tbody > tr > td.fb-stack-hide{display:none}
  .fb-stack > tbody > tr > td.fb-row-head{padding-block-end:6px!important;font-size:15px}
}
@media (prefers-reduced-motion:reduce){.fb-expand .fb-chev{transition:none}}

/* ---------- 12. Print ---------- */
@media print{
  .fb-sidebar,.fb-topbar,.fb-drawer,.fb-drawer-backdrop,.fb-alert-action,.btn{display:none!important}
  .fb-shell{display:block}
  body{background:#fff;color:#000}
}

/* ===== bare shell: sign-in, password reset, first run (no sidebar) ===== */
.fb-bare{min-block-size:100vh;display:flex;flex-direction:column;background:var(--ground)}
.fb-bare-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:20px;padding-inline:var(--fb-pad);border-block-end:1px solid var(--stroke)}
.fb-bare-head img{inline-size:150px;block-size:auto}
.fb-bare-main{flex:1;inline-size:100%;max-inline-size:1100px;margin-inline:auto;padding-block:48px 64px;padding-inline:var(--fb-pad)}
/* page head inside main: title line + actions for pages that need more than the top bar */
.fb-pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block-end:16px;margin-block-end:22px;border-block-end:1px solid var(--stroke)}
.fb-pagehead p{margin:0;color:var(--text-2);max-inline-size:70ch}
.fb-pagehead .fb-actions{display:flex;gap:8px;flex-wrap:wrap}
.fb-illus{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text-2);border:1px dashed var(--stroke-2);border-radius:var(--radius);padding:0 8px;block-size:22px;white-space:nowrap}

/* ===== narrow Chrome windows (phones): keep the top bar on one line ===== */
@media (max-width:575.98px){
  .fb-topbar-actions{gap:2px}
  .fb-topbar-actions .btn-primary{padding-inline:8px;font-size:0;gap:0}
  .fb-topbar-actions .btn-primary .fb-ic{inline-size:18px;block-size:18px}
  .fb-topbar-actions .fb-lang{padding-inline:6px}
  .fb-topbar-range{display:none}
}

/* ===== top bar: long titles truncate on every page; the range hides before the actions wrap ===== */
.fb-topbar-title{min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto}
.fb-topbar .fb-seg{flex:none}
@media (max-width:1439.98px){.fb-topbar .fb-topbar-range{display:none}}
@media (max-width:1199.98px){.fb-topbar .fb-seg{display:none}}