/* User notifications and activity timeline
   Standalone stylesheet. Existing stylesheets are intentionally untouched. */

.ww-notification-wrap{position:relative;}

.ww-notification-btn{
  position:relative;
  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--ww-border-strong)!important;
  border-radius:999px!important;
  background:#fff!important;
  color:var(--ww-blue)!important;
  box-shadow:var(--ww-shadow-sm)!important;
}
.ww-notification-btn:hover,
.ww-notification-btn:focus{
  background:var(--ww-blue-soft)!important;
  color:var(--ww-blue-dark)!important;
}
.ww-notification-btn i{font-size:1.05rem;line-height:1;}

.ww-notification-count{
  position:absolute;
  top:-5px;
  right:-5px;
  min-width:19px;
  height:19px;
  padding:0 5px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--ww-danger)!important;
  color:#fff!important;
  font-size:.68rem;
  font-weight:800;
  border:2px solid #fff;
}

.ww-notification-menu{
  width:min(380px,calc(100vw - 24px));
  padding:0!important;
  border:1px solid var(--ww-border)!important;
  border-radius:20px!important;
  box-shadow:0 18px 50px rgba(15,23,42,.12)!important;
  overflow:hidden;
}
.ww-notification-menu-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  padding:.95rem 1rem;
  border-bottom:1px solid var(--ww-border);
  background:#fff;
}
.ww-notification-menu-title{
  display:flex;
  align-items:center;
  gap:.5rem;
  color:var(--ww-text)!important;
  font-weight:800;
}
.ww-notification-menu-title i{color:var(--ww-blue)!important;}
.ww-notification-mark-form{margin:0;}
.ww-notification-mark-all{
  border:0;
  background:transparent;
  color:var(--ww-blue)!important;
  font-weight:750;
  font-size:.78rem;
  padding:.25rem .1rem;
}
.ww-notification-mark-all:hover{color:var(--ww-blue-dark)!important;}

.ww-notification-list{
  max-height:390px;
  overflow-y:auto;
  background:#fff;
}
.ww-notification-item{
  display:grid;
  grid-template-columns:36px minmax(0,1fr);
  gap:.75rem;
  padding:.85rem 1rem;
  color:var(--ww-text)!important;
  border-bottom:1px solid var(--ww-border);
  text-decoration:none!important;
}
.ww-notification-item:hover{background:var(--ww-blue-soft)!important;}
.ww-notification-item.is-unread{background:linear-gradient(90deg,var(--ww-blue-soft),#fff)!important;}
.ww-notification-icon{
  width:36px;
  height:36px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--ww-blue-soft)!important;
  color:var(--ww-blue)!important;
  border:1px solid var(--ww-border-strong)!important;
}
.ww-notification-body{min-width:0;}
.ww-notification-title-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.5rem;
}
.ww-notification-title{
  color:var(--ww-text)!important;
  font-size:.9rem;
  font-weight:780;
  line-height:1.25;
}
.ww-notification-dot{
  width:8px;
  height:8px;
  flex:0 0 8px;
  margin-top:.26rem;
  border-radius:999px;
  background:var(--ww-blue)!important;
}
.ww-notification-message{
  color:var(--ww-muted)!important;
  font-size:.78rem;
  line-height:1.4;
  margin:.2rem 0 0;
  overflow-wrap:anywhere;
}
.ww-notification-time{
  display:block;
  color:#94a3b8!important;
  font-size:.72rem;
  font-weight:650;
  margin-top:.32rem;
}
.ww-notification-empty{
  padding:1.4rem 1rem;
  text-align:center;
  color:var(--ww-muted)!important;
  background:#fff;
}
.ww-notification-menu-foot{
  display:flex;
  justify-content:center;
  padding:.75rem 1rem;
  background:var(--ww-blue-soft)!important;
}
.ww-notification-menu-foot a{
  color:var(--ww-blue)!important;
  font-weight:760;
  font-size:.82rem;
}

.ww-user-activity-panel{
  width:100%;
  margin:0 auto 1.2rem;
  background:#fff!important;
  border:1px solid var(--ww-border)!important;
  border-radius:24px;
  box-shadow:var(--ww-shadow-sm)!important;
  padding:1rem;
}
.ww-user-activity-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.15rem .15rem .85rem;
  border-bottom:1px solid var(--ww-border);
  margin-bottom:.75rem;
}
.ww-user-activity-head h2{
  margin:0;
  font-size:1rem;
  font-weight:820;
}
.ww-user-activity-head p{
  margin:.25rem 0 0;
  font-size:.84rem;
  color:var(--ww-muted)!important;
}
.ww-user-activity-badge{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.38rem .7rem;
  border-radius:999px;
  background:var(--ww-blue-soft)!important;
  color:var(--ww-blue-dark)!important;
  border:1px solid var(--ww-border-strong)!important;
  font-size:.78rem;
  font-weight:800;
  white-space:nowrap;
}
.ww-user-activity-list{
  display:grid;
  gap:.65rem;
}
.ww-user-activity-item{
  display:grid;
  grid-template-columns:40px minmax(0,1fr) auto;
  gap:.75rem;
  align-items:center;
  border:1px solid var(--ww-border)!important;
  border-radius:18px;
  padding:.75rem;
  background:#fff!important;
  color:var(--ww-text)!important;
  text-decoration:none!important;
}
.ww-user-activity-item:hover{background:var(--ww-blue-soft)!important;border-color:var(--ww-border-strong)!important;}
.ww-user-activity-icon{
  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:var(--ww-blue-soft)!important;
  color:var(--ww-blue)!important;
  border:1px solid var(--ww-border-strong)!important;
}
.ww-user-activity-content{min-width:0;}
.ww-user-activity-title{
  font-weight:800;
  font-size:.9rem;
  color:var(--ww-text)!important;
  margin:0;
}
.ww-user-activity-message{
  margin:.12rem 0 0;
  color:var(--ww-muted)!important;
  font-size:.8rem;
  overflow-wrap:anywhere;
}
.ww-user-activity-time{
  color:#94a3b8!important;
  font-size:.75rem;
  font-weight:700;
  white-space:nowrap;
}
.ww-user-activity-empty{
  padding:1.2rem;
  text-align:center;
  color:var(--ww-muted)!important;
  border:1px dashed var(--ww-border-strong)!important;
  border-radius:18px;
  background:#fff!important;
}

@media (max-width:575.98px){
  .ww-notification-menu{width:calc(100vw - 16px);}
  .ww-user-activity-head{align-items:flex-start;flex-direction:column;}
  .ww-user-activity-item{grid-template-columns:40px minmax(0,1fr);}
  .ww-user-activity-time{grid-column:2;white-space:normal;}
}
.ww-notification-message,.ww-notification-time,.ww-user-activity-title,.ww-user-activity-message{display:block;}