/* ============================================================================
   Bootstrap bridge — shared across segments.
   Served as _content/ClientSharedLibrary/css/bootstrap-bridge.css.
   Depends on tokens.css. Load AFTER a segment's own file is not required; load
   it BEFORE any segment file that needs to override a rule here.

   WHY THIS FILE EXISTS
   S3 discovered that several pages are built almost entirely from stock
   Bootstrap components with no CSS of their own, so they stay light-mode
   Bootstrap while everything around them follows the theme. S3 solved that
   with a ~170-line layer at the bottom of orders.css scoped to .mp-orders.
   S6 needs the identical layer. Rather than copy it per segment, it lives here
   once, scoped to **.mp-ui** — a marker class a converted page root carries in
   addition to its segment class:

       <div class="mp-ui mp-report" data-density="…">

   S3 still carries its own copy inside orders.css. That copy is byte-identical
   apart from the prefix and is deliberately left in place — folding S3 onto
   .mp-ui means re-verifying five converted pages for cascade order, which is a
   separate change from S6. Do it in one pass when S4/S5 land, then delete
   orders.css section 8.

   REAL PROPERTY RULES, NOT --bs-* OVERRIDES
   The web host loads Bootstrap 5.3.3 from the CDN; POSMauiApp ships a local
   Bootstrap **5.1.0**. The --bs-* runtime theming variables only exist from
   5.3, so a variable bridge would theme the browser and silently do nothing in
   the MAUI WebView. Property rules work identically on both.

   Bootstrap *utilities* (.text-white, .p-3, .text-end …) are !important and
   cannot be out-specified from here. Those get removed from the markup.
   ========================================================================= */

.mp-ui .btn {
  --bs-btn-focus-box-shadow: var(--mp-focus);   /* harmless on 5.1, used on 5.3 */
  min-height: var(--mp-control-h);
  border-radius: var(--mp-radius-sm);
  font-family: inherit;
  font-size: var(--mp-text-ui);
  font-weight: var(--mp-weight-medium);
  line-height: var(--mp-leading-tight);
}
.mp-ui .btn-sm { min-height: calc(var(--mp-control-h) - 6px); font-size: var(--mp-text-sm); }
.mp-ui .btn:focus-visible { outline: 2px solid var(--mp-accent); outline-offset: 2px; box-shadow: none; }

.mp-ui .btn-primary {
  background-color: var(--mp-accent);
  border-color: var(--mp-accent);
  color: var(--mp-accent-ink);
}
.mp-ui .btn-primary:hover,
.mp-ui .btn-primary:active {
  background-color: var(--mp-accent-hover);
  border-color: var(--mp-accent-hover);
  color: var(--mp-accent-ink);
}
.mp-ui .btn-secondary {
  background-color: var(--mp-surface-2);
  border-color: var(--mp-line-strong);
  color: var(--mp-ink);
}
.mp-ui .btn-secondary:hover { background-color: var(--mp-line); color: var(--mp-ink); }
.mp-ui .btn-outline-secondary {
  background-color: transparent;
  border-color: var(--mp-line-strong);
  color: var(--mp-ink-2);
}
.mp-ui .btn-outline-secondary:hover { background-color: var(--mp-surface-2); color: var(--mp-ink); }
.mp-ui .btn-outline-primary {
  background-color: transparent;
  border-color: var(--mp-accent);
  color: var(--mp-accent);
}
.mp-ui .btn-outline-primary:hover { background-color: var(--mp-accent-soft); color: var(--mp-accent); }
.mp-ui .btn-outline-danger {
  background-color: transparent;
  border-color: var(--mp-danger);
  color: var(--mp-danger);
}
.mp-ui .btn-outline-danger:hover { background-color: var(--mp-danger-soft); color: var(--mp-danger); }
.mp-ui .btn-link { color: var(--mp-accent); }

/* Form controls */
.mp-ui .form-control,
.mp-ui .form-select,
.mp-ui .input-group-text {
  background-color: var(--mp-surface);
  color: var(--mp-ink);
  border-color: var(--mp-line-strong);
  border-radius: var(--mp-radius-sm);
  font-family: inherit;
  font-size: var(--mp-text-ui);
  min-height: var(--mp-control-h);
}
.mp-ui .form-control-sm,
.mp-ui .form-select-sm { min-height: calc(var(--mp-control-h) - 6px); font-size: var(--mp-text-sm); }
/* --mp-ink-2, not --mp-muted: muted on --mp-surface-2 is 4.20:1 in light mode,
   just under AA, and the addon (a currency symbol, a unit) is content. */
