/* ── The simple mode (owner request 2026-11-08): one sale, again and again ─────────────────────────────── */
.simple { display: flex; flex-direction: column; gap: var(--kj-sp-4); max-width: 520px; margin-inline: auto; }
.simple__title { font-size: var(--kj-fs-2xl); margin: 0; }

/* 1 · one button */
.simple--home { text-align: center; padding-top: var(--kj-sp-4); }
.simple__greet { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: var(--kj-sp-2); animation: donein .5s ease-out both; }
.simple__hello { margin: 0; color: var(--kj-dark); font-size: var(--kj-fs-3xl); font-weight: var(--kj-fw-medium); line-height: 1.25; }
.simple__wish { margin: 0; color: var(--kj-gold-deep); font-size: var(--kj-fs-md); }
@media (prefers-reduced-motion: reduce) { .simple__greet { animation: none; } }
.simple__start { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--kj-sp-2); padding: var(--kj-sp-8) var(--kj-sp-6);
  border: 0; border-radius: var(--kj-radius-3xl); background: var(--kj-dark); color: var(--kj-white); font: inherit; font-size: var(--kj-fs-3xl); font-weight: var(--kj-fw-medium);
  box-shadow: var(--kj-shadow-lg); cursor: pointer; transition: transform var(--kj-transition-fast), background var(--kj-transition-fast); }
.simple__start:active { transform: scale(0.97); background: var(--kj-dark-deep); }
.simple__start svg { width: 40px; height: 40px; color: var(--kj-gold); }
/* a sale left unsaved — back from the scan page or the app closed mid-sale (owner request 2026-11-10): one row, «عملية معلّقة»
   over the shop's name, then «إكمال» and «إلغاء» (white, its word in a quiet red, as on the scan page) */
.simple__resume { display: flex; align-items: center; gap: var(--kj-sp-2); padding: var(--kj-sp-2) var(--kj-sp-3); border-radius: var(--kj-radius-xl);
  background: var(--kj-white); border: 1px solid var(--kj-warning); border-inline-start-width: 4px; box-shadow: var(--kj-shadow-sm); text-align: start; }
.simple__resume-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.simple__resume-main small { font-size: var(--kj-fs-sm); color: var(--kj-warning-deep); font-weight: var(--kj-fw-medium); }
.simple__resume-main b { font-size: var(--kj-fs-lg); font-weight: var(--kj-fw-medium); color: var(--kj-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.simple__resume .btn { flex: none; padding-inline: var(--kj-sp-4); }
.simple__held { display: flex; flex-direction: column; gap: var(--kj-sp-2); }   /* several held sales, the last one left on top */
.simple__pending { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin: 0; color: var(--kj-warning-deep); font-size: var(--kj-fs-base); }

/* four chips sharing the width evenly, all of them always in view (owner request 2026-11-11: اليوم · أمس · هذا الشهر · منذ البداية) */
.simple__periods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: var(--kj-sp-2); }
.simple__periods .chip { min-width: 0; padding-inline: 4px; justify-content: center; text-align: center; white-space: nowrap; }
@media (max-width: 360px) { .simple__periods .chip { font-size: var(--kj-fs-sm); } }
/* «فترة محددة» (owner request 2026-11-11): under the chips, its two days in plain sight — «من» and «إلى» side by side.
   Chosen, it takes the chips' active look (gold border, cream fill) */
.simple__range { display: flex; flex-direction: column; gap: 6px; text-align: start; }
.simple__range-title { font-size: var(--kj-fs-base); color: var(--kj-gray-600); font-weight: var(--kj-fw-medium); }
.simple__range-days { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kj-sp-2); }
.simple__date { position: relative; display: flex; align-items: center; gap: 6px; min-height: 48px; padding-inline: var(--kj-sp-3); border: 1.5px solid var(--kj-gray-200);
  border-radius: var(--kj-radius-lg); background: var(--kj-white); cursor: pointer; transition: border-color var(--kj-transition-fast), background var(--kj-transition-fast); }
.simple__date > span { flex: none; font-size: var(--kj-fs-base); color: var(--kj-gray-500); }
.simple__date-text { flex: 1; min-width: 0; font-size: var(--kj-fs-md); font-weight: var(--kj-fw-medium); color: var(--kj-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.simple__date .kj-icon, .simple__date svg { flex: none; color: var(--kj-gray-400); }
/* the phone's picker, invisible over the whole box (16px: iOS does not zoom the page on it) */
.simple__date-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; font-size: 16px; cursor: pointer; -webkit-appearance: none; appearance: none; }
.simple__date:focus-within { border-color: var(--kj-gold); }
.simple__range.is-active .simple__date { border-color: var(--kj-gold); background: var(--kj-gold-cream); }
/* «من» later than «إلى»: the days stay, a quiet red line says so (owner request 2026-11-11) */
.simple__range.is-invalid .simple__date { border-color: var(--kj-danger); background: var(--kj-white); }
.simple__range-note { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--kj-fs-sm); color: var(--kj-danger-deep); }
.simple__range.is-active .simple__date > span, .simple__range.is-active .simple__range-title { color: var(--kj-gold-deep); }
.simple__total { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--kj-sp-4); border-radius: var(--kj-radius-2xl);
  background: var(--kj-gold-cream); border: 0.5px solid var(--kj-gold-soft); transition: opacity var(--kj-transition-fast); }
