@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');

/* ==========================================================================
   AVICLAIM Backoffice - application bar
   --------------------------------------------------------------------------
   Restyles the header that is already on the page:
     .header_wrapper20  >  a > img#logo  +  #headerMainMenu  +  #breadcrumb_wrapper
   Nothing is removed from the DOM, so postbacks and hrefs keep working.
   Every rule is scoped under .bo-mh, which aviclaim-bo-header.js puts on
   <body> - without the JS the page renders exactly as it does today, so it
   can never end up half-styled.

   Supersedes GenericBackofficeHeader.css: that sheet made .header_wrapper20 a
   white rounded card laid out as a flex COLUMN, which this bar cannot sit on
   top of (flex-direction and border-radius are not re-declared here, so they
   would survive and stack the bar). The two must not be linked together - see
   the install notes in the masters.

   Type is Open Sans, pulled in above. For a faster first paint put the font
   in the master page's <head> instead and drop the @import:
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap" />

   Palette is sampled from headerLogo.png: cyan #78d8f0, blue #0090c0.
   ========================================================================== */

.bo-mh {
  --boh-height: 60px;

  /* bar */
  --boh-bar: #0b2035;
  --boh-bar-veil: rgba(11, 32, 53, .82);
  --boh-edge: rgba(255, 255, 255, .08);

  /* brand */
  --boh-cyan: #78d8f0;
  --boh-cyan-soft: rgba(120, 216, 240, .15);
  --boh-cyan-text: #a5e6f8;
  --boh-blue: #0090c0;
  --boh-cyan-ink: #042031;

  /* text on the bar */
  --boh-on-bar: rgba(233, 243, 250, .72);
  --boh-on-bar-strong: #f4fbff;
  --boh-on-bar-faint: rgba(233, 243, 250, .55);
  --boh-glass: rgba(255, 255, 255, .07);
  --boh-glass-hover: rgba(255, 255, 255, .12);
  --boh-glass-line: rgba(255, 255, 255, .14);

  /* menu cards, which sit on the white page */
  --boh-card: #ffffff;
  --boh-card-line: #e6edf4;
  --boh-ink: #16293c;
  --boh-muted: #64798d;
  --boh-hover-bg: #f2f7fb;
  --boh-danger: #c0392b;

  --boh-pill: 11px;
  --boh-card-radius: 14px;
  --boh-lift: 0 16px 40px -12px rgba(6, 24, 40, .3), 0 2px 6px rgba(6, 24, 40, .08);
  --boh-font: 500 14px/1.2 "Open Sans", "Segoe UI", Roboto, -apple-system, system-ui, sans-serif;
  --boh-ease: cubic-bezier(.32, .72, 0, 1);

  /* Logo crop. headerLogo.png is 617x401 and stacks the mark (x 219-526,
     y 91-238) above the AVICLAIM wordmark (y 245-311). Only the mark is
     shown - change --boh-mark-h and the crop follows. */
  --boh-mark-h: 28px;
  --boh-mark-k: calc(var(--boh-mark-h) / 148);
}

/* let the sticky bar escape the page card */
.bo-mh .wrapper20 { overflow: visible !important; }

/* ----------------------------------------------------------------- the bar */
.bo-mh .header_wrapper20 {
  position: sticky;
  top: 0;
  z-index: 900;
  box-sizing: border-box;
  display: flex;
  flex-direction: row !important;
  align-items: center;
  gap: 12px;
  width: auto !important;
  height: var(--boh-height) !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 18px !important;
  background: var(--boh-bar) !important;
  border: 0 !important;
  border-radius: 0 !important;
  border-bottom: 1px solid var(--boh-edge) !important;
  box-shadow: none;
  font: var(--boh-font);
  transition: box-shadow .2s var(--boh-ease);
}
/* Frosted while it floats over the claim screen. The solid colour above is
   the fallback where backdrop-filter is unavailable. */