.mp-ui .input-group-text { background-color: var(--mp-surface-2); color: var(--mp-ink-2); }
.mp-ui .form-control::placeholder { color: var(--mp-muted); opacity: 1; }
.mp-ui .form-control:focus,
.mp-ui .form-select:focus {
  background-color: var(--mp-surface);
  color: var(--mp-ink);
  border-color: var(--mp-accent);
  box-shadow: var(--mp-focus);
}
.mp-ui .form-control:disabled,
.mp-ui .form-control[readonly] { background-color: var(--mp-surface-2); color: var(--mp-muted); }
.mp-ui .form-label { color: var(--mp-ink-2); font-size: var(--mp-text-sm); font-weight: var(--mp-weight-medium); }
.mp-ui .form-check-label { color: var(--mp-ink-2); }
.mp-ui .form-check-input { background-color: var(--mp-surface); border-color: var(--mp-line-strong); }
.mp-ui .form-check-input:checked { background-color: var(--mp-accent); border-color: var(--mp-accent); }

/* Tables, cards, alerts */
.mp-ui .table {
  color: var(--mp-ink-2);
  border-color: var(--mp-line);
}
.mp-ui .table > thead { color: var(--mp-muted); }
.mp-ui .table > :not(caption) > * > * {
  background-color: transparent;
  border-bottom-color: var(--mp-line);
  color: inherit;
}
.mp-ui .table-hover > tbody > tr:hover > * { background-color: var(--mp-surface-2); color: var(--mp-ink); }
.mp-ui .table-light,
.mp-ui .table > thead.table-light > tr > * {
  --bs-table-bg: var(--mp-surface-2);
  background-color: var(--mp-surface-2);
  color: var(--mp-muted);
}

.mp-ui .card {
  background-color: var(--mp-surface);
  border-color: var(--mp-line);
  border-radius: var(--mp-radius);
  color: var(--mp-ink);
}
.mp-ui .card-header,
.mp-ui .card-footer { background-color: var(--mp-surface-2); border-color: var(--mp-line); color: var(--mp-ink-2); }

.mp-ui .alert { border-radius: var(--mp-radius-sm); font-size: var(--mp-text-ui); }
.mp-ui .alert-danger  { background-color: var(--mp-danger-soft); color: var(--mp-danger); border-color: var(--mp-danger); }
.mp-ui .alert-success { background-color: var(--mp-good-soft);   color: var(--mp-good);   border-color: var(--mp-good); }
.mp-ui .alert-warning { background-color: var(--mp-warn-soft);   color: var(--mp-warn);   border-color: var(--mp-warn); }
.mp-ui .alert-info    { background-color: var(--mp-info-soft);   color: var(--mp-info);   border-color: var(--mp-info); }

.mp-ui .badge {
  border-radius: var(--mp-radius-pill);
  font-family: var(--mp-font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--mp-text-xs);
  font-weight: var(--mp-weight-bold);
}
/* .bg-* and .text-* are Bootstrap utilities and !important, so these do not
   try to recolour them — a badge that must follow the theme drops the utility
   in the markup and takes .ops-chip instead. */

/* .btn-xs is used six times in DeliveryManagementPanel but does not exist in
   Bootstrap at any version — those row buttons were silently rendering at full
   .btn size inside table cells. Defined here rather than removed from the
   markup: a smaller-than-sm button is genuinely what a table row wants. */
.mp-ui .btn-xs {
  min-height: calc(var(--mp-control-h) - 12px);
  padding: 0 var(--mp-space-2);
  font-size: var(--mp-text-xs);
  border-radius: var(--mp-radius-sm);
}

/* Real Bootstrap modals — DeliveryManagementPanel uses five of them. */
.mp-ui .modal-content {
  background-color: var(--mp-surface);
  color: var(--mp-ink);
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius-lg);
  box-shadow: var(--mp-shadow-lg);
}
.mp-ui .modal-header,
.mp-ui .modal-footer {
  background-color: var(--mp-surface-2);
  border-color: var(--mp-line);
}
.mp-ui .modal-title { color: var(--mp-ink); font-size: var(--mp-text-lg); font-weight: var(--mp-weight-bold); }
.mp-ui .modal-body { color: var(--mp-ink-2); }
.mp-ui .modal-backdrop { background-color: rgba(9, 12, 17, .62); }

.mp-ui .list-group-item {
  background-color: var(--mp-surface);
  color: var(--mp-ink-2);
  border-color: var(--mp-line);
}

.mp-ui .spinner-border { color: var(--mp-accent); }
.mp-ui .btn-close:focus-visible { outline: 2px solid var(--mp-accent); outline-offset: 2px; box-shadow: none; }

