/* ============================================
   IB Tree  (#ibTreePage)
   ============================================ */

/* ── Scroll container ──────────────────────── */
#ibTreePage .ibt-scroll {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  scrollbar-width: thin;
  scrollbar-color: rgba(37, 99, 235, 0.45) rgba(241, 245, 249, 0.95);
}
#ibTreePage .ibt-scroll::-webkit-scrollbar { height: 8px; }
#ibTreePage .ibt-scroll::-webkit-scrollbar-track {
  background: rgba(241, 245, 249, 0.95);
  border-radius: 999px;
}
#ibTreePage .ibt-scroll::-webkit-scrollbar-thumb {
  background: rgba(37, 99, 235, 0.45);
  border-radius: 999px;
}

/* ── Chart canvas ──────────────────────────── */
#ibTreePage .ibt-chart {
  display: inline-block; /* lets scroll container size to content */
  min-width: 2000px;     /* forces horizontal scroll when needed */
  position: relative;   /* anchor JS bridge */
}

@media (max-width: 767.98px) {
  #ibTreePage .ibt-chart {
    min-width: 1600px;
  }
}

/* Mobile-only: keep desktop identical, improve fit */
@media (max-width: 575.98px) {
  /* Avoid transform scaling (causes connector gaps). Shrink nodes instead. */
  #ibTreePage .ibt-node {
    min-width: 200px;
    max-width: 240px;
  }

  #ibTreePage .ibt-card-slot {
    max-width: 240px;
  }

  #ibTreePage .ibt-avatar {
    width: 38px !important;
    height: 38px !important;
  }

  #ibTreePage .ibt-node .fw-bold {
    font-size: 0.9rem;
  }

  #ibTreePage .ibt-node .text-secondary.small {
    font-size: 0.72rem;
  }

  #ibTreePage .ibt-stat-pill {
    font-size: 0.65rem;
    padding: 0.35rem 0.5rem;
  }

  /* Reduce pillar widths & gaps on mobile (still scrolls) */
  #ibTreePage .ibt-grid-main {
    gap: 28px;
  }

  #ibTreePage .ibt-pillar {
    width: 720px;
    min-width: 720px;
  }

  #ibTreePage .ibt-pillar--center {
    width: 280px;
    min-width: 280px;
  }

  #ibTreePage .ibt-child-node {
    width: 220px;
  }

  #ibTreePage .ibt-children-flex {
    gap: 12px;
  }

  /* Make scrollbar obvious */
  #ibTreePage .ibt-scroll {
    padding-bottom: 14px;
  }

  /* Mobile requirement: last 3 cards INLINE (3 columns), not stacked */
  #ibTreePage .ibt-grid3 {
    grid-template-columns: repeat(3, 240px) !important;
    justify-content: center;
    column-gap: 12px;
    row-gap: 14px;
    max-width: none;
    width: max-content;
    margin-left: auto;
    margin-right: auto;
  }

  /* Keep the merge connector horizontal on mobile, aligned to the 3 cards */
  #ibTreePage .ibt-hub--merge {
    width: 744px; /* 3*240 + 2*12 */
    max-width: none;
    margin: -2px auto 0; /* attach to center stem */
    position: relative;
  }

  #ibTreePage .ibt-hub--merge .ibt-hub-arr {
    display: none;
  }

  /* Bridge the remaining gap from center stem to merge bar */
  #ibTreePage .ibt-hub--merge::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -18px;
    width: 2px;
    height: 18px;
    background: rgba(148, 163, 184, 0.55);
    transform: translateX(-50%);
  }

  /* Prefer JS-drawn bridge (pixel-perfect) */
  #ibTreePage .ibt-hub--merge::before { display: none; }

  /* Extend the small vlines so they reach the merge bar */
  #ibTreePage .ibt-vline--sm {
    height: 22px;
  }
}

/* Level-1 hub positioning is computed by JS */

/* ── Card node ─────────────────────────────── */
#ibTreePage .ibt-node {
  min-width: 240px;
  max-width: 280px;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10) !important;
}
#ibTreePage .ibt-avatar {
  object-fit: cover;
  border: 3px solid #e2e8f0;
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.10);
}
#ibTreePage .ibt-stat-pill {
  background: #fff;
  color: #64748b;
  border: 1px solid rgba(148, 163, 184, 0.35);
  font-size: 0.7rem;
  padding: 0.4rem 0.55rem;
  font-weight: 700;
}

/* Card wrapper inside grid columns */
#ibTreePage .ibt-card-slot {
  max-width: 280px;
  width: 100%;
}

/* ── Layout helpers ────────────────────────── */
#ibTreePage .ibt-center {
  display: flex;
  justify-content: center;
}

/* 3-column grid (level 1, level 3) */
#ibTreePage .ibt-grid3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 1.25rem;
  max-width: 980px;
  margin: 0 auto;
  align-items: start;
}

/* Generic column */
#ibTreePage .ibt-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── Vertical lines ────────────────────────── */
#ibTreePage .ibt-vline {
  width: 2px;
  height: 24px;
  background: rgba(148, 163, 184, 0.55);
  margin: 0 auto;
}
#ibTreePage .ibt-vline--sm {
  height: 18px;
  margin-bottom: 2px;
}
#ibTreePage .ibt-vline--merge {
  height: 28px;
  margin-top: 16px;
}

/* ── Hub bar (horizontal connector) ────────── */
#ibTreePage .ibt-hub {
  position: relative;
  height: 2px;
  background: rgba(148, 163, 184, 0.55);
  margin: 0 auto;
}
#ibTreePage .ibt-hub--l1 {
  max-width: none; /* JS controls width so don't cap */
  width: auto;
}
#ibTreePage .ibt-hub--merge {
  max-width: 680px;
  width: 68%;
}

