/* ==========================================================================
   Nizam — camera scanner
   --------------------------------------------------------------------------
   Its own stylesheet because the scanner is no longer a POS feature. It lives
   on the till, on add/edit product, on sell and on purchase, and nizam-pos.css
   is loaded only when $pos_layout is set - so while these rules sat in there,
   the overlay opened completely unstyled on every screen but the till: a
   full-page video with the page's own buttons floating over it.

   Loaded globally from layouts/partials/css.blade.php. It is small, it is
   cached, and a stylesheet in the head is worth more than saving a request on
   the pages that do not use it.

   Reads the token system in nizam-tokens.css and adds nothing of its own: no
   literal colour, no font stack, no arbitrary size. Box model properties are
   logical, so the whole thing mirrors in Arabic without a second rule.
   ========================================================================== */

.nz-scanner{
  position: fixed;
  inset: 0;
  z-index: 1700;              /* over the POS chrome and its modals */
  display: flex;
  flex-direction: column;
  justify-content: center;    /* the preview sits mid-screen, not pinned up */
  background: #000;
}
.nz-scanner[hidden]{ display: none; }

/* While the scanner is up nothing behind it should scroll or be reachable. */
body.nz-scanning{ overflow: hidden; }

/* A LANDSCAPE window, whatever shape the camera hands over.

   A barcode is a wide, short thing. A portrait preview wastes most of itself on
   sky and floor while the bars run out of the sides, and it invites the phone
   to be held upright where the code does not fit. A wide band matches what is
   being read, and cropping a portrait stream to it costs nothing: the full
   width is kept and only the irrelevant top and bottom go.

   This is a vertical crop, not the horizontal one that read as "zoomed"
   before - nothing of the code's own width is lost. */
.nz-scanner-stage{
  position: relative;
  flex: 0 1 auto;
  aspect-ratio: 16 / 10;
  inline-size: 100%;
  max-block-size: 72vh;
  min-block-size: 0;
  overflow: hidden;
}

/* cover, to fill the landscape band above. See the note there for why the crop
   is the right way round this time. */
.nz-scanner-video{
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}

/* The reticle frames the WHOLE preview, because the whole preview is what gets
   decoded - ZXing reads the entire frame, never a region. A small central box
   was a lie about that: it said "put the code in here", so people moved the
   phone closer than they needed to and lost focus doing it.

   Corners rather than a full rectangle, so it reads as a viewfinder and not as
   a border. No centring transform any more; it is simply inset from the stage,
   which also means nothing to mirror in RTL. */
.nz-scanner-frame{
  position: absolute;
  inset: var(--nz-space-3);
  pointer-events: none;
}

.nz-scanner-corner{
  position: absolute;
  inline-size: 28px;
  block-size: 28px;
  border: 3px solid rgba(255, 255, 255, .9);
  transition: border-color var(--nz-transition);
}
.nz-scanner-corner.is-tl{ inset-block-start: 0; inset-inline-start: 0; border-block-end: 0; border-inline-end: 0; }
.nz-scanner-corner.is-tr{ inset-block-start: 0; inset-inline-end: 0; border-block-end: 0; border-inline-start: 0; }
.nz-scanner-corner.is-bl{ inset-block-end: 0; inset-inline-start: 0; border-block-start: 0; border-inline-end: 0; }
.nz-scanner-corner.is-br{ inset-block-end: 0; inset-inline-end: 0; border-block-start: 0; border-inline-start: 0; }

/* A code is in view. The colour is the cue, but it is never the only one -
   the decoded value is printed below and the Scan button becomes enabled. */
.nz-scanner-frame.is-detecting .nz-scanner-corner{
  border-color: var(--nz-paid-fg);
}

.nz-scanner-panel{
  flex: 0 0 auto;
  /* Trimmed so the preview keeps as much of the screen as possible: aiming is
     the hard part of this screen, and it is the part that needs the pixels. */
  padding: var(--nz-space-3) var(--nz-space-5)
           calc(var(--nz-space-5) + env(safe-area-inset-bottom, 0px));
  background: rgba(0, 0, 0, .82);
  text-align: center;
  color: #fff;
}

/* The value about to be submitted. Digits, so tabular and LTR-isolated: an
   Arabic interface would otherwise reorder a barcode. */
.nz-scanner-code{
  margin: 0 0 var(--nz-space-2);
  min-block-size: 20px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--nz-text-md);
  font-variant-numeric: var(--nz-num);
  unicode-bidi: isolate;
  color: #fff;
  word-break: break-all;
}

.nz-scanner-status{
  margin: 0 0 var(--nz-space-4);
  min-block-size: 20px;
  font-size: var(--nz-text-md);
  color: rgba(255, 255, 255, .75);
}
/* On a dark scrim the token status colours are too dark to read, so these two
   are the lighter ends of the same hues rather than --nz-paid-fg/--nz-due-fg. */
.nz-scanner-status.is-ok{ color: #6EE7B7; font-weight: var(--nz-fw-bold); }
.nz-scanner-status.is-error{ color: #FCA5A5; font-weight: var(--nz-fw-bold); }

/* The commit. Large and central because it is pressed one-handed, often while
   the other hand holds the item. */
.nz-scanner-scan{
  display: block;
  margin: 0 auto var(--nz-space-3);
  inline-size: 106px;
  block-size: 106px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, .9);
  background: var(--nz-brand);
  color: var(--nz-on-brand);
  font-size: var(--nz-text-base);
  font-weight: var(--nz-fw-bold);
  cursor: pointer;
  transition: transform var(--nz-transition), background var(--nz-transition);
}
.nz-scanner-scan:active{ transform: scale(.94); }
.nz-scanner-scan:focus-visible{ outline: none; box-shadow: var(--nz-focus-ring); }
/* Disabled means "no code in view", which is a normal resting state here, so
   it is dimmed rather than made to look broken. */
.nz-scanner-scan:disabled{
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .35);
  color: rgba(255, 255, 255, .55);
  cursor: default;
}

.nz-scanner-close{
  min-block-size: var(--nz-tap-min);
  padding-inline: var(--nz-space-6);
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: var(--nz-radius);
  background: transparent;
  color: #fff;
  font-size: var(--nz-text-base);
  cursor: pointer;
}
.nz-scanner-close:focus-visible{ outline: none; box-shadow: var(--nz-focus-ring); }

/* Landscape on a phone leaves almost no vertical room; put the controls
   beside the preview instead of under it. */
@media (orientation: landscape) and (max-height: 500px){
  .nz-scanner{ flex-direction: row; }
  .nz-scanner-panel{
    display: flex;
    flex-direction: column;
    justify-content: center;
    inline-size: 190px;
    padding-block: var(--nz-space-3);
  }
  .nz-scanner-scan{ inline-size: 86px; block-size: 86px; }
}

@media (prefers-reduced-motion: reduce){
  .nz-scanner-scan{ transition: none; }
  .nz-scanner-scan:active{ transform: none; }
}