/* Visually distinguishes the app's three nesting levels of tabsetPanel, which
   otherwise all render identically (same Bootstrap nav-tabs look) making it
   hard to tell "which kind of tab am I looking at" - top-level menu (Data
   Input / Query & Export / ...), workflow tabs inside Data Input
   (Morphometrics / Breeding / ...), and sub-tabs inside a single workflow
   (New Bird / Browse Update Bird). Selectors rely on .tabbable nesting depth
   (every tabsetPanel() renders <div class="tabbable"><ul class="nav
   nav-tabs">...), not on any specific tab's label, so this applies
   automatically to every current and future tabsetPanel in the app without
   needing per-tab classes. */

/* Small clickable "x" (see custom.js) to clear a single-select selectize
   dropdown back to blank - needed because selectize.js never registers a
   selectable option whose value is an empty string, so this app's
   blank-placeholder fields (choices = c(" " = "", ...)) otherwise have no
   way to be cleared once a value's been picked.
   The button is a JS-appended child of the field's outer .form-group
   wrapper, not of .selectize-control (see custom.js for why) - so this
   targets the class directly, not scoped under .selectize-control, and
   positions from the *bottom* of .form-group rather than vertically
   centering the whole wrapper: the label sits above the select box inside
   that wrapper, so centering on the wrapper's full height (label + input)
   would float the button too high/low depending on label length, while the
   select box is always the last/bottom element in a plain selectInput's
   form-group, so bottom-anchoring lines up with it regardless of the
   label's height. */
.hihi-clear-btn {
  display: none;
  position: absolute;
  right: 26px; /* clear of selectize's own dropdown-arrow area */
  bottom: 9px;
  cursor: pointer;
  color: #999;
  font-size: 1.15rem;
  line-height: 1;
  z-index: 5;
  padding: 2px 4px;
}
.hihi-clear-btn:hover {
  color: #333;
}
.hihi-clear-btn-visible {
  display: inline-block;
}

/* Level 1: top-level menu tabs (mod_home.R) - bold primary navigation */
.tabbable > .nav-tabs {
  border-bottom: 2px solid #dee2e6;
  margin-bottom: 0.5rem;
}
.tabbable > .nav-tabs > li > a {
  font-size: 1.05rem;
  font-weight: 600;
  color: #2c3e50;
  opacity: 0.6;
  padding: 0.65rem 1.25rem;
  border: none;
  border-bottom: 3px solid transparent;
}
.tabbable > .nav-tabs > li > a.active {
  color: #18bc9c;
  opacity: 1;
  border-bottom-color: #18bc9c;
  background: transparent;
}

/* Level 2: workflow tabs (mod_data_input.R) - pill-style secondary nav */
.tabbable .tabbable > .nav-tabs {
  background: #f1f3f5;
  border: none;
  border-radius: 8px;
  padding: 4px;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.tabbable .tabbable > .nav-tabs > li > a {
  font-size: 0.9rem;
  font-weight: 500;
  color: #495057;
  border: none;
  border-radius: 6px;
  padding: 0.4rem 0.85rem;
  margin: 2px;
}
.tabbable .tabbable > .nav-tabs > li > a.active {
  color: #fff;
  background: #18bc9c;
}
.tabbable .tabbable > .nav-tabs > li > a:hover {
  background: #e2e6ea;
}
.tabbable .tabbable > .nav-tabs > li > a.active:hover {
  background: #15a589;
}

/* Level 3: sub-tabs within a single workflow (e.g. New Bird / Browse Update
   Bird) - minimal, understated, clearly "least important" nav level. Resets
   the level-2 pill container's background/radius/padding explicitly, since
   without that a level-3 nav-tabs still sits inside the inherited gray pill
   box (level-2's selector matches it too - it's nested 2+ .tabbable deep,
   same as level 2 itself). */
.tabbable .tabbable .tabbable > .nav-tabs {
  background: transparent;
  border-radius: 0;
  padding: 0;
  border-bottom: 1px solid #e9ecef;
  margin-bottom: 1rem;
}
.tabbable .tabbable .tabbable > .nav-tabs > li > a {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #868e96;
  padding: 0.35rem 0.75rem;
  margin: 0;
  border: none;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
}
.tabbable .tabbable .tabbable > .nav-tabs > li > a.active {
  color: #2c3e50;
  border-bottom-color: #2c3e50;
  background: transparent;
}
.tabbable .tabbable .tabbable > .nav-tabs > li > a:hover {
  background: transparent;
  color: #495057;
}