/* Hub wrapper adds the 3 vertical drops down to the 3 cards */
#ibTreePage .ibt-hubwrap {
  position: relative;
  max-width: none;
  width: 100%;
  margin: 0 auto;
  height: 52px; /* hub line + drop lines (reaches cards) */
}

#ibTreePage .ibt-hubwrap .ibt-hub {
  position: absolute;
  left: 0;
  top: 0;
}

#ibTreePage .ibt-drop {
  position: absolute;
  top: 0;
  width: 2px;
  height: 52px;
  background: rgba(148, 163, 184, 0.55);
  transform: translateX(-50%);
}

/* dot/drop left positions are set inline by JS */

#ibTreePage .ibt-vline--top {
  height: 22px;
  margin-bottom: 2px;
}

/* JS-drawn mobile bridge (Sara stem → merge hub) */
#ibTreePage .ibt-mobile-center-bridge {
  display: none;
  position: absolute;
  width: 2px;
  background: rgba(148, 163, 184, 0.55);
  transform: translateX(-50%);
  z-index: 1;
}

/* Pull row-1 cards closer so drops attach */
#ibTreePage .ibt-grid3 {
  margin-top: -10px;
}

/* Blue dots on hub */
#ibTreePage .ibt-hub-dot {
  position: absolute;
  top: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
  transform: translateX(-50%);
  z-index: 2;
}

/* Blue arrows on hub */
#ibTreePage .ibt-hub-arr {
  position: absolute;
  top: -5px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
#ibTreePage .ibt-hub-arr--l { border-right: 8px solid #2563eb; }
#ibTreePage .ibt-hub-arr--r { border-left: 8px solid #2563eb; }

/* Arrow positions – level-1 hub */
#ibTreePage .ibt-hub--l1 .ibt-hub-arr--l { left: 5%; }
#ibTreePage .ibt-hub--l1 .ibt-hub-arr--r { right: 5%; }

/* Arrow positions – merge hub */
#ibTreePage .ibt-hub--merge .ibt-hub-arr--l { left: 10%; }
#ibTreePage .ibt-hub--merge .ibt-hub-arr--r { right: 10%; }

/* ── Branches (level 2 grid) ───────────────── */
#ibTreePage .ibt-grid3--branch {
  margin-top: 4px;
  row-gap: 0;
  align-items: start;
}

/* ── Pillar layout (fixes broken links + prevents overlap) ───────────── */
#ibTreePage .ibt-grid-main {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 60px;
  width: max-content; /* allow expansion (scroll) */
  margin: 0 auto;
}

#ibTreePage .ibt-pillar {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 860px; /* 3 children cards + gaps */
  min-width: 860px;
}

#ibTreePage .ibt-pillar--center {
  width: 320px;
  min-width: 320px;
}

#ibTreePage .ibt-connector-vertical {
  width: 2px;
  height: 30px;
  background: rgba(148, 163, 184, 0.55);
  margin: 10px auto 0;
}

#ibTreePage .ibt-children-flex {
  display: flex;
  justify-content: center;
  gap: 16px;
  width: 100%;
  margin-top: 4px;
}

#ibTreePage .ibt-child-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 260px;
}

#ibTreePage .ibt-vline--extra-long {
  width: 2px;
  height: 260px; /* adjust to sit below side branches */
  background: rgba(148, 163, 184, 0.55);
  margin: 0 auto;
  position: relative;
}

#ibTreePage .ibt-vline--extra-long::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
  z-index: 2;
}

/* ensure merge hub touches the end of the long stem */
#ibTreePage .ibt-hub--merge {
  margin-top: -2px;
}

/* Branch wrapper */
#ibTreePage .ibt-branch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

/* Branch hub containers */
#ibTreePage .ibt-bhub {
  position: relative;
  height: 42px;
  width: 100%;
}

#ibTreePage .ibt-branch-grid3 {
  display: grid;
  grid-template-columns: repeat(3, 240px);
  gap: 1rem;
  width: max-content;
  align-items: start;
}

/* Stem (vertical line from parent card down into hub) */
#ibTreePage .ibt-bstem {
  position: absolute;
  top: 0;
  width: 2px;
  height: 28px;
  background: rgba(148, 163, 184, 0.55);
  transform: translateX(-50%);
}

/* Horizontal bar inside branch hub */
#ibTreePage .ibt-bbar {
  position: absolute;
  top: 28px;
  height: 2px;
  background: rgba(148, 163, 184, 0.55);
}

/* Branch hub dot */
#ibTreePage .ibt-bdot {
  position: absolute;
  top: 24px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
  transform: translateX(-50%);
  z-index: 2;
}

/* Branch hub arrow */
#ibTreePage .ibt-barr {
  position: absolute;
  top: 23px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
#ibTreePage .ibt-barr--l { border-right: 8px solid #2563eb; }
#ibTreePage .ibt-barr--r { border-left: 8px solid #2563eb; }

/* Branch card columns (explicit grid placement) */
/* (old explicit placement removed; now using .ibt-branch-grid3) */

/* ── Responsive ────────────────────────────── */
@media (max-width: 767.98px) {
  #ibTreePage .ibt-grid3 {
    grid-template-columns: 1fr;
    max-width: 100%;
  }
  #ibTreePage .ibt-grid-main {
    gap: 28px;
  }
  #ibTreePage .ibt-vline--extra-long {
    height: 90px;
  }
  #ibTreePage .ibt-pillar {
    width: 860px;
  }
}