/* Liên kết nhóm màu dùng chung ở hai trang. */
#legend a.family-group-link { color: inherit; text-decoration: none; cursor: pointer; border-radius: 5px; padding: 3px 5px; }
#legend a.family-group-link:hover, #legend a.family-group-link:focus-visible { background: #edf2f7; text-decoration: underline; }
#legend a.family-group-link.is-selected { background: #e8eef7; font-weight: 700; outline: 1px solid #c8d4e3; }
#family-total a.family-stats-group-link { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
#family-total a.family-stats-group-link:hover { text-decoration: underline; }
#groupFilter { max-width: 165px; font-size: 13px; padding: 4px; border: 1px solid #ccc; border-radius: 5px; }

/* Bộ lọc nhóm không bị ẩn ở màn hình nhỏ. */
@media (max-width: 767.98px) {
  #shared-family-header .branch-search.mobile-collapse { max-height: none; overflow: visible; }
}

/* Cùng một header trên cây gia phả, danh sách và phụ húy. */
#shared-family-header .branch-btn { display: inline-flex !important; align-items: center; }
#shared-family-header .branch-tabs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
#shared-family-header .branch-search { display: flex; align-items: center; flex-wrap: wrap; }
#shared-family-header #legend { margin: 0; }
/* Nút thao tác nằm ở cột cuối bảng và không xuất hiện trên giấy. */
#FamilyChart .table-actions-header { min-width: 255px; width: 255px; text-align: right; white-space: nowrap; }
#FamilyChart .table-actions-header .table-actions { display: inline-flex; justify-content: flex-end; gap: 6px; align-items: center; }
#FamilyChart .table-actions-header #print-button,
#FamilyChart .table-actions-header #export-button { margin: 0; }
#FamilyChart .table-actions-cell { width: 255px; }
@media print {
  #FamilyChart .table-actions-header,
  #FamilyChart .table-actions-cell { display: none !important; }
}
@media (max-width: 767.98px) {
 #FamilyChart .table-actions-header { min-width: 215px; width: 215px; }
 #FamilyChart .table-actions-header #print-button,
 #FamilyChart .table-actions-header #export-button { font-size: 11px; padding: 5px 7px; }
}

/* Phụ húy: chỉ có tabs, không có vùng tìm kiếm / chú giải / thống kê nhóm.
   Phân nhánh hiển thị do family-header.js quyết định theo debug=1. */
#shared-family-header.family-header-phuhuy .branch-search,
#shared-family-header.family-header-phuhuy #legend,
#shared-family-header.family-header-phuhuy #phuhuy-group-stats,
body:has(#shared-family-header.family-header-phuhuy) #phuhuy-group-stats { display: none !important; }


/* Bố cục thống kê chung cho trang chính, gia phả và phụ húy:
   dòng 1 = tổng / nhóm; dòng 2 = thống kê theo đời;
   ticker ngày giỗ vẫn là một dòng riêng bên dưới. */
.family-summary-lines {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  min-width: 0;
}
.family-summary-lines > #family-total,
.family-summary-lines > .family-summary-totals {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  min-width: 0;
}
.family-summary-lines > #stats-detail {
  display: flex !important;
  align-items: center;
  flex-flow: row nowrap !important;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  gap: 8px;
  -webkit-overflow-scrolling: touch;
}
.family-summary-lines > #stats-detail .level-card,
.family-summary-lines > #stats-detail .ky-sep {
  flex: 0 0 auto;
}

/* Component thống kê và ticker dùng chung cho cả ba trang. */
#family-total [hidden] { display: none !important; }
#branch-info { width: 100%; margin-left: 0 !important; margin-right: 0 !important; }
#branch-info #family-total { flex: 0 0 auto; max-width: 100%; }
#branch-info #stats-detail { flex: 0 0 auto; max-width: 100%; }
#ky-tracks { width: 100%; min-width: 0; }

