/* Professional Tree V2 - Heart View */
/* v6 - MINIMAL: Only changes node appearance, keeps original tree structure */
/* tree.css already handles layout/flex/connectors - we only need to clip nodes to heart shape */

/* ============================================
   HEART SHAPE via mask-image
   Clips .member-card to heart shape.
   The inline background-color from PHP shows through the mask as a colored heart.
   ============================================ */

body .pt-tree.view-compact #professional-tree-canvas .member-card {
    -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNNDYyLjMgNjIuNkM0MDcuNSAxNS45IDMyNiAyNC4zIDI3NS43IDc2LjJMMjU2IDk2LjVsLTE5LjctMjAuM0MxODYuMSAyNC4zIDEwNC41IDE1LjkgNDkuNyA2Mi42Yy02Mi44IDUzLjYtNjYuMSAxNDkuOC05LjkgMjA3LjlsMTkzLjUgMTk5LjhjMTIuNSAxMi45IDMyLjggMTIuOSA0NS4zIDBsMTkzLjUtMTk5LjhjNTYuMy01OC4xIDUzLTE1NC4zLTkuOC0yMDcuOXoiLz48L3N2Zz4=") !important;
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNNDYyLjMgNjIuNkM0MDcuNSAxNS45IDMyNiAyNC4zIDI3NS43IDc2LjJMMjU2IDk2LjVsLTE5LjctMjAuM0MxODYuMSAyNC4zIDEwNC41IDE1LjkgNDkuNyA2Mi42Yy02Mi44IDUzLjYtNjYuMSAxNDkuOC05LjkgMjA3LjlsMTkzLjUgMTk5LjhjMTIuNSAxMi45IDMyLjggMTIuOSA0NS4zIDBsMTkzLjUtMTk5LjhjNTYuMy01OC4xIDUzLTE1NC4zLTkuOC0yMDcuOXoiLz48L3N2Zz4=") !important;
    -webkit-mask-size: 100% 100% !important;
    mask-size: 100% 100% !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;

    /* Dimensions */
    width: 70px !important;
    height: 70px !important;
    min-height: 70px !important;

    /* Layout - keep as block but sized */
    display: inline-block !important;
    position: relative !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 auto !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    z-index: 10 !important;
    text-align: center !important;
    vertical-align: top !important;

    /* Remove existing decorations */
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
}

/* Strip any internal borders or lines inside the node */
body .pt-tree.view-compact #professional-tree-canvas .member-card *,
body .pt-tree.view-compact #professional-tree-canvas .member-card::before,
body .pt-tree.view-compact #professional-tree-canvas .member-card::after {
    border: none !important;
    outline: none !important;
    background-image: none !important;
}

/* ============================================
   SPACING - increase li padding for heart size
   (tree.css has 20px, we need more for 70px hearts)
   ============================================ */

body .pt-tree.view-compact #professional-tree-canvas li {
    padding-top: 80px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    /* FREEZE FIX: tree.css has transition:all 0.5s on li.
       When 100+ nodes all animate padding simultaneously = browser freeze. */
    transition: none !important;
    -webkit-transition: none !important;
}

/* Also disable transition on ul (tree.css gives it transition:all 0.5s) */
body .pt-tree.view-compact #professional-tree-canvas ul {
    transition: none !important;
    -webkit-transition: none !important;
}

/* Override tree_views.css which sets height:auto, min-height:0 on .view-compact .tree li a
   This was collapsing the 70px heart nodes to zero height */
body .pt-tree.view-compact #professional-tree-canvas .member-card {
    height: 70px !important;
    min-height: 70px !important;
}

/* Global hide for legacy CSS lines inside the professional canvas */
#professional-tree-canvas li::before,
#professional-tree-canvas li::after,
#professional-tree-canvas ul::before {
    display: none !important;
}

/* Only-child: no connector, less padding */
body .pt-tree.view-compact #professional-tree-canvas li:only-child {
    padding-top: 20px !important;
}

/* ============================================
   HIDE CLUTTER inside heart nodes
   ============================================ */

body .pt-tree.view-compact #professional-tree-canvas .member-card .pt-thumb,
body .pt-tree.view-compact #professional-tree-canvas .member-card img,
body .pt-tree.view-compact #professional-tree-canvas .member-card .avatar-wrapper,
body .pt-tree.view-compact #professional-tree-canvas .member-card .thumb,
body .pt-tree.view-compact #professional-tree-canvas .member-card .pt-options,
body .pt-tree.view-compact #professional-tree-canvas .member-card > i,
body .pt-tree.view-compact #professional-tree-canvas .member-card .exp {
    display: none !important;
}

/* Show only name strong and member-number */
body .pt-tree.view-compact #professional-tree-canvas .member-card span:not(.m-num) {
    display: none !important;
}

/* ============================================
   TEXT INSIDE HEART
   ============================================ */

