/* =============================================================
   SHAREMAESTRO — NAVBAR, SEARCH & OFFCANVAS
   A single source of truth for all navigation styling.
   Linked from base_fullwidth.html as styles_navbar.css
   ============================================================= */

/* ——— Design tokens ——— */
:root {
  --nav-height: 56px;
  --nav-bg: #ffffff;
  --nav-border: #e8ecf1;
  --nav-text: #1a202c;
  --nav-muted: #64748b;
  --nav-hover-bg: #f1f5f9;
  --nav-accent: #2563eb;
  --nav-radius: 10px;
  --nav-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
  --nav-dropdown-shadow: 0 12px 28px rgba(0, 0, 0, .10), 0 2px 6px rgba(0, 0, 0, .06);
  --nav-transition: .18s ease;
}

/* =========================
   1. NAVBAR SHELL
   ========================= */
.navbar {
  position: relative;
  z-index: 1030;
  height: var(--nav-height);
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
  box-shadow: var(--nav-shadow);
  padding-top: 0;
  padding-bottom: 0;
  transition: box-shadow var(--nav-transition);
}

/* ——— Brand ——— */
.navbar .brand-logo,
.navbar-brand img {
  height: 26px;
  width: auto;
  object-fit: contain;
}

/* ——— Nav links (desktop) ——— */
.navbar .nav-link {
  font-size: clamp(.84rem, .55vw + .55rem, 1.05rem);
  font-weight: 600;
  color: var(--nav-text);
  letter-spacing: .01em;
  padding: .5rem .75rem;
  border-radius: 8px;
  transition: color var(--nav-transition), background var(--nav-transition);
}
.navbar .nav-link:hover,
.navbar .nav-link:focus-visible {
  color: var(--nav-accent);
  background: var(--nav-hover-bg);
}

/* Scale nav padding & height for larger viewports */
@media (min-width: 1400px) {
  .navbar { --nav-height: 60px; }
  .navbar .nav-link { padding: .55rem .85rem; }
}
@media (min-width: 1800px) {
  .navbar { --nav-height: 64px; }
  .navbar .nav-link { padding: .6rem 1rem; }
}

/* ——— Hamburger / toggler ——— */
.navbar-toggler {
  border: none;
  padding: .35rem .5rem;
  font-size: 1.25rem;
  color: var(--nav-text);
  transition: opacity var(--nav-transition);
}
.navbar-toggler:focus {
  box-shadow: none;
  outline: 2px solid var(--nav-accent);
  outline-offset: 2px;
}

/* =========================
   2. DESKTOP DROPDOWNS
   ========================= */
.navbar .dropdown {
  position: relative !important;
}

.navbar .dropdown-menu {
  z-index: 2000 !important;
  min-width: 200px;
  padding: .35rem 0;
  border: 1px solid var(--nav-border);
  border-radius: var(--nav-radius);
  background: var(--nav-bg);
  box-shadow: var(--nav-dropdown-shadow);
  max-height: 70vh;
  overflow: auto;
  animation: navDropIn .15s ease;
}

@keyframes navDropIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.navbar .dropdown-item {
  font-size: clamp(.84rem, .55vw + .55rem, 1.05rem);
  font-weight: 500;
  color: var(--nav-text);
  padding: .5rem .9rem;
  transition: background var(--nav-transition), color var(--nav-transition);
}
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus-visible {
  background: var(--nav-hover-bg);
  color: var(--nav-accent);
}

/* Hover-open on desktop (≥1200 px) */
@media (min-width: 1200px) {
  .navbar .dropdown:hover > .dropdown-menu {
    display: block;
  }
  /* Right-aligned menus stay on screen */
  .navbar .dropdown-menu-end {
    left: auto !important;
    right: 0 !important;
    transform: none;
  }
  .navbar .dropdown:hover > .dropdown-menu.dropdown-menu-end {
    left: auto !important;
    right: 0 !important;
    transform: none;
  }
}

/* =========================
   3. SEARCH — SHARED BASE
   ========================= */
.search-container {
  position: relative;
}

.navbar-search-wrapper {
  min-width: 340px;
  width: min(480px, 38vw);
}