@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .bo-mh .header_wrapper20 {
    background: var(--boh-bar-veil) !important;
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
  }
}
.bo-mh.boh-scrolled .header_wrapper20 {
  box-shadow: 0 10px 30px -14px rgba(4, 18, 32, .55);
}
/* the legacy sheet draws the large AVICLAIM wordmark beside the logo */
.bo-mh .header_wrapper20::before,
.bo-mh .header_wrapper20::after,
.bo-mh .boh-logo::before,
.bo-mh .boh-logo::after { content: none !important; display: none !important; }
.bo-mh .header_wrapper20 { background-image: none; }

/* -------------------------------------------------------------------- logo */
/* The mark keeps the white ground it was drawn for. The plate holds the
   padding; the span inside does the cropping, so the padding can never
   reveal the wordmark sitting below the mark in the source image. */
.bo-mh .boh-logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 8px 14px;
  background: #fff !important;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(4, 18, 32, .22);
  overflow: visible;
  float: none !important;
  /* box-shadow only: the plate must not move on hover, so nothing animates
     transform and the hover state deliberately sets none. */
  transition: box-shadow .2s var(--boh-ease);
}
.bo-mh .boh-logo:hover {
  transform: none;
  box-shadow: 0 6px 16px -4px rgba(4, 18, 32, .4);
}
.bo-mh .boh-mark {
  position: relative;
  display: block;
  width: calc(308 * var(--boh-mark-k));
  height: var(--boh-mark-h);
  overflow: hidden;
}
.bo-mh .boh-mark img,
.bo-mh #logo {
  position: absolute;
  top: calc(-91 * var(--boh-mark-k));
  left: calc(-219 * var(--boh-mark-k));
  /* legacy sheet pins #logo with right: -1px; left+width must win the crop */
  right: auto !important;
  bottom: auto !important;
  width: calc(617 * var(--boh-mark-k)) !important;
  height: calc(401 * var(--boh-mark-k)) !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  float: none !important;
}

/* ---------------------------------------------------------------- main nav */
/* Assets/style.css pins this with `position: absolute; left: 30px; top: 67px`,
   sized for the old 125px header. Left alone it drops the whole nav below the
   60px bar and on top of the page content, so the position MUST be reset here
   - it is not enough to restyle the box. */
.bo-mh #headerMainMenu {
  position: static !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  display: flex;
  align-items: center;
  flex: 1 1 auto !important;
  min-width: 0;
  width: auto !important;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  float: none !important;
  overflow: visible !important;
}
.bo-mh #headerMainMenu ul {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 4px;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 10px;
  list-style: none;
  background: none;
}
.bo-mh #headerMainMenu li {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  background: none !important;
  border: 0 !important;
  float: none !important;
}
/* .wideMenuBtn is repeated so this outranks a legacy
   "#headerMainMenu a.wideMenuBtn" rule instead of tying with it */
.bo-mh #headerMainMenu a,
.bo-mh #headerMainMenu a.wideMenuBtn,
.bo-mh #headerMainMenu .boh-groupbtn {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  /* legacy .wideMenuBtn is a fixed 203x25 block; the capsule sizes to its label */
  width: auto !important;
  min-width: 0;
  height: 36px;
  padding: 0 14px;
  border: 0 !important;
  border-radius: var(--boh-pill);
  background: transparent;
  color: var(--boh-on-bar) !important;
  font: var(--boh-font);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .008em;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
  float: none !important;
  transition: background-color .16s var(--boh-ease), color .16s var(--boh-ease);
}
.bo-mh #headerMainMenu a:hover,
.bo-mh #headerMainMenu a.wideMenuBtn:hover,
.bo-mh #headerMainMenu .boh-groupbtn:hover,
.bo-mh #headerMainMenu .boh-groupbtn[aria-expanded="true"] {
  background: var(--boh-glass);
  color: var(--boh-on-bar-strong) !important;
}
/* The current section is a tinted capsule in the brand cyan. No tab
   underline - that bottom rule is what made the bar feel dated. */
.bo-mh #headerMainMenu a.boh-active,
.bo-mh #headerMainMenu a.wideMenuBtn.boh-active,
.bo-mh #headerMainMenu .boh-groupbtn.boh-active {
  background: var(--boh-cyan-soft);
  color: var(--boh-cyan-text) !important;
  font-weight: 600;
}
.bo-mh #headerMainMenu .boh-caret { font-size: 8px; opacity: .75; }

