/* ==========================================================================
   /themes/meridian/css/topbar-widgets.css

   Messages + Notifications topbar buttons — themed port of the clinical
   portal's equivalent widgets (healtharea/assets/dashboard.css, "Notification
   System" section). Reuses the theme's existing dropdown-menu shell
   (.lx-menu, see components.css) for open/close/outside-click via theme.js's
   generic [data-menu-toggle] engine; adds panel-specific layout/list styling
   on top under distinct classes so list items don't get caught by the
   generic "any .lx-menu__item click closes the menu" rule.

   Kept in the theme's shared css/ folder (not inlined into a page) so any
   current or future page using this theme picks these up for free via
   theme.json.
   ========================================================================== */

.lx-topbar-widget { position: relative; }

/* Text-size trigger: reuses .lx-icon-btn's circular sizing but shows the
   literal "Aa" label the pre-shell portal topbar used, instead of an icon. */
.lx-icon-btn--text { font-size: 13px; font-weight: 700; letter-spacing: -.01em; }

.lx-topbar-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--lx-r-full);
  background: var(--lx-danger);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

.lx-notif-panel {
  width: 340px;
  max-height: 420px;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.lx-notif-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lx-s-2);
  padding: var(--lx-s-3) var(--lx-s-3) var(--lx-s-2);
  flex: none;
}
.lx-notif-panel__title { font-size: var(--lx-fs-sm); font-weight: 600; color: var(--lx-t1); }
.lx-notif-panel__clear {
  appearance: none; border: none; background: transparent; cursor: pointer; font: inherit;
  font-size: var(--lx-fs-xs); color: var(--lx-t3);
  transition: color var(--lx-t-fast) var(--lx-ease);
}
.lx-notif-panel__clear:hover { color: var(--lx-t1); }

.lx-notif-panel__list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--lx-s-1) var(--lx-s-2) var(--lx-s-2);
  max-height: 360px;
}

.lx-notif-item, .lx-msg-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--lx-s-2);
  width: 100%;
  padding: var(--lx-s-2) var(--lx-s-3);
  border-radius: var(--lx-r-md);
  text-align: left;
  cursor: pointer;
  transition: background var(--lx-t-fast) var(--lx-ease);
}
.lx-notif-item:hover, .lx-msg-item:hover { background: var(--lx-fill); text-decoration: none; }
.lx-notif-item.unread, .lx-msg-item.unread { background: var(--lx-fill); }
.lx-notif-item.unread::before, .lx-msg-item.unread::before {
  content: '';
  position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  border-radius: var(--lx-r-full);
  background: var(--lx-accent);
}

.lx-notif-item__icon { flex: none; font-size: 1rem; line-height: 1.4; }
.lx-notif-item__body { flex: 1 1 auto; min-width: 0; }
.lx-notif-item__title { display: block; font-size: var(--lx-fs-xs); font-weight: 600; color: var(--lx-t1); }
.lx-notif-item__text {
  display: block; margin-top: 1px; font-size: var(--lx-fs-xs); color: var(--lx-t2);
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.lx-notif-item__time { display: block; margin-top: 2px; font-size: 10px; color: var(--lx-t4); }
.lx-notif-item__dismiss {
  flex: none; appearance: none; border: none; background: transparent; cursor: pointer;
  color: var(--lx-t4); font-size: var(--lx-fs-sm); line-height: 1; padding: 2px;
}
.lx-notif-item__dismiss:hover { color: var(--lx-t1); }

.lx-notif-empty, .lx-msg-empty {
  padding: var(--lx-s-4) var(--lx-s-3); text-align: center; font-size: var(--lx-fs-xs); color: var(--lx-t4);
}

.lx-msg-tabs { display: flex; gap: var(--lx-s-1); }
.lx-msg-tab {
  appearance: none; border: none; background: transparent; cursor: pointer; font: inherit;
  padding: var(--lx-s-1) var(--lx-s-2);
  font-size: var(--lx-fs-xs); color: var(--lx-t3);
  border-bottom: 2px solid transparent;
}
.lx-msg-tab.is-active { color: var(--lx-accent); border-bottom-color: var(--lx-accent); font-weight: 600; }
.lx-msg-list { display: none; }
.lx-msg-list.is-active { display: block; }

.lx-msg-item__avatar {
  flex: none;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--lx-r-full);
  background: var(--lx-accent-soft);
  color: var(--lx-accent);
  font-size: var(--lx-fs-xs); font-weight: 600; text-transform: uppercase;
}
.lx-msg-item__body { flex: 1 1 auto; min-width: 0; }
.lx-msg-item__name { display: flex; align-items: center; gap: var(--lx-s-1); font-size: var(--lx-fs-xs); font-weight: 600; color: var(--lx-t1); }
.lx-msg-item__preview {
  display: block; margin-top: 1px; font-size: var(--lx-fs-xs); color: var(--lx-t2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lx-msg-item__time { display: block; margin-top: 2px; font-size: 10px; color: var(--lx-t4); }
.lx-msg-item__unread {
  flex: none;
  min-width: 16px; height: 16px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--lx-r-full);
  background: var(--lx-danger); color: #fff; font-size: 10px; font-weight: 700;
}

@media (max-width: 600px) {
  /* A width tied to 100vw but a position still anchored to the trigger
     button's own right edge (.lx-menu's right:0) only lines up if that
     button sits exactly 16px from the viewport edge — it doesn't, so the
     panel ran off the left edge. Anchoring to the viewport itself instead
     of the trigger removes that assumption entirely. */
  .lx-notif-panel {
    position: fixed;
    /* fixed positioning resolves top/left/right against the viewport, not
       .lx-menu's inherited "calc(100% + gap)" (which was relative to the
       trigger) — pin it under the topbar explicitly instead. */
    top: calc(var(--lx-topbar-h) + var(--lx-s-2));
    left: var(--lx-s-3);
    right: var(--lx-s-3);
    width: auto;
  }
}