/* * Member area (layouts "bvpro" and "login"): phone and tablet overrides. * Every rule sits inside a max-width media query <= 991.98px: desktop rendering (>= 992px) must stay identical. * Linked last in the layout (after the Metronic and DataTables bundles), so equal-specificity * "!important" Metronic utilities lose on source order. */ @media (max-width: 991.98px) { /* Metronic sets the root size to 13px (12px below 768px); 14px keeps body text readable. */ html, body { font-size: 14px !important; } .fs-7, .fs-8, .fs-9, .small, small, .form-label, .menu-link, .page-link, .stepper-desc, .badge:not(.badge-circle), div.dataTables_wrapper div.dataTables_info, div.dataTables_wrapper div.dataTables_length, div.dataTables_wrapper div.dataTables_filter { font-size: 14px !important; } /* iOS Safari zooms into any focused field below 16px. */ input.form-control, textarea.form-control, select.form-control, select.form-select, .select2-container .select2-selection, .select2-container .select2-search__field { font-size: 16px !important; } /* Touch targets: 40px minimum. */ .btn.btn-icon.w-30px, .btn.btn-icon.btn-sm { width: 40px !important; height: 40px !important; } .badge.bvm-profile-menu-toggle { width: 40px !important; height: 40px !important; } .btn-close { box-sizing: border-box; width: 40px; height: 40px; } .menu-sub-dropdown .menu-link { min-height: 40px; } div.dataTables_wrapper .page-link { min-width: 40px; min-height: 40px; display: flex; align-items: center; justify-content: center; } /* Generic wrapping hook for toolbars and header rows. */ .bvm-wrap { flex-wrap: wrap; row-gap: .5rem; } /* Dashboard: main column (toolbar, KPIs, tabs) first, profile card after. */ .bvm-dashboard-sidebar { order: 2; margin-top: 1.25rem; } /* Toolbar (search, notifications, actions). */ .bvm-profil-topbar-row.overflow-scroll { overflow: visible !important; } .bvm-topbar { flex: 1 1 100%; flex-wrap: wrap; } .bvm-topbar-search { flex: 1 1 100%; position: relative; } /* The search dropdown carries a desktop-computed inline position: re-anchor it under the field. */ #search-bar { position: absolute !important; inset: calc(100% + .25rem) 0 auto 0 !important; transform: none !important; width: auto !important; } .bvm-notif-menu { width: calc(100vw - 2rem) !important; max-width: 375px; } /* Dashboard tabs: wrap so that every tab stays visible without horizontal scrolling. */ .bvm-tabs { flex-wrap: wrap; row-gap: .25rem; } .bvm-tabs.nav-line-tabs .nav-item .nav-link { margin: 0 .5rem; min-height: 44px; } /* Referral tables: internal scroll, action column kept visible. */ .table_mer_recues th:last-child, .table_mer_recues td:last-child:not(.dataTables_empty), .table_mer_donnees th:last-child, .table_mer_donnees td:last-child:not(.dataTables_empty) { position: sticky; right: 0; z-index: 1; background-color: #ffffff; } .table_mer_recues td:first-child, .table_mer_donnees td:first-child { white-space: nowrap; } div.dataTables_wrapper div.dataTables_filter { float: none; text-align: left; } div.dataTables_wrapper div.dataTables_filter label { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; width: 100%; } div.dataTables_wrapper div.dataTables_filter input { flex: 1 1 12rem; margin-left: 0 !important; min-height: 40px; } div.dataTables_wrapper div.dataTables_paginate ul.pagination { flex-wrap: wrap; justify-content: center !important; row-gap: .25rem; } /* Member cards and lists. */ .bvm-card-actions { flex-wrap: wrap; justify-content: center; gap: .5rem; } .bvm-card-actions .btn { margin-left: 0 !important; margin-right: 0 !important; } .bvm-list-membres td.text-end { white-space: normal; } .btn.bg-bv-90 { white-space: normal; overflow-wrap: anywhere; } #tab_edit .select2-container { width: 100% !important; } /* Modals: full screen below 992px (modal-fullscreen-lg-down), header and footer always reachable. */ .modal-fullscreen-lg-down .modal-content { border-radius: 0 !important; } .modal-fullscreen-lg-down.mw-900px { max-width: none !important; } .modal-fullscreen-lg-down .modal-footer { flex-wrap: wrap; gap: .5rem; } /* modalViewMer wraps header, body and footer in a
: let it fill the full-screen content so the body scrolls. */ .modal-fullscreen-lg-down .modal-content > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .progress.bvm-mer-statuts { flex-direction: column; height: auto !important; gap: 2px; } .bvm-mer-statuts .mer_statut { width: 100% !important; min-height: 40px; } /* Login layout: keep the form off the screen edges. */ .bvm-login-content { padding: 0 1rem 2rem; } /* This flex item of ".page" (unclassed in the template) carries Metronic's ".flex-column-fluid" (flex: 1 0 auto): flex-shrink 0 and the default min-width: auto both let it grow to its max-content width instead of shrinking to the viewport, dragging .bvm-login-content with it. */ .page > .d-flex.flex-column.flex-lg-row.flex-column-fluid { flex-shrink: 1; min-width: 0; } } @media (max-width: 575.98px) { /* Phones: give the content its width back. */ .bvm-main.p-5 { padding: .75rem !important; } .bvm-main .card > .card-header, .bvm-main .card > .card-body { padding-left: 1rem; padding-right: 1rem; } }