/**
 * fancytree-custom.css
 *
 * Custom CSS for Fancytree to style the tree structure and UI elements
 */

/* Basic fancytree style - override custom styling for basic-fancytree class */
ul.fancytree-container.basic-fancytree {
    font-family: inherit;
    font-size: inherit;
    white-space: nowrap;
    padding: 3px;
    margin: 0;
    background-color: white;
    border: 1px solid gray;
    overflow: auto;
    min-height: 0%;
    position: relative;
}

/* Reset tree node styles for basic-fancytree */
.basic-fancytree span.fancytree-node {
    display: inline-block !important;
    width: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Reset tree title styles for basic-fancytree */
.basic-fancytree span.fancytree-title {
    display: inline-block;
    vertical-align: middle;
    margin: 0 3px;
    padding: 0 3px;
    border: 1px solid transparent;
    border-radius: 0;
    flex-grow: 0;
}

/* Reset active node styling for basic-fancytree */
.basic-fancytree span.fancytree-active {
    background-color: inherit !important;
    color: inherit !important;
}

.basic-fancytree span.fancytree-active span.fancytree-title {
    background-color: var(--c-primary-soft, #e6f4ec) !important;
    color: black !important;
    border-color: #99DEFD !important;
}

/* Base tree container styles */
ul.fancytree-container {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    white-space: nowrap;
    padding: 3px;
    margin: 0;
    background-color: white;
    overflow: auto;
    min-height: 0%;
    position: relative;
    list-style-type: none;
    list-style-image: none;
    border:none;
}

/* Tree node styles */
span.fancytree-node {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    margin-top: 1px !important;
    margin-bottom: 1px !important;
    white-space: nowrap !important;
}

/* Tree title styles */
span.fancytree-title {
    color: #333;
    vertical-align: middle;
    margin: 0;
    padding: 0 3px;
    border: 1px solid transparent;
    border-radius: 0;
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    flex-grow: 1;
}

/* Expander styling */
span.fancytree-expander {
    width: 16px;
    height: 16px;
    display: inline-block;
    text-align: center;
    line-height: 16px;
    margin-right: 0;
    vertical-align: top;
}

/* Active node styling - apply to entire node (T-CMS 2.0 그린) */
span.fancytree-active {
    background-color: var(--c-primary-soft, #e6f4ec) !important;
    color: var(--c-primary, #0e925b) !important;
    border-radius: 4px;
}

span.fancytree-active span.fancytree-title {
    background-color: transparent !important;
    color: var(--c-primary, #0e925b) !important;
    font-weight: 600;
    border-color: transparent !important;
}

span.fancytree-active span.fancytree-expander {
    color: var(--c-primary, #0e925b) !important;
}

/* Selected node styling (T-CMS 2.0 그린 틴트) */
span.fancytree-selected span.fancytree-title {
    font-style: normal;
    background-color: var(--c-primary-soft, #e6f4ec);
    border-color: var(--c-primary-soft, #e6f4ec);
}

/* Hover styling */
span.fancytree-node:hover span.fancytree-title {
    background-color: #f5f5f5;
}

/* Focus styling */
span.fancytree-focused span.fancytree-title {
    outline: 1px dotted #000;
}

/* Custom tree node left part (title and arrow) */
.tree-node-left {
    display: flex;
    align-items: center;
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    border: none;
}

/* Custom tree node right part (action buttons) */
.tree-node-actions {
    display: flex;
    align-items: center;
    margin-left: 10px;
}

/* Action button styles */
.tree-action-add, .tree-action-edit, .tree-action-delete {
    width: 16px;
    height: 16px;
    display: inline-block;
    text-align: center;
    line-height: 16px;
    margin-left: 5px;
    cursor: pointer;
    color: #555;
}

/* Hover effects for action buttons */
.tree-action-add:hover {
    color: #5cb85c;
}

.tree-action-edit:hover {
    color: #f0ad4e;
}

.tree-action-delete:hover {
    color: #d9534f;
}

/* Disabled button styles */
.tree-action-disabled {
    opacity: 0.4;
    cursor: not-allowed !important;
}

/* Hidden button styles */
.tree-action-hidden {
    visibility: hidden;
}

.box-body .fancytree-expander {
    background-image: none;
}

.fancytree-match .tree-title {
    font-weight: bold;
    color: #8f122b;
    font-style: italic;
}

/* ========================================================================
 * T-CMS 2.0 : 체크박스 트리(basic-fancytree, win8 스킨) 공통 스킨
 * 스케줄/멀티/버전배포 팝업의 디스플레이 선택 트리(/common/scheduletree 등)
 * ======================================================================== */
.basic-fancytree { font-size: 13px; }
.basic-fancytree span.fancytree-node {
    display: flex;           /* 체크박스/아이콘/제목 수직 중앙 정렬 */
    align-items: center;
    gap: 3px;
    min-height: 30px;
    padding: 3px 2px;
    border-radius: 4px;
}
.basic-fancytree span.fancytree-node > span { flex: 0 0 auto; margin-top: 0; margin-bottom: 0; vertical-align: middle; }
/* flex 미적용(인라인 배치) 상황 대비 : 노드 내 모든 span 수직 중앙 정렬 */
.basic-fancytree span.fancytree-node span,
.basic-fancytree span.fancytree-node .fancytree-expander,
.basic-fancytree span.fancytree-node .fancytree-checkbox,
.basic-fancytree span.fancytree-node .fancytree-icon,
.basic-fancytree span.fancytree-node .fancytree-title { vertical-align: middle; }
.basic-fancytree span.fancytree-node > span.fancytree-title {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.basic-fancytree span.fancytree-title { color: var(--c-text, #1f2937); }
.basic-fancytree span.fancytree-node:hover { background-color: var(--c-table-row-hover, #eef7f2); }
/* 체크된 행이라도 제목은 기본색 유지 — 선택 표시는 체크박스가 담당 (Figma) */
.basic-fancytree span.fancytree-selected span.fancytree-title,
.basic-fancytree span.fancytree-active span.fancytree-title {
    background-color: transparent !important;
    color: var(--c-text, #1f2937) !important;
    font-weight: 400;
    border-color: transparent !important;
}
.basic-fancytree span.fancytree-active { background-color: transparent !important; }

/* 펼침 아이콘 : win8 스프라이트 → 가는 셰브론 */
.basic-fancytree span.fancytree-expander {
    background-image: none !important;
    position: relative;
    width: 16px;
}
.basic-fancytree span.fancytree-expander::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 12px; height: 12px;
    margin: -6px 0 0 -6px;
    background-color: var(--c-text-sub, #6b7280);
    -webkit-mask: url(/static/images/icons/icon-chevron-right.svg) no-repeat center / contain;
    mask: url(/static/images/icons/icon-chevron-right.svg) no-repeat center / contain;
    transition: transform .15s;
}
.basic-fancytree .fancytree-expanded > span.fancytree-expander::before { transform: rotate(90deg); }
.basic-fancytree .fancytree-exp-n > span.fancytree-expander::before,
.basic-fancytree .fancytree-exp-nl > span.fancytree-expander::before { display: none; }

/* 체크박스 : win8 스프라이트 → 그린 커스텀 (Figma: 18px 라운드 스퀘어) */
.basic-fancytree span.fancytree-checkbox {
    background-image: none !important;
    width: 18px; height: 18px;
    margin-top: 0;
    margin-right: 4px;
    border: 1.5px solid var(--c-border-strong, #d0d6dd);
    border-radius: 5px;
    background-color: #fff;
    position: relative;
}
.basic-fancytree .fancytree-selected > span.fancytree-checkbox,
.basic-fancytree .fancytree-partsel.fancytree-selected > span.fancytree-checkbox {
    background-color: var(--c-primary, #0e925b);
    border-color: var(--c-primary, #0e925b);
}
.basic-fancytree .fancytree-selected > span.fancytree-checkbox::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 11px; height: 11px;
    margin: -5.5px 0 0 -5.5px;
    background-color: #fff;
    -webkit-mask: url(/static/images/tcms2/icons/check.svg) no-repeat center / contain;
    mask: url(/static/images/tcms2/icons/check.svg) no-repeat center / contain;
}
/* 부분 선택(하위 일부만 체크) : 연그린 배경 + 마이너스 */
.basic-fancytree .fancytree-partsel:not(.fancytree-selected) > span.fancytree-checkbox {
    background-color: var(--c-primary-soft, #e6f4ec);
    border-color: var(--c-primary, #0e925b);
}
.basic-fancytree .fancytree-partsel:not(.fancytree-selected) > span.fancytree-checkbox::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 9px; height: 9px;
    margin: -4.5px 0 0 -4.5px;
    background-color: var(--c-primary, #0e925b);
    -webkit-mask: url(/static/images/tcms2/icons/minus.svg) no-repeat center / contain;
    mask: url(/static/images/tcms2/icons/minus.svg) no-repeat center / contain;
}

/* 노드 아이콘 : 폴더(앰버) / 디바이스 노드는 모니터 아이콘 */
.basic-fancytree span.fancytree-icon {
    background-image: none !important;
    position: relative;
}
.basic-fancytree span.fancytree-icon::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 15px; height: 15px;
    margin: -7.5px 0 0 -7.5px;
    background-color: #E9A63A;
    -webkit-mask: url(/static/images/tcms2/icons/folder.svg) no-repeat center / contain;
    mask: url(/static/images/tcms2/icons/folder.svg) no-repeat center / contain;
}
.basic-fancytree span.fancytree-node.display span.fancytree-icon::before {
    background-color: var(--c-text-sub, #6b7280);
    -webkit-mask: url(/static/images/icons/icon-monitor.svg) no-repeat center / contain;
    mask: url(/static/images/icons/icon-monitor.svg) no-repeat center / contain;
}

/* 디바이스 노드 매체타입 아이콘 : 글리프 → 플랫 라운드 스퀘어 (Figma, 색상은 JS dtypeColorMap의 currentColor) */
.basic-fancytree li.display span.glyphicon-expand {
    position: relative;
    width: 18px;
    display: inline-block;
}
.basic-fancytree li.display span.glyphicon-expand::before {
    content: "" !important;
    position: absolute;
    top: 50%; left: 50%;
    width: 14px; height: 14px;
    margin: -7px 0 0 -7px;
    background-color: currentColor;
    border-radius: 4px;
}