/*
  Global overrides for this project.

  The upstream template reserves space for a left sidebar (vertical-menu) on
  desktop. This project uses a topbar + bottom navbar instead, so we remove the
  desktop left offset to avoid the "blank space" on the left.
*/

@media (min-width: 992px){
  .main-content{
    margin-left: 0 !important;
  }

  .footer{
    left: 0 !important;
  }
}

/* Topbar cleanup: keep it in normal flow, prevent overlap with modals, fix logo placement */
#page-topbar.vx-topbar{
  background: rgba(10,10,10,.92) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: none !important;
  z-index: 1030 !important; /* below Bootstrap modal (1055) */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

#page-topbar.vx-topbar .navbar-header{
  padding: 0 16px !important;
}

#page-topbar.vx-topbar .vx-topbar-brand{
  gap: 10px;
  text-decoration: none !important;
  color: #fff !important;
  font-weight: 800;
  letter-spacing: .6px;
}

#page-topbar.vx-topbar .vx-topbar-logo{
  height: 42px;
  width: auto;
  display: block;
}

#page-topbar.vx-topbar .vx-balance-box{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #8b5cf6, #06b6d4);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
}

#page-topbar.vx-topbar .vx-balance-box i{
  font-size: 18px;
}

#page-topbar.vx-topbar .vx-icon-btn{
  height: 44px !important;
  width: 44px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(255,255,255,.9) !important;
  /* Force a neutral button surface so per-page CSS can't turn topbar buttons into gradients. */
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: none !important;
}

#page-topbar.vx-topbar .vx-icon-btn:hover{
  background: rgba(255,255,255,.08) !important;
}

#page-topbar.vx-topbar .vx-lang-btn{
  height: 44px !important;
  width: auto !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px;
  color: rgba(255,255,255,.9) !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  white-space: nowrap;
}

#page-topbar.vx-topbar .vx-lang-btn:hover{
  background: rgba(255,255,255,.08) !important;
}

#page-topbar.vx-topbar .vx-lang-btn i{
  font-size: 18px;
}

#page-topbar.vx-topbar .vx-lang-menu .dropdown-item.active,
#page-topbar.vx-topbar .vx-lang-menu .dropdown-item[aria-pressed="true"]{
  background: rgba(34,211,238,.14) !important;
}

#page-topbar.vx-topbar .vx-user-btn{
  height: 44px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px;
  color: rgba(255,255,255,.9) !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}

#page-topbar.vx-topbar .vx-user-btn:hover{
  background: rgba(255,255,255,.08) !important;
}

#page-topbar.vx-topbar .noti-icon i{
  color: rgba(255,255,255,.9) !important;
}

#page-topbar.vx-topbar .vx-topbar-dropdown{
  max-width: 340px;
}

@media (max-width: 420px){
  #page-topbar.vx-topbar .vx-balance-box{
    padding: 0 10px;
  }
}

/* DataTables Responsive control: reduce the empty area and keep the icon visible */
table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control,
table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control{
  padding-left: 22px !important;
}

table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before,
table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before{
  left: 4px !important;
  background-color: #0ea5e9 !important;
  border-color: rgba(255,255,255,.75) !important;
}

table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td.dtr-control:before,
table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th.dtr-control:before{
  background-color: #ef4444 !important;
}

/* RTL support */
[dir="rtl"] table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control,
[dir="rtl"] table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control{
  padding-right: 22px !important;
  padding-left: 12px !important;
}

[dir="rtl"] table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before,
[dir="rtl"] table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before{
  right: 4px !important;
  left: auto !important;
}