/* Unified topbar for case/proposal/spec pages */
.page-topbar{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 10px 15px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(10px) !important;
  border-bottom: 1px solid #dbe3f0 !important;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.08) !important;
}

.page-topbar h1{
  margin: 0 !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: #0a4da3 !important;
  text-align: center !important;
  flex: 1 1 auto !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.page-topbar .header-buttons,
.page-topbar .tb-actions{
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}

.page-topbar .btn,
.page-topbar .tb-btn{
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  border: 1px solid #c9d7ef !important;
  background: #fff !important;
  color: #1f4d93 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background-color .2s, color .2s, border-color .2s !important;
}

.page-topbar .btn i,
.page-topbar .tb-btn i{
  font-size: 14px !important;
  line-height: 1 !important;
}

.page-topbar .btn:hover,
.page-topbar .tb-btn:hover{
  background: #e9f2ff !important;
  color: #0a4da3 !important;
  border-color: #b9cff5 !important;
}

.page-topbar .btn.btn-success{
  background: #16a34a !important;
  border-color: #16a34a !important;
  color: #fff !important;
}

.page-topbar .btn.btn-success:hover{
  background: #15803d !important;
  border-color: #15803d !important;
  color: #fff !important;
}

.page-topbar .btn.btn-primary,
.page-topbar .btn.primary,
.page-topbar .tb-btn.primary{
  background: #0d6efd !important;
  border-color: #0d6efd !important;
  color: #fff !important;
}

.page-topbar .btn.btn-primary:hover,
.page-topbar .btn.primary:hover,
.page-topbar .tb-btn.primary:hover{
  background: #0b5ed7 !important;
  border-color: #0b5ed7 !important;
  color: #fff !important;
}

.page-topbar .btn.btn-outline-danger,
.page-topbar .btn.btn-danger{
  border-color: #dc3545 !important;
  color: #dc3545 !important;
  background: #fff !important;
}

.page-topbar .btn.btn-outline-danger:hover,
.page-topbar .btn.btn-danger:hover{
  background: #ffe9ec !important;
  border-color: #c82333 !important;
  color: #b4232c !important;
}

.page-topbar .topbar-notification{
  position: relative !important;
}

.page-topbar .topbar-notification-badge{
  position: absolute !important;
  top: -6px !important;
  right: -6px !important;
  min-width: 18px !important;
  height: 18px !important;
  border-radius: 999px !important;
  padding: 0 5px !important;
  background: #dc3545 !important;
  color: #fff !important;
  font-size: 11px !important;
  line-height: 18px !important;
  text-align: center !important;
  border: 1px solid #fff !important;
}

.page-topbar .topbar-notification-menu{
  position: absolute !important;
  top: calc(100% + 2px) !important;
  right: 0 !important;
  left: auto !important;
  z-index: 1080 !important;
  display: none !important;
  margin: 0 !important;
  width: min(360px, calc(100vw - 20px)) !important;
  padding: 0 !important;
  border: 1px solid #dfe7f2 !important;
  border-radius: 12px !important;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14) !important;
  overflow: hidden !important;
}

.page-topbar .topbar-notification-menu.show{
  display: block !important;
  inset: auto 0 auto auto !important;
  top: calc(100% + 2px) !important;
  right: 0 !important;
  left: auto !important;
  transform: none !important;
  margin: 0 !important;
}

/* Bootstrap Popper 会写入 transform，强制收敛到按钮正下方，避免出现过大留白。 */
.page-topbar .topbar-notification-menu[data-bs-popper]{
  inset: auto 0 auto auto !important;
  top: calc(100% + 2px) !important;
  right: 0 !important;
  left: auto !important;
  transform: none !important;
  margin: 0 !important;
}

.page-topbar .topbar-notification-title{
  padding: 10px 12px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  background: #f8fbff !important;
  border-bottom: 1px solid #e6ecf5 !important;
}

.page-topbar .topbar-notification-body{
  padding: 10px 12px !important;
  max-height: 360px !important;
  overflow: auto !important;
}

.page-topbar .topbar-notification-list{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  gap: 8px !important;
}

.page-topbar .topbar-notification-tools{
  display: flex !important;
  justify-content: flex-end !important;
  margin-bottom: 8px !important;
}

.page-topbar .topbar-notification-clear-all{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  color: #0d6efd !important;
  font-size: 12px !important;
  cursor: pointer !important;
}

.page-topbar .topbar-notification-clear-all:hover{
  color: #0b5ed7 !important;
  text-decoration: underline !important;
}

.page-topbar .topbar-notification-item{
  border: 1px solid #e6ecf5 !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  background: #f8fbff !important;
  color: #334155 !important;
  font-size: 13px !important;
  display: block !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.page-topbar .topbar-notification-item:hover{
  background: #edf4ff !important;
  border-color: #d3e4ff !important;
  color: #0f172a !important;
}

.page-topbar .topbar-notification-actions{
  margin-top: 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.page-topbar .topbar-notification-open{
  color: #0d6efd !important;
  text-decoration: none !important;
  font-size: 12px !important;
}

.page-topbar .topbar-notification-open:hover{
  text-decoration: underline !important;
}

.page-topbar .topbar-notification-open.disabled{
  color: #94a3b8 !important;
}

.page-topbar .topbar-notification-dismiss{
  background: transparent !important;
  border: 0 !important;
  color: #dc3545 !important;
  font-size: 12px !important;
  padding: 0 !important;
  cursor: pointer !important;
}

.page-topbar .topbar-notification-dismiss:hover{
  color: #b4232c !important;
  text-decoration: underline !important;
}

.page-topbar .topbar-notification-empty{
  color: #64748b !important;
  text-align: center !important;
  padding: 18px 6px !important;
}

@media (max-width: 768px){
  .page-topbar{
    padding: 8px 10px !important;
  }

  .page-topbar h1{
    font-size: 16px !important;
  }

  .page-topbar .btn,
  .page-topbar .tb-btn{
    font-size: 12px !important;
    padding: 4px 8px !important;
  }

  .page-topbar .btn span,
  .page-topbar .tb-btn span{
    display: none !important;
  }
}