/* BOS-inspired personnel cards, organisation tree and grouped forms. */
.directory-panel { color:#1e293b; max-width:1600px; margin:4px auto 0; font-size:13px; }
.directory-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:16px; }
.directory-eyebrow { color:#718096; font-size:10px; letter-spacing:1.6px; font-weight:600; margin-bottom:8px; }
.directory-heading h1 { font-size:28px; line-height:1.3; letter-spacing:-.8px; font-weight:700; margin:0; }
.directory-heading p { font-size:13px; color:#8390a3; margin:7px 0 0; }
.directory-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.directory-btn { display:inline-flex; gap:7px; align-items:center; justify-content:center; height:36px; padding:0 14px; border:1px solid #dfe4ec; border-radius:7px; color:#475569; background:white; font-size:12px; font-family:inherit; font-weight:500; cursor:pointer; white-space:nowrap; transition:background .15s,border-color .15s; }
.directory-btn:hover { background:#f8fafc; border-color:#bcc8d8; }
.directory-btn:disabled,.directory-link:disabled { opacity:.45; cursor:not-allowed; }
.directory-primary { background:#3b67e9; border-color:#3b67e9; color:white; box-shadow:0 2px 3px #3b67e91c; }
.directory-primary:hover { background:#3058cd; border-color:#3058cd; }
.directory-small { height:29px; padding:0 9px; font-size:11px; }
.directory-summary { display:flex; align-items:center; gap:17px; color:#7b8798; margin:0 0 22px; font-size:12px; }
.directory-summary span { display:inline-flex; align-items:center; gap:6px; }
.directory-summary strong { font-size:16px; font-weight:600; color:#334155; }
.directory-summary i { width:1px; height:12px; background:#dfe4ec; }
.directory-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:#35ad82; flex-shrink:0; }
.directory-layout { display:grid; grid-template-columns:290px minmax(0,1fr); gap:18px; align-items:start; }
.directory-card { background:white; border:1px solid #e3e8ef; border-radius:11px; box-shadow:0 2px 5px #0f172a03; overflow:hidden; }
.directory-card-heading { min-height:76px; padding:18px 19px 16px; border-bottom:1px solid #eef0f5; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.directory-card-heading h2 { font-size:14px; font-weight:600; display:flex; align-items:center; gap:8px; margin:0; color:#253247; }
.directory-card-heading p { color:#98a2b3; font-size:11px; line-height:1.6; margin:5px 0 0; }
.directory-count { font-size:10px; font-weight:500; color:#65758f; background:#f0f3f9; border-radius:5px; padding:2px 6px; }
.directory-icon-btn { display:flex; justify-content:center; align-items:center; width:26px; height:26px; border:1px solid #e6eaf1; border-radius:6px; background:#fff; color:#6e7d91; cursor:pointer; flex-shrink:0; }
.directory-icon-btn:hover { color:#3b67e9; border-color:#c8d3f3; }
.directory-icon-btn:disabled { opacity:.4; cursor:default; }
.directory-search { display:flex; align-items:center; gap:8px; border:1px solid #e3e8ef; border-radius:7px; color:#9aa5b5; background:#fff; padding:0 11px; height:35px; }
.directory-search:focus-within { border-color:#809df1; box-shadow:0 0 0 2px #3b67e90d; }
.directory-search input { border:0; outline:0; color:#334155; background:transparent; min-width:0; width:100%; height:100%; font-family:inherit; font-size:12px; }
.directory-search input::placeholder { color:#a0aaba; }
.directory-search button { border:0; background:none; color:#94a3b8; cursor:pointer; font-size:18px; }
.directory-tree-search { margin:14px 14px 8px; background:#fafbfd; height:32px; }
.directory-tree-scroll { padding:4px 9px 14px; max-height:calc(100vh - 370px); min-height:260px; overflow:auto; }
.directory-nav { display:flex; align-items:center; gap:9px; width:100%; padding:10px 11px; border:1px solid transparent; background:transparent; color:#65748b; font-size:12px; font-family:inherit; text-align:left; border-radius:6px; cursor:pointer; }
.directory-nav span { flex:1; }
.directory-nav small { font-size:10px; color:#98a3b3; }
.directory-nav.selected,.directory-special.selected>.directory-nav { color:#3b67e9; background:#edf2ff; }
.directory-nav.selected small { color:#6f8bd8; }
.directory-nav:hover { background:#f4f6fa; }
.directory-tree-rows { margin-top:6px; padding-top:6px; border-top:1px solid #f0f2f6; }
.directory-unit { border:1px solid transparent; border-radius:6px; margin:1px 0; padding-left:calc(var(--depth)*12px); }
.directory-unit.selected { background:#edf2ff; }
.directory-unit-line { display:flex; align-items:center; min-height:34px; gap:2px; padding-right:4px; }
.directory-unit:hover { background:#f5f7fb; }
.directory-unit.selected:hover { background:#edf2ff; }
.directory-chevron { border:0; background:transparent; display:flex; align-items:center; justify-content:center; width:18px; height:22px; cursor:pointer; color:#8a96a8; flex-shrink:0; }
.directory-chevron svg { width:12px; height:12px; transition:transform .15s; }
.directory-chevron.open svg { transform:rotate(90deg); }
.directory-unit-label { display:flex; align-items:center; gap:7px; min-width:0; flex:1; font-size:12px; font-family:inherit; font-weight:500; border:0; background:none; padding:4px 0; color:#43536c; cursor:pointer; text-align:left; }
.directory-unit-label svg { color:#8c9dbd; width:15px; flex-shrink:0; }
.directory-unit-label span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.directory-unit-label small { font-size:10px; color:#99a5b6; font-weight:400; }
.directory-unit.selected .directory-unit-label,.directory-unit.selected .directory-unit-label svg { color:#3b67e9; }
.directory-grip { display:inline-flex; color:#c0c8d4; cursor:grab; flex-shrink:0; }
.directory-grip svg { width:12px; height:14px; stroke-width:3.3; }
.directory-grip:active { cursor:grabbing; }
.directory-tree-actions { display:flex; gap:3px; flex-shrink:0; }
.directory-tree-actions button { border:0; background:transparent; color:#96a3b7; font-size:10px; padding:2px 3px; font-family:inherit; cursor:pointer; border-radius:3px; }
.directory-tree-actions button:hover { color:#3b67e9; background:white; }
.directory-tree-person { display:flex; align-items:center; gap:6px; padding:5px 6px 5px calc(17px + var(--depth)*12px); min-height:28px; color:#8390a2; }
.directory-tree-person button { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; background:none; border:0; color:#708097; font-family:inherit; font-size:11px; cursor:pointer; padding:1px 0; }
.directory-tree-person button:hover { color:#3b67e9; }
.directory-tree-person .directory-dot { width:4px; height:4px; }
.directory-tree-person .directory-badge { font-size:9px; padding:2px 4px; }
.directory-special { border:1px solid transparent; border-top-color:#f0f2f6; margin-top:10px; padding-top:5px; border-radius:5px; }
.directory-disabled { margin-top:7px; border-top-color:#f0f2f6; border-radius:0 0 5px 5px; color:#9ca7b6; }
.directory-tree-footer { padding:12px 15px; border-top:1px solid #eef0f5; font-size:10px; line-height:1.7; color:#9aa6b8; display:flex; align-items:flex-start; gap:7px; }
.directory-tree-footer svg { flex-shrink:0; width:13px; margin-top:1px; }
.directory-tree-empty { padding:20px 10px; color:#94a3b8; font-size:12px; text-align:center; }
.directory-filters { display:flex; align-items:center; gap:10px; padding:17px 20px; }
.directory-filters .directory-search { width:300px; max-width:100%; }
.directory-filters select { height:35px; width:110px; border:1px solid #e3e8ef; background:#fff; border-radius:7px; color:#718096; padding:0 9px; font-family:inherit; font-size:12px; outline:0; }
.directory-table-wrap { overflow:auto; min-height:280px; }
.directory-table { border-collapse:collapse; width:100%; min-width:680px; font-size:12px; white-space:nowrap; }
.directory-table th { text-align:left; font-size:11px; font-weight:500; color:#8a96a8; background:#fafbfd; padding:11px 14px; border-top:1px solid #f0f2f6; border-bottom:1px solid #edf0f5; }
.directory-table td { padding:15px 14px; border-bottom:1px solid #f0f2f6; color:#58687e; }
.directory-table tbody tr:last-child td { border-bottom:0; }
.directory-table tbody tr:hover { background:#fbfcff; }
.directory-person-cell { display:flex; align-items:center; gap:10px; }
.directory-avatar { width:34px; height:34px; border-radius:10px; background:#eef2ff; color:#6b83cd; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:13px; flex-shrink:0; }
.directory-avatar.admin { background:#e9f3ff; color:#5089c7; }
.directory-avatar.muted { background:#f0f2f5; color:#a6afbc; }
.directory-person-name { display:flex; align-items:center; gap:6px; color:#334155; font-weight:500; }
.directory-subline { font-size:10px; color:#a0aaba; margin-top:4px; max-width:220px; overflow:hidden; text-overflow:ellipsis; }
.directory-self { font-size:9px; color:#a1adbf; font-weight:400; }
.directory-badge { display:inline-flex; align-items:center; padding:4px 7px; border-radius:4px; font-size:10px; font-weight:400; white-space:nowrap; }
.directory-leader { color:#ac842f; background:#fff6df; }
.directory-admin { color:#6185ca; background:#edf3ff; }
.directory-regular { color:#8791a4; background:#f2f4f8; }
.directory-department { font-size:11px; color:#78869c; }
.directory-status { display:inline-flex; align-items:center; gap:5px; color:#69a38c; font-size:10px; padding:4px 7px; border-radius:4px; background:#eff9f4; }
.directory-status b { width:4px; height:4px; border-radius:50%; background:#6eb899; }
.directory-status.off { background:#f2f3f5; color:#9da5b1; }
.directory-status.off b { background:#b6beca; }
.directory-align-right { text-align:right!important; }
.directory-row-actions { display:flex; justify-content:flex-end; align-items:center; gap:10px; }
.directory-link { border:0; padding:2px 0; background:none; color:#5d80d6; cursor:pointer; font-family:inherit; font-size:11px; white-space:nowrap; }
.directory-link:hover { color:#345bc7; }
.directory-danger { color:#d4757a; }
.directory-danger:hover { color:#bd4049; }
.directory-more { font-size:11px; color:#9ba7b8; letter-spacing:1px; border:0; background:transparent; padding:5px 2px; cursor:pointer; }
.directory-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:250px; color:#9aa7b9; text-align:center; gap:9px; padding:30px 15px; }
.directory-empty-icon { background:#f5f7fb; width:46px; height:46px; border:1px solid #edf0f6; border-radius:13px; display:flex; align-items:center; justify-content:center; margin-bottom:5px; }
.directory-empty-icon svg { width:22px; height:22px; color:#bac5d7; }
.directory-empty h3 { color:#718096; font-size:13px; font-weight:500; }
.directory-empty p { color:#a1adbe; font-size:11px; }
.directory-pagination { display:flex; justify-content:space-between; align-items:center; gap:10px; border-top:1px solid #eef0f5; padding:14px 20px; font-size:10px; color:#98a4b6; }
.directory-pagination>div { display:flex; align-items:center; gap:12px; }
.directory-pagination button { width:25px; height:25px; border:1px solid #e7ebf2; background:white; border-radius:5px; color:#7d8ba3; cursor:pointer; font-size:15px; }
.directory-pagination button:disabled { opacity:.35; cursor:default; }
.directory-drop-hint { margin:2px 0 5px 24px; color:#3b67e9; font-size:10px; }
.directory-panel .drop-target { border-color:#819eec!important; background:#edf2ff!important; box-shadow:0 0 0 2px #3b67e914; }
.directory-panel .drop-blocked { border-color:#e7a4a8!important; background:#fff3f3!important; }
.directory-panel .drop-blocked .directory-drop-hint { color:#c26d74; }
.directory-layout[aria-busy=true] { opacity:.6; pointer-events:none; transition:opacity .15s; }
.directory-error { background:#fff5f5; border:1px solid #f1d9dc; border-radius:7px; padding:12px 16px; font-size:12px; color:#ad6e76; margin-bottom:16px; display:flex; justify-content:space-between; }
.directory-dialog.el-dialog { border-radius:13px; padding:24px; max-height:calc(100dvh - 64px); margin-top:32px; display:flex; flex-direction:column; }
.directory-dialog .el-dialog__title { font-size:18px; font-weight:600; color:#27364c; }
.directory-dialog .el-dialog__header { margin:0; padding:0 28px 0 0; flex-shrink:0; }
.directory-dialog .el-dialog__body { padding:0; overflow-y:auto; min-height:0; }
.directory-dialog-description { font-size:12px; color:#99a5b7; margin:9px 0 20px; line-height:1.7; }
.directory-form section { border-top:1px solid #eef0f5; padding:18px 0; }
.directory-form section:last-child { padding-bottom:5px; }
.directory-form h3 { color:#495b76; font-weight:600; font-size:12px; margin:0 0 14px; }
.directory-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.directory-form label { display:flex; flex-direction:column; gap:7px; color:#66768e; font-size:12px; margin-bottom:16px; }
.directory-form-grid label { margin:0; }
.directory-form label>span:not(:last-child) { color:#c88e97; }
.directory-form input:not([type=checkbox]),.directory-form select { height:37px; border:1px solid #dfe5ee; border-radius:6px; background:white; color:#46566f; outline:0; padding:0 10px; font-family:inherit; font-size:12px; width:100%; min-width:0; }
.directory-form input:focus,.directory-form select:focus { border-color:#84a0ef; box-shadow:0 0 0 2px #3b67e90c; }
.directory-form input::placeholder { color:#b0bac8; }
.directory-form input[readonly],.directory-form select:disabled { background:#f8fafc; color:#98a4b5; }
.directory-form small { font-size:11px; color:#9aa6b8; line-height:1.7; font-weight:400; }
.directory-full { grid-column:1 / -1; }
.directory-checkbox { flex-direction:row!important; align-items:flex-start; gap:9px!important; font-size:12px; cursor:pointer; }
.directory-checkbox input { margin-top:3px; accent-color:#3b67e9; }
.directory-checkbox small { display:block; margin-top:5px; }
.directory-source-field { color:#66768e; font-size:12px; }
.directory-source-field p { padding:10px 0; color:#9aa6b8; }
.directory-hint { color:#9aa6b8; font-size:11px; }
.directory-dialog .el-dialog__footer { margin-top:20px; padding:17px 0 0; border-top:1px solid #edf0f5; display:flex; justify-content:flex-end; gap:9px; flex-shrink:0; }
.directory-mobile-nav { display:none; }
@media(min-width:1500px) { .directory-layout { grid-template-columns:310px minmax(0,1fr); } .directory-table td { padding-top:18px; padding-bottom:18px; } }
@media(max-width:1150px) { .directory-layout { grid-template-columns:250px minmax(0,1fr); gap:13px; } .directory-heading { align-items:flex-start; } .directory-heading h1 { font-size:25px; } .directory-card-heading { padding:16px 14px; } .directory-card-heading .directory-actions { gap:5px; } .directory-card-heading p { max-width:240px; } }
@media(max-width:980px) { .directory-layout { grid-template-columns:1fr; } .directory-tree-scroll { max-height:260px; min-height:100px; } .directory-tree-footer { display:none; } .directory-tree-search { max-width:350px; } .directory-heading { gap:12px; } .directory-heading>.directory-actions { max-width:240px; justify-content:flex-end; } }
@media(max-width:720px) { .directory-layout-shell>.aside { display:none; } .directory-layout-shell .main-body { padding:16px 12px; } .directory-layout-shell .directory-mobile-nav { display:block; border:1px solid #e2e8f0; border-radius:6px; padding:5px; font-family:inherit; color:#64748b; } .directory-heading { flex-direction:column; align-items:stretch; } .directory-heading>.directory-actions { max-width:none; justify-content:flex-start; } .directory-heading h1 { font-size:24px; } .directory-eyebrow { font-size:9px; } .directory-summary { gap:11px; margin-bottom:18px; font-size:11px; } .directory-filters { padding:12px; gap:7px; } .directory-card-heading { flex-wrap:wrap; min-height:70px; } .directory-filters .directory-search { width:auto; flex:1; } .directory-filters select { width:95px; } .directory-pagination { padding:12px; } .directory-dialog.el-dialog { padding:20px; } .directory-form-grid { grid-template-columns:1fr; } .directory-full { grid-column:auto; } }
.directory-panel button:focus-visible,.directory-dialog button:focus-visible { outline:2px solid #829ef1; outline-offset:2px; }