/* Shared compact navigation: desktop toolbar + mobile dropdown menu. */
#shared-family-header .family-header-shell {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 12px; margin: 4px 0 8px;
  border: 1px solid #e6ebf3; background: #fff; border-radius: 12px;
  box-shadow: 0 2px 9px rgba(28, 51, 88, .035);
}
#shared-family-header .family-header-leading { display:flex; align-items:center; gap: 10px; min-width: 0; }
#shared-family-header .branch-tabs { gap: 6px; }
#shared-family-header .branch-btn { min-height: 34px; padding: 5px 10px; border-radius: 8px; font-size: 12px; }
#shared-family-header .family-home-link {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 7px 10px; border: 1px solid #cddcf0; border-radius: 8px;
  color: #1d5caf; background: #f7faff; font-size: 12px; font-weight: 700;
  text-decoration: none;
}
#shared-family-header .family-home-link:hover { background: #eaf2fe; }
#shared-family-header .family-header-menu { display: flex; align-items: center; min-width: 0; }
#shared-family-header .branch-search { display: flex; align-items: center; gap: 10px; min-width: 0; }
#shared-family-header .family-header-legend { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
#shared-family-header .family-mobile-pages, #shared-family-header .family-header-menu-button { display: none; }
#shared-family-header .legend-item { white-space: nowrap; font-size: 12px; }

