/* CRP V1.6.18.3: neutral options until actual pointer hover / keyboard focus.
   Loaded LAST to override the global dark-theme button gradient safely.
   This is presentation only; do not change the underlying selection state. */

/* Surfaces: enhanced native selects, multi-user pickers and context menus. */
html:not([data-theme="dark"]){
  --crp-option-surface:#f2f4f7;
  --crp-option-text:#24364d;
  --crp-option-subtext:#52637a;
  --crp-option-hover:#1b58ad;
  --crp-option-hover-text:#fff;
}
html[data-theme="dark"]{
  --crp-option-surface:#161616;
  --crp-option-text:#f1f5fb;
  --crp-option-subtext:#c3cad3;
  --crp-option-hover:#2264bb;
  --crp-option-hover-text:#fff;
}

/* Panels are opaque enough to remain legible above the geometric grid. */
html .search-select-options,
html .picker-panel,
html .floating-picker-panel,
html .context-menu{
  background:var(--crp-option-surface)!important;
  background-image:none!important;
  color:var(--crp-option-text)!important;
}

/* ALL searchable native-select replacements, not just the Task status dropdown.
   In particular: Departments -> Administrator; Users -> User;
   Profiles, Projects, task statuses, billing and permissions. */
html .search-select-options button.search-select-option,
html .search-select-options button.search-select-option.selected{
  background:transparent!important;
  background-image:none!important;
  color:var(--crp-option-text)!important;
  border-color:transparent!important;
  box-shadow:none!important;
  filter:none!important;
  text-shadow:none!important;
}
html .search-select-options button.search-select-option small,
html .search-select-options button.search-select-option .designation-label{
  color:var(--crp-option-subtext)!important;
}
html .search-select-options button.search-select-option:is(:hover,:focus-visible),
html .search-select-options button.search-select-option.selected:is(:hover,:focus-visible){
  background:var(--crp-option-hover)!important;
  background-image:none!important;
  color:var(--crp-option-hover-text)!important;
  border-color:transparent!important;
  box-shadow:none!important;
  filter:none!important;
}
html .search-select-options button.search-select-option:is(:hover,:focus-visible) :is(small,.designation-label),
html .search-select-options button.search-select-option.selected:is(:hover,:focus-visible) :is(small,.designation-label){
  color:#eaf2ff!important;
}
html .search-select-options button.search-select-option:focus-visible{
  outline:2px solid #8cbcff!important;
  outline-offset:-2px!important;
}
/* Selection remains detectable through the native input text/value and can be
   identified in the expanded list by an unobtrusive checkmark, NOT blue fill. */
html .search-select-options button.search-select-option.selected::after{
  content:"\2713";
  float:right;
  padding-left:10px;
  font-size:12px;
  color:inherit;
}

/* Multiple-person/group checkboxes: checked is not hover. This also covers the
   dynamically repositioned .floating-picker-panel and chat recipient picker. */
html .multi-picker .picker-options .person-option,
html .multi-picker .picker-options .person-option:has(input:checked),
html .floating-picker-panel .picker-options .person-option,
html .floating-picker-panel .picker-options .person-option:has(input:checked){
  background:transparent!important;
  background-image:none!important;
  color:var(--crp-option-text)!important;
  border-color:transparent!important;
  box-shadow:none!important;
}
html .multi-picker .picker-options .person-option strong,
html .floating-picker-panel .picker-options .person-option strong{
  color:var(--crp-option-text)!important;
}
html .multi-picker .picker-options .person-option small,
html .floating-picker-panel .picker-options .person-option small{
  color:var(--crp-option-subtext)!important;
}
html .multi-picker .picker-options .person-option:is(:hover,:focus-within),
html .floating-picker-panel .picker-options .person-option:is(:hover,:focus-within),
html .multi-picker .picker-options .person-option:has(input:checked):is(:hover,:focus-within),
html .floating-picker-panel .picker-options .person-option:has(input:checked):is(:hover,:focus-within){
  background:var(--crp-option-hover)!important;
  background-image:none!important;
  color:#fff!important;
}
html .multi-picker .picker-options .person-option:is(:hover,:focus-within) :is(strong,small),
html .floating-picker-panel .picker-options .person-option:is(:hover,:focus-within) :is(strong,small){
  color:#fff!important;
}
html .multi-picker .picker-options .person-option:focus-within,
html .floating-picker-panel .picker-options .person-option:focus-within{
  outline:2px solid #8cbcff!important;
  outline-offset:-2px!important;
}

/* Right-click/context lists are pop-up menus too; never blue until hovered. */
html .context-menu button{
  background:transparent!important;
  background-image:none!important;
  color:var(--crp-option-text)!important;
  border-color:transparent!important;
  box-shadow:none!important;
}
html .context-menu button:is(:hover,:focus-visible){
  background:var(--crp-option-hover)!important;
  background-image:none!important;
  color:#fff!important;
}
html .context-menu button:focus-visible{
  outline:2px solid #8cbcff!important;
  outline-offset:-2px!important;
}

/* Native-select fallback for pages loaded without JS enhancement. The system
   controls the native hovered option on some platforms; keep its resting theme. */
html select option{background:var(--crp-option-surface);color:var(--crp-option-text)}
/* Dark mode's global :is(button,.button.primary,...) gradient has higher
   specificity than ordinary option rules: explicitly beat it for menus. */
html[data-theme="dark"] .search-select-options button.search-select-option,
html[data-theme="dark"] .search-select-options button.search-select-option.selected,
html[data-theme="dark"] .context-menu button{
  background:transparent!important;
  background-image:none!important;
  color:var(--crp-option-text)!important;
}
html[data-theme="dark"] .search-select-options button.search-select-option:is(:hover,:focus-visible),
html[data-theme="dark"] .search-select-options button.search-select-option.selected:is(:hover,:focus-visible),
html[data-theme="dark"] .context-menu button:is(:hover,:focus-visible){
  background:var(--crp-option-hover)!important;
  background-image:none!important;
  color:#fff!important;
}
/* Task branch is an isolated stacking context; lift it only while its selector
   is open so later form fields cannot cover a visible fixed-position menu. */
html .task-branches:has(.search-select-options:not([hidden])){
  z-index:30!important;
}
/* Layout-stability's dark subtitle rule is intentionally strong; the active
   hover row must still use white text for legibility over blue. */
html[data-theme="dark"] .signed-in main .multi-picker .picker-options .person-option:is(:hover,:focus-within) :is(strong,small),
html[data-theme="dark"] .signed-in main .floating-picker-panel .picker-options .person-option:is(:hover,:focus-within) :is(strong,small){color:#fff!important;}