/* =====================================================================================================================
   DROPROW01 - EVERY DROPDOWN LIST'S ROWS ON THE STANDARD.  1 October 2026.
   His words (with a screenshot of the New Client wizard's Case Manager list - a grey hover row and a grey row inside a
   pine ring): "the mouse hover and selected values on the all drop down menus it's still getting the old style I don't
   like that, so turn it to our new standard design ... don't break anything".

   THE STANDARD is the record's own dropdown, #mhDetail .selpop.mint-pop (client-detail-view.css, "AN OPTION ROW IS A
   MENU ROW", field standard 3b) - the same row rule as the menus (mh-menus.css):
     REST       no fill.
     POINTED AT (hover) and THE KEYBOARD ROW (.hi / .cur / .active) - one look, not two: the row COMES UP -
                translateY(-2px), the material firms to .95, a white hairline, the tight two-layer lift (a list is a
                scroll box and clips its children; this pair reaches ~6px). The old keyboard look - a grey row inside
                a 2px pine ring - is gone; pointing and arrowing now look the same.
     CHOSEN     (.on / .sel) pine tint, pine text, bold. Pointed at, it still lifts but keeps its tint.
     PRESS      lands (0, contact shadow only).        DISABLED  never answers.
   The raised row gets z-index so the row below cannot paint over the shadow it grew.

   FAMILIES (each keeps its size, text, ticks and icons - only the row's states change):
     .selpop .sel-opt        every wizard / record dropdown (#clWiz #clMbr #enrollWiz #cnWiz + sheets #pgWiz #schWiz
                             #latePts #mhDetail #hhDetail #ecsWiz ...). Their own rules carry the window id, so these do too.
     .mh-ssp .mh-ssp-opt     the app's list for every native <select> (selectsearch.js) - its panel also takes the
                             record dropdown's glass.
     .f-menu .f-mitem        Housing Subsidy dropdowns.        .mhpick-row   the tick-box pickers.
     .pp-menu .pp-opt        the event guest picker.            .combo .menu .item   country / filter lists.
   NOT HERE: the first-login screen's .mhsel-opt (it is drawn on its own dark card with its own theme tokens), the
   Mint dropdown (already this), the menus (mh-menus.css) and the Teams picker rows (mh-teams.css) - already this.
   ===================================================================================================================== */

