/* FRA Prop HQ v11.0.1 — Horizontal Command Bar
   Navigation-only refinement for the v11 Command Deck.
   Keeps the v11 product styling, moves workspace navigation from the left rail to a horizontal top bar. */

:root{
  --v11-nav-h:58px;
  --v11-top-h:60px;
  --v11-rail-w:0px;
}

/* Main app now uses the full viewport width beneath two compact header rows. */
html body:not(.signed-out).fra-v11-command-deck #appShell>.main-content{
  margin-left:0!important;
  padding-top:calc(var(--v11-nav-h) + var(--v11-top-h))!important;
}

/* Horizontal command bar */
.fra-v11-rail{
  inset:0 0 auto 0!important;
  width:100%!important;
  height:var(--v11-nav-h)!important;
  min-height:var(--v11-nav-h)!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  gap:0!important;
  padding:0 14px!important;
  background:rgba(10,15,18,.98)!important;
  border:0!important;
  border-bottom:1px solid var(--v11-line)!important;
  box-shadow:none!important;
  transform:none!important;
}

.fra-v11-rail-brand{
  flex:0 0 auto!important;
  width:auto!important;
  min-width:154px!important;
  height:var(--v11-nav-h)!important;
  padding:0 18px 0 6px!important;
  justify-content:flex-start!important;
  gap:10px!important;
  border:0!important;
  border-right:1px solid var(--v11-line-soft)!important;
  background:transparent!important;
}
.fra-v11-rail-brand img{width:26px!important;height:26px!important;flex:0 0 auto!important;}
.fra-v11-rail-brand::after{
  content:'FRAPropHQ';
  color:#eef4ef;
  font-size:13px;
  line-height:1;
  font-weight:820;
  letter-spacing:-.035em;
  white-space:nowrap;
}

.fra-v11-rail-groups{
  width:auto!important;
  height:100%!important;
  flex:0 1 auto!important;
  padding:0 10px!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  gap:4px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scrollbar-width:none!important;
}
.fra-v11-rail-groups::-webkit-scrollbar{display:none!important;}

.fra-v11-rail-group{
  position:relative!important;
  flex:0 0 auto!important;
  width:auto!important;
  height:36px!important;
  min-width:0!important;
  padding:0 12px!important;
  gap:7px!important;
  border-radius:8px!important;
  color:#808c86!important;
}
.fra-v11-rail-group svg{width:16px!important;height:16px!important;flex:0 0 auto!important;}
.fra-v11-rail-group::after{
  content:attr(data-label)!important;
  position:static!important;
  inset:auto!important;
  transform:none!important;
  opacity:1!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:inherit!important;
  font-size:10.5px!important;
  line-height:1!important;
  font-weight:760!important;
  letter-spacing:.005em!important;
  pointer-events:none!important;
  transition:none!important;
}
.fra-v11-rail-group:hover::after{transform:none!important;opacity:1!important;}
.fra-v11-rail-group:hover{
  background:#12191e!important;
  border-color:#202a31!important;
  color:#dce5df!important;
  transform:none!important;
}
.fra-v11-rail-group.active{
  background:#18211b!important;
  border-color:#2d4130!important;
  color:var(--v11-lime)!important;
}

.fra-v11-rail-spacer{display:block!important;flex:1 1 auto!important;min-width:10px!important;}
.fra-v11-rail-bottom{
  flex:0 0 auto!important;
  width:auto!important;
  height:100%!important;
  padding:0 0 0 12px!important;
  display:flex!important;
  align-items:center!important;
  border:0!important;
  border-left:1px solid var(--v11-line-soft)!important;
}
.fra-v11-rail-user{
  width:34px!important;
  height:34px!important;
  margin:0!important;
  border-radius:9px!important;
}

