/* ==========================================================================
   PayChain MIS — legacy-markup adapter.

   The MIS has ~120 screens written against Materio's Bootstrap markup. The
   BCDF Enterprise pack ships bootstrap-compat.css, which maps the Bootstrap
   grid, utilities, form controls, tables, buttons, badges and alerts onto BCDF
   tokens — but deliberately not the component classes Materio adds on top
   (cards, accordions, modals, dropdowns, tabs, avatars, label badges).

   This file closes exactly that gap, so every existing screen renders in the
   enterprise language without being rewritten. Everything is expressed in
   --bc-* tokens, so it follows light and dark with the rest of the layer.

   It is scaffolding with a job to do, not a permanent layer: as each module is
   recomposed into bce-* components, its rules here stop being reached, and the
   file shrinks. Load order: brookscorp → enterprise → bootstrap-compat →
   enterprise.components → this.
   ========================================================================== */

/* ── Page containers ─────────────────────────────────────────────────────
   Materio wrapped every page in .container-xxl.container-p-y. The enterprise
   shell already provides the page gutter, so these become no-ops rather than
   a second set of margins fighting the first. */
.container-xxl,
.container-fluid,
.container-p-y,
.container-p-x { width: 100%; max-width: none; margin: 0; padding: 0; }

/* ── Cards ───────────────────────────────────────────────────────────────
   A Materio card is the enterprise panel: flat, hairline border, no shadow.
   Hierarchy comes from the rule and the weight, not from elevation. */
.card {
  background: var(--bc-bg-surface);
  border: 1px solid var(--bc-border);
  border-radius: var(--bc-r-card);
  box-shadow: none;
  color: var(--bc-text-body);
}
.card + .card { margin-top: 16px; }
.card-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 14px 16px;
  border-bottom: 1px solid var(--bc-border);
  font-size: var(--bc-fs-h2); font-weight: 600; color: var(--bc-text-strong);
}
.card-header h5, .card-header h6, .card-header .card-title {
  margin: 0; font-size: var(--bc-fs-h2); font-weight: 600; color: var(--bc-text-strong);
}
.card-body { padding: 16px; }
.card-footer { padding: 14px 16px; border-top: 1px solid var(--bc-border); }
.card-title { font-size: var(--bc-fs-h2); font-weight: 600; color: var(--bc-text-strong); }
.card-subtitle, .card-text { color: var(--bc-text-body); }
.card-header + .card-body { padding-top: 16px; }
.card.h-100 { height: 100%; }
.card-body > :last-child, .card-footer > :last-child { margin-bottom: 0; }

/* ── Collapse and accordions ─────────────────────────────────────────────
   .collapse is hidden until .show; the JS shell toggles that class and keeps
   data-bs-parent's one-open-at-a-time behaviour. Without JavaScript the panel
   stays as the server rendered it rather than becoming unreachable. */
.collapse:not(.show) { display: none; }
.collapse.show { display: block; }
.accordion { border: 1px solid var(--bc-border); border-radius: var(--bc-r-card); overflow: hidden; background: var(--bc-bg-surface); }
.accordion-item + .accordion-item { border-top: 1px solid var(--bc-border); }
.accordion-header { margin: 0; }
.accordion-button {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border: 0; background: var(--bc-bg-surface);
  font-size: var(--bc-fs-base); font-weight: 600; color: var(--bc-text-strong);
  text-align: left; cursor: pointer;
}
.accordion-button:hover { background: var(--bc-grey-25); }
.accordion-button::after {
  content: ""; margin-left: auto; width: 8px; height: 8px; flex: none;
  border-right: 2px solid var(--bc-text-muted); border-bottom: 2px solid var(--bc-text-muted);
  transform: rotate(45deg); transition: transform var(--bce-motion-base) var(--bce-ease);
}
.accordion-button.collapsed::after { transform: rotate(-45deg); }
.accordion-button:not(.collapsed) { color: var(--bc-text-accent); background: var(--bc-accent-50); }
.accordion-body { padding: 16px; border-top: 1px solid var(--bc-border); }
.accordion-flush, .accordion-flush .accordion-item { border-left: 0; border-right: 0; border-radius: 0; }

