/* bell.css / hotfix.css */
.bell-modal { z-index: 3050 !important; }
.modal-backdrop { z-index: 3040 !important; }

@media (min-width: 768px){
  #bellModal .modal-dialog { max-width: 520px; margin: 80px auto 16px; } /* top-center */
  /* top-right चाहिये तो: margin: 80px 24px 16px auto; */
}
#bellModal .modal-body { max-height: 65vh; overflow-y: auto; }

/* Bell always clickable */
.nav-bell { position: relative; z-index: 3100; }
.nav-bell .bell-btn { pointer-events: auto; cursor: pointer; }



/* static/css/bell.css */
.topbar {
  position: sticky; top: 0; z-index: 1040;
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; background: #fff; border-bottom: 1px solid #eee;
}
.topbar .topbar-title { font-weight: 600; }

.nav-bell { position: relative; }
.bell-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid #e5e5e5; background: #fff;
}
.bell-btn:hover { background: #f7f7f7; }
.bell-count {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px;
  border-radius: 9px; padding: 0 4px; font-size: 11px; line-height: 18px; text-align: center;
  background: #ef4444; color: #fff;
}
.bell-dropdown {
  position: absolute; right: 0; top: 44px; width: 360px; max-height: 420px; overflow: auto;
  background: #fff; border: 1px solid #e5e5e5; border-radius: 10px; box-shadow: 0 8px 20px rgba(0,0,0,.08);
}
.bell-head { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid #f0f0f0; }
.bell-actions .btn-link { background:none; border:none; color:#2563eb; font-size:12px; margin-left:8px; }
.bell-list { padding: 8px; }
.bell-item {
  display:flex; gap:10px; padding:10px; border-radius:8px; border:1px solid #f3f4f6; margin-bottom:8px;
}
.bell-item.unread { background:#fff; }
.bell-item.read { opacity:.75; }
.bell-item .meta { font-size:12px; color:#6b7280; }
.bell-empty { padding:16px; text-align:center; color:#9ca3af; }

/* Responsive: mobile full width dropdown */
@media (max-width: 576px) {
  .bell-dropdown { width: calc(100vw - 16px); right: 8px; left: 8px; }
  .topbar .topbar-title { position: absolute; left: 50%; transform: translateX(-50%); }
  .topbar-right { margin-left: auto; }
}
#bellModal .bell-item .title { font-weight: 600; }
#bellModal .badge { text-transform: none; }


/* ===== Bell modal: compact and always on top ===== */
.bell-modal { z-index: 2000 !important; }
.modal-backdrop { z-index: 1990 !important; }

/* Desktop: compact width + near top */
@media (min-width: 768px) {
  #bellModal .modal-dialog {
    max-width: 520px;
    margin: 12px auto 16px;  /* top ke paas, center */
  }
}

/* (Optional) Top-right pin instead of center:
@media (min-width: 768px) {
  #bellModal .modal-dialog { margin: 12px 12px 16px auto; }
}
*/

#bellModal .modal-content { border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,.15); }
#bellModal .modal-body   { max-height: 70vh; overflow: auto; }
#bellModal .modal-header,
#bellModal .modal-footer { padding-top: 8px; padding-bottom: 8px; }


/* ===== Fix Bell Popup position + size ===== */
#bellModal {
  z-index: 3000 !important;              /* सबसे ऊपर */
}

#bellModal .modal-dialog {
  max-width: 500px;                      /* compact width */
  margin: 80px auto 0;                   /* ऊपर लाओ (80px gap) */
}

#bellModal .modal-content {
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0,0,0,.2);
}

#bellModal .modal-body {
  max-height: 65vh;                      /* छोटा और usable */
  overflow-y: auto;
}

/* अगर top-right में चाहिए: */
@media (min-width: 768px) {
  #bellModal .modal-dialog {
    margin: 80px 24px 0 auto;            /* right side pin */
  }
}
/* ===== Bell modal: compact and always on top ===== */
.bell-modal { z-index: 3000 !important; }
.modal-backdrop { z-index: 2990 !important; }

@media (min-width: 768px) {
  #bellModal .modal-dialog {
    max-width: 520px;
    margin: 80px auto 16px;   /* top के पास, center */
    /* top-right चाहिये तो:  margin: 80px 24px 16px auto; */
  }
}

#bellModal .modal-content { border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,.2); }
#bellModal .modal-body   { max-height: 65vh; overflow-y: auto; }
/* Bell modal always on top */
.bell-modal { z-index: 3050 !important; }
.modal-backdrop { z-index: 3040 !important; }

/* Desktop: compact and near top (center) */
@media (min-width: 768px) {
  #bellModal .modal-dialog {
    max-width: 520px;
    margin: 80px auto 16px;   /* top के पास */
  }
}
/* If you prefer top-right instead of center, use this instead of the block above:
@media (min-width: 768px) {
  #bellModal .modal-dialog { max-width:520px; margin:80px 24px 16px auto; }
}
*/

#bellModal .modal-content { border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,.2); }
#bellModal .modal-body   { max-height: 65vh; overflow-y: auto; }
#bellModal .modal-header, #bellModal .modal-footer { padding-top:8px; padding-bottom:8px; }
/* Bell always clickable, never under overlays */
.nav-bell { position: relative; z-index: 2100; }  /* higher than toolbars */
.nav-bell .bell-btn { pointer-events: auto; cursor: pointer; }

/* Modal always above everything */
.bell-modal { z-index: 3050 !important; }
.modal-backdrop { z-index: 3040 !important; }

/* Compact modal near top (center) */
@media (min-width: 768px) {
  #bellModal .modal-dialog {
    max-width: 520px;
    margin: 80px auto 16px;
  }
}
#bellModal .modal-body { max-height: 65vh; overflow-y: auto; }
/* Bell हमेशा clickable रहे */
.nav-bell { position: relative; z-index: 2100; }
.nav-bell .bell-btn { pointer-events: auto; cursor: pointer; }

/* Bell modal सबसे ऊपर */
.bell-modal { z-index: 3050 !important; }
.modal-backdrop { z-index: 3040 !important; }



.bell-modal { z-index: 3050 !important; }
.modal-backdrop { z-index: 3040 !important; }

@media (min-width: 768px){
  #bellModal .modal-dialog { max-width: 520px; margin: 80px auto 16px; } /* top-center */
}
#bellModal .modal-body { max-height: 65vh; overflow-y: auto; }

.nav-bell { position: relative; z-index: 3100; }


.bell-modal{z-index:3050!important}.modal-backdrop{z-index:3040!important}
@media (min-width:768px){#bellModal .modal-dialog{max-width:520px;margin:80px auto 16px}}
#bellModal .modal-body{max-height:65vh;overflow-y:auto}


/* keep bell clickable */
.nav-bell { position: relative; z-index: 3100; }

/* modal & fallback backdrop on top */
.bell-modal { z-index: 3050 !important; }
.modal-backdrop { z-index: 3040 !important; }
.custom-bell-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); }

/* compact, near top */
@media (min-width: 768px){
  #bellModal .modal-dialog { max-width: 520px; margin: 80px auto 16px; }
}
#bellModal .modal-body { max-height: 65vh; overflow-y: auto; }
[data-bell] .bell-dropdown { display: none !important; }
.nav-bell { position: relative; z-index: 1210; }
.bell-btn { pointer-events: auto; cursor: pointer; }