/* Workspace group menu now behaves as a dropdown below the two header rows. */
.fra-v11-drawer{
  left:16px!important;
  top:calc(var(--v11-nav-h) + var(--v11-top-h) - 1px)!important;
  bottom:auto!important;
  width:286px!important;
  max-height:min(620px,calc(100vh - var(--v11-nav-h) - var(--v11-top-h) - 18px))!important;
  border:1px solid var(--v11-line)!important;
  border-top-color:#29333a!important;
  border-radius:0 0 12px 12px!important;
  box-shadow:0 24px 58px rgba(0,0,0,.42)!important;
  transform:translateY(-10px)!important;
  transform-origin:top left!important;
  overflow:hidden!important;
}
.fra-v11-drawer.open{transform:none!important;}
.fra-v11-drawer-head{height:62px!important;padding:14px 16px 12px!important;}
.fra-v11-drawer-items{max-height:calc(100vh - 205px)!important;overflow:auto!important;}

/* Existing utility bar becomes the second horizontal row. */
html body:not(.signed-out).fra-v11-command-deck #appShell .topbar{
  left:0!important;
  right:0!important;
  top:var(--v11-nav-h)!important;
  height:var(--v11-top-h)!important;
  min-height:var(--v11-top-h)!important;
  padding:0 22px!important;
  background:rgba(13,18,22,.975)!important;
  border-bottom:1px solid var(--v11-line)!important;
}

/* The old mobile hamburger is no longer needed: the command bar itself scrolls horizontally. */
html body:not(.signed-out).fra-v11-command-deck #appShell .topbar-left .mobile-only#menuButton{display:none!important;}

@media (max-width:900px){
  .fra-v11-rail{padding:0 8px!important;}
  .fra-v11-rail-brand{min-width:auto!important;width:42px!important;padding:0 10px 0 4px!important;}
  .fra-v11-rail-brand::after{display:none!important;}
  .fra-v11-rail-groups{padding:0 6px!important;}
  .fra-v11-rail-group{padding:0 10px!important;}
  .fra-v11-rail-group::after{font-size:10px!important;}
  .fra-v11-rail-bottom{padding-left:8px!important;}
}

@media (max-width:760px){
  :root{--v11-nav-h:52px;--v11-top-h:56px;--v11-rail-w:0px;}
  .fra-v11-rail{
    width:100%!important;
    height:var(--v11-nav-h)!important;
    min-height:var(--v11-nav-h)!important;
    transform:none!important;
    box-shadow:none!important;
  }
  .fra-v11-rail.mobile-open{transform:none!important;}
  .fra-v11-rail-brand{width:38px!important;height:var(--v11-nav-h)!important;padding-right:8px!important;}
  .fra-v11-rail-brand img{width:24px!important;height:24px!important;}
  .fra-v11-rail-groups{justify-content:flex-start!important;}
  .fra-v11-rail-group{height:34px!important;padding:0 9px!important;gap:6px!important;}
  .fra-v11-rail-group svg{width:15px!important;height:15px!important;}
  .fra-v11-rail-group::after{font-size:9.5px!important;}
  .fra-v11-rail-spacer{min-width:0!important;}
  .fra-v11-rail-bottom{display:none!important;}

  .fra-v11-drawer{
    left:10px!important;
    top:calc(var(--v11-nav-h) + var(--v11-top-h) - 1px)!important;
    width:min(300px,calc(100vw - 20px))!important;
    max-height:calc(100vh - var(--v11-nav-h) - var(--v11-top-h) - 12px)!important;
    border-radius:0 0 11px 11px!important;
  }

  html body:not(.signed-out).fra-v11-command-deck #appShell>.main-content{
    margin-left:0!important;
    padding-top:calc(var(--v11-nav-h) + var(--v11-top-h))!important;
  }
  html body:not(.signed-out).fra-v11-command-deck #appShell .topbar{
    left:0!important;
    top:var(--v11-nav-h)!important;
    height:var(--v11-top-h)!important;
    min-height:var(--v11-top-h)!important;
    padding:0 12px!important;
  }
}

@media (max-width:520px){
  .fra-v11-rail-group{padding:0 8px!important;}
  .fra-v11-rail-group::after{display:none!important;}
  .fra-v11-rail-group svg{width:17px!important;height:17px!important;}
  .fra-v11-rail-brand{width:36px!important;}
}