/* ── Badges ──────────────────────────────────────────────────────────────
   Materio's .bg-label-* is a tinted status chip. Mapped onto the enterprise
   semantic pairs so a status reads the same here as in a bce-status. */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; border-radius: var(--bc-r-sm);
  font-size: var(--bc-fs-2xs); font-weight: 600; line-height: 1.5;
  white-space: nowrap;
}
.bg-label-primary, .bg-primary   { background: var(--bc-accent-50); color: var(--bc-accent-700); }
.bg-label-success, .bg-success   { background: var(--bc-success-bg); color: var(--bc-success-fg); }
.bg-label-warning, .bg-warning   { background: var(--bc-warning-bg); color: var(--bc-warning-fg); }
.bg-label-danger,  .bg-danger    { background: var(--bc-danger-bg);  color: var(--bc-danger-fg); }
.bg-label-info,    .bg-info      { background: var(--bc-info-bg);    color: var(--bc-info-fg); }
.bg-label-secondary, .bg-secondary,
.bg-label-dark, .bg-dark         { background: var(--bc-neutral-bg); color: var(--bc-neutral-fg); }
.badge.bg-primary, .badge.bg-success, .badge.bg-danger,
.badge.bg-warning, .badge.bg-info { color: var(--bc-white); }
.badge.bg-primary { background: var(--bc-accent-600); }
.badge.bg-success { background: var(--bc-success); }
.badge.bg-danger  { background: var(--bc-danger); }
.badge.bg-warning { background: var(--bc-warning); }
.badge.bg-info    { background: var(--bc-info); }

/* ── Buttons the compat layer does not carry ─────────────────────────────── */
.btn-outline-primary   { background: transparent; border: 1px solid var(--bc-accent-600); color: var(--bc-accent-600); }
.btn-outline-primary:hover { background: var(--bc-accent-50); }
.btn-outline-secondary { background: transparent; border: 1px solid var(--bc-border-strong); color: var(--bc-text-body); }
.btn-outline-secondary:hover { background: var(--bc-grey-25); }
.btn-outline-danger    { background: transparent; border: 1px solid var(--bc-danger); color: var(--bc-danger-fg); }
.btn-outline-danger:hover  { background: var(--bc-danger-bg); }
.btn-outline-success   { background: transparent; border: 1px solid var(--bc-success); color: var(--bc-success-fg); }
.btn-outline-success:hover { background: var(--bc-success-bg); }
.btn-outline-dark      { background: transparent; border: 1px solid var(--bc-border-strong); color: var(--bc-text-strong); }
.btn-outline-dark:hover    { background: var(--bc-grey-25); }
.btn-outline-info      { background: transparent; border: 1px solid var(--bc-info); color: var(--bc-info-fg); }
.btn-outline-warning   { background: transparent; border: 1px solid var(--bc-warning); color: var(--bc-warning-fg); }

.btn-label-primary   { background: var(--bc-accent-50);  border: 1px solid transparent; color: var(--bc-accent-700); }
.btn-label-secondary { background: var(--bc-neutral-bg); border: 1px solid transparent; color: var(--bc-neutral-fg); }
.btn-label-danger    { background: var(--bc-danger-bg);  border: 1px solid transparent; color: var(--bc-danger-fg); }
.btn-label-success   { background: var(--bc-success-bg); border: 1px solid transparent; color: var(--bc-success-fg); }
.btn-danger  { background: var(--bc-danger);  border: 1px solid var(--bc-danger);  color: var(--bc-white); }
.btn-warning { background: var(--bc-warning); border: 1px solid var(--bc-warning); color: var(--bc-white); }
.btn-info    { background: var(--bc-info);    border: 1px solid var(--bc-info);    color: var(--bc-white); }
.btn-text-secondary { background: transparent; border: 0; color: var(--bc-text-muted); }
.btn-icon { padding: 0; width: 36px; height: 36px; display: inline-grid; place-items: center; }
.btn:disabled, .btn.disabled { opacity: .55; cursor: not-allowed; }

.btn-close {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  width: 28px; height: 28px; border-radius: var(--bc-r-sm);
  position: relative; color: var(--bc-text-muted); flex: none;
}
.btn-close::before, .btn-close::after {
  content: ""; position: absolute; inset: 50% 7px auto 7px; height: 1.5px; background: currentColor;
}
.btn-close::before { transform: rotate(45deg); }
.btn-close::after  { transform: rotate(-45deg); }
.btn-close:hover { background: var(--bc-grey-100); color: var(--bc-text-strong); }

