/* =====================================================================
   VONA shell — sidebar, topbar, page canvas, mobile nav
   Applies to all four panels (admin, merchant, staff/hub, delivery man)
   ===================================================================== */

/* ------------------------------------------------------------ sidebar */
.nav-left-sidebar,.sidebar-dark,.sidebarNavigation .offcanvas,.offcanvas.text-bg-dark,
.dashboard-main-wrapper .navbar-collapse.text-bg-dark{
  background:var(--v-surface) !important;color:var(--v-text) !important;
  border-right:.8px solid var(--v-border) !important;box-shadow:none !important}
@media (min-width:992px){
  .nav-left-sidebar{width:var(--v-sidebar-w);transition:width .2s ease}
  .dashboard-main-wrapper .main-content{margin-left:var(--v-sidebar-w) !important;transition:margin-left .2s ease}
  .dashboard-header .navbar.lxtb{padding-left:calc(var(--v-sidebar-w) + 24px) !important}
}
/* brand / user block */
.lxsb-head{display:flex;align-items:center;gap:10px;padding:0 16px;min-height:var(--v-topbar-h);
  border-bottom:.8px solid var(--v-border);margin-bottom:10px}
.lxsb-head img{height:28px;width:auto}
.lxsb-toggle{width:30px;height:30px;border-radius:var(--v-r-sm);border:.8px solid var(--v-border);
  background:var(--v-surface);color:var(--v-muted);display:inline-grid;place-items:center;cursor:pointer;font-size:16px;padding:0;margin-left:auto}
.lxsb-toggle:hover{background:var(--v-light);color:var(--v-heading)}
.lxsb-user{display:flex;align-items:center;gap:10px;margin:0 12px 12px;padding:10px;
  background:var(--v-light);border-radius:var(--v-r-lg)}
.lxsb-user img,.lxsb-user .lxsb-ava{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:none;
  background:var(--v-primary-soft);color:var(--v-primary-d);display:inline-grid;place-items:center;font-weight:700;font-size:14px}
.lxsb-user b{display:block;font-size:13.5px;font-weight:600;color:var(--v-heading);line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lxsb-user small{display:block;font-size:11.5px;color:var(--v-muted)}
/* search */
.lxsb-search{margin:0 12px 12px;display:flex;align-items:center;gap:8px;background:var(--v-surface);
  border:.8px solid var(--v-border);border-radius:var(--v-r) !important;padding:0 10px;height:36px;color:var(--v-muted)}
.lxsb-search i{font-size:16px;flex:none}
.lxsb-search input{border:0;background:transparent;outline:0;font:inherit;font-size:13.5px;flex:1;min-width:0;color:var(--v-text)}
.lxsb-search kbd{font:600 10.5px/1 var(--v-font);color:var(--v-muted);background:var(--v-light);
  border:.8px solid var(--v-border);border-radius:var(--v-r-sm);padding:3px 5px;flex:none}
/* nav */
.nav-left-sidebar .navbar-nav{padding:0 12px 20px !important;gap:1px}
.nav-left-sidebar .navbar-nav .nav-divider{margin:12px 8px 6px !important;padding:0 !important;border:0;height:auto;
  font-size:11px !important;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--v-g400) !important;line-height:1.6}
.nav-left-sidebar .navbar-nav .nav-link,.sidebar-dark .nav-link{
  display:flex !important;align-items:center;gap:8px;margin:0 !important;padding:8px 14px !important;
  border-radius:var(--v-r-pill) !important;font-size:14px;font-weight:500;color:#55606e !important;
  background:transparent !important;position:relative;transition:background .15s,color .15s}
