/* ============================================================
   fp-select - LIGHT skin, for every non-admin page that is not
   dark. Companion to fp-select-night.css (body.dpx-night).
   ------------------------------------------------------------
   Why a third file: explore.html already carries a light skin
   inside explore-sdx.css scoped `body.fp-ed .sdx`. That scope
   reaches only explore's own shell, and moving it would mean
   editing a live page nobody asked me to touch. This sheet is
   scoped `body.fp-ed` and is therefore LESS specific, so on
   explore the existing rules still win and that page is
   byte-for-byte unchanged.

   Reason the component exists at all: `option { background }` is
   ignored by Chrome and Safari - the open list is OS chrome and
   cannot be themed. The only fix is to stop using it.
   ============================================================ */

body.fp-ed:not(.dpx-night) select.fp-native-hidden { display: none !important; }

body.fp-ed:not(.dpx-night) .fp-fdrop-wrap { position: relative; display: inline-flex; max-width: 100%; }

body.fp-ed:not(.dpx-night) .fp-fdrop {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 44px; padding: 0 12px 0 14px; max-width: 100%;
  border: 1px solid var(--line, #e3e6ee); border-radius: 12px;
  background: #fff; color: var(--ink, #10151f);
  font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 600;
  cursor: pointer; white-space: nowrap; text-align: left;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
body.fp-ed:not(.dpx-night) .fp-fdrop-lb { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.fp-ed:not(.dpx-night) .fp-fdrop:hover { border-color: #c3cbdb; }
body.fp-ed:not(.dpx-night) .fp-fdrop:focus-visible,
body.fp-ed:not(.dpx-night) .fp-fdrop.is-open {
  outline: none; border-color: #2456e6; box-shadow: 0 0 0 3.5px rgba(36, 86, 230, .13);
}
/* an applied filter must not look like an idle one */
body.fp-ed:not(.dpx-night) .fp-fdrop.is-set {
  background: rgba(36, 86, 230, .07); border-color: rgba(36, 86, 230, .34); color: #1c44c9; font-weight: 700;
}
body.fp-ed:not(.dpx-night) .fp-fchev { width: 15px; height: 15px; flex: none; color: #6b7487; transition: transform .2s ease, color .15s ease; }
body.fp-ed:not(.dpx-night) .fp-fdrop.is-open .fp-fchev { transform: rotate(180deg); }
body.fp-ed:not(.dpx-night) .fp-fdrop.is-open .fp-fchev,
body.fp-ed:not(.dpx-night) .fp-fdrop.is-set .fp-fchev { color: #2456e6; }

@keyframes fplPanelIn { from { opacity: 0; transform: translateY(-6px) scale(.985); } to { opacity: 1; transform: none; } }
body.fp-ed:not(.dpx-night) .fp-fpanel {
  display: none; position: absolute; top: calc(100% + 8px); left: 0; z-index: 70;
  min-width: 100%; width: max-content; max-width: 300px; max-height: 320px; overflow-y: auto;
  padding: 6px; box-sizing: border-box;
  background: #fff; border: 1px solid var(--line, #e3e6ee); border-radius: 14px;
  box-shadow: 0 24px 50px -18px rgba(16, 24, 40, .3), 0 4px 14px -8px rgba(16, 24, 40, .14);
  transform-origin: top left; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
body.fp-ed:not(.dpx-night) .fp-fpanel.is-right { left: auto; right: 0; transform-origin: top right; }
body.fp-ed:not(.dpx-night) .fp-fpanel.is-up { top: auto; bottom: calc(100% + 8px); transform-origin: bottom left; }
body.fp-ed:not(.dpx-night) .fp-fpanel.is-up.is-right { transform-origin: bottom right; }
body.fp-ed:not(.dpx-night) .fp-fpanel.is-open { display: block; animation: fplPanelIn .16s cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion: reduce) { body.fp-ed:not(.dpx-night) .fp-fpanel.is-open { animation: none; } }

body.fp-ed:not(.dpx-night) .fp-fopt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; box-sizing: border-box; min-height: 40px; padding: 9px 11px;
  border: 0; border-radius: 9px; background: transparent;
  color: #333c4d; font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 500;
  text-align: left; cursor: pointer; transition: background-color .12s ease, color .12s ease;
}
body.fp-ed:not(.dpx-night) .fp-fopt > span { display: inline-flex; align-items: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* .is-cursor is the KEYBOARD position and must be visible without a mouse hover */
body.fp-ed:not(.dpx-night) .fp-fopt:hover,
body.fp-ed:not(.dpx-night) .fp-fopt.is-cursor { background: #f2f5fa; color: var(--ink, #10151f); }
body.fp-ed:not(.dpx-night) .fp-fopt.is-cursor { box-shadow: inset 0 0 0 1px rgba(36, 86, 230, .35); }
body.fp-ed:not(.dpx-night) .fp-fopt.is-active { background: rgba(36, 86, 230, .1); color: #1c44c9; font-weight: 700; }
body.fp-ed:not(.dpx-night) .fp-fcheck { width: 16px; height: 16px; flex: none; color: #2456e6; }

body.fp-ed:not(.dpx-night) .fp-fpanel { scrollbar-width: thin; scrollbar-color: #d5dae6 transparent; }
body.fp-ed:not(.dpx-night) .fp-fpanel::-webkit-scrollbar { width: 9px; }
body.fp-ed:not(.dpx-night) .fp-fpanel::-webkit-scrollbar-track { background: transparent; }
body.fp-ed:not(.dpx-night) .fp-fpanel::-webkit-scrollbar-thumb { background: #d5dae6; border-radius: 8px; border: 2.5px solid #fff; }
body.fp-ed:not(.dpx-night) .fp-fpanel::-webkit-scrollbar-thumb:hover { background: #c0c7d6; }

/* A select that sits in a form column rather than a filter bar should fill its column, the way
   the native control it replaced did. */
body.fp-ed:not(.dpx-night) :is(.ed-field, .ed-frow, label) > .fp-fdrop-wrap,
body.fp-ed:not(.dpx-night) .fp-fdrop-wrap.is-block { display: flex; width: 100%; }
body.fp-ed:not(.dpx-night) :is(.ed-field, .ed-frow, label) > .fp-fdrop-wrap .fp-fdrop,
body.fp-ed:not(.dpx-night) .fp-fdrop-wrap.is-block .fp-fdrop { width: 100%; max-width: none; }
body.fp-ed:not(.dpx-night) :is(.ed-field, .ed-frow, label) > .fp-fdrop-wrap .fp-fpanel,
body.fp-ed:not(.dpx-night) .fp-fdrop-wrap.is-block .fp-fpanel { max-width: none; }

@media (max-width: 760px) {
  body.fp-ed:not(.dpx-night) .fp-fdrop-wrap { display: flex; }
  body.fp-ed:not(.dpx-night) .fp-fdrop { width: 100%; max-width: none; }
  body.fp-ed:not(.dpx-night) .fp-fpanel { max-width: none; width: 100%; }
}


/* PINNED mode - fp-select adds .is-pinned and inline left/top when the trigger sits inside an
   ancestor that clips (an admin modal card is overflow:hidden, its inner overflow:auto). An
   absolutely positioned panel is cut off there no matter the z-index; only taking it out of flow
   escapes. The component supplies the coordinates, so this rule must NOT set left/top itself. */
body.fp-ed:not(.dpx-night) .fp-fpanel.is-pinned {
  position: fixed;
  right: auto;
  bottom: auto;
  max-height: min(300px, calc(100vh - 24px));
  z-index: 1000;
}