/*
 * Animated select box (shared component — used by every page of the app).
 * Authored widgets: login page (Designation), projects/sub-projects
 * (Financial Year). Every other <select> is wrapped at runtime by
 * static/js/components/select-box.js and styled by the rules below.
 * Derived from the "direction-aware hover" select-box demo provided by the
 * project owner, adapted per requirements:
 *   - NO option icons (the direction-aware icon animation is removed),
 *   - drives the REAL <select> (server- or AJAX-populated, required,
 *     toggled disabled/enabled) — the native element stays in the DOM,
 *     visually overlaid, so form submission, onchange navigation and HTML5
 *     validation keep working,
 *   - dynamic option counts: the demo's fixed6 brand-colored rows were
 *     replaced by a single accent color (token --color-2) for hover/selected,
 *   - dark-mode variants for pages using the .dark class,
 *   - `--nbms-select-h` keeps the row height of the replaced select,
 *   - `.nbms-select-compact` serves selects that pages styled small,
 *   - `.is-fixed` lets the list escape scrolling/clipping containers.
 * Markup/JS contract: static/js/components/select-box.js
 * Everything is scoped under .nbms-select-box.
 */

.nbms-select-box {
  position: relative;
  width: 100%;
  min-width: 0; /* flex/grid child: never overflow the row it lives in */
  z-index: 20; /* open list floats over the content below it */
}

/* While open the box must outrank every interactive layer of the page it lives
   in: Leaflet panes/controls reach z-index 1000 (.leaflet-top/.leaflet-bottom,
   tile/marker/popup panes 200-800) and the closing map container does not
   create its own stacking context, sticky headers use 50, the sidebar 30.
   Closed boxes keep the low z-index so nothing else is affected. */
.nbms-select-box.is-open {
  z-index: 9999;
}

/* Page JS can hide the native select (class/style toggle); the widget follows. */
.nbms-select-box[hidden] {
  display: none;
}

/* Native select: overlaid on the button, invisible and click-through.
   Keeps name/required/disabled/onchange and anchors the validation bubble.
   `!important` throughout, because this is the one declaration set the widget
   cannot work without: page rules that style a bare select beat a single class,
   and when one of them wins, the native select paints over the button and the
   field renders as two stacked dropdowns showing the same value twice. E.g. a
   page that un-greys a disabled control with `.auto-quarter:disabled
   { opacity: 1 }`, or base.html's flatpickr month dropdown. */
.nbms-select-native {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Button — demo styling, fluid width */
.nbms-select-box .nbms-select-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8, 16px);
  width: 100%;
  min-height: var(--nbms-select-h, 0px); /* row height of the replaced select */
  margin: 0;
  padding: 12px 14px;
  font-size: 16px;
  line-height: 16px;
  text-align: left;
  color: #2d3667;
  background-color: #fff;
  border: 1px solid #e2eded;
  border-color: #eaf1f1 #e4eded #dbe7e7 #e4eded;
  border-radius: 4px;
  cursor: pointer;
}

/* Compact variant — selects that pages styled small (text-sm, py-1). */
.nbms-select-box.nbms-select-compact .nbms-select-btn {
  gap: 8px;
  padding: 8px 10px;
}

.nbms-select-box.nbms-select-compact .nbms-select-value,
.nbms-select-box.nbms-select-compact .nbms-select-option {
  font-size: 14px;
  line-height: 1.25;
}

.nbms-select-box.nbms-select-compact .nbms-select-option {
  padding: 8px 10px;
}

.nbms-select-box.nbms-select-compact .nbms-select-chevrons i {
  font-size: 10px;
}

