/* 2026-09-16 (Niels): the shared page header's styles, moved verbatim out of
   site/index.html, which is where this design was settled (PR #138). Home, /sav and
   /admin all load this now. The rules read the design-system tokens from each page's own
   :root block, except --brand-ink and --shadow-lift, which this file declares itself because
   /admin has neither and three of these rules need them.
   Spec: werkmap/specs/2026-09-16-shared-header.md */

/* 2026-09-16 (Niels): these two travel with the stylesheet rather than being assumed of each
   page's :root. /admin declares neither, and the rules below read both. Equal-specificity
   :root rules resolve by document order, so which copy wins depends on whether this <link>
   comes before the page's own <style> — moot today, since the pages that declare them use
   these exact values, but do not rely on it for a token whose value differs per page. */
:root{--brand-ink:#C4181D;--shadow-lift:0 4px 12px rgba(16,24,40,.08);}

/* 2026-09-15 (Niels, review round 2): a fixed height:64px meant a wrapped header row (a
   long derived name at narrow widths, and pre-existing even before this task's changes —
   the langbar/account/logout row already overflowed at 400px) did not grow the bar, so
   the wrapped line spilled past the brand border-bottom onto the hero heading. min-height
   lets a wrapped row grow the bar instead; at desktop the row never wraps, so nothing
   changes there. */
header{background:var(--surface);border-bottom:2px solid var(--brand);padding:0 40px;min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
header .left{display:flex;align-items:center;gap:18px;}
/* 2026-09-16 (Niels): logo-link styling for proper alignment and height */
header .logo-link{display:flex;align-items:center;height:34px;}
header img.logo{height:34px;}
.divider{width:1px;height:32px;background:var(--border-strong);}
header .info .title{color:var(--ink);font-size:14px;font-weight:600;}
header .info .sub{color:var(--ink-muted);font-size:11px;margin-top:2px;}
.spacer{flex:1;}
.langbar{display:inline-flex;border:1px solid var(--border-strong);border-radius:var(--r-sm);overflow:hidden;background:var(--surface);box-shadow:var(--shadow);}
.langbar button{background:transparent;border:0;border-right:1px solid var(--border);font:inherit;font-size:11.5px;font-weight:700;color:var(--ink-muted);padding:0 11px;height:30px;cursor:pointer;}
.langbar button:last-child{border-right:0;}
.langbar button:hover{background:var(--surface-sunk);color:var(--ink);}
.langbar button.active{background:var(--brand-tint);color:var(--brand-ink);}
#userBar{display:none;align-items:center;gap:10px;font-size:12.5px;color:var(--ink-muted);}
/* 2026-09-15 (Niels, review round): the three flat controls (#userLbl, #accountLink,
   #logoutBtn) became one trigger + dropdown; these rules replace the old shared
   #userBar .btn/button styling with the new structure's own selectors. */
#userMenuWrap{position:relative;}
#userMenuBtn{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 8px 0 6px;border:1px solid var(--border-strong);border-radius:var(--r-sm);background:var(--surface);box-shadow:var(--shadow);cursor:pointer;font:inherit;font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap;}
#userMenuBtn:hover{background:var(--surface-sunk);}
.avatar{width:22px;height:22px;border-radius:50%;background:var(--brand-tint);color:var(--brand-ink);display:grid;place-items:center;flex:none;}
.avatar svg.i{width:14px;height:14px;}
svg.i.caret{width:14px;height:14px;color:var(--ink-faint);}
@media (prefers-reduced-motion:no-preference){.caret{transition:transform .13s;}}
#userMenuBtn[aria-expanded="true"] .caret{transform:rotate(180deg);}
#userMenu{display:none;position:absolute;right:0;top:calc(100% + 6px);min-width:220px;z-index:50;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-lift);padding:5px;}
#userMenu.open{display:block;}
#userMenuMail{font-size:11.5px;color:var(--ink-faint);padding:7px 9px 8px;border-bottom:1px solid var(--border);margin-bottom:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mi{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:var(--r-sm);border:0;background:none;font:inherit;font-size:12.5px;color:var(--ink);text-align:left;cursor:pointer;width:100%;text-decoration:none;}
.mi:hover,.mi:focus-visible{background:var(--surface-sunk);}
/* 2026-09-15 (Niels, review round 2): this used to size the account-link icon back when it
   carried class="btn" — it no longer does (class="mi" now), so the rule matched nothing
   and the icon silently fell back to the 16px svg.i base while the avatar/caret sit at
   14px. Retargeted onto the actual dropdown-row class, sized deliberately rather than by
   accident, and now also covers the sign-out row's icon (finding E).
   2026-09-15 (Niels, review round 3): this now sets 16px, byte-identical to the svg.i base
   rule — kept deliberately rather than deleted, as a pin: the two dropdown-row icons
   (i-key, i-exit) stay their current size even if svg.i's base ever changes for other
   icons on the page, instead of silently drifting along with it. */
.mi svg.i{width:16px;height:16px;}

/* 2026-09-16 (Niels): the component injects five icons, so it paints them. It never did:
   the rules above size them and the three pages that adopted the header each happened to
   carry a global svg.i rule supplying stroke and fill. /sales scopes its copy to #protTabs
   and /orders/admin has none, so both would have rendered a black disc and black wedges.
   Deliberately sets no width or height — this selector outranks .avatar svg.i, svg.i.caret
   and .mi svg.i above, and a size here would flatten all five icons to one. */
#gwHeader svg.i{stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none;}

/* 2026-09-16 (Niels): a page that wants the bar to stay put while it scrolls passes
   data-sticky. Home does not; /sav does, because you scroll a long ticket table there. */
header.gwSticky{position:sticky;top:0;z-index:50;}

@media (max-width:640px){
  header{padding:0 14px;gap:10px;}
  /* 2026-09-15 (Niels, review round): this used to hide #userLbl (then the raw e-mail) on
     a narrow screen. #userLbl now holds the person's name inside the trigger button —
     hiding it would leave an unlabelled icon with nothing to read. The address line that
     used to sit beside it (#userMenuMail) already lives inside the dropdown panel, which
     is display:none until opened, so there is nothing left here that needs to give way;
     header already wraps (flex-wrap:wrap) if the row runs out of room. Dropped, not
     retargeted.
     2026-09-15 (Niels, review round 2): #userLbl itself still needs a bound — a long
     derived name could otherwise push the trigger (and, before the min-height fix above,
     the whole header) wide. Same shape as the old unconditional inline style this element
     had before the task-2 restructure removed it. */
  #userLbl{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
}