/* ========================================= Vision Money Transfer — FULL CSS Desktop + Mobile sidebar, flyout submenu (no scrollbars), dark mode ========================================= */ /* Stop any horizontal scroll from overlays/flyouts */ html, body { overflow-x: hidden; } /* Variables */ :root{ --vb-topbar-h:56px; --vb-sidebar-width:270px; --vb-sidebar-collapsed-width:72px; } /* Base */ .vb-body{min-height:100vh;background-color:#f6f7fb} /* Topbar & App layout */ .vb-topbar{z-index:1080} /* above sidebar & menus */ .vb-app{display:flex;min-height:calc(100vh - var(--vb-topbar-h))} /* ------------------------- Sidebar (shared) ------------------------- */ .vb-sidebar{ position:fixed; top:var(--vb-topbar-h); bottom:0; left:0; width:var(--vb-sidebar-width); overflow-y:auto; /* scroll vertically */ overflow-x:hidden; /* IMPORTANT: never widen layout */ z-index:1070; /* sits above content */ background:var(--bs-body-bg); border-right:1px solid rgba(0,0,0,.06); } /* Sidebar links */ .vb-sidebar .nav-link{ color:#495057; border-radius:.5rem; padding:.55rem .75rem; margin:.15rem 0; white-space:nowrap; overflow:hidden; } .vb-sidebar .nav-link:hover{background-color:#e9ecef} .vb-sidebar .nav-link .bi{width:1.5rem;text-align:center} /* Content */ .vb-content{ margin-top:var(--vb-topbar-h); margin-left:var(--vb-sidebar-width); flex:1; position:relative; z-index:1; } /* Cards */ .vb-card{border:0} .vb-card .display-6{font-size:2rem} /* ------------------------- Desktop collapsed mode ------------------------- */ @media (min-width: 992px){ .body-collapsed .vb-sidebar{width:var(--vb-sidebar-collapsed-width)} .body-collapsed .vb-content{margin-left:var(--vb-sidebar-collapsed-width)} .body-collapsed .vb-nav-text{display:none} .body-collapsed .vb-sidebar .nav-link .bi{margin-right:0} .body-collapsed .vb-sidebar-header .vb-nav-text{display:none} .body-collapsed .vb-sidebar-footer{display:none} } /* ------------------------- Dropdowns / Flyout ------------------------- */ /* Normal dropdown (expanded desktop + mobile): open inline to avoid overlaps */ .vb-sidebar .dropdown-menu{ position: static !important; /* override Popper inline styles */ float: none; transform: none !important; /* override Popper inline transform */ inset: auto !important; /* reset top/right/bottom/left from Popper */ top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; display: none; /* Bootstrap toggles .show -> block */ box-shadow: none; border: 0; border-radius:.5rem; padding:.25rem 0; z-index:1095; /* above sidebar (1070) and content (1) */ } .vb-sidebar .dropdown-menu.show{ display:block; } /* Also display when Bootstrap adds .show on the parent .dropdown */ .vb-sidebar .dropdown.show > .dropdown-menu{ display:block; } /* Flyout menu used only when sidebar is collapsed on desktop. We append the menu to , position it fixed, and style it here. */ .vb-flyout{ position:fixed !important; min-width:200px; max-height:calc(100vh - 16px); overflow:auto; box-shadow:0 .5rem 1rem rgba(0,0,0,.15); border-radius:.5rem; transform:none !important; /* neutralize popper transforms */ will-change: top, left; z-index:1096; /* highest in our stack */ background:var(--bs-body-bg); } /* Rotate caret when open */ .vb-sidebar .dropdown-toggle::after{transition:transform .2s} .vb-sidebar .dropdown-toggle.show::after{transform:rotate(180deg)} /* ------------------------- Mobile behavior (off-canvas) ------------------------- */ @media (max-width: 991.98px){ /* Sidebar hidden by default on mobile */ .vb-sidebar{ transform:translateX(-100%); transition:transform .2s ease-in-out; width:var(--vb-sidebar-width); box-shadow:0 .5rem 1rem rgba(0,0,0,.15); } /* Slide in when body has .sidebar-open */ .sidebar-open .vb-sidebar{transform:translateX(0)} /* Content never shifts on mobile */ .vb-content{margin-left:0} /* Clickable dark overlay when open */ .sidebar-open::before{ content:""; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:1060; /* below sidebar (1070), above content (1) */ } /* Ensure text shows even if body-collapsed is present */ .vb-sidebar .vb-nav-text{display:inline !important} } /* ------------------------- Login page ------------------------- */ .vb-login-body{min-height:100vh} .form-signin{max-width:420px} /* ------------------------- Dark mode ------------------------- */ .vb-dark{background-color:#0b0e14;color:#e7eaf3} .vb-dark .bg-body-tertiary{background-color:#111521 !important} .vb-dark .card{background-color:#141a29;color:#dce3f1} .vb-dark .vb-sidebar{background-color:#111521} .vb-dark .nav-link{color:#cfd6e6} .vb-dark .nav-link:hover{background-color:#1a2032} /* ------------------------- Subtle badges ------------------------- */ .badge.bg-success-subtle{background-color:rgba(25,135,84,.1)} .badge.bg-warning-subtle{background-color:rgba(255,193,7,.12)} .badge.bg-danger-subtle{background-color:rgba(220,53,69,.1)} /* ------------------------- Page footer ------------------------- */ .vb-page-footer{ background-color:#fff; border-top:1px solid rgba(0,0,0,.08); margin-left:var(--vb-sidebar-width); transition:margin-left .2s ease; } @media (min-width: 992px){ .body-collapsed .vb-page-footer{margin-left:var(--vb-sidebar-collapsed-width)} } @media (max-width: 991.98px){ .vb-page-footer{margin-left:0} } .vb-dark .vb-page-footer{ background-color:#111521; border-top-color:#1a2032; color:#cfd6e6; } /* ------------------------- Processing overlay (used on Process action) ------------------------- */ .vb-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.35); display:none; align-items:center; justify-content:center; z-index:2000; } .vb-overlay.show{display:flex} .vb-overlay .vb-overlay-box{color:#fff;text-align:center} /* Ensure Bootstrap modal overlays above our topbar/sidebar/footer */ .modal{z-index:2001} .modal-backdrop{z-index:2000} /* ------------------------- Compact form mode (fit more on screen) Apply class .vb-compact to the form/container ------------------------- */ /* Reduce outer paddings */ .vb-compact.card{ padding: .75rem !important; } .vb-compact .container-fluid{ padding-top: .75rem !important; padding-bottom: .75rem !important; } /* Tighter fieldsets */ .vb-compact fieldset{ padding: .5rem !important; margin-bottom: .75rem !important; } .vb-compact legend{ font-size: .95rem; margin-bottom: .25rem; } /* Labels and controls */ .vb-compact label.form-label{ margin-bottom: .25rem; font-size: .9rem; } .vb-compact .form-control, .vb-compact .form-select{ padding: .25rem .5rem; height: calc(1.5em + .5rem + 2px); font-size: .9rem; } /* Reduce default spacing */ .vb-compact .mb-3{ margin-bottom: .5rem !important; } .vb-compact .row{ --bs-gutter-x: .5rem; --bs-gutter-y: .25rem; } /* Buttons */ .vb-compact .btn{ padding: .375rem .5rem; font-size: .9rem; } .vb-compact .d-flex.gap-2{ gap: .5rem !important; } /* Fieldset headings bold globally */ fieldset > legend{ font-weight: 600; } /* Only the legend in Beneficiary section (not labels) */ .vb-section-beneficiary legend{ font-weight: 600; }