/* Local overrides for the top navigation bar.
   Kept out of the CDN css (cdn.smartlocating.com/css/smartdata.webflow.css) so nav
   tweaks ship with our normal deploy instead of a CDN push.
   Imported by the site masters via /css/nav-overrides.css.

   Goal: a more compact bar that makes better use of vertical space, with the
   labels, logo and account dropdown all vertically centered.
   !important is used only where the CDN rule loads after us (bar height) or where
   the tab markup sets the value inline (font size, logo/dropdown padding). */

/* Shorter bar (was 57px). !important: the CDN's .smart-top loads after this file,
   so equal specificity would otherwise let it win. */
.smart-top {
  height: 46px !important;
  box-shadow: none !important;   /* kill the CDN drop-shadow below the blue bar */
}

.smart-top .smart-top-columns,
.smart-top .smart-top-cell {
  height: 46px;
}

/* Fixed-bar spacer: the nav markup is followed by three <br> (~60px total) that offset
   the page content below the position:fixed bar. The bar is only 46px tall, so the extra
   ~14px showed as a white gap band under the bar. Trimming the br line-height removes it.
   Scoped to br siblings of .smart-top, so it only touches those three spacer breaks. */
.smart-top ~ br {
  line-height: 15px;
}

/* Nav labels: soft-pill active state (replaces the dated underline).
   The tab controls mark the active tab with an inline border-bottom, so we key the
   pill off [style*="border-bottom"] and suppress the border itself — css-only, the
   ~30 tab ascx files stay untouched. */
.smart-top .smart-top-text-block {
  height: auto;
  padding: 4px 12px;
  margin-top: 5px;              /* centers the ~28px pill in the 46px bar (cells sit 4px down) */
  border-radius: 999px;
  border-bottom: none !important;
}
.smart-top .smart-top-text-block:hover {
  border-bottom: none !important;
  background: rgba(255, 255, 255, .10);
}
.smart-top .smart-top-text-block[style*="border-bottom"] {
  background: rgba(255, 255, 255, .18);
}

/* Slightly smaller labels (was inline font-size:15px in the tab markup);
   inactive tabs dim a touch so the active pill reads instantly. */
.smart-top .smart-top-text-block a {
  font-size: 14px !important;
  color: rgba(255, 255, 255, .85) !important;
}
.smart-top .smart-top-text-block[style*="border-bottom"] a {
  color: #fff !important;
}

/* True-center the nav cluster on the bar. The webflow columns are asymmetric
   (logo w-col-1 ~8% vs account w-col-2 ~17%), so the middle w-col-9 cell's midpoint
   sits ~4% left of the page center and the labels drift left with it. Anchoring the
   label group to the fixed bar and centering it there fixes the offset regardless of
   the column widths. (The CDN's own `smart-nav-text` centering rule is a no-op — it's
   missing the leading dot, so it targets a nonexistent element.) */
.smart-top .smart-top-cell.w-col-9 {
  position: static;   /* webflow w-col is position:relative; clear it so the child
                         anchors to the fixed .smart-top, not to this cell */
}
.smart-top .w-col-9 .smart-nav-text {
  position: absolute;
  left: 50%;
  top: 0;
  height: 46px;               /* full bar height so flex can center the pills */
  transform: translateX(-50%);
  white-space: nowrap;
  display: flex;
  align-items: center;        /* even top/bottom gap, regardless of pill height */
}
/* the margin-top:5px above was the old in-flow centering hack; flex handles it now */
.smart-top .w-col-9 .smart-nav-text .smart-top-text-block {
  margin-top: 0;
}
.smart-top .w-col-9 .smart-nav-text .smart-top-text-block:last-child {
  margin-right: 0;    /* symmetric ends so the visual center matches the box center */
}

/* Smaller logo, vertically centered. The markup sets padding-top:6px inline and the
   CDN adds margin-top:6px; both are cleared so the 30px logo centers in the 46px bar. */
.smart-top .smart-navlogo {
  margin-top: 0 !important;
  padding-top: 7px !important;
}
.smart-top .smart-navlogo img {
  height: 24px;
  width: auto;
}

/* ---- Plan badge + upgrade flyout ----
   Styles for the logo-side plan badge (.sl-plan-badge) and its upgrade
   popover (.sl-plan-fly) deliberately do NOT live here: this file has no
   cache-busting version, so a stale copy left the new badge unstyled and the
   CDN width:28px on .smart-navlogo wrapped it under the logo. TierUI.PlanBadge
   emits that css inline with its own markup instead - see webui/App_Code/TierUI.cs. */

/* Account dropdown (right cell): re-center in the shorter bar.
   Markup sets padding-top:15px on the wrapper inline and margin-top:6px on the
   RadComboBox wrapper inside LogInOut.ascx. */
