/* =====================================================================================================================
   MENUSTD01 - EVERY POP-OUT MENU ON THE RECORD'S (...) MENU STANDARD.  1 October 2026.
   His words: "double check those menus and turn them to our new interface look standards".

   THE REFERENCE is the record overflow menu, #mhDetail.mint-host .dv-menu (client-detail-view.css, THE MINT BUTTON
   STANDARD) and MATTHEW_HOUSE_FIELD_STANDARD.md 3b. What it says, and what this file gives every other menu:
     PANEL  18px corners, 12px padding. The 12px is not taste: it is the room the row lift needs.
            reach below = offsetY + spread + blur/2 - lift = 10 + (-10) + 10 - 2 = 8px, so 12px clears it with 4 to
            spare. The panel's MATERIAL is not set here - mh-themeglass.css 2c already paints every menu as opaque
            theme glass, and that stays the one place it is written.
     ROW    a menu row is a button, so it obeys the button standard: at rest flat; on HOVER it comes up
            (translateY(-2px) + the two-layer lift + the material firms to .95 + a white hairline); on PRESS it lands
            (0, contact shadow only); a DISABLED row never answers; a DANGER row lifts on its red wash; the CHOSEN row
            (a filter's current value, the status you are in) still lifts but keeps its pine tint - it does not stop
            being the answer while you point at it. The transition sits on the base rule so it comes down as smoothly
            as it went up. The hovered row is raised so the row below cannot paint over the shadow it just grew.
     LIST   rows inside a scrolling list use the tighter pair (reaches ~6px) - a scroll box clips its own children.

   WHAT IS NOT TOUCHED: what each menu SAYS (rows, icons, two-line labels, headings, counts), where it opens, its
   open/close animation, and the toggle buttons (the Case Notes (...) keeps its solid open state on purpose -
   mh-canvas.css). The bell list, the global-search results and field dropdowns are lists, not menus, and keep
   their own standards.

   EACH SELECTOR KEEPS ITS MENU'S OWN SCOPE PLUS ONE CLASS, so it outranks that menu's old hover by exactly one
   step and reaches nothing else.
   ===================================================================================================================== */

/* ---------------------------------------------------------------- PANEL */
.mh-app .top-menu,
.mh-app .tb-menu,
.mh-app .cn-tl .tb .cn-tbmenu,
.mh-app .ed-card .ed-more,
.mh-app .ed-more.cl-iomenu,
.mh-app .exp-wrap .exp-menu,
.mh-app .mrq-filterwrap .mrq-filter-menu,
.mh-app .cl-filterwrap .cl-filterpanel,
.tm-page .tm-me-statuswrap .tm-me-menu,
.mh-app .pass-emailwrap .pass-emailmenu,
#mhMail .ml-hmw .ml-hm,
#mhDetail .cnx .mw .menu, .mh-app .cnx .mw .menu,
.mh-app .mh-photo .cd-photomenu,
:is(#clWiz,#clMbr) .pv-photo .pv-menu{
  border-radius:18px;
  padding:12px;
}

/* ---------------------------------------------------------------- ROW - base (the transition lives HERE, rule 1) */
.mh-app .top-menu .tm-item,
.mh-app .tb-menu .tbm-item,
.mh-app .cn-tl .tb .cn-tbmenu button,
.mh-app .ed-card .ed-more .ed-more-item,
.mh-app .cl-iomenu .ed-more-item,
.mh-app .exp-menu .exp-item,
.mh-app .mrq-filter-menu button,
.mh-app .cl-filterpanel .cl-fp-row,
.tm-page .tm-me-menu .tm-mi,
.mh-app .pass-emailmenu .pass-em-opt,
#mhMail .ml-hm .ml-hm-row,
#mhDetail .cnx .menu .mi, .mh-app .cnx .menu .mi,
.mh-app .cd-photomenu .cd-pmi,
:is(#clWiz,#clMbr) .pv-menu .pv-mi{
  position:relative;
  border-radius:12px;
  transition:transform .18s ease,box-shadow .18s ease,background .15s ease,color .15s ease,border-color .15s ease;
}
/* the pass card's two choices were bordered chips; a menu row has no frame at rest */
.mh-app .pass-emailmenu .pass-em-opt{border-color:transparent;background:transparent}

