.navbar {
    display: flex;
    align-items: center;
    background: #111;
    padding: 12px 16px;
    color: white;
    border-bottom: 1px solid #1f1f1f;
}

.logo {
    font-size: 32px;
    font-weight: bold;
    color: #b57cff;
    margin-right: 20px;
    text-decoration: none;
}

/* Library links inside navbar */
.library-links {
    display: flex;
    gap: 16px;
    margin-right: auto; /* Push search to right */
}

.library-links a {
    color: #b57cff;
    font-weight: 600;
    text-decoration: none;
    font-size: 18px;
    padding: 6px 10px;
    border-radius: 4px;
    transition: background 0.2s;
}

.library-links a:hover,
.library-links a.active {
    background: #2a2a2a;
}

.nav-items {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Ensure dropdown menus in the navbar don't get clipped on the right side
   (body uses overflow-x:hidden to prevent horizontal scroll). */
.navbar .dropdown{ position: relative; }
.navbar .dropdown-menu-end{
  right: 0 !important;
  left: auto !important;
}

.search-bar {
    display: flex;
    align-items: center;
    background: #1d1d1d;
    border-radius: 30px;
    padding: 8px 14px;
}

/* On the homepage we already have the hero search.
   Hide the navbar search on mobile to avoid duplicate search inputs. */
@media (max-width: 768px) {
  body.page-index .navbar .search-bar{
    display:none;
  }
}

.search-bar input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 16px;
    color: white;
    outline: none;
}

.menu-btn,
.user-btn,
.search-btn {
    background: transparent;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
}

.user-btn{
    font-size: 16px;
    color:#fff;
    text-decoration:none;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid #2a2a2a;
    background:#1d1d1d;
}
.user-btn:hover{border-color:#b57cff;}

.avatar-btn{
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid #2a2a2a;
    background:#1d1d1d;
    color:#fff;
    font-weight: 800;
}
.avatar-btn:hover{border-color:#b57cff;}

.nav-dd{
    border: 1px solid #2a2a2a;
    background:#1d1d1d;
    color:#fff;
    padding: 6px 10px;
    border-radius: 10px;
    font-weight: 700;
}
.nav-dd:hover{border-color:#b57cff;}

.dropdown-item.danger{color:#ff6b6b; font-weight:700;}
.dropdown-item.danger:hover{background:#2a2a2a; color:#ff6b6b;}

.dropdown-item-text.muted{color:#9b9b9b;}


.admin-dd{
  display:flex;
  align-items:center;
  gap:6px;
}

.nav-admin-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:10px;
  border:1px solid transparent;
  text-decoration:none;
  color:#e5e5e5;
}

.nav-admin-link:hover{
  background:#1f1f1f;
  border-color:#2a2a2a;
}

.scan-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid #262626;
  background:#121212;
  color:#e5e5e5;
  cursor:pointer;
}

/* Swirl ring while running (more obvious than rotating just the glyph) */
.scan-btn.running::before{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:14px;
  /* Solid purple (no gradients). */
  background: rgba(181,124,255,0.35);
  box-shadow: 0 0 0 2px rgba(181,124,255,0.65);
  animation: swirl 0.9s linear infinite;
  z-index:0;
}

.scan-btn > *{ position:relative; z-index:1; }

.scan-btn:hover{
  background:#1a1a1a;
  border-color:#3a3a3a;
}

.scan-dot{
  position:absolute;
  right:8px;
  top:8px;
  width:8px;
  height:8px;
  border-radius:999px;
  background:transparent;
}

.scan-dot.running{
  background:#22c55e;
  box-shadow: 0 0 0 4px rgba(34,197,94,0.18);
}

.scan-icon.spinning{
  animation: spin 0.9s linear infinite;
}

@keyframes swirl{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

@keyframes spin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}