/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

 /* Import the library styles */
/* Org Chart Tree Lines */
/* ORG TREE STYLES */
/* Ensure the container has no default padding that messes up alignment */
.org-tree, .org-tree ul {
  padding-left: 20px; /* Indent each level */
  list-style-type: none;
}

/* Position context for the lines */
.org-tree li {
  position: relative;
  padding-left: 20px; /* Space for the horizontal line */
  margin-bottom: 0;
}

.org-tree li > ul {
  padding-top: 10px;
  position: relative; /* Establishes a valid anchor for the 'Stem' */
}

/* The Vertical Line (Tree Trunk) */
/* Connects this item to the one below it */
.org-tree ul li::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  border-left: 2px solid #e5e7eb; /* tailwind gray-200 */
}

/* The Horizontal Line (Branch) */
/* Connects the trunk to the card */
.org-tree li::after {
  content: '';
  position: absolute;
  top: 24px; /* Center of a 48px avatar (h-12) */
  left: 0;
  width: 20px;
  border-top: 2px solid #e5e7eb; /* tailwind gray-200 */
}

.org-tree li > ul::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20px; /* Aligns with the padding-left of the list */
  width: 0;
  height: 10px; /* Matches the padding-top exactly */
  border-left: 2px solid #e5e7eb; /* Matches your tailwind gray-200 */
}

/* FIX: Don't draw the vertical line past the last child */
.org-tree ul > li:last-child::before {
  height: 25px; /* Stop exactly at the branch */
}