/* ── Alerts ──────────────────────────────────────────────────────────────── */
.alert {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: var(--bc-r-ctrl);
  border: 1px solid var(--bc-border); background: var(--bc-bg-sunken); color: var(--bc-text-body);
  font-size: var(--bc-fs-base);
}
.alert-success { background: var(--bc-success-bg); border-color: transparent; color: var(--bc-success-fg); }
.alert-warning { background: var(--bc-warning-bg); border-color: transparent; color: var(--bc-warning-fg); }
.alert-danger  { background: var(--bc-danger-bg);  border-color: transparent; color: var(--bc-danger-fg); }
.alert-info    { background: var(--bc-info-bg);    border-color: transparent; color: var(--bc-info-fg); }
.alert-secondary { background: var(--bc-neutral-bg); border-color: transparent; color: var(--bc-neutral-fg); }
.alert-dismissible { position: relative; padding-right: 44px; }
.alert-dismissible .btn-close { position: absolute; top: 8px; right: 8px; }
.alert p:last-child, .alert ul:last-child { margin-bottom: 0; }

/* ── Tables ──────────────────────────────────────────────────────────────── */
.table-responsive { width: 100%; overflow-x: auto; }
.table > thead th, .table > thead td { background: var(--bc-grey-100); color: var(--bc-text-muted);
  font-size: var(--bc-fs-xs); font-weight: 600; text-transform: none; white-space: nowrap; }
.table-light th, .table-light td { background: var(--bc-grey-100); }
.table-hover > tbody > tr:hover > * { background: var(--bc-grey-25); }
.table td, .table th { vertical-align: middle; }
.table-sm td, .table-sm th { padding-top: 6px; padding-bottom: 6px; }
.table-borderless td, .table-borderless th { border: 0; }
.align-middle { vertical-align: middle; }

/* ── Avatars ─────────────────────────────────────────────────────────────── */
.avatar { position: relative; width: 38px; height: 38px; flex: none; display: inline-block; }
.avatar-sm { width: 30px; height: 30px; }
.avatar-lg { width: 48px; height: 48px; }
.avatar-initial {
  display: grid; place-items: center; width: 100%; height: 100%;
  background: var(--bc-accent-50); color: var(--bc-accent-700);
  font-size: var(--bc-fs-sm); font-weight: 600; border-radius: var(--bc-r-sm);
}
.avatar .rounded-circle { border-radius: 50%; }
.avatar-online::after {
  content: ""; position: absolute; right: 0; bottom: 0; width: 9px; height: 9px;
  border-radius: 50%; background: var(--bc-success); box-shadow: 0 0 0 2px var(--bc-bg-surface);
}

/* ── Tabs, pills and breadcrumbs ─────────────────────────────────────────── */
.nav { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-tabs { border-bottom: 1px solid var(--bc-border); gap: 16px; }
.nav-tabs .nav-link {
  padding: 10px 2px; border: 0; background: transparent; color: var(--bc-text-muted);
  font-size: var(--bc-fs-base); font-weight: 500; cursor: pointer;
}
.nav-tabs .nav-link.active { color: var(--bc-text-accent); box-shadow: inset 0 -2px var(--bc-accent-600); }
.nav-pills .nav-link { padding: 7px 12px; border-radius: var(--bc-r-btn); color: var(--bc-text-body); background: transparent; }
.nav-pills .nav-link.active { background: var(--bc-accent-600); color: var(--bc-white); }
.tab-content > .tab-pane { display: none; }
.tab-content > .tab-pane.active, .tab-content > .tab-pane.show.active { display: block; }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; margin: 0 0 8px; padding: 0; font-size: var(--bc-fs-xs); color: var(--bc-text-muted); }
.breadcrumb-item + .breadcrumb-item::before { content: "/"; margin-right: 6px; color: var(--bc-text-subtle); }
.breadcrumb-item a { color: var(--bc-text-muted); }
.breadcrumb-item.active { color: var(--bc-text-strong); font-weight: 500; }

