:root {
    --header-height: 7rem;
    --sidenav-width: 300px;
}

#header {
    --ca-logo-maxwidth: 280px;
    --ca-logo-margin: 20px;
    --espi-logo-maxwidth: 54px;
    --espi-logo-margin: 20px;
    --role-pill-width: 140px;
    --gradient-bar-height: 10px;
    --header-gap: 40px;
  
    width: 100%;
    grid-area: header;  
    display: grid;
    grid-template-columns:
      calc(var(--ca-logo-maxwidth) + 
      calc(1 * var(--ca-logo-margin)))
      var(--role-pill-width) 
      1fr 
      calc(var(--espi-logo-maxwidth) + var(--espi-logo-margin));
    grid-template-rows: auto var(--gradient-bar-height);
    gap: 0px var(--header-gap);
    height: var(--header-height);
  }
  
  #header:after {
    content: '';
    grid-column: span 4;
    background: var(--eurospi-gradient);
    height: var(--gradient-bar-height);
  }

  #header-toollogo img,
  #header-branding img {
    height: 45px;
  }
  
  #header-toollogo img {
    margin-left: var(--ca-logo-margin);
    margin-right: var(--ca-logo-margin);
    max-width: var(--ca-logo-maxwidth);
  }
  
  #header-branding img {
    margin-right: var(--espi-logo-margin);
    max-width: var(--espi-logo-maxwidth);
  }
  
  #header-navbar {
    display: flex;
    flex-direction: row-reverse;
    font-size: var(--font-size-l);
    gap: 30px;
  }

  .qa-center {
    display: grid;
    justify-content: center;
    align-items: center;

    color: rgb(from var(--main-txt-color) r g b / 0.75);
  }
  
  .header-button {
    position: relative;
    transition: all .1s ease-out;
    white-space: nowrap;
  }

  .header-spacer {
    flex: 100%;
  }

  .headerrole-pill {
    white-space: nowrap;
    padding: 5px 25px;
    border-radius: 100rem;
    background-color: var(--capadv-blue);
    color: color-mix(in srgb, var(--capadv-blue) 10%, white 90%);
    border: 3px solid color-mix(in srgb, var(--capadv-blue) 20%, white 80%);
    transform: translateX(calc(-1 * var(--header-gap)));
  }

  .headerrole-pill.header-role-assessor {
    background-color: var(--capadv-blue);
    color: color-mix(in srgb, var(--capadv-blue) 10%, white 90%);
    border: 3px solid color-mix(in srgb, var(--capadv-blue) 20%, white 80%);
  }

  .headerrole-pill.header-role-contentprovider {
    background-color: var(--eurospi-orange);
    color: color-mix(in srgb, var(--eurospi-orange) 10%, white 90%);
    border: 3px solid color-mix(in srgb, var(--eurospi-orange) 20%, white 80%);
  }

  .headerrole-pill.header-role-organisation {
    background-color: var(--eurospi-lilac);
    color: color-mix(in srgb, var(--eurospi-lilac) 10%, white 90%);
    border: 3px solid color-mix(in srgb, var(--eurospi-lilac) 20%, white 80%);
  }

  .headerrole-pill.header-role-administrator {
    background-color: var(--eurospi-cyan);
    color: color-mix(in srgb, var(--eurospi-cyan) 10%, white 90%);
    border: 3px solid color-mix(in srgb, var(--eurospi-cyan) 20%, white 80%);
  }

  .headerrole-other-pills {
    position: absolute;
    top: 5rem;
    left: 12.7rem;
    visibility: hidden;
  }

  .headerrole-other-pills .headerrole-pill {
    display: inline-block;
  }

  .headerrole-other-pills {
    opacity: 0;
    transform: translateY(1rem);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  }
  .headerrole-pill:hover + .headerrole-other-pills,
  .headerrole-pill:focus + .headerrole-other-pills {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  
  .qa-center:hover,
  .qa-center:focus {
    color: rgb(from var(--main-txt-color) r g b / 1);
  }
  
  .qa-left {
    display: grid;
    justify-content: left;
    align-items: center;
  }
  
  .qa-right {
    display: grid;
    justify-content: right;
    align-items: center;
  }
  
  .select {
    cursor: pointer;
    user-select: none;
  }
  
    .side-nav {
      width: var(--sidenav-width);
      background: var(--main-bg-color);
      border-right: 1px solid;
      height: calc(100vh - var(--header-height));
      padding: 2rem 0;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      box-sizing: border-box;
      scrollbar-gutter: stable;
    }
  
    .side-nav-section {
      background: var(--tile-bg);
      border-radius: 12px;
      margin-bottom: 0;
      padding: 0 1rem;
      padding-bottom: 4px;
    }
  
    .side-nav-header {
      font-weight: 600;
      color: var(--main-txt-color);
      padding: 14px 20px 8px 20px;
      letter-spacing: 0.05em;
      font-size: 1.2rem;
      height: 1.8rem;
      background: var(--menu-bg-color);
      border-radius: 1rem;
    }

    .side-nav-header:hover {
      background: var(--menu-hover-color);
    }
  
    .side-nav-items {
      padding: 4px 0 8px 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
  
    .side-nav-item {
      --padding-lr: 20px;
      --padding-tb: 10px;
      cursor: pointer;
      display: flex;
      align-items: center;
      padding: var(--padding-tb) var(--padding-lr);
      border-radius: 1rem;
      transition: background 0.12s;
    }
    
    .side-nav-item.selected {
      background: var(--menu-selected-color);
      background: var(--secondary-hover-color);
    }

    .side-nav-item.menu-disabled span {
      text-decoration: line-through;
    }

    .side-nav-item.menu-disabled:after {
      content: "Under construction";
      font-size: 9px;
      /* font-weight: bold; */
      color: rgb(224, 224, 224);
      position: relative;
      top: calc(var(--padding-tb) * -0.75);
      right: calc(var(--padding-lr) * -1);
      background-color: hsl(from var(--error-red) h 40% l);
      padding: 2px 5px;
      border-radius: 10px;
    }
  
    .side-nav-item:hover {
      background: var(--menu-hover-color);
    }
  
    .side-nav-item span {
      font-size: 1em;
      color: var(--side-nav-text);
      letter-spacing: 0.05em;
      font-weight: 500;
      user-select: none;
      white-space: nowrap;
    }

    
    .side-nav-header {
      cursor: pointer;
      position: relative;
      padding-right: 24px;
      user-select: none;
      transition: background 0.15s;
    }

    .side-nav-header:after {
      content: '▸';
      content: '⮞';
      position: absolute;
      right: 1rem;
      top: 50%;
      transform: translateY(-50%) rotate(0deg);
      transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
      font-size: 1rem;
    }

    .side-nav-section.expanded .side-nav-header:after {
      transform: translateY(-50%) rotate(90deg);
    }

    .side-nav-items {
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      will-change: max-height, opacity;
    }

    .side-nav-section.expanded .side-nav-items {
      opacity: 1;
      max-height: 500px;
    }