/* ---------- TREE CONTAINER ---------- */
.tree {
  column-count: 3;       /* number of columns */
  column-gap: 2rem;      /* spacing between columns */
  list-style: none;
  padding-left: 0;
}

/* ---------- NESTED LISTS ---------- */
.tree ul {
  list-style: none;
  padding-left: 1.2em;
  margin: 0.2em 0;
}

/* ---------- COLLAPSIBLE CHECKBOXES ---------- */
.tree li input[type="checkbox"] {
  display: none; /* hide checkboxes */
}

/* ---------- FOLDER ICONS ---------- */
.tree li label::before {
  content: "\f07c"; /* closed folder icon */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;  /* solid */
  cursor: pointer;
  margin-right: 0.3em;
  transition: transform 0.2s;
  color: #ff6600; /* orange folder icon */
}

.tree li input[type="checkbox"]:checked + label::before {
  content: "\f07b"; /* open folder icon */
}

/* ---------- DOCUMENT ICONS FOR FOLDERS ---------- */
.folder-doc {
  font-family: "Font Awesome 5 Free"; /* ensure FA is loaded */
  font-weight: 900; /* solid style */
  margin-left: 0.3em;
  color: #000; /* black document icon */
  text-decoration: none;
}

.folder-doc:hover {
  color: #0073e6; /* hover color */
}

/* ---------- FILE ICONS (exclude folder-doc) ---------- */
.tree li > a:not(.folder-doc)::before {
  content: "\f15b"; /* file icon */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 0.3em;
  color: #0073e6; /* blue file icon */
}

/* ---------- TOGGLE NESTED UL ---------- */
.tree li input[type="checkbox"] + label + ul {
  display: none;
}

.tree li input[type="checkbox"]:checked + label + ul {
  display: block;
}

/* ---------- LINKS ---------- */
.tree a {
  text-decoration: none;
  color: #0073e6; /* link color */
}

.tree a:hover {
  text-decoration: underline;
}

/* ---------- INDENTATION FOR NESTED ITEMS ---------- */
.tree li ul li {
  margin: 0.2em 0;
}

.tree li ul li label,
.tree li ul li a {
  padding-left: 1em;
}

/* ---------- LABEL COLORS ---------- */
.tree li label {
  color: #333; /* folder label text */
}