/* .text-muted is !important-free in Bootstrap 5.1 but variable-driven in 5.3;
   pinning the colour here keeps it legible on the dark surface in both. */
.mp-ui .text-muted { color: var(--mp-muted) !important; }


/* ============================================================================
   Additions beyond the S3 set — variants the reporting segment uses.
   ========================================================================= */

/* Zebra striping. Bootstrap implements it with --bs-table-striped-bg through a
   box-shadow inset on 5.3 and a plain background on 5.1, so both are pinned. */
.mp-ui .table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: var(--mp-surface-2);      /* 5.1 */
  --bs-table-striped-bg: var(--mp-surface-2);     /* 5.3 */
  background-color: var(--mp-surface-2);
  color: var(--mp-ink-2);
  box-shadow: none;
}

/* Emphasis rows: section headers and subtotals inside a table. */
.mp-ui .table-secondary > *,
.mp-ui .table-secondary th,
.mp-ui .table-secondary td,
.mp-ui .table-active > * {
  --bs-table-accent-bg: var(--mp-surface-sunk);
  --bs-table-bg: var(--mp-surface-sunk);
  background-color: var(--mp-surface-sunk);
  color: var(--mp-ink);
  box-shadow: none;
}

/* .table-dark was a full-black header band. It becomes the same header
   treatment every other converted table uses, so headers match across reports. */
.mp-ui .table-dark,
.mp-ui .table-dark > *,
.mp-ui .table-dark th {
  --bs-table-bg: var(--mp-surface-2);
  background-color: var(--mp-surface-2);
  color: var(--mp-ink);
  border-color: var(--mp-line);
}

.mp-ui .table-bordered > :not(caption) > * ,
.mp-ui .table-bordered > :not(caption) > * > * { border-color: var(--mp-line); }
.mp-ui .table-sm > :not(caption) > * > * { padding: var(--mp-space-1) var(--mp-space-2); }

/* table-responsive is the only thing standing between a wide report and a
   sideways-scrolling page body, so give it the scroll affordance explicitly. */
.mp-ui .table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Ink comes from a token, not a literal white. The dark theme's --mp-good is a
   light green picked to be readable AS text on the page ground; white on it is
   2.25:1. --mp-good-ink / --mp-danger-ink flip with the theme, the same way
   --mp-accent-ink already did for .btn-primary. */
.mp-ui .btn-success {
  background-color: var(--mp-good);
  border-color: var(--mp-good);
  color: var(--mp-good-ink);
}
.mp-ui .btn-success:hover { filter: brightness(1.08); color: var(--mp-good-ink); }
.mp-ui .btn-danger {
  background-color: var(--mp-danger);
  border-color: var(--mp-danger);
  color: var(--mp-danger-ink);
}
.mp-ui .btn-danger:hover { filter: brightness(1.08); color: var(--mp-danger-ink); }
.mp-ui .btn-light {
  background-color: var(--mp-surface);
  border-color: var(--mp-line-strong);
  color: var(--mp-ink);
}
.mp-ui .btn-light:hover { background-color: var(--mp-surface-2); color: var(--mp-ink); }

.mp-ui .btn-group > .btn { border-radius: 0; }
.mp-ui .btn-group > .btn:first-child { border-radius: var(--mp-radius-sm) 0 0 var(--mp-radius-sm); }
.mp-ui .btn-group > .btn:last-child  { border-radius: 0 var(--mp-radius-sm) var(--mp-radius-sm) 0; }

/* .btn-check toggles: the checked label is the selected state and must read as
   selected without relying on Bootstrap's own variant colours. */
.mp-ui .btn-check:checked + .btn,
.mp-ui .btn-check:checked + label.btn {
  background-color: var(--mp-accent);
  border-color: var(--mp-accent);
  color: var(--mp-accent-ink);
}
.mp-ui .btn-check:focus-visible + .btn { outline: 2px solid var(--mp-accent); outline-offset: 2px; }

.mp-ui .form-select option { background-color: var(--mp-surface); color: var(--mp-ink); }
.mp-ui hr { border-color: var(--mp-line); opacity: 1; }
.mp-ui .dropdown-menu {
  background-color: var(--mp-surface);
  border-color: var(--mp-line);
  color: var(--mp-ink);
}
.mp-ui .dropdown-item { color: var(--mp-ink-2); }
.mp-ui .dropdown-item:hover { background-color: var(--mp-surface-2); color: var(--mp-ink); }