.nav-left-sidebar .navbar-nav .nav-link i{width:20px;text-align:center;font-size:18px;color:#55606e !important;opacity:1;flex:none}
.nav-left-sidebar .navbar-nav .nav-link:hover{background:var(--v-light) !important;color:var(--v-heading) !important;transform:none}
.nav-left-sidebar .navbar-nav .nav-link:hover i{color:var(--v-heading) !important}
.nav-left-sidebar .navbar-nav>.nav-item>.nav-link.active{background:var(--v-primary-soft) !important;color:var(--v-primary-d) !important;font-weight:600}
.nav-left-sidebar .navbar-nav>.nav-item>.nav-link.active i{color:var(--v-primary) !important}
.nav-left-sidebar .navbar-nav .nav-link.active::before{display:none !important}
.nav-left-sidebar .navbar-nav>.nav-item>.nav-link.active[data-toggle="collapse"]{background:transparent !important;color:var(--v-heading) !important}
.nav-left-sidebar .navbar-nav>.nav-item>.nav-link.active[data-toggle="collapse"] i{color:var(--v-heading) !important}
.lxsb-caret{margin-left:auto;font-size:15px !important;width:auto !important;color:var(--v-g400) !important;transition:transform .2s}
.nav-link[aria-expanded="true"] .lxsb-caret{transform:rotate(180deg)}
.lxsb-badge{margin-left:auto;min-width:20px;height:19px;padding:0 6px;border-radius:var(--v-r-sm);
  background:var(--v-danger-soft);color:var(--v-danger);font-size:11px;font-weight:700;display:inline-grid;place-items:center}
/* submenu */
.nav-left-sidebar .submenu{margin:2px 0 4px 26px;border-left:.8px solid var(--v-border)}
.nav-left-sidebar .submenu .nav-link,.nav-left-sidebar .collapse .nav-link,.nav-left-sidebar .nav .nav-link{
  padding:7px 10px 7px 16px !important;font-size:13.5px;color:var(--v-muted) !important;border-radius:var(--v-r-sm) !important;position:relative}
.nav-left-sidebar .submenu .nav-link::before{content:"";position:absolute;left:0;top:50%;width:10px;height:.8px;background:var(--v-border)}
.nav-left-sidebar .submenu .nav-link:hover{color:var(--v-heading) !important;background:transparent !important}
.nav-left-sidebar .submenu .nav-link.active,.nav-left-sidebar .collapse .nav-link.active{
  color:var(--v-primary) !important;font-weight:600;background:transparent !important}
.nav-left-sidebar .submenu .nav-link.active::before{background:var(--v-primary);height:2px;margin-top:-1px}
/* collapsed rail */
@media (min-width:992px){
  body.lx-side-collapsed .nav-left-sidebar{width:72px}
  body.lx-side-collapsed .dashboard-main-wrapper .main-content{margin-left:72px !important}
  body.lx-side-collapsed .dashboard-header .navbar.lxtb{padding-left:96px !important}
  body.lx-side-collapsed .lxsb-head{justify-content:center;padding:0 8px;position:relative}
  body.lx-side-collapsed .lxsb-head .lxsb-toggle{display:none}
  body.lx-side-collapsed .lxsb-head:hover .lxsb-toggle{display:inline-grid;position:absolute;right:-14px;top:15px;box-shadow:var(--v-shadow);z-index:5}
  body.lx-side-collapsed .lxsb-user{justify-content:center;padding:8px;margin:0 10px 10px}
  body.lx-side-collapsed .lxsb-user div{display:none}
  body.lx-side-collapsed .lxsb-search{width:40px;justify-content:center;padding:0;margin:0 16px 12px;cursor:pointer}
  body.lx-side-collapsed .lxsb-search input,body.lx-side-collapsed .lxsb-search kbd{display:none}
  body.lx-side-collapsed .nav-left-sidebar .navbar-nav{padding:0 14px 20px !important}
  body.lx-side-collapsed .nav-left-sidebar .navbar-nav .nav-link{justify-content:center;width:44px;padding:10px 0 !important;margin:0 auto !important}
  body.lx-side-collapsed .nav-left-sidebar .navbar-nav .nav-link .lxsb-label,
  body.lx-side-collapsed .lxsb-caret,body.lx-side-collapsed .lxsb-badge,
  body.lx-side-collapsed .nav-left-sidebar .submenu{display:none !important}
  body.lx-side-collapsed .nav-left-sidebar .navbar-nav .nav-divider{font-size:0 !important;border-top:.8px dashed var(--v-border);margin:10px 8px !important;height:0}
  body.lx-side-collapsed .nav-left-sidebar .navbar-nav .nav-link[data-lxsb-tip]:hover::after{
    content:attr(data-lxsb-tip);position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);
    background:var(--v-g800);color:#fff;font-size:12.5px;font-weight:500;padding:5px 9px;border-radius:var(--v-r-sm);
    white-space:nowrap;z-index:2000;box-shadow:var(--v-shadow-lg)}
}

/* ------------------------------------------------------------- topbar */
.dashboard-header .navbar.lxtb,.lxtb{background:var(--v-surface) !important;border-bottom:.8px solid var(--v-border) !important;
  min-height:var(--v-topbar-h) !important;box-shadow:none !important;gap:14px}
