/* ===================================================================
   Professional top navbar — overrides flat-ui / site.css.
   Loaded last so these rules win. Keeps the existing (delicate) height
   so page content isn't shifted; only refines look & interaction.
   =================================================================== */
.navbar.navbar-inverse.navbar-fixed-top{
  background:#151829 !important;      /* deep navy instead of flat black */
  border:0 !important;
  box-shadow:0 2px 14px rgba(21,24,41,.28);
}
.navbar-fixed-top > .container{max-width:1040px}

/* brand / logo */
.navbar-inverse .navbar-brand{color:#fff !important;font-weight:700;letter-spacing:-.01em}
.navbar-inverse .logo{height:36px !important;width:auto}

/* primary menu links */
.navbar-inverse .navbar-nav > li > a{
  color:rgba(255,255,255,.72) !important;
  font-size:14.5px !important;font-weight:500 !important;
  padding:11px 14px !important;margin:6px 1px;border-radius:10px;line-height:1.1;
  transition:background-color .15s ease,color .15s ease;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus{
  color:#fff !important;background:rgba(255,255,255,.10) !important;
}
/* current page is marked with .gray -> show it as an active blue pill */
.navbar-inverse .navbar-nav > li > a.gray{color:#fff !important;background:#2C82D6 !important}
.navbar-inverse .navbar-nav > li > a.gray:hover{background:#2570BE !important;color:#fff !important}

/* right side: account + logout/login */
.navbar-inverse .navbar-right > li > a{
  color:rgba(255,255,255,.72) !important;font-size:14px !important;font-weight:500 !important;
  padding:11px 14px !important;margin:6px 1px;border-radius:10px;
  transition:background-color .15s ease,color .15s ease;
}
.navbar-inverse .navbar-right > li > a:hover{color:#fff !important;background:rgba(255,255,255,.10) !important}
/* log in / out as a clear call to action */
.navbar-inverse .navbar-right > li > a#loginLink,
.navbar-inverse .navbar-right > li > a.green{
  color:#fff !important;background:#2C82D6 !important;font-weight:600 !important;
}
.navbar-inverse .navbar-right > li > a#loginLink:hover,
.navbar-inverse .navbar-right > li > a.green:hover{background:#2570BE !important;color:#fff !important}

/* account avatar */
.navbar-inverse .fotologin{border:2px solid rgba(255,255,255,.25)}

/* mobile toggle */
.navbar-inverse .navbar-toggle{border:1px solid rgba(255,255,255,.18) !important;border-radius:8px}
.navbar-inverse .navbar-toggle:hover,.navbar-inverse .navbar-toggle:focus{background:rgba(255,255,255,.08) !important}
.navbar-inverse .navbar-toggle .icon-bar{background:#fff !important}

@media (max-width:767px){
  .navbar-inverse .navbar-nav > li > a,
  .navbar-inverse .navbar-right > li > a{margin:2px 8px}
}

/* ---- account area (right side) ---- */
.navbar-inverse .navbar-right{display:flex;align-items:center}
.navbar-inverse .navbar-right > li{display:flex;align-items:center}
/* avatar: bigger, centered, subtle ring (keep the user's crop = don't touch background-size/position) */
.navbar-inverse .fotologin{
  width:30px !important;height:30px !important;margin:0 6px 0 0 !important;
  border:2px solid rgba(255,255,255,.28);flex:none;
}
/* account name */
.navbar-inverse .navbar-right > li > a[href*="Profile"]{font-weight:600 !important;color:#fff !important}
/* log out: subtle outline button (login stays filled blue via the rule above) */
.navbar-inverse .navbar-right > li:last-child > a{
  border:1.5px solid rgba(255,255,255,.22) !important;border-radius:10px;
}
.navbar-inverse .navbar-right > li:last-child > a:hover{
  background:rgba(255,255,255,.10) !important;border-color:rgba(255,255,255,.42) !important;color:#fff !important;
}
.navbar-inverse .navbar-right > li > a#loginLink{border-color:#2C82D6 !important}