/* «الكاشيرات» — the pairing screen (016/A2). Page-scoped, layered on casheer.css's tokens and on
   setup.css's panel, because this is the same kind of screen: no shell, no session, one card an
   installer or a second cashier opens on purpose.

   Spec 018 P5 T053a: tokens only, at Sol's comfortable size. The branch's tills are one framed list
   of hairline rows inside the panel (never a card inside a card), a row's buttons are row actions
   at the control height, and the code read out across the shop is a code: mono, LTR, on the teal
   tint. */

.tills-panel {
  max-width: 620px;
}

/* The code, on the owner's screen, read out loud across a shop. Big, LTR, and spaced so nothing on
   it can be misread — the alphabet already has no I, L, O or U in it (`src/domain/tills.js`). */
.till-code {
  direction: ltr;
  text-align: center;
  font-family: var(--mono);
  font-size: var(--t-28);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.22em;
  font-variant-numeric: tabular-nums;
  padding: var(--space-12);
  border: 1px dashed var(--teal);
  border-radius: var(--r-2);
  background: var(--teal-bg);
  color: var(--teal-ink);
}

/* The list of the branch's tills: a hairline frame, rows ruled off, no shadow (it sits in a card). */
.tills-panel .card:has(> .till-row) {
  gap: 0;
  padding: 0 var(--space-12);
  border-radius: var(--r-2);
  box-shadow: none;
}

.till-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-10) 0;
  border-bottom: 1px solid var(--line);
}

.till-row:last-child { border-bottom: none; }
.till-row > div:first-child { display: grid; gap: var(--space-2); min-width: 0; }
.till-row-name { font-weight: 650; font-size: var(--t-13); }
.till-row-name .muted { font-weight: 500; font-size: var(--t-12); }
.till-row .row { gap: var(--space-8); flex-wrap: wrap; }
.till-row-actions { display: flex; gap: var(--space-6); flex-wrap: wrap; flex: none; }
.till-row .btn { min-height: var(--ctl); padding: 0 var(--space-12); font-size: var(--t-12); }

/* The box the code is typed back into: LTR and upper-case, because the code is, and a cashier
   typing it should see exactly what the owner is reading out. */
.till-code-input {
  direction: ltr;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
}

.tills-panel .input.till-code-input { font-family: var(--mono); font-size: var(--t-18); font-weight: 700; }

@media (max-width: 480px) {
  .till-row { flex-direction: column; align-items: stretch; }
  .till-row-actions > .btn { flex: 1 1 0; }
}

/* Mobile v2: secondary workflow */
@media screen and (max-width: 760px) {

  .tills-panel { max-width: 100%; }
  .till-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .till-row-name { overflow-wrap: anywhere; font-size: var(--t-15); }
  .till-row-actions { flex-wrap: wrap; }
  .till-row-actions .btn { flex: 1 1 100px; min-height: 44px; white-space: normal; }
  .till-code { max-width: 100%; box-sizing: border-box; font-size: var(--t-22); letter-spacing: .12em; overflow-wrap: anywhere; }
}