/* ============================================================================
   S7 — Money in/out.
   Served as _content/ClientSharedLibrary/css/money.css.
   Depends on tokens.css; expects bootstrap-bridge.css to load before it.

   Covers /expenses (ExpenseTracker + ExpenseCard + InputData +
   SavedTransactions), /retail-payment, /simple-checkout, /success, /cancel
   and /onboard.

   SPECIFICITY — same strategy as every segment since S2. Rules are prefixed
   .mp-money, added to each page's root, which reaches (0,2,0) and beats a
   component style block at equal weight without a blanket !important. Roots
   carry `class="mp-ui mp-money"`; .mp-ui pulls in the shared Bootstrap layer.

   WHAT THIS SEGMENT IS FOR
   Recording money that is not a sale, and finishing a payment. Two rhythms:

     · /expenses is a *ledger*. Someone sits down at the end of a shift and
       types in what was spent and what came in. It is read as a column of
       signed figures, so income and expense have to separate at a glance and
       the amounts have to line up.
     · /retail-payment, /success and /cancel are *moments of finality*. One
       decision on screen, no competing controls, and the amount is the
       largest thing on the page. These are the screens a customer can see
       over the counter.

   DENSITY: default throughout. Neither job is counter-speed tapping.

   THE GRADIENT IS GONE. /retail-payment painted itself with a stock
   #667eea -> #764ba2 gradient and set the header text to white against it.
   That ignores both themes and the business's own colour, and it is the one
   surface here a customer sees. It is now the ordinary page ground, with the
   cards carrying the structure.
   ========================================================================= */

/* ============================================================================
   1. Page frame
   ========================================================================= */
.mp-money {
  font-family: var(--mp-font);
  font-size: var(--mp-text-ui);
  color: var(--mp-ink);
  line-height: var(--mp-leading);
}

.mp-money h1,
.mp-money h2,
.mp-money h3 {
  color: var(--mp-ink);
  font-weight: var(--mp-weight-bold);
  text-wrap: balance;
  margin: 0 0 var(--mp-space-4);
}
.mp-money h2 { font-size: var(--mp-text-xl); }
.mp-money h3 { font-size: var(--mp-text-lg); }

/* Every figure on this screen is money. One rule, not thirty. */
.mp-money .amount,
.mp-money .item-total,
.mp-money .total-row span:last-child,
.mp-money .transaction-amount {
  font-family: var(--mp-font-num);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ============================================================================
   2. Payment result — /success and /cancel

   Both were full-viewport fixed overlays with their own white card. The
   overlay stays (it is genuinely modal — the sale is over), but PaymentSuccess
   used to reach out and set `body { overflow: hidden }`, which is a global
   scroll lock that outlives nothing and applies to the whole app while the
   component is mounted. A fixed, inset-0 container does not need it.
   ========================================================================= */
/* These three carry .mp-money on the element itself, not on an ancestor, so
   the selector has to be compound — a descendant combinator would miss. */
.mp-money.success-container,
.mp-money.payment-failed-container {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--mp-space-5);
  background: var(--mp-bg);
  z-index: var(--mp-z-overlay);
}

.mp-money .success-card,
.mp-money .payment-failed-content {
  width: 100%;
  max-width: 30rem;
  padding: var(--mp-space-7);
  text-align: center;
  background: var(--mp-surface);
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius-lg);
  box-shadow: var(--mp-shadow-lg);
  animation: mp-money-rise .35s ease-out;
}

.mp-money .success-icon,
.mp-money .icon-container { margin-bottom: var(--mp-space-5); line-height: 0; }
.mp-money .success-icon svg { width: 4.5rem; height: 4.5rem; color: var(--mp-good); }
/* /retail-payment's confirmation uses an icon font rather than an inline svg. */
.mp-money .success-icon i { font-size: 4rem; color: var(--mp-good); }
.mp-money .icon-container svg { width: 4.5rem; height: 4.5rem; color: var(--mp-danger); }