.lx-search.lx-topsearch{background:var(--v-surface) !important;border:.8px solid var(--v-border) !important;
  border-radius:var(--v-r) !important;min-height:36px;min-width:260px}
.lx-search input{font-size:13.5px}
.lx-search kbd{font:600 10.5px/1 var(--v-font);color:var(--v-muted);background:var(--v-light);border:.8px solid var(--v-border);border-radius:var(--v-r-sm);padding:3px 5px}
.lxtb-icon{width:36px;height:36px;border-radius:var(--v-r) !important;border:.8px solid var(--v-border) !important;
  background:var(--v-surface) !important;color:var(--v-g600) !important;font-size:17px}
.lxtb-icon:hover{background:var(--v-light) !important;border-color:var(--v-border-2) !important;color:var(--v-heading) !important;transform:none}
.lxtb-lang,.lxn-lang{background:var(--v-surface) !important;border:.8px solid var(--v-border) !important;border-radius:var(--v-r-pill) !important;padding:3px}
.lxtb-lang a,.lxn-lang a{font-size:12px;padding:4px 10px;border-radius:var(--v-r-pill);color:var(--v-muted)}
.lxtb-lang a.on,.lxn-lang a.on{background:var(--v-primary) !important;color:#fff !important}
.lxtb-user-btn{border:.8px solid var(--v-border) !important;border-radius:var(--v-r) !important;background:var(--v-surface) !important;padding:4px 10px 4px 4px}
.lxtb-user-btn:hover{background:var(--v-light) !important}
.lxtb-avatar,.user-avatar-md{width:32px !important;height:32px !important;border-radius:50% !important;object-fit:cover}
.lxtb-user-meta b{font-size:13px;font-weight:600;color:var(--v-heading)}
.lxtb-user-meta small{font-size:11px;color:var(--v-muted)}
.lxtb-wallet{background:var(--v-primary-soft) !important;border:.8px solid var(--v-primary-soft-2) !important;
  border-radius:var(--v-r) !important;color:var(--v-primary-d) !important;min-height:36px}
.lxtb-wallet small{color:#2a9d57 !important}
.lxtb-wallet b{color:var(--v-primary-d) !important}
.lxtb-notif-menu,.notification-dropdown{border-radius:var(--v-r-lg) !important;border:.8px solid var(--v-border) !important;box-shadow:var(--v-shadow-lg) !important}
.notification-title{font-size:13px;font-weight:600;color:var(--v-heading);border-bottom:.8px solid var(--v-border);padding:10px 12px}
.indicator{background:var(--v-danger) !important}

/* -------------------------------------------------------- page canvas */
.dashboard-main-wrapper{background:var(--v-body-bg)}
.dashboard-content{padding-top:20px !important}
.dashboard-main-wrapper .footer,.dashboard-main-wrapper footer{background:transparent;border-top:.8px solid var(--v-border);
  color:var(--v-muted);font-size:12.5px;padding:14px 0}

/* -------------------------------------------------- mobile bottom nav */
.lx-bottom-nav{background:var(--v-surface);box-shadow:0 -1px 0 var(--v-border),0 8px 30px -10px rgba(55,65,81,.25);
  border-radius:20px;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom))}
.lx-bottom-nav a,.lx-bottom-nav button{color:var(--v-muted)}
.lx-bottom-nav i{color:var(--v-muted)}
.lx-bottom-nav a.active,.lx-bottom-nav a.active i{color:var(--v-primary)}
.lx-bottom-nav a.lx-primary i{background:var(--v-primary);color:#fff;border:4px solid var(--v-surface);
  box-shadow:0 6px 14px -4px rgba(var(--v-primary-rgb),.55)}
.lx-bottom-nav a.lx-primary.active i{background:var(--v-primary-h)}

/* --------------------------------------------------------- responsive */
@media (max-width:991px){
  .lxsb-toggle{display:none}
  .navbar-other .d-lg-none img{width:96px !important}
  .navbar-other .nav-link.nav-icons{width:34px;height:34px}
  .offcanvas-header{border-bottom:.8px solid var(--v-border);padding:14px 16px}
  .offcanvas-header .navbar-brand img{height:26px !important}
  .dashboard-main-wrapper .main-content,.dashboard-ecommerce{padding-bottom:104px !important}
}