/*!
 * Nabtech Domain Nexus
 *
 * Author:    Nabtech
 * Company:   Nabtech Digitalnet Limited
 * Copyright: (c) 2026 Nabtech Digitalnet Limited. All rights reserved.
 *
 * This software is licensed, not sold. Using it requires a valid licence
 * from Nabtech Digitalnet Limited. Copying, modifying, redistributing,
 * reselling or reverse engineering it is not permitted except as that
 * licence allows.
 */
/* The one dropdown.
 *
 * Its own stylesheet, and a small one, because it is the only thing this module
 * loads onto pages the host application renders. Loading a whole design system
 * there would restyle somebody else's page, which is not ours to do.
 *
 * Everything reads a custom property with a fallback, so it inherits this
 * product's palette inside our own surfaces and the operator's accent colour
 * everywhere, while still looking right on a bare host theme that defines
 * neither.
 */
.nrd-ps {
  /* Solid colours, not a chain of other custom properties.
   *
   * A background written as var(--a, #fff) where --a is itself var(--b) and
   * --b never resolves is invalid at computed-value time: the declaration is
   * dropped and the box renders TRANSPARENT, with the page showing through the
   * list. A stylesheet that loads onto pages this module does not control has
   * to be right on its own, so the only thing borrowed from outside is the
   * accent, which has a real colour behind it. */
  --nrd-ps-ink: #2b3c55;
  --nrd-ps-muted: #6c7e99;
  --nrd-ps-line: #d4dced;
  --nrd-ps-surface: #ffffff;
  --nrd-ps-soft: #f6f8fc;
  --nrd-ps-accent: var(--nc-accent, #6254d9);
  position: relative;
  display: block;
  min-width: 0;
}

/* The original select keeps its name and still submits; it is moved out of
 * sight rather than disabled, so a form works even if the script never runs. */
.nrd-ps-native {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  margin: -1px !important; padding: 0 !important;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0 !important;
}

.nrd-ps-field {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid var(--nrd-ps-line);
  border-radius: 11px;
  background: var(--nrd-ps-surface);
  color: var(--nrd-ps-ink);
  font: inherit;
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
}
.nrd-ps-field:hover { border-color: var(--nrd-ps-accent); }
.nrd-ps-field.is-open,
.nrd-ps-field:focus-visible {
  outline: 0;
  border-color: var(--nrd-ps-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nrd-ps-accent) 14%, transparent);
}
.nrd-ps.is-disabled .nrd-ps-field { opacity: .65; cursor: not-allowed; }

.nrd-ps-value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nrd-ps-value.is-empty { color: var(--nrd-ps-muted); }

/* The same chevron the host themes draw, so the control reads as a select. */
.nrd-ps-caret {
  flex: 0 0 auto;
  width: 10px;
  height: 7px;
  background: currentColor;
  opacity: .5;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.nrd-ps-menu {
  /* The list is a column: the search box, then a scroller. The box itself never
     scrolls, so its rounded border stays whole and the bar sits inside the
     padding instead of riding the edge. */
  display: none;
  flex-direction: column;
  overflow: hidden;
  /* The fallback for browsers with no top layer. Nothing on a host page should
   * ever sit above an open list. */
  z-index: 2147483647;
  /* A popover comes with the browser's own frame; this control draws its own. */
  margin: 0;
  inset: auto;
  padding: 6px;
  border: 1px solid var(--nrd-ps-line);
  border-radius: 13px;
  background: var(--nrd-ps-surface);
  color: var(--nrd-ps-ink);
  box-shadow: 0 16px 45px rgba(20, 36, 66, .2);
  /* A hairline bar inside the rounded box, not a bar beside the page. */
  box-sizing: border-box;
}
.nrd-ps-menu:popover-open,
.nrd-ps-menu:not([hidden]) { display: flex; }
.nrd-ps-scroll {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden !important;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* The standard scrollbar properties and ::-webkit-scrollbar are mutually
   exclusive: setting EITHER scrollbar-width or scrollbar-color makes the
   browser draw its own bar and ignore the pseudo-elements entirely -- which is
   how a hairline became a full-width bar with stepper arrows on it. So the
   standard properties go only to browsers that have no pseudo-elements, and
   everywhere else the pseudo-elements below are the whole description. */
@supports not selector(::-webkit-scrollbar) {
  .nrd-ps-scroll, .nrd-pick__list {
    scrollbar-width: thin;
    scrollbar-color: var(--nrd-ps-accent) transparent;
  }
}
.nrd-ps-scroll::-webkit-scrollbar { width: 2px; height: 2px; }
.nrd-ps-scroll::-webkit-scrollbar-track { background: transparent; }
/* No stepper arrows: the bar is a hairline, and two arrows on it are neither
   usable nor in keeping. */
.nrd-ps-scroll::-webkit-scrollbar-button { display: none; height: 0; width: 0; }
.nrd-ps-scroll::-webkit-scrollbar-thumb { background: var(--nrd-ps-accent); border-radius: 999px; }

.nrd-ps-search {
  flex: 0 0 auto;
  padding: 2px 2px 6px;
  background: var(--nrd-ps-surface);
}
.nrd-ps-search input {
  width: 100%;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--nrd-ps-line);
  border-radius: 9px;
  background: var(--nrd-ps-soft);
  color: inherit;
  font: inherit;
  font-size: 13px;
}
.nrd-ps-search input:focus {
  outline: 0;
  border-color: var(--nrd-ps-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nrd-ps-accent) 12%, transparent);
}