.nbms-select-box .nbms-select-btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.nbms-select-box .nbms-select-btn:focus-visible {
  outline: 2px solid var(--color-2, #0066cc);
  outline-offset: 2px;
}

/* Focus ring reaches the button while the overlaid native select holds focus
   (e.g. after HTML5 validation targets it). */
.nbms-select-native:focus-visible ~ .nbms-select-btn {
  outline: 2px solid var(--color-2, #0066cc);
  outline-offset: 2px;
}

.nbms-select-box .nbms-select-value {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nbms-select-box .nbms-select-chevrons {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

.nbms-select-box .nbms-select-chevrons i {
  display: block;
  color: #d1dede;
  font-size: 12px;
  line-height: 1;
  transition: color 0.3s ease;
}

.nbms-select-box.is-open .nbms-select-chevrons i {
  color: #2d3667;
}

/* Options list */
.nbms-select-box .nbms-select-options {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  margin-top: 4px;
  background-color: #fff;
  border: 1px solid #e2eded;
  border-color: #eaf1f1 #e4eded #dbe7e7 #e4eded;
  border-radius: 4px;
  max-height: 240px;
  overflow-y: auto;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--duration-base, 0.25s) ease,
              transform var(--duration-base, 0.25s) ease,
              visibility var(--duration-base, 0.25s);
}

.nbms-select-box.is-open .nbms-select-options {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* Rows */
.nbms-select-box .nbms-select-option {
  position: relative;
  z-index: 2;
  padding: 12px 14px;
  font-size: 16px;
  line-height: 16px;
  color: #2d3667;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: color 0.3s ease;
}

/* Hover wipe — replaces the demo's shared #option-bg so it scales to any
   number of dynamically loaded options. */
.nbms-select-box .nbms-select-option::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-2, #0066cc);
  border-radius: 4px;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.3s ease;
}

.nbms-select-box .nbms-select-option:hover::after,
.nbms-select-box .nbms-select-option:focus-visible::after {
  transform: scaleY(1);
}

.nbms-select-box .nbms-select-option:hover,
.nbms-select-box .nbms-select-option:focus-visible {
  color: #fff;
}

.nbms-select-box .nbms-select-option:focus-visible {
  outline: 2px solid var(--color-2, #0066cc);
  outline-offset: -2px;
}

/* Selected row pill (demo's `input:checked ~ label:before`) */
.nbms-select-box .nbms-select-option[aria-selected="true"] {
  color: #fff;
}

.nbms-select-box .nbms-select-option[aria-selected="true"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-2, #0066cc);
  border-radius: 4px;
}

/* Disabled option rows */
.nbms-select-box .nbms-select-option.is-disabled,
.nbms-select-box .nbms-select-option.is-disabled:hover,
.nbms-select-box .nbms-select-option.is-disabled:focus-visible {
  color: #9aa7a7;
  cursor: not-allowed;
}

.nbms-select-box .nbms-select-option.is-disabled:hover::after,
.nbms-select-box .nbms-select-option.is-disabled:focus-visible::after {
  transform: scaleY(0);
}

/* Dark mode (pages under html.dark) — focus ring uses color-3 (#2997FF),
   which keeps >=3:1 against dark surfaces (#0066CC only reaches 2.6:1). */
.dark .nbms-select-box .nbms-select-btn {
  color: #e5e7eb;
  background-color: #1f2937;
  border-color: #374151;
}

.dark .nbms-select-box .nbms-select-btn:focus-visible,
.dark .nbms-select-native:focus-visible ~ .nbms-select-btn {
  outline-color: var(--color-3, #2997ff);
}

.dark .nbms-select-box.is-open .nbms-select-chevrons i {
  color: #9ca3af;
}

.dark .nbms-select-box .nbms-select-options {
  background-color: #111827;
  border-color: #374151;
}

.dark .nbms-select-box .nbms-select-option {
  color: #d1d5db;
}

.dark .nbms-select-box .nbms-select-option:focus-visible {
  outline-color: var(--color-3, #2997ff);
}

/* Fixed mode (JS): the list escapes a scrolling/clipping ancestor (table
   wrappers, overflow-auto panels) and must outrank the surrounding content. */
.nbms-select-box.is-fixed .nbms-select-options {
  z-index: 9999;
}

.dark .nbms-select-box.is-fixed .nbms-select-options {
  background-color: #111827;
}

/* ------------------------------------------------------------------ */
/* Search variant (opt-in: data-select-box-search on the <select>)     */
/* The list becomes a column: pinned search box + independently         */
/* scrolling rows, so the box stays visible while filtering.            */
/* ------------------------------------------------------------------ */
.nbms-select-box.nbms-select-has-search .nbms-select-options {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.nbms-select-box .nbms-select-rows {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.nbms-select-box .nbms-select-search {
  flex: 0 0 auto;
  width: 100%;
  margin: 0;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.25;
  color: #2d3667;
  background-color: #fff;
  border: 0;
  border-bottom: 1px solid #e4eded;
  border-radius: 0;
  outline: none;
}

.nbms-select-box.nbms-select-compact .nbms-select-search {
  padding: 8px 10px;
  font-size: 14px;
}

.nbms-select-box .nbms-select-search::placeholder {
  color: #9aa7a7;
}

.nbms-select-box .nbms-select-search:focus {
  box-shadow: inset 0 -2px 0 var(--color-2, #0066cc);
}

/* Rows dropped by the current query stay out of the list and out of the
   keyboard order. */
.nbms-select-box .nbms-select-option.is-hidden {
  display: none;
}

.nbms-select-box .nbms-select-empty {
  padding: 12px 14px;
  font-size: 16px;
  line-height: 1.25;
  color: #9aa7a7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nbms-select-box.nbms-select-compact .nbms-select-empty {
  padding: 8px 10px;
  font-size: 14px;
}

.dark .nbms-select-box .nbms-select-search {
  color: #e5e7eb;
  background-color: #1f2937;
  border-bottom-color: #374151;
}

.dark .nbms-select-box .nbms-select-search::placeholder {
  color: #6b7280;
}

.dark .nbms-select-box .nbms-select-search:focus {
  box-shadow: inset 0 -2px 0 var(--color-3, #2997ff);
}

.dark .nbms-select-box .nbms-select-empty {
  color: #6b7280;
}