/* ── Dropdowns ───────────────────────────────────────────────────────────── */
.dropdown, .dropup, .btn-group { position: relative; display: inline-flex; }
.dropdown-menu {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 60;
  min-width: 200px; padding: 6px; margin: 0;
  background: var(--bc-bg-raised); border: 1px solid var(--bc-border);
  border-radius: var(--bc-r-card); box-shadow: var(--bc-sh-md); list-style: none;
}
.dropdown-menu.show { display: block; }
.dropdown-menu-end { left: auto; right: 0; }
.dropdown-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 10px; border-radius: var(--bc-r-sm); background: transparent; border: 0;
  color: var(--bc-text-body); font-size: var(--bc-fs-base); text-align: left; cursor: pointer;
}
.dropdown-item:hover { background: var(--bc-grey-25); color: var(--bc-text-strong); text-decoration: none; }
.dropdown-divider { height: 1px; margin: 6px 0; background: var(--bc-border); }
.dropdown-toggle.hide-arrow::after { display: none; }

/* ── Modals ──────────────────────────────────────────────────────────────── */
.modal {
  display: none; position: fixed; inset: 0; z-index: 1055;
  overflow-x: hidden; overflow-y: auto; padding: 24px 16px;
}
.modal.show { display: block; }
.modal-backdrop { position: fixed; inset: 0; z-index: 1050; background: rgba(15, 27, 45, .55); }
body.modal-open { overflow: hidden; }
.modal-dialog { width: 100%; max-width: 560px; margin: 0 auto; }
.modal-sm { max-width: 380px; }
.modal-lg { max-width: 800px; }
.modal-xl { max-width: 1140px; }
.modal-dialog-centered { display: flex; align-items: center; min-height: calc(100vh - 48px); }
.modal-dialog-centered .modal-content { width: 100%; }
.modal-dialog-scrollable .modal-content { max-height: calc(100vh - 48px); }
.modal-dialog-scrollable .modal-body { overflow-y: auto; }
.modal-content {
  background: var(--bc-bg-surface); border: 1px solid var(--bc-border);
  border-radius: var(--bc-r-lg); box-shadow: var(--bc-sh-xl); color: var(--bc-text-body);
}
.modal-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 18px 20px 0;
}
.modal-title { margin: 0; font-size: var(--bc-fs-h2); font-weight: 600; color: var(--bc-text-strong); }
.modal-body { padding: 16px 20px; }
.modal-footer {
  display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap;
  padding: 14px 20px; border-top: 1px solid var(--bc-border);
}
@media (max-width: 640px) {
  .modal-fullscreen-sm-down .modal-dialog, .modal-fullscreen-md-down .modal-dialog { max-width: none; }
  .modal-fullscreen-sm-down .modal-content, .modal-fullscreen-md-down .modal-content { min-height: calc(100vh - 48px); }
}

/* ── Offcanvas (one screen uses it) ──────────────────────────────────────── */
.offcanvas {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100%); z-index: 1060;
  display: flex; flex-direction: column; transform: translateX(100%);
  background: var(--bc-bg-surface); border-left: 1px solid var(--bc-border);
  transition: transform var(--bce-motion-base) var(--bce-ease);
}
.offcanvas.show { transform: none; }
.offcanvas-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--bc-border); }
.offcanvas-body { padding: 20px; overflow-y: auto; }
@media (prefers-reduced-motion: reduce) { .offcanvas { transition: none; } }

/* ── List groups, progress, floating labels ──────────────────────────────── */
.list-group { display: flex; flex-direction: column; border: 1px solid var(--bc-border); border-radius: var(--bc-r-card); overflow: hidden; }
.list-group-item { padding: 12px 14px; background: var(--bc-bg-surface); color: var(--bc-text-body); }
.list-group-item + .list-group-item { border-top: 1px solid var(--bc-border); }
.list-group-flush { border: 0; border-radius: 0; }

.progress { height: 6px; border-radius: 3px; background: var(--bc-grey-200); overflow: hidden; }
.progress-bar { height: 100%; background: var(--bc-accent-600); }
.progress-bar.bg-success { background: var(--bc-success); }
.progress-bar.bg-danger  { background: var(--bc-danger); }
.progress-bar.bg-warning { background: var(--bc-warning); }

.form-floating { position: relative; }
.form-floating > label { position: absolute; top: 6px; left: 12px; font-size: var(--bc-fs-2xs); color: var(--bc-text-muted); pointer-events: none; }
.form-floating > .form-control { padding-top: 22px; padding-bottom: 6px; }

