/* ============================================================
   MT.NET.VN PRO6 V21 - NAVIGATION CONTROLS
   ============================================================ */

/* Desktop sidebar collapse fix: overrides old #sidebar width:280px!important adapter. */
@media(min-width:881px){
  body.sidebar-collapsed #sidebar{width:82px!important}
  body.sidebar-collapsed .main{margin-left:82px!important}
  body:not(.sidebar-collapsed) #sidebar{width:280px!important}
  body:not(.sidebar-collapsed) .main{margin-left:280px!important}
}
#sidebar,.main{transition:width .22s ease,margin-left .22s ease,transform .22s ease!important}
#sidebarCollapse{position:relative;z-index:5}
body.sidebar-collapsed #sidebarCollapse{background:#eef4ff!important;border-color:#cbdcff!important;color:var(--primary)!important}
body.sidebar-collapsed #sidebarCollapse i{transform:rotate(180deg)}
#sidebarCollapse i{transition:transform .2s ease}

/* Top utility icon group */
.pro6-utility-bar{
  position:relative;
  display:flex;
  align-items:center;
  gap:7px;
  padding:4px;
  border:1px solid #e7ebf2;
  border-radius:14px;
  background:rgba(255,255,255,.76);
}
.pro6-utility-btn,.pro6-utility-bar .apps-menu-btn{
  width:40px!important;height:40px!important;
  border-radius:10px!important;
  border:0!important;
  background:transparent!important;
  color:#667085!important;
}
.pro6-utility-btn:hover,.pro6-utility-bar .apps-menu-btn:hover,
.pro6-quick-wrap.open .pro6-utility-btn,
.notification-wrap.open .pro6-utility-btn,
.apps-menu-wrap.open .apps-menu-btn{
  background:#eef4ff!important;color:var(--primary)!important
}
.pro6-utility-bar .badge-btn span{
  right:1px!important;top:0!important;
  min-width:16px!important;height:16px!important;
  font-size:8px!important
}

/* Quick center */
.pro6-quick-wrap{position:relative}
.pro6-quick-panel{
  position:absolute;z-index:10060;right:0;top:calc(100% + 11px);
  width:310px;padding:10px;
  border:1px solid #e3e8f0;border-radius:15px;background:#fff;
  box-shadow:0 24px 65px rgba(16,24,40,.16);
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-7px) scale(.985);
  transform-origin:top right;transition:.16s
}
.pro6-quick-wrap.open .pro6-quick-panel{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.pro6-quick-head{display:flex;align-items:center;justify-content:space-between;padding:7px 8px 11px;border-bottom:1px solid #edf0f4}
.pro6-quick-head span,.pro6-quick-head b{display:block}.pro6-quick-head span{font-size:7px;color:#98a2b3;font-weight:900;letter-spacing:.1em}.pro6-quick-head b{font-size:13px;margin-top:2px}.pro6-quick-head>i{color:#246bfd}
.pro6-quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding-top:8px}
.pro6-quick-grid a{min-height:74px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;border-radius:10px;color:#475467;font-size:8px;font-weight:700;text-align:center}
.pro6-quick-grid a:hover{background:#f4f7fb;color:#175cd3}.pro6-quick-grid a i{font-size:17px}

/* Increase menu z-index so panels stay above page headers. */
.notification-panel,.apps-menu-panel{z-index:10060!important}
.topbar{overflow:visible!important}

/* Bottom-left control dock */
.pro6-control-dock{
  position:fixed;z-index:10010;
  left:calc(280px + 14px);bottom:16px;
  display:flex;gap:6px;padding:5px;
  border:1px solid #e2e8f0;border-radius:14px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);
  box-shadow:0 14px 38px rgba(16,24,40,.13);
  transition:left .22s ease;
}
body.sidebar-collapsed .pro6-control-dock{left:calc(82px + 14px)}
.pro6-control-dock button{
  width:40px;height:40px;border:0;border-radius:10px;background:transparent;color:#667085;
  display:grid;place-items:center;cursor:pointer;position:relative
}
.pro6-control-dock button:hover,.pro6-control-dock button.active{background:#eef4ff;color:#175cd3}
.pro6-control-dock button>span{
  position:absolute;left:50%;bottom:calc(100% + 7px);transform:translateX(-50%) translateY(3px);
  padding:5px 7px;border-radius:7px;background:#101828;color:#fff;font-size:7px;white-space:nowrap;
  opacity:0;visibility:hidden;pointer-events:none;transition:.14s
}
.pro6-control-dock button:hover>span{opacity:1;visibility:visible;transform:translateX(-50%)}
.pro6-control-dock #settingsFab i{animation:settingsSpin 7s linear infinite}

/* Settings backdrop was missing from current layout. */
.settings-backdrop{
  position:fixed;z-index:10100;inset:0;background:rgba(16,24,40,.38);
  opacity:0;visibility:hidden;pointer-events:none;backdrop-filter:blur(2px);transition:.2s
}
.settings-backdrop.show{opacity:1;visibility:visible;pointer-events:auto}
.settings-drawer{z-index:10110!important}
.pro6-settings-eyebrow{display:block;color:#246bfd;font-size:7px;font-weight:900;letter-spacing:.11em}
.pro6-reset-settings{
  width:100%;height:42px;border:1px solid #e4e7ec;border-radius:10px;background:#fff;color:#475467;
  display:flex;align-items:center;justify-content:center;gap:7px;font-size:9px;font-weight:800;cursor:pointer
}
.pro6-reset-settings:hover{background:#f5f7fa;color:#175cd3}

/* Fullscreen active state */
body.pro6-fullscreen-active #pro6DockFullscreenV21{background:#eef4ff;color:#175cd3}

/* Dark compatibility */
body.theme-dark .pro6-utility-bar,
body.theme-dark .pro6-quick-panel,
body.theme-dark .pro6-control-dock,
body.theme-dark .settings-drawer{
  background:#151f2f!important;border-color:#2c3b4e!important;color:#e6edf5!important
}
body.theme-dark .pro6-reset-settings{background:#151f2f;border-color:#34455a;color:#d9e2ec}

/* Responsive */
@media(max-width:1180px){
  .pro6-utility-bar{gap:2px;padding:2px}
  .pro6-utility-btn,.pro6-utility-bar .apps-menu-btn{width:36px!important;height:36px!important}
}
@media(max-width:880px){
  .pro6-control-dock{left:12px;bottom:76px}
  body.sidebar-collapsed .pro6-control-dock{left:12px}
  .pro6-utility-bar{display:none}
}
@media(max-width:620px){
  .pro6-control-dock button{width:38px;height:38px}
  .pro6-quick-panel{position:fixed;left:10px;right:10px;top:72px;width:auto}
}