<style id="final-layout-overrides">
  /* === FINAL LAYOUT OVERRIDES (scroll contract) === */



  /* Only the standard frame scrolls */
  #standardFrame {
    overflow-y: auto !important;
    top: var(--header-height) !important;
    bottom: var(--footer-height) !important;
  }

#standardFrame {
  height: calc(100vh - 150px); !important;
  min-height: 600px;  !important;
  margin-top: 70px; !important;
}


#dataDisplay {
    margin-top: 250px; !important;
    top: 260px;!important;
}


  /* Nothing inside it scrolls independently */
  #standardFrame * {
    overflow: visible !important;
    max-height: none !important;
  }


#logout-link-container a,
#logout-link {
  color: white; !important;
  text-decoration: none;  !important;
}



#standardFrame, #standardFrame .layout, #standardFrame .frame-content, #standardFrame .details-container {
    /* height: calc(var(--vh, 100%) * 100); */
    /* touch-action: none; */
    -webkit-overflow-scrolling: touch;
    /* touch-action: pan-y; */
    position: relative !important;
    min-height: 90% !important;
    display: flex !important;
    flex-direction: column !important;
}


#dataDisplay {
    margin-top: 0px !important;
    /*top: 95px !important;*/
    /*bottom: 100px !important;*/
    /*position: fixed !important;*/
    /* top: var(--header-height); */
    /* bottom: var(--footer-height); */
    left: 0 !important;
    right: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    display: flex !important;
    flex-direction: column !important;


  position: relative;
  margin: 0 auto;
  max-width: 1200px;


  /* Reserve space for footer */
  padding-bottom: 100px;

  /* Remove these */
  top: auto;
  bottom: auto;

}


    #breadcrumb-container {
        bottom: -95px !important;
    }


#registration-link,
#login-link {
  text-decoration: none !important;
}

#registration-link:hover,
#login-link:hover {
  text-decoration: none !important;
}

span {
  text-decoration: none  !important;
}



.auth-links {
  display: flex;
  position: absolute;
  right: 60px;
  top: 25px;
  align-items: center;
  gap: 0.75rem;          /* spacing between links */
}

.auth-link a {
  /*display: inline-block;*/
  text-decoration: none;
  color: white;
}

.auth-link a:hover {
  text-decoration: underline;
}


/*****
 * 
 *   changes to get hte body, headers and footers, content and datadisplay in flow
 * 
 * viewport
└── body (no scroll)
    └── header (fixed or flow)
    └── main#content (flex column, fills remaining space)
        └── #dataDisplay (THE scroll container)
            └── page-specific wrapper (must be allowed to grow)
    └── footer (flow)

 * 
 * 
 */ 

html, body {
  height: 100% !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;

}

header {
  position: relative !important; /* default */
  /*    height: 264px !important ; */
  height: auto !important;      /* ← critical */
  min-height: unset !important;
  overflow: visible !important;  
}


.logo-container {
    height: 95px !important;
  }

footer {
  position: relative !important;
  /*background: red !important; */
}

main#content {
  flex: 1 1 auto !important;        /* 🔴 CRITICAL */
  min-height: 0 !important;         /* 🔴 REQUIRED for nested scrolling */  
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  position: relative !important;

  padding-top: 0px !important; 
  padding-bottom: 0px !important;
  top: 0px !important;

}



#dataDisplay {
  position: relative !important;
  flex: 1 1 auto !important;
  max-width: 1200px !important;
  width: 100% !important;
  overflow-y: auto !important;
  padding-bottom: 1px !important;
}


#standardFrame {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: unset !important;
    top: 15px;
}


#standardFrame,
#standardFrame .layout,
#standardFrame .frame-content,
#standardFrame .details-container {
  overflow: visible !important;
  -webkit-overflow-scrolling: auto !important;
  touch-action: auto !important;
  padding: .1rem;
}



/* LOGIN PAGE FIX * /
.login-form-wrapper {
  min-height: auto !important;
  height: auto !important;
  flex: 0 0 auto !important;
}

.login-form-wrapper {
    min-height: 0 !important;
    overflow: visible !important;
    top: -12px !important;
  }

*/

/* layout-overrides.css */
.login-form-wrapper {
  flex: 1 1 auto !important;        /* ← THIS is the big one */
  min-height: 100% !important;
  top: 45px !important;
}


#user-roles {
    display: flex !important;
    align-items: center !important;
    gap: -3px !important;
}


#standardFrame .control-container {
    display: flex;
    /* justify-content: space-between; */
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    flex-direction: row;
}

#standardFrame-home {
    top: 71px;
    position: relative;
}


/*****
 *   end of refactor style override
 *   changes to get hte body, headers and footers, content and datadisplay in flow
 */ 

    #selection-panel .instrument-scroll-wrapper {
    overflow-x: hidden!important;
    max-width: 100%!important;
    }

    .instrument-table {
      width: 100%;!important
      max-width: 100%!important;
      table-layout: fixed!important;
      border-collapse: collapse!important;
    }





@supports (-webkit-touch-callout: none) {
  /* iOS-only fixes */
    #dataDisplay {
        top: 99px !important;
        touch-action: pan-y !important;
        overscroll-behavior-x: none !important;
    }

    #selection-panel .instrument-scroll-wrapper {
    overflow-x: hidden;
    max-width: 100%;
    }

    .instrument-table {
      width: 100%;
      max-width: 100%;
      table-layout: fixed;
      border-collapse: collapse;
    }


    .messaging-icon {
      top: 130px !!important;
      }

    .logo-container {
      height: 119px !important;
      top: 15px !important;
    }

    #breadcrumb-container {
        bottom: -158px !important;
    }


    .return-button {
    top: 51px !important;
    }

    .download-button {
    top: 91px !important;
    }


}



@media screen and (orientation: landscape) and (max-device-width: 1024px) {

    #dataDisplay {
    top: 55px !important;
    }     

    .hamburger {
    top: -12px;
    }

    .logo-container {
      height: 119px !important;
      top: 15px !important;
    }


    .auth-links {
    right: 68px;
    top: 12px;
    }

   
  #breadcrumb-container {
  bottom: -152px !important;
  }

  footer#app-footer {
    padding: 0;
    height: 5px;
  }


</style>
