/* Mango shared header — the one header every Mango intra-tool wears.
   ---------------------------------------------------------------------------
   Served by the Dashboard at /css/mango-header.css. Tools link to it by that
   absolute path: behind the shared reverse proxy every tool is on the same
   origin as the Dashboard, so the path resolves from inside any tool, and a
   change here reaches every tool at once with no redeploy of the tools.

   Everything is namespaced `mh-` and all custom properties are scoped to
   `.mh-header`, so a tool's own CSS cannot collide with it and vice versa.
   Do not restyle these classes inside a tool — if the header needs to change,
   change it here so every tool stays identical. Spec: docs/SHARED_HEADER.md.
   --------------------------------------------------------------------------- */

.mh-header{
  /* Scoped palette — deliberately not reading the host page's variables, so the
     header looks the same in a tool that has its own theme. */
  --mh-green:#8BC400; --mh-green-dark:#6b9900; --mh-dark:#53565A;
  --mh-white:#fff; --mh-border:#E2E2DF; --mh-muted:#8a8d8f; --mh-hover:#F5F5F3;

  position:relative;
  display:flex; align-items:center; gap:14px;
  background:var(--mh-white);
  border-bottom:1px solid var(--mh-border);
  padding:0 20px; min-height:56px;
  font-family:'Red Hat Display',Arial,Helvetica,sans-serif;
  color:var(--mh-dark);
  font-size:14px;
  box-sizing:border-box;
}
.mh-header *{box-sizing:border-box;}

/* ---- Left: logo, then the breadcrumb trail ---- */
.mh-logo-link{display:flex; align-items:center; text-decoration:none; flex:0 0 auto;}
/* 32px: the logo is a two-line lockup (wordmark over "LOGISTICS GROUP"), so
   anything smaller turns the tagline into a smudge. */
.mh-logo{display:block; height:32px; width:auto;}
/* Shown only if the logo image is missing, so the header degrades to the
   wordmark rather than a broken-image icon. */
.mh-logo-text{font-weight:700; font-size:22px; color:var(--mh-green-dark); letter-spacing:-.01em;}

.mh-trail{display:flex; align-items:center; gap:8px; min-width:0; flex:1 1 auto;}
.mh-crumb{
  color:var(--mh-dark); text-decoration:none; font-size:15px; font-weight:400;
  padding:3px 6px; border-radius:6px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
a.mh-crumb:hover, a.mh-crumb:focus-visible{
  background:var(--mh-hover); color:var(--mh-green-dark); outline:none;
}
a.mh-crumb:focus-visible{box-shadow:0 0 0 2px var(--mh-green);}
/* The page you are on: bold, and not a link when it is the current app root. */
.mh-crumb.mh-current{font-weight:700; color:var(--mh-dark);}
.mh-sep{color:var(--mh-border); font-size:15px; user-select:none;}

/* ---- Right: the user menu ---- */
.mh-user{position:relative; flex:0 0 auto; margin-left:auto;}
.mh-user-btn{
  display:flex; align-items:center; gap:7px;
  font-family:inherit; font-size:14px; font-weight:500; color:var(--mh-dark);
  background:none; border:1px solid transparent; border-radius:8px;
  padding:7px 10px; margin:0; width:auto; cursor:pointer; line-height:1.2;
}
.mh-user-btn:hover, .mh-user[data-open="true"] .mh-user-btn{
  background:var(--mh-hover); border-color:var(--mh-border);
}
.mh-user-btn:focus-visible{outline:none; box-shadow:0 0 0 2px var(--mh-green);}
.mh-caret{
  width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:5px solid var(--mh-muted); transition:transform .12s ease;
}
.mh-user[data-open="true"] .mh-caret{transform:rotate(180deg);}

.mh-menu{
  position:absolute; top:calc(100% + 6px); right:0; z-index:1000;
  min-width:264px; max-width:320px;
  background:var(--mh-white); border:1px solid var(--mh-border); border-radius:10px;
  box-shadow:0 8px 28px rgba(0,0,0,.12);
  padding:6px; display:none;
}
.mh-user[data-open="true"] .mh-menu{display:block;}

.mh-menu-email{
  padding:8px 10px 10px; font-size:12px; color:var(--mh-muted);
  border-bottom:1px solid var(--mh-border); margin-bottom:6px;
  /* `anywhere` rather than `break-all`: a long address wraps at a sensible point
     instead of splitting "co.uk" across two lines. */
  overflow-wrap:anywhere; line-height:1.4;
}
.mh-menu-email strong{display:block; font-size:13px; color:var(--mh-dark); font-weight:700; margin-bottom:2px;}

.mh-menu-label{
  padding:8px 10px 4px; font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--mh-muted);
}
.mh-menu-item{
  display:block; width:100%; text-align:left;
  font-family:inherit; font-size:14px; color:var(--mh-dark); text-decoration:none;
  background:none; border:none; border-radius:6px;
  padding:8px 10px; margin:0; cursor:pointer; line-height:1.3;
}
.mh-menu-item:hover, .mh-menu-item:focus-visible{background:var(--mh-hover); color:var(--mh-green-dark); outline:none;}
.mh-menu-sep{height:1px; background:var(--mh-border); margin:6px 0;}
.mh-menu-item.mh-signout{color:var(--mh-dark);}
.mh-menu-item.mh-signout:hover{background:#f4eceb; color:#B23A2E;}

/* ---- Narrow screens: keep the trail, drop the name to a compact button ---- */
@media (max-width:620px){
  .mh-header{padding:0 12px; gap:10px;}
  .mh-crumb{font-size:14px; padding:3px 4px;}
  .mh-user-btn .mh-user-name{max-width:96px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
}