/* ============================================================================
   Pager  (Pagination.razor)
   ------------------------------------------------------------------------
   This lives in the shared layer, not in a segment stylesheet, because the
   one component is mounted by three of them: /RegisteredUsers (S8),
   OnlineSalesReport (S6) and /manage-businesses (S9).

   IT USED TO BE UNSTYLED MOST OF THE TIME. Its rules referenced --primary,
   --primary-light, --primary-dark, --gray, --gray-light and --dark, none of
   which it defines. The only place in the codebase that defines them is
   SearchFilter.razor's own `:root` block — so the pager took its colours from
   a DIFFERENT COMPONENT, and picked up indigo only on the pages where that
   component happened to be mounted at the same time. Everywhere else the
   buttons had no background, no border colour and inherited text.

   The selected page also read `color: rgb(240, 116, 15)` — orange on an
   undefined background — and its hover state `rgb(146, 6, 6)`. Both are
   accent/accent-ink now.
   ========================================================================= */
.mp-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--mp-space-3);
  margin-top: var(--mp-space-5);
  font-family: var(--mp-font);
  font-size: var(--mp-text-ui);
  color: var(--mp-ink);
}

.mp-pager .pagination-info {
  font-size: var(--mp-text-sm);
  color: var(--mp-muted);
}

.mp-pager .pagination-controls {
  display: flex;
  align-items: center;
  gap: var(--mp-space-1);
}

.mp-pager .pagination-btn {
  min-width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--mp-space-2);
  background-color: var(--mp-surface);
  border: 1px solid var(--mp-line-strong);
  border-radius: var(--mp-radius-sm);
  color: var(--mp-ink-2);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.mp-pager .pagination-btn:hover:not(:disabled) {
  background-color: var(--mp-accent-soft);
  border-color: var(--mp-accent);
  color: var(--mp-accent);
}

.mp-pager .pagination-btn:focus-visible {
  outline: 2px solid var(--mp-accent);
  outline-offset: 2px;
}

.mp-pager .pagination-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.mp-pager .pagination-btn-active,
.mp-pager .pagination-btn-active:hover:not(:disabled) {
  background-color: var(--mp-accent);
  border-color: var(--mp-accent);
  color: var(--mp-accent-ink);
  font-weight: var(--mp-weight-bold);
}

.mp-pager .pagination-ellipsis {
  padding: 0 var(--mp-space-1);
  color: var(--mp-muted);
}

.mp-pager .page-size-control {
  display: flex;
  align-items: center;
  gap: var(--mp-space-2);
}

.mp-pager .page-size-control select {
  width: 5rem;
  padding: var(--mp-space-1) var(--mp-space-2);
  background-color: var(--mp-surface);
  border: 1px solid var(--mp-line-strong);
  border-radius: var(--mp-radius-sm);
  color: var(--mp-ink);
}

@media (max-width: 767.98px) {
  .mp-pager { flex-direction: column; align-items: center; }
  .mp-pager .pagination-info { text-align: center; }
}

/* ============================================================================
   Search + date filter  (SearchFilter.razor)
   ------------------------------------------------------------------------
   Shared, like the pager above: mounted by /staff (S8) and by the stock
   correction sheet (S5).

   ITS <style> BLOCK DEFINED A GLOBAL :root. Twelve generic names — --primary,
   --danger, --success, --gray, --dark and the rest — declared at document
   scope by a search box. That is what the pager was quietly reading its
   colours from, so the pager only looked right on the pages where this
   component happened to be mounted too. Both now take tokens.
   ========================================================================= */
.mp-search {
  width: 100%;
  margin-bottom: var(--mp-gap);
  padding: var(--mp-space-4);
  background-color: var(--mp-surface);
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius);
  font-family: var(--mp-font);
  color: var(--mp-ink);
}

.mp-search .search-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--mp-space-4);
}

.mp-search .dashboard-input-group {
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--mp-surface);
  border: 1px solid var(--mp-line-strong);
  border-radius: var(--mp-radius-sm);
}

.mp-search .dashboard-input-group:focus-within {
  border-color: var(--mp-accent);
  box-shadow: var(--mp-focus);
}

.mp-search .input-group-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--mp-space-3);
  color: var(--mp-muted);
}

.mp-search .dashboard-input {
  flex: 1;
  min-width: 0;
  height: var(--mp-control-h);
  padding: 0 var(--mp-space-3);
  border: none;
  outline: none;
  background-color: transparent;
  color: var(--mp-ink);
  font-family: inherit;
  font-size: var(--mp-text-ui);
}

.mp-search .dashboard-input::placeholder { color: var(--mp-muted); }

/* The date fields sit outside the input group, so they need their own frame. */
.mp-search .date-group .dashboard-input {
  width: 100%;
  background-color: var(--mp-surface);
  border: 1px solid var(--mp-line-strong);
  border-radius: var(--mp-radius-sm);
  font-family: var(--mp-font-num);
}

