/* ==========================================================================
   CodeAssist Pro — Global Custom Styles
   Applied site-wide via base.html.  Extend in template-specific blocks.
   ========================================================================== */

/* Smooth scrolling for anchor links */
html {
  scroll-behavior: smooth;
}

/* Ensure body takes full height */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Main content grows to fill space */
main {
  flex: 1;
}

/* Utility: visually hidden but accessible */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== User Profile Dropdown Navbar ===== */

/* Vertical rule that separates nav links from the profile pill */
.nav-profile-separator {
  border-left: 1.5px solid #dee2e6;
  height: 28px;
  align-self: center;
  margin: 0 .75rem;
}

/* Pill wrapper — gives the toggle a subtle contained look */
.user-avatar-toggle {
  background: #f0f4ff;
  border: 1px solid #d3deff;
  border-radius: 50px !important;
  padding: .3rem .75rem .3rem .3rem !important;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.user-avatar-toggle:hover,
.user-avatar-toggle.show {
  background: #e4ebff;
  border-color: #aec0fc;
  box-shadow: 0 2px 10px rgba(13,110,253,.18);
  text-decoration: none;
}

.user-avatar-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0d6efd 0%, #6610f2 100%);
  color: #fff;
  font-weight: 700;
  font-size: .8rem;
  flex-shrink: 0;
  letter-spacing: 0;
  box-shadow: 0 2px 6px rgba(13,110,253,.35);
  transition: box-shadow .2s ease, transform .2s ease;
}

.user-avatar-toggle:hover .user-avatar-circle,
.user-avatar-toggle.show .user-avatar-circle {
  box-shadow: 0 4px 12px rgba(13,110,253,.5);
  transform: scale(1.05);
}

/* Remove Bootstrap's default dropdown caret arrow */
.user-avatar-toggle::after { display: none; }

.user-dropdown-menu {
  min-width: 210px;
  border-radius: .75rem !important;
  padding: .4rem 0;
  margin-top: .5rem !important;
  box-shadow: 0 8px 30px rgba(0,0,0,.12) !important;
  animation: dropdownFadeIn .15s ease;
}

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

.user-dropdown-menu .dropdown-header {
  color: inherit;
  font-size: 1rem;
  white-space: normal;
}

.user-dropdown-menu .dropdown-item {
  border-radius: .5rem;
  margin: 0 .35rem;
  width: auto;
  transition: background .15s ease;
  font-size: .9rem;
}

.user-dropdown-menu .dropdown-item i {
  width: 18px;
  text-align: center;
  font-size: 1rem;
}

.user-dropdown-menu .dropdown-item.text-danger:hover {
  background: #fff0f0;
}