/* UI stabilization — icon consistency, Help placement, project-name visibility and compass UX. */

/* Keep common icon glyphs optically centered inside their authored icon boxes. */
.project-template-icon > i,
.project-wizard-choice-icon > i,
.project-wizard-head-icon > i,
.project-recovery-head-icon > i,
.site-survey-head-icon > i,
.engineering-history-head-icon > i,
.engineering-history-dot > i,
.wifi-account-center-head-icon > i,
.wifi-account-center-tabs button > i,
.engineering-help-title-icon > i,
.engineering-help-nav-icon > i {
  line-height:1!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
}
.project-template-icon > i::before,
.project-wizard-choice-icon > i::before,
.project-wizard-head-icon > i::before,
.project-recovery-head-icon > i::before,
.site-survey-head-icon > i::before,
.engineering-history-head-icon > i::before,
.engineering-history-dot > i::before,
.wifi-account-center-head-icon > i::before,
.wifi-account-center-tabs button > i::before,
.engineering-help-title-icon > i::before,
.engineering-help-nav-icon > i::before { line-height:1!important; }

/* A normal project name should remain readable on a desktop toolbar. Very long
   names still ellipsize safely and always retain the full title tooltip. */
.toolbar .project-badge{
  max-width:min(380px,30vw)!important;
  min-width:120px;
  flex:0 1 auto;
}
.toolbar .project-badge #projectNameText{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
@media(max-width:1100px){
  .toolbar .project-badge{max-width:220px!important;min-width:110px!important;}
}
@media(max-width:620px){
  .toolbar .project-badge{max-width:180px!important;min-width:96px!important;}
}

/* engineering help Help search/category row. The category selector previously missed
   its class, so global select rules could consume the row and collapse Search. */
.engineering-help-toolbar .engineering-help-search{flex:1 1 auto!important;min-width:180px!important;}
.engineering-help-toolbar #engineeringHelpSearch{
  width:100%!important;
  min-width:0!important;
  padding-inline-start:38px!important;
  padding-inline-end:12px!important;
}
.engineering-help-toolbar .engineering-help-category,
.engineering-help-toolbar #engineeringHelpCategory{
  flex:0 0 190px!important;
  width:190px!important;
  min-width:150px!important;
  max-width:220px!important;
  height:39px!important;
  margin:0!important;
}
.engineering-help-window-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:6px!important;
  min-width:max-content!important;
  margin-inline-start:auto!important;
  flex:0 0 auto!important;
}
.engineering-help-grid-actions{
  grid-template-columns:auto minmax(0,1fr) auto!important;
}
.engineering-help-window-actions .engineering-help-context-btn{
  margin:0!important;
  align-self:center!important;
}
@media(max-width:760px){
  .engineering-help-toolbar .engineering-help-search{min-width:0!important;}
  .engineering-help-toolbar .engineering-help-category,
  .engineering-help-toolbar #engineeringHelpCategory{width:100%!important;max-width:none!important;min-width:0!important;flex:1 1 auto!important;}
}

/* Contextual Help remains a dedicated toolbar control; the compass is navigation only. */

/* Compass becomes a lightweight, transparent assistance overlay. A short click
   opens contextual Help. Long-press enters edit mode; then it can be dragged or
   hidden. This is presentation-only and never changes project/RF coordinates. */
.map-compass{
  pointer-events:auto!important;
  cursor:pointer!important;
  touch-action:none!important;
  user-select:none!important;
  background:rgba(255,255,255,.58)!important;
  border-color:rgba(183,194,213,.62)!important;
  box-shadow:0 5px 16px rgba(22,32,94,.10)!important;
  backdrop-filter:blur(3px)!important;
  -webkit-backdrop-filter:blur(3px)!important;
  opacity:.86;
  transition:opacity .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease;
}
.map-compass:hover,.map-compass:focus-visible{
  opacity:1;
  background:rgba(255,255,255,.76)!important;
  border-color:rgba(116,135,185,.72)!important;
  box-shadow:0 7px 21px rgba(22,32,94,.16)!important;
  outline:none;
}
.map-compass.is-user-positioned{right:auto!important;transform:none!important;transform-origin:center!important;}
.map-compass.is-user-hidden{display:none!important;}
.map-compass.is-editing{
  opacity:1;
  cursor:grab!important;
  border-color:#6f83ce!important;
  box-shadow:0 8px 24px rgba(30,42,120,.22),0 0 0 3px rgba(75,207,250,.14)!important;
}
.map-compass.is-dragging{cursor:grabbing!important;}
.map-compass-help-cue{
  position:absolute;right:4px;bottom:3px;z-index:5;
  width:15px;height:15px;border-radius:50%;display:grid;place-items:center;
  background:rgba(30,42,120,.88);color:#fff;font:800 9px/1 Roboto,sans-serif;
  box-shadow:0 1px 4px rgba(15,23,42,.18);pointer-events:none;
}
.map-compass-remove-btn{
  display:none;position:absolute;right:-8px;top:-8px;z-index:8;width:24px;height:24px;
  border:1px solid #d9e0ea;border-radius:50%;background:#fff;color:#8a3541;
  align-items:center;justify-content:center;padding:0;cursor:pointer;box-shadow:0 3px 10px rgba(15,23,42,.16);
}
.map-compass.is-editing .map-compass-remove-btn{display:flex;}
.map-compass-edit-note{
  display:none;position:absolute;right:0;top:calc(100% + 7px);z-index:9;
  width:max-content;max-width:170px;padding:5px 7px;border:1px solid #dce3ef;border-radius:7px;
  background:rgba(255,255,255,.96);color:#59667b;font:700 9px/1.25 Roboto,sans-serif;
  box-shadow:0 4px 14px rgba(15,23,42,.12);pointer-events:none;
}
.map-compass.is-editing .map-compass-edit-note{display:block;}