/* ------------------------------------------------------- grouped sections */
/* "Overige" and anything else listed in GROUPS: a button on the bar that
   looks exactly like a section, opening the card below. */
.bo-mh #headerMainMenu li > ul {
  position: absolute;
  top: calc(100% - 8px);
  left: 0;
  z-index: 950;
  display: none;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  width: auto;
  min-width: 220px;
  height: auto;
  padding: 8px;
  background: var(--boh-card);
  border: 1px solid var(--boh-card-line);
  border-radius: var(--boh-card-radius);
  box-shadow: var(--boh-lift);
  animation: boh-pop .16s var(--boh-ease);
}
.bo-mh #headerMainMenu li:not(.boh-group):hover > ul,
.bo-mh #headerMainMenu li:not(.boh-group):focus-within > ul { display: flex; }
.bo-mh #headerMainMenu li.boh-group.boh-subopen > ul { display: flex; }
.bo-mh #headerMainMenu li > ul a,
.bo-mh #headerMainMenu li > ul a.wideMenuBtn {
  /* !important to beat the `width: auto !important` on the bar-level capsule
     above, which exists to shake off the legacy fixed .wideMenuBtn width */
  width: 100% !important;
  height: 36px;
  padding: 0 12px;
  border-radius: 9px;
  color: var(--boh-ink) !important;
  font-weight: 500;
}
.bo-mh #headerMainMenu li > ul a:hover,
.bo-mh #headerMainMenu li > ul a.wideMenuBtn:hover {
  background: var(--boh-hover-bg);
  color: var(--boh-ink) !important;
}
.bo-mh #headerMainMenu li > ul a.boh-active,
.bo-mh #headerMainMenu li > ul a.wideMenuBtn.boh-active {
  background: #eaf5fb;
  color: var(--boh-blue) !important;
  font-weight: 600;
}