.search-input {
  height: 38px;
  width: 100%;
  padding: .45rem 1rem;
  font-size: .875rem;
  color: var(--nav-text);
  background: #f7f9fc;
  border: 1px solid var(--nav-border);
  border-radius: 9999px;
  transition: border-color var(--nav-transition),
              box-shadow var(--nav-transition),
              background var(--nav-transition);
}
.search-input::placeholder {
  color: var(--nav-muted);
}
.search-input:focus {
  outline: none;
  background: #fff;
  border-color: var(--nav-accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.border-search {
  border: 1px solid var(--nav-border);
}

/* Search icon */
.search-icon {
  pointer-events: none;
  font-size: .9rem;
}
.search-icon i {
  opacity: .5;
}

/* HTMX loading indicator */
.htmx-indicator {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity .2s;
}
.htmx-request .htmx-indicator {
  opacity: 1;
}

/* =========================
   4. SEARCH — RESULTS DROPDOWN (desktop light)
   ========================= */
.search-dropdown {
  position: absolute;
  z-index: 1500;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  display: none;
  max-height: 60vh;
  overflow: auto;
  background: #fff;
  border: 1px solid var(--nav-border);
  border-radius: var(--nav-radius);
  box-shadow: var(--nav-dropdown-shadow);
}
.search-dropdown.show {
  display: block;
}

.search-dropdown a {
  display: block;
  padding: .55rem 1rem;
  font-size: .875rem;
  color: var(--nav-text);
  text-decoration: none;
  border-bottom: 1px solid #f1f5f9;
  transition: background var(--nav-transition);
}
.search-dropdown a:last-child {
  border-bottom: none;
}
.search-dropdown a:hover {
  background: var(--nav-hover-bg);
  color: var(--nav-accent);
}
.search-dropdown .text-muted {
  color: var(--nav-muted) !important;
}

/* Search result items */
.search-result-item {
  cursor: pointer;
}
.search-result-item:hover {
  background: var(--nav-hover-bg);
}
.search-results-list a {
  display: block;
}

/* Desktop-specific overrides */
.navbar-search-wrapper .search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  display: none;
  max-height: 60vh;
  overflow: auto;
  z-index: 1500;
  background: #fff;
  border: 1px solid var(--nav-border);
  border-radius: var(--nav-radius);
  box-shadow: var(--nav-dropdown-shadow);
}
.navbar-search-wrapper .search-dropdown.show {
  display: block;
}
#search-results.search-dropdown {
  display: none;
}
#search-results.search-dropdown:not(:empty) {
  display: block;
}

/* Mobile: search fills width */
@media (max-width: 1199.98px) {
  .navbar-search-wrapper {
    width: 100%;
    min-width: 0;
  }
}

/* =========================
   5. SEARCH — DARK VARIANT (opt-in via .search-dark)
   ========================= */