/* ---------------------------------------------------------------- ROW: base (the transition lives here) */
:is(#clWiz,#clMbr,#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete,#pgWiz,#schWiz,#latePts,#mhDetail,#hhDetail,#ecsWiz,#view-settings,#cnPop) .selpop.selpop .sel-opt.sel-opt,
.mh-app .selpop.selpop .sel-opt.sel-opt,
.mh-ssp.mh-ssp .mh-ssp-opt.mh-ssp-opt,
.f-menu.f-menu .f-mitem.f-mitem,
.mh-app .mhpick-row.mhpick-row,
.mh-app .pp-menu .pp-opt.pp-opt,
.combo .menu .item.item{
  position:relative;
  transition:transform .18s ease,box-shadow .18s ease,background .15s ease,color .15s ease;
}

/* ---------------------------------------------------------------- ROW: pointed at / keyboard row - it comes up */
:is(#clWiz,#clMbr,#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete,#pgWiz,#schWiz,#latePts,#mhDetail,#hhDetail,#ecsWiz,#view-settings,#cnPop) .selpop.selpop .sel-opt.sel-opt:is(:hover,.hi,.cur),
.mh-app .selpop.selpop .sel-opt.sel-opt:is(:hover,.hi,.cur),
.mh-ssp.mh-ssp .mh-ssp-opt.mh-ssp-opt:is(:hover,.cur):not(.off),
.f-menu.f-menu .f-mitem.f-mitem:hover,
.mh-app .mhpick-row.mhpick-row:hover:not(:disabled),
.mh-app .pp-menu .pp-opt.pp-opt:hover,
.combo .menu .item.item:is(:hover,.active){
  z-index:1;
  background:rgba(var(--tg-rgb,255,255,255),.95);
  color:#1C2733;
  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);
}

/* ---------------------------------------------------------------- ROW: chosen - the pine tint (declared after) */
:is(#clWiz,#clMbr,#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete,#pgWiz,#schWiz,#latePts,#mhDetail,#hhDetail,#ecsWiz,#view-settings,#cnPop) .selpop.selpop .sel-opt.sel-opt.on,
.mh-app .selpop.selpop .sel-opt.sel-opt.on,
.mh-ssp.mh-ssp .mh-ssp-opt.mh-ssp-opt.on,
.f-menu.f-menu .f-mitem.f-mitem.on,
.mh-app .mhpick-row.mhpick-row.on,
.combo .menu .item.item.sel{
  background:rgba(47,107,87,.14);color:#2F6B57;font-weight:700;box-shadow:none;
}
/* chosen AND pointed at / keyboard row: still lifts, keeps its tint */
:is(#clWiz,#clMbr,#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete,#pgWiz,#schWiz,#latePts,#mhDetail,#hhDetail,#ecsWiz,#view-settings,#cnPop) .selpop.selpop .sel-opt.sel-opt.on:is(:hover,.hi,.cur),
.mh-app .selpop.selpop .sel-opt.sel-opt.on:is(:hover,.hi,.cur),
.mh-ssp.mh-ssp .mh-ssp-opt.mh-ssp-opt.on:is(:hover,.cur),
.f-menu.f-menu .f-mitem.f-mitem.on:hover,
.mh-app .mhpick-row.mhpick-row.on:hover,
.combo .menu .item.item.sel:is(:hover,.active){
  background:rgba(47,107,87,.18);color:#2F6B57;
  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,.5);
}

/* ONE RAISED ROW AT A TIME: while the pointer is over the list, the keyboard row stands down (measured: the arrowed
   row and the pointed-at row were both up at once). A chosen keyboard row keeps its tint, only the lift goes. */
:is(#clWiz,#clMbr,#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete,#pgWiz,#schWiz,#latePts,#mhDetail,#hhDetail,#ecsWiz,#view-settings,#cnPop) .selpop.selpop:has(.sel-opt:hover) .sel-opt.sel-opt:is(.hi,.cur):not(:hover),
.mh-app .selpop.selpop:has(.sel-opt:hover) .sel-opt.sel-opt:is(.hi,.cur):not(:hover),
.mh-ssp.mh-ssp:has(.mh-ssp-opt:hover) .mh-ssp-opt.mh-ssp-opt.cur:not(:hover),
.combo .menu:has(.item:hover) .item.item.active:not(:hover){
  z-index:auto;background:none;color:inherit;transform:none;box-shadow:none;
}
:is(#clWiz,#clMbr,#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete,#pgWiz,#schWiz,#latePts,#mhDetail,#hhDetail,#ecsWiz,#view-settings,#cnPop) .selpop.selpop:has(.sel-opt:hover) .sel-opt.sel-opt.on:is(.hi,.cur):not(:hover),
.mh-app .selpop.selpop:has(.sel-opt:hover) .sel-opt.sel-opt.on:is(.hi,.cur):not(:hover),
.mh-ssp.mh-ssp:has(.mh-ssp-opt:hover) .mh-ssp-opt.mh-ssp-opt.on.cur:not(:hover),
.combo .menu:has(.item:hover) .item.item.sel.active:not(:hover){
  background:rgba(47,107,87,.14);color:#2F6B57;
}
body.dark :is(#clWiz,#clMbr,#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete,#pgWiz,#schWiz,#latePts,#mhDetail,#hhDetail,#ecsWiz,#view-settings,#cnPop) .selpop.selpop:has(.sel-opt:hover) .sel-opt.sel-opt.on:is(.hi,.cur):not(:hover),
body.dark .mh-app .selpop.selpop:has(.sel-opt:hover) .sel-opt.sel-opt.on:is(.hi,.cur):not(:hover),
.mh-ssp.mh-ssp.dark:has(.mh-ssp-opt:hover) .mh-ssp-opt.mh-ssp-opt.on.cur:not(:hover),
body.dark .combo .menu:has(.item:hover) .item.item.sel.active:not(:hover){
  background:rgba(143,187,165,.18);color:#B7D6C8;
}

/* ---------------------------------------------------------------- ROW: press lands */
:is(#clWiz,#clMbr,#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete,#pgWiz,#schWiz,#latePts,#mhDetail,#hhDetail,#ecsWiz,#view-settings,#cnPop) .selpop.selpop .sel-opt.sel-opt:active,
.mh-app .selpop.selpop .sel-opt.sel-opt:active,
.mh-ssp.mh-ssp .mh-ssp-opt.mh-ssp-opt:active,
.f-menu.f-menu .f-mitem.f-mitem:active,
.mh-app .mhpick-row.mhpick-row:active,
.mh-app .pp-menu .pp-opt.pp-opt:active,
.combo .menu .item.item:active{
  transform:translateY(0);box-shadow:0 1px 3px -2px rgba(30,55,48,.22),inset 0 0 0 1px rgba(255,255,255,.7);
}
/* disabled rows never answer */
.mh-ssp.mh-ssp .mh-ssp-opt.mh-ssp-opt.off:hover,
.mh-app .mhpick-row.mhpick-row:disabled:hover{transform:none;box-shadow:none;background:none}

/* ---------------------------------------------------------------- ROOM FOR THE LIFT inside the scrolling lists */
.mh-ssp.mh-ssp .mh-ssp-list{padding:4px 4px 6px;margin:-4px -4px -6px}
.combo .menu .clist{padding:4px 4px 6px}

/* ---------------------------------------------------------------- THE NATIVE-SELECT LIST = THE RECORD DROPDOWN'S GLASS */
body:not(.dark) .mh-ssp.mh-ssp:not(.dark){
  border-radius:16px;padding:8px;
  background:rgba(var(--tg-rgb,255,255,255),.94);
  -webkit-backdrop-filter:blur(24px) saturate(150%);backdrop-filter:blur(24px) saturate(150%);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 22px 54px -26px rgba(30,55,48,.5),0 4px 10px -6px rgba(30,55,48,.2);
}
.mh-ssp.mh-ssp .mh-ssp-opt.mh-ssp-opt{border-radius:11px}

/* ---------------------------------------------------------------- DARK */
body.dark :is(#clWiz,#clMbr,#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete,#pgWiz,#schWiz,#latePts,#mhDetail,#hhDetail,#ecsWiz,#view-settings,#cnPop) .selpop.selpop .sel-opt.sel-opt:is(:hover,.hi,.cur),
body.dark .mh-app .selpop.selpop .sel-opt.sel-opt:is(:hover,.hi,.cur),
.mh-ssp.mh-ssp.dark .mh-ssp-opt.mh-ssp-opt:is(:hover,.cur):not(.off),
body.dark .f-menu.f-menu .f-mitem.f-mitem:hover,
body.dark .mh-app .mhpick-row.mhpick-row:hover:not(:disabled),
body.dark .mh-app .pp-menu .pp-opt.pp-opt:hover,
body.dark .combo .menu .item.item:is(:hover,.active){
  background:rgba(var(--tg-rgb,255,255,255),calc(.12*var(--tg-k,1)));color:#EAF0F4;
  box-shadow:0 2px 6px -3px rgba(0,0,0,.5),0 6px 12px -6px rgba(0,0,0,.6),inset 0 0 0 1px rgba(180,210,235,.16);
}
body.dark :is(#clWiz,#clMbr,#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete,#pgWiz,#schWiz,#latePts,#mhDetail,#hhDetail,#ecsWiz,#view-settings,#cnPop) .selpop.selpop .sel-opt.sel-opt.on,
body.dark .mh-app .selpop.selpop .sel-opt.sel-opt.on,
.mh-ssp.mh-ssp.dark .mh-ssp-opt.mh-ssp-opt.on,
body.dark .f-menu.f-menu .f-mitem.f-mitem.on,
body.dark .mh-app .mhpick-row.mhpick-row.on,
body.dark .combo .menu .item.item.sel{
  background:rgba(143,187,165,.18);color:#B7D6C8;box-shadow:none;
}
body.dark :is(#clWiz,#clMbr,#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete,#pgWiz,#schWiz,#latePts,#mhDetail,#hhDetail,#ecsWiz,#view-settings,#cnPop) .selpop.selpop .sel-opt.sel-opt.on:is(:hover,.hi,.cur),
body.dark .mh-app .selpop.selpop .sel-opt.sel-opt.on:is(:hover,.hi,.cur),
.mh-ssp.mh-ssp.dark .mh-ssp-opt.mh-ssp-opt.on:is(:hover,.cur),
body.dark .f-menu.f-menu .f-mitem.f-mitem.on:hover,
body.dark .mh-app .mhpick-row.mhpick-row.on:hover,
body.dark .combo .menu .item.item.sel:is(:hover,.active){
  background:rgba(143,187,165,.24);color:#CFE6DB;
  box-shadow:0 2px 6px -3px rgba(0,0,0,.5),0 6px 12px -6px rgba(0,0,0,.6),inset 0 0 0 1px rgba(180,210,235,.16);
}

@media (prefers-reduced-motion: reduce){
  .selpop .sel-opt, .mh-ssp-opt, .f-mitem, .mhpick-row, .pp-opt, .combo .menu .item{transform:none !important}
}