.mp-search .date-group .dashboard-input:focus {
  border-color: var(--mp-accent);
  box-shadow: var(--mp-focus);
}

.mp-search .dashboard-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mp-space-1);
  height: var(--mp-control-h);
  padding: 0 var(--mp-space-4);
  border: none;
  border-radius: var(--mp-radius-sm);
  font-family: inherit;
  font-size: var(--mp-text-ui);
  font-weight: var(--mp-weight-medium);
  cursor: pointer;
}

.mp-search .dashboard-btn-primary {
  background-color: var(--mp-accent);
  color: var(--mp-accent-ink);
}
.mp-search .dashboard-btn-primary:hover { background-color: var(--mp-accent-hover); }

.mp-search .dashboard-btn-outline {
  background-color: transparent;
  border: 1px solid var(--mp-accent);
  /* On the tint, and on nothing, the readable ink is the accent itself. */
  color: var(--mp-accent);
}
.mp-search .dashboard-btn-outline:hover { background-color: var(--mp-accent-soft); }

.mp-search .dashboard-btn-sm {
  height: auto;
  padding: var(--mp-space-1) var(--mp-space-2);
  font-size: var(--mp-text-xs);
}

.mp-search .dashboard-btn-icon {
  height: auto;
  padding: var(--mp-space-2);
  background: transparent;
  color: var(--mp-muted);
}
.mp-search .dashboard-btn-icon:hover { color: var(--mp-danger); }

.mp-search .dashboard-label {
  display: block;
  margin-bottom: var(--mp-space-1);
  font-size: var(--mp-text-sm);
  font-weight: var(--mp-weight-medium);
  color: var(--mp-ink-2);
}

.mp-search .date-filter { width: 100%; }

.mp-search .date-inputs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--mp-space-4);
}

.mp-search .date-group { flex: 1 1 180px; min-width: 0; }

@media (min-width: 768px) {
  .mp-search .search-wrapper { flex-direction: row; align-items: flex-end; }
  .mp-search .search-box { width: 300px; margin-bottom: 0; }
}

@media (max-width: 767.98px) {
  .mp-search .date-inputs { flex-direction: column; align-items: stretch; }
}

/* ============================================================================
   Background utilities
   ------------------------------------------------------------------------
   243 uses of .bg-* across the app, every one of them a hard literal from
   Bootstrap's own stylesheet. On the dark theme .bg-light and .bg-white paint
   an #f8f9fa panel in the middle of a dark page — and where the markup pairs
   one with .text-white, as several card headers do, the header vanishes
   entirely. Found on /attendance-records, where "Staff Attendance Records"
   and "Filter Options" were white text on a white bar.

   Bootstrap declares these !important, so matching them needs !important too;
   the .mp-ui prefix is what decides between the two.

   Each semantic fill also sets its own ink, because a paired .text-white is
   wrong in dark mode for exactly the reason .btn-success was: the semantic
   hues invert, and the *-ink tokens invert with them.
   ========================================================================= */
.mp-ui .bg-white,
.mp-ui .bg-body { background-color: var(--mp-surface) !important; color: var(--mp-ink) !important; }
.mp-ui .bg-light { background-color: var(--mp-surface-2) !important; color: var(--mp-ink) !important; }
.mp-ui .bg-dark  { background-color: var(--mp-surface-sunk) !important; color: var(--mp-ink) !important; }

.mp-ui .bg-primary   { background-color: var(--mp-accent) !important; color: var(--mp-accent-ink) !important; }
.mp-ui .bg-secondary { background-color: var(--mp-surface-2) !important; color: var(--mp-ink) !important; }
.mp-ui .bg-success   { background-color: var(--mp-good) !important;   color: var(--mp-good-ink) !important; }
.mp-ui .bg-warning   { background-color: var(--mp-warn) !important;   color: var(--mp-warn-ink) !important; }
.mp-ui .bg-danger    { background-color: var(--mp-danger) !important; color: var(--mp-danger-ink) !important; }
.mp-ui .bg-info      { background-color: var(--mp-info) !important;   color: var(--mp-info-ink) !important; }

/* A .text-* utility on or inside a filled panel resolves to that fill's ink.
   Without this the very common `bg-primary text-white` pairing is white on a
   light blue in dark mode — 2.25:1. `text-dark` on .bg-warning is the same
   mistake from the other direction. */
