/* 1. Push the React App down to make room for the nav */
#app-root, body {
    padding-top: 70px !important;
}

/* 2. Create the Nav Bar using a pseudo-element on the body */
/* Since we cannot easily inject complex HTML into the React DOM without a custom build, 
   we style the existing Masthead or inject a visual bar. */

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background: white;
    z-index: 9999;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-bottom: 1px solid #ddd;
}

/* 3. Hide the default Keycloak Account header if it clashes */
.pf-c-masthead {
    margin-top: 70px !important;
}

/* 4. Technical Note for Account Console v3: */
/* Because v3 is a React app, the best way to get the exact same clickable links 
   as the login page is to use the same JS injection trick. */