/* =====================================================================
   header-dialogs.css  —  makes the two MainHeader popups
   (Selecteer onderneming / Selecteer taal) look like the
   Documenten-page dialogs, with ONE deliberate exception (#425): the
   select inputs here use a WHITE (surface) background in every
   non-focus state — the language-dialog look Ali approved — instead of
   the grey field background used in the Documenten dialogs.

   This file is a SMALL ADDITION on top of `documents-dialogs.css`
   (already shipped with the Documents handoff). Import BOTH globally,
   once, in the same place (App.razor / index.html head or the Ynex
   custom stylesheet). The rules below only bite on dialogs that set
   Class="doc-dlg" — the enterprise + language MudDialogs.

   WHY a separate file: the Documents dialogs use a self-contained
   custom dropdown (.doc-dlg-cselect) and a text field (.doc-dlg-field).
   The header popups instead keep their existing <MudSelect> (so the
   bound value / EnterpriseChanged / LanguageChanged logic is untouched).
   These rules restyle that closed MudSelect input so it matches the
   Documenten field exactly, and theme the MudSelect popover to match
   the custom menu.

   Colours use MudBlazor palette variables so they follow the active
   theme — do NOT use --primary / --primary-rgb (the app doesn't define
   those at :root; they fall back to coral).
   ===================================================================== */

/* ---- the MudSelect closed input, styled as the Documenten field ---- */
.doc-dlg .mud-input.mud-input-text.form-control,
.doc-dlg .form-control .mud-input-control,
.doc-dlg .form-control.mud-select .mud-input-slot {
  font-family: inherit;
}

/* the visible field box — white (surface) background by design (#425),
   matching the approved language-dialog look; deviates from the grey
   Documenten-dialog fields on purpose */
