/* Pack14UI1: Glass Popups (more solid but still glassy)
   Scope: Modals + dropdowns + popovers that were too transparent in dark mode.
   Add-only: safe overrides using !important.
*/

:root{
  --oh-pop-bg: rgba(14,18,24,.92);
  --oh-pop-border: rgba(255,255,255,.12);
  --oh-pop-shadow: 0 24px 90px rgba(0,0,0,.55);
  --oh-pop-backdrop: rgba(0,0,0,.62);
}

html[data-theme="light"]{
  --oh-pop-bg: rgba(255,255,255,.94);
  --oh-pop-border: rgba(15,23,42,.14);
  --oh-pop-shadow: 0 18px 50px rgba(2,6,23,.16);
  --oh-pop-backdrop: rgba(2,6,23,.30);
}

/* --------------------
   Universal popup look
--------------------- */

#hfModalCard,
.slk-pop,
.slk-search-pop,
.slk-modal-card,
.notifs-menu,
.pp-panel,
.ms-panel{
  background: var(--oh-pop-bg) !important;
  border: 1px solid var(--oh-pop-border) !important;
  box-shadow: var(--oh-pop-shadow) !important;
  backdrop-filter: blur(14px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.2) !important;
}

/* DM member picker modal (hfModal) */
#hfModalBack{
  background: var(--oh-pop-backdrop) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

#hfModalCard{
  border-radius: 18px !important;
}

#hfModalHead{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)) !important;
}
html[data-theme="light"] #hfModalHead{
  background: linear-gradient(180deg, rgba(15,23,42,.04), rgba(15,23,42,.02)) !important;
}

/* Slack-style chat dropdowns */
.slk-pop,
.slk-search-pop{
  border-radius: 14px !important;
}

/* Slack-style chat modals */
.slk-modal{
  background: var(--oh-pop-backdrop) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* Notifications dropdown (details based) */
.notifs{ position: relative; }
.notifs > summary{ list-style: none; }
.notifs > summary::-webkit-details-marker{ display:none; }

.notifs-menu{
  position:absolute;
  right:0;
  top: calc(100% + 10px);
  width: min(360px, 92vw);
  border-radius: 18px;
  overflow:hidden;
  z-index: 999;
  display:none;
  padding: 10px;
}

.notifs[open] .notifs-menu{ display:block; }

.notifs-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 10px 10px 8px;
  border-bottom: 1px solid var(--oh-pop-border);
  margin: -10px -10px 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
html[data-theme="light"] .notifs-head{
  background: linear-gradient(180deg, rgba(15,23,42,.03), rgba(15,23,42,.01));
}

.notifs-item{
  display:block;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid transparent;
}
.notifs-item:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.08);
  text-decoration: none;
}
html[data-theme="light"] .notifs-item:hover{
  background: rgba(15,23,42,.04);
  border-color: rgba(15,23,42,.10);
}

.notifs-item.unread{
  box-shadow: 0 0 0 3px rgba(93,168,122,.12) inset;
}

/* Selected-people pickers (Tasks + Calendar) */
.pp-panel,
.ms-panel{
  border-radius: 16px !important;
}

/* Slightly stronger inner separators for readability */
#hfModalHead,
.notifs-head,
.slk-modal-head{
  border-bottom-color: rgba(255,255,255,.10) !important;
}
html[data-theme="light"] #hfModalHead,
html[data-theme="light"] .notifs-head,
html[data-theme="light"] .slk-modal-head{
  border-bottom-color: rgba(15,23,42,.10) !important;
}