.search-dark .search-input {
  background: #0b0f14 !important;
  color: #f8fafc !important;
  border: 1px solid #475569 !important;
}
.search-dark .search-input::placeholder {
  color: #cbd5e1;
  opacity: .9;
}
.search-dark .search-input:focus {
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, .25);
  background: #0f172a !important;
}
.search-dark .border-search {
  border-color: #64748b !important;
}
.search-dark .search-icon {
  color: #cbd5e1;
}
.search-dark .search-dropdown {
  background: #0f172a;
  border: 1px solid #475569;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
.search-dark .search-dropdown a {
  color: #f1f5f9;
  border-bottom-color: rgba(255, 255, 255, .08);
}
.search-dark .search-dropdown a:hover {
  background: #1e293b;
  color: #fff;
}
.search-dark .search-dropdown .text-muted {
  color: #94a3b8 !important;
}

/* =========================
   6. OFFCANVAS (MOBILE NAV)
   ========================= */

/* Z-layering */
.offcanvas-backdrop {
  z-index: 1040;
}
.offcanvas {
  z-index: 1045;
  position: fixed;
  top: 0;
  bottom: 0;
  visibility: hidden;
  transition: transform .3s ease-in-out, visibility 0s linear .3s;
}
.offcanvas.offcanvas-end {
  right: 0 !important;
  left: auto !important;
  width: min(92vw, 400px);
  transform: translateX(100%) !important;
}
.offcanvas.show {
  transform: none !important;
  visibility: visible !important;
}
.offcanvas-backdrop.show {
  opacity: .45;
}

/* Offcanvas header */
.offcanvas-header {
  position: relative;
}
.offcanvas-header .btn-close {
  position: absolute;
  right: .65rem;
  top: .65rem;
  z-index: 5;
}
.offcanvas-title {
  padding-right: 2.25rem;
}
.offcanvas-header .offcanvas-title img {
  height: 22px;
  width: auto;
  object-fit: contain;
}

/* Offcanvas links (dark panel) */
.offcanvas .list-group-item,
.offcanvas .nav-link,
.offcanvas .dropdown-item,
.offcanvas a {
  color: #ffffff !important;
  padding: .55rem .75rem !important;
  font-size: .9rem;
  transition: background var(--nav-transition);
}
.offcanvas .list-group-item:hover,
.offcanvas .nav-link:hover,
.offcanvas .dropdown-item:hover,
.offcanvas a:hover {
  background: rgba(255, 255, 255, .08) !important;
  color: #ffffff !important;
}

/* Accordion inside offcanvas */
.offcanvas .accordion-button {
  color: #ffffff !important;
  background: transparent !important;
  padding: .65rem .75rem !important;
  font-size: .9rem;
}
.offcanvas .accordion-button::after {
  filter: invert(1);
}

/* Exchange items */
.offcanvas .exchange-item {
  padding: .55rem .75rem !important;
  color: #ffffff !important;
}

/* Collapse states (must beat global overrides) */
#mobileNav .collapse:not(.show) {
  display: none !important;
}
#mobileNav .collapse.show {
  display: block !important;
}
#mobileNav .collapsing {
  height: 0;
  overflow: hidden;
  transition: height .2s ease;
}

/* =========================
   7. OFFCANVAS SEARCH (dark panel, light results)
   ========================= */

/* Dark search input inside offcanvas */
.offcanvas.text-bg-dark #mobileNav .search-input,
.offcanvas.text-bg-dark #mobileNav .search-input.form-control {
  background: #0f172a !important;
  color: #f1f5f9 !important;
  border: 1px solid #475569 !important;
  border-radius: 9999px;
  padding: .5rem 1rem .5rem 2.5rem;
  font-size: .9rem;
}
.offcanvas.text-bg-dark #mobileNav .search-input::placeholder {
  color: #94a3b8 !important;
  opacity: .9;
}
.offcanvas.text-bg-dark #mobileNav .search-icon i {
  color: #94a3b8 !important;
  opacity: .85;
}

/* Mobile search container */
#mobileNav .search-container {
  position: relative;
  overflow: visible;
}

/* Mobile results: LIGHT dropdown (overrides dark panel) */
#mobileNav .search-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + .5rem);
  z-index: 2000;
  display: none;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, .1) !important;
  border-radius: var(--nav-radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
  max-height: 55vh;
  overflow: auto;
}
#mobileNav .search-dropdown:not(:empty) {
  display: block;
}

/* Force dark text on light result rows */
#mobileNav .search-dropdown,
#mobileNav .search-dropdown * {
  color: #111 !important;
}
#mobileNav .search-dropdown a,
#mobileNav .search-dropdown .dropdown-item {
  color: #111 !important;
}
#mobileNav .search-dropdown a:hover,
#mobileNav .search-dropdown .dropdown-item:hover {
  background: rgba(0, 0, 0, .05);
}
#mobileNav .search-result-item {
  background: #ffffff !important;
}
#mobileNav .search-result-item:hover {
  background: rgba(0, 0, 0, .05) !important;
}

/* Mobile-only search results (flow in document) */
#search-results-mobile.search-dropdown {
  display: none;
  position: static;
}
#search-results-mobile.search-dropdown.show {
  display: block;
}

/* =========================
   8. RESPONSIVE BRAND
   ========================= */
@media (max-width: 575.98px) {
  .navbar .brand-logo,
  .navbar-brand img {
    height: 22px;
  }
}