@media (max-width: 1100px) and (min-width: 768px) {
  #shared-family-header .family-header-shell { flex-wrap: wrap; }
  #shared-family-header .family-header-menu { width: 100%; }
}
@media (max-width: 767.98px) {
  #shared-family-header .family-header-shell {
    display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px;
    padding: 8px; margin: 4px 0 4px; border-radius: 10px;
  }
  #shared-family-header .family-header-leading { gap: 6px; min-width: 0; }
  #shared-family-header .family-home-link { padding: 8px; min-height: 38px; }
  #shared-family-header .family-home-link span { display: none; }
  #shared-family-header .branch-tabs { min-width: 0; width: auto !important; flex-wrap: nowrap; }
  #shared-family-header .branch-btn { font-size: 11px !important; padding: 6px 8px !important; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #shared-family-header .family-header-menu-button {
    display: inline-flex; align-items: center; gap: 5px; justify-content: center;
    color: #195eb8; background: #eef5ff; border: 1px solid #cbdcf4;
    min-height: 38px; border-radius: 9px; padding: 7px 10px;
    font-size: 12px; font-weight: 700;
  }
  #shared-family-header .family-header-menu { display: none; grid-column: 1 / -1; padding: 10px 2px 2px; border-top: 1px solid #e6edf5; }
  #shared-family-header.family-menu-open .family-header-menu { display: block; }
  #shared-family-header .family-mobile-pages { display: grid; gap: 6px; grid-template-columns: repeat(3,minmax(0,1fr)); margin-bottom: 10px; }
  #shared-family-header .family-mobile-pages a { padding: 9px 5px; text-align: center; font-size: 11px; color: #255b9e; text-decoration: none; background: #f4f7fb; border: 1px solid #e4eaf3; border-radius: 8px; }
  #shared-family-header .family-mobile-pages a[aria-current] { background: #e8f1ff; border-color: #a5c6fa; font-weight: 700; }
  #shared-family-header .branch-search, #shared-family-header.family-menu-open .branch-search { display: flex !important; width: 100%; flex-wrap: wrap; gap: 8px; }
  #shared-family-header .family-header-legend { display: flex; flex-wrap: wrap; gap: 4px; }
  #shared-family-header .family-header-legend a { font-size: 11px; padding: 6px !important; }
  #shared-family-header .branch-search select { max-width: 150px; }
  #shared-family-header.family-header-phuhuy .branch-search { display: none !important; }
}
@media print { #shared-family-header .family-header-menu-button, #shared-family-header .family-mobile-pages, #shared-family-header .family-home-link { display:none !important; } }

/* Mobile v4 - tree-first layout, shared navigation drawer. */
#shared-family-header .family-mobile-brand,
#shared-family-header .family-mobile-stats-button,
#shared-family-header .family-mobile-menu-heading,
#shared-family-header .family-mobile-branch-label,
#shared-family-header .family-mobile-branch-select,
#shared-family-header .family-mobile-menu-backdrop { display: none; }
@media (max-width: 767.98px) {
  body.family-drawer-open { overflow: hidden !important; }
  #shared-family-header { position: relative; z-index: 1600; }
  #shared-family-header .family-header-shell { display:flex; align-items:center; gap:8px; padding:9px 10px; border-radius:14px; margin:0 0 8px; box-shadow:none; background:#fff; }
  #shared-family-header .family-header-leading { flex:1 1 auto; min-width:0; }
  #shared-family-header .branch-tabs { display:none !important; }
  #shared-family-header .family-mobile-brand { display:flex; align-items:center; gap:9px; min-width:0; }
  #shared-family-header .family-mobile-brand-icon { display:grid; place-items:center; flex:0 0 35px; height:35px; border-radius:11px; background:#1969df; color:#fff; font-size:23px; }
  #shared-family-header .family-mobile-brand-title { font-size:14px; font-weight:750; color:#182b45; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #shared-family-header .family-home-link { min-width:36px; }
  #shared-family-header .family-mobile-stats-button { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; flex:0 0 38px; border:1px solid #dce5f0; border-radius:10px; background:#f8fafc; color:#255ea7; }
  #shared-family-header .family-mobile-stats-button[aria-expanded="true"] { background:#e7f1ff; border-color:#7aadee; }
  #shared-family-header .family-header-menu-button { flex:0 0 38px; width:38px; height:38px; padding:0; border-radius:10px; }
  #shared-family-header .family-header-menu-button span { display:none; }
  #shared-family-header .family-header-menu { display:flex !important; position:fixed; top:0; bottom:0; right:0; width:min(85vw,350px); z-index:2002; flex-direction:column; align-items:stretch; gap:14px; padding:22px 18px; background:#fff; box-shadow:-16px 0 45px rgba(20,36,60,.16); overflow-y:auto; transform:translateX(110%); transition:transform .2s ease; visibility:hidden; }
  #shared-family-header.family-menu-open .family-header-menu { display:flex !important; transform:translateX(0); visibility:visible; }
  #shared-family-header .family-mobile-menu-backdrop { display:none; position:fixed; inset:0; background:rgba(15,31,53,.35); z-index:2000; }
  #shared-family-header.family-menu-open .family-mobile-menu-backdrop { display:block; }
  #shared-family-header .family-mobile-menu-heading { display:flex; justify-content:space-between; align-items:center; font-size:17px; color:#182b45; }
  #shared-family-header .family-mobile-menu-close { background:#f2f5fa; border:0; border-radius:9px; height:36px; width:36px; font-size:25px; }
  #shared-family-header .family-mobile-branch-label { display:block; font-size:12px; color:#65758c; margin-bottom:-9px; }
  #shared-family-header .family-mobile-branch-select { display:block; width:100%; min-height:43px; padding:8px 12px; border:1px solid #d6e2f1; border-radius:10px; background:#f8fbff; font-size:14px; font-weight:600; color:#19559f; }
  #shared-family-header .family-mobile-pages { display:flex; flex-direction:column; gap:7px; margin:0; }
  #shared-family-header .family-mobile-pages a { text-align:left; padding:12px; font-size:13px; font-weight:550; }
  #shared-family-header .branch-search { display:flex !important; margin:0 !important; gap:12px; flex-direction:column; align-items:stretch; }
  #shared-family-header .branch-search select { max-width:100%; min-height:36px; }
  #shared-family-header .family-header-legend { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; }
  #shared-family-header .family-header-legend a { min-width:0; }
  #shared-family-header.family-header-phuhuy .branch-search { display:none !important; }
  #shared-family-header .family-header-shell { isolation:auto; }
}