/* =====================================================================
   Shared JAT survey-tree styling.
   Used by client_survey.php and participation_rate_report.php (and any
   future page that opts in by adding class "jat-tree" to its <ul class="tree">).

   Every rule is scoped under .jat-tree so other legacy trees on the site
   (add_edit_reviewer, add_edit_survey, …) are completely unaffected.

   Covers three things that were previously duplicated per page:
     1. White-card nodes with a state-coded left accent.
     2. Action icon-buttons — both the JS-built .actions-group toolbar
        (client_survey) AND raw .sur_div action-spans (participation).
     3. The horizontal left-to-right mind-map layout + CSS connector elbows.
   ===================================================================== */

/* ---------- 1. Node: white card, state-coded left accent ---------- */
.jat-tree .sur_div,
.jat-tree .sur_div.active_node,
.jat-tree .sur_div.close_node,
.jat-tree .sur_div.deactive_node {
    align-items: center;
    background: #ffffff !important;
    border: 1px solid #e6e7e9;
    border-left: 3px solid #AFBC21;
    border-bottom: 1px solid #e6e7e9 !important;   /* flatten style_tree.css's 5px grey survey-assigned bar */
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
    color: #1f2937;
    display: inline-flex;
    min-height: 40px;
    padding: 0;
}
.jat-tree .sur_div.close_node    { border-left-color: #d63939; }
.jat-tree .sur_div.deactive_node { border-left-color: #adb5bd; }
.jat-tree .sur_div.sur_ass_div   { border-bottom: 1px solid #e6e7e9 !important; }

.jat-tree .sur_div a,
.jat-tree .sur_div a:hover { color: #1f2937; }

.jat-tree .assing_survey_emp_icon,
.jat-tree .assing_survey_emp_icon:hover { color: #6b7280 !important; }

/* ---------- 2. Node internals (client_survey JS-built markup) ---------- */
.jat-tree .jat-tree-content {
    align-items: center;
    display: flex;
    justify-content: center;
    padding: 0 8px 0 2px;
}
.jat-tree .jat-tree-label {
    color: #1f2937 !important;
    font-weight: 600;
    font-size: 13px;
    padding: 0 10px 0 6px;
    white-space: nowrap;
}
.jat-tree .action-button {
    align-items: center;
    border: 2px solid transparent;
    cursor: pointer;
    display: flex;
    padding: 4px;
}
.jat-tree .action-button.jat-tree-toggle { color: #6b7280; }
.jat-tree .action-button.jat-tree-toggle:hover { color: #AFBC21; }
.jat-tree .disabled-action { cursor: not-allowed; opacity: .45; pointer-events: none; }

.jat-tree .actions-group {
    display: flex;
    flex-direction: row;
    gap: 4px;
    padding-left: 10px;
    margin-left: 8px;
    border-left: 1px solid #eceef0;   /* divider between label and icon toolbar */
}

/* ---------- 2b. Action icon-buttons (both markup families) ---------- */
/* client_survey's .action-menu toolbar buttons AND participation's raw
   .sur_div action-spans share one look: white, grey icon, lime on hover. */
.jat-tree .actions-group .action-menu,
.jat-tree .sur_div span.add_action,
.jat-tree .sur_div span.edit_action,
.jat-tree .sur_div span.delete_action,
.jat-tree .sur_div span.highlight {
    align-items: center;
    background: #ffffff !important;
    border: 1px solid #e6e7e9 !important;
    border-radius: 6px !important;
    box-sizing: border-box;
    color: #6b7280 !important;
    cursor: pointer;
    display: inline-flex !important;
    height: 28px !important;
    justify-content: center;
    margin: 6px 0;
    min-width: 28px;
    width: 28px !important;
    position: static !important;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.jat-tree .actions-group .action-menu:hover,
.jat-tree .sur_div span.add_action:hover,
.jat-tree .sur_div span.edit_action:hover,
.jat-tree .sur_div span.delete_action:hover,
.jat-tree .sur_div span.highlight:hover {
    background: #AFBC21 !important;
    border-color: #AFBC21 !important;
    color: #1f2937 !important;
}

/* style_tree.css sets !important sprite background-images (survey.png / mail.png /
   highlight.png) on these action spans at (0,3,3) specificity — the icons now come
   from an injected SVG, so kill the sprites. Prefixing with .jat-tree + matching the
   repurposed classes (.assing_survey_icon etc.) out-specifies those rules. */
.jat-tree ul.tree li span.add_action,
.jat-tree ul.tree li span.edit_action,
.jat-tree ul.tree li span.delete_action,
.jat-tree ul.tree li span.highlight,
.jat-tree ul.tree li span.delete_action.assing_survey_icon,
.jat-tree ul.tree li span.delete_action.multiple_import_emp,
.jat-tree ul.tree li span.edit_action.assing_survey_emp_icon,
.jat-tree ul.tree li span.highlight.assing_survey_emp_icon {
    background-image: none !important;
    background-color: #ffffff !important;
}
.jat-tree ul.tree li span.add_action:hover,
.jat-tree ul.tree li span.edit_action:hover,
.jat-tree ul.tree li span.delete_action:hover,
.jat-tree ul.tree li span.highlight:hover {
    background-color: #AFBC21 !important;
}

/* Once a node is JS-styled (has .jat-tree-content), hide the stray action-spans /
   toggle the tree plugin re-injects as DIRECT children — the real actions live in
   .jat-tree-content > .actions-group. (participation has no .jat-tree-content, so
   its raw spans stay visible and get the button look above.) */
.jat-tree .sur_div:has(.jat-tree-content) > span.add_action,
.jat-tree .sur_div:has(.jat-tree-content) > span.edit_action,
.jat-tree .sur_div:has(.jat-tree-content) > span.delete_action,
.jat-tree .sur_div:has(.jat-tree-content) > span.highlight,
.jat-tree .sur_div:has(.jat-tree-content) > b.hide:not(.jat-tree-toggle) {
    display: none !important;
}

/* ---------- 3. Horizontal (left-to-right) mind-map layout ----------
   jquery.tree.js renders top-down and draws connector lines in JS, which
   reflows the whole tree on expand. Hide those JS lines and lay each li out
   as [node] | [subtree], vertically centred, with CSS connector elbows. */
.jat-tree span.vertical,
.jat-tree span.horizontal { display: none !important; }

.jat-tree { text-align: left !important; overflow-x: auto; }
.jat-tree li {
    display: flex !important;
    align-items: center;
    text-align: left !important;
    margin: 8px 0 !important;
    padding: 0 !important;
    position: relative;
    vertical-align: top;
}
.jat-tree li > .sur_div { flex: 0 0 auto; }
.jat-tree li > .subtree {
    margin: 0 0 0 40px !important;
    padding: 0 !important;
    width: auto !important;
    position: relative;
}

/* connector elbows */
.jat-tree .subtree { position: relative; }
.jat-tree .subtree > li::after {
    content: '';
    position: absolute;
    left: -20px;
    top: -8px;
    bottom: -8px;
    border-left: 2px solid #d7dade;
}
.jat-tree .subtree > li:first-child::after { top: 50%; }
.jat-tree .subtree > li:last-child::after  { bottom: 50%; }
.jat-tree .subtree > li:only-child::after  { display: none; }
.jat-tree .subtree > li::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 50%;
    width: 20px;
    border-top: 2px solid #d7dade;
}
.jat-tree li:not(.hide):has(> .subtree) > .sur_div::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    width: 20px;
    border-top: 2px solid #d7dade;
}
.jat-tree .subtree > li::after,
.jat-tree .subtree > li::before,
.jat-tree li > .sur_div::after { pointer-events: none; }