/* ================================================
   AbhiHub Navigation Bar Styles
   Supports both Bootstrap and custom navbar systems
   ================================================ */

/* --- Bootstrap Native Navbar Styling --- */
.navbar {
  --bs-bg-color: var(--background) !important;
  --bs-text-color: var(--text) !important;
  background: var(--background) !important;
  padding: 0.75rem 0 !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

.navbar-brand {
  color: var(--primary-color) !important;
  font-weight: 700 !important;
  font-size: 1.25rem !important;
  transition: var(--transition-fast) !important;
}

.navbar-brand:hover {
  color: var(--secondary-color) !important;
}

.navbar-toggler {
  border-color: var(--border) !important;
}

.navbar-toggler:hover {
  border-color: var(--primary-color) !important;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30%3E%3Cpath stroke='var(--text)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}

/* Bootstrap nav links */
.navbar-nav .nav-link {
  color: var(--text) !important;
  font-weight: 500 !important;
  position: relative !important;
  transition: var(--transition-fast) !important;
}

.navbar-nav .nav-link::after {
  content: '';
  position: absolute;
  bottom: -0.25rem;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--primary-color);
  transition: var(--transition-fast) !important;
  width: 100%;
}

.navbar-nav .nav-link:hover::after {
  width: 100%;
}

/* Bootstrap buttons in navbar */
.navbar .btn-primary {
  background: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: #ffffff !important;
  transition: var(--transition-fast) !important;
}

.navbar .btn-primary:hover {
  background: var(--secondary-color) !important;
  border-color: var(--secondary-color) !important;
}

/* Reduce Bootstrap defaults */
.navbar-light .navbar-nav .nav-link {
  color: var(--text) !important;
}

.navbar-light .navbar-nav .nav-link:hover {
  color: var(--primary-color) !important;
}

/* --- Custom app navigation --- */
.navbar__item {
  display:inline-flex;
  position:relative;
  color:var(--text-tertiary);
  text-decoration:none;
}

.navbar__item.-blue {
  color: var(--primary-color) !important;
}

.navbar__item.-blue:hover {
  color: var(--secondary-color) !important;
}

.navbar__item.-orange {
  color: var(--secondary-color) !important;
}

.navbar__item.-orange:hover {
  color: var(--primary-color) !important;  
}

.navbar__item.-navy-blue {
  color: var(--primary-color) !important;
}

.navbar__item.-purple {
  color: var(--primary-color) !important;
}

.navbar__item.-green {
  color: var(--success) !important;
}

.navbar__item.-chat {
  color: #0891b2 !important;
}
.navbar__item.-chat:hover {
  color: #0e7490 !important;
}

.navbar__item.-yellow {
  color: #d97706 !important;
}

.navbar__item.-red {
  color: var(--error) !important;
}

/* Active state */
.navbar__item--active {
  color: var(--primary-color) !important;
}

/* Bottom nav layout: a compact floating rail on larger screens, an edge-to-edge
   thumb-friendly bar on phones. */
.navbar--bottom {
  position: fixed;
  left:50%;
  bottom:1.25rem;
  z-index:900;
  display: flex;
  justify-content:center;
  align-items: center;
  gap:.25rem;
  width:min(720px, calc(100% - 2rem));
  min-height:68px;
  padding:.5rem;
  transform:translateX(-50%);
  background:rgba(255,255,255,.88) !important;
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  border:1px solid rgba(148,163,184,.28);
  border-radius:20px;
  box-shadow:0 14px 34px rgba(15,23,42,.14), 0 2px 7px rgba(15,23,42,.06) !important;
}

.navbar--bottom .navbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap:.25rem;
  margin: 0;
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  min-height:52px;
  padding:.4rem .45rem;
  border-radius:14px;
  transition:color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.navbar--bottom .navbar__item:hover { background:rgba(37,99,235,.07); color:var(--primary-700) !important; transform:translateY(-1px); }
.navbar--bottom .navbar__item:active {
  transform:translateY(1px) scale(.98);
}
.navbar--bottom .navbar__item:focus-visible {
  outline:3px solid rgba(37,99,235,.35);
  outline-offset:2px;
}

.navbar--bottom .navbar__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width:30px;
  height:26px;
  border-radius:9px;
  transition:background .2s ease, transform .2s ease;
}

