/* ==========================================================================
   Nice Select — shared custom dropdown for front office + back office
   Brand palette is hardcoded here so this one file works in both sites.
   green #3DB54A · green-dark #2D9A3A · navy-950 #0D2461 · navy-800 #1A3B8C
   navy-600 #3A5BB5 · navy-100 #EEF2FF · border #D8E2F8 · text #0D1B3E
   ========================================================================== */

.ns-wrap {
  position: relative;
  display: block;
  width: 100%;
}

/* Native <select> stays in the DOM for form submit / required / value,
   but is visually removed. NOT display:none — that would break the
   browser's required-field validation focus. */
.ns-wrap > select.ns-native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  margin: 0;
  border: 0;
  padding: 0;
}

/* ── Trigger (the visible control) ── */
.ns-trigger {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: #0D1B3E;
  text-align: left;
  background: #FFFFFF;
  border: 1.5px solid #D8E2F8;
  border-radius: 11px;
  cursor: pointer;
  transition: border-color .18s, box-shadow .18s, background .18s, transform .18s;
}
.ns-trigger:hover {
  border-color: #3A5BB5;
  box-shadow: 0 3px 12px rgba(13,36,97,.09);
}
.ns-wrap.ns-open .ns-trigger,
.ns-trigger:focus-visible {
  outline: none;
  border-color: #3DB54A;
  box-shadow: 0 0 0 3px rgba(61,181,74,.16);
  background: #FFFFFF;
}
.ns-wrap.ns-disabled { opacity: .6; }
.ns-wrap.ns-disabled .ns-trigger { cursor: not-allowed; }

.ns-label {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ns-wrap.ns-placeholder .ns-label { color: #6B7A99; font-weight: 500; }

/* Arrow chip */
.ns-arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  color: #FFFFFF;
  background: linear-gradient(145deg, #3DB54A, #1A3B8C);
  box-shadow: 0 2px 6px rgba(13,36,97,.18);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.ns-wrap.ns-open .ns-arrow { transform: rotate(180deg); }
.ns-arrow svg { display: block; }

/* ── Panel (appended to <body>, positioned as fixed) ── */
.ns-panel {
  position: fixed;
  z-index: 12000;
  box-sizing: border-box;
  padding: 6px;
  background: #FFFFFF;
  border: 1px solid #D8E2F8;
  border-radius: 13px;
  box-shadow: 0 18px 48px rgba(13,36,97,.22), 0 2px 8px rgba(13,36,97,.10);
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-6px) scale(.98);
  transform-origin: top center;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s cubic-bezier(.4,0,.2,1);
}
.ns-panel.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.ns-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 600;
  color: #0D1B3E;
  cursor: pointer;
  transition: background .14s, color .14s;
}
.ns-option + .ns-option { margin-top: 2px; }
.ns-opt-text { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.ns-option:hover,
.ns-option.ns-active {
  background: #EEF2FF;
  color: #0D2461;
}
.ns-option.ns-selected {
  background: linear-gradient(135deg, rgba(61,181,74,.14), rgba(26,59,140,.10));
  color: #0D2461;
}
.ns-option.ns-is-placeholder { color: #6B7A99; font-weight: 500; }
.ns-option.ns-disabled-opt { opacity: .45; cursor: not-allowed; }

/* Check mark — only on the selected option */
.ns-check {
  flex-shrink: 0;
  color: #3DB54A;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .14s, transform .14s;
}
.ns-option.ns-selected .ns-check { opacity: 1; transform: scale(1); }

/* Scrollbar */
.ns-panel::-webkit-scrollbar { width: 9px; }
.ns-panel::-webkit-scrollbar-track { background: transparent; }
.ns-panel::-webkit-scrollbar-thumb {
  background: #C2CEEE; border-radius: 8px; border: 2px solid #FFFFFF;
}
.ns-panel::-webkit-scrollbar-thumb:hover { background: #3A5BB5; }
.ns-panel { scrollbar-width: thin; scrollbar-color: #C2CEEE transparent; }

/* ── Context-specific sizing so triggers align with sibling inputs ── */
/* Front office */
.field   .ns-trigger { padding: 11px 14px; font-size: 14px; border-radius: 10px; }
.co-field .ns-trigger { padding: 9px 12px; font-size: 13px; border-radius: 10px; }
.co-field .ns-trigger { font-weight: 600; }
/* Back office */
.form-group  .ns-trigger { padding: 9px 12px; font-size: 14px; border-radius: 8px; font-weight: 500; }
.filter-form .ns-wrap    { display: inline-block; width: auto; min-width: 180px; }
.filter-form .ns-trigger { padding: 8px 12px; font-size: 14px; border-radius: 8px; font-weight: 500; }

/* Focus ring for keyboard users on the trigger */
.ns-trigger:focus { outline: none; }

/* Touch targets on small screens */
@media (max-width: 680px) {
  .field .ns-trigger { min-height: 48px; }
  .co-field .ns-trigger { min-height: 46px; }
  .ns-option { padding: 12px 12px; font-size: 14px; }
}
