/* Merchant Hub — page styles on top of smartapp + bridge (spec §3; approved mockup).
   Light theme only (owner decision 2026-08-25). */

.mh-impersonation-banner{
    background:#1a4667;color:#fff;font-size:13px;padding:8px 16px;
    grid-column:1/-1;display:flex;align-items:center;
}
.mh-locsw{font-weight:600;font-size:13.5px}
.mh-avatar{
    width:32px;height:32px;border-radius:50%;background:#2868a0;color:#fff;
    display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;
}
.mh-aside-foot{padding:14px 20px;font-size:11.5px;color:#8a93a2;border-top:1px solid rgba(255,255,255,.08)}

/* stat widgets — house marketing-dashboard pattern, merchant flavour */
.mh-stat .h2{margin-bottom:0}
.mh-live{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:#198754}
.mh-live b{width:7px;height:7px;border-radius:50%;background:#198754;animation:mh-pulse 2s infinite}
@keyframes mh-pulse{50%{opacity:.35}}
@media (prefers-reduced-motion: reduce){.mh-live b{animation:none}}

/* volume chart (server data, DOM bars — no chart lib needed) */
.mh-bars{display:flex;align-items:flex-end;gap:8px;height:180px;border-bottom:1px solid #e9ecef;padding:6px 2px 0}
.mh-bars i{flex:1;background:#bcd7ef;border-radius:3px 3px 0 0;display:block;min-width:0}
.mh-bars i.hi{background:#2868a0}
.mh-bars i.today{background:repeating-linear-gradient(45deg,#bcd7ef 0 6px,#d8e8f7 6px 12px);outline:1.5px dashed #2868a0;outline-offset:-1px}
.mh-xlab{display:flex;gap:8px;font-size:10.5px;color:#adb5bd;margin-top:6px}
.mh-xlab span{flex:1;text-align:center;white-space:nowrap;overflow:hidden}

/* deep-blue advisory cross-sell block ("From your account team", mockup C-style) */
.mh-team{background:linear-gradient(168deg,#1a4667,#123650);color:#e9f1f7;border:0}
.mh-team .card-title{color:#fff}
.mh-team .mh-offer{display:flex;gap:12px;padding:12px 0;border-top:1px solid rgba(255,255,255,.13)}
.mh-team .mh-offer:first-of-type{border-top:0}
.mh-team .mh-ic{width:36px;height:36px;border-radius:6px;background:rgba(255,255,255,.12);color:#fff;
    display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex:0 0 auto}
.mh-team b{display:block;font-size:13.5px;color:#fff}
.mh-team p{margin:3px 0 5px;font-size:12px;color:#b9cfdf;line-height:1.45}
.mh-team a{font-size:12px;font-weight:700;color:#8ed0ff}
.mh-team .mh-foot{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.13);font-size:11.5px;color:#9fc0d8}

/* needs-attention list */
.mh-attn .mh-item{display:flex;gap:10px;padding:10px 0;border-top:1px solid #f1f3f5;font-size:13px;line-height:1.45}
.mh-attn .mh-item:first-of-type{border-top:0;padding-top:2px}
.mh-attn .mh-dot{width:8px;height:8px;border-radius:50%;margin-top:6px;flex:0 0 auto}
.mh-dot-warn{background:#ffc107}.mh-dot-ok{background:#198754}.mh-dot-red{background:#e83e8c}

/* team & access */
.mh-rolelab{font-size:11px;font-weight:700;border-radius:4px;padding:3px 9px;white-space:nowrap}
.mh-r-own{background:#2868a0;color:#fff}.mh-r-mgr{background:#e8f0fe;color:#2868a0}.mh-r-stf{background:#e9ecef;color:#495057}
.mh-chips{display:flex;gap:5px;flex-wrap:wrap}
.mh-chip{font-size:11px;font-weight:600;border:1px solid #dee2e6;border-radius:999px;padding:2px 9px;background:#f8f9fa;color:#495057}
.mh-chip.on{background:#e7f3ec;border-color:#bfe0cd;color:#198754}
.mh-chip.off{opacity:.4}

/* interchange drill-down */
.mh-cardmix{display:flex;gap:12px}
.mh-cardmix .brand{flex:1;border:1px solid #e9ecef;border-radius:6px;padding:12px 14px}
.mh-cardmix .brand h6{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:#6c757d;margin:0 0 6px}
.mh-cardmix .brand .v{font-size:20px;font-weight:600}
.mh-mixbar{display:flex;height:10px;border-radius:5px;overflow:hidden;margin:10px 0 4px}
.mh-mixbar span{display:block;height:100%}

/* mobile: bottom tab bar + stacked grids */
.mh-tabbar{display:none}
@media (max-width: 768px){
    .mh-tabbar{position:fixed;bottom:0;left:0;right:0;display:flex;background:#fff;border-top:1px solid #dee2e6;
        z-index:50;font-size:10px;text-align:center}
    .mh-tabbar a{flex:1;padding:8px 0 10px;color:#6c757d;text-decoration:none}
    .mh-tabbar a.on{color:#2868a0;font-weight:700}
    .mh-tabbar i{display:block;font-size:17px;margin-bottom:2px}
    .app-content{padding-bottom:70px}
    .mh-cardmix{flex-wrap:wrap}
}

/* ═══ Self-contained Merchant Hub chrome (2026-08-25) ════════════════════
   The SmartAdmin skeleton classes (.app-header/.app-sidebar/.nav-menu) only
   style inside the theme's full DOM, which the hub doesn't use — the chrome
   below is owned entirely by this file, per the approved mockup. */
html{height:100%}
body.mh-body{margin:0;background:#f4f6f9;min-height:100%}
.mh-app{display:grid;grid-template-columns:232px minmax(0,1fr);grid-template-rows:auto auto 1fr;min-height:100vh}
.mh-impersonation-banner{grid-column:1/-1}
.mh-topbar{grid-column:1/-1;position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid #e9ecef;min-height:58px;gap:14px}
.mh-logo img{display:block}
.mh-menu-btn{background:none;border:1px solid #dee2e6;border-radius:6px;padding:6px 8px;color:#495057;align-items:center}
.mh-menu-btn .sa-icon{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}

/* sidebar */
.mh-aside{background:#1d2531;color:#aab4c3;padding:10px 0 0;min-height:0}
.mh-nav-menu{list-style:none;margin:0;padding:0}
.mh-nav-title span{display:block;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#5f6b7d;padding:18px 20px 8px}
.mh-nav-item a{display:flex;align-items:center;gap:11px;padding:10px 20px;font-size:13.5px;color:#aab4c3;text-decoration:none;border-left:3px solid transparent;line-height:1.3}
.mh-nav-item a:hover{color:#fff;background:rgba(255,255,255,.05);text-decoration:none}
.mh-nav-item.active a{color:#fff;background:rgba(255,255,255,.07);border-left-color:#e83e8c;font-weight:600}
.mh-nav-item .sa-icon{width:16px;height:16px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mh-nav-item .badge{margin-left:auto;background:#e83e8c;color:#fff;font-size:10.5px;font-weight:700;border-radius:999px;padding:2px 8px}
.mh-aside-foot{margin-top:auto}
.mh-aside-foot a{color:#8ed0ff}

/* content */
.mh-content{padding:22px 28px 56px;width:100%;min-width:0}

/* KPI figures on the hub follow the mock palette (theme text-primary is the
   SmartAdmin purple, text-success its teal — wrong read for money) */
.mh-content .card h2.text-primary{color:#2868a0}
.mh-content .card h2.text-success{color:#198754}

/* chart empty state */
.mh-chart-empty{height:180px;display:flex;align-items:center;justify-content:center;color:#8c959e;font-size:13px;border:1px dashed #dee2e6;border-radius:6px;background:#fbfcfd}

/* mobile chrome */
@media (max-width: 991.98px){
    .mh-app{grid-template-columns:minmax(0,1fr)}
    .mh-aside{position:fixed;top:0;bottom:0;left:-268px;width:248px;z-index:300;transition:left .18s ease;box-shadow:none;overflow-y:auto}
    body.mh-nav-open .mh-aside{left:0;box-shadow:0 0 0 100vmax rgba(0,0,0,.35)}
    .mh-content{padding:16px 14px 80px}
}

/* v2 polish: theme img{height:auto} ate the logo's height attribute (fixed
   inline); BS utilities carry !important so the KPI palette must too; the
   chart empty-state spans the full plot area. */
.mh-content .card h2.text-primary{color:#2868a0!important}
.mh-content .card h2.text-success{color:#198754!important}
.mh-bars .mh-chart-empty{width:100%;height:100%}
.mh-topbar .mh-logo{max-height:58px;overflow:hidden;display:flex;align-items:center}

/* ═══ Utility fallbacks for LEGACY (Bootstrap-3/Nifty) pages that adopt the
   mh chrome — harmless duplicates on smartapp (BS5) pages. ═══ */
.mh-app .d-flex{display:flex}
.mh-app .align-items-center{align-items:center}
.mh-app .flex-column{flex-direction:column}
.mh-app .flex-grow-1{flex-grow:1}
.mh-app .flex-shrink-0{flex-shrink:0}
.mh-app .ms-auto{margin-left:auto}
.mh-app .me-1{margin-right:4px}.mh-app .me-2{margin-right:8px}.mh-app .me-3{margin-right:16px}
.mh-app .px-3{padding-left:16px;padding-right:16px}
.mh-app .mb-0{margin-bottom:0}
.mh-app .d-lg-none{display:none}
@media (max-width:991.98px){.mh-app .d-lg-none{display:flex}}
.mh-app .btn-light{background:#f8f9fa;border:1px solid #dee2e6;color:#212529}

/* legacy content inside the new chrome: soften the Nifty panel to card-look */
.mh-content .panel{border:1px solid #e9ecef;border-radius:6px;box-shadow:0 1px 4px rgba(0,0,0,.06);background:#fff}
.mh-content .panel-heading{border-radius:6px 6px 0 0}
/* the account switcher select in the legacy aside */
.mh-aside .mh-mid-switcher{margin:6px 16px 4px;width:calc(100% - 32px);background:#141b26;color:#dfe5ec;border:1px solid #2b3646;border-radius:6px;padding:7px 10px;font-size:12.5px}

/* legacy chrome (agent) — additions for BS3/Nifty pages adopting the mh chrome (2026-08-25) */
.mh-nav-item .fa{width:16px;text-align:center;flex:0 0 auto}
.mh-nav-item.mh-sub a{padding-left:44px;font-size:12.5px}
.mh-topbar-loc{font-size:13.5px;font-weight:600;color:#495057;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:38%}
.mh-topbar-user{font-size:13px;color:#6c757d;white-space:nowrap}
.mh-topbar-link{font-size:13px;font-weight:600;color:#2868a0;text-decoration:none;white-space:nowrap}
.mh-topbar-link:hover,.mh-topbar-link:focus{color:#1a4667;text-decoration:none}
.mh-cart-count{display:inline-block;min-width:18px;padding:1px 5px;border-radius:999px;background:#e83e8c;color:#fff;font-size:11px;font-weight:700;text-align:center;vertical-align:1px}
/* legacy chrome (agent): on short pages the auto-placed aside/content landed in
   the middle "auto" grid row, leaving the 1fr row empty below them — span both
   so the dark aside always reaches the bottom (harmless with the banner too). */
@media (min-width: 992px){
    .mh-app > .mh-aside, .mh-app > .mh-content{grid-row:span 2}
}
/* legacy chrome (agent): the .mh-content .panel card-bridge painted Nifty's
   colorful stat panels white, hiding their white text — restore the Nifty /
   theme-gray backgrounds at higher specificity (bridge shadow/radius kept). */
.mh-content .panel-default.panel-colorful{background:#e6eced}
.mh-content .panel-primary.panel-colorful{background:#1976d2}
.mh-content .panel-info.panel-colorful{background:#03a9f4}
.mh-content .panel-success.panel-colorful{background:#8bc34a}
.mh-content .panel-warning.panel-colorful{background:#ffb300}
.mh-content .panel-danger.panel-colorful{background:#f44336}
.mh-content .panel-mint.panel-colorful{background:#26a69a}
.mh-content .panel-purple.panel-colorful{background:#ab47bc}
.mh-content .panel-pink.panel-colorful{background:#f06292}
.mh-content .panel-dark.panel-colorful{background:#3a444e}

/* ═══ Portal-light chrome (owner feedback 2026-08-25): match the staff portal —
   white sidebar, portal blue accents, no pink/purple anywhere. Overrides the
   earlier dark-aside rules (this file loads last; equal specificity → these win). */
.mh-aside{background:#fff;color:#495057;border-right:1px solid #e9ecef}
.mh-nav-title span{color:#8c8c8c}
.mh-nav-item a{color:#495057;border-left:3px solid transparent}
.mh-nav-item a:hover{color:#212529;background:#f4f6f9}
.mh-nav-item.active a{color:#2196F3;background:#e7f3fe;border-left-color:#2196F3;font-weight:600}
.mh-nav-item .sa-icon,.mh-nav-item .fa{color:#6c757d}
.mh-nav-item.active .sa-icon,.mh-nav-item.active .fa{color:#2196F3}
.mh-nav-item .badge{background:#dc3545}
.mh-aside-foot{color:#8c8c8c;border-top:1px solid #e9ecef}
.mh-aside-foot a{color:#2196F3}
.mh-aside .mh-mid-switcher{background:#fff;color:#495057;border:1px solid #dee2e6}
@media (max-width:991.98px){body.mh-nav-open .mh-aside{box-shadow:0 0 0 100vmax rgba(0,0,0,.25)}}

/* portal blue replaces theme purple within merchant pages */
.mh-content a{color:#2196F3}
.mh-content a:hover{color:#0c7cd5}
.mh-content .text-primary{color:#2196F3!important}
.mh-content .card h2.text-primary{color:#2196F3!important}
.mh-content .btn-primary{background:#2196F3;border-color:#2196F3;color:#fff}
.mh-content .btn-primary:hover{background:#0c7cd5;border-color:#0c7cd5}
.mh-content .btn-outline-primary{color:#2196F3;border-color:#2196F3;background:transparent}
.mh-content .btn-outline-primary:hover{background:#2196F3;border-color:#2196F3;color:#fff}
.mh-bars i{background:#bfdcf5}
.mh-bars i.hi{background:#2196F3}
.mh-bars i.today{background:repeating-linear-gradient(45deg,#bfdcf5 0 6px,#e2f0fc 6px 12px);outline:1.5px dashed #2196F3}
.mh-rolelab.mh-r-own{background:#2196F3}
.mh-r-mgr{background:#e7f3fe;color:#0c7cd5}
.locbdg,.mh-content .badge.bg-light{border-color:#dbe7f3}
/* legacy cart count + any leftover pink accents */
.mh-topbar .cart-amount,.mh-topbar .mh-cart-badge{background:#dc3545!important}
/* theme danger is PINK (#fd3995) — merchant pages use proper red; success teal -> portal green */
.mh-content .text-danger{color:#dc3545!important}
.mh-content .text-success{color:#198754!important}
/* theme tables hover/border in lavender — keep hub tables on neutral/blue */
.mh-content .table thead th{border-bottom:2px solid #e2e8ee!important}
.mh-content .table-hover>tbody>tr:hover>*{background-color:#f5f9fd!important;box-shadow:none}
.mh-content .table-hover>tbody>tr:hover,.mh-content .table-hover>tbody>tr:hover>*{border-color:#e2e8ee!important}
/* pagination: theme's active pill is purple — portal blue */
.mh-content .pagination .page-link{color:#2196F3}
.mh-content .page-item.active .page-link{background:#2196F3!important;border-color:#2196F3!important;color:#fff}

/* desktop sidebar collapse (hamburger toggles; persisted in localStorage) */
@media (min-width: 992px){
    body.mh-nav-collapsed .mh-aside{display:none!important}
    body.mh-nav-collapsed .mh-app{grid-template-columns:minmax(0,1fr)}
}

/* ── Virtual Terminal (Phase A, 2026-08-31) ─────────────────────────────────
   The sale screen + transaction views. Palette per owner ruling: #2196F3 for
   interactive accents; the charge button is its own green (#198754) because
   the theme's btn-success is banned and charging is THE primary action. */
.mh-tabular { font-variant-numeric: tabular-nums; }
.mh-amt-currency { font-size: 2rem; color: #9aa5b1; font-weight: 600; }
.mh-amt-input {
    border: 0; outline: none; box-shadow: none; width: 100%;
    font-size: 2.6rem; font-weight: 700; letter-spacing: .01em;
    font-variant-numeric: tabular-nums; color: #1f2d3d; background: transparent;
}
.mh-amt-input::placeholder { color: #cbd4dd; }
.mh-btn-charge {
    background: #198754; color: #fff; font-weight: 600; padding: .625rem 1rem;
    border: 0; border-radius: .375rem;
}
.mh-btn-charge:hover:not(:disabled) { background: #157347; color: #fff; }
.mh-btn-charge:disabled { background: #9fc5b2; color: #fff; }
.mh-summary-rail { position: sticky; top: 1rem; }
.mh-pill-active { background: #2196F3; }
.mh-charge-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
    display: flex; gap: .75rem; align-items: center;
    padding: .625rem max(1rem, env(safe-area-inset-left)) calc(.625rem + env(safe-area-inset-bottom));
    background: #fff; border-top: 1px solid #e3e8ee; box-shadow: 0 -2px 12px rgba(31,45,61,.08);
    font-size: 1.15rem; font-weight: 700;
}
@media (min-width: 992px) { .mh-charge-bar { display: none; } }
/* The theme paints .btn-check:checked + .btn-outline-primary purple; the hub
   palette ruling is #2196F3 (owner, 2026-08-31). Scope to hub content. */
.mh-content .btn-check:checked + .btn-outline-primary,
#mh-terminal .btn-check:checked + .btn-outline-primary {
    background: #2196F3; border-color: #2196F3; color: #fff;
}
/* The theme's own .btn-check:checked rule paints from BS5 button variables —
   overriding the VARIABLES beats it regardless of selector specificity. */
.mh-content .btn-outline-primary, #mh-terminal .btn-outline-primary {
    --bs-btn-color:#2196F3; --bs-btn-border-color:#2196F3;
    --bs-btn-hover-bg:#2196F3; --bs-btn-hover-border-color:#2196F3; --bs-btn-hover-color:#fff;
    --bs-btn-active-bg:#2196F3; --bs-btn-active-border-color:#2196F3; --bs-btn-active-color:#fff;
}
#mh-terminal .btn-outline-primary { color: #2196F3; border-color: #2196F3; }
#mh-terminal .btn-check:checked + .btn-outline-primary:focus { box-shadow: 0 0 0 .2rem rgba(33,150,243,.25); }

/* ── Merchant auth (login / password reset) — the hub design's front door ──
   Pre-session pages: no shell, one centered card on the hub ground. */
.mh-auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.mh-auth-card{background:#fff;border:1px solid #e2e8f0;border-radius:10px;box-shadow:0 1px 4px rgba(16,24,40,.06);width:100%;max-width:420px;padding:36px 32px}
.mh-auth-card .btn-primary{background:#2196F3;border-color:#2196F3;color:#fff}
.mh-auth-card .btn-primary:hover,.mh-auth-card .btn-primary:focus{background:#0c7cd5;border-color:#0c7cd5}
.mh-auth-logo{height:40px;width:auto;object-fit:contain}
.mh-auth-title{font-size:20px;font-weight:700;color:#1e293b}
.mh-auth-title .mh-auth-title-em{font-weight:300;font-style:italic}
.mh-auth-foot{font-size:12px;color:#94a3b8}
.mh-auth-card a{color:#2196F3}
.mh-auth-card .form-control:focus{border-color:#2196F3;box-shadow:0 0 0 .2rem rgba(33,150,243,.18)}
.mh-auth-card .form-check-input:checked{background-color:#2196F3;border-color:#2196F3}
.mh-auth-card .form-check-input:focus{border-color:#2196F3;box-shadow:0 0 0 .2rem rgba(33,150,243,.18)}

/* ── Redesign rollout primitives (2026-09-01) — shared by the rebuilt VT
   screens. Agents/pages must NOT append here; page-one-offs go in @push. ── */
.req-star{color:#dc3545;margin-left:2px}
.mh-empty{border:1px dashed #cbd5e1;border-radius:10px;background:#fff;padding:40px 24px;text-align:center;color:#64748b}
.mh-empty .fa{font-size:28px;color:#94a3b8;margin-bottom:10px;display:block}
/* content-area avatar (customer cards etc.) — scoped so the topbar's own
   32px .mh-avatar rule (top of file) is not overridden portal-wide */
.mh-content .mh-avatar{width:36px;height:36px;border-radius:50%;background:#e3f2fd;color:#1565c0;display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:13px;flex-shrink:0}
/* form controls on hub pages check portal blue, not SmartAdmin purple */
.mh-body .form-check-input:checked{background-color:#2196F3;border-color:#2196F3}
.mh-body .form-check-input:focus{border-color:#2196F3;box-shadow:0 0 0 .2rem rgba(33,150,243,.18)}
.mh-body .form-control:focus,.mh-body .form-select:focus{border-color:#2196F3;box-shadow:0 0 0 .2rem rgba(33,150,243,.15)}
/* topbar dropdowns must never push the page wider than the viewport */
.mh-topbar .dropdown-menu{max-width:calc(100vw - 24px);overflow-x:hidden}
/* phones: the location switcher truncates instead of pushing the topbar
   (and the whole page) past the viewport edge */
@media (max-width: 575.98px){
    .mh-topbar .mh-locsw{max-width:42vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .mh-topbar .mh-logo img{height:24px !important}
    .mh-topbar{gap:4px}
}

/* ═══ Handoff chrome (2026-09-02) — design handoff "Merchant Portal", README
   "Application Shell" (archived under docs/design/). White page + white 220px
   sidebar, flat nav (#2868a0 active), 60px topbar (icon logo · switcher ·
   bolt New Sale · initials avatar), ONE uppercase page title, centered footer.
   Palette: #0d6efd for actions/links, #2868a0 for nav/avatar/brand marks,
   #198754 ONLY for the charge action and money-in figures. Supersedes the
   #2196F3 rules above (owner 2026-09-02: the screens must match the design;
   the 08-25/08-31 rulings were "blue, never purple" — still honoured). ═══ */
body.mh-body{background:#fff}
.mh-app{grid-template-columns:220px minmax(0,1fr)}
.mh-topbar{display:flex;align-items:center;gap:12px;min-height:60px;height:60px;padding:0 16px;background:#fff;border-bottom:1px solid #e9ecef}
.mh-menu-btn{display:inline-flex;align-items:center;border:0;background:transparent;padding:8px;color:#495057;font-size:18px;line-height:1;border-radius:4px}
.mh-topbar .mh-logo{display:flex;align-items:center;margin:0;max-height:60px}
.mh-topbar .mh-logo img{height:32px!important;width:auto;display:block}
.mh-locsw{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #dee2e6;border-radius:4px;padding:5px 12px;font-size:13px;font-weight:400;max-width:280px;color:#212529;line-height:1.3;min-width:0}
.mh-locsw:hover,.mh-locsw:focus{background:#f8f9fa;color:#212529}
.mh-locsw-name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.mh-locsw-mid{font-size:11px;color:#adb5bd;font-variant-numeric:tabular-nums;white-space:nowrap}
.mh-locsw .fa-chevron-down{font-size:9px;color:#6c757d}
.mh-locsw-menu{min-width:280px;border:1px solid #e9ecef;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,.10);padding:6px 0}
.mh-locsw-head{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#adb5bd;padding:6px 14px 4px}
.mh-locsw-row{display:flex;align-items:center;gap:10px;padding:8px 14px;width:100%;background:none;border:0;text-align:left;color:#212529}
.mh-locsw-row:hover{background:#f8f9fa}
.mh-locsw-row .n{font-size:13px;font-weight:600;display:block}
.mh-locsw-row .m{font-size:11px;color:#adb5bd;font-variant-numeric:tabular-nums;display:block}
.mh-locsw-row .fa-check{margin-left:auto;font-size:12px;color:#0d6efd}
.mh-newsale{display:inline-flex;align-items:center;gap:6px;background:#0d6efd;border:1px solid #0d6efd;color:#fff;font-size:13px;font-weight:500;padding:6px 14px;border-radius:4px;text-decoration:none;white-space:nowrap;line-height:1.3}
.mh-newsale:hover,.mh-newsale:focus{background:#0b5ed7;border-color:#0b5ed7;color:#fff;text-decoration:none}
.mh-newsale .fa{font-size:11px}
.mh-avatar-btn{background:none;border:0;padding:0;display:flex}
.mh-topbar .mh-avatar{width:28px;height:28px;background:#e8f0fe;color:#2868a0;font-size:11px;font-weight:700}
/* sidebar: flat nav */
.mh-aside{background:#fff;color:#495057;border-right:1px solid #e9ecef;padding:12px 0;position:sticky;top:60px;height:calc(100vh - 60px);overflow-y:auto;align-self:start}
.mh-nav-item a{display:flex;align-items:center;gap:12px;padding:11px 20px;font-size:14px;font-weight:500;color:#495057;border-left:3px solid transparent;line-height:1.3;transition:background .15s,color .15s}
.mh-nav-item a:hover{background:#f8f9fa;color:#495057}
.mh-nav-item.active a{color:#2868a0;font-weight:600;background:#e8f0fe;border-left-color:#2868a0}
.mh-nav-item .fa{width:16px;text-align:center;font-size:14px;color:#6c757d}
.mh-nav-item.active .fa{color:#2868a0}
.mh-nav-sep{height:1px;background:#e9ecef;margin:8px 20px;list-style:none}
.mh-drawer-head{display:none}
.mh-scrim{display:none}
/* content region + footer */
.mh-content{padding:20px 28px 48px;display:flex;flex-direction:column}
.mh-content>.container-fluid{padding-left:0!important;padding-right:0!important;padding-top:0!important}
.mh-foot{margin-top:auto;padding-top:32px;text-align:center;font-size:12px;color:#adb5bd}
/* page title: one uppercase line, optional right-aligned aside */
.mh-pagehead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.mh-pagehead .mh-title{font-size:20px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#212529;margin:0;line-height:1.25}
.mh-pagehead-aside{font-size:11px;color:#6c757d;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* cards sit on a white ground: hairline border, no shadow */
.mh-content .card{border:1px solid #e9ecef;border-radius:6px;box-shadow:none}
.mh-content .card-header{background:transparent;border-bottom:1px solid #f0f0f0}
/* hub table contract */
.mh-content .table thead th{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:#6c757d;border-bottom:1px solid #e9ecef!important;background:transparent}
.mh-content .table td{font-size:13px;border-color:#f0f0f0;vertical-align:middle}
.mh-content .table-hover>tbody>tr:hover>*{background-color:#f8f9fa!important}
/* palette: #0d6efd replaces #2196F3 for actions/links */
.mh-content a{color:#0d6efd}
.mh-content a:hover{color:#0b5ed7}
.mh-content .text-primary,.mh-content .card h2.text-primary{color:#0d6efd!important}
.mh-content .btn-primary{background:#0d6efd;border-color:#0d6efd;color:#fff}
.mh-content .btn-primary:hover,.mh-content .btn-primary:focus{background:#0b5ed7;border-color:#0b5ed7;color:#fff}
.mh-content .btn-outline-primary,#mh-terminal .btn-outline-primary{color:#0d6efd;border-color:#0d6efd;
    --bs-btn-color:#0d6efd;--bs-btn-border-color:#0d6efd;--bs-btn-hover-bg:#0d6efd;--bs-btn-hover-border-color:#0d6efd;
    --bs-btn-active-bg:#0d6efd;--bs-btn-active-border-color:#0d6efd}
.mh-content .btn-outline-primary:hover{background:#0d6efd;border-color:#0d6efd;color:#fff}
.mh-content .btn-check:checked + .btn-outline-primary,#mh-terminal .btn-check:checked + .btn-outline-primary{background:#0d6efd;border-color:#0d6efd;color:#fff}
#mh-terminal .btn-check:checked + .btn-outline-primary:focus{box-shadow:0 0 0 .25rem rgba(13,110,253,.15)}
.mh-body .form-check-input:checked{background-color:#0d6efd;border-color:#0d6efd}
.mh-body .form-check-input:focus,.mh-body .form-control:focus,.mh-body .form-select:focus{border-color:#86b7fe;box-shadow:0 0 0 .25rem rgba(13,110,253,.15)}
.mh-content .pagination .page-link{color:#0d6efd}
.mh-content .page-item.active .page-link{background:#0d6efd!important;border-color:#0d6efd!important}
.mh-bars i{background:#cfe2ff}
.mh-bars i.hi{background:#2868a0}
.mh-bars i.today{background:repeating-linear-gradient(45deg,#cfe2ff 0 6px,#e8f0fe 6px 12px);outline:1.5px dashed #2868a0}
.mh-rolelab.mh-r-own{background:#2868a0}
.mh-r-mgr{background:#e8f0fe;color:#2868a0}
.mh-pill-active{background:#0d6efd}
.mh-content .mh-avatar{background:#e8f0fe;color:#2868a0}
/* mobile: off-canvas drawer with scrim; hamburger visible; tighter padding */
@media (max-width:991.98px){
    .mh-app{grid-template-columns:minmax(0,1fr)} /* the 220px desktop column above must not survive on phones */
    .mh-aside{position:fixed;top:0;bottom:0;left:-280px;width:260px;height:auto;z-index:300;padding:0 0 12px;border-right:0;box-shadow:none;transition:left .18s ease}
    body.mh-nav-open .mh-aside{left:0;box-shadow:0 4px 20px rgba(0,0,0,.15)}
    .mh-scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:299}
    body.mh-nav-open .mh-scrim{display:block}
    .mh-drawer-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid #e9ecef;margin-bottom:8px;font-size:14px;font-weight:600;color:#212529}
    .mh-drawer-head img{height:28px;width:auto}
    .mh-content{padding:16px 14px 48px}
    .mh-locsw-mid{display:none}
    .mh-topbar .mh-logo img{height:28px!important}
}
@media (max-width:575.98px){
    .mh-newsale span{display:none}
    .mh-newsale{padding:6px 10px}
    .mh-topbar{gap:8px}
}

/* ── Virtual Terminal — handoff card pattern (README "Screen 2") ──────────
   Every card opens with the section sub-header; the $ glyph and borderless
   32px amount; brand icon inside the card-number field; 13px summary rows
   with a ruled 16px Total; green charge (15px/600) + "encrypted end-to-end";
   mobile bar shows TOTAL over the amount with a 48px charge button. */
.mh-sec{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#8c8c8c;padding-bottom:6px;border-bottom:1px solid #f0f0f0;margin-bottom:12px}
.mh-vt-card .card-body{padding:20px 24px}
.mh-amt-currency{font-size:28px;color:#adb5bd;font-weight:400}
.mh-amt-input{font-size:32px;font-weight:600;letter-spacing:0;color:#212529;flex:1}
.mh-amt-input::placeholder{color:#ced4da}
#mh-terminal .form-label{font-size:12px;font-weight:600;color:#6c757d;margin-bottom:4px}
.mh-cardnum{position:relative}
.mh-cardnum .form-control{padding-right:40px;font-variant-numeric:tabular-nums}
.mh-cardnum #mh-brand-icon{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:18px;color:#2868a0;pointer-events:none}
/* pill buttons (handoff: 6px 14px, 20px radius, 13px/500; active #0d6efd) */
.mh-pills{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.mh-pills .mh-pill{border-radius:20px;padding:6px 14px;font-size:13px;font-weight:500;line-height:1.2;color:#495057;border:1px solid #dee2e6;background:#fff;text-transform:none;letter-spacing:0}
.mh-pills .mh-pill:hover{background:#f8f9fa;color:#495057;border-color:#dee2e6}
.mh-pills .btn-check:checked + .mh-pill{background:#0d6efd;border-color:#0d6efd;color:#fff}
.mh-sec{flex-wrap:wrap}
#mh-terminal .form-label{white-space:nowrap}
@media (max-width:575.98px){
    .mh-vt-card .card-body{padding:16px}
    .mh-sec .mh-pills{margin-left:auto}
}
.mh-sumrow{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:#212529;margin-bottom:8px}
.mh-sumrow span:first-child{color:#6c757d}
.mh-sumrow.total{border-top:1px solid #e9ecef;padding-top:10px;margin-top:2px;margin-bottom:0;font-size:16px;font-weight:700}
.mh-sumrow.total span:first-child{color:#212529}
.mh-btn-charge{font-size:15px;font-weight:600;padding:11px 16px;border-radius:6px;margin-top:16px;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.mh-btn-charge .fa{font-size:12px}
.mh-btn-charge.busy{opacity:.7;cursor:wait}
.mh-secure{font-size:11px;color:#adb5bd;text-align:center;margin:10px 0 0}
.mh-summary-rail{top:76px}
.mh-charge-bar{z-index:1030;padding:10px 16px;border-top:1px solid #e9ecef;box-shadow:0 -2px 8px rgba(0,0,0,.06);font-size:inherit;font-weight:400;gap:14px}
.mh-charge-bar .lbl{display:block;font-size:11px;font-weight:600;text-transform:uppercase;color:#6c757d;line-height:1.2}
.mh-charge-bar .amt{display:block;font-size:18px;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums}
.mh-charge-bar .mh-btn-charge{margin-top:0;min-height:48px}
.mh-vt-spacer{height:76px}
@media (min-width:992px){.mh-vt-spacer{display:none}}
/* theme paints a lavender row outline on hover — keep hub rows neutral */
.mh-content .table>tbody>tr:hover{box-shadow:none!important;border-color:#f0f0f0!important}
/* ── Prototype nav (owner mockup 2026-09-02): three groups + gateway lock box ──
   Group label 10px/700 uppercase #adb5bd, 14px 20px 4px; items 10px 20px.
   Overrides the older group-title rule near the top of this file. */
.mh-aside{padding:4px 0 12px}
.mh-nav-title{display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#adb5bd;padding:14px 20px 4px;list-style:none}
.mh-nav-item a{padding:10px 20px}
.mh-nav-lock{margin:14px 14px 0;padding:12px 14px;border:1px dashed #dee2e6;border-radius:6px;font-size:12px;color:#6c757d;line-height:1.45}
.mh-nav-lock-title{font-weight:600;color:#495057;margin-bottom:2px}
.mh-nav-lock-title .fa{margin-right:6px;color:#adb5bd}
.mh-nav-lock a{display:block;margin-top:6px;font-weight:600;color:#0d6efd;text-decoration:none}
.mh-nav-lock a:hover{color:#0b5ed7;text-decoration:none}