/**
 * VitalCoach App Sidebar — CANONICAL COPY (2026-07-21)
 * Includes both structural layout AND visual theme ("Demo Style").
 *
 * This file is the single source of truth. /css/vc-sidebar.css is now a shim
 * that @imports this one, because the two paths used to serve DIFFERENT files:
 * on vitalcoach.bizbottech.com the `/:path+ -> /vitalcoach/:path+` rewrite in
 * vercel.json made `/css/x.css` resolve here, while on bizbottech.com/vitalcoach/*
 * the same href resolved to /public/website/css/x.css. Coach pages now link
 * `css/vc-sidebar.css` RELATIVE, which resolves to this file on both hosts.
 *
 * Merged back in from the old root fork: the .btn-logout entry in the
 * legacy-footer hide list below.
 *
 * NOT merged (reverted 2026-07-21): the root fork's
 * `@import url('/css/mobile-android.css')`. The subdomain — the primary,
 * tested host — has never served that file to these coach pages, and it
 * applies global !important rules (16px form fonts, table{display:block},
 * 44px min tap targets, html/body overflow clamps, universal tap-highlight)
 * that would restyle 17 untested pages. Do not re-add it here.
 */

/* ── Sidebar shell ── */
.sidebar {
  width: 220px !important;
  background: #0C0C0A !important;
  border-right: 1px solid rgba(255,255,255,0.07) !important;
  /* Structural — previously only in inline styles */
  display: flex !important;
  flex-direction: column !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  z-index: 50 !important;
  min-height: 100vh !important;
  overflow: hidden !important;
}

/* ── Logo header ── */
.sidebar-header {
  padding: 18px 14px 14px !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  flex-shrink: 0 !important;
}
.sidebar-logo,
.sidebar-logo:visited,
.sidebar-logo:hover,
.sidebar-logo:active {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #F8FAFC !important;
  letter-spacing: -0.02em !important;
}
.sidebar-logo img { height: 22px !important; width: auto !important; }
.sidebar-logo-icon {
  width: 28px !important;
  height: 28px !important;
  background: #D4FF3A !important;
  border-radius: 7px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* ── Nav body ── */
.sidebar-nav {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 10px 8px !important;
  gap: 1px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Section labels */
.nav-section {
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #4B5563 !important;
  padding: 14px 10px 4px !important;
  display: block !important;
}
.nav-label { display: none !important; }

/* ── Nav items ── */
.nav-item {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  color: #6B7280 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border: 1px solid transparent !important;
  position: relative !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background 0.12s, color 0.12s !important;
}
.nav-item:hover {
  background: rgba(255,255,255,0.05) !important;
  color: #D1D5DB !important;
  border-color: transparent !important;
}
.nav-item.active {
  background: #1A1A17 !important;
  color: #F8FAFC !important;
  border-color: rgba(255,255,255,0.09) !important;
}
.nav-item .icon { display: none !important; }

/* SVG nav icons */
.sidebar .nav-icon,
.sidebar svg.nav-icon {
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  min-height: 15px !important;
  flex-shrink: 0 !important;
  color: currentColor !important;
  opacity: 0.65;
  transition: opacity 0.12s;
  display: block !important;
}
.sidebar .nav-item:hover .nav-icon,
.sidebar .nav-item.active .nav-icon { opacity: 1; }

/* Constrain any stray SVG inside sidebar */
.sidebar svg:not(.nav-icon) {
  max-width: 28px !important;
  max-height: 28px !important;
}

/* Count badge */
.nav-badge {
  margin-left: auto !important;
  background: rgba(255,255,255,0.08) !important;
  color: #9CA3AF !important;
  border-radius: 999px !important;
  padding: 1px 7px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0 !important;
}
.nav-item.active .nav-badge {
  background: rgba(212,255,58,0.15) !important;
  color: #D4FF3A !important;
}

/* Red notification dot */
.nav-dot {
  margin-left: auto !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #EF4444 !important;
  flex-shrink: 0 !important;
  box-shadow: 0 0 0 2px rgba(239,68,68,0.2);
  display: block !important;
}

/* ── Footer ── */
.sidebar-footer {
  flex-shrink: 0 !important;
  padding: 10px 8px !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  margin-top: auto !important;
}
.user-pill {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: background 0.12s;
  text-decoration: none !important;
}
.user-pill:hover { background: rgba(255,255,255,0.05) !important; }
.user-avatar {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: #D4FF3A !important;
  color: #0E0E0C !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.user-name {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #E2E8F0 !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.user-plan {
  font-size: 11px !important;
  color: #6B7280 !important;
}

/* Hide legacy footer elements */
.user-info, .btn-logout, .sidebar-tagline { display: none !important; }

/* Main area shift — body must be display:flex per page */
.main { margin-left: 220px !important; }

@media (max-width: 900px) {
  .sidebar {
    display: none !important;
    transform: translateX(-100%);
  }
  .sidebar.vc-open {
    display: flex !important;
    transform: translateX(0);
    box-shadow: 4px 0 32px rgba(0,0,0,0.6);
  }
  .main { margin-left: 0 !important; }
}