/* ============================================================
   sidebar.css - Teal design system
   ============================================================ */

.sidebar {
  width: var(--sidebar-width, 210px);
  min-width: var(--sidebar-width, 210px);
  background: var(--sidebar-bg);
  height: 100%; /* relative to .app-shell (min-height: 100vh), not the raw
                   viewport directly - avoids the vh-measurement issue
                   zoom caused when this was 100vh */
  position: sticky;
  top: 0;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  padding: 16px 0 14px;
  zoom: 85%;
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.05), 6px 0 26px -12px rgba(10,20,45,0.5);
  overflow-y: auto;
}

/* ---- Logo block ---- */
.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px 22px;
  border-bottom: 1px solid var(--side-line);
  margin-bottom: 14px;
}
.sidebar-logo-icon {
  font-size: 1.8rem;
  color: #FFFFFF;
  background: linear-gradient(155deg, var(--sidebar-bg-light), var(--sidebar-bg));
  box-shadow: 0 0 16px rgba(242,169,59,0.45);
  border-radius: 10px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.sidebar-logo-line1 {
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  line-height: 1.1;
  font-family: var(--font-serif);
}
.sidebar-logo-line2 {
  color: var(--gold);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 1.5px;
  line-height: 1.1;
}

/* ---- Nav links ---- */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0 12px;
  flex: 1;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #C6CEDF;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  padding: 11px 14px;
  border-radius: 9px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-left: 3px solid transparent;
  transition: background .18s ease, color .18s ease, transform .12s ease;
}
.nav-link-icon {
  font-size: 1rem;
  flex: 0 0 auto;
  line-height: 1;
}
.nav-link-text {
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-link:hover {
  background: rgba(255,255,255,0.11);
  color: #FFFFFF;
  transform: translateX(2px);
}
.nav-link-active {
  background: var(--gold) !important;
  color: var(--navy-text) !important;
  font-weight: 700;
  opacity: 1;
  border-left: 3px solid var(--gold-dark);
  box-shadow: 0 3px 10px rgba(242,169,59,0.35);
}

/* ---- Footer "Our Goal" callout ---- */
.sidebar-footer {
  margin: 18px 14px 0;
  background: var(--sidebar-bg-light);
  border-radius: 12px;
  padding: 16px 14px;
  text-align: left;
}
.sidebar-footer-header-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.sidebar-footer-icon { font-size: 1.3rem; }
.sidebar-footer-title {
  color: var(--gold);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.sidebar-footer-text {
  color: #FFFFFF;
  font-size: 0.85rem;
  line-height: 1.4;
}

/* Tablet-only icon rail - deliberately excludes screens at or below
   768px, since those are handled entirely by the separate hamburger
   slide-in/out system in style.css. These two breakpoints used to
   overlap (both active at once on a phone), which caused this rule's
   unconditional width: 76px to silently persist underneath the other
   system's open/close transform - the sidebar would "open" but only
   ever at icon-rail width, no matter what mobile-nav-active did. */
@media (min-width: 769px) and (max-width: 900px) {
  .sidebar { width: 76px; min-width: 76px; }
  .sidebar-logo-line1, .sidebar-logo-line2, .sidebar-footer { display: none; }
  .nav-link { justify-content: center; padding: 12px; }
  .nav-link-text { display: none; }
  .nav-link-icon { font-size: 1.1rem; }
}