/* Cards */
.card {
  border: 0;
  border-radius: 16px;
}

/* Attachment thumbs */
.att-thumb{
  display:inline-block;
  width:240px;
  max-width:46vw;
  border:1px solid rgba(0,0,0,.1);
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}

.att-thumb-img{
  width:100%;
  height:160px;
  object-fit:cover;
  display:block;
  background:#f3f4f6;
}

.att-thumb-name{
  padding:8px 10px;
  font-size:12px;
  color:#333;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* =========================================================
   Alerts dropdown overlay (bell panel)
   ========================================================= */

/* The bell dropdown becomes a fixed overlay panel */
.alerts-overlay{
  position: fixed !important;
  top: 64px;                      /* adjust if navbar height differs */
  right: 12px;
  width: min(520px, 96vw);
  max-height: calc(100vh - 90px);
  overflow: visible;              /* allow inner dropdowns to escape */
  z-index: 2000;                  /* above page content */
  transform: none !important;     /* defeat Popper transforms */
  inset: auto !important;         /* defeat Popper inset positioning */
  left: auto !important;
  bottom: auto !important;
}

/* Bootstrap uses .show to display dropdown-menu */
.alerts-overlay.show{
  display:block;
}

/* Only the alerts list scrolls (not the whole panel) */
.alerts-overlay #alertsList{
  max-height: calc(100vh - 260px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Give the header/footer a little stickiness inside the overlay (optional but nice) */
.alerts-overlay > .border-bottom:first-child{
  position: sticky;
  top: 0;
  background: inherit;
  z-index: 1;
}
.alerts-overlay > .border-top:last-child{
  position: sticky;
  bottom: 0;
  background: inherit;
  z-index: 1;
}

/* ---------------------------------------------------------
   Inner dropdowns (per-alert Actions menu)
   --------------------------------------------------------- */

/*
  IMPORTANT:
  Inner dropdown menus must appear ABOVE the overlay and not get clipped.
  Use a higher z-index than the overlay and any navbar.
*/
.alerts-overlay .dropdown-menu{
  z-index: 3000;
}

/*
  If any ancestor has overflow hidden, dropdowns can get clipped.
  Bootstrap list items sometimes inherit overflow rules; force visible.
*/
.alerts-overlay .list-group-item,
.alerts-overlay .list-group,
.alerts-overlay .list-group-flush{
  overflow: visible;
}

/* Make sure the per-alert Actions dropdown aligns nicely */
.alerts-overlay .dropdown-menu-end{
  right: 0;
  left: auto;
}

/* Slightly reduce padding in overlay list items (optional) */
.alerts-overlay .list-group-item{
  padding: 0.75rem 0.85rem;
}

/* ---------------------------------------------------------
   Mobile tweaks
   --------------------------------------------------------- */
@media (max-width: 576px){
  .alerts-overlay{
    top: 56px;                    /* slightly tighter on small screens */
    right: 8px;
    width: min(520px, 98vw);
    max-height: calc(100vh - 72px);
  }
  .alerts-overlay #alertsList{
    max-height: calc(100vh - 240px);
  }
}

/* ---------------------------------------------------------
   Safety: if someone accidentally applies alerts-overlay to
   a non-dropdown-menu element, don't break layout.
   --------------------------------------------------------- */
.dropdown-menu.alerts-overlay{
  transform: none !important;
  inset: auto !important;
  top: 64px !important;
  right: 12px !important;
  left: auto !important;
  bottom: auto !important;
}
.hover-shadow:hover { box-shadow: 0 .25rem .75rem rgba(0,0,0,.08); }