.mp-money .success-title { color: var(--mp-good); font-size: var(--mp-text-2xl); }
.mp-money .payment-failed-content h1 {
  color: var(--mp-ink);
  font-size: var(--mp-text-2xl);
  margin-bottom: var(--mp-space-3);
}

.mp-money .success-message,
.mp-money .payment-failed-content p {
  color: var(--mp-ink-2);
  font-size: var(--mp-text-md);
  margin-bottom: var(--mp-space-6);
}

/* The single control on each screen. Geometry and colour, since there is no
   Bootstrap variant underneath to collide with. */
.mp-money .btn-success-ok,
.mp-money .return-button {
  min-height: var(--mp-control-h);
  padding: 0 var(--mp-space-7);
  border: none;
  border-radius: var(--mp-radius-pill);
  font-size: var(--mp-text-md);
  font-weight: var(--mp-weight-medium);
  cursor: pointer;
  transition: background-color .2s ease, transform .15s ease;
}
/* Ink from the matching *-ink token, not a fixed white: both fills invert
   between themes. */
.mp-money .btn-success-ok { background: var(--mp-good);   color: var(--mp-good-ink); }
.mp-money .return-button  { background: var(--mp-accent); color: var(--mp-accent-ink); }
.mp-money .btn-success-ok:hover,
.mp-money .return-button:hover { transform: translateY(-1px); }
.mp-money .btn-success-ok:focus-visible,
.mp-money .return-button:focus-visible { outline: var(--mp-focus); outline-offset: 2px; }
.mp-money .btn-success-ok:active,
.mp-money .return-button:active { transform: none; }

.mp-money .spinner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mp-space-4);
  margin: var(--mp-space-5) 0;
}
.mp-money .spinner-container p { color: var(--mp-ink-2); font-size: var(--mp-text-md); margin: 0; }
/* Scoped. `.spinner-border` unqualified is Bootstrap's, used app-wide. */
.mp-money .spinner-container .spinner-border {
  width: 3.5rem;
  height: 3.5rem;
  border-width: .3rem;
}

@keyframes mp-money-rise {
  from { opacity: 0; transform: translateY(-1rem); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mp-money .success-card,
  .mp-money .payment-failed-content { animation: none; }
  .mp-money .btn-success-ok,
  .mp-money .return-button { transition: none; }
  .mp-money .btn-success-ok:hover,
  .mp-money .return-button:hover { transform: none; }
}

/* ============================================================================
   3. Retail checkout — /retail-payment
   ========================================================================= */
.mp-money.payment-container {
  min-height: 100dvh;
  padding: var(--mp-space-5) 0;
  background: var(--mp-bg);
}

.mp-money .payment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--mp-space-4);
  margin-bottom: var(--mp-space-5);
  color: var(--mp-ink);
}
/* The heading carried .text-white for the old gradient. The utility is removed
   from the markup; this is what it should have been reading all along. */
.mp-money .payment-header h3 { margin: 0; color: var(--mp-ink); }

.mp-money .order-summary-card,
.mp-money .payment-card {
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius-lg);
  background: var(--mp-surface);
  box-shadow: var(--mp-shadow-sm);
}

/* Scoped: `.card-header` bare is Bootstrap's, on every card in the app. */
.mp-money .order-summary-card > .card-header,
.mp-money .payment-card > .card-header {
  background: var(--mp-surface-2);
  border-bottom: 1px solid var(--mp-line);
  border-radius: var(--mp-radius-lg) var(--mp-radius-lg) 0 0;
  font-weight: var(--mp-weight-bold);
  color: var(--mp-ink);
}

.mp-money .order-item {
  display: flex;
  align-items: center;
  gap: var(--mp-space-4);
  padding: var(--mp-space-4) 0;
  border-bottom: 1px solid var(--mp-line);
}
.mp-money .order-item:last-of-type { border-bottom: none; }

