/* ============================================================
Ballour Admin v2 — Responsive polish (loaded last)
------------------------------------------------------------
Breakpoints (Bootstrap 4 compatible):
• xs < 576px phones
• sm ≥ 576px large phones / phablets
• md ≥ 768px tablets portrait
• lg ≥ 992px tablets landscape / small laptops
• xl ≥ 1200px desktops
• xxl ≥ 1400px large desktops
Goal: every page in /admin works smoothly from 360px up.
This file intentionally lives LAST in the v2 stack so its
rules override earlier component styles when needed.
============================================================ */
/* ============================================================
0. GLOBAL RESET & SAFETY
============================================================ */
html, body { overflow-x: hidden; }
/* prevent the legacy admin from overflowing horizontally because
of an over-sized table or a fixed-width modal */
body.theme-v2 .container-fluid {
max-width: 100%;
overflow-x: clip;
}
/* every direct child of .container-fluid that holds raw text
should never push the page horizontally */
body.theme-v2 .page-wrapper > .container-fluid > * {
min-width: 0;
}
/* every image / iframe / video by default behaves */
body.theme-v2 img,
body.theme-v2 iframe,
body.theme-v2 video,
body.theme-v2 canvas {
max-width: 100%;
height: auto;
}
/* ============================================================
1. SIDEBAR — mobile overlay + readable item labels
------------------------------------------------------------
The sidebar already slides in via translateX. We add a
tappable scrim under it so the content is dimmed and the
off-canvas can close by tapping outside.
We also force the sidebar to its full readable width (instead
of accidentally inheriting the desktop "mini-sidebar"
collapsed width) so item labels are clear.
============================================================ */
@media (max-width: 991.98px) {
body.theme-v2 aside.left-sidebar {
z-index: 1060 !important;
box-shadow: 0 12px 32px rgba(15, 23, 42, .25);
-webkit-backdrop-filter: none;
backdrop-filter: none;
filter: none;
}
/* Force the sidebar to be scrollable on mobile — slimScroll plugin
wraps .scroll-sidebar inside .slimScrollDiv and sets inline
overflow:hidden on both, which kills touch scrolling. */
body.theme-v2 aside.left-sidebar .slimScrollDiv,
body.theme-v2 aside.left-sidebar .scroll-sidebar {
overflow: auto !important;
overflow-y: auto !important;
height: 100% !important;
-webkit-overflow-scrolling: touch;
}
/* Scrim — uses an injected pseudo on body itself so we don't
need to alter the markup. */
body.theme-v2.show-sidebar::before {
content: "";
position: fixed;
inset: 0;
background: rgba(15, 23, 42, .55);
z-index: 1030;
pointer-events: auto;
animation: bl-fade-in .2s ease;
}
body.theme-v2.show-sidebar { overflow: hidden; }
@keyframes bl-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
/* On mobile / tablet we NEVER want the legacy "mini-sidebar"
mode because the sidebar is already a full-screen drawer.
Force every label back to visible regardless of how the
legacy CSS hid it (display:none / opacity / visibility). */
body.theme-v2.mini-sidebar aside.left-sidebar {
width: var(--bl-sidebar-w) !important;
}
body.theme-v2.mini-sidebar #sidebarnav > li > a .hide-menu,
body.theme-v2 #sidebarnav > li > a .hide-menu {
display: inline-block !important;
opacity: 1 !important;
visibility: visible !important;
position: static !important;
transform: none !important;
pointer-events: auto !important;
background: transparent !important;
color: inherit !important;
font-size: 14px;
font-weight: 500;
padding: 0 !important;
border: 0 !important;
box-shadow: none !important;
white-space: normal !important;
z-index: auto !important;
}
/* Kill the desktop tooltip-arrow that section 17B adds. */
body.theme-v2.mini-sidebar #sidebarnav > li > a .hide-menu::before,
body.theme-v2 #sidebarnav > li > a .hide-menu::before {
display: none !important;
content: none !important;
}
body.theme-v2.mini-sidebar .bl-sidebar-brand__name,
body.theme-v2.mini-sidebar .bl-sidebar-brand__sub,
body.theme-v2.mini-sidebar .bl-sidebar-brand__code,
body.theme-v2.mini-sidebar .bl-sidebar-brand__visit,
body.theme-v2.mini-sidebar .bl-sidebar-user__info,
body.theme-v2.mini-sidebar .bl-section-label {
display: revert !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
/* Re-show submenu arrow on mobile (we hide it only in
desktop collapsed mode for the tooltip). */
body.theme-v2.mini-sidebar #sidebarnav > li > a.has-arrow::after,
body.theme-v2 #sidebarnav > li > a.has-arrow::after {
display: block !important;
}
/* Items align icon + text horizontally, label takes the row. */
body.theme-v2.mini-sidebar #sidebarnav > li > a {
justify-content: flex-start !important;
}
/* Drawer width: comfortable on phones, never crowds icons. */
body.theme-v2 aside.left-sidebar {
width: min(86vw, 320px) !important;
}
/* The page wrapper / topbar must NOT keep margin-inline-start
reserved for a desktop sidebar — the drawer is overlaid. */
body.theme-v2 .page-wrapper,
body.theme-v2.mini-sidebar .page-wrapper {
margin-inline-start: 0 !important;
margin-inline-end: 0 !important;
padding-top: 68px !important;
}
body.theme-v2 header.topbar,
body.theme-v2.mini-sidebar header.topbar {
inset-inline-start: 0 !important;
}
/* Sidebar nav rows: allow text to wrap on long captions
(e.g. "قسائم التخفيض", "السلات المتروكة") so it never
collides with the next item or its icon. */
body.theme-v2 #sidebarnav > li > a {
white-space: normal !important;
line-height: 1.35;
align-items: center;
padding: 11px 14px;
gap: 12px;
}
body.theme-v2 #sidebarnav > li > a .hide-menu {
display: inline-block !important;
overflow: visible;
text-overflow: clip;
white-space: normal !important;
word-break: keep-all;
line-height: 1.35;
}
body.theme-v2 #sidebarnav > li > a > i {
font-size: 18px;
flex-shrink: 0;
}
/* Section labels stand out a bit more on mobile. */
body.theme-v2 .sidebar-nav .bl-section-label {
font-size: 11px;
padding: 16px 14px 6px;
opacity: .9;
}
/* Sub-menu items get the same wrapping treatment. */
body.theme-v2 #sidebarnav ul > li > a {
white-space: normal !important;
line-height: 1.35;
}
/* Small visual tightening: the brand row uses smaller text
so long store names don't push the close (X) button. */
body.theme-v2 .bl-sidebar-brand {
padding: 18px 14px 14px;
}
body.theme-v2 .bl-sidebar-brand__name { font-size: 15px; }
}
/* Phones: drawer takes most of the screen for clarity. */
@media (max-width: 575.98px) {
body.theme-v2 aside.left-sidebar {
width: min(88vw, 300px) !important;
}
body.theme-v2 #sidebarnav > li > a {
font-size: 14px;
padding: 11px 14px;
}
}
/* Tiny phones: trim padding so 3+ word labels still fit on
one or two lines without breaking. */
@media (max-width: 359.98px) {
body.theme-v2 aside.left-sidebar {
width: 84vw !important;
}
body.theme-v2 #sidebarnav > li > a {
padding: 10px 12px;
gap: 10px;
font-size: 13.5px;
}
}
/* on tablet portrait the sidebar should collapse by default to
leave more room for the page content */
@media (min-width: 768px) and (max-width: 991.98px) {
body.theme-v2 .page-wrapper {
margin-inline-start: 0 !important;
}
body.theme-v2 header.topbar {
inset-inline-start: 0 !important;
}
}
/* ============================================================
2. TOPBAR — phones
============================================================ */
@media (max-width: 991.98px) {
/* Hide the desktop search field — keep the icon */
body.theme-v2 header.topbar .Search_input {
display: none !important;
}
/* Tighter padding so action icons fit */
body.theme-v2 header.topbar .navbar.top-navbar {
padding: 0 10px;
}
/* User profile dropdown — rows must show full text */
}
/* ============================================================
TOPBAR DROPDOWNS — anchor under the trigger on every size
------------------------------------------------------------
The avatar / language / notifications triggers sit at the
inline-END of the topbar (left side in RTL, right side in LTR).
Bootstrap's `.dropdown-menu-right` aligns the menu's INLINE-END
edge with the trigger — which means in RTL the menu opens
towards the left edge of the screen and overflows.
We invert this so the menu's INLINE-START edge anchors to the
trigger and grows towards the page (away from the viewport
edge).
============================================================ */
/* Always-on topbar dropdown rules (outside any width media query). */
body.theme-v2 header.topbar .nav-item.dropdown {
position: relative;
}
/* IMPORTANT: only override transform/position when the menu is
ACTUALLY OPEN (`.show`). If we override on the closed state we
undo the legacy `.scale-up { transform: scale(0); }` rule and
the menu becomes visible at page load. */
body.theme-v2 header.topbar .dropdown-menu.show {
transform: none !important;
top: 100% !important;
bottom: auto !important;
margin-top: 6px !important;
max-width: calc(100vw - 24px);
max-height: calc(100vh - var(--bl-topbar-h, 64px) - 24px);
overflow-y: auto;
}
/* RTL: the trigger is at the LEFT side of the topbar; align the
menu's left edge with the trigger so it grows rightwards. */
html[dir="rtl"] body.theme-v2 header.topbar .dropdown-menu.show,
html[dir="rtl"] body.theme-v2 header.topbar .dropdown-menu-right.show {
right: auto !important;
left: 0 !important;
}
/* LTR: align the menu's right edge with the trigger so it grows leftwards. */
html[dir="ltr"] body.theme-v2 header.topbar .dropdown-menu.show,
html[dir="ltr"] body.theme-v2 header.topbar .dropdown-menu-right.show {
right: 0 !important;
left: auto !important;
}
/* ============================================================
TEMPORARILY HIDE the notifications icon (bell).
The feature is not in use yet; remove this block to re-enable.
============================================================ */
body.theme-v2 header.topbar .nav-item.dropdown:has(> a .fa-bell),
body.theme-v2 header.topbar .nav-item.dropdown:has(> a .mdi-bell-outline),
body.theme-v2 header.topbar .nav-item.dropdown:has(> a .mdi-bell) {
display: none !important;
}
/* Phone-specific tweaks remain inside the mobile media query. */
@media (max-width: 991.98px) {
body.theme-v2 header.topbar .dropdown-user li > a {
display: flex !important;
align-items: center;
gap: 10px;
padding: 10px 12px !important;
font-size: 14px;
color: var(--bl-text);
border-radius: var(--bl-radius-sm, 8px);
white-space: normal;
line-height: 1.3;
}
body.theme-v2 header.topbar .dropdown-user li > a > i,
body.theme-v2 header.topbar .dropdown-user li > a > .mdi,
body.theme-v2 header.topbar .dropdown-user li > a > .fa {
order: 1;
font-size: 16px;
width: 20px;
text-align: center;
flex-shrink: 0;
}
body.theme-v2 header.topbar .dropdown-user li > a {
/* Use logical text alignment so the label hugs the icon
and never gets clipped. */
text-align: start;
}
body.theme-v2 header.topbar .dropdown-user li > a:hover {
background: var(--bl-surface-2);
color: var(--bl-brand);
}
/* Header (avatar + name + email) inside the user dropdown */
body.theme-v2 .dropdown-user .dw-user-box {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
}
body.theme-v2 .dropdown-user .dw-user-box .u-text {
flex: 1;
min-width: 0;
}
body.theme-v2 .dropdown-user .dw-user-box .u-text h4,
body.theme-v2 .dropdown-user .dw-user-box .u-text p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
@media (max-width: 575.98px) {
body.theme-v2 header.topbar .nav-link {
padding: 0 6px !important;
}
body.theme-v2 header.topbar .nav-link i {
font-size: 18px;
}
}
/* ============================================================
3. PAGE CONTAINER — spacing per breakpoint
============================================================ */
@media (max-width: 1199.98px) {
body.theme-v2 .page-wrapper > .container-fluid {
padding: 18px 18px 40px;
}
}
@media (max-width: 767.98px) {
body.theme-v2 .page-wrapper > .container-fluid {
padding: 14px 12px 32px;
}
}
@media (max-width: 479.98px) {
body.theme-v2 .page-wrapper > .container-fluid {
padding: 12px 10px 28px;
}
}
/* ============================================================
4. CARDS & ROWS
============================================================ */
@media (max-width: 767.98px) {
body.theme-v2 .card {
margin-bottom: 14px !important;
}
body.theme-v2 .card .card-body {
padding: 14px !important;
}
body.theme-v2 .row {
margin-inline: -8px;
}
body.theme-v2 .row > [class*="col-"] {
padding-inline: 8px;
}
}
/* ============================================================
5. FORMS — collapse split columns on phones
============================================================ */
@media (max-width: 575.98px) {
/* Force every Bootstrap col-sm-6 / col-md-6 / col-lg-6 row to
become single column on tiny phones */
body.theme-v2 form .col-sm-6,
body.theme-v2 form .col-md-6,
body.theme-v2 form .col-md-4,
body.theme-v2 form .col-lg-6,
body.theme-v2 form .col-lg-4 {
flex: 0 0 100% !important;
max-width: 100% !important;
}
body.theme-v2 .form-group {
margin-bottom: 12px;
}
body.theme-v2 .form-control {
font-size: 14px;
height: 42px;
}
body.theme-v2 textarea.form-control {
height: auto;
min-height: 88px;
}
/* Sticky save bar — full-width on phones */
body.theme-v2 .bl-form-savebar,
body.theme-v2 .row > [class*="col-"][class*="text-"]:last-child:has(> button[type="submit"]),
body.theme-v2 .row.ADD_producte > [class*="col-"][class*="text-"]:last-child {
flex-wrap: wrap;
gap: 8px !important;
}
body.theme-v2 .bl-form-savebar > button,
body.theme-v2 .bl-form-savebar > a,
body.theme-v2 .row.ADD_producte > [class*="col-"][class*="text-"]:last-child > button,
body.theme-v2 .row.ADD_producte > [class*="col-"][class*="text-"]:last-child > a {
flex: 1 1 calc(50% - 4px);
min-width: 0;
}
}
/* ============================================================
6. TABLES — horizontal scroll on tablets/phones
------------------------------------------------------------
Listing tables (orders, clients, coupons, …) have many
columns. On smaller screens we MUST allow horizontal scroll
inside `.table-responsive`. We also override any ancestor
that may have set `overflow: hidden`.
============================================================ */
/* Always-on: .table-responsive should be scrollable horizontally.
This applies on every viewport (desktop included) so wide tables
never get truncated. */
body.theme-v2 .table-responsive {
overflow-x: auto !important;
overflow-y: visible;
-webkit-overflow-scrolling: touch;
}
/* Any wrapper that contains a .table-responsive must NOT clip its
horizontal overflow. */
body.theme-v2 .card,
body.theme-v2 .card-body,
body.theme-v2 .card .card-body > .row,
body.theme-v2 .card .card-body > .row > [class*="col-"] {
overflow-x: visible;
}
@media (max-width: 991.98px) {
/* Raw tables (no .table-responsive wrapper) get a fallback
scroll container by turning the table itself into a
scrolling block. */
body.theme-v2 .card .card-body > table,
body.theme-v2 .card .card-body > .table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
}
/* Force a sensible min-width so the columns don't squish into
each other and there's something to scroll. */
body.theme-v2 .table-responsive table {
min-width: 720px;
}
/* Visual hint: a thin styled scrollbar so users know they
can scroll horizontally. */
body.theme-v2 .table-responsive::-webkit-scrollbar {
height: 6px;
}
body.theme-v2 .table-responsive::-webkit-scrollbar-track {
background: transparent;
}
body.theme-v2 .table-responsive::-webkit-scrollbar-thumb {
background: var(--bl-border, #e2e8f0);
border-radius: 4px;
}
body.theme-v2 .table-responsive::-webkit-scrollbar-thumb:hover {
background: var(--bl-text-muted, #94a3b8);
}
/* Cells: keep content on a single line (otherwise the scroll
hint disappears and rows become tall). */
body.theme-v2 .card .card-body .table.table-hover thead tr th,
body.theme-v2 .card .card-body .table.table_text_canter thead tr th,
body.theme-v2 .card .card-body .table.table-hover tbody tr td,
body.theme-v2 .card .card-body .table.table_text_canter tbody tr td {
white-space: nowrap !important;
}
/* Pagination row — phones */
body.theme-v2 .pagination_container,
body.theme-v2 .pagination,
body.theme-v2 nav[aria-label*="pagin"] {
flex-wrap: wrap;
gap: 4px;
justify-content: center !important;
}
}
/* Phones: bump min-width so the scroll is obvious and rows align. */
@media (max-width: 575.98px) {
body.theme-v2 .table-responsive table {
min-width: 640px;
}
}
/* ============================================================
7. MODALS — full-width on phones
============================================================ */
@media (max-width: 575.98px) {
body.theme-v2 .modal-dialog {
margin: 12px !important;
max-width: calc(100vw - 24px);
}
body.theme-v2 .modal-dialog.modal-lg,
body.theme-v2 .modal-dialog.modal-xl {
margin: 8px !important;
max-width: calc(100vw - 16px);
}
body.theme-v2 .modal-content {
border-radius: var(--bl-radius, 14px);
}
body.theme-v2 .modal-body {
padding: 16px;
}
body.theme-v2 .modal-footer {
padding: 12px 16px;
flex-wrap: wrap;
gap: 6px;
}
body.theme-v2 .modal-footer > * { margin: 0 !important; }
body.theme-v2 .modal-footer > button,
body.theme-v2 .modal-footer > .btn,
body.theme-v2 .modal-footer > a {
flex: 1 1 calc(50% - 4px);
min-width: 0;
}
}
/* ============================================================
8. BUTTONS — stack on small viewports
============================================================ */
@media (max-width: 575.98px) {
body.theme-v2 .custom_but1,
body.theme-v2 .custom_but2 {
font-size: 13px !important;
padding: 0 14px !important;
height: 38px !important;
min-height: 38px;
}
/* Top action toolbars (e.g. listing pages) wrap nicely */
body.theme-v2 .row > .col-12 > .d-flex,
body.theme-v2 .bl-topbar__actions,
body.theme-v2 .bl-listing-toolbar__actions {
flex-wrap: wrap !important;
gap: 6px;
}
}
/* ============================================================
9. DASHBOARD v3 — mobile tweaks
============================================================ */
@media (max-width: 991.98px) {
/* Greeting row stacks vertically */
body.theme-v2 .bl-dash-greet {
align-items: flex-start;
gap: 12px;
}
body.theme-v2 .bl-dash-greet__title { font-size: 18px; }
}
@media (max-width: 575.98px) {
body.theme-v2 .bl-dash-kpi {
min-height: 116px;
padding: 14px 14px 12px;
}
body.theme-v2 .bl-dash-kpi__value { font-size: 20px; }
body.theme-v2 .bl-dash-recent__row {
grid-template-columns: 50px 1fr auto !important;
gap: 6px !important;
}
body.theme-v2 .bl-dash-recent__total,
body.theme-v2 .bl-dash-recent__status,
body.theme-v2 .bl-dash-recent__time {
grid-column: 2 / -1 !important;
}
body.theme-v2 .bl-dash-quick {
grid-template-columns: repeat(2, 1fr) !important;
gap: 8px;
}
body.theme-v2 .bl-dash-quick__item {
padding: 14px 10px;
}
body.theme-v2 .bl-dash-quick__icon {
width: 44px; height: 44px;
font-size: 18px;
}
body.theme-v2 .bl-dash-card .card-body {
padding: 14px !important;
}
}
/* ============================================================
10. OVERVIEW PAGE — mobile tweaks
============================================================ */
@media (max-width: 991.98px) {
body.theme-v2 .bl-ovw-pagebar {
align-items: flex-start;
gap: 10px;
}
body.theme-v2 .bl-ovw-pagebar__title { font-size: 18px; }
body.theme-v2 .bl-ovw-tabs { width: 100%; overflow-x: auto; }
body.theme-v2 .bl-ovw-tab { white-space: nowrap; }
}
@media (max-width: 575.98px) {
body.theme-v2 .bl-ovw-kpi {
min-height: 118px;
padding: 14px 14px 12px;
}
body.theme-v2 .bl-ovw-kpi__value { font-size: 20px; }
body.theme-v2 .bl-ovw-card .card-body { padding: 14px !important; }
body.theme-v2 .bl-ovw-quick__row { padding: 8px; }
}
/* ============================================================
11. ORDER DETAILS PAGE
============================================================ */
@media (max-width: 991.98px) {
body.theme-v2 .bl-od-pagebar,
body.theme-v2 .bl-od-hero {
flex-direction: column;
align-items: flex-start !important;
gap: 12px;
}
body.theme-v2 .bl-od-hero__actions,
body.theme-v2 .bl-od-pagebar__actions {
width: 100%;
flex-wrap: wrap;
}
body.theme-v2 .bl-od-hero__actions > * {
flex: 1 1 calc(50% - 4px);
min-width: 0;
}
}
@media (max-width: 575.98px) {
body.theme-v2 .bl-od-kpis {
grid-template-columns: 1fr 1fr !important;
}
}
/* ============================================================
12. LISTINGS (tables / filters)
============================================================ */
@media (max-width: 991.98px) {
body.theme-v2 .bl-listing-toolbar {
flex-direction: column;
align-items: stretch !important;
gap: 10px;
}
body.theme-v2 .bl-listing-toolbar > * {
width: 100%;
}
body.theme-v2 .bl-listing-filters {
flex-wrap: wrap;
gap: 8px;
}
}
/* ============================================================
13. SETTINGS HUB — make tile grids breathe
============================================================ */
@media (max-width: 991.98px) {
body.theme-v2 .bl-settings-hub {
grid-template-columns: 1fr 1fr !important;
}
}
@media (max-width: 575.98px) {
body.theme-v2 .bl-settings-hub {
grid-template-columns: 1fr !important;
}
}
/* ============================================================
14. HOME CUSTOMIZER (admin/settings/update/home)
------------------------------------------------------------
On phones the customizer panel + preview can't sit side-by-
side. Stack them vertically and let the user scroll.
============================================================ */
@media (max-width: 991.98px) {
body.theme-v2 aside.customize_section {
position: static !important;
width: 100% !important;
min-height: auto !important;
height: auto !important;
max-height: none !important;
margin-bottom: 16px;
}
body.theme-v2 .Customize_page_wrapper {
margin-inline-start: 0 !important;
padding: 16px !important;
}
}
/* ============================================================
15. NAV / DROPDOWNS — keep within the viewport
============================================================ */
@media (max-width: 575.98px) {
body.theme-v2 .dropdown-menu {
max-width: calc(100vw - 24px);
}
}
/* ============================================================
16. STICKY HEADERS / FOOTERS — never tall on phones
============================================================ */
@media (max-width: 767.98px) {
body.theme-v2 .bl-form-topbar,
body.theme-v2 .bl-od-pagebar,
body.theme-v2 .bl-listing-pagebar,
body.theme-v2 .bl-ovw-pagebar {
padding: 12px 14px !important;
}
}
/* ============================================================
17. UTILITY — hide non-essential elements on tiny phones
============================================================ */
@media (max-width: 359.98px) {
body.theme-v2 .bl-dash-kpi__delta small,
body.theme-v2 .bl-ovw-kpi__delta small {
display: none;
}
body.theme-v2 .bl-dash-kpis,
body.theme-v2 .bl-ovw-kpis {
grid-template-columns: 1fr !important;
}
}
/* ============================================================
17B. MINI SIDEBAR — tooltip-style label on hover
------------------------------------------------------------
When the desktop sidebar is collapsed (`body.mini-sidebar`)
only icons are visible. We turn the (otherwise hidden)
`.hide-menu` text into a floating chip that appears next to
the icon on hover. No JS required.
This is desktop / tablet only — on phones the sidebar is a
full drawer and labels are already visible inline.
============================================================ */
@media (min-width: 992px) {
/* Allow children of to escape horizontally so the
floating label is not clipped. */
body.theme-v2.mini-sidebar aside.left-sidebar,
body.theme-v2.mini-sidebar .scroll-sidebar,
body.theme-v2.mini-sidebar .sidebar-nav,
body.theme-v2.mini-sidebar #sidebarnav,
body.theme-v2.mini-sidebar #sidebarnav > li {
overflow: visible !important;
}
body.theme-v2.mini-sidebar #sidebarnav > li { position: relative; }
/* Override the legacy rule that fully hid the label. We keep
it in the DOM so we can re-show it as a floating tooltip. */
body.theme-v2.mini-sidebar #sidebarnav > li > a .hide-menu {
display: inline-block !important;
/* Visually hidden (off-screen) until hover */
position: absolute;
inset-inline-start: calc(var(--bl-sidebar-w-collapsed) - 6px);
top: 50%;
transform: translateY(-50%) scale(.95);
transform-origin: inline-start center;
background: var(--bl-sidebar-bg-2, #1f2c44);
color: #fff;
font-size: 13px;
font-weight: 500;
line-height: 1;
padding: 9px 14px;
border-radius: 10px;
white-space: nowrap;
pointer-events: none;
opacity: 0;
visibility: hidden;
box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
border: 1px solid rgba(255, 255, 255, .06);
transition:
opacity .15s ease,
transform .15s ease,
visibility .15s ease;
z-index: 1080;
}
/* Tiny pointer (arrow) on the side facing the icon */
body.theme-v2.mini-sidebar #sidebarnav > li > a .hide-menu::before {
content: "";
position: absolute;
top: 50%;
inset-inline-start: -4px;
transform: translateY(-50%) rotate(45deg);
width: 8px;
height: 8px;
background: var(--bl-sidebar-bg-2, #1f2c44);
border-inline-start: 1px solid rgba(255, 255, 255, .06);
border-block-end: 1px solid rgba(255, 255, 255, .06);
}
/* Show the label on hover/focus of the link or its parent */
body.theme-v2.mini-sidebar #sidebarnav > li:hover > a .hide-menu,
body.theme-v2.mini-sidebar #sidebarnav > li > a:focus-visible .hide-menu {
opacity: 1;
visibility: visible;
transform: translateY(-50%) scale(1);
}
/* The arrow indicator on items with sub-menus would otherwise
fight for space; hide it in collapsed mode. */
body.theme-v2.mini-sidebar #sidebarnav > li > a.has-arrow::after {
display: none !important;
}
}
/* ============================================================
18. DROPDOWN — kill Popper's inline transform and anchor menu
to the correct edge so it never exits the viewport.
CSS !important overrides Popper's inline styles.
============================================================ */
body.theme-v2 .action_contain {
position: relative !important;
}
body.theme-v2 .action_contain .dropdown-menu {
transform : none !important;
top : 100% !important;
bottom : auto !important;
min-width : 150px;
white-space: nowrap;
margin-top: 4px !important;
}
/* Row / card actions (screen edge) */
html[dir="rtl"] body.theme-v2 .parent-list .left .Custom_dropdown.action_contain .dropdown-menu,
html[dir="rtl"] body.theme-v2 .bl-row-actions .Custom_dropdown2.action_contain .dropdown-menu,
html[dir="rtl"] body.theme-v2 .bl-td-actions .Custom_dropdown2.action_contain .dropdown-menu {
left : 0 !important;
right : auto !important;
}
html[dir="ltr"] body.theme-v2 .parent-list .left .Custom_dropdown.action_contain .dropdown-menu,
html[dir="ltr"] body.theme-v2 .bl-row-actions .Custom_dropdown2.action_contain .dropdown-menu,
html[dir="ltr"] body.theme-v2 .bl-td-actions .Custom_dropdown2.action_contain .dropdown-menu {
right : 0 !important;
left : auto !important;
}
/* Toolbar actions — anchor under trigger (button sits on the actions side) */
body.theme-v2 .bl-toolbar__actions .Custom_dropdown.action_contain .dropdown-menu {
right : 0 !important;
left : auto !important;
}
@media (max-width: 575.98px) {
body.theme-v2 .action_contain .dropdown-menu {
max-width: calc(100vw - 24px);
}
}
/* Categories — keep row options menu inside the viewport on mobile */
body.theme-v2 .parent-list .parent,
body.theme-v2 .parent-list .nested-list li {
overflow: visible;
}
body.theme-v2 .parent-list .left .Custom_dropdown.action_contain {
position: relative !important;
flex-shrink: 0;
}
body.theme-v2 .parent-list .left .Custom_dropdown.action_contain .dropdown-menu {
transform: none !important;
top: 100% !important;
bottom: auto !important;
min-width: 180px;
max-width: min(280px, calc(100vw - 24px));
white-space: nowrap;
z-index: 1050;
}
html[dir="rtl"] body.theme-v2 .parent-list .left .Custom_dropdown.action_contain .dropdown-menu {
left: 0 !important;
right: auto !important;
}
html[dir="ltr"] body.theme-v2 .parent-list .left .Custom_dropdown.action_contain .dropdown-menu {
right: 0 !important;
left: auto !important;
}
/* Products + listing row/toolbar dropdowns — stay inside viewport on mobile */
body.theme-v2 .bl-listing-card table tbody tr,
body.theme-v2 .bl-td-actions,
body.theme-v2 .bl-row-actions {
overflow: visible;
}
body.theme-v2 .bl-row-actions .Custom_dropdown2.action_contain,
body.theme-v2 .bl-td-actions .Custom_dropdown2.action_contain,
body.theme-v2 .bl-toolbar__actions .Custom_dropdown.action_contain {
position: relative !important;
flex-shrink: 0;
}
body.theme-v2 .bl-row-actions .Custom_dropdown2.action_contain .dropdown-menu,
body.theme-v2 .bl-td-actions .Custom_dropdown2.action_contain .dropdown-menu,
body.theme-v2 .bl-toolbar__actions .Custom_dropdown.action_contain .dropdown-menu {
transform: none !important;
top: 100% !important;
bottom: auto !important;
min-width: 180px;
max-width: min(280px, calc(100vw - 24px));
white-space: nowrap;
z-index: 1050;
}
html[dir="rtl"] body.theme-v2 .bl-row-actions .Custom_dropdown2.action_contain .dropdown-menu,
html[dir="rtl"] body.theme-v2 .bl-td-actions .Custom_dropdown2.action_contain .dropdown-menu {
left: 0 !important;
right: auto !important;
}
html[dir="ltr"] body.theme-v2 .bl-row-actions .Custom_dropdown2.action_contain .dropdown-menu,
html[dir="ltr"] body.theme-v2 .bl-td-actions .Custom_dropdown2.action_contain .dropdown-menu {
right: 0 !important;
left: auto !important;
}
body.theme-v2 .bl-toolbar__actions .Custom_dropdown.action_contain .dropdown-menu {
right: 0 !important;
left: auto !important;
}
/* ============================================================
18. PRINT — keep invoices clean on every device
============================================================ */
@media print {
body.theme-v2 aside.left-sidebar,
body.theme-v2 header.topbar,
body.theme-v2 .bl-form-savebar,
body.theme-v2 .bl-od-hero__actions,
body.theme-v2 .Custom_preloader { display: none !important; }
body.theme-v2 .page-wrapper {
margin: 0 !important;
padding: 0 !important;
}
body.theme-v2 .container-fluid { padding: 0 !important; }
}