/*
 * Restaurant R4 — the drawer (views-cash.js, cash-html.js: «صرف من الدرج» and «إيداع في الدرج», the form, the shift's
 * list, the back office's policy and accounts) and the pay sheet's two modes (pay-split-html.js: several cards and the
 * equal split). Every colour, size and radius is a token (tokens.css, with its dark values); spacing is logical; every
 * control is at least 44 px, the pay sheet's split buttons 60.
 */

/* ---------------------------------------------------------------- the drawer */

.cash__new {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.cash__new .btn,
.cash__list .btn,
.cash__reasons .chip-btn,
.cash__accounts .btn,
.cash__form .btn {
  min-block-size: 44px;
}

.cash__reasons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-block: var(--s-2);
}

.chip-btn {
  min-block-size: 44px;
  padding-inline: var(--s-3);
  border: 1px solid var(--line-control);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
}

.chip-btn--on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.cash__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-3);
}

.cash__row {
  display: grid;
  gap: var(--s-1);
  padding-block: var(--s-3);
  padding-inline: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  background: var(--surface);
}

.cash__row--pending_approval {
  border-color: var(--warn);
  background: var(--warn-bg);
}

.cash__row--rejected,
.cash__row--cancelled {
  color: var(--muted);
}

.cash__amount {
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.cash__modes {
  display: grid;
  gap: var(--s-2);
}

.cash__accounts {
  display: grid;
  gap: var(--s-3);
  margin-block-start: var(--s-5);
}

/* ---------------------------------------------------------------- the pay sheet's two modes */

.split {
  display: grid;
  gap: var(--s-3);
}

.split__row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--s-2);
  padding-block-end: var(--s-2);
  border-block-end: 1px solid var(--line);
}

.split__who {
  min-inline-size: 5rem;
  font-weight: 600;
}

.split__field {
  display: grid;
  gap: var(--s-1);
}

.split__field input {
  min-block-size: 44px;
}

.split__share {
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}

.split .btn,
.split .method {
  min-block-size: 60px;
  min-inline-size: 60px;
}

.split__payers {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.split__count {
  font-size: 1.5rem;
  font-weight: 700;
  min-inline-size: 2ch;
  text-align: center;
}

.split__left {
  font-weight: 700;
}

.split__left--over {
  color: var(--stop);
}

/* ---------------------------------------------------------------- the reviews of R4 */

/* U-M4: the two modes are ONE column (the cash sheet's keypad column is not theirs), each card or payer one row. */
.pay__body.pay__body--split {
  grid-template-columns: minmax(0, 1fr);
}

.split,
.split__row,
.split__field,
.split__cash {
  min-inline-size: 0;
}

.split__row {
  display: grid;
  grid-template-columns: minmax(4.5rem, auto) minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
}

.split__field input {
  inline-size: 100%;
  min-inline-size: 0;
}

.split__cash {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: var(--s-3);
}

.split__change {
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 40rem) {
  .split__row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .split__cash {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* U-M3: a movement's time of day leads its row. */
.cash__time {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* U-M2: the movement a correction names. */
.cash__corrects {
  font-weight: 600;
}

/* U-L4: the policy's three choices, each a full-width row a finger can take. */
.cash__mode {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-block-size: 44px;
  padding-inline: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  background: var(--surface);
}

/* U-M3: the drawer report's heading row of each shift. */
.report__group th {
  text-align: start;
  background: var(--surface-2);
  font-weight: 600;
}