/*


 */

@import url(/assets/pages/signup-4877e9bcab26c7a784af42a62025d97ec40a13111de6905408f85bffa50765e0.css);
@import url(/assets/posts-325632c72f749cbf4ebdd1bf83e7955429965d7c6e9fe2832945038221cf5eb8.css);
@import url(/assets/comments-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.css);
@import url(/assets/composer-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.css);
@import url(/assets/connections-a32441dab820c5077837cd20ad5ebbf524e0c86ee96ae4c0789003df3cd8a5cb.css);
@import url(/assets/mobile/mobile-40469409dae847e6f58a1f526e4de31124a95d94e01f0d2f56a193e2cdbdc400.css);
@import url(/assets/profile_layout-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.css);
@import url(/assets/organization_layout-c0be168403ab90e619bd0005357ed05f0d12439cbb9a9d81bda30bc949f6b543.css);
@import url(/assets/organization-d47dcd3c6e0398bfab2e03990a41be49e431e7eecc0f174a6079a4b0018b08fc.css);
@import url(/assets/groups-807daa419f97a94d858f94c98e0349329f2ffe5e5fc80a1afb3b2d18c4dde6de.css);

.auth-container {
  display: flex;
  justify-content: center;
  padding-top: 60px;
  padding-bottom: 30px;
}
.notification-dropdown {
  width: 360px;
  padding: 0;
}

.notification-item {
  padding: 12px 16px;
  transition: 0.2s;
}

.notification-item:hover {
  background: #f8fafc;
}

.notification-item.unread {
  background: #eff6ff;
}

.notification-dot {
  width: 10px;
  height: 10px;
  background: #2563eb;
  border-radius: 50%;
  display: inline-block;
  margin-top: 6px;
}

.dropdown-header {
  padding: 12px 16px;
}
.notification-badge {
  position: absolute;
  top: -8px;
  right: -10px;

  min-width: 18px;
  height: 18px;

  padding: 0 5px;

  border-radius: 999px;

  background: #dc3545;
  color: #fff;

  font-size: 10px;
  font-weight: 700;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 2px solid #fff;
}
:root {
  --bs-primary: #1b6ca8;
  --bs-primary-rgb: 27, 108, 168;
}
.btn-primary,
.btn-outline-primary {
  --bs-btn-color: #fff;

  --bs-btn-bg: #1b6ca8;
  --bs-btn-border-color: #1b6ca8;

  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #155986;
  --bs-btn-hover-border-color: #155986;

  --bs-btn-focus-shadow-rgb: 27, 108, 168;

  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #124b73;
  --bs-btn-active-border-color: #124b73;

  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #1b6ca8;
  --bs-btn-disabled-border-color: #1b6ca8;
}
.group-action-btn {
  min-width: 120px;
  height: 38px;

  padding: 0 18px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 14px;
  font-weight: 600;

  border-radius: 999px;
}
a {
  color: #1b6ca8;
}
.notification-dropdown {
  width: auto;
  padding: 0;
}
.nav-search .input-group-text,
.nav-search .form-control {
  height: 38px;
  font-size: 14px;
}

.nav-search .input-group-text {
  border-radius: 12px 0 0 12px;
  border-color: #dee2e6;
}

.nav-search .form-control {
  border-radius: 0 12px 12px 0;
  border-color: #dee2e6;
}

.nav-search .form-control:focus {
  box-shadow: none;
  border-color: #86b7fe;
}

.nav-search .input-group:focus-within .input-group-text {
  border-color: #86b7fe;
}
.sticky-sidebar {
  position: sticky;
  top: 90px; /* Adjust based on your navbar height */
  z-index: 10;
}
.stat-card {
  transition: all 0.2s ease;
  cursor: pointer;
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.12);
}
.fc-id-badge {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 0.45rem 1rem;
}
.auth-container {
  display: flex;
  justify-content: center;
  padding-top: 0px;
  padding-bottom: 0px;
}
.mb-4 {
  margin-bottom: 1rem !important;
}
.abc.card-body {
  padding: 0.5rem;
}
.fc-mobile-search {
  display: block;
}
.tree-avatar .chota-img {
  min-height: 45px;
  min-width: 45px;
}
.login-box {
  margin-top: 3rem;
}

@media (min-width: 768px) {
  .fc-mobile-search {
    display: none;
  }
}
.family-tree-wrapper {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.family-tree {
  display: inline-block;
  padding: 20px 30px 60px;
}

.tree-generation {
  text-align: center;
}

.tree-generation-label {
  color: #6c757d;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 18px;
  letter-spacing: 0.5px;
}
.family-tree-container {
  position: relative;
  overflow-x: auto;
}

.family-tree-content {
  position: relative;
  z-index: 2;

  display: inline-block;
}

.tree-svg {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  pointer-events: none;
  z-index: 1;

  overflow: visible;
}
/* PERSON CARD */

.tree-person {
  background: #fff;
  border: 2px solid #e5e7eb;
  border-radius: 16px;
  padding: 3px;
  width: 80px;
  min-height: 100px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);

  position: relative;
  z-index: 2;

  transition: all 0.25s ease;
}

