/* SynapseMD Helpdesk Styles - Optimized for Tailwind Breakpoints */

/* ============================================
   Logo Styling
   ============================================ */

/* Base styles (mobile-first, < 640px) */
.navbar .brand {
  display: block;
  max-width: 120px;
  height: auto;
  padding: 0.5rem 0;
  overflow: hidden;
  margin-right: 0.5rem;
}

.navbar .brand img {
  width: 100%;
  height: auto;
  max-width: 120px;
  display: block;
  object-fit: contain;
}

.navbar .brand:hover {
  opacity: 0.9;
  transition: opacity 0.2s ease;
}

/* sm: 640px and up */
@media (min-width: 640px) {
  .navbar .brand {
    max-width: 150px;
    margin-right: 0.75rem;
  }
  
  .navbar .brand img {
    max-width: 150px;
  }
}

/* md: 768px and up */
@media (min-width: 768px) {
  .navbar .brand {
    max-width: 180px;
    margin-right: 1rem;
  }
  
  .navbar .brand img {
    max-width: 180px;
  }
}

/* lg: 1024px and up */
@media (min-width: 1024px) {
  .navbar .brand {
    max-width: 170px;
  }
  
  .navbar .brand img {
    max-width: 170px;
  }
}

/* xl: 1280px and up */
@media (min-width: 1280px) {
  .navbar .brand {
    max-width: 180px;
  }
  
  .navbar .brand img {
    max-width: 180px;
  }
}

/* 2xl: 1536px and up */
@media (min-width: 1536px) {
  .navbar .brand {
    max-width: 190px;
  }
  
  .navbar .brand img {
    max-width: 190px;
  }
}

/* Navbar container alignment */
.navbar .navbar-inner .container-fluid {
  display: flex;
  align-items: center;
}

/* ============================================
   Search Button Styling
   ============================================ */

/* Base styles */
#searchBar button,
#docsSearch #searchBar button {
  background-color: #006d77 !important;
  color: #ffffff !important;
  border-color: #006d77 !important;
  transition: all 0.2s ease;
}

#searchBar button:hover,
#docsSearch #searchBar button:hover {
  background-color: #005a63 !important;
  border-color: #005a63 !important;
}

#searchBar button:focus,
#docsSearch #searchBar button:focus {
  background-color: #005a63 !important;
  border-color: #006d77 !important;
  outline: 2px solid #006d77;
  outline-offset: 2px;
}

#searchBar button:active,
#docsSearch #searchBar button:active {
  background-color: #004a52 !important;
  border-color: #004a52 !important;
}

#searchBar button i,
#searchBar button span,
#docsSearch #searchBar button i,
#docsSearch #searchBar button span {
  color: #ffffff !important;
}

/* Responsive search button adjustments */
/* sm: 640px and up */
@media (min-width: 640px) {
  #searchBar button,
  #docsSearch #searchBar button {
    padding: 0.5rem 1rem;
  }
}

/* md: 768px and up */
@media (min-width: 768px) {
  #searchBar button,
  #docsSearch #searchBar button {
    padding: 0.625rem 1.25rem;
  }
}

/* lg: 1024px and up */
@media (min-width: 1024px) {
  #searchBar button,
  #docsSearch #searchBar button {
    padding: 0.75rem 1.5rem;
  }
}