/* THRS Employees V14.5 — Premium Select System
 * Dedicated open menus, keyboard focus and native React value bridge.
 * The original select remains in DOM for existing business logic.
 */
html[data-theme="light"] {
 --es-bg:#fff;
 --es-raised:#f5f8fc;
 --es-soft:#edf3fa;
 --es-ink:#173451;
 --es-muted:#526b84;
 --es-line:#c6d6e6;
 --es-gold:#996923;
 --es-gold-strong:#86601f;
 --es-ring:0 0 0 3px rgba(197,149,67,.22);
 --es-shadow:0 21px 55px rgba(9,35,66,.19),0 4px 12px rgba(9,35,66,.06);
}
html[data-theme="dark"] {
 --es-bg:#112d47;
 --es-raised:#193b58;
 --es-soft:#264866;
 --es-ink:#f0f7ff;
 --es-muted:#c7d7e9;
 --es-line:#557996;
 --es-gold:#f1d08c;
 --es-gold-strong:#f1d08c;
 --es-ring:0 0 0 3px rgba(239,195,116,.26);
 --es-shadow:0 24px 60px rgba(0,5,15,.6),inset 0 1px 0 rgba(255,255,255,.06);
}
html[data-theme] :is(.thrs-page-employees,.employee-edit-modal-card) .thrs-premium-select-native {
 position:absolute !important;
 width:1px !important;height:1px !important;min-height:0 !important;
 padding:0 !important;margin:0 !important;
 clip-path:inset(50%) !important;
 opacity:0 !important;
 overflow:hidden !important;
 pointer-events:none !important;
}
html[data-theme] :is(.thrs-page-employees,.employee-edit-modal-card) .thrs-premium-select-trigger {
 --select-indicator:#d5ae68;
 position:relative;isolation:isolate;
 display:flex !important;
 align-items:center !important;
 justify-content:space-between !important;
 min-width:0 !important;width:100% !important;
 min-height:49px !important;
 gap:12px !important;
 padding:11px 13px !important;
 color:var(--es-ink) !important;
 background:linear-gradient(140deg,var(--es-bg),var(--es-raised)) !important;
 border:1px solid var(--es-line) !important;
 border-radius:13px !important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 4px 12px rgba(8,33,59,.045) !important;
 text-align:start !important;
 cursor:pointer !important;
 font:inherit !important;
 font-size:13px !important;font-weight:740 !important;
 line-height:1.5 !important;
 transition:border-color .18s ease,background .18s ease,box-shadow .18s ease,transform .18s ease !important;
}
html[data-theme] :is(.thrs-page-employees,.employee-edit-modal-card) .thrs-premium-select-trigger:hover {
 border-color:var(--es-gold) !important;
 box-shadow:0 6px 19px rgba(8,38,72,.1) !important;
}
html[data-theme] :is(.thrs-page-employees,.employee-edit-modal-card) .thrs-premium-select-trigger:is(:focus-visible,[aria-expanded="true"]) {
 outline:none !important;
 border-color:var(--es-gold) !important;
 box-shadow:var(--es-ring) !important;
}
html[data-theme] :is(.thrs-page-employees,.employee-edit-modal-card) .thrs-premium-select-trigger[disabled] {
 opacity:.58 !important;cursor:not-allowed !important;
}
html[data-theme] .thrs-premium-select-trigger__value {
 display:block !important;min-width:0 !important;
 overflow:hidden !important;text-overflow:ellipsis !important;
 white-space:nowrap !important;
 color:var(--es-ink) !important;
 font-weight:735 !important;
}
html[data-theme] .thrs-premium-select-trigger__chevron {
 flex:0 0 27px !important;
 width:27px !important;height:27px !important;
 display:grid !important;place-items:center !important;
 background:color-mix(in srgb,var(--es-gold) 13%,var(--es-raised)) !important;
 border:1px solid color-mix(in srgb,var(--es-gold) 36%,var(--es-line)) !important;
 border-radius:9px !important;
 color:var(--es-gold-strong) !important;
 transition:transform .18s ease;
}
html[data-theme] .thrs-premium-select-trigger__chevron::after {
 content:"" !important;
 display:block !important;
 width:7px;height:7px;
 border-inline-end:2px solid currentColor !important;
 border-block-end:2px solid currentColor !important;
 transform:translateY(-2px) rotate(45deg) !important;
}
html[data-theme] .thrs-premium-select-trigger[aria-expanded="true"] .thrs-premium-select-trigger__chevron {
 transform:rotate(180deg) !important;
}
html[data-theme] .thrs-page-employees .thrs-filter-command-bar .thrs-premium-select-trigger {
 min-height:48px !important;
 padding:10px 12px !important;
}
html[data-theme] .employee-edit-modal-card .thrs-premium-select-trigger {
 min-height:46px !important;
}
/* Portal popover above the entire THRS shell and EmployeeForm modal.
   Fixed positioning is computed live to avoid scroll and clipping. */