.nrd-ps-group {
  margin: 8px 8px 4px;
  padding: 0;
  color: var(--nrd-ps-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
}

.nrd-ps-option {
  display: block !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13px;
  line-height: 1.55;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.nrd-ps-option:hover,
.nrd-ps-option:focus-visible,
.nrd-ps-option[aria-selected="true"] {
  outline: 0;
  background: color-mix(in srgb, var(--nrd-ps-accent) 12%, var(--nrd-ps-soft));
  color: var(--nrd-ps-accent);
}
.nrd-ps-option[disabled] { opacity: .5; cursor: not-allowed; }

/* Pagination is intentionally compact. The native select is visually hidden
 * after enhancement, so the generated control must carry the width itself.
 * Its options are a short vertical list; never let a host button rule turn
 * them into an inline strip or create a horizontal scrollbar. */
.nrd-ps--page-size {
  width: 76px !important;
  min-width: 76px !important;
  max-width: 76px !important;
}
.nrd-ps-menu--page-size {
  min-width: 76px !important;
  max-width: 76px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 230px !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}
.nrd-ps-menu--page-size .nrd-ps-scroll {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: 100% !important;
  height: auto !important;
  max-height: 218px !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
.nrd-ps-menu--page-size .nrd-ps-option {
  display: block !important;
  float: none !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding-inline: 6px;
  text-align: center;
  white-space: nowrap;
}

/* The browser hides a closed popover and shows an open one; both are this
   control's own box, drawn by the rules above.

   It must stay a COLUMN. `display:block` here took the menu out of flex layout
   while it was open, so `.nrd-ps-scroll` -- which shrinks inside the 360px box
   by being a flex item with `min-height:0` -- grew to the full height of its
   options instead and the menu, which clips, simply cut them off. A list of 46
   record types showed the first five and could not be scrolled at all. */
.nrd-ps-menu:popover-open { display: flex; }
.nrd-ps-menu[popover] { border: 1px solid var(--nrd-ps-line); padding: 6px; }

.nrd-ps-empty {
  margin: 0;
  padding: 14px 10px;
  color: var(--nrd-ps-muted);
  font-size: 13px;
  line-height: 1.6;
}

@media (prefers-color-scheme: dark) {
  .nrd-ps {
    --nrd-ps-ink: #e6eefb;
    --nrd-ps-muted: #b3c3dc;
    --nrd-ps-line: #3a4d68;
    --nrd-ps-surface: #192a43;
    --nrd-ps-soft: #101e33;
  }
  .nrd-ps-menu { box-shadow: 0 16px 45px rgba(5, 10, 22, .55); }
}

/* ---------- The search picker wears the same clothes ----------
 *
 * The picker is the other dropdown in this product: a search box that suggests
 * matches from live data. It is a different control with a different job, but
 * to a customer it is the same gesture, so it should not be a second design.
 * These rules put the two on the same surface, radius, hover and scrollbar;
 * everything structural stays in the design system where it belongs.
 */
.nrd-pick { --nrd-ps-accent: var(--nc-accent, #6254d9); }

.nrd-pick__field {
  border-radius: 11px !important;
  border-color: #d4dced;
}
.nrd-pick__field:focus-within,
.nrd-pick__field:focus-visible {
  border-color: var(--nrd-ps-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nrd-ps-accent) 14%, transparent);
}

.nrd-pick__panel {
  border-radius: 13px;
  border: 1px solid #d4dced;
  background: #ffffff;
  box-shadow: 0 16px 45px rgba(20, 36, 66, .2);
}

.nrd-pick__list {
  overflow: auto;
  overscroll-behavior: contain;
}
.nrd-pick__list::-webkit-scrollbar { width: 2px; height: 2px; }
.nrd-pick__list::-webkit-scrollbar-track { background: transparent; }
.nrd-pick__list::-webkit-scrollbar-thumb { background: var(--nrd-ps-accent); border-radius: 999px; }
.nrd-pick__list::-webkit-scrollbar-button { display: none; height: 0; width: 0; }

.nrd-pick__opt {
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.55;
}
.nrd-pick__opt:hover,
.nrd-pick__opt.is-active,
.nrd-pick__opt[aria-selected="true"] {
  background: color-mix(in srgb, var(--nrd-ps-accent) 12%, #f6f8fc);
  color: var(--nrd-ps-accent);
}

@media (prefers-color-scheme: dark) {
  .nrd-pick__field { border-color: #3a4d68; }
  .nrd-pick__panel { border-color: #3a4d68; background: #192a43; box-shadow: 0 16px 45px rgba(5, 10, 22, .55); }
  .nrd-pick__opt:hover,
  .nrd-pick__opt.is-active,
  .nrd-pick__opt[aria-selected="true"] { background: color-mix(in srgb, var(--nrd-ps-accent) 22%, #101e33); }
}