.simple__total.is-loading { opacity: .5; }
.simple__total-label { font-size: var(--kj-fs-base); color: var(--kj-gold-deep); }
.simple__total-val { font-size: var(--kj-fs-5xl); line-height: 1.1; color: var(--kj-dark); font-variant-numeric: tabular-nums; direction: ltr; }
.simple__total-val small { font-size: var(--kj-fs-xl); color: var(--kj-gray-600); }
.simple__total-pair { display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin-top: var(--kj-sp-3); padding-top: var(--kj-sp-3); border-top: 0.5px solid var(--kj-gold-soft); }
.simple__total-pair > div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.simple__total-pair > div + div { border-inline-start: 0.5px solid var(--kj-gold-soft); }
.simple__total-pair span { font-size: var(--kj-fs-sm); color: var(--kj-gold-deep); }
.simple__total-pair b { font-size: var(--kj-fs-2xl); color: var(--kj-dark); font-variant-numeric: tabular-nums; direction: ltr; }
.simple__total-pair b small { font-size: var(--kj-fs-sm); color: var(--kj-gray-600); }
.simple__none { margin: 0; color: var(--kj-gray-500); }
.simple__recent { display: flex; flex-direction: column; gap: var(--kj-sp-2); text-align: start; }
.simple__recent-title { margin: var(--kj-sp-2) 0 0; color: var(--kj-gray-600); font-size: var(--kj-fs-base); font-weight: var(--kj-fw-medium); }
/* a sale is a button in its own white frame (owner request 2026-11-10): the shop mark in a cream square, the shop and the
   day, then the grams and under them the cards and the labor. A tap opens it (its cards, «حذف العملية») */
.simple__sale { display: flex; align-items: center; gap: var(--kj-sp-3); width: 100%; padding: var(--kj-sp-3); border: 1px solid var(--kj-gray-200);
  border-radius: var(--kj-radius-xl); background: var(--kj-white); box-shadow: var(--kj-shadow-sm); font: inherit; color: inherit; text-align: start; cursor: pointer;
  transition: background var(--kj-transition-fast), border-color var(--kj-transition-fast); }
.simple__sale:active { background: var(--kj-gold-cream); border-color: var(--kj-gold-soft); }
.simple__sale-icon { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--kj-radius-lg);
  background: var(--kj-gold-cream); color: var(--kj-gold-deep); }