.mp-money .item-image {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: var(--mp-radius-sm);
  background: var(--mp-surface-sunk);
}
.mp-money .item-image img { width: 100%; height: 100%; object-fit: cover; }
.mp-money .item-image .no-image {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mp-muted);
}

.mp-money .item-details { flex: 1; min-width: 0; }
.mp-money .item-name {
  font-weight: var(--mp-weight-bold);
  color: var(--mp-ink);
  margin-bottom: var(--mp-space-1);
}
.mp-money .item-quantity,
.mp-money .item-price { font-size: var(--mp-text-sm); color: var(--mp-ink-2); }
.mp-money .item-total { text-align: right; }

/* A struck-through price next to the price actually charged. The strike alone
   is the signal; do not also rely on the grey reading as "less important". */
.mp-money .original-total {
  text-decoration: line-through;
  color: var(--mp-muted);
  font-size: var(--mp-text-sm);
}
.mp-money .discounted-total,
.mp-money .final-total { font-weight: var(--mp-weight-bold); color: var(--mp-ink); }

.mp-money .order-totals {
  margin-top: var(--mp-space-4);
  padding-top: var(--mp-space-4);
  border-top: 1px solid var(--mp-line-strong);
}
.mp-money .total-row {
  display: flex;
  justify-content: space-between;
  gap: var(--mp-space-4);
  margin-bottom: var(--mp-space-2);
}
.mp-money .total-row.discount { color: var(--mp-good); }
.mp-money .total-row.tax { color: var(--mp-ink-2); font-size: var(--mp-text-sm); }
.mp-money .total-row.final {
  margin-top: var(--mp-space-3);
  padding-top: var(--mp-space-3);
  border-top: 1px solid var(--mp-line);
  font-size: var(--mp-text-lg);
  font-weight: var(--mp-weight-bold);
  color: var(--mp-ink);
}

/* Payment method picker. These are radio-like choices, so the selected one
   gets a filled ground and a heavier border, not colour alone. */
.mp-money .payment-methods {
  display: flex;
  flex-direction: column;
  gap: var(--mp-space-3);
}
.mp-money .payment-method {
  display: flex;
  align-items: center;
  gap: var(--mp-space-3);
  min-height: var(--mp-control-h);
  padding: var(--mp-space-4);
  border: 2px solid var(--mp-line);
  border-radius: var(--mp-radius);
  background: var(--mp-surface);
  color: var(--mp-ink);
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}
.mp-money .payment-method:hover { border-color: var(--mp-accent); background: var(--mp-surface-2); }
.mp-money .payment-method:focus-visible { outline: var(--mp-focus); outline-offset: 2px; }
.mp-money .payment-method.selected {
  border-color: var(--mp-accent);
  background: var(--mp-accent-soft);
  /* --mp-accent-ink pairs with the SOLID accent, not the soft tint. On the
     tint the readable ink is the accent itself. */
  color: var(--mp-accent);
  font-weight: var(--mp-weight-medium);
}
.mp-money .payment-method i,
.mp-money .payment-method svg { font-size: var(--mp-text-lg); flex-shrink: 0; }

.mp-money .cash-payment .form-control {
  font-family: var(--mp-font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--mp-text-md);
  min-height: var(--mp-control-h);
}
.mp-money .change-amount {
  padding: var(--mp-space-3);
  border-radius: var(--mp-radius-sm);
  text-align: center;
  background: var(--mp-good-soft);
  color: var(--mp-good);
  font-family: var(--mp-font-num);
  font-variant-numeric: tabular-nums;
  font-weight: var(--mp-weight-bold);
}

.mp-money .success-modal {
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius-lg);
  background: var(--mp-surface);
}
.mp-money .order-number {
  margin-top: var(--mp-space-4);
  padding: var(--mp-space-3);
  border-radius: var(--mp-radius-sm);
  background: var(--mp-surface-sunk);
  color: var(--mp-ink);
  font-family: var(--mp-font-num);
  font-weight: var(--mp-weight-bold);
}

/* ============================================================================
   4. Expense ledger — /expenses
   ========================================================================= */
