/* Left menu for Owners, Agents and hotels (member-frame.js; docs/member-frame.md). */
.mf-side, .mf-scrim { display: none; }
body.mf { --mf-w: 248px; --mf-line: #e3e8e8; padding-left: var(--mf-w); background: #f6f8f8; }
body.mf.mf-collapsed { --mf-w: 64px; }
body.mf .mf-side { position: fixed; z-index: 70; top: 0; bottom: 0; left: 0; display: flex; flex-direction: column; width: var(--mf-w); overflow-x: hidden; overflow-y: auto;
  border-right: 1px solid var(--mf-line); background: #fbfcfc; color: #14211f; font: 14px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
.mf-acct { display: flex; align-items: center; gap: 9px; min-height: 57px; padding: 12px 14px; border-bottom: 1px solid var(--mf-line); }
.mf-photo { flex: none; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: #e6f4f2; }
.mf-acct .mf-label { min-width: 0; }
.mf-acct b { display: block; overflow: hidden; font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.mf-acct small { display: block; overflow: hidden; color: #5d6b69; font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.mf-close { display: none; margin-left: auto; border: 0; background: none; font-size: 16px; color: #5d6b69; }
/* Account switcher (replaces the "Working in" box): one row, the list opens under it. */
.mf-acct { padding: 10px; }
.mf-switch { display: flex; flex: 1; align-items: center; gap: 9px; min-width: 0; padding: 6px 8px; border: 1px solid var(--mf-line); border-radius: 8px; background: #fff; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.mf-switch:hover, .mf-switch[aria-expanded="true"] { background: #eef4f3; }
.mf-switch > .mf-label:not(.mf-switch-ico) { flex: 1; min-width: 0; }
.mf-switch-ico { display: inline-flex; flex: none; margin-left: auto; color: #8a9795; }
.mf-switch-list { margin: 0 10px 6px; padding: 4px; border: 1px solid var(--mf-line); border-radius: 8px; background: #fff; box-shadow: 0 10px 28px rgba(16, 40, 38, .12); }
.mf-switch-list[hidden] { display: none; }
.mf-switch-list .mf-group { margin: 8px 8px 2px; }
.mf-switch-list .mf-group:first-child { margin-top: 4px; }
.mf-pick { font-size: 13px; white-space: normal; }
.mf-pick[disabled] { color: #8a9795; cursor: default; }
.mf-pick[disabled]:hover { background: none; }
.mf-pick .mf-label { flex: 1; overflow: visible; white-space: normal; }
.mf-check { flex: none; margin-left: auto; }
.mf-switch-list a.mf-pick { margin-top: 4px; border-top: 1px solid var(--mf-line); border-radius: 0 0 7px 7px; color: #047970; }
/* The "Working in" select stays in the menu for the switcher but out of sight; its messages still show. */
.mf-working .workspace-context-bar { display: none !important; }
.mf-working .workspace-context-shell { margin: 0 12px !important; border: 0 !important; background: none !important; }
.mf-working [role="status"]:not([hidden]) { display: block; width: auto; margin: 0 0 6px; padding: 6px 8px; border-radius: 6px; background: #fff4e0; color: #8a5a00; font-size: 12px; }
/* "Working in" (account-layout.js) inside the menu. */
.mf-working .workspace-context-shell { position: static !important; margin: 10px 12px 0; padding: 0; border: 1px solid var(--mf-line); border-radius: 8px; background: #fff; box-shadow: none; }
.mf-working .workspace-context-bar { display: block; width: auto; margin: 0; padding: 6px 10px; }
.mf-working .workspace-context-copy { display: flex; flex-direction: column; align-items: stretch; gap: 0; font-size: 12px; color: #5d6b69; }
.mf-working select { width: 100%; max-width: none; padding: 2px 0; border: 0; background: transparent; color: #14211f; font-size: 13px; font-weight: 650; }
.mf-working .workspace-context-bar > :not(.workspace-context-copy):not([role="status"]) { display: none; }
.mf-cta { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 10px 12px 2px; padding: 9px; border-radius: 8px; background: #047970; color: #fff; font-weight: 650; text-decoration: none; white-space: nowrap; }
.mf-cta:hover { background: #035f58; }
.mf-search { display: flex; align-items: center; gap: 8px; margin: 10px 12px; padding: 6px 10px; border: 1px solid var(--mf-line); border-radius: 8px; background: #fff; color: #5d6b69; font-size: 13px; }
.mf-search input { flex: 1; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; font: inherit; color: #14211f; }
.mf-search kbd { color: #8a9795; font: 11px ui-monospace, monospace; white-space: nowrap; }
.mf-nav { flex: 1; padding: 4px 8px 12px; }
.mf-item, .mf-parent { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border: 0; border-radius: 7px; background: none; color: #14211f; font: inherit; font-size: 13.5px; text-align: left; text-decoration: none; white-space: nowrap; }
.mf-item { cursor: pointer; }
.mf-item:hover { background: #eef4f3; }
.mf-item.mf-on { background: #e6f4f2; color: #047970; font-weight: 650; }
.mf-sub { padding-left: 38px; }
/* Opportunities (and other groups) fold open and shut. */
.mf-parent { cursor: pointer; }
.mf-parent:hover { background: #eef4f3; }
.mf-chev { display: inline-flex; margin-left: auto; color: #8a9795; transition: transform .15s ease; }
.mf-parent[aria-expanded="false"] .mf-chev { transform: rotate(-90deg); }
.mf-fold[hidden] { display: none; }
body.mf-collapsed .mf-chev { display: none; }
.mf-ico { flex: none; width: 18px; text-align: center; opacity: .85; }
.mf-label { overflow: hidden; text-overflow: ellipsis; }
.mf-badge { margin-left: auto; padding: 0 7px; border-radius: 999px; background: #e5484d; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; }
.mf-group { margin: 14px 10px 4px; color: #6b7876; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.mf-foot { padding: 8px; border-top: 1px solid var(--mf-line); }

/* Today's header becomes the slim top bar. */
body.mf .site-header { position: sticky; top: 0; z-index: 60; width: auto; max-width: none; margin: 0; border: 0; border-bottom: 1px solid var(--mf-line); border-radius: 0; background: #fff; box-shadow: none; backdrop-filter: none; }
body.mf .site-header .header-inner { width: auto; max-width: none; min-height: 52px; margin: 0; padding: 0 18px; gap: 14px; border: 0; border-radius: 0; background: none; box-shadow: none; }
body.mf .site-header .brand, body.mf .site-header .desktop-nav, body.mf .site-header .mobile-menu-btn, body.mf .site-header .mobile-nav,
body.mf .site-header .header-actions > :not(.avatar-btn):not(.account-menu):not(#accountMenu), body.mf .site-header .role-switcher { display: none !important; }
body.mf .site-header .header-actions { margin-left: 0; }
body.mf .site-header .avatar-btn { display: inline-flex !important; width: 30px; height: 30px; }
.mf-bar { display: none; }
body.mf .mf-bar { display: flex; flex: 1; align-items: center; gap: 14px; min-width: 0; color: #5d6b69; font: 13.5px Inter, ui-sans-serif, system-ui, sans-serif; }
.mf-crumb { display: flex; gap: 8px; min-width: 0; margin-right: auto; overflow: hidden; white-space: nowrap; }
.mf-crumb b { overflow: hidden; color: #14211f; text-overflow: ellipsis; }
.mf-top-link { display: inline-flex; align-items: center; gap: 4px; color: #14211f; text-decoration: none; white-space: nowrap; }
.mf-top-link:hover { color: #047970; }
.mf-pill { padding: 1px 7px; border-radius: 999px; background: #fff4e0; color: #8a5a00; font-size: 11px; font-weight: 700; }
.mf-menu-btn { display: none; padding: 4px 11px; border: 1px solid var(--mf-line); border-radius: 8px; background: #fff; font-size: 16px; }
body.mf .workspace-context-shell:not(.mf-working *) { display: none; }

/* While the next page loads, the menu saved by the previous page (account-header-cache.js) stays
   where it was and the loading screen fills only the space beside it, under the slim top bar. */
.startup-pending > #mfSide, .startup-pending > .mf-scrim { visibility: visible !important; }
body.mf .page-startup { left: var(--mf-w); background: #f6f8f8; }
body.mf .page-startup .startup-saved-header { top: 0; }
body.mf .page-startup .startup-saved-header ~ .startup-content { margin-top: 18px; }
.mf-saved .mf-parent, .mf-saved .mf-switch, .mf-saved [data-mf-collapse] { pointer-events: none; }
/* The menu holds still while the page changes (startup.css turns page fades on). */
body.mf .mf-side { view-transition-name: zp-member-menu; }

/* « Collapse menu: icons only. */
body.mf-collapsed .mf-side .mf-label, body.mf-collapsed .mf-side .mf-group, body.mf-collapsed .mf-side .mf-working,
body.mf-collapsed .mf-side .mf-search kbd, body.mf-collapsed .mf-side .mf-search input, body.mf-collapsed .mf-side .mf-badge { display: none; }
body.mf-collapsed .mf-acct, body.mf-collapsed .mf-item, body.mf-collapsed .mf-parent { justify-content: center; padding-left: 0; padding-right: 0; }
body.mf-collapsed .mf-cta, body.mf-collapsed .mf-search { justify-content: center; margin-left: 10px; margin-right: 10px; padding-left: 0; padding-right: 0; }
body.mf-collapsed .mf-group + * { margin-top: 10px; }
body.mf-collapsed .mf-switch { flex: none; padding: 4px; border-color: transparent; background: none; }

/* Phones and small tablets: the menu is a drawer behind ☰. */
@media (max-width: 900px) {
  body.mf, body.mf.mf-collapsed { --mf-w: 280px; padding-left: 0; }
  body.mf .page-startup { left: 0; }
  body.mf .mf-side { transform: translateX(-100%); transition: transform .2s ease; }
  body.mf.mf-open .mf-side { transform: none; box-shadow: 0 0 40px rgba(0, 0, 0, .25); }
  body.mf.mf-open .mf-scrim { display: block; position: fixed; z-index: 65; inset: 0; background: rgba(10, 20, 20, .35); }
  body.mf .mf-close { display: block; }
  body.mf.mf-collapsed .mf-side .mf-label, body.mf.mf-collapsed .mf-side .mf-group, body.mf.mf-collapsed .mf-side .mf-working,
  body.mf.mf-collapsed .mf-side .mf-search input, body.mf.mf-collapsed .mf-side .mf-badge { display: revert; }
  body.mf [data-mf-collapse] { display: none; }
  body.mf.mf-collapsed .mf-switch { flex: 1; padding: 6px 8px; border-color: var(--mf-line); background: #fff; }
  .mf-menu-btn { display: block; }
  .mf-hide-sm { display: none; }
  body.mf .site-header .header-inner { padding: 0 12px; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { body.mf .mf-side, .mf-chev { transition: none; } }
