/* static/shared/vivian-navbar.css — Shared Vivian Top Bar Styles */

.vn-navbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 20px; background: #0f1322;
  border-bottom: 1px solid #1e2640; position: sticky; top: 0; z-index: 1000;
  gap: 12px; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.vn-left { display: flex; align-items: center; gap: 6px; }
.vn-logo {
  font-size: 1.2rem; font-weight: 800; text-decoration: none;
  background: linear-gradient(135deg, #818cf8, #6366f1);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; margin-right: 8px;
}
.vn-right { display: flex; align-items: center; gap: 8px; }

/* ── Dropdown ── */
.vn-dropdown { position: relative; display: inline-block; }
.vn-dd-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 7px 14px; border-radius: 8px; font-size: .8rem;
  font-weight: 500; cursor: pointer; border: 1px solid #2a3355;
  background: #0f1322; color: #8892a8;
  transition: .18s ease; white-space: nowrap; font-family: inherit;
}
.vn-dd-btn:hover { border-color: #3a4470; color: #e8ecf4; }
.vn-arrow { font-size: .6rem; transition: .18s ease; }
.vn-dropdown.vn-open .vn-dd-btn { border-color: #818cf8; color: #e8ecf4; }
.vn-dropdown.vn-open .vn-arrow { transform: rotate(180deg); }
.vn-dd-menu {
  display: none; position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 240px; background: #0f1322; border: 1px solid #1e2640;
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.4);
  padding: 6px; z-index: 2000;
}
.vn-dropdown.vn-open .vn-dd-menu { display: block; }
.vn-dd-section {
  padding: 6px 10px 4px; font-size: .62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: #5a6380;
}
.vn-dd-menu a {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 6px; font-size: .82rem;
  color: #8892a8; text-decoration: none; transition: .18s ease;
}
.vn-dd-menu a:hover { background: #161c30; color: #e8ecf4; }
.vn-dd-icon { font-size: 1rem; width: 20px; text-align: center; }
.vn-dd-divider { height: 1px; background: #1e2640; margin: 4px 0; }

/* ── Buttons ── */
.vn-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 16px; border-radius: 8px; font-size: .8rem;
  font-weight: 600; cursor: pointer; text-decoration: none;
  transition: .18s ease; white-space: nowrap; font-family: inherit;
}
.vn-btn-outline {
  background: transparent; border: 1px solid #2a3355; color: #8892a8;
}
.vn-btn-outline:hover { border-color: #818cf8; color: #e8ecf4; }
.vn-btn-primary {
  background: linear-gradient(135deg, #818cf8, #6366f1); color: #fff; border: none;
}
.vn-btn-primary:hover { filter: brightness(1.1); }

/* ── Avatar ── */
.vn-avatar-wrap { position: relative; cursor: pointer; }
.vn-avatar-img {
  width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
  border: 2px solid #2a3355; transition: .18s ease;
}
.vn-avatar-img:hover { border-color: #818cf8; }
.vn-avatar-ph {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #818cf8, #6366f1);
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 700; color: #fff;
}
.vn-avatar-dd {
  display: none; position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 200px; background: #0f1322; border: 1px solid #1e2640;
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.4);
  padding: 6px; z-index: 2000;
}
.vn-avatar-dd.vn-open { display: block; }
.vn-ad-user {
  padding: 10px 12px; display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid #1e2640; margin-bottom: 4px;
}
.vn-ad-name { font-weight: 600; font-size: .85rem; color: #e8ecf4; }
.vn-ad-role { font-size: .68rem; color: #5a6380; }
.vn-avatar-dd a {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 6px; font-size: .8rem;
  color: #8892a8; text-decoration: none; cursor: pointer;
  transition: .18s ease;
}
.vn-avatar-dd a:hover { background: #161c30; color: #e8ecf4; }

/* ── Responsive ── */
@media (max-width: 600px) {
  .vn-navbar { padding: 6px 12px; }
  .vn-dd-menu { right: auto; left: 0; min-width: 200px; }
  .vn-btn { padding: 5px 10px; font-size: .72rem; }
  .vn-dd-btn { padding: 5px 10px; font-size: .72rem; }
}