.smart-top .w-col-2 .smart-nav-text {
  padding-top: 7px !important;
}
.smart-top .w-col-2 .smart-nav-text > div {
  margin-top: 0 !important;
  padding-right: 0 !important;   /* tighten the right gutter to match the logo's left gutter */
}

/* Account menu trigger: render the user's full name as plain text (no box), with a
   small caret to signal it opens a menu. Flattens the dated Office2007 combo skin. */
.smart-top .RadComboBox.sl-acct-combo {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible;
  cursor: pointer;
}
.smart-top .RadComboBox.sl-acct-combo .rcbInputCell,
.smart-top .RadComboBox.sl-acct-combo .rcbArrowCell,
.smart-top .RadComboBox.sl-acct-combo .rcbArrowCell a,
.smart-top .RadComboBox.sl-acct-combo table,
.smart-top .RadComboBox.sl-acct-combo .rcbFocused,
.smart-top .RadComboBox.sl-acct-combo .rcbHovered {
  background-image: none !important;
  background-color: transparent !important;
  border: 0 !important;
}
/* the name itself: reads like a label, not an editable field. White on the blue bar. */
.smart-top .RadComboBox.sl-acct-combo .rcbInput {
  background: transparent !important;
  border: 0 !important;
  color: #fff !important;
  font-weight: 400 !important;
  cursor: pointer;
  padding: 0 !important;
  text-align: right;
}
/* replace the sprite arrow with a CSS caret */
.smart-top .RadComboBox.sl-acct-combo .rcbArrowCell {
  position: relative;
  width: 14px;
}
.smart-top .RadComboBox.sl-acct-combo .rcbArrowCell::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  margin: -2px 0 0 -4px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #fff;
}

/* ---- Account menu flyout (clean text list, no icons) ----
   The dropdown renders at body level, outside .smart-top, so it's scoped by its own
   DropDownCssClass (sl-acct-dd) set in LogInOut.ascx. */
.RadComboBoxDropDown.sl-acct-dd {
  border: 1px solid #e2e6ea !important;
  border-radius: 6px !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important;
  background: #fff !important;
  padding: 4px 0 !important;
  font-family: Roboto, "Segoe UI", Arial, sans-serif;
}
.RadComboBoxDropDown.sl-acct-dd .rcbList { padding: 0 !important; }
/* hide the disabled MY_NAME row (the name already shows in the trigger) */
.RadComboBoxDropDown.sl-acct-dd .rcbDisabled { display: none !important; }
.RadComboBoxDropDown.sl-acct-dd .rcbItem,
.RadComboBoxDropDown.sl-acct-dd .rcbHovered {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
.RadComboBoxDropDown.sl-acct-dd .sl-acct-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  font-size: 13px;
  color: #33404d;
  white-space: nowrap;
}
.RadComboBoxDropDown.sl-acct-dd .sl-acct-ico {
  flex: none;
  color: rgb(130, 140, 152);   /* named/rgb only - a literal hex here is fine (css file),
                                  but keep the template itself hex-free */
}
.RadComboBoxDropDown.sl-acct-dd .rcbHovered .sl-acct-ico {
  color: rgb(31, 91, 143);
}

/* never scroll the account menu - size it to its items */
.RadComboBoxDropDown.sl-acct-dd,
.RadComboBoxDropDown.sl-acct-dd .rcbScroll {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
.RadComboBoxDropDown.sl-acct-dd .rcbHovered .sl-acct-item {
  background: #f2f6fb;
  color: #1f5b8f;
}

/* ---- Client conflict indicator: pulsing red halo ----
   Defined globally so the red conflict dot animates on EVERY page that shows it (the
   client grid, the client slider, the email-composer conflict check, etc.) rather than
   only where ConflictModal.ascx is included.
   - sl-conflict-active = the interactive dot (hover tooltip + click modal via ConflictModal.ascx)
   - sl-conflict-halo   = pulse only, for static red indicators that are not clickable dots */
@keyframes slcfxHalo {
  0%   { box-shadow: 0 0 0 0 rgba(226, 75, 74, .6); }
  60%  { box-shadow: 0 0 0 7px rgba(226, 75, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(226, 75, 74, 0); }
}
/* A scale "beat" so the pulse is unmistakable even where a tight grid cell clips the
   outward box-shadow ring. */
@keyframes slcfxBeat {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.2); }
}
.sl-conflict-active,
.sl-conflict-halo {
  display: inline-block;
  vertical-align: middle;
  border-radius: 50%;
  animation: slcfxHalo 1.6s ease-out infinite, slcfxBeat 1.6s ease-in-out infinite;
}