@keyframes boh-pop {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ search */
/* A field-shaped button, the way GitHub's search opens: it looks like the
   input it leads to. Set SEARCH.field in the JS and it becomes a live
   one-box search that submits straight to /SearchClaim. */
.bo-mh .boh-search {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 1 360px;
  min-width: 136px;
  height: 42px;
  padding: 0 7px 0 14px;
  border: 1px solid var(--boh-glass-line);
  border-radius: 999px;
  background: var(--boh-glass);
  color: var(--boh-on-bar-faint) !important;
  font: var(--boh-font);
  font-size: 13.5px;
  text-decoration: none !important;
  cursor: text;
  transition: background-color .18s var(--boh-ease), border-color .18s var(--boh-ease), box-shadow .18s var(--boh-ease);
}
.bo-mh .boh-search:hover {
  background: var(--boh-glass-hover);
  border-color: rgba(255, 255, 255, .24);
}
/* you are already on the search page */
.bo-mh .boh-search-here {
  background: var(--boh-cyan-soft);
  border-color: rgba(120, 216, 240, .45);
}
.bo-mh .boh-search svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  stroke: var(--boh-cyan);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  transition: stroke .18s var(--boh-ease);
}
.bo-mh .boh-search .boh-search-label {
  flex: 1 1 auto;
  overflow: hidden;
  color: var(--boh-on-bar-faint);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bo-mh .boh-search kbd {
  flex: 0 0 auto;
  min-width: 24px;
  padding: 4px 7px;
  border: 1px solid var(--boh-glass-line);
  border-radius: 7px;
  background: rgba(255, 255, 255, .06);
  color: var(--boh-on-bar-faint);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}
/* Submit button, live-input mode only. Sits in the pill's trailing 7px gutter,
   where the "/" hint lives in button mode. */
.bo-mh .boh-search .boh-search-go {
  flex: 0 0 auto;
  height: 30px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--boh-cyan);
  color: var(--boh-cyan-ink);
  font: var(--boh-font);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .16s var(--boh-ease);
}

  .bo-mh .boh-search .boh-search-go:hover { background: #92e2f6; }

  .bo-mh .boh-search .boh-search-go:active { background: #63cde8; }

/* live-input mode */
.bo-mh .boh-search input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 26px;
  margin: 0;
  padding: 0;
  border: 0;
  /* strips the UA chrome that comes with input[type=search] */
  -webkit-appearance: none;
  appearance: none;
  background: none;
  color: var(--boh-on-bar-strong);
  font: inherit;
  outline: none;
}
.bo-mh .boh-search input::placeholder { color: var(--boh-on-bar-faint); }

/* The browser's own clear ("x") control - the pill has a submit button, so the
   extra affordance is just noise. Prefixed pseudo-elements have to be listed
   separately: one unknown selector would invalidate the whole group. */
.bo-mh .boh-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.bo-mh .boh-search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.bo-mh .boh-search input::-webkit-search-results-button { -webkit-appearance: none; appearance: none; display: none; }
.bo-mh .boh-search input::-ms-clear { display: none; width: 0; height: 0; }
.bo-mh .boh-search input::-ms-reveal { display: none; width: 0; height: 0; }
/* Only the live box lights up as a field; the button-mode anchor keeps the
   plain pill. Keyed on .boh-search-live rather than a form element, because
   the live box is a div - see the note in buildSearch(). */
.bo-mh .boh-search-live:focus-within {
  background: #fff;
  border-color: var(--boh-cyan);
  box-shadow: 0 0 0 4px rgba(120, 216, 240, .22);
}
.bo-mh .boh-search-live:focus-within svg { stroke: var(--boh-blue); }
.bo-mh .boh-search-live:focus-within input { color: var(--boh-ink); }
.bo-mh .boh-search-live:focus-within input::placeholder { color: #93a7b8; }
.bo-mh .boh-search-live:focus-within kbd { display: none; }

/* ----------------------------------------------------------- right cluster */
.bo-mh .boh-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.bo-mh .boh-env {
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(253, 176, 34, .14);
  color: #fbc95f;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* user chip */
.bo-mh .boh-usermenu { position: relative; }
.bo-mh .boh-userbtn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 12px 0 4px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--boh-on-bar);
  font: var(--boh-font);
  cursor: pointer;
  transition: background-color .16s var(--boh-ease), border-color .16s var(--boh-ease);
}
.bo-mh .boh-userbtn:hover { background: var(--boh-glass); }
.bo-mh .boh-userbtn[aria-expanded="true"] {
  background: var(--boh-glass-hover);
  border-color: var(--boh-glass-line);
}
.bo-mh .boh-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--boh-cyan);
  color: var(--boh-cyan-ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
}
.bo-mh .boh-username {
  max-width: 160px;
  overflow: hidden;
  color: var(--boh-on-bar-strong);
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bo-mh .boh-caret { color: var(--boh-on-bar-faint); font-size: 8px; }

/* dropdown */
.bo-mh .boh-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 950;
  display: none;
  flex-direction: column;
  min-width: 244px;
  padding: 8px;
  background: var(--boh-card);
  border: 1px solid var(--boh-card-line);
  border-radius: var(--boh-card-radius);
  box-shadow: var(--boh-lift);
}
.bo-mh .boh-dropdown.boh-visible {
  display: flex;
  animation: boh-pop .16s var(--boh-ease);
}
.bo-mh .boh-dropdown-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 10px 13px;
  margin-bottom: 7px;
  border-bottom: 1px solid var(--boh-card-line);
}
/* display/place-items repeated here on purpose: the avatar is a <span>, so it
   would otherwise be caught by the label rule below and lose its centering. */
.bo-mh .boh-dropdown-head .boh-avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  font-size: 12.5px;
}

/* "Ingelogd als" - scoped to the span inside the name block rather than any
   descendant span, so it cannot reach the avatar next to it. */