/* ---------------------------------------------------------------- ROW - hover: it comes up */
.mh-app .top-menu .tm-item:hover,
.mh-app .tb-menu .tbm-item:hover,
.mh-app .cn-tl .tb .cn-tbmenu button:hover,
.mh-app .ed-card .ed-more .ed-more-item:not(:disabled):hover,
.mh-app .cl-iomenu .ed-more-item:not(:disabled):hover,
.mh-app .exp-menu .exp-item:not(:disabled):hover,
.mh-app .mrq-filter-menu button:hover,
.mh-app .cl-filterpanel .cl-fp-row:hover,
.tm-page .tm-me-menu .tm-mi:hover,
.mh-app .pass-emailmenu .pass-em-opt:hover,
#mhDetail .cnx .menu .mi:not(:disabled):hover, .mh-app .cnx .menu .mi:not(:disabled):hover,
.mh-app .cd-photomenu .cd-pmi:hover,
:is(#clWiz,#clMbr) .pv-menu .pv-mi:hover{
  z-index:1;
  background:rgba(var(--tg-rgb,255,255,255),.95);
  color:var(--mh-ink);
  border-color:transparent;
  transform:translateY(-2px);
  box-shadow:0 3px 7px -4px rgba(30,55,48,.18),0 10px 20px -10px rgba(30,55,48,.26),
             inset 0 0 0 1px rgba(255,255,255,.9);
}
/* a row inside a SCROLLING list (Mail's Move to / Labels): the tighter pair, so the list does not slice it */
#mhMail .ml-hm .ml-hm-row:hover{
  z-index:1;
  background:rgba(var(--tg-rgb,255,255,255),.95);
  transform:translateY(-2px);
  box-shadow:0 2px 6px -3px rgba(30,55,48,.20),0 6px 12px -6px rgba(30,55,48,.28),
             inset 0 0 0 1px rgba(255,255,255,.9);
}
#mhMail .ml-hm .ml-hm-list{padding:6px 4px;margin:-6px -4px}