.mp-ui .bg-primary.text-white,   .mp-ui .bg-primary   .text-white,
.mp-ui .bg-primary.text-dark,    .mp-ui .bg-primary   .text-dark    { color: var(--mp-accent-ink) !important; }
.mp-ui .bg-success.text-white,   .mp-ui .bg-success   .text-white,
.mp-ui .bg-success.text-dark,    .mp-ui .bg-success   .text-dark    { color: var(--mp-good-ink) !important; }
.mp-ui .bg-warning.text-white,   .mp-ui .bg-warning   .text-white,
.mp-ui .bg-warning.text-dark,    .mp-ui .bg-warning   .text-dark    { color: var(--mp-warn-ink) !important; }
.mp-ui .bg-danger.text-white,    .mp-ui .bg-danger    .text-white,
.mp-ui .bg-danger.text-dark,     .mp-ui .bg-danger    .text-dark    { color: var(--mp-danger-ink) !important; }
.mp-ui .bg-info.text-white,      .mp-ui .bg-info      .text-white,
.mp-ui .bg-info.text-dark,       .mp-ui .bg-info      .text-dark     { color: var(--mp-info-ink) !important; }
.mp-ui .bg-light.text-white,     .mp-ui .bg-light     .text-white,
.mp-ui .bg-white.text-white,     .mp-ui .bg-white     .text-white,
.mp-ui .bg-secondary.text-white, .mp-ui .bg-secondary .text-white   { color: var(--mp-ink) !important; }

/* Subtle variants. Bootstrap 5.3 has bg-*-subtle; 5.1, which the MAUI host
   ships, does not, so the soft tints are exposed under our own names for
   markup that wants a tint rather than a fill. */
.mp-ui .bg-accent-soft { background-color: var(--mp-accent-soft) !important; color: var(--mp-accent) !important; }
.mp-ui .bg-good-soft   { background-color: var(--mp-good-soft) !important;   color: var(--mp-good) !important; }
.mp-ui .bg-warn-soft   { background-color: var(--mp-warn-soft) !important;   color: var(--mp-warn) !important; }
.mp-ui .bg-danger-soft { background-color: var(--mp-danger-soft) !important; color: var(--mp-danger) !important; }

/* Text inside a filled panel takes the panel's ink, not the page's.
   ------------------------------------------------------------------------
   Every segment stylesheet carries a rule like `.mp-people h4 { color:
   var(--mp-ink) }`. That is correct on the page ground and wrong on an
   accent-filled card header, where it puts near-black on a light blue —
   /attendance-records read 2.08:1 that way. Those rules are (0,1,1); these are
   (0,2,1), so the panel wins inside itself and nothing changes outside it.

   Written out rather than with :is(), because the MAUI host runs whatever
   WebView the device shipped with. */