/* When there is no map yet, or the user hides the compass, this compact control
   occupies the same assistance area. It keeps Help discoverable and also offers
   an explicit way to restore a user-hidden compass. */
.compass-help-fallback-wrap{
  position:absolute;right:18px;top:62px;z-index:1049;
  min-width:72px;min-height:54px;padding:5px;border:1px solid rgba(192,202,219,.74);
  border-radius:13px;background:rgba(255,255,255,.74);box-shadow:0 5px 16px rgba(22,32,94,.10);
  backdrop-filter:blur(4px);display:flex;align-items:center;gap:4px;
}
.compass-help-fallback-wrap[hidden]{display:none!important;}
.compass-help-fallback-wrap.is-user-positioned{right:auto!important;}
.compass-help-fallback,.compass-restore-btn{
  border:0;background:transparent;color:#1e2a78;cursor:pointer;border-radius:9px;
  min-height:40px;display:inline-flex;align-items:center;justify-content:center;
}
.compass-help-fallback{flex:1;gap:5px;padding:0 7px;font:800 10px/1 Roboto,sans-serif;}
.compass-help-fallback i{font-size:13px;line-height:1;}
.compass-restore-btn{width:28px;min-width:28px;padding:0;color:#59667b;}
.compass-help-fallback:hover,.compass-restore-btn:hover{background:#eef2ff;color:#1e2a78;}
.compass-restore-btn[hidden]{display:none!important;}
@media(max-width:520px){
  .compass-help-fallback-wrap{right:9px;top:58px;transform:scale(.9);transform-origin:top right;}
  .compass-help-fallback-wrap.is-user-positioned{transform:none!important;}
}

/* Keep contextual Help immediately beside a consistently styled close control. */
.engineering-help-window-actions > .engineering-help-adjacent-close{
  width:34px!important;height:34px!important;min-width:34px!important;max-width:34px!important;
  padding:0!important;margin:0!important;border:1px solid #dfe4ef!important;border-radius:10px!important;
  background:#fff!important;color:#59667b!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
  line-height:1!important;box-shadow:none!important;flex:0 0 34px!important;
}
.engineering-help-window-actions > .engineering-help-adjacent-close:hover{
  color:#1e2a78!important;border-color:#bfc9ed!important;background:#f6f8ff!important;
}

/* Help belongs in the engineering toolbar, not on the compass. */
.toolbar .toolbar-help-btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;

  width:auto!important;
  min-width:64px!important;
  max-width:none!important;
  height:38px!important;

  padding:0 10px!important;
  gap:6px!important;

  flex:0 0 auto!important;

  white-space:nowrap!important;
  line-height:1!important;
}

.toolbar .toolbar-help-btn i{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;

  width:16px!important;
  height:16px!important;
  flex:0 0 16px!important;

  line-height:1!important;
}

.toolbar .toolbar-help-btn span{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;

  line-height:1!important;
  white-space:nowrap!important;
}
.toolbar .toolbar-compass-restore-btn[hidden]{display:none!important;}
.toolbar .toolbar-compass-restore-btn:not([hidden]){
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.map-compass{cursor:grab!important;}
.map-compass:active{cursor:grab!important;}
.map-compass-help-cue,.compass-help-fallback-wrap{display:none!important;}
.engineering-help-window-actions .engineering-help-context-btn,
.engineering-help-window-actions > .engineering-help-adjacent-close{
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  max-width:34px!important;
  flex:0 0 34px!important;
  padding:0!important;
  margin:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:1!important;
}
.engineering-help-window-actions .engineering-help-context-btn i,
.engineering-help-window-actions > .engineering-help-adjacent-close i{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:1!important;
}


/* Autosave/Recovery is a utility window: default height follows content instead
   of reserving a large empty canvas. The user can still resize it manually. */
.project-recovery-card{
  height:auto!important;
  min-height:0!important;
  max-height:min(650px,calc(100vh - 88px))!important;
}
.project-recovery-body{
  flex:0 1 auto!important;
  max-height:calc(100vh - 170px)!important;
}
.project-recovery-empty{min-height:150px!important;}
@media(max-width:760px){
  .project-recovery-card{height:100vh!important;max-height:none!important;}
  .project-recovery-body{flex:1 1 auto!important;max-height:none!important;}
}