:root {
  --bg:#f6f7f8; --surface:#fff; --surface-2:#eef1f4; --surface-3:#e4e8ec;
  --ink:#202428; --ink-2:#596168; --ink-3:#596168; --ink-faint:#626b74;
  --line:#dde1e4; --line-strong:#7d858d;
  --accent:#175cd3; --accent-hover:#124cac; --accent-ink:#fff;
  --accent-soft:#eaf1ff; --accent-ring:rgb(23 92 211 / .2);
  --ok:#187346; --ok-soft:#e9f5ee; --warn:#865b00; --warn-soft:#fff5dc;
  --danger:#b42318; --danger-soft:#fceceb; --danger-ink:#fff;
  --r-sm:6px; --r-md:8px; --r-lg:8px; --r-xl:8px; --tap:48px;
  --fs-xs:.875rem; --fs-sm:.875rem; --fs-md:1rem;
  --fs-lg:1.25rem; --fs-xl:1.5rem; --fs-2xl:1.75rem;
  --shadow-1:0 1px 2px rgb(20 24 28 / .04);
  --shadow-2:0 4px 16px rgb(20 24 28 / .08);
  --shadow-3:0 16px 48px rgb(0 0 0 / .2);
}
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    --bg:#151719; --surface:#202326; --surface-2:#292d31; --surface-3:#343a40;
    --ink:#f3f5f6; --ink-2:#bcc3c8; --ink-3:#bcc3c8; --ink-faint:#aeb7bf;
    --line:#454c52; --line-strong:#879099; --accent:#9cc2ff; --accent-hover:#bad4ff;
    --accent-ink:#10243a; --accent-soft:#20314b; --accent-ring:rgb(156 194 255 / .25);
    --ok:#89d8af; --ok-soft:#1b3428; --warn:#f2cd75; --warn-soft:#382e19;
    --danger:#ffb3ac; --danger-soft:#3b2424; --danger-ink:#42100b;
  }
}
:root[data-theme="dark"] {
  --bg:#151719; --surface:#202326; --surface-2:#292d31; --surface-3:#343a40;
  --ink:#f3f5f6; --ink-2:#bcc3c8; --ink-3:#bcc3c8; --ink-faint:#aeb7bf;
  --line:#454c52; --line-strong:#879099; --accent:#9cc2ff; --accent-hover:#bad4ff;
  --accent-ink:#10243a; --accent-soft:#20314b; --accent-ring:rgb(156 194 255 / .25);
  --ok:#89d8af; --ok-soft:#1b3428; --warn:#f2cd75; --warn-soft:#382e19;
  --danger:#ffb3ac; --danger-soft:#3b2424; --danger-ink:#42100b;
}
[hidden] {display:none!important}
html {scroll-padding-block:96px 180px}
body {font-family:"Noto Sans Arabic",system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif;overflow-x:clip}
*,*::before,*::after {letter-spacing:0!important}
h2 {font-size:1.5rem;line-height:1.5}
h3 {font-size:1.125rem;line-height:1.5}
h2[tabindex="-1"]:focus {outline:none}
.ui-icon {inline-size:22px;block-size:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.page-back button {display:inline-flex;gap:8px;align-items:center}
p {margin-block:0 12px}
button,a,input,select,textarea {touch-action:manipulation}
button.primary,button.secondary,button.danger {white-space:normal;overflow-wrap:anywhere}
button,input,select,textarea {max-inline-size:100%}
button.small {min-inline-size:48px}
input[type=tel] {direction:ltr;text-align:start}
.grid>* {min-inline-size:0}
header {background:var(--surface);backdrop-filter:none;padding:12px 24px;min-block-size:76px}
.shop-brand {display:flex;gap:12px;align-items:center;color:var(--ink);text-decoration:none;min-inline-size:0}
.shop-brand img {object-fit:contain;background:#fff;border-radius:4px;flex:none}
.shop-brand b {font-size:1.25rem}
.shop-brand small {font-size:.875rem}
main {max-inline-size:1220px;padding:28px 32px 130px}
.page {animation:none}
.page>.card,.page>.work-section>.card {background:transparent;border:0;border-radius:0;box-shadow:none;padding:20px 0;margin-block:0;border-bottom:1px solid var(--line)}
.card .card {background:transparent;box-shadow:none;border:0;border-radius:0}
.page-back {margin-block-end:12px}
.page-back button {padding-inline:0;background:none;border:0;box-shadow:none;color:var(--ink-2)}
.page-heading,.section-heading {display:flex;align-items:center;justify-content:space-between;gap:16px}
.page-heading h2,.section-heading h3 {margin:0}
.eyebrow {font-size:.875rem;color:var(--ink-2);margin-block-end:4px}
.kpis {gap:0;border-block:1px solid var(--line);grid-template-columns:repeat(3,minmax(0,1fr));background:var(--surface)}
.kpi {padding:20px;border:0;border-inline-end:1px solid var(--line);box-shadow:none;border-radius:0;background:none;min-inline-size:0}
.kpi:last-child {border-inline-end:0}
.kpi strong {font-size:1.5rem;overflow-wrap:anywhere}
.kpi span {font-size:.875rem}
.work-section {padding-block:24px;border-bottom:1px solid var(--line)}
.section-heading {margin-block-end:12px}
.section-heading .muted {white-space:nowrap}
.text-button {display:inline-flex;align-items:center;justify-content:center;min-block-size:48px;padding:8px;color:var(--accent);border:0;background:transparent;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.work-row,.order-row,.activity-row {padding:16px 0;display:flex;justify-content:space-between;align-items:center;gap:16px;border-bottom:1px solid var(--line);min-inline-size:0}
.work-row:last-child,.order-row:last-child,.activity-row:last-child {border-bottom:0}
.work-row p,.order-row p,.activity-row p {margin:4px 0 0;color:var(--ink-2);font-size:.875rem}
.work-row>div,.order-row>div,.activity-row>div {min-inline-size:0;overflow-wrap:anywhere}
.count-mark {display:grid;place-items:center;min-inline-size:40px;block-size:40px;background:var(--accent-soft);color:var(--accent);border-radius:6px;font-weight:700}
.work-row .count-mark {flex:none}
.work-row .work-copy {flex:1}
.empty-state {padding:28px 0;color:var(--ink-2);text-align:start;border-bottom:1px solid var(--line)}
.empty-state strong {display:block;color:var(--ink);font-weight:500;margin-block-end:4px}
.app-nav {position:fixed;inset-inline:0;inset-block-end:0;z-index:35;display:flex;background:var(--surface);border-top:1px solid var(--line);padding:4px 12px calc(4px + env(safe-area-inset-bottom));gap:4px}
.app-nav button {display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-block-size:60px;border:0;border-radius:6px;background:transparent;color:var(--ink-2);font-size:.875rem;cursor:pointer;min-inline-size:0}
.app-nav button>span:first-child {font-size:1.5rem;line-height:1.2;font-family:Arial,sans-serif}
.app-nav button[aria-current=page] {color:var(--accent);background:var(--accent-soft);font-weight:700}
#roleBar {background:var(--surface);border:1px solid var(--line);box-shadow:none;margin:20px 0!important;padding:16px!important;flex-wrap:wrap}
.home-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin-block:16px}
.home-card {display:flex;flex-direction:row;justify-content:flex-start;gap:12px;min-block-size:64px!important;padding:12px!important;border:0;border-radius:0;border-bottom:1px solid var(--line);background:none;box-shadow:none;text-align:start;font-size:1rem}
.home-card span {display:none}
.home-card:hover {background:var(--surface-2);transform:none;box-shadow:none}
.home-card::before {content:"›";color:var(--ink-2);font-size:1.5rem;transform:rotate(180deg)}
#sales .sale-composer {padding-top:0;border:0}
.sale-checkout {position:fixed;inset-inline:0;inset-block-end:calc(69px + env(safe-area-inset-bottom));z-index:32;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 16px;background:var(--surface);border-block:1px solid var(--line)}
.sale-checkout>div {min-inline-size:0}
.sale-checkout strong {display:block;font-size:1.25rem;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.sale-checkout button {min-inline-size:132px}
body.keyboard-open .app-nav {display:none}
body.keyboard-open .sale-checkout {position:static;margin-block-start:20px}
#saleItems .line-item {border:1px solid var(--line);background:var(--surface);padding:16px;margin-block:12px;border-radius:8px}
.sale-item-summary {width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:start;background:none;border:0;color:var(--ink);padding:0;min-block-size:48px;cursor:pointer}
.sale-item-summary>span:first-child {min-inline-size:0;overflow-wrap:anywhere}
.sale-item-summary small {display:block;color:var(--ink-2);font-size:.875rem;font-weight:400}
.sale-item-summary b {white-space:nowrap;font-weight:500}
.sale-item-summary .summary-name {font-weight:700}
.line-item.is-collapsed>.grid,.line-item.is-collapsed>.sale-item-actions {display:none}
.sale-item-actions {display:flex;justify-content:space-between;gap:12px;margin-block-start:12px}
#saleItems .line-item>.danger {display:none}
.sale-item-actions .remove-item {color:var(--danger);min-inline-size:48px}
.inline-notice,#saleFeedback {padding:12px 16px;background:var(--accent-soft);color:var(--ink);border-inline-start:3px solid var(--accent);margin-block:12px}
#saleFeedback[data-kind=error] {background:var(--danger-soft);border-color:var(--danger)}
#saleFeedback[data-kind=pending] {background:var(--warn-soft);border-color:var(--warn)}
.inline-notice {display:flex;align-items:center;justify-content:space-between;gap:8px}
.order-toolbar {display:grid;grid-template-columns:minmax(0,1fr) minmax(160px,240px);gap:16px;padding-block:8px 16px}
.order-row {cursor:pointer;width:100%;background:transparent;border-inline:0;border-top:0;color:var(--ink);font:inherit;text-align:start}
.order-row:hover {background:var(--surface-2)}
.order-row .order-meta {display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-block-end:6px;font-size:.875rem}
.order-row .order-value {flex:none;display:flex;flex-direction:column;gap:4px;align-items:flex-end}
.order-row bdi {font-variant-numeric:tabular-nums}
.status-label {display:inline-flex;align-items:center;gap:6px;font-size:.875rem;padding:3px 8px;background:var(--surface-2);color:var(--ink-2);border-radius:4px;white-space:normal}
.status-label.pending {background:var(--warn-soft);color:var(--warn)}
.status-label.progress {background:var(--accent-soft);color:var(--accent)}
.status-label.done {background:var(--ok-soft);color:var(--ok)}
summary {min-block-size:48px;padding-block:10px;cursor:pointer;font-weight:600}
dialog.ux-dialog {padding:0;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);inline-size:min(640px,calc(100% - 32px));max-block-size:90dvh;box-shadow:var(--shadow-3)}
dialog.ux-dialog::backdrop {background:rgb(0 0 0 / .45)}
.dialog-heading {position:sticky;inset-block-start:0;background:var(--surface);z-index:2;padding:16px 24px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);gap:12px}
.dialog-heading h2 {font-size:1.25rem;margin:0}
.icon-button {display:grid;place-items:center;min-inline-size:48px;block-size:48px;background:transparent;border:1px solid var(--line);border-radius:6px;color:var(--ink);font-size:1.5rem;cursor:pointer}
.dialog-content {padding:0 24px 24px}
.detail-section {padding-block:20px;border-bottom:1px solid var(--line)}
.detail-section h3 {margin-block:0 12px}
.detail-section p {overflow-wrap:anywhere}
.detail-pair {display:flex;justify-content:space-between;gap:20px;margin-block:8px}
.detail-pair dt {color:var(--ink-2)}
.detail-pair dd {margin:0;text-align:end;overflow-wrap:anywhere}
.detail-actions {padding-block-start:20px;display:flex;flex-wrap:wrap;gap:12px}
.detail-actions select {flex:1;min-inline-size:160px}
.detail-note {font-size:.875rem;color:var(--ink-2);margin-block:12px 0}
.mobile-sales-list {display:none}
#backToTopBtn {display:none!important}
.user-meta {overflow-wrap:anywhere;word-break:break-word}
@media (min-width:1024px) {
  .app-nav {inset-block:76px 0;inset-inline:0 auto;inline-size:224px;flex-direction:column;border-top:0;border-inline-end:1px solid var(--line);padding:24px 12px;gap:8px}
  .app-nav button {flex:none;flex-direction:row;justify-content:flex-start;gap:16px;min-block-size:52px;padding:12px 20px;font-size:1rem}
  main {margin-inline:224px 0;max-inline-size:none;padding-inline:40px}
  .sale-checkout {inset-inline:224px 0;inset-block-end:0;padding:16px 40px}
  #sales .sale-composer {max-inline-size:980px}
  .home-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
  #home {max-inline-size:1120px;margin-inline:auto}
}
@media (max-width:599px) {
  header {padding:10px 16px;min-block-size:72px;gap:8px}
  #clock {display:none}
  .shop-brand {gap:10px}
  .shop-brand img {width:44px;height:44px}
  main {padding:20px 16px 190px}
  .page-heading {align-items:flex-start;flex-wrap:wrap;gap:12px}
  .page-heading h2 {font-size:1.375rem}
  .page-heading .primary {padding:8px 12px}
  .kpi {padding:14px 10px}
  .kpi strong {font-size:1.125rem}
  .kpis {grid-template-columns:repeat(3,minmax(0,1fr))}
  .home-grid {grid-template-columns:1fr}
  .order-toolbar {grid-template-columns:1fr;gap:12px}
  .order-row {align-items:flex-start;gap:8px}
  .order-row .order-value {max-inline-size:40%}
  .desktop-order-table,#salesHistoryTableWrap {display:none}
  .mobile-sales-list {display:block}
  .sale-item-summary {align-items:flex-start;gap:8px}
  .sale-item-summary b {white-space:normal}
  #saleItems .line-item {padding:12px}
  dialog.ux-dialog {inline-size:100%;max-inline-size:100%;max-block-size:100dvh;block-size:100dvh;margin:0;border-radius:0;border:0}
  .dialog-heading {padding:12px 16px}
  .dialog-content {padding:0 16px 24px}
  .work-row {gap:10px}
  .work-row .text-button {flex:none;font-size:.875rem}
}
@media (prefers-reduced-motion:reduce) {html {scroll-behavior:auto}*,*::before,*::after {scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@media print {.app-nav,.sale-checkout,.shop-brand,dialog,.text-button {display:none!important}main {margin:0;padding:0}.desktop-order-table,#salesHistoryTableWrap {display:block}.mobile-sales-list {display:none}}