/* All Notifications page */

.an-back{
  color: rgba(255,255,255,0.78);
  font-weight: 700;
  text-decoration: none;
}
.an-back:hover{ color:#fff; text-decoration: underline; text-underline-offset: 3px; }
.an-title{
  color:#fff;
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: 0.2px;
}
.an-sub{
  color: rgba(255,255,255,0.55);
  font-weight: 600;
  font-size: 0.85rem;
}

.an-shell{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(209, 209, 209, 0.45);
  background: #07000E;
  box-shadow: 0 18px 40px rgba(0,0,0,0.25);
}
.an-head{
  background: #d1d1d1;
  padding: 14px 22px;
  font-size: 1.1rem;
  font-weight: 800;
  color: #101010;
}
.an-body{
  padding: 22px 22px 24px;
}

/* ===== Top controls (filter pills + mark-all) ===== */
.an-body .ntf-controls{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.an-body .ntf-tabs{
  display:flex;
  align-items:center;
  gap: 10px;
}
.an-body .ntf-tab{
  border: 1px solid rgba(219,233,255,0.30);
  background: transparent;
  color: rgba(255,255,255,0.78);
  border-radius: 10px;
  padding: 8px 16px;
  font-weight: 700;
  font-size: 0.85rem;
}
.an-body .ntf-tab.active{
  background: #DBE9FF;
  border-color: #DBE9FF;
  color: #0A5BE2;
  box-shadow: none;
}
.an-body .ntf-mark{
  border: 1px solid rgba(219,233,255,0.30);
  background: transparent;
  color: rgba(255,255,255,0.85);
  border-radius: 10px;
  padding: 8px 16px;
  font-weight: 600;
  font-size: 0.85rem;
  display:inline-flex;
  align-items:center;
  gap: 8px;
}
.an-body .ntf-mark:hover{ background: rgba(255,255,255,0.06); color:#fff; }

/* ===== Section heading ===== */
.an-body .ntf-sec{
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  margin: 6px 0 12px;
}

/* ===== Notification list & items ===== */
.an-body .ntf-list{
  display:flex;
  flex-direction: column;
  gap: 12px;
}
.an-body .ntf-item{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  background: #DBE9FF;
  border: 1px solid #DBE9FF;
  color: #0F172A;
  padding: 14px 18px;
  border-radius: 12px;
}
.an-body .ntf-item.muted{
  background: transparent;
  border: 1px solid rgba(219,233,255,0.22);
  color: #fff;
}
.an-body .ntf-item:hover{ box-shadow: 0 4px 16px rgba(0,0,0,0.18); }

.an-body .ntf-left{
  display:flex;
  align-items:center;
  gap: 14px;
  min-width: 0;
}

/* Icon circles — use high specificity to win over base notifications.css */
.an-body .ntf-item .ntf-bar,
.an-body .ntf-item.muted .ntf-bar{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  flex: 0 0 auto;
  margin: 0;
  display: grid;
  place-items: center;
}
.an-body .ntf-item .ntf-bar.ntf-bar-success,
.an-body .ntf-item.muted .ntf-bar.ntf-bar-success{
  background: #22C55E;
  color: #fff;
  font-size: 1rem;
  border: 0;
}
.an-body .ntf-item .ntf-bar.ntf-bar-info,
.an-body .ntf-item.muted .ntf-bar.ntf-bar-info{
  background: #DBE9FF;
  color: #0A5BE2;
  font-size: 1rem;
  border: 0;
}
.an-body .ntf-bar i{ line-height: 1; }

/* Title + description */
.an-body .ntf-name{
  font-weight: 700;
  font-size: 0.92rem;
  color: inherit;
}
.an-body .ntf-desc{
  font-weight: 500;
  font-size: 0.82rem;
  margin-top: 3px;
}
.an-body .ntf-item .ntf-desc{ color: rgba(15,23,42,0.70); }
.an-body .ntf-item.muted .ntf-desc{ color: rgba(255,255,255,0.62); }
.an-body .ntf-item .ntf-desc a,
.an-body .ntf-item.muted .ntf-desc a{
  color: #0A5BE2;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 700;
}

/* Right side: time + dots */
.an-body .ntf-item-actions{
  display:flex;
  align-items:center;
  gap: 12px;
  flex: 0 0 auto;
}
.an-body .ntf-time{
  font-weight: 600;
  font-size: 0.78rem;
  white-space: nowrap;
}
.an-body .ntf-item .ntf-time{ color: rgba(15,23,42,0.55); }
.an-body .ntf-item.muted .ntf-time{ color: rgba(255,255,255,0.55); }
.an-body .ntf-dots{
  border: 0;
  background: transparent;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display:grid;
  place-items:center;
  font-size: 0.95rem;
}
.an-body .ntf-item .ntf-dots{ color: rgba(15,23,42,0.55); }
.an-body .ntf-item.muted .ntf-dots{ color: rgba(255,255,255,0.65); }
.an-body .ntf-item .ntf-dots:hover{ background: rgba(15,23,42,0.08); }
.an-body .ntf-item.muted .ntf-dots:hover{ background: rgba(255,255,255,0.06); color:#fff; }

/* ===== Responsive ===== */
@media (max-width: 991.98px){
  .an-body{ padding: 18px 18px 20px; }
  .an-body .ntf-item{ padding: 12px 14px; }
  .an-body .ntf-bar{ width: 36px; height: 36px; }
}

@media (max-width: 767.98px){
  .an-body .ntf-controls{ margin-bottom: 18px; }
  .an-body .ntf-mark{ width: 100%; justify-content: center; }
  .an-body .ntf-tabs{ flex: 1 1 100%; }
  .an-body .ntf-tab{ flex: 1 1 0; text-align: center; padding: 8px 12px; }
}

@media (max-width: 575.98px){
  .an-title{ font-size: 1.15rem; }
  .an-shell{ border-radius: 14px; }
  .an-head{ padding: 11px 14px; font-size: 1rem; }
  .an-body{ padding: 14px 12px 16px; }
  .an-body .ntf-item{
    align-items: flex-start;
    padding: 12px 12px;
    gap: 10px;
  }
  .an-body .ntf-left{ gap: 10px; }
  .an-body .ntf-bar{ width: 34px; height: 34px; font-size: 0.85rem; }
  .an-body .ntf-name{ font-size: 0.86rem; }
  .an-body .ntf-desc{ font-size: 0.76rem; }
  .an-body .ntf-item-actions{
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
  }
  .an-body .ntf-time{ font-size: 0.7rem; }
}