.mp-ui .bg-primary h1,
.mp-ui .bg-primary h2,
.mp-ui .bg-primary h3,
.mp-ui .bg-primary h4,
.mp-ui .bg-primary h5,
.mp-ui .bg-primary h6,
.mp-ui .bg-primary p,
.mp-ui .bg-primary small,
.mp-ui .bg-primary strong,
.mp-ui .bg-primary label,
.mp-ui .bg-primary span { color: var(--mp-accent-ink); }
.mp-ui .bg-success h1,
.mp-ui .bg-success h2,
.mp-ui .bg-success h3,
.mp-ui .bg-success h4,
.mp-ui .bg-success h5,
.mp-ui .bg-success h6,
.mp-ui .bg-success p,
.mp-ui .bg-success small,
.mp-ui .bg-success strong,
.mp-ui .bg-success label,
.mp-ui .bg-success span { color: var(--mp-good-ink); }
.mp-ui .bg-warning h1,
.mp-ui .bg-warning h2,
.mp-ui .bg-warning h3,
.mp-ui .bg-warning h4,
.mp-ui .bg-warning h5,
.mp-ui .bg-warning h6,
.mp-ui .bg-warning p,
.mp-ui .bg-warning small,
.mp-ui .bg-warning strong,
.mp-ui .bg-warning label,
.mp-ui .bg-warning span { color: var(--mp-warn-ink); }
.mp-ui .bg-danger h1,
.mp-ui .bg-danger h2,
.mp-ui .bg-danger h3,
.mp-ui .bg-danger h4,
.mp-ui .bg-danger h5,
.mp-ui .bg-danger h6,
.mp-ui .bg-danger p,
.mp-ui .bg-danger small,
.mp-ui .bg-danger strong,
.mp-ui .bg-danger label,
.mp-ui .bg-danger span { color: var(--mp-danger-ink); }
.mp-ui .bg-info h1,
.mp-ui .bg-info h2,
.mp-ui .bg-info h3,
.mp-ui .bg-info h4,
.mp-ui .bg-info h5,
.mp-ui .bg-info h6,
.mp-ui .bg-info p,
.mp-ui .bg-info small,
.mp-ui .bg-info strong,
.mp-ui .bg-info label,
.mp-ui .bg-info span { color: var(--mp-info-ink); }
.mp-ui .bg-light h1,
.mp-ui .bg-light h2,
.mp-ui .bg-light h3,
.mp-ui .bg-light h4,
.mp-ui .bg-light h5,
.mp-ui .bg-light h6,
.mp-ui .bg-light p,
.mp-ui .bg-light small,
.mp-ui .bg-light strong,
.mp-ui .bg-light label,
.mp-ui .bg-light span,
.mp-ui .bg-white h1,
.mp-ui .bg-white h2,
.mp-ui .bg-white h3,
.mp-ui .bg-white h4,
.mp-ui .bg-white h5,
.mp-ui .bg-white h6,
.mp-ui .bg-white p,
.mp-ui .bg-white small,
.mp-ui .bg-white strong,
.mp-ui .bg-white label,
.mp-ui .bg-white span,
.mp-ui .bg-secondary h1,
.mp-ui .bg-secondary h2,
.mp-ui .bg-secondary h3,
.mp-ui .bg-secondary h4,
.mp-ui .bg-secondary h5,
.mp-ui .bg-secondary h6,
.mp-ui .bg-secondary p,
.mp-ui .bg-secondary small,
.mp-ui .bg-secondary strong,
.mp-ui .bg-secondary label,
.mp-ui .bg-secondary span,
.mp-ui .bg-dark h1,
.mp-ui .bg-dark h2,
.mp-ui .bg-dark h3,
.mp-ui .bg-dark h4,
.mp-ui .bg-dark h5,
.mp-ui .bg-dark h6,
.mp-ui .bg-dark p,
.mp-ui .bg-dark small,
.mp-ui .bg-dark strong,
.mp-ui .bg-dark label,
.mp-ui .bg-dark span,
.mp-ui .bg-body h1,
.mp-ui .bg-body h2,
.mp-ui .bg-body h3,
.mp-ui .bg-body h4,
.mp-ui .bg-body h5,
.mp-ui .bg-body h6,
.mp-ui .bg-body p,
.mp-ui .bg-body small,
.mp-ui .bg-body strong,
.mp-ui .bg-body label,
.mp-ui .bg-body span { color: inherit; }

/* ─────────────────────────────────────────────────────────────────────────────
   Foreground colour utilities. Found while verifying S9: `.text-dark` on a
   webstore stat measured 1.13:1 in dark mode and `.text-primary` on a unit
   card 3.88:1, because both resolve to Bootstrap's own literals (#212529 and
   #0d6efd) which never move with the theme.

   These sit at (0,2,0). The per-fill rules above — `.mp-ui .bg-warning
   .text-dark` and friends — are (0,3,0), so text inside a filled panel still
   takes that panel's ink and these only apply on the neutral grounds.

   `.text-white` is deliberately absent: it is nearly always sitting on a
   literal dark background written inline next to it, and reassigning it would
   break more than it fixes.
   ───────────────────────────────────────────────────────────────────────────── */