.bo-mh .boh-dropdown-head div span {
  display: block;
  color: var(--boh-muted);
  font-size: 11.5px;
}
.bo-mh .boh-dropdown-head strong {
  display: block;
  overflow: hidden;
  max-width: 164px;
  color: var(--boh-ink);
  font-size: 13.5px;
  font-weight: 600;
  text-overflow: ellipsis;
}
.bo-mh .boh-dropdown a {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 12px;
  border-radius: 9px;
  color: var(--boh-ink) !important;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none !important;
}
.bo-mh .boh-dropdown a:hover { background: var(--boh-hover-bg); }
.bo-mh .boh-dropdown a.boh-signout { color: var(--boh-danger) !important; font-weight: 600; }
.bo-mh .boh-dropdown a.boh-signout:hover { background: #fdf2f0; }
.bo-mh .boh-dropdown hr {
  height: 1px;
  margin: 7px 0;
  border: 0;
  background: var(--boh-card-line);
}

/* login page: no user, just the way in */
.bo-mh .boh-anon a {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--boh-cyan);
  color: var(--boh-cyan-ink) !important;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
}
.bo-mh .boh-anon a:hover { background: #92e2f6; }

/* ------------------------------------------------------------- old crumbs */
/* "Welcome x! [ Uitloggen ] [ ... ]" - the links themselves are moved into
   the user menu by the JS, the empty shell is hidden */
.bo-mh #breadcrumb_wrapper { display: none !important; }

/* Dead vertical space between bar and content. The JS tags only the empty
   spacers above .content_wrapper20 - the page reuses the id
   "lighttoneborderheader" for the footer rule, which stays visible. */
.bo-mh .boh-spacer { display: none !important; }

/* ---------------------------------------------------------------- a11y */
.bo-mh .header_wrapper20 a:focus-visible,
.bo-mh .header_wrapper20 button:focus-visible {
  outline: 2px solid var(--boh-cyan);
  outline-offset: 3px;
}
.bo-mh .boh-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 11px 16px;
  background: var(--boh-blue);
  color: #fff !important;
  border-radius: 0 0 10px 0;
  font: var(--boh-font);
  font-weight: 600;
  text-decoration: none !important;
}
.bo-mh .boh-skip:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  .bo-mh .header_wrapper20,
  .bo-mh .boh-logo,
  .bo-mh .boh-search,
  .bo-mh .boh-userbtn,
  .bo-mh #headerMainMenu a,
  .bo-mh #headerMainMenu .boh-groupbtn { transition: none; }
  .bo-mh .boh-dropdown.boh-visible,
  .bo-mh #headerMainMenu li > ul { animation: none; }
}

/* ------------------------------------------------------- narrower desktops
   The BO is a desktop application, so the nav never collapses behind a menu
   button - the bar just tightens. Every link stays reachable. */
@media (max-width: 1400px) {
  .bo-mh .boh-username { display: none; }
  .bo-mh .boh-userbtn { padding-right: 7px; }
}
@media (max-width: 1280px) {
  .bo-mh .boh-search { flex-basis: 300px; }
  .bo-mh .boh-search kbd { display: none; }
  .bo-mh .boh-search .boh-search-go { padding: 0 11px; }
  .bo-mh #headerMainMenu ul { padding: 0 4px; }
  .bo-mh #headerMainMenu a,
  .bo-mh #headerMainMenu a.wideMenuBtn,
  .bo-mh #headerMainMenu .boh-groupbtn { padding: 0 11px; }
}
@media (max-width: 1180px) {
  .bo-mh .header_wrapper20 { gap: 8px; padding: 0 14px !important; }
  .bo-mh .boh-search { flex-basis: 250px; min-width: 150px; }
  .bo-mh .boh-search .boh-search-label { font-size: 13px; }
  .bo-mh .boh-search .boh-search-go { padding: 0 9px; font-size: 12px; }
  .bo-mh #headerMainMenu a,
  .bo-mh #headerMainMenu a.wideMenuBtn,
  .bo-mh #headerMainMenu .boh-groupbtn { padding: 0 9px; font-size: 13px; }
}
/* Last resort, far below any real BO screen: the sections pack left and
   scroll sideways rather than disappear. */
@media (max-width: 940px) {
  .bo-mh #headerMainMenu ul {
    justify-content: flex-start;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .bo-mh #headerMainMenu ul::-webkit-scrollbar { display: none; }
  .bo-mh .boh-env { display: none; }
}

@media print {
  .bo-mh .header_wrapper20 { position: static; box-shadow: none; }
}