.navbar--bottom .navbar__icon .icon {
  width:20px;
  height:20px;
  fill:currentColor;
}

.navbar--bottom .navbar__label {
  font-size:.7rem;
  font-weight:650;
  letter-spacing:.01em;
  line-height:1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.navbar--bottom .navbar__item--active {
  background:linear-gradient(135deg, #eff6ff, #eef2ff);
  color:var(--primary-700) !important;
  box-shadow:inset 0 0 0 1px rgba(37,99,235,.11);
}
.navbar--bottom .navbar__item--active .navbar__icon {
  background:var(--primary-600);
  color:#fff;
  box-shadow:0 3px 8px rgba(37,99,235,.25);
}
.navbar--bottom .navbar__item--active .navbar__label { font-weight:750; }

@media (min-width:641px) {
  .app-footer { padding-bottom:calc(var(--nav-bottom-height) + var(--space-10)); }
}

@media (prefers-color-scheme: dark) {
  .navbar--bottom { background:rgba(22,33,62,.9) !important; border-color:rgba(148,163,184,.2); }
  .navbar--bottom .navbar__item:hover { background:rgba(96,165,250,.12); }
  .navbar--bottom .navbar__item--active { background:linear-gradient(135deg, rgba(37,99,235,.25), rgba(99,102,241,.22)); color:#bfdbfe !important; }
}

@media (max-width:640px) {
  .navbar--bottom {
    left:0;
    bottom:0;
    width:100%;
    min-height:64px;
    padding:.4rem .25rem calc(.4rem + env(safe-area-inset-bottom, 0px));
    transform:none;
    border:0;
    border-top:1px solid rgba(148,163,184,.24);
    border-radius:18px 18px 0 0;
    box-shadow:0 -8px 24px rgba(15,23,42,.1) !important;
  }
  .navbar--bottom .navbar__item { min-height:52px; padding:.3rem .15rem; border-radius:12px; }
  .navbar--bottom .navbar__icon { width:28px; height:25px; }
  .navbar--bottom .navbar__icon .icon { width:19px; height:19px; }
  .navbar--bottom .navbar__label { font-size:.64rem; }
}

@media (max-width:380px) {
  .navbar--bottom .navbar__label { font-size:.59rem; letter-spacing:0; }
}

/* Notification dot */
.notification-dot {
  position: absolute;
  top: 0.15rem;
  right: -0.3rem;
  background: var(--error);
  color: #ffffff;
  border-radius: 9999px;
  padding: 0.15rem 0.3rem;
  font-size: 0.65rem;
  font-weight: bold;
}

/* Search form */
.nav-search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(var(--background-rgb), 0.95);
  z-index: 1000;
  padding: var(--spacing-5);
}

.nav-search-wrapper {
  max-width: 400px;
  margin: 0 auto;
  display: flex;
}

.nav-search-field {
  flex: 1;
  padding: var(--spacing-2) var(--spacing-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--background);
  color: var(--text);
  font-size: var(--font-size-md);
}

.nav-search-btn {
  padding: var(--spacing-2) var(--spacing-3);
  background: var(--primary-color);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-md);
  margin-left: var(--spacing-2);
  cursor: pointer;
}

.nav-search-close-btn {
  padding: var(--spacing-2) var(--spacing-3);
  background: var(--error);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
}

/* Mobile */
@media (max-width: 991.98px) {
  .navbar-collapse {
    border-top: 1px solid var(--border) !important;
    padding-top: 1rem !important;
  }
  
  .navbar-nav .nav-link,
  .navbar-nav .nav-link {
    padding: 0.5rem 0.75rem !important;
    color: var(--text) !important;
  }
  
  .navbar-nav .active > .nav-link,
  .navbar-nav .active > .nav-link {
    color: var(--primary-color) !important;
  }
  
  .nav-search-overlay {
    padding: var(--spacing-3);
  }
}