/* 부서 트리뷰 · 조직도 공용 스타일.

   RCL 의 정적 자산이므로 앱에서 아래 한 줄로 참조한다:
     <link rel="stylesheet" href="_content/Umed.Core/dept-tree.css" />

   색은 CSS 변수로 빼 두어 앱별 테마에서 덮어쓸 수 있게 했다. */

.umed-dept-tree,
.umed-orgchart {
    --dept-line: var(--df-border, #E4E4E7);
    --dept-hover: var(--df-fill-subtle, #F4F4F5);
    --dept-selected: var(--df-primary-soft, #EFF6FF);
    --dept-inactive: var(--df-text-disabled, #A1A1AA);
    --dept-code: var(--df-text-subtle, #71717A);
}

/* ── 트리뷰 ───────────────────────────────────────────────────────────── */

.umed-dept-toolbar {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
    margin-bottom: .6rem;
}

.umed-dept-search { max-width: 20rem; }

.umed-dept-stat {
    margin-left: auto;
    font-size: .8rem;
    color: var(--dept-code);
}

.umed-dept-root,
.umed-dept-children {
    list-style: none;
    margin: 0;
    padding: 0;
}

.umed-dept-row {
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: .15rem .3rem;
    border-radius: .25rem;
    line-height: 1.6;
}

.umed-dept-row:hover { background: var(--dept-hover); }
.umed-dept-row.selected { background: var(--dept-selected); }

/* 사용여부=0. 지우지 않고 흐리게 남긴다 — 미사용 부모 아래에 사용 중인 자식이 있으면
   숨기는 순간 그 자식까지 트리에서 사라진다. */
.umed-dept-row.inactive .umed-dept-label { color: var(--dept-inactive); }

.umed-dept-toggle {
    flex: 0 0 1.1rem;
    width: 1.1rem;
    height: 1.1rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--dept-code);
    font-size: .75rem;
    line-height: 1;
    cursor: pointer;
}

.umed-dept-toggle.empty { cursor: default; }
.umed-dept-toggle:hover:not(.empty) { color: inherit; }

.umed-dept-check { margin: 0 .1rem 0 0; }

.umed-dept-label { cursor: pointer; }

.umed-dept-code {
    font-size: .72rem;
    color: var(--dept-code);
    background: none;
    padding: 0;
}

.umed-dept-count {
    font-size: .68rem;
    color: var(--dept-code);
    background: var(--dept-hover);
    border-radius: 999px;
    padding: 0 .4rem;
}

.umed-dept-badge {
    font-size: .65rem;
    color: #fff;
    background: var(--dept-inactive);
    border-radius: .2rem;
    padding: 0 .25rem;
    margin-left: .3rem;
    vertical-align: middle;
}

.umed-dept-loading {
    color: var(--dept-code);
    font-size: .85rem;
    padding: .5rem 0;
}

/* ── 검색 결과 ────────────────────────────────────────────────────────── */

.umed-dept-hits {
    border: 1px solid var(--dept-line);
    border-radius: .3rem;
    margin-bottom: .6rem;
    max-height: 16rem;
    overflow-y: auto;
}

.umed-dept-hit {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    border-bottom: 1px solid var(--dept-line);
    background: none;
    padding: .3rem .6rem;
    font-size: .85rem;
    cursor: pointer;
}

.umed-dept-hit:last-child { border-bottom: 0; }
.umed-dept-hit:hover { background: var(--dept-hover); }
.umed-dept-hit.inactive { color: var(--dept-inactive); }

.umed-dept-hit-path {
    display: block;
    font-size: .72rem;
    color: var(--dept-code);
}

/* ── 조직도 ───────────────────────────────────────────────────────────── */

.umed-orgchart-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: .5rem;
    margin-bottom: .5rem;
    border-bottom: 1px solid var(--dept-line);
}

.umed-orgchart-title { font-size: 1.05rem; font-weight: 600; }

.umed-orgchart-meta {
    text-align: right;
    font-size: .78rem;
    color: var(--dept-code);
}

.umed-orgchart-path { margin-bottom: .1rem; }

/* 연결선이 어긋나지 않으려면 고정폭이어야 한다. */
.umed-orgchart-body {
    font-family: "D2Coding", "Consolas", "Menlo", monospace;
    font-size: .84rem;
    line-height: 1.7;
    overflow-x: auto;
}

.umed-orgchart-line { white-space: pre; }
.umed-orgchart-line.inactive .umed-orgchart-name { color: var(--dept-inactive); }

.umed-orgchart-connector { color: var(--dept-line); }

.umed-orgchart-code {
    font-size: .72rem;
    color: var(--dept-code);
    background: none;
    margin-left: .5rem;
}

/* ── 인쇄 ─────────────────────────────────────────────────────────────── */

@media print {
    .umed-dept-toolbar,
    .umed-dept-hits { display: none; }

    .umed-orgchart-body { overflow-x: visible; }
    .umed-orgchart-line { break-inside: avoid; }
}

/* ── 코드 다중선택 상자 (신분 · 신분상태) ────────────────────────────────── */

.umed-codebox {
    border: 1px solid #dee2e6;
    border-radius: .3rem;
    padding: .3rem .5rem;
    max-height: 9.5rem;
    overflow-y: auto;
    background: #fff;
}

.umed-codeitem {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .82rem;
    padding: .1rem 0;
    cursor: pointer;
}

.umed-codeitem:hover { background: #f1f3f5; }

.umed-codeitem code {
    margin-left: auto;
    font-size: .7rem;
    color: #868e96;
    background: none;
    padding: 0;
}

/* ── 검색 필터 타이틀 ('전체' 체크박스 포함) ──────────────────────────────── */

.umed-filter-title {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    font-weight: 600;
    margin-bottom: .35rem;
    cursor: pointer;
}

.umed-filter-state {
    margin-left: auto;
    font-weight: 400;
    font-size: .75rem;
    color: #868e96;
}

/* '전체' 일 때 아래 컨트롤을 흐리게 — 조건이 적용되지 않는다는 것을 눈으로 알린다.
   fieldset[disabled] 이 내부 입력을 실제로 잠그므로 상태와 조작이 어긋나지 않는다. */
.umed-filter-body {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;   /* fieldset 기본값이 min-content 라 그리드 안에서 넘친다 */
}

.umed-filter-body:disabled {
    opacity: .45;
}