.mp-money .saved-transactions-container { margin-bottom: var(--mp-space-4); }

/* The box has to be BOUNDED for the header to stick — the same trap as the
   catalogue and stock sheets. `.table-responsive` used to carry the height,
   unscoped, which set a 300px ceiling on every scrollable table in the app. */
.mp-money .saved-transactions-scroll {
  overflow: auto;
  max-height: 22rem;
  overscroll-behavior: contain;
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius);
  background: var(--mp-surface);
}
.mp-money .saved-transactions-container .table {
  margin-bottom: 0;
  font-size: var(--mp-text-sm);
}
.mp-money .saved-transactions-container .table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--mp-surface-2);
  color: var(--mp-ink-2);
  font-size: .78em;
  font-weight: var(--mp-weight-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Money in and money out. A 3px rail plus the sign on the figure, so the two
   never depend on hue alone. */
.mp-money .expense-row > td:first-child { box-shadow: inset 3px 0 0 var(--mp-danger); }
.mp-money .income-row  > td:first-child { box-shadow: inset 3px 0 0 var(--mp-good); }

.mp-money .transaction-name {
  display: block;
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--mp-weight-medium);
}

.mp-money .custom-input {
  min-height: var(--mp-control-h);
  width: 7.5rem;
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius-sm);
  background: var(--mp-surface);
  color: var(--mp-ink);
  font-family: var(--mp-font-num);
  font-variant-numeric: tabular-nums;
}
.mp-money .custom-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--mp-space-2);
}
/* Scoped: `.input-group .btn` bare reshapes every input group in the app. */
.mp-money .custom-btn.input-group > .btn {
  margin-left: 0;
  width: auto;
  min-width: 8rem;
  min-height: var(--mp-control-h);
  text-align: center;
}

/* The expense/income editor. This carried its border colour, radius, shadow
   and a #ffffe0 "new ingredient" ground inline — the yellow is unreadable on
   the dark theme, and the border read from --bs-danger/--bs-success, which do
   not exist as theme-aware values on either host. */
.mp-money .expense-input-card {
  border: 2px solid var(--mp-line);
  border-radius: var(--mp-radius-lg);
  background: transparent;
  box-shadow: var(--mp-shadow-sm);
}
.mp-money .expense-input-card.is-expense { border-color: var(--mp-danger); }
.mp-money .expense-input-card.is-income  { border-color: var(--mp-good); }
.mp-money .expense-input-card.is-new-ingredient { background: var(--mp-warn-soft); }

/* ============================================================================
   5. The expense sheet

   ExpenseCard opens its editor as a full-screen sheet, not a Bootstrap modal.
   It used to also ship overrides for .modal, .modal-dialog, .modal.show and
   .modal-backdrop — none of which its own markup used, and all of which
   applied to every real modal in the app while the card was mounted. They are
   gone, along with the stray always-rendered .modal-backdrop element they
   existed to hide.
   ========================================================================= */
.mp-money .fullscreen-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  z-index: calc(var(--mp-z-overlay) - 1);
}
.mp-money .fullscreen-modal {
  position: fixed;
  inset: 0;
  z-index: var(--mp-z-overlay);
  display: flex;
  flex-direction: column;
  padding: var(--mp-space-4);
  overflow-y: auto;
  background: var(--mp-surface);
  color: var(--mp-ink);
}
.mp-money .fullscreen-modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mp-space-4);
  padding-bottom: var(--mp-space-4);
  border-bottom: 1px solid var(--mp-line);
}
.mp-money .fullscreen-modal .modal-title {
  margin: 0;
  font-size: var(--mp-text-lg);
  font-weight: var(--mp-weight-bold);
  color: var(--mp-ink);
}
.mp-money .fullscreen-modal .modal-body { padding-top: var(--mp-space-4); }

/* ============================================================================
   6. Snackbar
   ========================================================================= */
