/* iPM Portal shell styles: the header, the profile menu, the appearance control, the footer.
   Semantic tokens only, light and dark, matching Unilog brand values.

   The PORTAL CONTENT is not styled here. It arrives with the migrated screens as the `pmp`
   design-token block injected by pm-app.jsx, so the component library and its stylesheet stay
   together and cannot drift apart. This file is only the chrome above and below it. */
:root {
  --blue-ultra-light:#F2F6FA; --blue-light:#BBD8F7; --blue:#3289E7; --blue-medium:#1B7CE4;
  --blue-semi-dark:#1357A0; --blue-dark:#0D3E72; --blue-ultra-dark:#082544;
  --white:#FFFFFF; --n-ultra-light:#F2F2F2; --n-light:#D9D9D9; --n-semi-light:#A6A6A6;
  --n-semi-dark:#595959; --n-dark:#242424; --n-ultra-dark:#171717;
  --success:#18B26B; --warning:#F9AC06; --danger:#D80027;
}
:root[data-theme="light"] {
  --bg-page:var(--n-ultra-light); --bg-surface:var(--white); --bg-sunken:var(--blue-ultra-light);
  --text-primary:var(--n-dark); --text-secondary:var(--n-semi-dark); --border:var(--n-light);
  --action:var(--blue); --action-text:var(--white); --focus:var(--blue);
}
:root[data-theme="dark"] {
  --bg-page:#0A1B2E; --bg-surface:#0F1B2E; --bg-sunken:#0A1524;
  --text-primary:#F3F3F3; --text-secondary:#A6B4C4; --border:rgba(255,255,255,0.12);
  --action:#5FA3EC; --action-text:var(--n-ultra-dark); --focus:#5FA3EC;
}
* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg-page); color:var(--text-primary); font-size:14px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
/* ── header ── */
/* The app bar is DARK IN BOTH THEMES, per the PM Portal mockup, and it is the single change
   that makes this read as the same product as the customer portal: that surface uses the same
   navy for its hero and its launch banner.
   It is not themed, deliberately. A chrome bar that flips with the theme has to prove contrast
   twice for the logo, the product name and the avatar; one fixed dark ground proves it once,
   and the content below it still themes normally. */
.ipm-topbar {
  display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(180deg,#0D2A4A 0%,#0A1B2E 100%);
  border-bottom:1px solid rgba(255,255,255,0.08);
  padding:12px 24px; position:sticky; top:0; z-index:50;
}
.ipm-brand { display:flex; align-items:center; gap:9px; min-width:0; background:none; border:0; padding:0; cursor:pointer; font:inherit; }
/* Only the WORDMARK swaps by theme: dark-ink PNG on light, white/blue SVG on dark. The
   product suffix beside it is text, so it inherits the header colour and needs no third
   asset. Sized by height so both files land on the same optical scale despite differing
   intrinsic dimensions. */
/* The wordmark NO LONGER SWAPS BY THEME, because the bar it sits on no longer changes. The
   white/blue SVG is now correct in both, and the dark-ink PNG would be invisible on the navy
   ground in light mode. It is kept in the markup and hidden rather than removed, so the two
   assets stay together for whatever needs the dark-ink one next. */
.ipm-logo-light, .ipm-logo-dark { height:22px; width:auto; display:block; }
.ipm-logo-light { display:none; }
.ipm-brand-product { font-weight:600; font-size:14px; color:rgba(255,255,255,0.62); white-space:nowrap; }
.ipm-brand:focus-visible { outline:2px solid var(--focus); outline-offset:3px; border-radius:4px; }
.ipm-profile { position:relative; }
.ipm-avatar {
  width:34px; height:34px; border-radius:50%; border:1px solid var(--border);
  background:var(--blue-dark); color:var(--white); font-size:12px; font-weight:700;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.ipm-avatar:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.ipm-menu {
  position:absolute; right:0; top:44px; min-width:260px; background:var(--bg-surface);
  border:1px solid var(--border); border-radius:12px; padding:14px;
  box-shadow:0 12px 32px rgba(8,37,68,0.14);
}
/* Identity block: avatar, then name over role over email. The role is the DIRECTORY job
   title where there is one, so this reads as who the person is rather than what the portal
   has granted them. */
.ipm-menu-id { display:flex; align-items:flex-start; gap:11px; }
.ipm-menu-avatar {
  flex:0 0 auto; width:38px; height:38px; border-radius:50%;
  background:var(--blue-dark); color:var(--white); font-size:13px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.ipm-menu-idtext { min-width:0; }
.ipm-menu-name { font-weight:600; font-size:14px; line-height:1.3; }
.ipm-menu-role { font-size:12px; color:var(--text-secondary); margin-top:1px; }
.ipm-menu-mail { font-size:12px; color:var(--text-secondary); word-break:break-all; margin-top:3px; }
.ipm-menu-sep { height:1px; background:var(--border); margin:12px 0; }
.ipm-menu-label { font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-secondary); margin-bottom:8px; }
.ipm-menu-btn {
  font:inherit; cursor:pointer; border-radius:8px; border:1px solid var(--action);
  background:transparent; color:var(--action); padding:7px 14px; width:100%; margin-top:8px;
}
.ipm-menu-btn:hover { background:var(--bg-sunken); }
/* Three states, not a two-way switch: a toggle has to assume a starting side and is wrong for
   half the users on first load. "System" is the honest name for the default they already have. */
.ipm-seg { display:flex; gap:4px; background:var(--bg-sunken); border:1px solid var(--border); border-radius:8px; padding:3px; }
.ipm-seg-btn { flex:1; font:inherit; font-size:12px; cursor:pointer; border:0; border-radius:6px; padding:5px 4px; background:transparent; color:var(--text-secondary); }
.ipm-seg-btn:hover { color:var(--text-primary); }
.ipm-seg-btn.on { background:var(--bg-surface); color:var(--text-primary); font-weight:600; box-shadow:0 1px 3px rgba(8,37,68,0.16); }
.ipm-seg-btn:focus-visible { outline:2px solid var(--focus); outline-offset:1px; }
/* ── footer and boot failure ── */
.ipm-foot { text-align:center; font-size:12px; color:var(--text-secondary); padding:20px; }
.ipm-boot-error { max-width:520px; margin:14vh auto; padding:24px; text-align:center; color:var(--text-secondary); }
/* The pre-script placeholder in index.html, so the page never looks broken while the scripts
   and the profile call are in flight. */
.ipm-skeleton { background:var(--bg-sunken); border:1px dashed var(--border); }
.ipm-loading { color:var(--text-secondary); padding:40px; text-align:center; }
@media (max-width:640px) {
  .ipm-topbar { padding:10px 14px; }
  .ipm-brand-product { display:none; }
}