/* ── Utilities the compat layer leaves out ───────────────────────────────── */
.bg-light { background: var(--bc-grey-50); }
.bg-white { background: var(--bc-bg-surface); }
.text-white { color: var(--bc-white); }
.text-dark  { color: var(--bc-text-strong); }
.text-warning { color: var(--bc-warning-fg); }
.text-info { color: var(--bc-info-fg); }
.shadow-none { box-shadow: none; }
.fs-1 { font-size: var(--bc-fs-display); }
.fs-2 { font-size: var(--bc-fs-h1); }
.fs-3 { font-size: var(--bc-fs-h2); }
.fs-4 { font-size: var(--bc-fs-h3); }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.cursor-pointer { cursor: pointer; }

/* Remix icons are kept for the ~400 icon usages across the unconverted views;
   they sit on the text colour and never carry meaning on their own. */
[class^="ri-"], [class*=" ri-"] { line-height: 1; vertical-align: -.125em; }

/* ── Print ───────────────────────────────────────────────────────────────── */
@media print {
  .bce-side, .bce-top, .bce-envband, .bce-crumbs, .no-print { display: none !important; }
  .bce-page, .bce-content { padding: 0 !important; }
  .card, .accordion, .table { break-inside: avoid; }
}

/* ==========================================================================
   Shell additions.

   The enterprise components file defines .bce-shell as a fixed two-column grid
   with no breakpoints — fine for the desktop mockups, not for an operator on a
   phone at a taxi rank. Below 1024px the rail becomes a drawer, per the design
   standard's responsive rule, and the top bar's existing toggle drives it.
   ========================================================================== */
.bce-page { padding-bottom: 24px; }
.bce-page.bce-content--flush { padding: 0; }

.bce-foot {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 16px 24px 24px; margin-top: auto;
  color: var(--bc-text-muted); font-size: var(--bc-fs-xs);
}
.bce-side__links { display: flex; gap: 12px; padding: 10px 14px 14px; }
.bce-side__links a { color: rgba(255,255,255,.7); font-size: var(--bc-fs-xs); }
.bce-side__links a:hover { color: #fff; }

@media (max-width: 1024px) {
  .bce-shell, .bce-shell.is-collapsed { grid-template-columns: minmax(0, 1fr); }
  .bce-side {
    position: fixed; top: 0; left: 0; bottom: 0; width: var(--bc-sidebar-w);
    z-index: calc(var(--bce-z-shell) + 10);
    transform: translateX(-100%);
    transition: transform var(--bce-motion-base) var(--bce-ease);
  }
  .bce-shell.is-open .bce-side { transform: none; box-shadow: var(--bc-sh-xl); }
  .bce-shell.is-open::after {
    content: ""; position: fixed; inset: 0; z-index: var(--bce-z-shell);
    background: rgba(15, 27, 45, .5);
  }
  .bce-page { padding-left: 16px; padding-right: 16px; }
  .bce-top { padding: 0 16px; }
}
@media (prefers-reduced-motion: reduce) { .bce-side { transition: none; } }

/* The rail toggle is a real control at every width: a collapse on desktop, the
   drawer handle below 1024px. */
.bce-top__toggle { display: inline-grid; place-items: center; }

/* ==========================================================================
   Product components.

   The handful of patterns the MIS needs that the enterprise pack does not
   ship: the money-before-you-commit summary, the two printed artefacts (a
   till-roll ticket and the A4 cash-up sheet a driver signs), and the small
   filter/meter pieces the converted screens use.
   ========================================================================== */

/* Forms: one column by default, labels above their control, helper text beside
   the field it affects — no decorative card around every group. */
.mis-form { display: grid; gap: 20px; max-width: 780px; }
.mis-form__section { display: grid; gap: 14px; }
.mis-form__section > h2 { font-size: var(--bc-fs-h2); font-weight: 600; color: var(--bc-text-strong); margin: 0; }
.mis-label { display: grid; gap: 6px; font-size: var(--bc-fs-xs); color: var(--bc-text-muted); }
.mis-label > span:first-child { font-size: var(--bc-fs-base); font-weight: 500; color: var(--bc-text-strong); }
.mis-label input, .mis-label select, .mis-label textarea { width: 100%; }

/* What the passenger owes, before the counter takes the money. */
.mis-summary {
  display: grid; gap: 8px; padding: 14px 16px;
  background: var(--bc-bg-sunken); border: 1px solid var(--bc-border); border-radius: var(--bc-r-ctrl);
}
.mis-def { display: flex; justify-content: space-between; gap: 16px; font-variant-numeric: tabular-nums; }
.mis-def strong { color: var(--bc-text-strong); font-weight: 600; white-space: nowrap; }
.mis-def--total { padding-top: 8px; border-top: 1px solid var(--bc-border); font-size: var(--bc-fs-lg); }

.mis-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: var(--bc-fs-xs); color: var(--bc-text-muted); }

