/*
 * assets/css/topbar-menu.css - the account dropdown in the shared topbar.
 *
 * The BAR itself is styled by assets/css/topbar.css. This menu is the part that file does not
 * cover: before this one it existed only in dashboard.php and assets/support/help.css, so only
 * those two pages could show it.
 *
 * Lifted VERBATIM from help.css, which had already consolidated it into one Bootstrap-free
 * block - the .dropdown-menu / .dropdown-item / .dropdown-divider rules below are stand-ins
 * for the Bootstrap plugin, so the menu works on pages that do not load Bootstrap.
 *
 * Colours are hardcoded, not tokenised - this chrome is deliberately fixed in both themes.
 */

/* ---------- Account menu: the top-right dropdown, ported from dashboard.php ----------
   /help/* loads neither Bootstrap's CSS nor its JS, so the few Bootstrap rules the dashboard's
   markup leans on are written out below (.dropdown-menu geometry, the .dropdown-item reset,
   .dropdown-divider, and the rounded-pill/shadow/padding utilities that were on the button).
   Everything under "--- copied from dashboard.php ---" is that file's .ecs-acct block verbatim,
   only re-scoped under #ecs-topbar-2025 so it still outranks the Bootstrap stand-ins above it -
   a bare .ecs-acct (0,1,0) would lose its padding and radius to #ecs-topbar-2025 .dropdown-menu.

   Hardcoded light colours, like the topbar it sits in: this chrome is deliberately not tokenised,
   see the note at the top of this file. */

#ecs-topbar-2025 .ecs-topbar__user{ position: relative; }

/* ~40px tall, rather than the dashboard's old 46px. It is the only bordered control on the
   right-hand side of most bars now - "Back to dashboard" is a quiet text link - so it sets the
   height the notification bell and the guest pills line up with. */
#ecs-topbar-2025 .ecs-topbar__userbtn{
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0; padding: 6px 14px; max-width: 340px;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px; font-weight: 600; line-height: 1;
  color: #1B57D6; background: #fff;
  border: 1px solid #E6EAF1; border-radius: 999px;
  box-shadow: 0 .125rem .25rem rgba(15,23,42,.06);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .06s ease, box-shadow .15s ease;
}
#ecs-topbar-2025 .ecs-topbar__userbtn:hover{
  background: #F6F8FB; border-color: #D7DEE9; transform: translateY(-1px);
}
#ecs-topbar-2025 .ecs-topbar__userbtn:focus-visible{
  outline: 0; box-shadow: 0 0 0 4px rgba(37,99,235,.18);
}
#ecs-topbar-2025 .ecs-topbar__userpic{
  flex: 0 0 auto; display: block; width: 26px; height: 26px;
  border-radius: 50%; object-fit: cover; background: #EFF4FF;
}
#ecs-topbar-2025 .ecs-topbar__userpic--letter{
  display: inline-flex; align-items: center; justify-content: center;
  color: #2563EB; font-weight: 600; font-size: 12.5px; line-height: 1;
}
/* line-height and the padding are load-bearing, not spacing taste. The button sets line-height:1,
   which makes this box exactly the cap height - and `overflow:hidden` (needed for the ellipsis)
   then clips everything below the baseline, so g, y, p and j lost their descenders. Any element
   that both hides its overflow and rides a line-height of 1 will do this. */
#ecs-topbar-2025 .ecs-topbar__username{
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  line-height: 1.35; padding-block: 1px;
}
#ecs-topbar-2025 .ecs-topbar__usercaret{
  flex: 0 0 auto; width: 14px; height: 14px; color: #98A2B3; transition: transform .15s ease;
}
#ecs-topbar-2025 .ecs-topbar__userbtn[aria-expanded="true"] .ecs-topbar__usercaret{
  transform: rotate(180deg);
}
/* Below this the address would push the panel wider than the bar; the avatar still identifies it. */
@media (max-width: 640px){
  #ecs-topbar-2025 .ecs-topbar__username{ display: none; }
  #ecs-topbar-2025 .ecs-topbar__userbtn{ padding: 6px 10px; }
}

