/* Payout desk.

   Same palette as web/qr-page and apps/vendor_app/lib/theme.dart — one
   product, one identity, even on the surface only an operator sees. What is
   different is the shape: the QR page is a phone held at a stall, this is a
   laptop at a desk with a banking tab open next to it. So: wider column,
   denser rows, and account numbers in the monospace stack because they are
   read a digit at a time and transcribed. */

:root {
  --chalk-black: #1e1a16;
  --chalk-white: #f4efe4;
  --turmeric: #e7a23d;
  --tandoor-teal: #3e7c6b;
  --chili: #c1432b;
  --steel: #8b8378;
  --chalk-panel: #272220;
  --chalk-line: #3a342f;
  --mono: ui-monospace, "SF Mono", "Roboto Mono", monospace;
}

/* Same guard as the QR page: the `hidden` attribute means display:none in the
   UA stylesheet and loses to any author rule setting `display`, so an element
   with both `hidden` and `display: flex` stays visible. This page toggles
   `hidden` on flex containers, so it is one rule away from the bug the QR page
   shipped — a fee row that stayed on screen for customers it did not apply to.
   Cheaper to state once than to remember at every call site. */
[hidden] {
  display: none !important;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--chalk-white);
  background: var(--chalk-black);
  min-height: 100vh;
  line-height: 1.45;
}

#app {
  max-width: 720px;
  margin: 0 auto;
  padding: 1.5rem 1rem 4rem;
}

a,
button,
input,
[tabindex] {
  outline-offset: 2px;
}
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--turmeric);
}

/* Masthead ---------------------------------------------------------------- */

.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--chalk-line);
}

h1 {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

h2 {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 0.6rem;
}

h3 {
  font-size: 1.05rem;
  font-weight: 700;
}

.lede {
  color: var(--steel);
  margin-bottom: 1.5rem;
  max-width: 46ch;
}

.muted {
  color: var(--steel);
  font-size: 0.875rem;
}

/* Forms ------------------------------------------------------------------- */

label {
  display: block;
  margin-bottom: 0.9rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--steel);
}

input {
  display: block;
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.7rem 0.8rem;
  font: inherit;
  color: var(--chalk-white);
  background: var(--chalk-panel);
  border: 1px solid var(--chalk-line);
  border-radius: 8px;
}
input:focus {
  border-color: var(--turmeric);
}

button {
  font: inherit;
  font-weight: 700;
  color: var(--chalk-black);
  background: var(--turmeric);
  border: 0;
  border-radius: 8px;
  padding: 0.65rem 1.1rem;
  cursor: pointer;
}
button:disabled {
  color: var(--steel);
  background: var(--chalk-line);
  cursor: not-allowed;
}

#sign-in-form {
  max-width: 22rem;
}
#sign-in-button {
  width: 100%;
  margin-top: 0.4rem;
}

/* A button that reads as a control, not a call to action — Show, Hide, Copy,
   Sign out. These sit inside dense rows and must not compete with the one
   button on the row that moves money's record forward. */
.link-button {
  padding: 0.15rem 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--turmeric);
  background: none;
  border-radius: 5px;
}
.link-button:hover {
  background: var(--chalk-line);
}

/* Messages ---------------------------------------------------------------- */

.error {
  color: var(--chili);
  font-size: 0.875rem;
  margin-top: 0.6rem;
}

.notice {
  padding: 0.7rem 0.9rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  color: var(--tandoor-teal);
  background: var(--chalk-panel);
  border-left: 3px solid var(--tandoor-teal);
  border-radius: 0 8px 8px 0;
}

.panel {
  padding: 1rem;
  margin-bottom: 1.5rem;
  background: var(--chalk-panel);
  border-radius: 10px;
}

/* Stragglers mean somebody is owed money the main list is not showing. That
   is the one thing on this page that should look wrong. */
.panel--warn {
  border-left: 3px solid var(--chili);
}
.panel--warn h2 {
  color: var(--chili);
}
#straggler-list {
  margin-top: 0.7rem;
  padding-left: 1.1rem;
  font-size: 0.9rem;
}
#straggler-list li {
  margin-bottom: 0.3rem;
}

/* The list ---------------------------------------------------------------- */

.payout-list {
  list-style: none;
}

.payout {
  padding: 1.1rem;
  margin-bottom: 1rem;
  background: var(--chalk-panel);
  border: 1px solid var(--chalk-line);
  border-radius: 10px;
}

.payout__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

/* The number the operator is about to transfer. Monospace and turmeric: it is
   the one figure on the row that has to be read exactly right. */
.payout__amount {
  font-family: var(--mono);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--turmeric);
  white-space: nowrap;
}

.bank {
  margin: 0.9rem 0;
  padding: 0.7rem 0.85rem;
  background: var(--chalk-black);
  border-radius: 8px;
}

.bank__row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.25rem 0;
  flex-wrap: wrap;
}

.bank__label {
  min-width: 4.5rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--steel);
}

.bank__value {
  font-family: var(--mono);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  word-break: break-all;
}

.mark-paid {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  flex-wrap: wrap;
}
.mark-paid input {
  flex: 1 1 12rem;
  margin-top: 0;
  width: auto;
}
.mark-paid button {
  background: var(--tandoor-teal);
  color: var(--chalk-white);
  white-space: nowrap;
}
.mark-paid button:disabled {
  background: var(--chalk-line);
  color: var(--steel);
}
.mark-paid .error {
  flex-basis: 100%;
  margin-top: 0.2rem;
}

@media (max-width: 480px) {
  .payout__head {
    flex-direction: column;
    gap: 0.2rem;
  }
}

/* The refresh control ------------------------------------------------------

   Sits above the list rather than beside the heading: it is the thing that
   makes the numbers below it true, and an operator should meet it before they
   read a figure they might otherwise assume is live. */
.refresh {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
#refresh {
  background: none;
  color: var(--turmeric);
  border: 1px solid var(--chalk-line);
}
#refresh:hover:not(:disabled) {
  border-color: var(--turmeric);
}
#refresh:disabled {
  color: var(--steel);
  border-color: var(--chalk-line);
  background: none;
}

.notice--error {
  color: var(--chili);
  border-left-color: var(--chili);
}

/* Fee model ---------------------------------------------------------------

   Sits between the bank details and the mark-as-paid action: it is about this
   vendor rather than about this batch, and must not read as part of the
   payment being recorded. */
.fee-model {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 0 0 0.9rem;
}
.fee-model__select {
  font: inherit;
  font-size: 0.9rem;
  color: var(--ink, var(--chalk-white));
  background: var(--chalk-black);
  border: 1px solid var(--chalk-line);
  border-radius: 8px;
  padding: 0.4rem 0.55rem;
}
.fee-model__select:disabled { color: var(--steel); }
.fee-model__note { font-size: 0.78rem; color: var(--steel); }

/* Platform settings --------------------------------------------------------

   Above the payout list because it changes what every vendor's customers are
   charged. Deliberately plain: a switch that decides who pays a fee should not
   look like a preference. */
.settings__row {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  cursor: pointer;
}
.settings__row input {
  width: auto;
  margin: 0.15rem 0 0;
  accent-color: var(--turmeric);
}
.settings__row strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
}
.settings__note {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.85rem;
  color: var(--steel);
}