/* ============================================================
   Velzora Sidebar — global layout for sidebar pages
   Reuses tokens from leads.css (--bg, --card, --txt, --p, etc.)
   ============================================================ */

:root {
  --vz-w-expanded:  200px;
  --vz-w-collapsed: 56px;
  --vz-w: var(--vz-w-expanded);
  --vz-transition: 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* leads.css sets body{overflow:hidden} which is what we want here too —
   the sidebar is fixed, the main content scrolls inside its own container */
body.vz-layout {
  overflow: hidden;
}

/* When sidebar is collapsed, change the width var */
.vz-sidebar.collapsed { --vz-w: var(--vz-w-collapsed); }

/* Push main content to the right of the sidebar.
   Width must also shrink, otherwise width:100% + margin-left = overflow.
   We use a body class (.sidebar-collapsed) set by JS — more reliable than :has(). */
body.vz-layout > .page {
  margin-left: var(--vz-w-expanded);
  width: calc(100vw - var(--vz-w-expanded));
  /* leads.css uses height:calc(100vh - 50px) assuming a top header.
     Sidebar layout has no top header, so reclaim the full height.
     Page itself becomes the scroll container — children should not have
     their own overflow:auto/hidden that would cause double-scroll. */
  height: 100vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  transition: margin-left var(--vz-transition), width var(--vz-transition);
}

/* Settings pages have inline styles like .settings-main {max-width:860px; margin:0 auto}
   that center content — looks weird inside a sidebar layout. Left-align instead. */
body.vz-layout .settings-main,
body.vz-layout .page-inner {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
}
body.vz-layout.sidebar-collapsed > .page {
  margin-left: var(--vz-w-collapsed);
  width: calc(100vw - var(--vz-w-collapsed));
}

/* ── Sidebar shell ───────────────────────────────────────── */
.vz-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--vz-w);
  background: var(--card);
  border-right: 1px solid var(--bdr);
  display: flex;
  flex-direction: column;
  z-index: 100;
  transition: width var(--vz-transition);
  overflow: hidden;
  font-family: 'Inter', -apple-system, sans-serif;
}

/* ── Logo ────────────────────────────────────────────────── */
.vz-logo {
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 16px;
  border-bottom: 1px solid var(--bdr);
  text-decoration: none;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
}
.vz-sidebar.collapsed .vz-logo:hover { background: var(--card2); }
.vz-logo-full {
  height: 30px; width: auto; display: block;
  max-width: 168px;
  color: var(--txt);
}
.vz-logo-mark {
  height: 34px; width: 34px; display: none;
}
/* In light mode: hide the dark rounded square bg — V floats on white sidebar.
   Dark mode keeps the rounded square (looks great against dark sidebar). */
:root[data-theme="light"] .vz-logo-mark .vz-mark-bg,
html:not([data-theme="dark"]) .vz-logo-mark .vz-mark-bg {
  display: none;
}
.vz-sidebar.collapsed .vz-logo {
  padding: 0;
  justify-content: center;
}
.vz-sidebar.collapsed .vz-logo-full { display: none; }
.vz-sidebar.collapsed .vz-logo-mark { display: block; }

/* ── Nav ─────────────────────────────────────────────────── */
.vz-nav {
  flex: 1;
  padding: 10px 8px;
  overflow-y: auto;
  overflow-x: hidden;
}
.vz-nav::-webkit-scrollbar { width: 4px; }
.vz-nav::-webkit-scrollbar-thumb { background: var(--bdr); border-radius: 2px; }

.vz-section {
  margin-bottom: 6px;
}
.vz-section + .vz-section {
  border-top: 1px solid transparent;
  padding-top: 6px;
  margin-top: 6px;
}
.vz-sidebar.collapsed .vz-section + .vz-section {
  border-top-color: var(--bdr);
}