/* Bootstrap stand-ins, cut down to what this one menu uses. */
#ecs-topbar-2025 .dropdown-menu{
  position: absolute; top: calc(100% + 8px); z-index: 2050;
  display: none; margin: 0; padding: 0; list-style: none;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px; text-align: left; color: #334155; background: #fff;
}
#ecs-topbar-2025 .dropdown-menu-end{ right: 0; left: auto; }
#ecs-topbar-2025 .dropdown-menu.show{ display: block; }
#ecs-topbar-2025 .dropdown-item{
  display: block; width: 100%; padding: 10px 16px; clear: both;
  font-weight: 400; color: #212529; text-align: inherit; white-space: nowrap;
  background: transparent; border: 0; text-decoration: none;
}
#ecs-topbar-2025 .dropdown-divider{
  height: 0; margin: .5rem 0; overflow: hidden;
  border-top: 1px solid rgba(0,0,0,.15); opacity: 1;
}
#ecs-topbar-2025 .dropdown-animate{
  transform-origin: top right; animation: helpAcctFadeDown .2s ease-out;
}
@keyframes helpAcctFadeDown{
  from{ opacity: 0; transform: translateY(-6px); }
  to  { opacity: 1; transform: none; }
}

/* --- copied from dashboard.php --- */
/* Fixed width + overflow guard: without it the longest label sets the width and the trailing
   external-link glyph on "Leave a review" pushes outside the rounded panel. */
#ecs-topbar-2025 .ecs-acct{
  width: 296px; max-width: calc(100vw - 24px); padding: 7px 0; overflow: hidden;
  border: 1px solid #e6ebf2; border-radius: 13px;
  box-shadow: 0 14px 40px -12px rgba(15,23,42,.22), 0 2px 6px rgba(15,23,42,.05);
}
#ecs-topbar-2025 .ecs-acct .dropdown-divider{ margin: 6px 0; border-top-color: #eef1f6; }

#ecs-topbar-2025 .ecs-acct__who{ display: flex; flex-direction: column; gap: 1px; padding: 8px 15px 9px; }
#ecs-topbar-2025 .ecs-acct__whoLabel{ font-size: 11px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: #98a2b3; }
/* Wraps rather than truncating. "Signed in as" is the row that answers "whose account is this",
   and an ellipsis in the middle of an address answers it badly - especially while impersonating,
   where the address is the only thing telling you who you are acting as. */
#ecs-topbar-2025 .ecs-acct__whoMail{ font-size: 13px; font-weight: 600; color: #0f172a;
  white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }

#ecs-topbar-2025 .ecs-acct__label{ padding: 7px 15px 4px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: #a3adbb; }

#ecs-topbar-2025 .ecs-acct__item{ display: flex !important; align-items: center; gap: 11px;
  padding: 8px 15px; font-size: 13.5px; font-weight: 500; color: #334155; }
#ecs-topbar-2025 .ecs-acct__item .ecs-topbar__icon{ width: 16px; height: 16px; flex: 0 0 auto; color: #98a2b3;
  transition: color .12s ease; }
/* Same descender trap as .ecs-topbar__username: this hides its overflow for the ellipsis, so
   it needs room below the baseline or the g in "Plans & billing" loses its tail. The menu
   renders on pages with very different type scales, so the line-height is pinned here rather
   than inherited. */
#ecs-topbar-2025 .ecs-acct__item span{ flex: 1 1 auto; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; line-height: 1.45; padding-block: 1px; }
#ecs-topbar-2025 .ecs-acct__item:hover, #ecs-topbar-2025 .ecs-acct__item:focus{ background: #f4f7fb; color: #0f172a; }
/* Unread marker on Teams. A dot, not a count: the number belongs on the Teams page, and a figure
   in a menu reads as something you can act on here.
   Selector is .ecs-acct__item .ecs-acct__dot, not .ecs-acct__dot on its own. The rule two lines
   up, `.ecs-acct__item span`, is MORE SPECIFIC than a bare class, so it won the flex property and
   stretched this dot into a full-width red bar. */
#ecs-topbar-2025 .ecs-acct__item .ecs-acct__dot{
  flex: 0 0 auto; width: 8px; height: 8px; min-width: 8px; align-self: center;
  border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.15); }
#ecs-topbar-2025 .ecs-acct__item:hover .ecs-topbar__icon, #ecs-topbar-2025 .ecs-acct__item:focus .ecs-topbar__icon{ color: #2563eb; }

#ecs-topbar-2025 .ecs-acct__star{ color: #00b67a !important; }
#ecs-topbar-2025 .ecs-acct__ext{ flex: none; width: 12px !important; height: 12px !important; color: #c3cbd8 !important; }

#ecs-topbar-2025 .ecs-acct__item--danger{ color: #b42318; }
#ecs-topbar-2025 .ecs-acct__item--danger .ecs-topbar__icon{ color: #d68b86; }
#ecs-topbar-2025 .ecs-acct__item--danger:hover, #ecs-topbar-2025 .ecs-acct__item--danger:focus{ background: #fef3f2; color: #912018; }
#ecs-topbar-2025 .ecs-acct__item--danger:hover .ecs-topbar__icon, #ecs-topbar-2025 .ecs-acct__item--danger:focus .ecs-topbar__icon{ color: #b42318; }