/* Seat occupancy. The bar supports the count beside it; it never carries the
   value on its own. */
.mis-meter { display: block; height: 5px; border-radius: 3px; background: var(--bc-grey-200); overflow: hidden; margin-top: 5px; min-width: 72px; }
.mis-meter > span { display: block; height: 100%; background: var(--bc-accent-600); }
.mis-meter--full > span { background: var(--bc-success); }

/* Toolbar variants the pack does not carry: a meta strip under a toolbar, and
   a labelled filter control. */
.bce-toolbar--meta { justify-content: space-between; font-size: var(--bc-fs-xs); color: var(--bc-text-muted); border-bottom: 1px solid var(--bc-border); }
.bce-filterrow__field { display: grid; gap: 5px; font-size: var(--bc-fs-xs); color: var(--bc-text-muted); min-width: 0; }
.bce-filterrow__field input, .bce-filterrow__field select { font-size: var(--bc-fs-base); }

/* ── Printed artefacts ────────────────────────────────────────────────────
   Both leave the building, so they keep ink on white and hide the workspace
   when printed. */
.mis-paper { background: #fff; color: #0F1B2D; border: 1px solid var(--bc-border); border-radius: var(--bc-r-card); }
.mis-paper__rule { height: 3px; background: var(--bc-accent-600); border-radius: 2px; margin: 12px 0 16px; }
.mis-ticket { width: 80mm; margin: 0 auto; padding: 18px 16px; }
.mis-ticket dl { display: grid; gap: 5px; font-size: var(--bc-fs-xs); margin: 0; }
.mis-ticket dt { color: var(--bc-text-muted); font-size: var(--bc-fs-2xs); }
.mis-ticket dd { margin: 0; font-weight: 600; }
.mis-ticket__total { border-top: 1px solid var(--bc-border); margin-top: 8px; padding-top: 8px; }
.mis-sheet { padding: 26px 30px; }
.mis-sign { border: 1px solid var(--bc-border-strong); border-radius: var(--bc-r-ctrl); padding: 14px 16px; }
.mis-sign__line { border-bottom: 1px solid #0F1B2D; height: 32px; margin-top: 16px; }
.mis-sign__cap { color: var(--bc-text-muted); font-size: var(--bc-fs-2xs); margin-top: 4px; }
.mis-nobreak { break-inside: avoid; }

@media print {
  .mis-paper { border: 0; border-radius: 0; }
  .mis-ticket { width: auto; padding: 0; }
  .mis-sheet { padding: 0; }
}

/* --------------------------------------------------------------------------
   Outcome plate — the confirmation and status screens.

   BCDF's .bc-empty__icon is a 60px neutral-grey plate for empty states. The
   email-confirmation screen needs the same object in a semantic tone, because
   "confirmed" and "this link is dead" are not the same news and the operator
   should know which before reading a word.

   Tones are tokens, not hexes. ConfirmEmail.cshtml used to carry #28a745,
   #e0a800 and #dc3545 inline with an alpha suffix trick (background:@(colour)1f)
   — three colours that belonged to no scale, ignored dark mode, and ignored a
   domain's white-label. These follow both.
   -------------------------------------------------------------------------- */
.bc-empty__icon--success { background: var(--bc-success-bg); color: var(--bc-success-fg); }
.bc-empty__icon--warning { background: var(--bc-warning-bg); color: var(--bc-warning-fg); }
.bc-empty__icon--danger  { background: var(--bc-danger-bg);  color: var(--bc-danger-fg); }
.bc-empty__icon--info    { background: var(--bc-info-bg);    color: var(--bc-info-fg); }

/* --------------------------------------------------------------------------
   .mis-authform — a long form inside the dark auth card.

   Merchant registration is the one chrome-less screen that is a real form
   rather than a sign-in box, so _BlankLayout gives it the 760px card
   (ViewData["AuthWide"]) and this restores the row rhythm the Materio
   .card-body used to supply. Its fields are still .form-floating /
   .form-control; the rest of this sheet already maps those onto --bc-* tokens.
   -------------------------------------------------------------------------- */
.mis-authform { text-align: left; }
.mis-authform > h3 { margin-top: 0; }
.mis-authform .row > [class*="col-"] { margin-bottom: 0; }
@media (min-width: 720px) {
  .bc-auth__card .mis-authform .form-floating { margin-bottom: var(--bc-s-4); }
}

/* --------------------------------------------------------------------------
   .mis-dochead — merchant document and customer-facing header

   Used by _MerchantBrandHeader on statements, cash-up sheets, trip manifests,
   payment point pages, QR landing pages and event/voucher pages. The merchant's
   mark and PayChain's stand side by side behind a hairline rule.

   Sizes are set by HEIGHT on the merchant's mark (it can be any aspect ratio)
   and by WIDTH on PayChain's lockup (its minimum is expressed as a width — 140px
   digital, per the CI — and letting height drive it is how it silently drops
   under the minimum).
   -------------------------------------------------------------------------- */
.mis-dochead {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--bc-s-6); flex-wrap: wrap;
  padding-bottom: var(--bc-s-4);
  border-bottom: 1px solid var(--bc-border);
  margin-bottom: var(--bc-s-6);
}
.mis-dochead__marks { display: flex; align-items: center; gap: 16px; min-width: 0; }
.mis-dochead__merchant { height: 44px; width: auto; max-width: 190px; object-fit: contain; }
.mis-dochead__rule { width: 1px; align-self: stretch; min-height: 34px; background: var(--bc-border-strong); }
.mis-dochead__paychain { width: 150px; height: auto; }   /* > the CI's 140px minimum */

.mis-dochead__meta { text-align: right; }
.mis-dochead__title {
  font-family: var(--bc-font-display); font-weight: 600;
  font-size: var(--bc-fs-h2); color: var(--bc-text-strong);
}
.mis-dochead__sub { font-size: var(--bc-fs-sm); color: var(--bc-text-muted); margin-top: 2px; }

@media (max-width: 560px) {
  .mis-dochead { align-items: flex-start; }
  .mis-dochead__meta { text-align: left; }
  .mis-dochead__paychain { width: 140px; }
}

/* These are documents people print. Keep the header whole and on the page, and
   drop the rule to a hairline so it does not eat toner. */
@media print {
  .mis-dochead { break-inside: avoid; page-break-inside: avoid; border-bottom-width: .5pt; }
  .mis-dochead__rule { background: #999; }
}

/* --------------------------------------------------------------------------
   .mis-logoupload — the logo card on the merchant profile
   -------------------------------------------------------------------------- */
.mis-logoupload { display: flex; align-items: center; gap: var(--bc-s-5); flex-wrap: wrap; }
.mis-logoupload__preview {
  width: 148px; height: 78px; border: 1px dashed var(--bc-border-strong);
  border-radius: var(--bc-radius); display: grid; place-items: center;
  background: var(--bc-bg-surface); padding: 8px; flex: none;
}
.mis-logoupload__preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.mis-logoupload__preview span { font-size: var(--bc-fs-xs); color: var(--bc-text-subtle); text-align: center; }
.mis-logoupload__fields { display: grid; gap: var(--bc-s-3); min-width: 240px; flex: 1; }

/* --------------------------------------------------------------------------
   .cp-user__party — the counterparty line in the account menu

   Shown only inside a white-labelled domain, where "whose workspace" and "who
   am I contracted to" have different answers. Quiet by design: it is a
   standing fact, not a notice, so it sits below the role and scope chips
   rather than competing with them.
   -------------------------------------------------------------------------- */
.cp-user__party {
  margin-top: var(--bc-s-2);
  padding-top: var(--bc-s-2);
  border-top: 1px dashed var(--bc-border);
  font-size: var(--bc-fs-xs);
  color: var(--bc-text-muted);
}
.cp-user__party strong { color: var(--bc-text-strong); font-weight: 600; }