.mp-money .snackbar {
  position: fixed;
  bottom: -6rem;
  left: 50%;
  transform: translateX(-50%);
  min-width: 18rem;
  max-width: 31rem;
  padding: var(--mp-space-4) var(--mp-space-5);
  border-radius: var(--mp-radius);
  background: rgba(0, 0, 0, .85);
  color: #fff;
  opacity: 0;
  z-index: calc(var(--mp-z-overlay) + 10);
  box-shadow: var(--mp-shadow-lg);
  transition: bottom .4s cubic-bezier(.4, 0, .2, 1), opacity .4s ease;
}
.mp-money .snackbar.show { bottom: var(--mp-space-5); opacity: 1; }
.mp-money .snackbar-content { display: flex; align-items: center; gap: var(--mp-space-3); }
.mp-money .snackbar-icon { flex-shrink: 0; }
.mp-money .snackbar-message {
  font-size: var(--mp-text-sm);
  line-height: var(--mp-leading-tight);
  font-weight: var(--mp-weight-medium);
}
/* Literal colours, deliberately: the snackbar is a dark chip on both themes,
   so its ground does not follow the surface tokens. */
.mp-money .snackbar.success { background: rgba(21, 128, 61, .95); }
.mp-money .snackbar.error   { background: rgba(185, 28, 28, .95); }
.mp-money .snackbar.info    { background: rgba(3, 105, 161, .95); }

@media (prefers-reduced-motion: reduce) {
  .mp-money .snackbar { transition: none; }
}

/* ============================================================================
   7. Loading

   `.progress-bar` unqualified is Bootstrap's, and ExpenseTracker's version
   made it 4px tall with a grey ground — applied to every progress bar in the
   app while the tracker was open. Renamed to the thing it actually is.
   ========================================================================= */
.mp-money .loading-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--mp-space-5);
}
.mp-money .loading-track {
  width: 100%;
  height: 4px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--mp-surface-sunk);
}
.mp-money .loading-track-inner {
  height: 100%;
  background: var(--mp-accent);
  transform-origin: 0% 50%;
  animation: mp-money-progress 1s infinite linear;
}
.mp-money .loading-text {
  margin-top: var(--mp-space-4);
  text-align: center;
  color: var(--mp-ink-2);
  font-size: var(--mp-text-md);
}

@keyframes mp-money-progress {
  0%   { transform: translateX(0) scaleX(0); }
  40%  { transform: translateX(0) scaleX(.4); }
  100% { transform: translateX(100%) scaleX(.5); }
}
@media (prefers-reduced-motion: reduce) {
  .mp-money .loading-track-inner { animation: none; transform: scaleX(.4); }
}

/* ============================================================================
   8. Responsive
   ========================================================================= */
@media (max-width: 767.98px) {
  .mp-money.payment-container { padding: var(--mp-space-4) 0; }
  .mp-money .payment-header { flex-direction: column; text-align: center; }

  .mp-money .order-item { flex-wrap: wrap; gap: var(--mp-space-3); }
  .mp-money .item-total { width: 100%; text-align: left; margin-top: var(--mp-space-2); }

  .mp-money .saved-transactions-scroll { max-height: 18rem; }
  .mp-money .saved-transactions-container .table { font-size: var(--mp-text-xs); }
  .mp-money .transaction-name { max-width: 9rem; }

  .mp-money .success-card,
  .mp-money .payment-failed-content { padding: var(--mp-space-5); }
  .mp-money .success-title { font-size: var(--mp-text-xl); }
  .mp-money .btn-success-ok,
  .mp-money .return-button { width: 100%; padding: 0 var(--mp-space-4); }

  .mp-money .custom-btn { flex-wrap: wrap; }
  .mp-money .custom-btn.input-group > .btn { flex: 1 1 8rem; }
}

@media (max-width: 639.98px) {
  .mp-money .snackbar {
    left: var(--mp-space-4);
    right: var(--mp-space-4);
    transform: none;
    min-width: 0;
    max-width: none;
  }
}