.vz-section-label {
  padding: 8px 10px 4px;
  font-size: 10px;
  font-weight: 700;
  color: var(--txt3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity 120ms, height 120ms;
}
.vz-sidebar.collapsed .vz-section-label {
  opacity: 0;
  height: 0;
  padding: 0;
}

/* ── Nav items ───────────────────────────────────────────── */
.vz-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r);
  color: var(--txt2);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms, color 120ms;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
}
.vz-item:hover {
  background: var(--card2);
  color: var(--txt);
}
.vz-item.active {
  background: var(--p-tint);
  color: var(--p);
  font-weight: 600;
}
.vz-ico {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.vz-label {
  transition: opacity 120ms;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vz-sidebar.collapsed .vz-item {
  justify-content: center;
  padding: 9px 0;
}
.vz-sidebar.collapsed .vz-label {
  opacity: 0;
  width: 0;
  display: none;
}

/* ── Tooltips on collapsed mode ──────────────────────────── */
/* Override overflow:hidden on parents so the tooltip can escape sidebar bounds */
.vz-sidebar.collapsed { overflow: visible; }
.vz-sidebar.collapsed .vz-nav { overflow: visible; }
.vz-sidebar.collapsed .vz-item,
.vz-sidebar.collapsed .vz-collapse,
.vz-sidebar.collapsed .vz-user { overflow: visible; }

.vz-sidebar.collapsed [data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  background: rgba(20, 20, 25, 0.95);
  color: #fff;
  padding: 6px 10px;
  border-radius: var(--r);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  z-index: 1000;
  animation: vzTooltipIn 100ms ease-out;
}
@keyframes vzTooltipIn {
  from { opacity: 0; transform: translateY(-50%) translateX(-4px); }
  to   { opacity: 1; transform: translateY(-50%) translateX(0); }
}

/* ── Footer ──────────────────────────────────────────────── */
.vz-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--bdr);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vz-btn {
  background: transparent;
  border: none;
  font-family: inherit;
  width: 100%;
  text-align: left;
}

/* User pill */
.vz-user {
  position: relative;
  cursor: pointer;
  border-radius: var(--r);
  transition: background 120ms;
}
.vz-user:hover { background: var(--card2); }
.vz-user-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
}
.vz-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--p);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vz-user-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.vz-user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--txt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vz-user-sub {
  font-size: 10px;
  color: var(--txt3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vz-user-chev {
  color: var(--txt3);
  flex-shrink: 0;
}
.vz-user-chev svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 150ms;
}
.vz-user.open .vz-user-chev svg { transform: rotate(180deg); }

.vz-sidebar.collapsed .vz-user-row { justify-content: center; padding: 8px 0; }
.vz-sidebar.collapsed .vz-user-info,
.vz-sidebar.collapsed .vz-user-chev { display: none; }

/* User dropdown */
.vz-user-drop {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 8px;
  right: 8px;
  background: var(--card);
  border: 1px solid var(--bdr);
  border-radius: var(--r2);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  padding: 4px;
  display: none;
  z-index: 200;
}
[data-theme="dark"] .vz-user-drop { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); }
.vz-user.open .vz-user-drop { display: block; }
.vz-sidebar.collapsed .vz-user-drop {
  left: calc(100% + 8px);
  right: auto;
  bottom: 0;
  width: 180px;
}

.vz-drop-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r);
  cursor: pointer;
  font-size: 13px;
  color: var(--txt2);
  transition: background 100ms;
}
.vz-drop-item:hover { background: var(--card2); color: var(--txt); }
.vz-drop-item.danger { color: var(--err, #A32D2D); }
.vz-drop-item.danger:hover { background: var(--err-bg, #FCEBEB); }
.vz-drop-item svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.vz-drop-divider {
  height: 1px;
  background: var(--bdr);
  margin: 4px 0;
}

/* Collapse toggle button at bottom */
.vz-collapse {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 6px 10px;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 11px;
  color: var(--txt3);
  cursor: pointer;
  border-radius: var(--r);
  transition: background 120ms;
}
.vz-collapse:hover { background: var(--card2); color: var(--txt2); }
.vz-collapse svg {
  width: 11px;
  height: 11px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.vz-sidebar.collapsed .vz-collapse {
  justify-content: center;
  padding: 8px 0;
}
.vz-sidebar.collapsed .vz-collapse-label { display: none; }

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Sidebar slides in from left when toggled; off-screen by default */
  .vz-sidebar {
    transform: translateX(-100%);
    transition: transform var(--vz-transition);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
    border-right: none;
  }
  .vz-sidebar.mobile-open { transform: translateX(0); }

  /* Page reclaims the full viewport — no sidebar reservation */
  body.vz-layout > .page {
    margin-left: 0 !important;
    width: 100vw !important;
  }

  /* Hamburger button — fixed top-left, opens sidebar */
  .vz-hamburger {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 90;
    width: 36px;
    height: 36px;
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--r);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  .vz-hamburger svg {
    width: 18px;
    height: 18px;
    stroke: var(--txt);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
  }

  /* Backdrop when sidebar is open */
  .vz-mobile-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--vz-transition);
  }
  body.vz-layout.sidebar-open .vz-mobile-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* Push title bar right so it doesn't hit hamburger */
  .an-topbar { padding-left: 56px !important; }
  .pipe-topbar { padding-left: 56px !important; }
}

/* Hamburger only on mobile */
.vz-hamburger { display: none; }
.vz-mobile-backdrop { display: none; }
@media (max-width: 768px) {
  .vz-hamburger { display: inline-flex; }
  .vz-mobile-backdrop { display: block; }
}