/*
 * The Mizan components of POS-UX2: icons, the approval sheet and its PIN pad, the manager's own screen, the
 * pairing screen, the owner's «الموافقة والأجهزة», the states of the sale screen and the offline bar. Every colour,
 * size, radius and shadow is a token of tokens.css; every direction is LOGICAL (inline/block, start/end) — no left,
 * no right (tests/architecture/pos-ux2-rules.test.ts); nothing moves here (motion.css moves things).
 */

/* ---------------------------------------------------------------- icons */

.ico {
  inline-size: 1.25em;
  block-size: 1.25em;
  flex: none;
  vertical-align: -0.2em;
}
.icon-btn {
  display: inline-grid;
  place-items: center;
  min-inline-size: var(--tap-sm);
  min-block-size: var(--tap-sm);
  border: 1px solid var(--line-control);
  border-radius: var(--r-control);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  touch-action: manipulation;
}
[dir='rtl'] .ico--mirror {
  transform: scaleX(-1);
}

/* ---------------------------------------------------------------- the states of the sale screen */

.cart__empty,
.empty {
  display: grid;
  justify-items: center;
  gap: var(--s-3);
  margin: auto;
  padding: var(--s-5);
  color: var(--ink-soft);
  text-align: center;
}
.cart__empty .ico,
.empty .ico {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  color: var(--line-control);
}
.cart__empty p,
.empty p {
  margin: 0;
}

.offline-bar {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  background: var(--warn-bg);
  color: var(--warn);
  border-block-end: 1px solid var(--warn);
  font-size: var(--t-meta);
  font-weight: 600;
}
.offline-bar[hidden] {
  display: none;
}
body[data-offline='1'] .btn--pay,
body[data-offline='1'] [data-action='pay'] {
  opacity: 0.5;
  pointer-events: none;
}

/* ---------------------------------------------------------------- the approval sheet */

.approval {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.approval__summary {
  margin: 0;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-control);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: var(--t-meta);
  line-height: var(--t-meta-lh);
  font-variant-numeric: tabular-nums;
}
.approval__msg:empty {
  display: none;
}
.approval__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: var(--s-2);
}
.mgr {
  display: grid;
  justify-items: center;
  gap: var(--s-1);
  min-block-size: var(--tap-pay);
  padding: var(--s-3);
  border: 1px solid var(--line-control);
  border-radius: var(--r-card);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--t-label);
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}
.mgr .ico {
  inline-size: 1.75rem;
  block-size: 1.75rem;
}
.mgr:focus-visible {
  outline: var(--ring) solid var(--focus);
  outline-offset: 2px;
}
.mgr:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.mgr__note {
  color: var(--warn);
  font-size: var(--t-caption);
  font-weight: 500;
}
.approval__who,
.approval__prompt,
.approval__scan,
.approval__wait {
  margin: 0;
  font-size: var(--t-label);
  font-weight: 600;
}
.approval__prompt {
  color: var(--ink-soft);
  font-weight: 400;
}
.approval__pin {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  align-items: stretch;
}
.approval__done {
  display: grid;
  place-items: center;
  color: var(--good);
}
.approval__done .ico {
  inline-size: 3.5rem;
  block-size: 3.5rem;
}

/* six masked dots: how many, never which */
.pin__row {
  display: flex;
  justify-content: center;
  gap: var(--s-3);
  padding-block: var(--s-2);
  direction: ltr;
}
.pin__dot {
  inline-size: 1.1rem;
  block-size: 1.1rem;
  border: 2px solid var(--line-control);
  border-radius: var(--r-pill);
  background: transparent;
}
.pin__dot--on {
  background: var(--ink);
  border-color: var(--ink);
}

/* ---------------------------------------------------------------- the manager's own screen */

.pinsetup__state {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: var(--s-3) 0;
  font-weight: 600;
}
.pinsetup__state--good {
  color: var(--good);
}
.pinsetup__state--bad {
  color: var(--stop);
}
.pinsetup__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--s-6);
  align-items: start;
}
.pinsetup__entry,
.pinsetup__badge {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.pinsetup__entry h2,
.pinsetup__badge h2 {
  margin: 0;
  font-size: var(--t-label);
}
.badgecard {
  display: grid;
  gap: var(--s-2);
  justify-items: center;
  padding: var(--s-4);
  border: 1px dashed var(--line-control);
  border-radius: var(--r-card);
  background: var(--slip-paper);
  color: var(--slip-ink);
}
.badgecard__code {
  max-inline-size: 100%;
  overflow-x: auto;
}
.badgecard__text {
  margin: 0;
  font-size: var(--t-caption);
  word-break: break-all;
}
.code128 {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

/* ---------------------------------------------------------------- pairing, and the owner's screen */

.pairing__form {
  display: grid;
  gap: var(--s-2);
  margin-block: var(--s-3);
}
.pairing__code {
  min-block-size: var(--tap-pay);
  padding-inline: var(--s-4);
  border: 1px solid var(--line-control);
  border-radius: var(--r-control);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--t-title);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  text-align: center;
}
.officeapp__tills,
.officeapp__locks {
  display: grid;
  gap: var(--s-3);
  padding: 0;
  margin: var(--s-3) 0;
  list-style: none;
}
.officeapp__till {
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
}
.officeapp__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}
.officeapp__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r-pill);
  font-size: var(--t-meta);
  font-weight: 600;
}
.officeapp__badge--on {
  background: var(--good-bg);
  color: var(--good);
}
.officeapp__badge--off {
  background: var(--warn-bg);
  color: var(--warn);
}
.paircode {
  display: grid;
  justify-items: center;
  gap: var(--s-1);
  margin-block: var(--s-3);
  padding: var(--s-4);
  border: 2px solid var(--accent);
  border-radius: var(--r-card);
  background: var(--accent-soft);
  color: var(--ink);
}
.paircode p {
  margin: 0;
}
.paircode__value {
  font-size: var(--t-due);
  line-height: var(--t-due-lh);
  font-weight: 700;
  letter-spacing: 0.2em;
  font-variant-numeric: tabular-nums;
}
.officeapp__lock {
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-control);
  background: var(--warn-bg);
  color: var(--ink);
}
.officeapp__policy {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--s-3);
  align-items: end;
}
.officeapp__field {
  display: grid;
  gap: var(--s-1);
  min-inline-size: 0;
}
.officeapp__field input {
  inline-size: 100%;
  min-inline-size: 0;
  box-sizing: border-box;
  min-block-size: var(--tap);
  padding-inline: var(--s-3);
  border: 1px solid var(--line-control);
  border-radius: var(--r-control);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-variant-numeric: tabular-nums;
}

/* a badge printed from the page: the card alone on the paper */
.badgeprint {
  display: grid;
  gap: var(--s-2);
  justify-items: center;
  padding: var(--s-3);
  border: 1px solid var(--slip-ink);
  color: var(--slip-ink);
  text-align: center;
}
.badgeprint__name {
  font-size: var(--t-title);
  font-weight: 700;
}