.doc-dlg .form-control.mud-select .mud-input {
  height: 46px;
  padding: 0 12px 0 14px;
  border: 1px solid var(--mud-palette-lines-inputs, #eef0f3);
  border-radius: 10px;
  background: var(--mud-palette-surface, #fff);
  transition: .15s;
}
.doc-dlg .form-control.mud-select .mud-input::before,
.doc-dlg .form-control.mud-select .mud-input::after {
  display: none !important;            /* kill MMud underline (Underline=false already, belt & braces) */
}
.doc-dlg .form-control.mud-select .mud-input-slot {
  font-size: 14px;
  font-weight: 500;
  color: var(--mud-palette-text-primary, #232427);
}
.doc-dlg .form-control.mud-select .mud-input.mud-input-focused {
  border-color: var(--mud-palette-primary, #2563eb);
  background: var(--mud-palette-surface, #fff);
  box-shadow: 0 0 0 3px rgba(var(--mud-palette-primary-rgb, 37, 99, 235), .12);
}
.doc-dlg .form-control.mud-select .mud-input-adornment .mud-icon-root {
  color: var(--mud-palette-text-secondary, #8c9097);
}

/* ---- the MudSelect popover (dropdown menu), themed like the custom menu ---- */
.select-dropdown-menu.mud-popover {
  border: 1px solid var(--mud-palette-lines-default, #eef0f3);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(20, 24, 40, .18);
  padding: 6px;
  margin-top: 6px;
}
.select-dropdown-menu .mud-list-item {
  border-radius: 8px;
  padding: 11px 12px;
  font-size: 14px;
  color: var(--mud-palette-text-secondary, #3a4150);
}
.select-dropdown-menu .mud-list-item:hover {
  background: rgba(var(--mud-palette-primary-rgb, 37, 99, 235), .08);
  color: var(--mud-palette-primary, #2563eb);
}
.select-dropdown-menu .mud-selected-item {
  color: var(--mud-palette-primary, #2563eb);
  font-weight: 600;
  background: transparent;
}

/* ---- optional label above the select (mirror the Documenten label) ---- */
.doc-dlg .doc-dlg-label { /* defined in documents-dialogs.css; reused here */ }

/* =====================================================================
   HEADER CHROME  —  aligns the app header to the Header/Sidebar mock.
   These target MudBlazor-generated nodes (activator button, MudAvatar,
   the user-menu popover portal) that never carry a CSS-isolation scope,
   so the rules live here (global). Colours route through --mud-palette-*.
   ===================================================================== */

/* (3b) Topbar item spacing — a bit more air between the right-cluster items
   (enterprise selector / NL / apps-grid / profile) than the Ynex default. */
.main-header-container .header-content-right {
  gap: 8px;
}

/* (4) Apps-grid / quick-links button — 38x38 grid-centred .icobtn, vertically
   centred with NL + the avatar (the header-element row is align-items:center). */
.header-quick-links .quick-links-mud-menu .mud-button-root,
.header-quick-links .quick-links-mud-menu .mud-icon-button {
  width: 38px;
  height: 38px;
  min-width: 38px;
  padding: 0;
  margin: 0;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mud-palette-text-secondary);
}
.header-quick-links .quick-links-mud-menu .mud-button-root:hover,
.header-quick-links .quick-links-mud-menu .mud-icon-button:hover {
  background: var(--mud-palette-background-grey, #f1f3f7);
  color: var(--mud-palette-primary);
}
.header-quick-links .quick-links-mud-menu .header-link-icon {
  font-size: 20px;
  line-height: 1;
  margin: 0;
}

/* (5) Profile name + role — one left-aligned flex column (name over role,
   sharing the same left edge), avatar to their left. Scoped to the profile
   activator so the right-aligned enterprise selector block is untouched. */
.header-profile-menu-activator .main-header-profile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  margin-top: 0;
  line-height: 1.18;
}
.header-profile-menu-activator .main-header-profile .mud-typography {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--mud-palette-text-primary);
  line-height: 1.18;
}
.header-profile-menu-activator .main-header-profile .fs-11 {
  font-size: 11.5px;
  color: var(--mud-palette-text-secondary);
  line-height: 1.18;
}

/* (6) Avatar — themed rounded-square initials tile (not a grey circle). */
.header-user-avatar.mud-avatar {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(var(--mud-palette-primary-rgb), .12);
  color: var(--mud-palette-primary);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .2px;
}

/* (7) Header popups open near the TOP (DialogPosition.TopCenter). Nudge them down to
   the mock's comfortable gap. Scoped to doc-dlg INSIDE a top-center container, so the
   centered Documenten dialogs (also doc-dlg) keep their own position. */
.mud-dialog-container.mud-dialog-topcenter .doc-dlg.mud-dialog {
  margin-top: 56px;
}

/* (8) Logout popover — white card under the avatar with the primary "Logout" item. */
.header-user-menu-popover.mud-popover {
  background: var(--mud-palette-surface, #fff);
  border: 1px solid var(--mud-palette-lines-default, #eef0f3);
  border-radius: 11px;
  box-shadow: 0 16px 40px rgba(20, 24, 40, .18);
  padding: 6px;
}
.header-user-menu-popover .profile-menu-item {
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--mud-palette-primary);
  /* #462 AC14: .mud-menu-item is already display:flex/align-items:center, but the
     icon glyph and the plain text node don't share a line-height, so the text's
     default leading pushes its baseline below the icon's optical center. Forcing
     a matching line-height on both removes that offset without touching layout. */
  line-height: 18px;
}
.header-user-menu-popover .profile-menu-item:hover {
  background: rgba(var(--mud-palette-primary-rgb), .08);
}
.header-user-menu-popover .profile-menu-item .mud-icon-root {
  font-size: 18px;
  line-height: 18px;
  opacity: 1;
  color: var(--mud-palette-primary);
}

/* (9) #926 static user menu (plain <details>) shown until MainHeader is interactive.
   Same card as (8); positioned under the avatar like the MudMenu popover (BottomRight / TopRight). */
.header-user-menu-static { position: relative; }
.header-user-menu-static > summary { list-style: none; cursor: pointer; }
.header-user-menu-static > summary::-webkit-details-marker { display: none; }
.header-user-menu-static-panel {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1300;
  min-width: 160px;
  margin-top: 4px;
  background: var(--mud-palette-surface, #fff);
  border: 1px solid var(--mud-palette-lines-default, #eef0f3);
  border-radius: 11px;
  box-shadow: 0 16px 40px rgba(20, 24, 40, .18);
  padding: 6px;
}
.header-user-menu-static-panel .profile-menu-item { text-decoration: none; white-space: nowrap; }