.simple__sale-main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.simple__sale-main b { font-size: var(--kj-fs-md); font-weight: var(--kj-fw-medium); color: var(--kj-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.simple__sale-main span { font-size: var(--kj-fs-sm); color: var(--kj-gray-500); }
.simple__sale-end { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.simple__sale-sub { font-size: var(--kj-fs-sm); color: var(--kj-gray-500); font-variant-numeric: tabular-nums; white-space: nowrap; }
.simple__sale-g { flex: none; font-size: var(--kj-fs-lg); font-weight: var(--kj-fw-medium); color: var(--kj-dark); font-variant-numeric: tabular-nums; direction: ltr; }
.simple__sale-g small { font-size: var(--kj-fs-sm); color: var(--kj-gray-500); font-weight: var(--kj-fw-normal); }

/* 2 · the shop and who received */
.simple__shop { position: relative; }
.simple__sug { position: absolute; inset-inline: 0; top: calc(100% - 18px); z-index: 5; display: flex; flex-direction: column; max-height: 50vh; overflow-y: auto;
  background: var(--kj-white); border: 1px solid var(--kj-gray-200); border-radius: var(--kj-radius-lg); box-shadow: var(--kj-shadow-lg); }
.simple__sug-item { display: flex; align-items: baseline; justify-content: space-between; gap: var(--kj-sp-3); padding: var(--kj-sp-3) var(--kj-sp-4);
  border: 0; border-bottom: 0.5px solid var(--kj-gray-100); background: none; font: inherit; font-size: var(--kj-fs-lg); color: var(--kj-ink); text-align: start; cursor: pointer; }
.simple__sug-item:last-child { border-bottom: 0; }
.simple__sug-item:active, .simple__sug-item:hover { background: var(--kj-gold-cream); }
.simple__input { height: 54px; font-size: var(--kj-fs-xl); }
.simple__actions { display: flex; flex-direction: column; gap: var(--kj-sp-2); margin-top: var(--kj-sp-2); }

/* 3 · camera · totals · manual · price · cards · save — ONE screen that never scrolls (owner request 2026-11-08).
   The view is pinned under the top bar (position: fixed), so a keyboard, a sheet or the browser bar hiding never moves it.
   The camera has a height of its own — a third of the SMALL viewport (svh: the same whether the keyboard or the browser bar is
   showing), capped — and never the space left over: «what is left» changed with every keyboard and grew to the camera's own
   tall portrait frame on a phone (fix 2026-11-08). What is left goes to the list: three cards at least, more on a tall phone. */
.simple-view--scan { position: fixed; top: calc(56px + var(--kj-safe-top)); inset-inline: 0; bottom: 0; z-index: 1; max-width: none; height: auto; margin: 0;
  padding: var(--kj-sp-3) var(--kj-sp-4) 0; overflow: hidden; display: flex; flex-direction: column; }
.simple-view--scan .simple--scan { flex: 1 1 auto; min-height: 0; width: 100%; gap: var(--kj-sp-2); }
/* the camera's size comes from the SCREEN only (flex-basis 32svh, capped), never from the cards below it: it shrinks only when
   a small phone has no room for it, and stays put however many cards are scanned (fix 2026-11-10 — the list used to grow its
   claim with every card and took the space from the camera, which got smaller with each scan) */
.simple--scan .simple__stage { flex: 0 1 32svh; height: auto; min-height: 130px; max-height: 280px; aspect-ratio: auto; }
.simple--scan .simple__stage .scan__video { position: absolute; inset: 0; }   /* the frame's own size never sizes the box */
.simple--scan .simple__stage .scan__status { position: absolute; inset-inline: 0; bottom: 0; z-index: 1; margin: 0; min-height: 0; padding: 6px var(--kj-sp-3);
  background: var(--kj-scrim); color: var(--kj-white); font-size: var(--kj-fs-sm); }
.simple--scan .simple__stage .scan__ctls { bottom: auto; top: 8px; }
.simple--scan .simple__tile { padding: 6px 4px; }
.simple--scan .simple__tile b { font-size: var(--kj-fs-xl); }
.simple--scan > .btn--secondary { flex: none; padding-block: 10px; }
.simple--scan .simple__price { flex: none; }
/* three cards tall at least (more on a tall phone): the newest on top, the older ones a swipe away inside the list */
/* flex-basis 0: the list takes what is LEFT and scrolls inside — its cards never claim space from the camera */
.simple--scan .simple__list { flex: 1 1 0; min-height: calc(3 * 56px + 2 * 6px); overflow-y: auto; overscroll-behavior: contain; padding: 1px;
  scrollbar-width: none; }                                      /* it scrolls by the finger, with no bar showing (owner request) */
.simple--scan .simple__list::-webkit-scrollbar { display: none; }
/* the delete of a card: the bare trash icon of the full app's scan list, red under the finger — not a grey box */
.simple__list .item__del { flex: 0 0 auto; border: 0; background: none; cursor: pointer; border-radius: var(--kj-radius-md); }
.simple__list .item__del:active { color: var(--kj-danger); background: var(--kj-danger-soft); }
.simple--scan .simple__list .item { min-height: 56px; box-sizing: border-box; padding-block: 8px; }
.simple--scan .simple__list:empty { display: grid; place-items: center; border: 1px dashed var(--kj-gray-300); border-radius: var(--kj-radius-lg); }
.simple--scan .simple__list:empty::before { content: attr(data-empty); color: var(--kj-gray-500); font-size: var(--kj-fs-base); }
.simple-view--scan .simple__foot { position: static; flex: none; margin-top: 0; padding-block: var(--kj-sp-1) calc(var(--kj-sp-3) + var(--kj-safe-bottom)); }
.simple__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--kj-sp-2); }
.simple__tile { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--kj-sp-2) 4px; border-radius: var(--kj-radius-lg);
  background: var(--kj-gold-cream); border: 0.5px solid var(--kj-gold-soft); }
.simple__tile span { font-size: var(--kj-fs-sm); color: var(--kj-gold-deep); }
.simple__tile b { font-size: var(--kj-fs-2xl); line-height: 1.15; color: var(--kj-dark); font-variant-numeric: tabular-nums; direction: ltr; }
.simple__price { display: flex; align-items: center; justify-content: space-between; gap: var(--kj-sp-3); font-weight: var(--kj-fw-medium); }
.simple__price .wbox { flex: 0 0 170px; }
.simple__serial { color: var(--kj-gray-500); font-size: var(--kj-fs-xs); font-weight: var(--kj-fw-normal); direction: ltr; }
/* the bar under the cards: «حفظ» (the page's one dark button) and «إلغاء» beside it at the same height — white with a hairline
   like the cards above it, its word in a quiet red; the bar takes the page's own colour, not a white band */