.mp-ui .text-primary   { color: var(--mp-accent) !important; }
.mp-ui .text-secondary { color: var(--mp-ink-2) !important; }
.mp-ui .text-success   { color: var(--mp-good) !important; }
.mp-ui .text-danger    { color: var(--mp-danger) !important; }
.mp-ui .text-warning   { color: var(--mp-warn) !important; }
.mp-ui .text-info      { color: var(--mp-info) !important; }
.mp-ui .text-dark,
.mp-ui .text-black,
.mp-ui .text-body      { color: var(--mp-ink) !important; }
.mp-ui .text-light     { color: var(--mp-ink-2) !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   Tab strips. Bootstrap paints the active `.nav-tabs` tab with a hard white
   background (`--bs-nav-tabs-link-active-bg`, and in 5.1 a literal), so in
   dark mode the active tab was a white card with light-blue text on it —
   2.45:1 on the webstore settings page.
   ───────────────────────────────────────────────────────────────────────────── */
.mp-ui .nav-tabs { border-bottom: 1px solid var(--mp-line); }

.mp-ui .nav-tabs .nav-link {
    color: var(--mp-ink-2);
    background-color: transparent;
    border-color: transparent;
}

.mp-ui .nav-tabs .nav-link:hover:not(.active) {
    color: var(--mp-accent);
    border-color: transparent transparent var(--mp-line);
}

.mp-ui .nav-tabs .nav-link.active {
    color: var(--mp-accent);
    background-color: var(--mp-surface);
    border-color: var(--mp-line) var(--mp-line) var(--mp-surface);
    font-weight: var(--mp-weight-bold);
}

.mp-ui .nav-pills .nav-link.active,
.mp-ui .nav-pills .show > .nav-link {
    background-color: var(--mp-accent);
    color: var(--mp-accent-ink);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Bootstrap 5.3's "-subtle" pairs. `bg-primary-subtle` is a fixed pale tint
   (#cfe2ff) that does not move with the theme, so a `text-primary` badge sat
   on one measured 1.86:1 in dark mode on the webstore payment tab. The soft
   tokens are the same idea done theme-aware, so map straight onto them and
   let the paired -emphasis / semantic text colour ride on top.

   5.1 — what the MAUI host ships — has no -subtle classes at all, so these
   rules simply give that host the same result the web host now gets.
   ───────────────────────────────────────────────────────────────────────────── */
.mp-ui .bg-primary-subtle   { background-color: var(--mp-accent-soft) !important; }
.mp-ui .bg-secondary-subtle { background-color: var(--mp-surface-2) !important; }
.mp-ui .bg-success-subtle   { background-color: var(--mp-good-soft) !important; }
.mp-ui .bg-warning-subtle   { background-color: var(--mp-warn-soft) !important; }
.mp-ui .bg-danger-subtle    { background-color: var(--mp-danger-soft) !important; }
.mp-ui .bg-info-subtle      { background-color: var(--mp-info-soft) !important; }
.mp-ui .bg-light-subtle     { background-color: var(--mp-surface-2) !important; }
.mp-ui .bg-dark-subtle      { background-color: var(--mp-surface-sunk) !important; }

.mp-ui .text-primary-emphasis   { color: var(--mp-accent) !important; }
.mp-ui .text-secondary-emphasis { color: var(--mp-ink-2) !important; }
.mp-ui .text-success-emphasis   { color: var(--mp-good) !important; }
.mp-ui .text-warning-emphasis   { color: var(--mp-warn) !important; }
.mp-ui .text-danger-emphasis    { color: var(--mp-danger) !important; }
.mp-ui .text-info-emphasis      { color: var(--mp-info) !important; }
.mp-ui .text-light-emphasis,
.mp-ui .text-dark-emphasis      { color: var(--mp-ink-2) !important; }

.mp-ui .border-primary-subtle { border-color: var(--mp-accent) !important; }
.mp-ui .border-success-subtle { border-color: var(--mp-good) !important; }
.mp-ui .border-warning-subtle { border-color: var(--mp-warn) !important; }
.mp-ui .border-danger-subtle  { border-color: var(--mp-danger) !important; }
.mp-ui .border-info-subtle    { border-color: var(--mp-info) !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   Two shared widgets whose component blocks were redefining framework names.
   They live here rather than in a segment sheet because both are mounted from
   more than one segment, and both are self-scoping: every rule hangs off the
   widget's own root class, so no `.mp-ui` prefix is needed.

   PrinterSelection had `.btn1 { … }` — which also exists on /BusinessSelect,
   meaning whichever of the two was mounted last won — and
   `.btn-success, .btn-primary { margin-top: 10px }`, which pushed every
   primary and success button in the document down 10px for as long as
   /Settings was open.

   Sellerlanuageselector styled `.dropdown`, `.dropdown-list` and
   `.dropdown-item`, three of Bootstrap's own names, for a control that is a
   plain <select>; those rules matched nothing here and everything elsewhere.
   Only the two that do something are kept.
   ───────────────────────────────────────────────────────────────────────────── */
.printer-selection .btn1 {
    width: 100%;
    min-height: max(var(--mp-control-h), 44px);
    padding: 0 var(--mp-space-4);
    margin: var(--mp-space-1) 0;
}

.language-selector {
    position: relative;
    display: inline-block;
    min-width: 140px;
}

.language-selector .dropdown-btn,
.language-selector select {
    width: 100%;
    height: var(--mp-control-h);
    min-height: var(--mp-control-h);
    padding: 0 2rem 0 var(--mp-space-3);
    background-color: var(--mp-surface);
    color: var(--mp-ink);
    border: 1px solid var(--mp-line-strong);
    border-radius: var(--mp-radius-sm);
    font-family: inherit;
    font-size: var(--mp-text-base);
    font-weight: var(--mp-weight-medium);
    line-height: normal;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.language-selector .dropdown-btn:hover,
.language-selector select:hover {
    border-color: var(--mp-line-strong);
}

.language-selector .dropdown-btn:focus,
.language-selector select:focus {
    border-color: var(--mp-accent);
    box-shadow: var(--mp-focus);
    outline: none;
}