:root {
  --ft-green: #1f5f4b;
  --ft-green-dark: #163f33;
  --ft-gold: #c9a227;
  --ft-bg: #f5f7f6;
  --ft-male: #2b6cb0;
  --ft-female: #b83280;
}
body { background: var(--ft-bg); font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; }
.app-navbar { background: var(--ft-green); }
.app-navbar .nav-link.active { font-weight: 600; border-bottom: 2px solid var(--ft-gold); }
.app-main { min-height: calc(100vh - 110px); }
.app-footer { color: #6c757d; }
.card-stat { border-left: 4px solid var(--ft-green); }
.card-stat .stat-num { font-size: 2rem; font-weight: 700; color: var(--ft-green-dark); }
.btn-app { background: var(--ft-green); border-color: var(--ft-green); color: #fff; }
.btn-app:hover { background: var(--ft-green-dark); border-color: var(--ft-green-dark); color: #fff; }

/* ---------- Login ---------- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--ft-green-dark), var(--ft-green)); }
.login-card { max-width: 440px; width: 100%; }
.login-card .brand { color: var(--ft-green-dark); }

/* ---------- Avatar ---------- */
.avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: #dee2e6; }
.avatar-lg { width: 120px; height: 120px; }
.avatar-ph { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; }
.avatar-ph.L { background: var(--ft-male); } .avatar-ph.P { background: var(--ft-female); }

/* ---------- Tree view (CSS org chart) ---------- */
.tree-scroll { overflow: auto; padding: 20px; background: #fff; border: 1px solid #dee2e6; border-radius: .5rem; }
.tree, .tree ul { padding-top: 24px; position: relative; display: flex; justify-content: center; }
.tree ul { padding-left: 0; margin: 0; }
.tree li { list-style: none; text-align: center; position: relative; padding: 24px 6px 0 6px; }
.tree li::before, .tree li::after { content: ''; position: absolute; top: 0; right: 50%; border-top: 2px solid #9aa9a3; width: 50%; height: 24px; }
.tree li::after { right: auto; left: 50%; border-left: 2px solid #9aa9a3; }
.tree li:only-child::before { display: none; }
.tree li:only-child::after { border-top: 0; width: 0; }
.tree li:first-child::before, .tree li:last-child::after { border: 0 none; }
.tree li:last-child::before { border-right: 2px solid #9aa9a3; border-radius: 0 6px 0 0; }
.tree li:first-child::after { border-radius: 6px 0 0 0; }
.tree ul ul::before { content: ''; position: absolute; top: 0; left: 50%; border-left: 2px solid #9aa9a3; width: 0; height: 24px; }
.tree > li { padding-top: 0; }
.tree > li::before, .tree > li::after { display: none !important; }
.tree ul.kids::before { content: ''; position: absolute; top: 0; left: 50%; border-left: 2px solid #9aa9a3; width: 0; height: 24px; }
.couple { display: inline-flex; align-items: center; gap: 6px; }
.couple .link { color: #9aa9a3; font-size: .9rem; }
.node { display: inline-block; min-width: 130px; max-width: 170px; padding: 8px 10px; border-radius: 10px; background: #fff;
  border: 2px solid #ccc; text-decoration: none; color: #212529; font-size: .82rem; line-height: 1.25; vertical-align: middle;
  box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.node:hover { border-color: var(--ft-gold); color: #212529; }
.node.L { border-color: var(--ft-male); } .node.P { border-color: var(--ft-female); }
.node.dead { background: #f1f3f5; color: #6c757d; }
.node .nm { font-weight: 600; display: block; }
.node .dt { color: #6c757d; font-size: .72rem; display: block; }
.node .avatar { width: 40px; height: 40px; margin-bottom: 4px; }
.node .avatar-ph { font-size: .9rem; }
.legend .sw { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: middle; margin-right: 4px; border: 2px solid; }

/* ---------- Indented outline (ancestors) ---------- */
.outline { padding-left: 1.2rem; border-left: 2px dashed #ccd5d1; margin-left: .4rem; }

@media print {
  .app-navbar, .app-footer, .no-print { display: none !important; }
  .tree-scroll { border: 0; overflow: visible; }
}