/* Admin-only styling. Everything shared with the kitchen interface lives in
   base.css; this file holds the few things that exist only on this side.

   Rules that hold throughout:
   - Logical properties only, so the Urdu right-to-left view needs no mirrored
     stylesheet.
   - Rows wrap instead of scrolling. At 390px a timesheet row has a name, two
     minute figures, a total and a button on it, and a sideways scroll on a
     screen where money is read is how a figure gets missed.
   - No single word of a heading is styled differently from the rest of it. */

#screen .row {
  flex-wrap: wrap;
  row-gap: 8px;
}

/* An input inside a row takes its own line on a phone and sits inline once
   there is room for it. */
#screen .row input,
#screen .row select {
  flex: 1 1 10rem;
  min-inline-size: 0;
}

#screen .row button {
  flex: 0 0 auto;
}

#screen .row > .grow {
  flex: 1 1 100%;
}

@media (min-inline-size: 34rem) {
  #screen .row > .grow {
    flex: 1 1 auto;
  }
}

#screen textarea {
  inline-size: 100%;
  min-block-size: 6rem;
  margin-block-end: 12px;
}

#screen label {
  display: block;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* Pay and Spend are different kinds of money and must never be read as one
   figure, so each carries its own standing mark down the leading edge. */
[data-testid="timesheet-row"] {
  border-inline-start: 4px solid var(--coriander);
  padding-inline-start: 10px;
}

[data-testid="timesheet-row"][data-review="yes"] {
  border-inline-start-color: var(--clay);
}

[data-testid="spend-month"],
[data-testid="spend-store"],
[data-testid="spend-kind"],
[data-testid="spend-expense"] {
  border-inline-start: 4px solid var(--haldi);
  padding-inline-start: 10px;
}

[data-testid="spend-separate"] {
  display: block;
  background: var(--haldi-soft);
}

[data-testid="exact-minutes"],
[data-testid="payable-minutes"] {
  min-inline-size: 4rem;
  text-align: end;
  font-variant-numeric: tabular-nums;
}

/* The one-time access code. Large, spaced, and readable off a phone held at
   arm's length, because it is read aloud or copied onto paper once. */
.code-once {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.6rem;
  letter-spacing: 0.18em;
  padding-block: 12px;
  padding-inline: 14px;
  background: var(--haldi-soft);
  border: 1px solid var(--haldi);
  border-radius: var(--radius);
  margin-block-end: 12px;
  word-break: break-all;
}

audio {
  max-inline-size: 100%;
}

[data-testid="not-available"] {
  font-style: italic;
}