/* =====================================================================
   Supermarket Rafeef · سوبر ماركت رفيف — app styles on top of Oracle JET Redwood.
   Brand colours come from the logo: deep green #3E8058 → leaf green #6BB27A on cream #F5F2DF.
   Works left-to-right (English) and right-to-left (Arabic): uses logical CSS properties.
   ===================================================================== */

:root {
  /* brand */
  --sm-green-900: #2C5E40;
  --sm-green-700: #3E8058;
  --sm-green-500: #5CA36E;
  --sm-green-300: #6BB27A;
  --sm-green-050: #EAF4EC;
  --sm-cream: #F5F2DF;
  --sm-cream-2: #FBF9EF;
  --sm-brand-gradient: linear-gradient(135deg, var(--sm-green-700), var(--sm-green-300));

  /* semantic */
  --sm-bg: #FFFFFF;
  --sm-page: var(--sm-cream-2);
  --sm-text: #1F2A22;
  --sm-muted: #66705F;
  --sm-line: #E6E2CC;
  --sm-accent: var(--sm-green-700);
  --sm-accent-soft: rgba(62, 128, 88, .12);
  --sm-good: #3E8058;
  --sm-bad: #C2412D;
  --sm-warn: #B26A12;
  --sm-radius: 12px;
  --sm-sidebar: 240px;

  /* Oracle JET Redwood overrides so JET's own components wear the brand */
  --oj-core-focus-border-color: var(--sm-green-700);
  --oj-button-call-to-action-chrome-bg-color: var(--sm-green-700);
  --oj-button-call-to-action-chrome-bg-color-hover: var(--sm-green-900);
  --oj-button-call-to-action-chrome-bg-color-active: var(--sm-green-900);
  --oj-button-call-to-action-chrome-border-color: var(--sm-green-700);
  --oj-button-call-to-action-chrome-border-color-hover: var(--sm-green-900);
  --oj-button-call-to-action-chrome-text-color: #FFFFFF;
  --oj-switch-track-bg-color-selected: var(--sm-green-700);
  --oj-core-link-text-color: var(--sm-green-700);
  /* chart series: green family first, then complementary warm tones */
  --oj-dvt-series-color-1: #3E8058;
  --oj-dvt-series-color-2: #E0A43A;
  --oj-dvt-series-color-3: #6BB27A;
  --oj-dvt-series-color-4: #C2412D;
  --oj-dvt-series-color-5: #2C5E40;
  --oj-dvt-series-color-6: #9C7A3C;
}

/* Arabic: a typeface with good Arabic glyphs, slightly larger for legibility */
html[dir="rtl"] body, html[dir="rtl"] .oj-web-applayout-body {
  font-family: "Segoe UI", Tahoma, "Noto Sans Arabic", "Geeza Pro", Arial, sans-serif;
}

html, body { height: 100%; }
body.oj-web-applayout-body { background: var(--sm-page); color: var(--sm-text); margin: 0; }
#globalBody { height: 100%; }

.sm-flex { flex: 1 1 auto; }
.sm-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; }
.sm-small { font-size: .78rem; }
.sm-mt { margin-top: 1rem; }
.r { text-align: end; }
.c { text-align: center; }

