/* public/dealership-notifications.css — the notifications bell popup. Mounted at <div id="notifMenu">
   by dealership-notifications.js, shared by index.html and dealership.html. Named "dealership-*" for
   the asset-version immutable wildcard (see dealership-account-menu.css's header).

   ⚠️ LAYERS RULE (scripts/check-layers.mjs): the panel overlays scrolling content, so every
   background is 100% OPAQUE — a literal colour, never a translucent token, and no backdrop-filter.
   #101411 is the museum tablet surface colour with alpha forced to 1 (same idiom as the account
   menu's panel). */

#notifMenu { position: relative; display: inline-flex; align-items: center; }

.ntf-btn {
  padding: 0; border: 0; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; color: inherit;
}
.ntf-bell-icon { display: block; width: 16px; height: 16px; fill: currentColor; }
.ntf-btn:hover, .ntf-btn:focus-visible { box-shadow: 0 0 0 2px rgba(60, 223, 123, 0.65); outline: none; }

.ntf-panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 50;
  width: max-content; min-width: 260px; max-width: min(320px, calc(100vw - 24px));
  border-radius: 12px; padding: 6px; margin: 0;
  background: #ffffff; color: #141414;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.24), 0 12px 32px rgba(0, 0, 0, 0.32);
}
.ntf-panel[hidden] { display: none; }

.ntf-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px 10px; margin-bottom: 6px; border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.ntf-panel-title { font-size: 13px; font-weight: 700; }
.ntf-alerts-link { font-size: 11px; font-weight: 600; color: #1b7f3b; text-decoration: none; white-space: nowrap; }
.ntf-alerts-link:hover, .ntf-alerts-link:focus-visible { text-decoration: underline; outline: none; }

.ntf-panel-list { display: flex; flex-direction: column; max-height: 320px; overflow-y: auto; }
.ntf-empty { padding: 12px 10px; font-size: 12px; opacity: 0.7; }
.ntf-item { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; }
.ntf-item:hover { background: rgba(0, 0, 0, 0.05); }
.ntf-time { font-size: 10px; opacity: 0.6; }
.ntf-text { font-size: 12.5px; line-height: 1.35; }
.ntf-status { font-size: 10px; color: #b3251f; font-weight: 700; }

/* Museum/tablet context — opaque dark panel, same idiom as the account menu. */
#market .ntf-panel,
html[data-embed="museum"] .ntf-panel {
  background: #101411; color: #eafbea;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.5);
}
#market .ntf-panel-head,
html[data-embed="museum"] .ntf-panel-head { border-bottom-color: rgba(234, 251, 234, 0.16); }
#market .ntf-item:hover,
html[data-embed="museum"] .ntf-item:hover { background: rgba(234, 251, 234, 0.1); }
#market .ntf-alerts-link,
html[data-embed="museum"] .ntf-alerts-link { color: #7ee2a1; }
#market .ntf-status,
html[data-embed="museum"] .ntf-status { color: #ff8a80; }