/* ===============================================*/
/*   ZVend Global Theme (new look)                  */
/*   Load AFTER theme.min.css / user.min.css       */
/* ===============================================*/

:root {
    --zv-blue-900: #0B3F8F;
    --zv-blue: #2A7BE4;
    --zv-blue-300: #4D9EF8;
    --zv-gradient-hero: linear-gradient(135deg, #0B3F8F 0%, #2A7BE4 55%, #4D9EF8 100%);
    --zv-card-radius: 1rem;

    /* Override Falcon's design tokens so every component inherits the new look */
    --falcon-card-border-radius: 1rem;
    --falcon-btn-border-radius: 0.5rem;
    --falcon-modal-border-radius: 1rem;
    --falcon-dropdown-border-radius: 0.75rem;
}

[data-bs-theme="dark"],
.dark {
    --falcon-card-border-radius: 1rem;
    --falcon-btn-border-radius: 0.5rem;
    --falcon-modal-border-radius: 1rem;
    --falcon-dropdown-border-radius: 0.75rem;
}

/* ---------- Global components ---------- */

.card {
    box-shadow: 0 0.5rem 1.25rem -0.75rem rgba(15, 34, 73, 0.15);
}

.form-control:not(.rounded-pill),
.form-select:not(.rounded-pill),
.input-group-text:not(.rounded-pill) {
    border-radius: 0.5rem;
}

/* ---------- Gradient hero band ---------- */

.zv-hero {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    color: #fff;
    background: var(--zv-gradient-hero);
    box-shadow: 0 1rem 2rem -0.75rem rgba(11, 63, 143, 0.45);
}

.zv-hero::before {
    content: '';
    position: absolute;
    top: -60%;
    right: -10%;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
}

.zv-hero::after {
    content: '';
    position: absolute;
    bottom: -72%;
    left: 22%;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
}

.zv-hero .card-body {
    position: relative;
    z-index: 1;
}

/* ---------- Chips / pills on hero ---------- */

.zv-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.zv-chip-light {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.zv-chip-success {
    background: rgba(25, 135, 84, 0.9);
    color: #fff;
}

.zv-chip-danger {
    background: rgba(220, 53, 69, 0.9);
    color: #fff;
}

/* ---------- Wallet balance ---------- */

.zv-balance {
    display: inline-block;
    padding: 1.25rem 1.5rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(4px);
    text-align: left;
}

.zv-btn-light {
    background: #fff;
    color: #0B3F8F;
    border: 0;
    font-weight: 700;
}

.zv-btn-light:hover {
    background: #e9f0fb;
    color: #0B3F8F;
}

/* ---------- Icon tiles ---------- */

.zv-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 0.85rem;
    color: #fff;
    font-size: 1.25rem;
}

.zv-tile-primary {
    background: linear-gradient(135deg, #2A7BE4, #5BA4F8);
    box-shadow: 0 0.5rem 1rem -0.4rem rgba(42, 123, 228, 0.55);
}

.zv-tile-info {
    background: linear-gradient(135deg, #16b8dd, #4ed4f0);
    box-shadow: 0 0.5rem 1rem -0.4rem rgba(22, 184, 221, 0.55);
}

.zv-tile-success {
    background: linear-gradient(135deg, #2eb380, #63d6a8);
    box-shadow: 0 0.5rem 1rem -0.4rem rgba(46, 179, 128, 0.55);
}

.zv-tile-warning {
    background: linear-gradient(135deg, #ed9a2c, #ffc05c);
    box-shadow: 0 0.5rem 1rem -0.4rem rgba(237, 154, 44, 0.55);
}

.zv-tile-danger {
    background: linear-gradient(135deg, #e5493b, #ff7b6f);
    box-shadow: 0 0.5rem 1rem -0.4rem rgba(229, 73, 59, 0.55);
}

.zv-tile-indigo {
    background: linear-gradient(135deg, #5f5bc0, #8b87e8);
    box-shadow: 0 0.5rem 1rem -0.4rem rgba(95, 91, 192, 0.55);
}

/* ---------- Quick action cards ---------- */

.zv-action-card {
    border: 0;
    border-radius: 1rem;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    height: 100%;
}

.zv-action-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 1rem 2rem -1rem rgba(15, 34, 73, 0.35);
}

.zv-action-card .card-body {
    padding: 1.15rem;
}

/* ---------- KPI / panel cards ---------- */

.zv-kpi {
    border: 0;
    border-radius: 1rem;
    height: 100%;
}

.zv-kpi .card-body {
    padding: 1.1rem 1.25rem;
}

.zv-panel {
    border: 0;
    border-radius: 1rem;
}

/* ===============================================*/
/*   Staff portal readability                      */
/*   Scope is .zv-staff, set on the staff layout   */
/*   <body>, so the customer, owner and admin      */
/*   portals keep the theme's existing contrast.   */
/* ===============================================*/

/*
 * The stock Falcon greys are washed out on the staff screens: the muted
 * #748194 lands at about 4.0:1 on white, which fails WCAG AA for body copy,
 * and the .fs--2 labels fall to roughly 11px. Staff work from these lists all
 * day, often on a phone in daylight, so the muted tone and the smallest step
 * are both darkened and the smallest step grown. Values keep the same hue
 * family, so the palette still reads as one theme.
 */
.zv-staff {
    --falcon-gray-600-rgb: 84, 96, 114;
    --falcon-gray-500-rgb: 71, 82, 99;
}

.zv-staff .text-600 {
    color: rgba(var(--falcon-gray-600-rgb), var(--falcon-text-opacity, 1)) !important;
}

.zv-staff .text-500 {
    color: rgba(var(--falcon-gray-500-rgb), var(--falcon-text-opacity, 1)) !important;
}

/*
 * .fs--2 is used for every filter label and table caption, so it is the step
 * that matters most. 0.694rem is about 11px; 0.8125rem keeps it clearly
 * subordinate to 1rem body copy while staying legible, and the small variants
 * grow with it so the hierarchy survives.
 */
.zv-staff .fs--2 {
    font-size: 0.8125rem !important;
}

/*
 * Give the panels a defined edge. The theme flattens card borders to 0 and
 * relies on the shadow alone, which is weak on the light grey staff page
 * background; a hairline keeps card boundaries readable without the heavy
 * boxed-in look.
 */
.zv-staff .zv-panel {
    border: 1px solid #d9e0ea;
    box-shadow: 0 0.25rem 0.75rem -0.5rem rgba(15, 34, 73, 0.18);
}

.zv-staff .card {
    border-color: #d9e0ea;
}

/* The page background was very close to the panel fill, so cards floated. */
.zv-staff [data-layout="container"] {
    background-color: #eef1f6;
}

/* Muted text on the softer badge backgrounds needs a touch more weight. */
.zv-staff .badge.bg-soft-secondary,
.zv-staff .bg-soft-secondary {
    color: #3c4658;
}

.zv-staff a {
    text-underline-offset: 0.15em;
}

/* ---------- Warning banner ---------- */

.zv-warning {
    border: 0;
    border-radius: 1rem;
    background: linear-gradient(135deg, #fff4e0, #ffe9c2);
    border-left: 4px solid #ed9a2c;
}

/* ---------- Breadcrumb on gradient ---------- */

.zv-nav .breadcrumb-item a {
    color: rgba(255, 255, 255, 0.85);
}

.zv-nav .breadcrumb-item a:hover {
    color: #fff;
}

.zv-nav .breadcrumb-item.active {
    color: #fff;
    font-weight: 600;
}

.zv-nav .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.5);
}

/* ---------- Sidebar promo card ---------- */

.zv-promo {
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(4px);
    color: #fff;
}

/* ---------- Primary buttons: ZVend gradient ---------- */

.btn-primary {
    background: linear-gradient(135deg, #0B3F8F 0%, #2A7BE4 60%, #4D9EF8 100%) !important;
    border: 0 !important;
    box-shadow: 0 0.5rem 1rem -0.5rem rgba(11, 63, 143, 0.55);
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, #0A397E 0%, #256FCD 60%, #3F8EEF 100%) !important;
    color: #fff !important;
}

/* ---------- Legacy Falcon card headers (bg-circle-shape bg-shape) ---------- */

.card-header.bg-circle-shape.bg-shape {
    background: var(--zv-gradient-hero) !important;
    border: 0 !important;
}

.card-header.bg-circle-shape.bg-shape .text-light,
.card-header.bg-circle-shape.bg-shape .light {
    color: #fff !important;
}

.card > .card-header:first-child {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

/* ===============================================*/
/*   Branded navigation (enforced new theme)       */
/*   Overrides Falcon navbar styles so the ZVend   */
/*   blue gradient wins on every layout/dark mode  */
/* ===============================================*/

/* -- Vertical sidebar: ZVend blue gradient -- */
/* Falcon paints the sidebar on .navbar-collapse; must override there too */
.navbar-vertical,
.navbar-vertical .navbar-collapse {
    background: var(--zv-gradient-hero) !important;
    border: 0 !important;
}

/* beat Falcon's per-style (transparent/inverted/card/vibrant incl. the
   custom orange vibrant override in user.min.css) */
.navbar-vertical.navbar-light .navbar-collapse,
.navbar-vertical.navbar-dark .navbar-collapse,
.navbar-vertical.navbar-transparent .navbar-collapse,
.navbar-vertical.navbar-inverted .navbar-collapse,
.navbar-vertical.navbar-card .navbar-collapse,
.navbar-vertical.navbar-vibrant .navbar-collapse {
    background: var(--zv-gradient-hero) !important;
}

.navbar-vertical .navbar-brand,
.navbar-vertical .navbar-brand .text-primary {
    color: #fff !important;
}

.navbar-vertical .navbar-nav .nav-link,
.navbar-vertical .collapse .nav-link,
.navbar-vertical .navbar-nav .active,
.navbar-vertical .nav-link .nav-link-text {
    color: rgba(255, 255, 255, 0.85) !important;
}

.navbar-vertical .navbar-nav .nav-link:hover,
.navbar-vertical .collapse .nav-link:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

.navbar-vertical .navbar-nav .nav-link.active,
.navbar-vertical .collapse .nav-link.active {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.16) !important;
    border-left-color: #fff !important;
    font-weight: 600 !important;
}

.navbar-vertical .navbar-toggle-icon .toggle-line,
.navbar-vertical .navbar-toggler-humburger-icon .toggle-line {
    background: #fff !important;
}

/* -- Top navbars: transparent (premium) -- */
.navbar-top,
.navbar-top.navbar-glass {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.navbar-top .navbar-brand,
.navbar-top .navbar-brand .text-primary,
.navbar-top .dropdown-toggle,
.navbar-top a,
.navbar-top .theme-control-toggle-label,
.navbar-top .text-primary {
    color: #0B3F8F !important;
}

.navbar-top .avatar-name {
    color: #0B3F8F !important;
    background: rgba(11, 63, 143, 0.12) !important;
}

.navbar-top .collapse .nav-link {
    color: rgba(11, 63, 143, 0.85) !important;
}

.navbar-top .collapse .nav-link:hover {
    color: #0B3F8F !important;
}

/* keep dropdown content light & readable */
.navbar-top .dropdown-menu {
    background: #fff !important;
}

.navbar-top .dropdown-menu .dropdown-item,
.navbar-top .dropdown-menu a,
.navbar-top .dropdown-menu .dropdown-item .fas,
.navbar-top .dropdown-menu .dropdown-item .fa {
    color: #5e6e82 !important;
}

.navbar-top .dropdown-menu .dropdown-item:hover {
    color: #2A7BE4 !important;
}

/* ===============================================*/
/*   Premium auth pages (login / password)         */
/* ===============================================*/

.zv-auth-canvas {
    position: relative;
    /* Deliberately no overflow:hidden. It used to clip the decorative orbs, but
       it also stopped a login form taller than the viewport from scrolling, so
       the submit button became unreachable on short screens. The orbs are
       position:fixed now, which keeps them bleeding off-screen without ever
       creating a scrollbar, so nothing needs clipping here. */
    background: radial-gradient(1200px 600px at 12% -10%, rgba(77, 158, 248, 0.4), transparent 60%),
        radial-gradient(1000px 520px at 110% 8%, rgba(11, 63, 143, 0.5), transparent 55%),
        linear-gradient(160deg, #0B3F8F 0%, #1e5fc0 45%, #2A7BE4 72%, #4D9EF8 100%);
}

.zv-auth-canvas::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1.4px);
    background-size: 26px 26px;
}

.zv-auth-orb {
    /* Fixed, not absolute: these sit off-canvas (orb-1 hangs 130px below the
       fold, orb-2 hangs 90px off the top-right). Absolute they would stretch
       the scrollable area and add a phantom scrollbar's worth of dead space to
       a form that already fits. Pinned to the viewport they cannot. */
    position: fixed;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.5;
    pointer-events: none;
}

.zv-auth-orb-1 {
    width: 440px;
    height: 440px;
    left: -130px;
    bottom: -130px;
    background: #2A7BE4;
}

.zv-auth-orb-2 {
    width: 360px;
    height: 360px;
    right: -90px;
    top: -90px;
    background: #4D9EF8;
}

.zv-auth-orb-3 {
    width: 240px;
    height: 240px;
    left: 28%;
    top: 8%;
    background: #0B3F8F;
}

.zv-auth-card {
    border: 0;
    border-radius: 1.5rem;
    box-shadow: 0 2rem 5rem -1.75rem rgba(4, 20, 60, 0.6);
}

.zv-auth-body {
    padding: 2.4rem 1.75rem 1.75rem;
}

@media (min-width: 992px) {
    .zv-auth-body {
        padding: 3rem 3.25rem 2.25rem;
    }
}

.zv-auth-footer {
    border-top: 1px solid #e3eaf4;
    padding: 1.1rem 1.75rem;
    text-align: center;
    background: #f8fafd;
    font-size: .78rem;
}

.zv-auth-footer p {
    line-height: 1.75;
}

.zv-auth-logo {
    border-radius: 1.1rem;
    box-shadow: 0 0.75rem 1.75rem -0.6rem rgba(11, 63, 143, 0.45);
}

.zv-auth-input {
    position: relative;
}

.zv-auth-input > .fa,
.zv-auth-input > .fas,
.zv-auth-input > svg.svg-inline--fa {
    position: absolute;
    left: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    color: #2A7BE4;
    font-size: 1rem;
    z-index: 2;
    pointer-events: none;
}

.zv-auth-input .fa > svg,
.zv-auth-input .fas > svg {
    width: 1em;
    height: 1em;
}

.zv-auth-input .form-control {
    padding: 0.72rem 3.3rem;
    border-radius: 0.85rem;
    border: 1px solid #e3eaf4;
    background: #f7faff;
    font-size: 0.95rem;
}

.zv-auth-input .form-control:focus {
    background: #fff;
    border-color: #2A7BE4;
    box-shadow: 0 0 0 0.25rem rgba(42, 123, 228, 0.12);
}

.zv-pass-toggle {
    position: absolute;
    right: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border: 0;
    border-radius: 0.55rem;
    background: transparent;
    color: #8ea0b5;
    cursor: pointer;
    z-index: 2;
    font-size: 1rem;
    line-height: 1;
}

.zv-pass-toggle:hover {
    color: #2A7BE4;
}

.zv-pass-toggle .fa > svg,
.zv-pass-toggle .fas > svg,
.zv-pass-toggle > svg.svg-inline--fa {
    width: 1em;
    height: 1em;
}

.zv-auth-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: #8ea0b5;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.zv-auth-divider::before,
.zv-auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e6edf6;
}

/* ===============================================*/
/*   PWA bottom navigation (customer pages)        */
/* ===============================================*/

.zv-tabbar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    align-items: center;
    justify-content: space-around;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(11, 63, 143, 0.08);
    box-shadow: 0 -0.5rem 1.5rem -0.85rem rgba(15, 34, 73, 0.25);
    padding: 0.4rem 0.5rem calc(0.4rem + env(safe-area-inset-bottom, 0px));
}

.zv-tabbar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    min-width: 5.1rem;
    padding: 0.3rem 0.6rem;
    border-radius: 1rem;
    color: #5e6e82;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.zv-tabbar-item .fa,
.zv-tabbar-item .fas {
    font-size: 2.3rem;
    line-height: 1;
}

.zv-tabbar-item:hover {
    color: #2A7BE4;
    text-decoration: none;
}

.zv-tabbar-item.active {
    color: #2A7BE4;
    background: rgba(42, 123, 228, 0.12);
}

.zv-tabbar-item.active .fa,
.zv-tabbar-item.active .fas {
    color: #2A7BE4;
}

@media (max-width: 991.98px) {
    .zv-tabbar {
        display: flex;
    }

    .main {
        padding-bottom: calc(5.6rem + env(safe-area-inset-bottom, 0px));
    }
}

/* ---------- Record list cards (vending / transaction / wallet history) ---------- */

.zv-list-card {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.9rem 1rem;
    border-radius: 1.1rem;
    background: #fff;
    border: 1px solid rgba(11, 63, 143, 0.08);
    box-shadow: 0 0.35rem 1rem -0.7rem rgba(15, 34, 73, 0.15);
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.zv-list-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.9rem 1.8rem -1rem rgba(15, 34, 73, 0.32);
    border-color: rgba(42, 123, 228, 0.4);
}

.zv-list-card .flex-1 {
    min-width: 0;
}

a.zv-list-card {
    text-decoration: none !important;
    color: #5e6e82;
}

a.zv-list-card:hover {
    color: #5e6e82;
}

.zv-list-icon {
    flex: 0 0 auto;
    width: 2.9rem;
    height: 2.9rem;
    display: grid;
    place-items: center;
    border-radius: 0.9rem;
    color: #fff;
    font-size: 1.15rem;
}

.zv-list-icon-blue {
    background: linear-gradient(135deg, #0B3F8F, #2A7BE4 60%, #4D9EF8);
    box-shadow: 0 0.6rem 1.2rem -0.5rem rgba(42, 123, 228, 0.6);
}

.zv-list-icon-success {
    background: linear-gradient(135deg, #0faf78, #31d39f);
    box-shadow: 0 0.6rem 1.2rem -0.5rem rgba(15, 175, 120, 0.6);
}

.zv-list-icon-warning {
    background: linear-gradient(135deg, #ee9a2d, #ffbe5e);
    box-shadow: 0 0.6rem 1.2rem -0.5rem rgba(238, 154, 45, 0.6);
}

.zv-list-icon-info {
    background: linear-gradient(135deg, #0fb4d8, #3ccfea);
    box-shadow: 0 0.6rem 1.2rem -0.5rem rgba(15, 180, 216, 0.6);
}

.zv-list-prim {
    font-weight: 700;
    color: #0B3F8F;
    word-break: break-word;
    line-height: 1.3;
}

.zv-list-meta {
    font-size: 0.78rem;
    color: #6c757d;
    line-height: 1.45;
}

.zv-list-amt {
    white-space: nowrap;
    font-weight: 800;
    color: #0B3F8F;
    font-size: 0.95rem;
    line-height: 1.3;
}

/* ---------- PWA install prompt ---------- */

.zv-pwa-install {
    position: fixed;
    left: 50%;
    /* max() keeps the card clear of the iOS home indicator when the app is
       running standalone with viewport-fit=cover, and is a no-op otherwise. */
    bottom: max(18px, env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    width: min(420px, calc(100% - 24px));
    z-index: 1080;
}

.zv-pwa-install-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    background: #ffffff;
    border: 1px solid #e3eaf4;
    border-radius: 1rem;
    box-shadow: 0 1.2rem 2.8rem -1rem rgba(11, 63, 143, 0.35);
    padding: 10px 12px;
    font-size: 0.82rem;
}

/* Shown instead of the Install button on platforms with no install API. */
.zv-pwa-install-steps {
    flex-basis: 100%;
    margin: 0;
    padding-left: 20px;
    color: #5a6a80;
    font-size: 0.78rem;
    line-height: 1.5;
}

.zv-pwa-install-steps strong {
    color: #0B3F8F;
}

.zv-pwa-install-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
}

.zv-pwa-install-card .flex-1 {
    flex: 1;
    min-width: 0;
}

.zv-pwa-install-card .flex-1 strong {
    color: #0B3F8F;
}

.zv-pwa-install-card .btn-subtle {
    color: #8a97a8;
}

/* ------------------------------------------------------------------
   Scrollable modal bodies
   Falcon replaces Bootstrap's rules for .modal-dialog-scrollable:
       .modal-dialog-scrollable .modal-content{max-height:100%;overflow:hidden}
       .modal-dialog-scrollable .modal-body{overflow-y:auto}
   It drops display:flex/flex-direction:column from .modal-content and
   min-height:0 from .modal-body, so with no definite height the percentage
   max-height resolves against an auto-height parent, the body never becomes
   the scroll container, and overflow:hidden clips the rest of the form.
   Bootstrap also assumes .modal-body and .modal-footer are direct children of
   .modal-content. Where a <form> wraps both, that form is the real flex child
   and has to be made a flex column itself, otherwise the height constraint
   stops at the form and the body still cannot scroll.
   ------------------------------------------------------------------ */
.modal-dialog-scrollable .modal-content {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 1.5rem) !important;
}

.modal-dialog-scrollable .modal-content>form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.modal-dialog-scrollable .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* ------------------------------------------------------------------
   Staff mobile menu
   #staffMobileNav is rendered into .content rather than inside .navbar-top,
   so the navbar padding/typography rules never reach it and the items sit
   flush against the screen edge with no breathing room or tap target.
   ------------------------------------------------------------------ */
#staffMobileNav {
    padding: 0.5rem 0.5rem 0.75rem;
}

#staffMobileNav .navbar-nav {
    padding: 0;
}

/* ------------------------------------------------------------------
   Staff navigation
   Nothing is scoped here any more. The staff sidebar used to carry a
   denser padding of its own, and a #staffMobileNav dropdown theme, which
   is why the staff portal did not look like the customer and owner
   portals. Both now render through the same Falcon vertical nav as the
   other two, so they are left alone.
   ------------------------------------------------------------------ */