/* =====================================================================
   Staff — Studio chrome polish
   Pill buttons, compact nav, blue page actions, account menu.
   Loaded last. Does not restyle Staff as Meridian.
===================================================================== */

/* Buttons are pills in every Browns Digital app. */
#view-app#view-app .btn,
#view-auth .btn{border-radius:var(--bds-r-pill,999px)}
#view-app#view-app .btn:focus-visible,
#view-app#view-app .icon-btn:focus-visible,
#view-app#view-app .side-nav > button:focus-visible,
#view-app#view-app .side-nav > a:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-tint-fill,#355cff) 26%,transparent)}

/* Stat labels wrap instead of ending in an ellipsis. */
#view-app#view-app .dash-stat-lbl{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25}
#view-app#view-app .dash-stat-top{align-items:flex-start}

@media (min-width:1024px){
  /* Keep Staff sidebar floating glass from staff.css; only tighten nav rows. */
  #view-app#view-app .side-nav > button:not(.side-group),
  #view-app#view-app .side-nav > a{min-height:36px !important;height:36px !important;border-radius:10px}
  #view-app#view-app .side-nav > button.side-group{min-height:32px !important;height:32px !important;margin-top:8px}
}

/* A page's main action is blue, as in Studio. */
#view-app#view-app .staff-page-actions .btn.btn-dark{
  background:var(--color-tint-fill,#355cff) !important;background-image:none !important;border-color:transparent !important;color:#fff !important;
  box-shadow:0 4px 14px color-mix(in srgb,var(--color-tint-fill,#355cff) 28%,transparent) !important}
#view-app#view-app .staff-page-actions .btn.btn-dark:hover{background:var(--color-tint-fill-hover,#2a4ae0) !important}
#view-app#view-app .staff-page-actions .btn.btn-dark svg{color:#fff !important;stroke:currentColor}

/* ---------- Account menu (Studio bd-acct chrome) ---------- */
#view-app .side.liquid-glass,
#view-app .side{
  --bd-acct-panel-bg:rgba(255,255,255,.82);
  --bd-acct-panel-inset:inset 0 1px 0 rgba(255,255,255,.9);
}
html[data-theme="dark"] #view-app .side,
html[data-bd-theme*="dark"] #view-app .side{
  --bd-acct-panel-bg:#0c0c0e;
  --bd-acct-panel-inset:inset 0 1px 0 rgba(255,255,255,.06);
}

#view-app .bd-acct-wrap{
  padding:8px 2px 2px !important;
  margin-top:auto !important;
  border-top:1px solid var(--side-line,rgba(60,60,67,.12)) !important;
  background:transparent !important;
  position:relative;
}
#view-app .bd-acct-wrap:has(.bd-acct-trigger[aria-expanded="true"]){
  padding-top:0 !important;
  border-top-color:transparent !important;
  z-index:40 !important;
  isolation:isolate;
}

#view-app .bd-acct-trigger.side-user{
  margin:0 !important;
  min-height:48px !important;
  padding:7px 10px 7px 8px !important;
  border-radius:14px !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  color:var(--side-ink,#1d1d1f) !important;
  transition:background .18s ease !important;
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  font:inherit;
  text-align:left;
}
#view-app .bd-acct-trigger.side-user:hover,
#view-app .bd-acct-trigger.side-user[aria-expanded="true"]{
  background:var(--side-row-hover,rgba(120,120,128,.14)) !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:14px !important;
}
#view-app .bd-acct-trigger .su-meta strong,
#view-app .bd-acct-trigger .su-meta em{
  color:inherit !important;
}
#view-app .bd-acct-trigger .su-meta em{
  color:var(--side-muted,rgba(60,60,67,.68)) !important;
}
#view-app .bd-acct-trigger .avatar{
  width:32px !important;
  height:32px !important;
  font-size:12px !important;
  box-shadow:none !important;
}
#view-app .bd-acct-trigger .su-chev{
  color:var(--side-quiet,rgba(60,60,67,.48)) !important;
  transform:rotate(0deg);
  transition:transform .26s cubic-bezier(.32,.72,.22,1),color .18s ease !important;
  margin-left:auto;
}
#view-app .bd-acct-trigger[aria-expanded="true"] .su-chev{
  transform:rotate(180deg);
  color:var(--side-muted,rgba(60,60,67,.68)) !important;
}

#view-app .user-menu.bd-acct-menu{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:100% !important;
  top:auto !important;
  width:auto !important;
  display:flex !important;
  flex-direction:column !important;
  gap:0 !important;
  padding:0 !important;
  border-radius:14px 14px 0 0 !important;
  overflow:hidden !important;
  max-height:min(56vh,420px) !important;
  border:0 !important;
  box-shadow:0 -10px 28px rgba(0,0,0,.08) !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  background:var(--bd-acct-panel-bg,rgba(255,255,255,.82)) !important;
  z-index:2 !important;
}
html[data-theme="dark"] #view-app .user-menu.bd-acct-menu,
html[data-bd-theme*="dark"] #view-app .user-menu.bd-acct-menu{
  box-shadow:0 -12px 32px rgba(0,0,0,.35) !important;
}
#view-app .user-menu.bd-acct-menu[hidden]{
  display:none !important;
}

