/* ============================================================
   椤堕儴鏍忎笓涓氫紭鍖?V2.0
   浼樺寲鏂瑰悜锛歀OGO銆佺敤鎴蜂俊鎭€佸伐鍏锋寜閽€佹暣浣撴牱寮?
   ============================================================ */

/* ========== 1. 椤堕儴鏍忔暣浣撲紭鍖?========== */
.top-bar{
  background:#fff !important;
  border-bottom:1px solid #e2e8f0 !important;
  box-shadow:0 1px 3px rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.03) !important;
  height:64px !important;
  padding:0 20px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  z-index:600 !important;
  transition:all 0.3s ease !important;
}

/* 椤堕儴鏍忔粴鍔ㄦ椂鏁堟灉 */
.top-bar.scrolled{
  box-shadow:0 2px 8px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.06) !important;
}

/* ========== 2. 宸︿晶鍖哄煙浼樺寲 ========== */
.top-bar-left{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  flex:1 !important;
  min-width:0 !important;
}

/* 鑿滃崟鎸夐挳浼樺寲 */
.mobile-menu-btn{
  width:40px !important;
  height:40px !important;
  border-radius:10px !important;
  border:1px solid #e2e8f0 !important;
  background:#f8fafc !important;
  font-size:18px !important;
  cursor:pointer !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  transition:all 0.2s ease !important;
  flex-shrink:0 !important;
}
.mobile-menu-btn:hover{
  background:#eff6ff !important;
  border-color:#93c5fd !important;
  transform:scale(1.05);
}

/* LOGO浼樺寲 */
.top-logo{
  width:42px !important;
  height:42px !important;
  border-radius:12px !important;
  object-fit:cover !important;
  box-shadow:0 2px 8px rgba(0,0,0,0.1), 0 4px 12px rgba(59,130,246,0.15) !important;
  border:2px solid #fff !important;
  cursor:pointer !important;
  transition:all 0.25s ease !important;
  flex-shrink:0 !important;
  background:#f1f5f9 !important;
}
.top-logo:hover{
  transform:scale(1.08) rotate(-2deg);
  box-shadow:0 4px 16px rgba(0,0,0,0.15), 0 8px 24px rgba(59,130,246,0.25) !important;
}

/* LOGO鍔犺浇澶辫触鏃剁殑鍗犱綅 */
.top-logo[src=""],
.top-logo:not([src]){
  background:linear-gradient(135deg, #3b82f6, #8b5cf6) !important;
}

/* ========== 3. 鐢ㄦ埛淇℃伅鍖哄煙浼樺寲 ========== */
.top-bar-left > div:last-child{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  padding:8px 14px !important;
  background:linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
  border-radius:12px !important;
  border:1px solid #e2e8f0 !important;
  font-size:13px !important;
  color:#475569 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  min-width:0 !important;
  transition:all 0.2s ease !important;
  max-width:320px !important;
}
.top-bar-left > div:last-child:hover{
  background:linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
  border-color:#93c5fd !important;
  box-shadow:0 2px 8px rgba(59,130,246,0.1) !important;
}

/* 鐢ㄦ埛鍚?*/
#curUserName{
  font-weight:700 !important;
  color:#1e40af !important;
  font-size:14px !important;
}

/* 瑙掕壊 */
#curUserRole{
  font-weight:600 !important;
  color:#7c3aed !important;
  font-size:12px !important;
  padding:2px 8px !important;
  background:rgba(124,58,237,0.1) !important;
  border-radius:6px !important;
}

/* "褰撳墠鐧诲綍锛?鏂囧瓧 */
.top-bar-left > div:last-child > span:first-child,
.top-bar-left > div:last-child{
  color:#64748b !important;
}

/* ========== 4. 閫氱煡鍥炬爣浼樺寲 ========== */
.top-notif-icon{
  position:relative !important;
  width:40px !important;
  height:40px !important;
  border-radius:10px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:18px !important;
  cursor:pointer !important;
  transition:all 0.2s ease !important;
  background:#f8fafc !important;
  border:1px solid #e2e8f0 !important;
  flex-shrink:0 !important;
}
/* ID閫夋嫨鍣ㄨ鐩朾ase.css涓殑position:static!important */
#topNotifIcon{
  position:relative !important;
  top:auto !important;
  right:auto !important;
  left:auto !important;
}
.top-notif-icon:hover{
  background:#fffbeb !important;
  border-color:#fcd34d !important;
  transform:scale(1.05);
  box-shadow:0 2px 8px rgba(245,158,11,0.15) !important;
}

/* 閫氱煡寰界珷 */
#topNotifBadge{
  position:absolute !important;
  top:-4px !important;
  right:-4px !important;
  background:linear-gradient(135deg, #ef4444, #dc2626) !important;
  color:#fff !important;
  font-size:10px !important;
  min-width:18px !important;
  height:18px !important;
  border-radius:9px !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 5px !important;
  font-weight:700 !important;
  box-shadow:0 2px 6px rgba(239,68,68,0.4) !important;
  border:2px solid #fff !important;
}
/* 寰界珷鏈夋暟瀛楁椂鏄剧ず */
#topNotifBadge.show{
  display:flex !important;
}

/* ========== 5. 鍙充晶宸ュ叿鎸夐挳浼樺寲 ========== */
#topRightTools{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  flex-shrink:0 !important;
}