/* ---------------------------------------------------------------- icons (inline SVG masks; inherit text colour) */
.sm-icon {
  display: inline-block; width: 1.25rem; height: 1.25rem; flex: none; vertical-align: middle;
  background-color: currentColor;
  -webkit-mask: var(--sm-i) center / contain no-repeat;
          mask: var(--sm-i) center / contain no-repeat;
}
.sm-icon-cart { --sm-i: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="9" cy="20" r="1.5"/%3E%3Ccircle cx="18" cy="20" r="1.5"/%3E%3Cpath d="M2 3h3l2.6 12.4a2 2 0 0 0 2 1.6h8.2a2 2 0 0 0 2-1.6L21.5 7H6"/%3E%3C/svg%3E'); }
.sm-icon-grid { --sm-i: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Crect x="3" y="3" width="7" height="9" rx="1"/%3E%3Crect x="14" y="3" width="7" height="5" rx="1"/%3E%3Crect x="14" y="12" width="7" height="9" rx="1"/%3E%3Crect x="3" y="16" width="7" height="5" rx="1"/%3E%3C/svg%3E'); }
.sm-icon-tag { --sm-i: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8z"/%3E%3Ccircle cx="7.5" cy="7.5" r="1.5"/%3E%3C/svg%3E'); }
.sm-icon-folder { --sm-i: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M3 6a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/%3E%3C/svg%3E'); }
.sm-icon-box { --sm-i: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M21 8 12 3 3 8v8l9 5 9-5z"/%3E%3Cpath d="M3 8l9 5 9-5M12 13v8"/%3E%3C/svg%3E'); }
.sm-icon-receipt { --sm-i: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M5 3h14v18l-3-2-2 2-2-2-2 2-2-2-3 2z"/%3E%3Cpath d="M9 8h6M9 12h6M9 16h3"/%3E%3C/svg%3E'); }
.sm-icon-chart { --sm-i: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M3 3v18h18"/%3E%3Cpath d="M7 15l4-4 3 3 5-6"/%3E%3C/svg%3E'); }
.sm-icon-users { --sm-i: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="9" cy="8" r="3.5"/%3E%3Cpath d="M2.5 20a6.5 6.5 0 0 1 13 0"/%3E%3Cpath d="M16 4.5a3.5 3.5 0 0 1 0 7M18 14a6 6 0 0 1 3.5 6"/%3E%3C/svg%3E'); }
.sm-icon-menu { --sm-i: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M4 6h16M4 12h16M4 18h16"/%3E%3C/svg%3E'); }
.sm-icon-plus { --sm-i: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M12 5v14M5 12h14"/%3E%3C/svg%3E'); }
.sm-icon-edit { --sm-i: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M4 20h4L19 9l-4-4L4 16z"/%3E%3Cpath d="M13.5 6.5l4 4"/%3E%3C/svg%3E'); }
.sm-icon-trash { --sm-i: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3"/%3E%3C/svg%3E'); }
.sm-icon-close { --sm-i: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M6 6l12 12M18 6 6 18"/%3E%3C/svg%3E'); }
.sm-icon-globe { --sm-i: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="12" cy="12" r="9"/%3E%3Cpath d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/%3E%3C/svg%3E'); }
.sm-icon-scan { --sm-i: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M4 8V5a1 1 0 0 1 1-1h3M16 4h3a1 1 0 0 1 1 1v3M20 16v3a1 1 0 0 1-1 1h-3M8 20H5a1 1 0 0 1-1-1v-3"/%3E%3Cpath d="M8 9v6M11 9v6M14 9v6M17 9v6"/%3E%3C/svg%3E'); }
.sm-icon-user { --sm-i: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="12" cy="8" r="4"/%3E%3Cpath d="M4 21a8 8 0 0 1 16 0"/%3E%3C/svg%3E'); }
.sm-icon-chevron-down { --sm-i: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M6 9l6 6 6-6"/%3E%3C/svg%3E'); }
.sm-icon-camera { --sm-i: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M4 8h3l2-3h6l2 3h3a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z"/%3E%3Ccircle cx="12" cy="13.5" r="3.5"/%3E%3C/svg%3E'); }
.sm-icon-calendar { --sm-i: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Crect x="3" y="5" width="18" height="16" rx="2"/%3E%3Cpath d="M3 10h18M8 3v4M16 3v4M7 14h2M11 14h2M15 14h2M7 17h2M11 17h2"/%3E%3C/svg%3E'); }
.sm-icon-wallet { --sm-i: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M3 7a2 2 0 0 1 2-2h12v4"/%3E%3Crect x="3" y="7" width="18" height="13" rx="2"/%3E%3Cpath d="M16 13.5h2"/%3E%3C/svg%3E'); }
.sm-icon-smoke { --sm-i: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Crect x="2" y="14" width="16" height="4" rx="1"/%3E%3Cpath d="M14 14v4M21 14v4M18 4c0 2-2 2-2 4s2 2 2 4M21 4c0 2-2 2-2 4"/%3E%3C/svg%3E'); }
.sm-icon-scale { --sm-i: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M12 3v18M7 21h10M5 7h14"/%3E%3Cpath d="M5 7l-3 7a3 3 0 0 0 6 0zM19 7l-3 7a3 3 0 0 0 6 0z"/%3E%3C/svg%3E'); }

/* Cash & Visa check: gap = counted - expected */
.sm-gap-ok { color: var(--sm-good); }
.sm-gap-missing { color: var(--sm-bad); font-weight: 600; }
.sm-gap-extra { color: #9A6700; font-weight: 600; }
.sm-cash-preview { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem;
  margin-block: .25rem .5rem; font-size: .85rem; color: var(--sm-muted); }

/* present for the browser's password manager, invisible to people */
.sm-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; opacity: 0; }

/* ---------------------------------------------------------------- boot splash (see index.html / appController) */
body:not(.sm-booted) #globalBody { visibility: hidden; }
.sm-boot { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.25rem; background: var(--sm-page); z-index: 1000; }
.sm-booted .sm-boot { display: none; }
.sm-boot-logo { width: 220px; max-width: 60vw; }
.sm-boot-spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--sm-line);
  border-top-color: var(--sm-accent); animation: sm-spin .8s linear infinite; }
@keyframes sm-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- login */
.sm-login { min-height: 100vh; display: grid; place-items: center; padding: 16px; box-sizing: border-box;
  background:
    radial-gradient(900px 500px at 0% 0%, rgba(107,178,122,.22), transparent 60%),
    radial-gradient(700px 420px at 100% 100%, rgba(62,128,88,.16), transparent 60%),
    var(--sm-cream); }
.sm-login-card { position: relative; width: 100%; max-width: 400px; padding: 2rem 2rem 1.75rem; border-radius: 20px;
  box-sizing: border-box; background: var(--sm-bg); border-top: 5px solid var(--sm-green-700);
  box-shadow: 0 18px 40px rgba(44,94,64,.14); }
.sm-login-lang { position: absolute; inset-inline-end: .5rem; top: .5rem; }
.sm-login-brand { text-align: center; margin: .5rem 0 1rem; }
.sm-login-logo { width: 240px; max-width: 80%; height: auto; display: block; margin: 0 auto; }
.sm-login-name { margin: .35rem 0 .15rem; font-size: 1.05rem; font-weight: 700; color: var(--sm-green-900); }
.sm-login-brand p { margin: 0; }
/* login form: plain inputs with the label above (no floating label to collide with browser autofill) */
.sm-login-form { display: flex; flex-direction: column; }
.sm-field-label { font-size: .82rem; font-weight: 600; color: var(--sm-muted); margin: .7rem 0 .3rem; }
.sm-field { width: 100%; box-sizing: border-box; padding: .65rem .8rem; font: inherit; font-size: 1rem;
  border: 1px solid var(--sm-line); border-radius: 8px; background: var(--sm-bg); color: var(--sm-text);
  transition: border-color .15s, box-shadow .15s; }
.sm-field:focus { outline: none; border-color: var(--sm-green-700); box-shadow: 0 0 0 3px var(--sm-accent-soft); }
/* keep Chrome's yellow/blue autofill tint from clashing with the card */
.sm-field:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #fff inset; -webkit-text-fill-color: var(--sm-text); }
.sm-field:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 40px #fff inset, 0 0 0 3px var(--sm-accent-soft); }
.sm-field-error { margin-top: .6rem; font-size: .82rem; color: var(--sm-bad); }
.sm-login-submit { width: 100%; margin-top: 1.25rem; padding: .75rem; font-size: 1rem; }
.sm-login-submit:disabled { opacity: .65; cursor: progress; }

/* ---------------------------------------------------------------- expenses page */
.sm-intro { margin: 0; }
.sm-inline-date { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--sm-muted); }
.sm-field-date { width: auto; padding: .45rem .6rem; font-size: .95rem; }
.sm-expense-form { min-width: min(420px, 80vw); }
.sm-exp-date { width: 100%; max-width: none; margin-top: .4rem; }
.sm-expense-form select.sm-field { cursor: pointer; }
.sm-field-amount { font-size: 1.25rem; font-weight: 700; text-align: end; font-variant-numeric: tabular-nums; }
.sm-paytabs.sm-mt-0 { margin: 0; }
.sm-kpi-net { border-top-color: var(--sm-green-700) !important; }
.sm-kpi-value.sm-neg { color: var(--sm-bad); }

/* ---------------------------------------------------------------- camera barcode scanner (services/scanner.js) */
.sm-scanner { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; z-index: 2000; background: #000; color: #fff;
  overflow: hidden; }
.sm-scanner-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sm-scanner-frame { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.sm-scanner-frame span { width: min(80vw, 420px); height: min(40vw, 200px); border: 3px solid #6BB27A; border-radius: 14px;
  box-shadow: 0 0 0 100vmax rgba(0,0,0,.45); position: relative; }
.sm-scanner-frame span::after { content: ""; position: absolute; inset-inline: 8%; top: 50%; height: 2px; background: #E5484D;
  box-shadow: 0 0 8px #E5484D; animation: sm-scanline 1.6s ease-in-out infinite alternate; }
@keyframes sm-scanline { from { transform: translateY(-38px); } to { transform: translateY(38px); } }
.sm-scanner-top { position: absolute; inset-inline: 0; top: 0; padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px 14px;
  text-align: center; font-weight: 700; font-size: 1.05rem; background: linear-gradient(rgba(0,0,0,.6), transparent); }
.sm-scanner-bottom { position: absolute; inset-inline: 0; bottom: 0; padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 18px);
  display: flex; flex-direction: column; gap: 12px; align-items: center; background: linear-gradient(transparent, rgba(0,0,0,.7)); }
.sm-scanner-msg { text-align: center; font-size: .95rem; max-width: 520px; line-height: 1.4; }
.sm-scanner.is-error .sm-scanner-msg { background: rgba(194,65,45,.92); padding: .7rem 1rem; border-radius: 10px; }
.sm-scanner-actions { display: flex; gap: 10px; }
.sm-scanner-actions .sm-btn { min-width: 120px; padding: .75rem 1.2rem; font-size: 1rem; }
.sm-scanner-torch.is-on { background: #FFD54A; border-color: #FFD54A; color: #000; }
.sm-scan-inline { display: inline-flex; align-items: center; gap: .45rem; }
/* item form: barcode already used by another item */
.sm-dup-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem;
  margin-top: .6rem; padding: .6rem .8rem; border-radius: 10px; background: rgba(194,65,45,.08); border: 1px solid rgba(194,65,45,.35);
  color: var(--sm-bad); font-weight: 600; }

/* search box + camera button (Inventory) */
.sm-find-row { display: flex; gap: .5rem; align-items: stretch; }
.sm-find-row > .sm-scan { flex: 1 1 auto; min-width: 0; }
.sm-cam-btn { min-width: 0; padding: 0 .9rem; display: inline-flex; align-items: center; justify-content: center; color: var(--sm-green-700); }
.sm-cam-btn .sm-icon { width: 1.5rem; height: 1.5rem; }
.sm-scan-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.sm-lookup-msg { margin-top: .4rem; font-size: .82rem; color: var(--sm-green-700); }


/* ---------------------------------------------------------------- month picker (Monthly report) */
.sm-monthpick { position: relative; }
.sm-monthpick-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .8rem; min-width: 190px;
  border: 1px solid var(--sm-line); border-radius: 10px; background: var(--sm-bg); color: var(--sm-text);
  font: inherit; font-weight: 700; cursor: pointer; }
.sm-monthpick-btn:hover, .sm-monthpick-btn[aria-expanded="true"] { border-color: var(--sm-green-700); }
.sm-monthpick-btn .sm-icon-calendar { color: var(--sm-green-700); }
.sm-monthpick-caret { width: 1rem; height: 1rem; margin-inline-start: auto; color: var(--sm-muted); }
.sm-monthpick-pop { position: absolute; z-index: 50; top: calc(100% + 6px); inset-inline-start: 0; width: 290px; padding: .75rem;
  background: var(--sm-bg); border: 1px solid var(--sm-line); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.15); }
.sm-mp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.sm-mp-head strong { font-size: 1.15rem; color: var(--sm-green-900); }
.sm-mp-nav { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--sm-line); background: var(--sm-bg);
  color: var(--sm-green-700); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.sm-mp-nav:hover:not(:disabled) { background: var(--sm-green-050); border-color: var(--sm-green-300); }
.sm-mp-nav:disabled { opacity: .35; cursor: default; }
html[dir="rtl"] .sm-mp-arrow { display: inline-block; transform: scaleX(-1); }   /* "previous" points right in Arabic */
.sm-mp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sm-mp-month { padding: .6rem .2rem; border-radius: 8px; border: 1px solid transparent; background: var(--sm-page);
  color: var(--sm-text); font: inherit; font-size: .9rem; cursor: pointer; }
.sm-mp-month:hover:not(:disabled) { border-color: var(--sm-green-300); background: var(--sm-green-050); }
.sm-mp-month.is-today { border-color: var(--sm-green-300); }
.sm-mp-month.is-on { background: var(--sm-green-700); border-color: var(--sm-green-700); color: #fff; font-weight: 700; }
.sm-mp-month:disabled { opacity: .35; cursor: default; }
.sm-mp-today { width: 100%; margin-top: .6rem; padding: .5rem; border: 0; border-radius: 8px; background: transparent;
  color: var(--sm-green-700); font: inherit; font-weight: 700; cursor: pointer; }
.sm-mp-today:hover { background: var(--sm-green-050); }

/* ---------------------------------------------------------------- monthly report (the owner's month sheet) */
.sm-note { padding: .6rem .9rem; border-radius: var(--sm-radius); background: #FFF6E0; border: 1px solid #EBD39A;
  color: #6E5310; font-size: .88rem; }
.sm-month-title { margin: 0; font-size: 1.15rem; color: var(--sm-green-900); }
.sm-month-scroll { overflow-x: auto; }
.sm-month-table { width: 100%; border-collapse: collapse; font-size: .9rem; font-variant-numeric: tabular-nums; }
.sm-month-table th { text-align: start; font-size: .78rem; color: var(--sm-muted); font-weight: 600; padding: .5rem .6rem;
  border-bottom: 2px solid var(--sm-line); white-space: nowrap; }
.sm-month-table td { padding: .45rem .6rem; border-bottom: 1px solid var(--sm-line); vertical-align: top; }
.sm-month-table .num { text-align: end; white-space: nowrap; }
.sm-month-table .date { white-space: nowrap; }
.sm-month-table .strong { font-weight: 700; }
.sm-month-table tbody tr:nth-child(even) { background: rgba(0,0,0,.018); }
.sm-month-table tbody tr.is-quiet td { color: var(--sm-muted); opacity: .6; }
.sm-month-table tfoot td { font-weight: 800; border-top: 2px solid var(--sm-green-700); border-bottom: 0; color: var(--sm-green-900); }
.sm-month-table .details { min-width: 180px; }
.sm-exp-chip { display: inline-flex; gap: .3rem; align-items: baseline; margin: 0 0 .2rem; margin-inline-end: .35rem;
  padding: .05rem .5rem; border-radius: 99px; background: var(--sm-green-050); font-size: .8rem; }
.sm-payees .sm-month-table { max-width: 560px; }

/* print the month sheet without the app around it */
/* Printing: the app shell is a fixed-height window whose content area scrolls, which made the browser
   print only what was visible. In print everything becomes normal flowing content so long pages
   continue onto as many sheets as needed. Landscape A4 fits the 8-column month sheet. */
@page { size: A4 landscape; margin: 10mm; }
@media print {
  .sm-sidebar, .sm-header, .sm-no-print, .sm-boot, oj-messages, oj-drawer-popup { display: none !important; }
  html, body, #globalBody, .sm-shell, .sm-main, .sm-content, .sm-content > *, oj-module {
    height: auto !important; min-height: 0 !important; max-height: none !important;
    overflow: visible !important; position: static !important; }
  .sm-shell, .sm-main { display: block !important; }
  body, .sm-page, .sm-content { background: #fff !important; }
  .sm-page { padding: 0 !important; gap: 4mm; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* month sheet */
  .sm-monthly .oj-panel { box-shadow: none !important; border: 1px solid #bbb; }
  .sm-monthly .sm-card { padding: 3mm; }
  .sm-monthly .sm-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3mm; break-inside: avoid; }
  .sm-monthly .sm-kpi { padding: 2.5mm 3mm; min-width: 0; break-inside: avoid; }
  .sm-monthly .sm-kpi-value { font-size: 13pt; white-space: nowrap; }
  .sm-monthly .sm-kpi-label, .sm-monthly .sm-kpi-sub { font-size: 7.5pt; }
  .sm-monthly .sm-note { font-size: 8pt; padding: 2mm 3mm; break-inside: avoid; }
  .sm-month-title { font-size: 13pt; }
  .sm-month-scroll { overflow: visible !important; }
  .sm-month-table { font-size: 8.5pt; width: 100%; table-layout: auto; }
  .sm-month-table th, .sm-month-table td { padding: 1.2mm 1.6mm; }
  .sm-month-table thead { display: table-header-group; }   /* column headings repeat on every page */
  .sm-month-table tfoot { display: table-row-group; }      /* totals once, at the end */
  .sm-month-table tr { break-inside: avoid; }
  .sm-month-table tbody tr.is-quiet td { opacity: 1; }
  .sm-month-table .details { min-width: 0; }
  .sm-exp-chip { font-size: 7.5pt; padding: 0 1.5mm; background: #eef3ee !important; }
  .sm-payees { break-inside: avoid; }
}
.oj-sm-full-width { width: 100%; }

/* ---------------------------------------------------------------- shell */
.sm-shell { display: flex; height: 100vh; }
.sm-sidebar { width: var(--sm-sidebar); flex: none; background: var(--sm-bg); border-inline-end: 1px solid var(--sm-line);
  display: flex; flex-direction: column; overflow-y: auto; }
.sm-drawer-inner { width: var(--sm-sidebar); }
/* sidebar brand: the full logo (it already carries the Arabic name); English caption under it in LTR */
.sm-nav-brand { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: 1.1rem 1rem .9rem;
  background: var(--sm-bg); border-bottom: 1px solid var(--sm-line); position: relative; }
.sm-nav-brand::after { content: ""; position: absolute; inset-inline: 1.25rem; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0;
  background: var(--sm-brand-gradient); }
.sm-brand-logo { width: 100%; max-width: 172px; height: auto; display: block; }
.sm-brand-sub { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sm-green-700); }
/* selected menu entry in brand green */
.sm-sidebar oj-navigation-list .oj-selected,
.sm-drawer-inner oj-navigation-list .oj-selected { color: var(--sm-green-700); }
.sm-sidebar .oj-navigationlist-item-element.oj-selected,
.sm-drawer-inner .oj-navigationlist-item-element.oj-selected { background: var(--sm-accent-soft); }
.sm-main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.sm-header { display: flex; align-items: center; gap: .75rem; height: 56px; padding: 0 1rem; flex: none;
  background: var(--sm-bg); border-bottom: 1px solid var(--sm-line); }
.sm-page-title { margin: 0; }
/* account menu in the header: person icon + name over role + down arrow, in a light outlined pill
   so it reads as a button. JET puts the button content in .oj-button-text (overflow: hidden,
   baseline-aligned): lay it out with flex instead. */
.sm-user-btn { height: auto; border: 1px solid var(--sm-line); border-radius: 10px; transition: border-color .15s, background .15s; }
.sm-user-btn:hover, .sm-user-btn:focus-within { border-color: var(--sm-green-300); background: var(--sm-green-050); }
.sm-user-btn .oj-button-text { display: inline-flex; align-items: center; gap: .6rem; overflow: visible;
  padding: 4px .35rem; text-align: start; }
.sm-user-icon { color: var(--sm-green-700); }
.sm-user-caret { width: 1rem; height: 1rem; color: var(--sm-muted); transition: transform .15s; }
.sm-user-btn:hover .sm-user-caret { color: var(--sm-green-700); transform: translateY(1px); }
/* name over role, both lines on the same edge (right in Arabic, left in English); JET centres button
   text, so each line is a full-width block aligned to "start" */
.sm-user { display: flex; flex-direction: column; align-items: stretch; gap: 1px; min-width: 0; }
.sm-user-name, .sm-user-role { display: block; text-align: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 180px; }
.sm-user-name { font-weight: 700; font-size: .9rem; line-height: 1.2; color: var(--sm-text); }
.sm-user-role { font-size: .74rem; line-height: 1.2; color: var(--sm-muted); }
.sm-content { flex: 1 1 auto; overflow: auto; }
.sm-menu-btn { display: none; }

@media (max-width: 1023px) {
  .sm-sidebar { display: none; }
  .sm-menu-btn { display: inline-flex; }
}
@media (max-width: 767px) {
  .sm-hide-sm { display: none; }
  /* Phones. The header used to be wider than the screen (title + "English" + name/role), which made
     Chrome zoom the whole page out: cards were cut off and full-screen views (camera scanner) came out
     ~12% too narrow. JET moves button contents into its own wrapper, so these rules are specific enough
     to win there. */
  .sm-header { gap: .35rem; padding: 0 .5rem; }
  .sm-header .sm-user-btn .sm-user { display: none; }
  .sm-header .sm-user-btn .oj-button-text { gap: .3rem; padding: 4px .25rem; }
  .sm-header .sm-lang-btn .oj-button-text { display: none; }
  .sm-page-title { font-size: 1.05rem; }
  .sm-page { padding: .75rem .75rem 1.5rem; }
}
/* never let anything make the app wider than the screen (that is what triggers the zoom-out) */
html, body { max-width: 100%; overflow-x: hidden; }
.sm-shell, .sm-main { max-width: 100vw; overflow-x: clip; }
.sm-page-title { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-header > * { flex-shrink: 0; }
.sm-header > .sm-page-title, .sm-header > .sm-flex { flex-shrink: 1; min-width: 0; }

/* ---------------------------------------------------------------- generic page parts */
.sm-page { padding: 1rem 1.25rem 2rem; display: flex; flex-direction: column; gap: 1rem; }
.sm-toolbar { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.sm-wrap { flex-wrap: wrap; }
.sm-search { width: 260px; max-width: 100%; }
.sm-filter { width: 200px; }
.sm-date { width: 170px; }
.sm-switch-label { display: inline-flex; align-items: center; gap: .4rem; color: var(--sm-muted); font-size: .875rem; }
.sm-card { padding: 1rem 1.25rem; border-radius: var(--sm-radius); }
.sm-card-title { margin: 0 0 .75rem; font-size: 1rem; font-weight: 600; }
.sm-card-head { display: flex; align-items: center; justify-content: space-between; }
.sm-card-head .sm-card-title { margin-bottom: .25rem; }
.sm-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 1100px) { .sm-grid-2 { grid-template-columns: 1fr; } }
.sm-count { display: inline-block; min-width: 1.4em; padding: 0 .4em; border-radius: 99px; background: var(--sm-warn);
  color: #fff; font-size: .75rem; text-align: center; vertical-align: middle; }
.sm-hint { color: var(--sm-muted); font-size: .85rem; margin: .5rem 0 1rem; min-height: 1.2em; }
.sm-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
  color: var(--sm-muted); padding: 3rem 1rem; }
.sm-empty-icon { width: 48px; height: 48px; opacity: .35; }
.sm-empty-table { padding: 1.5rem; color: var(--sm-muted); text-align: center; }
.sm-dialog-wide { width: 760px; max-width: 95vw; }

/* tables */
.sm-table { width: 100%; height: 520px; }
.sm-table-auto { height: auto; max-height: 420px; }
.sm-table-short { height: 320px; }
/* list pages (Items, Sales): the table fills the window below the header + toolbar
   (~64px header, ~60px toolbar, page padding); it scrolls / loads more inside itself */
.sm-table-fill { height: calc(100vh - 175px); min-height: 320px; }
@media (max-width: 767px) { .sm-table-fill { height: calc(100vh - 230px); } }   /* toolbar wraps on phones */
.sm-badge { margin-inline-start: .4rem; padding: 1px 6px; border-radius: 4px; font-size: .7rem; background: var(--sm-line); color: var(--sm-muted); }
.sm-stock-low { color: var(--sm-bad); font-weight: 600; }
.sm-neg { color: var(--sm-bad); }
.sm-pos { color: var(--sm-good); }
.sm-up { color: var(--sm-good); }
.sm-down { color: var(--sm-bad); }
.sm-type, .sm-status, .sm-role { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: .72rem; font-weight: 600;
  background: var(--sm-line); color: var(--sm-text); }
.sm-type-PURCHASE, .sm-type-RETURN, .sm-type-OPENING, .sm-status-COMPLETED { background: rgba(80,130,35,.15); color: var(--sm-good); }
.sm-type-SALE { background: var(--sm-accent-soft); color: var(--sm-accent); }
.sm-type-DAMAGE, .sm-status-RETURNED { background: rgba(199,70,52,.14); color: var(--sm-bad); }
.sm-type-ADJUSTMENT { background: rgba(172,99,12,.15); color: var(--sm-warn); }
.sm-role-ADMIN { background: rgba(199,70,52,.14); color: var(--sm-bad); }
.sm-role-MANAGER { background: var(--sm-accent-soft); color: var(--sm-accent); }

/* KPI tiles */
.sm-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; }
.sm-kpi { padding: 1rem 1.15rem; border-radius: var(--sm-radius); }
.sm-kpi-label { color: var(--sm-muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.sm-kpi-value { font-size: 1.55rem; font-weight: 700; margin: .3rem 0 .2rem; font-variant-numeric: tabular-nums; }
.sm-kpi-sub { font-size: .82rem; color: var(--sm-muted); }
.sm-kpi-sub.sm-up { color: var(--sm-good); }
.sm-kpi-sub.sm-down { color: var(--sm-bad); }
.sm-chart { width: 100%; height: 280px; }

/* chips (presets, quick cash) */
.sm-chip { border: 1px solid var(--sm-line); background: var(--sm-bg); color: var(--sm-text); border-radius: 99px;
  padding: .35rem .85rem; font: inherit; font-size: .85rem; cursor: pointer; }
.sm-chip:hover { border-color: var(--sm-accent); }
.sm-chip.is-on { background: var(--sm-accent); border-color: var(--sm-accent); color: #fff; }

/* ---------------------------------------------------------------- scan box + results (POS & inventory) */
.sm-scan { position: relative; }
.sm-scan-icon { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); color: var(--sm-muted); }
.sm-scan-input { width: 100%; box-sizing: border-box; font: inherit; font-size: 1.1rem; padding-block: .85rem; padding-inline: 2.75rem 1rem;
  border: 2px solid var(--sm-line); border-radius: var(--sm-radius); background: var(--sm-bg); color: var(--sm-text); outline: none; }
.sm-scan-input:focus { border-color: var(--sm-accent); box-shadow: 0 0 0 3px rgba(62,128,88,.18); }
/* scan boxes are type="search" so the browser never autofills a saved login into them; hide the search chrome */
.sm-scan-input { -webkit-appearance: none; appearance: none; }
.sm-scan-input::-webkit-search-cancel-button, .sm-scan-input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.sm-scan-small .sm-scan-input { font-size: 1rem; padding-top: .6rem; padding-bottom: .6rem; }
.sm-results { border: 1px solid var(--sm-line); border-radius: var(--sm-radius); background: var(--sm-bg); margin-top: .4rem;
  max-height: 280px; overflow: auto; }
.sm-result { display: grid; grid-template-columns: 1fr auto; gap: 0 1rem; width: 100%; text-align: start; border: 0;
  border-bottom: 1px solid var(--sm-line); background: transparent; padding: .55rem .9rem; cursor: pointer; font: inherit; color: inherit; }
.sm-result:hover, .sm-result:focus { background: var(--sm-accent-soft); outline: none; }
.sm-result-name { font-weight: 600; }
.sm-result-meta { grid-column: 1; color: var(--sm-muted); font-size: .8rem; }
.sm-result-price { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-weight: 700; }

/* ---------------------------------------------------------------- POS */
.sm-pos { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1rem; padding: 1rem; height: 100%; box-sizing: border-box; }
@media (max-width: 1000px) { .sm-pos { grid-template-columns: 1fr; height: auto; } }
.sm-pos-left { display: flex; flex-direction: column; min-height: 0; gap: .5rem; }
.sm-pos-right { display: flex; flex-direction: column; gap: .9rem; padding: 1.1rem; border-radius: var(--sm-radius); align-self: start; }

.sm-basket-head, .sm-line { display: grid; grid-template-columns: minmax(0, 1fr) 90px 150px 80px 100px 36px; gap: .5rem; align-items: center; }
.sm-basket-head { padding: .4rem .9rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--sm-muted); }
.sm-basket { flex: 1 1 auto; overflow-y: auto; background: var(--sm-bg); border: 1px solid var(--sm-line); border-radius: var(--sm-radius); min-height: 260px; }
.sm-line { padding: .55rem .9rem; border-bottom: 1px solid var(--sm-line); }
.sm-line:last-child { border-bottom: 0; }
.sm-line-warn { background: rgba(172,99,12,.07); }
.sm-line-name { min-width: 0; }
.sm-line-name > div:first-child { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-line-sub { font-size: .75rem; color: var(--sm-muted); display: flex; gap: .5rem; }
.sm-badge-warn { color: var(--sm-warn); font-weight: 600; }
/* app.confirm dialog buttons */
.sm-confirm-footer { display: flex; gap: .5rem; justify-content: flex-end; }
.sm-btn { min-width: 96px; padding: .55rem 1.1rem; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer;
  border: 1px solid var(--sm-line); background: var(--sm-bg); color: var(--sm-text); }
.sm-btn:hover { border-color: var(--sm-accent); }
.sm-btn-primary { background: var(--sm-accent); border-color: var(--sm-accent); color: #fff; }
.sm-btn-danger { background: var(--sm-bad); border-color: var(--sm-bad); color: #fff; }
.sm-btn-primary:hover, .sm-btn-danger:hover { filter: brightness(1.08); }
.sm-btn:focus-visible { outline: 2px solid var(--sm-accent); outline-offset: 2px; }

/* separate accounting (Tobacco) marker on basket lines / category rows */
.sm-badge-sep { display: inline-block; padding: 0 .4rem; border-radius: 99px; font-size: .72rem; font-weight: 600;
  background: rgba(110,80,40,.12); color: #6e5028; }
.sm-totals .sm-sep-row > span:first-child { color: #6e5028; }
.sm-line-total { font-weight: 700; font-variant-numeric: tabular-nums; }
.sm-qty { display: flex; align-items: center; justify-content: center; gap: 4px; }
.sm-qty-btn { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--sm-line); background: var(--sm-bg);
  color: var(--sm-text); font-size: 1.1rem; cursor: pointer; line-height: 1; }
.sm-qty-btn:hover { border-color: var(--sm-accent); color: var(--sm-accent); }
.sm-qty-input, .sm-disc-input { width: 64px; padding: 5px 4px; text-align: center; font: inherit; border: 1px solid var(--sm-line);
  border-radius: 6px; background: var(--sm-bg); color: var(--sm-text); -moz-appearance: textfield; }
.sm-disc-input { width: 70px; text-align: end; }
.sm-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.sm-remove { border: 0; background: transparent; color: var(--sm-muted); font-size: 1.4rem; cursor: pointer; border-radius: 6px; }
.sm-remove:hover { color: var(--sm-bad); background: rgba(199,70,52,.08); }

.sm-totals > div { display: flex; justify-content: space-between; padding: .25rem 0; font-variant-numeric: tabular-nums; }
.sm-totals > div > span:first-child { color: var(--sm-muted); }
.sm-grand { border-top: 1px solid var(--sm-line); margin-top: .35rem; padding-top: .6rem !important; font-size: 1.5rem; font-weight: 800; }
.sm-grand > span:first-child { color: var(--sm-text) !important; }
.sm-totals-inline { max-width: 360px; margin-inline-start: auto; margin-top: 1rem; }

.sm-paytabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: var(--sm-page); padding: 4px; border-radius: var(--sm-radius); }
.sm-paytabs-3 { grid-template-columns: 1fr 1fr 1fr; margin: 1rem 0; }
.sm-paytab { border: 0; background: transparent; padding: .6rem; border-radius: 8px; font: inherit; font-weight: 600;
  color: var(--sm-muted); cursor: pointer; }
.sm-paytab.is-on { background: var(--sm-bg); color: var(--sm-accent); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.sm-tendered { width: 100%; }
/* plain input at the till (oj-input-number misbehaved there) */
.sm-tendered-label { display: block; font-size: .8rem; color: var(--sm-muted); margin: .9rem 0 .25rem; }
.sm-tendered-input { width: 100%; box-sizing: border-box; padding: .6rem .75rem; font: inherit; font-size: 1.3rem; text-align: end;
  font-variant-numeric: tabular-nums; border: 1px solid var(--sm-line); border-radius: 8px; background: var(--sm-bg); color: var(--sm-text); }
.sm-tendered-input:focus { outline: 2px solid var(--sm-accent); outline-offset: -1px; }
.sm-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: .4rem; }
.sm-change { display: flex; justify-content: space-between; align-items: baseline; margin-top: .75rem; padding: .7rem .9rem;
  border-radius: var(--sm-radius); background: rgba(80,130,35,.1); color: var(--sm-good); }
.sm-change strong { font-size: 1.4rem; }
.sm-change.is-neg { background: rgba(199,70,52,.1); color: var(--sm-bad); }
.sm-pay-btn { width: 100%; height: 56px; font-size: 1.15rem; }

.sm-done { text-align: center; padding: .5rem 1rem 1rem; min-width: 300px; }
.sm-done-label { color: var(--sm-muted); text-transform: uppercase; letter-spacing: .05em; font-size: .8rem; }
.sm-done-change { font-size: 2.6rem; font-weight: 800; color: var(--sm-good); margin: .25rem 0 .5rem; }

/* inventory item card */
.sm-item-card { display: flex; align-items: center; gap: 1rem; margin-top: .9rem; padding: .8rem 1rem;
  border: 1px solid var(--sm-line); border-radius: var(--sm-radius); }
.sm-item-card > div:first-child { flex: 1 1 auto; min-width: 0; }
.sm-item-card-name { font-weight: 700; font-size: 1.05rem; }
.sm-item-card-stock { text-align: end; font-size: 1.3rem; font-weight: 700; }

/* sale detail */
.sm-sale-head { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-bottom: .75rem; }

/* ---------------------------------------------------------------- brand touches */
.sm-header { box-shadow: 0 1px 0 var(--sm-line); }
.sm-page-title { color: var(--sm-green-900); }
.sm-kpi { border-top: 3px solid var(--sm-green-300); }
.sm-grand { color: var(--sm-green-900); }
.sm-pos-right { border-top: 4px solid var(--sm-green-700); }
.sm-paytab.is-on { color: var(--sm-green-700); }
.sm-card-title { color: var(--sm-green-900); }

/* POS without the discount column (cashiers) */
.sm-basket-head.no-disc, .sm-line.no-disc { grid-template-columns: minmax(0, 1fr) 90px 150px 100px 36px; }

/* Arabic / RTL details */
html[dir="rtl"] .sm-kpi-label { letter-spacing: 0; text-transform: none; }
html[dir="rtl"] .sm-basket-head { letter-spacing: 0; text-transform: none; }
html[dir="rtl"] .sm-done-label { letter-spacing: 0; text-transform: none; }
/* numbers, barcodes and invoice numbers always read left-to-right, even inside Arabic text */
.sm-mono, .sm-line-total, .sm-kpi-value, .sm-qty-input, .sm-disc-input, .sm-change strong, .sm-done-change {
  unicode-bidi: isolate;
}
.sm-mono, .sm-qty-input, .sm-disc-input { direction: ltr; }