html[data-theme] .thrs-premium-select-popup {
 position:fixed !important;
 z-index:6300 !important;
 display:flex !important;flex-direction:column !important;
 min-width:170px !important;
 max-width:calc(100vw - 24px) !important;
 max-height:min(450px,calc(100dvh - 24px)) !important;
 padding:7px !important;
 overflow:hidden !important;
 border-radius:16px !important;
 border:1px solid var(--es-line) !important;
 background:linear-gradient(155deg,var(--es-bg),var(--es-raised)) !important;
 color:var(--es-ink) !important;
 box-shadow:var(--es-shadow) !important;
 font-family:inherit !important;
 direction:inherit !important;
 isolation:isolate;
 animation:thrs-select-appear .15s cubic-bezier(.2,.72,.25,1) both;
}
@keyframes thrs-select-appear {
 from{opacity:0;transform:translateY(-5px) scale(.988)}
 to{opacity:1;transform:translateY(0) scale(1)}
}
html[data-theme] .thrs-premium-select-popup__head {
 flex:0 0 auto;
 display:flex;align-items:center;justify-content:space-between;gap:10px;
 padding:11px 11px 9px !important;
 margin-bottom:5px;
 border-bottom:1px solid var(--es-line);
}
html[data-theme] .thrs-premium-select-popup__head strong {
 font-size:12px !important;
 letter-spacing:.025em !important;
 color:var(--es-ink) !important;
 font-weight:840 !important;
}
html[data-theme] .thrs-premium-select-popup__head span {
 flex:0 0 auto;
 font-size:10px !important;
 font-weight:750 !important;
 color:var(--es-gold-strong) !important;
 background:color-mix(in srgb,var(--es-gold) 11%,var(--es-bg));
 border:1px solid color-mix(in srgb,var(--es-gold) 32%,var(--es-line));
 padding:4px 8px;border-radius:99px;
}
html[data-theme] .thrs-premium-select-search {
 flex:0 0 auto;
 min-height:41px !important;
 padding:8px 12px !important;
 margin:3px 5px 7px !important;
 border:1px solid var(--es-line) !important;
 border-radius:10px !important;
 background:var(--es-raised) !important;
 color:var(--es-ink) !important;
 -webkit-text-fill-color:var(--es-ink) !important;
 font:inherit !important;font-size:12px !important;
 outline:none !important;
}
html[data-theme] .thrs-premium-select-search::placeholder {
 color:var(--es-muted) !important;
 -webkit-text-fill-color:var(--es-muted) !important;
}
html[data-theme] .thrs-premium-select-search:focus {
 border-color:var(--es-gold) !important;
 box-shadow:var(--es-ring) !important;
}
html[data-theme] .thrs-premium-select-popup__list {
 display:flex !important;flex-direction:column !important;
 gap:3px !important;
 padding:3px !important;
 overflow-y:auto !important;
 overscroll-behavior:contain;
 scrollbar-width:thin;
 scrollbar-color:color-mix(in srgb,var(--es-gold) 50%,var(--es-line)) var(--es-bg);
}
html[data-theme] .thrs-premium-select-option {
 display:flex !important;
 align-items:center !important;
 justify-content:space-between !important;
 gap:12px !important;
 width:100% !important;
 min-width:0 !important;
 min-height:43px !important;
 padding:10px 11px !important;
 border:1px solid transparent !important;
 border-radius:10px !important;
 outline:none !important;
 text-align:start !important;
 background:transparent !important;
 color:var(--es-ink) !important;
 font:inherit !important;
 font-size:12.5px !important;
 font-weight:660 !important;
 cursor:pointer !important;
 transition:background .13s ease,border-color .13s ease !important;
}
html[data-theme] .thrs-premium-select-option__label {
 display:block;min-width:0 !important;
 white-space:normal !important;
 line-height:1.45 !important;
 overflow-wrap:anywhere !important;
 color:inherit !important;
}
html[data-theme] .thrs-premium-select-option:is(:hover,.is-highlighted,:focus-visible) {
 background:var(--es-soft) !important;
 border-color:var(--es-line) !important;
}
html[data-theme] .thrs-premium-select-option[aria-selected="true"] {
 background:color-mix(in srgb,var(--es-gold) 13%,var(--es-raised)) !important;
 border-color:color-mix(in srgb,var(--es-gold) 45%,var(--es-line)) !important;
 font-weight:840 !important;
}
html[data-theme] .thrs-premium-select-option[aria-selected="true"]::after {
 content:"✓" !important;
 width:24px !important;height:24px !important;
 display:grid !important;place-items:center !important;
 flex:0 0 24px !important;
 color:#102a42 !important;
 background:linear-gradient(130deg,#f8dfab,#d6a751) !important;
 border-radius:7px !important;
 font-size:13px !important;
 font-weight:900 !important;
}
html[data-theme] .thrs-premium-select-option[aria-disabled="true"] {
 opacity:.48 !important;
 cursor:not-allowed !important;
}
html[data-theme] .thrs-premium-select-no-results {
 padding:19px 12px !important;
 text-align:center;
 font-size:12.5px !important;
 color:var(--es-muted) !important;
}
/* When very narrow, make the opened menu a neat bottom sheet with safe area. */
@media(max-width:600px) {
 html[data-theme] .thrs-premium-select-popup {
  inset-inline:12px !important;
  inset-block-end:max(12px,env(safe-area-inset-bottom,12px)) !important;
  inset-block-start:auto !important;
  width:calc(100vw - 24px) !important;
  max-height:min(63dvh,470px) !important;
  padding-bottom:max(8px,env(safe-area-inset-bottom,8px)) !important;
  border-radius:19px !important;
  animation:thrs-select-sheet .18s cubic-bezier(.2,.8,.2,1) both;
 }
 @keyframes thrs-select-sheet {
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
 }
 html[data-theme] .thrs-premium-select-overlay {
  position:fixed;inset:0 !important;z-index:6299 !important;
  background:rgba(3,16,31,.47) !important;
  backdrop-filter:blur(2px) !important;
  -webkit-backdrop-filter:blur(2px) !important;
 }
 html[data-theme] .thrs-premium-select-option {min-height:47px !important;}
}
@media(prefers-reduced-motion:reduce) {
 html[data-theme] :is(.thrs-premium-select-popup,.thrs-premium-select-trigger,
 .thrs-premium-select-option,.thrs-premium-select-trigger__chevron) {
  animation:none !important;transition:none !important;
 }
}

/* Hide the original select instantly; legacy form transitions must never make
   a duplicate native control briefly visible during enhancement. */
html[data-theme] :is(.thrs-page-employees,.employee-edit-modal-card) .thrs-premium-select-native {
 transition:none !important;
 animation:none !important;
 opacity:0 !important;
 visibility:hidden !important;
}
/* The old filter rule forces selects to width:100%!important and, once they
   are removed from flow, their absolute boxes can enlarge page scrollWidth.
   Hide only the enhanced native control, never its React data/DOM node.
   React still owns select.value and receives dispatched native change events. */
html[data-theme] .thrs-page-employees .thrs-filter-command-bar select.form-select.thrs-premium-select-native,
html[data-theme] .employee-edit-modal-card .employee-form-grid select.form-select.thrs-premium-select-native {
 display:none !important;
 width:0 !important;min-width:0 !important;max-width:0 !important;
 height:0 !important;min-height:0 !important;
}