/* 宸ュ叿鎸夐挳缁熶竴浼樺寲 */
#topRightTools .top-tool-btn{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  padding:8px 14px !important;
  border-radius:10px !important;
  border:1px solid #e2e8f0 !important;
  background:#f8fafc !important;
  font-size:13px !important;
  font-weight:500 !important;
  color:#475569 !important;
  cursor:pointer !important;
  transition:all 0.2s ease !important;
  height:40px !important;
}
#topRightTools .top-tool-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(0,0,0,0.08) !important;
}

/* 鏇存敼涓婚鎸夐挳 */
#topRightTools .top-tool-btn:nth-child(1):hover{
  background:linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%) !important;
  border-color:#c4b5fd !important;
  color:#7c3aed !important;
}

/* 鍒囨崲璇█鎸夐挳 */
#topRightTools .top-tool-btn:nth-child(2):hover{
  background:linear-gradient(135deg, #ecfeff 0%, #cffafe 100%) !important;
  border-color:#67e8f9 !important;
  color:#0891b2 !important;
}

/* 宸ュ叿鎸夐挳鍥炬爣 */
#topRightTools .top-tool-btn .tool-icon{
  font-size:16px !important;
}

/* ========== 6. 閫€鍑烘寜閽紭鍖?========== */
#mobileLogoutBtn{
  padding:6px 10px !important;
  border-radius:8px !important;
  border:none !important;
  background:transparent !important;
  font-size:18px !important;
  font-weight:normal !important;
  color:inherit !important;
  cursor:pointer !important;
  transition:all 0.2s ease !important;
  height:36px !important;
  min-width:36px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:0 !important;
  box-shadow:none !important;
}
#mobileLogoutBtn:hover{
  background:rgba(0,0,0,0.08) !important;
  border:none !important;
  transform:none;
  box-shadow:none !important;
}

/* ========== 7. 涓诲唴瀹瑰尯椤堕儴闂磋窛锛堥€傞厤鍥哄畾椤堕儴鏍忥級 ========== */
#mainPage{
  padding-top:80px !important;
}

/* ========== 8. 鍝嶅簲寮忎紭鍖?========== */
@media (max-width:768px){
  .top-bar{
    padding:0 12px !important;
    height:56px !important;
  }
  .top-bar-left > div:last-child{
    max-width:180px !important;
    font-size:12px !important;
  }
  #topRightTools .top-tool-btn{
    padding:6px 10px !important;
    font-size:12px !important;
  }
  #topRightTools .top-tool-btn .tool-text{
    display:none !important;
  }
  #mainPage{
    padding-top:72px !important;
  }
  /* 手机端去掉所有顶部按钮边框 */
  .mobile-menu-btn,
  .top-logo,
  .top-bar-left > div:not(.mobile-menu-btn):not(.top-logo),
  .top-notif-icon,
  #topRightTools .top-tool-btn,
  .logout-btn{
    border:none !important;
    box-shadow:none !important;
    background:transparent !important;
  }
  .top-logo{
    border-radius:50% !important;
  }
}

@media (max-width:480px){
  .top-bar-left > div:last-child{
    display:none !important;
  }
  .top-logo{
    width:36px !important;
    height:36px !important;
  }
}

/* ========== 10. 鐧诲綍妯″紡闅愯棌椤堕儴鏍?========== */
body.login-mode .top-bar{
  display:none !important;
}

/* ========== 11. 渚ц竟鏍忓睍寮€/鎶樺彔鏃堕《閮ㄦ爮宸﹁竟璺?========== */
/* 渚ц竟鏍忓睍寮€鏃讹紙220px锛夛紝椤堕儴鏍忓乏杈硅窛220px */
body:not(.sidebar-collapsed):not(.login-mode) .top-bar{
  left:170px !important;
  right:0 !important;
  width:auto !important;
}
/* 渚ц竟鏍忔姌鍙犳椂锛?0px锛夛紝椤堕儴鏍忓乏杈硅窛60px */
body.sidebar-collapsed:not(.login-mode) .top-bar{
  left:60px !important;
  right:0 !important;
  width:auto !important;
}
/* 鎵嬫満绔晶杈规爮鏄鐩栧紡鐨勶紝椤堕儴鏍忎笉闇€瑕佸乏杈硅窛 */
@media (max-width:768px){
  body:not(.sidebar-collapsed):not(.login-mode) .top-bar,
  body.sidebar-collapsed:not(.login-mode) .top-bar{
    left:0 !important;
  }
}

/* ========== 9. 鍑忓皯鍔ㄧ敾锛堟棤闅滅锛?========== */
@media (prefers-reduced-motion: reduce){
  .top-bar,
  .top-logo,
  .top-tool-btn,
  .mobile-menu-btn,
  .top-notif-icon{
    transition:none !important;
  }
}


/* ========== 退出按钮：电脑端显示文字，手机端显示图标 ========== */
#mobileLogoutBtn .logout-icon{
  display:none;
}
#mobileLogoutBtn .logout-text{
  display:inline;
}
@media (max-width:768px){
  #mobileLogoutBtn .logout-icon{
    display:inline;
  }
  #mobileLogoutBtn .logout-text{
    display:none;
  }
}

/* ========== 铃铛向右调整5px ========== */
.top-notif-icon{
  margin-right:5px !important;
}