/* panel/genealogy.css — Genealogy / tree structure and level medals.
   Part of the split style.css. Keep the load order in includes/layout.php. */

.medal-stack { width: min(340px, 100%); display: grid; gap: 8px; }

.medal {
  padding: 10px 14px 8px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 20px 40px rgba(0,0,0,.18);
}

.medal b { font-family: var(--sans); letter-spacing: .18em; font-size: 13px; }

.medal h2 { font-size: 22px; margin: 2px 0; }

.medal p { margin: 0; opacity: .85; }

.medal-gold { background: linear-gradient(160deg, #f6e7c2, #b8863a 55%, #6d4b16); color: #2a160c; }

.medal-silver { background: linear-gradient(160deg, #f7f9fb, #c5ced6 50%, #6d7884); color: #1b242c; margin-left: 36px; }

.medal-diamond { background: linear-gradient(160deg, #331419, #0c1c24 60%, #1a1a1a); color: #f4efe4; margin-left: 12px; border-color: rgba(231,211,163,.4); }

.genealogy-panel { min-width: 0; overflow: hidden; }

.tree-pick { margin-top: 4px; }

.tree-pick select { min-width: 260px; }

.level-columns {
  display: flex;
  gap: 14px;
  align-items: stretch;
  overflow-x: auto;
  padding: 2px 2px 10px;
}

.level-col {
  flex: 1 0 260px;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(103, 31, 43, .28);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

.level-col h3 {
  margin: 0;
  padding: 12px 14px;
  background: #310e14;
  color: #f8f1de;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}

.level-col-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: min(70vh, 640px);
  overflow-y: auto;
  padding: 12px;
}

.level-card .tree-photo {
  width: 52px;
  height: 52px;
  border: 2px solid #c9a15a;
}

.tree-summary { margin: 0 0 10px; color: #6e5d52; font-size: 13px; }

.tree-scroll {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.orgtree-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: max-content;
  min-width: 100%;
  padding: 4px 8px 12px;
}

.tree-ancestors {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.tree-ancestor-stem {
  width: 2px;
  height: 16px;
  background: var(--gold);
}

.orgtree, .orgtree ul, .orgtree li { list-style: none; margin: 0; padding: 0; }

.orgtree {
  --tree-gap: 16px;
  --tree-line: var(--gold);
  display: flex;
  justify-content: center;
  width: max-content;
  min-width: 100%;
}

.orgtree ul {
  display: flex;
  justify-content: center;
  position: relative;
  padding-top: var(--tree-gap);
}

.orgtree li {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: var(--tree-gap) 8px 0;
}

.orgtree ul::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: var(--tree-gap);
  border-left: 2px solid var(--tree-line);
}

.orgtree li::before,
.orgtree li::after {
  content: "";
  position: absolute;
  top: 0;
  width: 50%;
  height: var(--tree-gap);
  border-top: 2px solid var(--tree-line);
}

.orgtree li::before { right: 50%; }

.orgtree li::after {
  left: 50%;
  border-left: 2px solid var(--tree-line);
}

.orgtree li:first-child::before { border-top-color: transparent; }

.orgtree li:last-child::after { border-top-color: transparent; }

.orgtree li:only-child { padding-top: 0; }

.orgtree li:only-child::before,
.orgtree li:only-child::after { display: none; }

.orgtree > li { padding-top: 0; }

.orgtree > li::before,
.orgtree > li::after { display: none; }

.tree-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 96px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  position: relative;
  z-index: 1;
  line-height: 1.2;
}

a.tree-node:hover .tree-photo { box-shadow: 0 0 0 3px var(--gold-2); }

a.tree-node:focus-visible { outline: 2px solid var(--maroon); outline-offset: 3px; border-radius: 8px; }

.orgtree > li > .tree-node .tree-photo { box-shadow: 0 0 0 3px var(--gold-2); }

.tree-photo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;
  border: 2px solid var(--gold);
  background: #fff;
}

.tree-node strong,
.tree-node span {
  display: block;
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tree-node strong {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--maroon-deep);
}

.tree-node span { font-size: 11px; color: #3a2e28; }

.tree-more {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--maroon);
  position: relative;
  z-index: 1;
}

.desk-body .panel.tree-board {
  margin-top: 0;
  padding: 22px 20px 28px;
  background: linear-gradient(180deg, #fffdf8 0%, #faf4f5 100%);
  border: 1px solid rgba(103, 31, 43, .28);
  border-radius: 16px;
}

.tree-board .tree-summary {
  margin: 0 0 16px;
  text-align: center;
  font-size: 15px;
  color: #694148;
}

.tree-board .tree-scroll {
  background: #fff;
  border: 1px solid rgba(103, 31, 43, .16);
  border-radius: 14px;
}

.tree-board .orgtree-wrap { padding: 28px 36px 32px; }

.tree-board .orgtree { --tree-gap: 36px; --tree-line: #671f2b; }

.tree-board .orgtree li { padding: var(--tree-gap) 22px 0; }

.tree-board .tree-node { width: auto; min-width: 150px; }

.tree-board .tree-photo {
  width: 96px;
  height: 96px;
  border: 3px solid #671f2b;
  box-shadow: 0 0 0 5px #fff, 0 10px 20px rgba(49, 14, 20, .12);
}

.tree-board .orgtree > li > .tree-node .tree-photo {
  box-shadow: 0 0 0 5px #fff, 0 0 0 8px var(--gold), 0 12px 24px rgba(49, 14, 20, .16);
}

.tree-board .tree-node strong,
.tree-board .tree-node span { max-width: 168px; }

.tree-board .tree-node strong { margin-top: 10px; font-size: 16px; letter-spacing: .03em; }

.tree-board .tree-node span { margin-top: 2px; font-size: 14px; white-space: normal; }

.tree-board .tree-more { margin-top: 8px; font-size: 13px; font-weight: 700; }

.team-business-head h2 { margin: 0 0 4px; font-size: 18px; }

.desk-member .panel > .stat-grid.team-business {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 10px;
}

.team-total td { font-weight: 700; color: var(--maroon-deep); }

.team-level-panel { margin-top: 14px; }

.team-level-panel > h2 { margin: 0 0 8px; font-size: 18px; }

@media (max-width: 1100px) {
    .desk-member .panel > .stat-grid.team-business { grid-template-columns: 1fr 1fr; }
    .medal-silver, .medal-diamond { margin-left: 0; }
}

@media (max-width: 760px) {
    .desk-member .panel > .stat-grid.team-business { grid-template-columns: 1fr; }
    .medal-silver, .medal-diamond { margin-left: 0; }
}

.client-dash .team-level-panel {
  margin-top: 0;
  padding: 18px 18px 10px;
  border-radius: 20px;
  border: 1px solid rgba(184, 137, 58, .35);
  background: linear-gradient(180deg, #fffdf8 0%, #fbf7ee 100%);
  box-shadow: 0 12px 28px rgba(48, 18, 12, .05);
}