/* ── Notification Wrapper ────────────────────────────────── */
.notif-wrapper {
  position: relative;
  display:  flex;
  align-items: center;
  margin-right: 8px;
}

/* ── Bell Button ─────────────────────────────────────────── */
.notif-bell {
  position:        relative;
  width:           40px;
  height:          40px;
  border-radius:   50%;
  border:          1px solid #e8ecf0;
  background:      #fff;
  color:           #6b7a8d;
  font-size:       17px;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      all 0.2s;
  outline:         none;
}
.notif-bell:hover {
  background: #f0f4f8;
  color:      var(--primary, #1a5276);
  border-color: #c5d0db;
}
.notif-bell.has-notif {
  color:        #e67e22;
  border-color: #f5cba7;
  background:   #fef9e7;
  animation:    bell-ring 2s ease infinite;
}
@keyframes bell-ring {
  0%,100% { transform: rotate(0deg);   }
  5%      { transform: rotate(-15deg); }
  10%     { transform: rotate(15deg);  }
  15%     { transform: rotate(-10deg); }
  20%     { transform: rotate(10deg);  }
  25%     { transform: rotate(0deg);   }
}

/* ── Badge ───────────────────────────────────────────────── */
.notif-badge {
  position:        absolute;
  top:             -4px;
  right:           -4px;
  min-width:       18px;
  height:          18px;
  background:      #e74c3c;
  color:           #fff;
  border-radius:   20px;
  font-size:       10px;
  font-weight:     700;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         0 4px;
  border:          2px solid #fff;
  line-height:     1;
}

/* ── Dropdown Panel ──────────────────────────────────────── */
.notif-panel {
  position:      absolute;
  top:           calc(100% + 10px);
  right:         0;
  width:         360px;
  background:    #fff;
  border-radius: 14px;
  box-shadow:    0 8px 32px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.08);
  border:        1px solid #e8ecf0;
  z-index:       9999;
  overflow:      hidden;
  opacity:       0;
  transform:     translateY(-8px) scale(0.97);
  pointer-events:none;
  transition:    all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.notif-panel.open {
  opacity:       1;
  transform:     translateY(0) scale(1);
  pointer-events:all;
}

/* ── Panel Header ────────────────────────────────────────── */
.notif-panel-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         14px 16px 12px;
  border-bottom:   1px solid #f0f2f5;
  font-weight:     700;
  font-size:       14px;
  color:           #1a2940;
}
.notif-mark-all {
  background:  none;
  border:      none;
  color:       var(--primary, #1a5276);
  font-size:   12px;
  cursor:      pointer;
  font-weight: 600;
  padding:     4px 8px;
  border-radius: 6px;
  transition:  background 0.15s;
}
.notif-mark-all:hover { background: #eaf4fb; }

/* ── Notification List ───────────────────────────────────── */
.notif-list {
  max-height:  400px;
  overflow-y:  auto;
  padding:     6px 0;
}
.notif-list::-webkit-scrollbar { width: 4px; }
.notif-list::-webkit-scrollbar-track { background: transparent; }
.notif-list::-webkit-scrollbar-thumb { background: #dde2e8; border-radius: 4px; }

/* ── Notification Item ───────────────────────────────────── */
.notif-item {
  display:        flex;
  align-items:    flex-start;
  gap:            12px;
  padding:        12px 16px;
  text-decoration:none;
  color:          inherit;
  transition:     background 0.15s;
  position:       relative;
  cursor:         pointer;
}
.notif-item:hover    { background: #f7f9fc; }
.notif-item.is-read  { opacity: 0.6; }

.notif-item-icon {
  width:           36px;
  height:          36px;
  border-radius:   10px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       15px;
  flex-shrink:     0;
}
.notif-item-body {
  flex: 1;
  min-width: 0;
}
.notif-item-title {
  font-size:   13px;
  font-weight: 600;
  color:       #1a2940;
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.notif-item-sub {
  font-size: 12px;
  color:     #6b7a8d;
  white-space: nowrap;
  overflow:  hidden;
  text-overflow: ellipsis;
}
.notif-item-time {
  font-size: 11px;
  color:     #9aa5b4;
  margin-top: 2px;
}
.notif-unread-dot {
  width:         8px;
  height:        8px;
  background:    #e74c3c;
  border-radius: 50%;
  flex-shrink:   0;
  margin-top:    4px;
}

/* ── Empty State ─────────────────────────────────────────── */
.notif-empty {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  padding:         36px 20px;
  color:           #9aa5b4;
  gap:             10px;
  font-size:       13px;
}
.notif-empty i { font-size: 28px; color: #27ae60; }

/* ── Loading ─────────────────────────────────────────────── */
.notif-loading {
  text-align:  center;
  padding:     24px;
  color:       #9aa5b4;
  font-size:   13px;
}

/* ── New notification flash (brief intense ring on new arrival) ── */
.notif-bell.new-notif-flash {
  background:   #e67e22 !important;
  color:        white   !important;
  border-color: #e67e22 !important;
  animation:    bell-new-flash 0.6s ease forwards !important;
}
@keyframes bell-new-flash {
  0%   { transform: scale(1)    rotate(0deg);  }
  20%  { transform: scale(1.25) rotate(-20deg);}
  40%  { transform: scale(1.25) rotate(20deg); }
  60%  { transform: scale(1.15) rotate(-10deg);}
  80%  { transform: scale(1.1)  rotate(5deg);  }
  100% { transform: scale(1)    rotate(0deg);  }
}

/* ── Toast notification ─────────────────────────────────────── */
#notif-toast:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,0.22), 0 3px 12px rgba(0,0,0,0.12) !important;
  border-color: #c0cdd8 !important;
}