/* CHOSEN: still lifts, keeps its pine tint (declared after hover - equal specificity, the later rule wins) */
.mh-app .mrq-filter-menu button.sel:hover,
.mh-app .cl-filterpanel .cl-fp-row.on:hover,
.tm-page .tm-me-menu .tm-mi.on:hover{
  background:rgba(47,107,87,.16);color:var(--mh-green-d,#2F6B57);
}

/* DANGER: lifts on its red wash */
.mh-app .tb-menu .tbm-item.danger:hover,
#mhDetail .cnx .menu .mi.dst:not(:disabled):hover, .mh-app .cnx .menu .mi.dst:not(:disabled):hover,
.mh-app .cd-photomenu .cd-pmi.cd-pmi-danger:hover,
:is(#clWiz,#clMbr) .pv-menu .pv-mi.pv-mi-danger:hover{
  background:rgba(176,70,60,.10);color:var(--mh-danger,#B0463C);
  box-shadow:0 3px 7px -4px rgba(30,55,48,.18),0 10px 20px -10px rgba(30,55,48,.26),
             inset 0 0 0 1px rgba(255,255,255,.5);
}

/* ---------------------------------------------------------------- ROW - press: it lands */
.mh-app .top-menu .tm-item:active,
.mh-app .tb-menu .tbm-item:active,
.mh-app .cn-tl .tb .cn-tbmenu button:active,
.mh-app .ed-card .ed-more .ed-more-item:active,
.mh-app .cl-iomenu .ed-more-item:active,
.mh-app .exp-menu .exp-item:active,
.mh-app .mrq-filter-menu button:active,
.mh-app .cl-filterpanel .cl-fp-row:active,
.tm-page .tm-me-menu .tm-mi:active,
.mh-app .pass-emailmenu .pass-em-opt:active,
#mhMail .ml-hm .ml-hm-row:active,
#mhDetail .cnx .menu .mi:active, .mh-app .cnx .menu .mi:active,
.mh-app .cd-photomenu .cd-pmi:active,
:is(#clWiz,#clMbr) .pv-menu .pv-mi:active{
  transform:translateY(0);
  box-shadow:0 2px 5px -3px rgba(30,55,48,.22),inset 0 0 0 1px rgba(255,255,255,.7);
}

/* ---------------------------------------------------------------- ROW - disabled: never answers */
.mh-app .ed-more-item:disabled:hover,
.mh-app .exp-menu .exp-item:disabled:hover,
#mhDetail .cnx .menu .mi:disabled:hover, .mh-app .cnx .menu .mi:disabled:hover{
  transform:none;box-shadow:none;background:none;
}

/* ---------------------------------------------------------------- DARK - the firm material is the theme's low glass
   NOT for the note pop-up's Case actions menu (#cnPop is ALWAYS LIGHT - its frame has no dark styles, see CNSTD01) nor
   for the Add Client wizard's photo menu (that wizard is light-only): a dark hover there would be white text on white. */
body.dark .mh-app .top-menu .tm-item:hover,
body.dark .mh-app .tb-menu .tbm-item:hover,
body.dark .mh-app .cn-tl .tb .cn-tbmenu button:hover,
body.dark .mh-app .ed-card .ed-more .ed-more-item:not(:disabled):hover,
body.dark .mh-app .cl-iomenu .ed-more-item:not(:disabled):hover,
body.dark .mh-app .exp-menu .exp-item:not(:disabled):hover,
body.dark .mh-app .mrq-filter-menu button:hover,
body.dark .mh-app .cl-filterpanel .cl-fp-row:hover,
body.dark .tm-page .tm-me-menu .tm-mi:hover,
body.dark .mh-app .pass-emailmenu .pass-em-opt:hover,
body.dark #mhMail .ml-hm .ml-hm-row:hover,
body.dark .mh-app .cd-photomenu .cd-pmi:hover{
  background:rgba(var(--tg-rgb,255,255,255),calc(.12*var(--tg-k,1)));
  color:#EEF2F1;
  box-shadow:0 3px 7px -4px rgba(0,0,0,.5),0 10px 20px -10px rgba(0,0,0,.6),
             inset 0 0 0 1px rgba(180,210,235,.16);
}
body.dark .mh-app .mrq-filter-menu button.sel:hover,
body.dark .mh-app .cl-filterpanel .cl-fp-row.on:hover,
body.dark .tm-page .tm-me-menu .tm-mi.on:hover{
  background:rgba(143,187,165,.18);color:#B7D6C8;
}

/* ---------------------------------------------------------------- TEAMS: THE MENU WAS UNDER ITS OWN BACKDROP
   MEASURED 1 Oct (elementFromPoint on every row): the availability menu's four rows and the composer emoji picker's
   emojis all returned the invisible close-backdrop (.tm-statusback z20 / .tm-emojiback z40), not the row. Choosing
   "Busy" or an emoji simply closed the menu. The cause: the people list and the chat pane are glass
   (backdrop-filter), and a backdrop-filter makes a stacking context - the menu's z-index 30/50 only counts INSIDE
   its pane, and the pane itself sits at z auto, under the page-level backdrop.
   THE FIX: while a pane holds an open pop-up, the pane is lifted above that backdrop. Clicks inside the lifted pane
   no longer reach the backdrop, so those toggles carry data-mh-menu and menuclose.js shuts them instead. */
.tm-page :is(.tm-list,.tm-chat):has(.tm-me-menu, .tm-emojipop){z-index:41}

@media (prefers-reduced-motion: reduce){
  .mh-app :is(.top-menu,.tb-menu,.cn-tbmenu,.ed-more,.exp-menu,.mrq-filter-menu,.cl-filterpanel,.pass-emailmenu,.cd-photomenu) :is(button,a,div):hover,
  .tm-page .tm-me-menu .tm-mi:hover,
  #mhMail .ml-hm .ml-hm-row:hover,
  :is(#mhDetail,.mh-app) .cnx .menu .mi:hover,
  :is(#clWiz,#clMbr) .pv-menu .pv-mi:hover{transform:none}
}