/* ============================================================
   eNotarize — header account controls
   The bell and the avatar dropdown live in the shared header,
   which both the public and the account layout render, so these
   rules cannot live in dashboard.css. Loaded by both layouts.
   ============================================================ */

.dash__navr { display: flex; align-items: center; gap: .7rem; margin-left: 1rem; }

.dash__bell {
  position: relative; display: grid; place-items: center; width: 2.4rem; height: 2.4rem;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer;
  color: var(--t-secondary); text-decoration: none; transition: border-color .2s, color .2s;
}
.dash__bell:hover { border-color: var(--brand); color: var(--brand); }
.dash__bell:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.dash__dot {
  position: absolute; top: .45rem; right: .5rem; width: 8px; height: 8px;
  border-radius: 50%; background: var(--error); box-shadow: 0 0 0 2px #fff;
}
.dash__dot[hidden] { display: none; }

.dash__me { display: inline-flex; align-items: center; gap: .55rem; font-size: .88rem; }

.dash__avatar {
  display: grid; place-items: center; flex: none; width: 2.1rem; height: 2.1rem;
  border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--g3));
  color: #fff; font: 700 .85rem var(--font-display);
}
.dash__avatar--lg { width: 2.9rem; height: 2.9rem; font-size: 1.05rem; }

a.dash__me { color: inherit; text-decoration: none; border-radius: 999px; padding: .15rem .6rem .15rem .15rem; transition: background .2s; }
a.dash__me:hover { background: var(--paper-3); }
a.dash__me:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---------- header user dropdown ---------- */

.umenu { position: relative; }
.umenu__btn {
  display: inline-flex; align-items: center; gap: .55rem; padding: .15rem .6rem .15rem .15rem;
  border: 1px solid transparent; border-radius: 999px; background: none; cursor: pointer;
  font: 500 .88rem var(--font-ui); color: var(--t); transition: background .2s, border-color .2s;
}
.umenu__btn:hover, .umenu.is-open .umenu__btn { background: var(--paper-3); border-color: var(--line-2); }
.umenu__btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.umenu__chev { font-size: .6rem; color: var(--t-faint); transition: transform .2s; }
.umenu.is-open .umenu__chev { transform: rotate(180deg); }

.umenu__list {
  position: absolute; right: 0; top: calc(100% + .6rem); z-index: 70; width: 15.5rem; padding: .4rem;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--sh-md);
}
.umenu__list[hidden] { display: none; }
/* The panel sits .6rem below the trigger, which would leave a strip of
   dead space: moving the pointer across it fires mouseleave and the menu
   closes before it can be reached. This bridges the gap invisibly. */
.umenu__list::before { content: ''; position: absolute; left: 0; right: 0; top: -.6rem; height: .6rem; }
.umenu__head {
  display: flex; align-items: center; gap: .7rem; padding: .7rem .7rem .8rem;
  margin-bottom: .3rem; border-bottom: 1px solid var(--line-2);
}
.umenu__head > span:last-child { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.umenu__head b { font: 700 .92rem var(--font-display); }
.umenu__head small { font-size: .72rem; color: var(--t-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.umenu__head .dash__avatar--lg { width: 2.4rem; height: 2.4rem; font-size: .95rem; margin: 0; box-shadow: none; }
.umenu__list a {
  display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem; border-radius: 9px;
  font-size: .88rem; font-weight: 600; color: var(--t-secondary); text-decoration: none;
  transition: background .15s, color .15s;
}
.umenu__list a i { width: 1rem; text-align: center; font-size: .82rem; color: var(--t-faint); }
.umenu__list a:hover, .umenu__list a:focus-visible { background: var(--brand-soft); color: var(--brand); outline: none; }
.umenu__list a:hover i, .umenu__list a:focus-visible i { color: var(--brand); }
.umenu__list hr { border: 0; border-top: 1px solid var(--line-2); margin: .3rem .2rem; }
.umenu__list .umenu__out:hover, .umenu__list .umenu__out:focus-visible { background: var(--error-lighter); color: var(--error-dark); }
.umenu__list .umenu__out:hover i, .umenu__list .umenu__out:focus-visible i { color: var(--error-dark); }

@media (max-width: 900px) {
  .dash__navr { margin-left: auto; }
}
@media (max-width: 600px) {
  .dash__me b { display: none; }
  .dash__navr .btn { padding-inline: 12px; }
  .umenu__btn b, .umenu__chev { display: none; }
  .umenu__btn { padding: .15rem; }
  .umenu__list { right: -.4rem; width: min(15.5rem, calc(100vw - 2rem)); }
}
@media (prefers-reduced-motion: reduce) {
  .dash__bell, .umenu__chev, .umenu__btn { transition: none; }
}