.tree-person:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.tree-person-small {
  width: 120px;
  min-height: 95px;
}

.tree-person-empty {
  opacity: 0.55;
}

.tree-person-current {
  border: 2px solid #0d6efd;
}

/* .tree-person-empty {
  opacity: 0.6;
} */

/* AVATAR */

.tree-avatar {
  width: 42px;
  height: 42px;

  border-radius: 50%;

  background: #dbeafe;
  color: #2563eb;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 22px;

  margin-bottom: 10px;
}

.tree-person-current .tree-avatar {
  background: #0d6efd;
  color: #fff;
}

/* TEXT */

.tree-role {
  display: inline-block;

  /* padding: 3px 10px; */

  border-radius: 999px;

  background: #f3f4f6;
  color: #6b7280;

  font-size: 11px;
  font-weight: 600;

  margin-bottom: 8px;
}

.tree-person-current .tree-role {
  color: #0d6efd;
  font-weight: 600;
}

.tree-name {
  font-weight: 700;
  font-size: 12px;
}

/* COUPLE */

.tree-couple {
  display: flex;
  align-items: center;
  justify-content: center;
}

.couple-line {
  width: 45px;
  height: 2px;
  background: #adb5bd;
  position: relative;
}

.couple-line-heart span {
  position: absolute;
  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  background: #f8f9fa;

  padding: 4px 8px;

  color: #0d6efd;
}

/* VERTICAL CONNECTOR */

.tree-vertical-line {
  width: 2px;
  height: 15px;

  background: #adb5bd;

  margin: 0 auto;
}

/* SIBLINGS / CHILDREN */

.siblings-tree,
.children-tree {
  display: flex;
  justify-content: center;
  align-items: flex-start;

  position: relative;

  gap: 18px;

  /* padding-top: 5px; */
}

/* Horizontal family connector */

.siblings-tree::before,
.children-tree::before {
  content: "";

  position: absolute;

  top: 0;

  left: 6%;
  right: 6%;

  height: 2px;

  background: #adb5bd;
}

/* Individual branch */

.tree-child-branch {
  position: relative;

  padding-top: 30px;
}

/* Vertical line to person */

.branch-line {
  position: absolute;

  width: 2px;
  height: 30px;

  background: #adb5bd;

  top: 0;
  left: 50%;

  transform: translateX(-50%);
}

/* Responsive */

/* @media (max-width: 991px) {
  .family-tree {
    min-width: 1000px;
  }
} */
/* ==========================================
   FAMILY TREE - SINGLE CURRENT PERSON LAYOUT
   ========================================== */

.main-family-branch {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main-couple {
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-couple-children-line {
  width: 2px;
  height: 55px;
  background: #adb5bd;
  margin: 0 auto;
}

.children-label {
  margin-top: 0;
  margin-bottom: 0;
}

/*
  The main family branch contains You + Spouse,
  so allow it to take more horizontal space.
*/
.main-family-branch {
  min-width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/*
  Prevent the spouse/couple cards from shrinking.
*/
.main-couple .tree-person {
  flex-shrink: 0;
}

/*
  Keep siblings aligned near the top,
  while children continue downward.
*/
.siblings-tree {
  align-items: flex-start;
}

.tree-person-link {
  transition: all 0.2s ease;
  cursor: pointer;
}

.tree-person-link:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
  border-color: #0d6efd;
}

.spouse-line {
  width: 2px;
  height: 30px;
  background: #cbd5e1;
  position: relative;
}

.spouse-heart {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  width: 24px;
  height: 24px;

  border-radius: 50%;

  background: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #ec4899;

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.tree-person-sister .tree-role {
  background: #fae8ff;
  color: #a21caf;
}
.tree-person-sister .tree-avatar {
  background: #fae8ff;
  color: #a21caf;
}
/* ==========================================
   DAUGHTER
   ========================================== */

.tree-person-daughter {
  background: #fff7ed;
  border-color: #fdba74;
}

.tree-person-daughter .tree-avatar {
  background: #ffedd5;
  color: #ea580c;
}

.tree-person-daughter .tree-role {
  background: #ffedd5;
  color: #ea580c;
}

/* ==========================================
   BROTHER
   ========================================== */

.tree-person-brother {
  background: #f9fafb;
  border-color: #d1d5db;
}
/* ==========================================
   SON
   ========================================== */

.tree-person-son {
  background: #f0fdf4;
  border-color: #86efac;
}

.tree-person-son .tree-avatar {
  background: #dcfce7;
  color: #16a34a;
}

.tree-person-son .tree-role {
  background: #dcfce7;
  color: #16a34a;
}
/* ==========================================
   SPOUSE
   ========================================== */

.tree-person-wife,
.tree-person-husband,
.tree-person-spouse {
  background: #fff5f8;
  border-color: #f9a8d4;
}

.tree-person-wife .tree-avatar,
.tree-person-husband .tree-avatar,
.tree-person-spouse .tree-avatar {
  background: #fce7f3;
  color: #db2777;
}

.tree-person-wife .tree-role,
.tree-person-husband .tree-role,
.tree-person-spouse .tree-role {
  background: #fce7f3;
  color: #db2777;
}
/* ==========================================
   CURRENT USER
   ========================================== */

.tree-person-current {
  background: #eff6ff;
  border-color: #2563eb;
}

.tree-person-current .tree-avatar {
  background: #2563eb;
  color: #fff;
}

.tree-person-current .tree-role {
  background: #dbeafe;
  color: #2563eb;
}

/* ==========================================
   FATHER
   ========================================== */

.tree-person-father {
  background: #f8fafc;
  border-color: #94a3b8;
}

.tree-person-father .tree-avatar {
  background: #e2e8f0;
  color: #475569;
}

/* ==========================================
   MOTHER
   ========================================== */

.tree-person-mother {
  background: #f8f5ff;
  border-color: #c4b5fd;
}

.tree-person-mother .tree-avatar {
  background: #ede9fe;
  color: #7c3aed;
}
.family-tree .row {
  position: relative;
}

/* Vertical line from grandparents to parents */
.tree-grandparents::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -26px;
  width: 2px;
  height: 26px;
  background: #cfd8dc;
  transform: translateX(-50%);
}

/* Horizontal line joining parents */
.tree-parents::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 40%;
  right: 40%;
  height: 2px;
  background: #cfd8dc;
}

/* Vertical line from parents to root */
.tree-parents::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -34px;
  width: 2px;
  height: 34px;
  background: #cfd8dc;
  transform: translateX(-50%);
}