.simple__foot { position: sticky; bottom: 0; z-index: 2; display: flex; gap: var(--kj-sp-2); margin-top: var(--kj-sp-1);
  padding-block: var(--kj-sp-3) calc(var(--kj-sp-3) + var(--kj-safe-bottom)); background: var(--kj-bg); }
.simple__save { flex: 1 1 auto; }
.simple__cancel { flex: 0 0 auto; padding-inline: var(--kj-sp-5); background: var(--kj-white); color: var(--kj-danger-deep); border-color: var(--kj-gray-200); }
.simple__cancel:hover { background: var(--kj-white); border-color: var(--kj-danger); box-shadow: none; }
.simple__cancel:active { background: var(--kj-danger-soft); border-color: var(--kj-danger); }
.simple__manual { display: flex; flex-direction: column; gap: var(--kj-sp-3); }
.simple__manual .wbox { flex: none; width: 100%; }
.simple__labor { display: flex; justify-content: space-between; align-items: center; padding: var(--kj-sp-3); border-radius: var(--kj-radius-lg); background: var(--kj-gray-100); }
.simple__labor b { font-size: var(--kj-fs-xl); font-variant-numeric: tabular-nums; }

/* «راجع قبل الحفظ» and an opened sale: the shop, the three figures, the cards — the list scrolls inside the window */
.simple__review { display: flex; flex-direction: column; gap: var(--kj-sp-3); }
.simple__review-shop { margin: 0; font-size: var(--kj-fs-xl); font-weight: var(--kj-fw-medium); text-align: center; }
.simple__review-when { margin: 0; color: var(--kj-gray-500); text-align: center; font-size: var(--kj-fs-base); }
.simple__review .simple__tile b { font-size: var(--kj-fs-xl); }
.simple__review-price { margin: 0; color: var(--kj-gray-600); }
.simple__review-price b { color: var(--kj-dark); font-variant-numeric: tabular-nums; }
.simple__review-warn { display: flex; align-items: center; gap: 6px; margin: 0; padding: var(--kj-sp-2) var(--kj-sp-3); border-radius: var(--kj-radius-lg);
  background: var(--kj-warning-soft); color: var(--kj-warning-deep); font-size: var(--kj-fs-base); }
.simple__review-list { max-height: 36vh; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding: 1px; }
.simple__review-list::-webkit-scrollbar { display: none; }
.sheet .simple__cancel { padding-inline: var(--kj-sp-4); }

/* 4 · saved: a celebration over the whole screen, then back to «عملية جديدة» */
.simple-done { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--kj-sp-2);
  padding: var(--kj-sp-6); background: var(--kj-white); text-align: center; overflow: hidden; cursor: pointer; }
.simple-done h2 { margin: var(--kj-sp-3) 0 0; font-size: var(--kj-fs-4xl); color: var(--kj-success-deep); animation: donein .4s .15s ease-out both; }
.simple-done p { margin: 0; font-size: var(--kj-fs-xl); color: var(--kj-ink); animation: donein .4s .25s ease-out both; }
.simple-done .simple-done__nums { font-size: var(--kj-fs-lg); color: var(--kj-gray-600); direction: rtl; }
.simple-done .simple-done__note { display: inline-flex; align-items: center; gap: 6px; font-size: var(--kj-fs-base); color: var(--kj-warning-deep); }
.simple-done__check { position: relative; z-index: 1; width: 112px; height: 112px; display: grid; place-items: center; border-radius: var(--kj-radius-full);
  background: var(--kj-success); color: var(--kj-white); box-shadow: 0 0 0 14px var(--kj-success-soft); animation: donepop .55s ease-out both; }
.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti__bit { position: absolute; top: -16px; inset-inline-start: var(--x); width: 9px; height: 15px; border-radius: 2px; background: var(--kj-gold);
  transform: rotate(var(--r)); animation: confall var(--d) var(--delay) ease-in forwards; }
.confetti__bit--1 { background: var(--kj-success); }
.confetti__bit--2 { background: var(--kj-dark); }
.confetti__bit--3 { background: var(--kj-gold-mid); width: 7px; height: 7px; border-radius: var(--kj-radius-full); }
@keyframes confall { to { transform: translateY(105dvh) rotate(calc(var(--r) + 540deg)); } }
@keyframes donepop { 0% { transform: scale(0.3); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
@keyframes donein { from { transform: translateY(10px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .simple-done__check, .simple-done h2, .simple-done p { animation: none; }
  .confetti { display: none; }
}