#view-app .bd-acct-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px 9px;
  background:var(--bd-acct-panel-bg,rgba(255,255,255,.82));
  border-bottom:1px solid var(--side-line,rgba(60,60,67,.12));
}
#view-app .bd-acct-head-avatar{
  width:36px !important;
  height:36px !important;
  font-size:13px !important;
  flex:0 0 auto;
}
#view-app .bd-acct-head-meta{
  display:flex;
  flex-direction:column;
  gap:1px;
  min-width:0;
  flex:1 1 auto;
}
#view-app .bd-acct-head-name{
  font-size:14px;
  font-weight:650;
  letter-spacing:-.02em;
  color:var(--side-ink,#1d1d1f);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#view-app .bd-acct-head-plan{
  font-size:12px;
  font-style:normal;
  font-weight:450;
  color:var(--side-muted,rgba(60,60,67,.68));
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#view-app .bd-acct-gear{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  padding:0;
  border:0;
  border-radius:10px;
  background:transparent !important;
  color:var(--side-quiet,rgba(60,60,67,.48));
  cursor:pointer;
  transition:color .16s ease;
  box-shadow:none !important;
  text-decoration:none;
}
#view-app .bd-acct-gear svg.lucide{
  color:var(--side-quiet,rgba(60,60,67,.48));
  stroke:var(--side-quiet,rgba(60,60,67,.48));
}
#view-app .bd-acct-gear:hover,
#view-app .bd-acct-gear:focus-visible{
  background:transparent !important;
  color:var(--color-tint,#355cff);
  outline:none;
}
#view-app .bd-acct-gear:hover svg.lucide,
#view-app .bd-acct-gear:focus-visible svg.lucide{
  color:var(--color-tint,#355cff) !important;
  stroke:var(--color-tint,#355cff) !important;
}

#view-app .bd-acct-body{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:6px 4px 4px;
  background:var(--bd-acct-panel-bg,rgba(255,255,255,.82));
}
#view-app .bd-acct-glide{
  position:absolute;
  left:2px;
  right:2px;
  top:0;
  z-index:0;
  pointer-events:none;
  border-radius:10px;
  background:linear-gradient(180deg,rgba(53,92,255,.13),rgba(53,92,255,.08));
  box-shadow:inset 0 0 0 1px rgba(53,92,255,.14);
  transform:translateY(0);
  opacity:0;
  transition:transform .34s cubic-bezier(.32,.72,.22,1),height .34s cubic-bezier(.32,.72,.22,1),opacity .14s ease;
  will-change:transform,height;
}
#view-app .bd-acct-glide::before{
  content:"";
  position:absolute;
  left:-3px;
  top:50%;
  width:2.5px;
  height:14px;
  border-radius:2px;
  background:var(--color-tint,#355cff);
  transform:translateY(-50%);
}
#view-app .bd-acct-glide.is-visible{opacity:1}
#view-app .bd-acct-glide.is-danger{
  background:linear-gradient(180deg,rgba(255,59,48,.12),rgba(255,59,48,.07));
  box-shadow:inset 0 0 0 1px rgba(255,59,48,.2);
}
#view-app .bd-acct-glide.is-danger::before{background:var(--color-destructive,#ff3b30)}
html[data-theme="dark"] #view-app .bd-acct-glide,
html[data-bd-theme*="dark"] #view-app .bd-acct-glide{
  background:rgba(91,140,255,.16);
  box-shadow:inset 0 0 0 1px rgba(91,140,255,.22);
}
#view-app .bd-acct-row{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:36px;
  padding:0 10px;
  border:0;
  border-radius:10px;
  background:transparent;
  font:inherit;
  font-size:13.5px;
  font-weight:500;
  letter-spacing:-.015em;
  color:var(--side-ink,#1d1d1f);
  text-decoration:none;
  cursor:pointer;
  box-sizing:border-box;
}
#view-app .bd-acct-row span{
  flex:1 1 auto;
  min-width:0;
  text-align:left;
}
#view-app .bd-acct-row svg.lucide.lu16{
  width:16px !important;
  height:16px !important;
  flex:0 0 auto;
  color:var(--side-quiet,rgba(60,60,67,.48));
  stroke:var(--side-quiet,rgba(60,60,67,.48));
}
#view-app .user-menu.bd-acct-menu .bd-acct-row:hover,
#view-app .user-menu.bd-acct-menu .bd-acct-row:focus-visible,
#view-app .user-menu.bd-acct-menu a.bd-acct-row:hover{
  background:transparent !important;
  box-shadow:none !important;
  outline:none;
  color:var(--side-ink,#1d1d1f) !important;
}
#view-app .user-menu.bd-acct-menu .bd-acct-row:hover svg.lucide,
#view-app .user-menu.bd-acct-menu .bd-acct-row:focus-visible svg.lucide{
  color:var(--color-tint,#355cff) !important;
  stroke:var(--color-tint,#355cff) !important;
}
#view-app .user-menu.bd-acct-menu .bd-acct-row--danger:hover svg.lucide,
#view-app .user-menu.bd-acct-menu .bd-acct-row--danger:focus-visible svg.lucide{
  color:#e5484d !important;
  stroke:#e5484d !important;
}
#view-app .bd-acct-row--trail .bd-acct-row-chev{
  flex:0 0 auto;
  color:var(--side-quiet,rgba(60,60,67,.48));
  opacity:.9;
}
#view-app .bd-acct-divider{
  margin:4px 8px;
  border:0;
  border-top:1px solid var(--side-line,rgba(60,60,67,.12));
}
#view-app .bd-acct-row--danger,
#view-app .bd-acct-row--danger span{
  color:#e5484d !important;
}
#view-app .bd-acct-row--danger svg.lucide{
  color:#e5484d !important;
  stroke:#e5484d !important;
}