/* Vertical line from root to children */
.tree-root::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -34px;
  width: 2px;
  height: 34px;
  background: #cfd8dc;
  transform: translateX(-50%);
}

/* Horizontal line joining children */

/* Grandmother */

.tree-person.grandmother {
  border-color: #a855f7;
  background-color: #f8f5ff;
}

.tree-person.grandmother .tree-role {
  background: #f3e8ff;
  color: #7e22ce;
}
.tree-person.grandfather .tree-role {
  background: #b1dff0;
}
.tree-person.father .tree-role {
  background: #8edebf;
}
.tree-person.father {
  border-color: #3b9da0;
  background: #cbf0e2;
}

.tree-person.mother {
  border-color: #ec4899;
  background: #fdf2f8;
}
.tree-person.mother .tree-role {
  background-color: #fce7f3;
  color: #db2777;
}
.tree-person.son {
  background: #f0fdf4;
  border-color: #86efac;
}
.tree-person.son .tree-role {
  background: #dcfce7;
  color: #16a34a;
}

.tree-person.daughter {
  border-color: #f59e0b;
  background: #fffbeb;
}
.tree-person.daughter .tree-role {
  background: #ffedd5;
  color: #ea580c;
}

.tree-person.self {
  border-color: #0d6efd;
  background: #eff6ff;
}
/* Grandfather */

.tree-person.grandfather {
  background: #97d8f0;
  color: #4b5563;
  border: 2px solid #539bb5;
}
.tree-person {
  position: relative;
}

.tree-person.active::after {
  content: "\2713";
  position: absolute;
  top: -8px;
  right: -8px;

  width: 24px;
  height: 24px;

  border-radius: 50%;
  background: #198754;
  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 14px;
  font-weight: bold;

  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.tree-branches {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 80px;
}

.family-branch {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 100px;
  margin: 2px;
}

.family-couple {
  display: flex;
  align-items: center; /* vertically centers heart against card height */
  position: relative;
  gap: 0;
}

.tree-heart {
  background: #fff;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  color: #e0245e;
  font-size: 12px;
}
/* Parent -> children */

/* Children */

.family-children {
  display: grid;
  grid-auto-flow: column;
  justify-content: center;
  align-items: start;
  gap: 70px;

  position: relative;
  margin-top: 35px;
}

.family-child {
  display: flex;
  justify-content: center;
}

/* ==========================================
   TREE CONNECTORS (Temporary)
   ========================================== */

.tree-connector {
  display: flex;
  justify-content: center;
  align-items: center;

  height: 40px;
  position: relative;
}

.tree-connector::before {
  content: "";

  width: 2px;
  height: 100%;

  background: #cbd5e1;
}

.tree-children {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 0.6rem;
}
.family-tree-container {
  position: relative;
  width: 100%;
  overflow-x: auto;
}

.family-tree-content {
  display: inline-block;
  min-width: max-content;
  padding: 0.2rem;
}

.tree-svg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.tree-connector::before {
  height: auto;
}

.family-tree-content {
  display: inline-block; /* shrinks to content instead of being squeezed to the container width */
  min-width: 100%;
}

.tree-children,
.d-flex.justify-content-center {
  flex-wrap: nowrap; /* let the row grow sideways instead of wrapping/clipping */
  width: max-content;
  margin-inline: auto;
}
.tree-person {
  text-decoration: none;
}

.tree-person:hover {
  text-decoration: none;
}

.tree-person:visited {
  text-decoration: none;
}
.couple-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  margin: 0 -6px; /* pulls heart slightly into both cards */
  position: relative;
  z-index: 3; /* sits above card borders */
  align-self: center; /* not top-aligned with the row */
}