/* ==========================================================================
   Milieu bar
   The global bar Milieu Central renders at the top of every Milieu app via
   bar.js. It takes the app's own surface colour in both themes, separated
   from the app header by a hairline, so it reads as part of the app rather
   than a layer above it. Every colour is a Milieu token with a fallback for
   pages that have not loaded milieu-tokens.css.
   ========================================================================== */

#milieu-bar {
  --mbar-h: var(--milieu-bar-h, 44px);
  --mbar-bg: var(--color-surface, #ffffff);
  --mbar-fg: var(--color-text, #0b1b34);
  --mbar-fg-muted: var(--color-text-muted, #4f5a72);
  --mbar-line: var(--color-border, #e2e5ea);
  --mbar-hover: var(--color-surface-sunken, #f7f8fa);
  --mbar-accent: var(--color-brand-blue, #3d7cc0);
  --mbar-surface: var(--color-surface, #ffffff);
  --mbar-text: var(--color-text, #0b1b34);
  --mbar-text-muted: var(--color-text-muted, #4f5a72);
  --mbar-border: var(--color-border, #e2e5ea);
  --mbar-sunken: var(--color-surface-sunken, #f7f8fa);
  --mbar-radius: var(--radius-card, 8px);
  --mbar-motion: var(--motion-fast, 120ms);

  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--mbar-h);
  background: var(--mbar-bg);
  color: var(--mbar-fg);
  border-bottom: 1px solid var(--mbar-line);
  font-family: var(--font-sans, "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  font-size: 13.5px;
  line-height: 1;
  box-sizing: border-box;
}
#milieu-bar *,
#milieu-bar *::before,
#milieu-bar *::after {
  box-sizing: border-box;
}
#milieu-bar .mbar__in {
  height: 100%;
  max-width: var(--mshell-max, 1400px);
  margin: 0 auto;
  padding: 0 var(--mshell-gutter, 20px);
  display: flex;
  align-items: center;
  gap: 4px;
}
#milieu-bar a,
#milieu-bar button,
#milieu-bar summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--mbar-radius);
  background: transparent;
  color: var(--mbar-fg);
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--mbar-motion) ease;
  list-style: none;
}
#milieu-bar summary::-webkit-details-marker {
  display: none;
}
#milieu-bar a:hover,
#milieu-bar button:hover,
#milieu-bar summary:hover,
#milieu-bar details[open] > summary {
  background: var(--mbar-hover);
}
#milieu-bar a:focus-visible,
#milieu-bar button:focus-visible,
#milieu-bar summary:focus-visible {
  outline: 2px solid var(--mbar-accent);
  outline-offset: 1px;
}
#milieu-bar svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
#milieu-bar .mbar__home {
  width: 32px;
  padding: 0;
  justify-content: center;
  margin-right: 2px;
}
#milieu-bar .mbar__home[aria-current="page"] {
  color: var(--mbar-accent);
}
#milieu-bar .mbar__spacer {
  flex: 1;
}
#milieu-bar .mbar__muted {
  color: var(--mbar-fg-muted);
}
#milieu-bar .mbar__current {
  color: var(--mbar-fg-muted);
  font-weight: 500;
  padding: 0 6px;
}
#milieu-bar .mbar__current strong {
  color: var(--mbar-fg);
  font-weight: 600;
}

/* Badge on the bell */
#milieu-bar .mbar__badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--color-brand-coral, #e08561);
  color: #0b1b34;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

/* Menus */
#milieu-bar details {
  position: relative;
}
#milieu-bar .mbar__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 240px;
  max-width: 320px;
  padding: 6px;
  border: 1px solid var(--mbar-border);
  border-radius: var(--mbar-radius);
  background: var(--mbar-surface);
  color: var(--mbar-text);
  z-index: 1001;
}
#milieu-bar .mbar__menu--left {
  right: auto;
  left: 0;
}
#milieu-bar .mbar__menu a,
#milieu-bar .mbar__menu button {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  color: var(--mbar-text);
  justify-content: flex-start;
  font-size: 14px;
}
#milieu-bar .mbar__menu a:hover,
#milieu-bar .mbar__menu button:hover {
  background: var(--mbar-sunken);
}
#milieu-bar .mbar__menu a[aria-current="page"] {
  color: var(--color-brand-blue-dark, #2d5d92);
  background: var(--color-brand-blue-light, #eaf1f9);
  font-weight: 600;
}
#milieu-bar .mbar__menu-sep {
  height: 1px;
  margin: 6px 4px;
  background: var(--mbar-border);
}
#milieu-bar .mbar__menu-head {
  padding: 8px 10px 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mbar-text-muted);
}
#milieu-bar .mbar__menu-user {
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--mbar-border);
  margin-bottom: 6px;
  line-height: 1.35;
}
#milieu-bar .mbar__menu-user strong {
  display: block;
  font-size: 14px;
}
#milieu-bar .mbar__menu-user span {
  font-size: 12.5px;
  color: var(--mbar-text-muted);
}
#milieu-bar .mbar__menu-empty {
  padding: 8px 10px 10px;
  font-size: 13px;
  color: var(--mbar-text-muted);
  line-height: 1.4;
}
#milieu-bar .mbar__theme-choice[aria-checked="true"] {
  font-weight: 600;
  color: var(--color-brand-blue-dark, #2d5d92);
}

@media (max-width: 640px) {
  #milieu-bar .mbar__label {
    display: none;
  }
  #milieu-bar .mbar__current {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #milieu-bar a,
  #milieu-bar button,
  #milieu-bar summary {
    transition: none;
  }
}

@media print {
  #milieu-bar {
    display: none !important;
  }
}