body .pt-tree.view-compact #professional-tree-canvas .member-card strong {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    position: absolute !important;
    top: 5px !important;
    left: 0 !important;
    right: 0 !important;
    height: 60px !important;
    padding-top: 6px !important; /* Slightly more space at top */
    color: #fff !important;
    font-size: 11px !important; /* Increased from 9px */
    font-weight: bold !important;
    line-height: 1.1 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6) !important;
    z-index: 5 !important;
}

body .pt-tree.view-compact #professional-tree-canvas .member-card .m-num {
    display: block !important;
    position: static !important;
    margin-top: 8px !important; /* Increased from 5px to put it further "down" */
    font-size: 10px !important;
    color: rgba(255,255,255,0.9) !important;
    font-style: normal !important;
    font-weight: normal !important;
    text-shadow: 0 1px 1px rgba(0,0,0,0.5) !important;
    line-height: 1 !important;
}

/* ============================================
   FULL VIEW SAFETY OVERRIDES
   Ensures Full View stays stable after Heart View changes.
   ============================================ */

/* Fix node size and image size in Full View */
body .pt-tree:not(.view-compact) #professional-tree-canvas .member-card {
    min-width: 120px !important;
    max-width: 160px !important;
    width: auto !important;
    height: auto !important;
    padding: 10px !important;
    border-radius: 6px !important;
    background-color: #fff; /* Fallback if no inline style */
    display: inline-block !important;
    position: relative !important;
    overflow: visible !important;
}

body .pt-tree:not(.view-compact) #professional-tree-canvas .member-card .thumb {
    display: block !important;
    width: 60px !important;
    height: 60px !important;
    margin: 0 auto 8px auto !important;
    overflow: hidden !important;
    border-radius: 50% !important;
}

body .pt-tree:not(.view-compact) #professional-tree-canvas .member-card .thumb img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Ensure text is visible and properly sized in Full View */
body .pt-tree:not(.view-compact) #professional-tree-canvas .member-card strong {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    font-size: 11px !important;
    margin-bottom: 3px !important;
    color: #333 !important;
}

body .pt-tree:not(.view-compact) #professional-tree-canvas .member-card .m-num {
    display: block !important;
    margin-top: 3px !important;
    font-size: 10px !important;
    color: inherit !important;
}

body .pt-tree:not(.view-compact) #professional-tree-canvas .member-card span {
    display: block !important;
    width: 100% !important;
    font-size: 10px !important;
    color: #666 !important;
}

/* White text for dark backgrounds in Full View */
body .pt-tree:not(.view-compact) #professional-tree-canvas .member-card.dark-bg strong,
body .pt-tree:not(.view-compact) #professional-tree-canvas .member-card.dark-bg span {
    color: #fff !important;
}

/* Fix hover options position in Full View */
body .pt-tree:not(.view-compact) #professional-tree-canvas .member-card .pt-options {
    position: absolute !important;
    top: -5px !important;
    right: -5px !important;
    margin: 0 !important;
    display: none; /* Only show on hover */
    gap: 4px !important;
    z-index: 20 !important;
}

body .pt-tree:not(.view-compact) #professional-tree-canvas .member-card:hover .pt-options {
    display: flex !important;
}

body .pt-tree:not(.view-compact) #professional-tree-canvas .member-card .pt-options b {
    width: 22px !important;
    height: 22px !important;
    line-height: 22px !important;
    font-size: 10px !important;
    text-align: center !important;
    border-radius: 50% !important;
    background: #333 !important;
    color: #fff !important;
    display: inline-block !important;
}

/* Fix lines alignment in Full View */
body .pt-tree:not(.view-compact) #professional-tree-canvas li {
    padding-top: 20px !important;
    transition: none !important;
}

/* Hide floating hyphens between nodes in all views */
#professional-tree-canvas .node-group {
    font-size: 0 !important;
}
#professional-tree-canvas .node-group > * {
    font-size: 14px !important; /* Restore normal font size for children */
}

/* ============================================
   TEXT ONLY VIEW (Small Boxes)
   v10.20 - Requested by user for minimalist tree.
   ============================================ */

body .pt-tree.view-text-only #professional-tree-canvas .member-card {
    width: 120px !important;
    height: 50px !important;
    min-height: 50px !important;
    min-width: 120px !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: hidden !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    background-color: #333 !important; /* Premium dark theme for text view */
}

/* Hide everything by default in text view, then show only name and number */
body .pt-tree.view-text-only #professional-tree-canvas .member-card > * {
    display: none !important;
}
body .pt-tree.view-text-only #professional-tree-canvas .member-card strong,
body .pt-tree.view-text-only #professional-tree-canvas .member-card .m-num {
    display: block !important;
}

body .pt-tree.view-text-only #professional-tree-canvas .member-card strong {
    width: 100% !important;
    font-size: 13px !important;
    color: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

body .pt-tree.view-text-only #professional-tree-canvas .member-card .m-num {
    margin-top: 2px !important;
    font-size: 11px !important;
    color: rgba(255,255,255,0.8) !important;
    font-weight: normal !important;
}

body .pt-tree.view-text-only #professional-tree-canvas li {
    padding-top: 30px !important;
}