:is(#organizationView,.school-grade-personnel) .so-page{display:grid;gap:20px;color:var(--ink,#20212b)}
:is(#organizationView,.school-grade-personnel) button,:is(#organizationView,.school-grade-personnel) input,:is(#organizationView,.school-grade-personnel) select{font:inherit}
:is(#organizationView,.school-grade-personnel) .so-intro{padding:3px 0 2px}
:is(#organizationView,.school-grade-personnel) .so-eyebrow{display:block;color:var(--brand,#5e5ce6);font-size:12px;font-weight:600;margin-bottom:7px}
:is(#organizationView,.school-grade-personnel) h2{font-size:22px;line-height:1.4;margin:0 0 7px}
:is(#organizationView,.school-grade-personnel) h3{font-size:16px;line-height:1.45;margin:0}
:is(#organizationView,.school-grade-personnel) p{color:var(--ink-2,#6e6e76);line-height:1.7;margin:5px 0 0}
:is(#organizationView,.school-grade-personnel) .so-metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
:is(#organizationView,.school-grade-personnel) .so-metric{appearance:none;text-align:left;background:#fff;border:1px solid var(--line,#ececef);border-radius:14px;padding:20px;cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:8px;transition:border-color .15s,box-shadow .15s}
:is(#organizationView,.school-grade-personnel) .so-metric:hover{border-color:#bbb9f3;box-shadow:0 4px 18px #4139a60a}
:is(#organizationView,.school-grade-personnel) .so-metric-unavailable{cursor:default}
:is(#organizationView,.school-grade-personnel) .so-metric-unavailable:hover{border-color:var(--line,#ececef);box-shadow:none}
:is(#organizationView,.school-grade-personnel) .so-metric-icon{grid-column:2;grid-row:1/3;background:#f1f0ff;color:var(--brand,#5e5ce6);width:36px;height:36px;border-radius:10px;display:grid;place-items:center}
:is(#organizationView,.school-grade-personnel) svg{width:20px;height:20px;flex-shrink:0}
:is(#organizationView,.school-grade-personnel) .so-metric-label{color:var(--ink-2,#6e6e76);font-size:13px}
:is(#organizationView,.school-grade-personnel) .so-metric strong{font-size:30px;line-height:1.2;color:var(--ink,#20212b)}
:is(#organizationView,.school-grade-personnel) .so-metric-link{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;color:var(--ink-3,#9c9ca6);font-size:12px;margin-top:6px}
:is(#organizationView,.school-grade-personnel) .so-overview-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px;align-items:start}
:is(#organizationView,.school-grade-personnel) .so-panel{background:#fff;border:1px solid var(--line,#ececef);border-radius:14px;padding:24px;min-width:0}
:is(#organizationView,.school-grade-personnel) .so-section-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
:is(#organizationView,.school-grade-personnel) .so-section-heading h2{font-size:18px;margin-bottom:3px}
:is(#organizationView,.school-grade-personnel) .so-section-heading p{font-size:13px}
:is(#organizationView,.school-grade-personnel) .so-button{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:34px;padding:7px 12px;border:1px solid var(--line,#ececef);border-radius:8px;background:#fff;color:var(--ink,#20212b);font-size:13px;cursor:pointer;white-space:nowrap}
:is(#organizationView,.school-grade-personnel) .so-button:hover{background:#f7f7fb}
:is(#organizationView,.school-grade-personnel) .so-button-primary{background:var(--brand,#5e5ce6);color:#fff;border-color:var(--brand,#5e5ce6)}
:is(#organizationView,.school-grade-personnel) .so-button-primary:hover{background:var(--brand-dark,#4b47c2)}
:is(#organizationView,.school-grade-personnel) button:disabled{opacity:.55;cursor:wait}
:is(#organizationView,.school-grade-personnel) button:focus-visible,:is(#organizationView,.school-grade-personnel) input:focus-visible,:is(#organizationView,.school-grade-personnel) select:focus-visible{outline:2px solid var(--brand,#5e5ce6);outline-offset:3px}
:is(#organizationView,.school-grade-personnel) .so-school-node{display:flex;align-items:center;gap:10px;border-radius:10px;background:#f4f3ff;color:#514dc5;padding:14px 16px;overflow-wrap:anywhere}
:is(#organizationView,.school-grade-personnel) .so-structure{list-style:none;margin:8px 0 0 24px;padding:0;border-left:1px solid #e2dff7}
:is(#organizationView,.school-grade-personnel) .so-structure li{display:flex;align-items:center;gap:9px;min-height:39px;margin-left:calc(var(--so-depth,0)*17px);padding:6px 0;overflow-wrap:anywhere}
:is(#organizationView,.school-grade-personnel) .so-branch{width:15px;height:1px;background:#e2dff7;flex-shrink:0}
:is(#organizationView,.school-grade-personnel) .so-badge{display:inline-block;white-space:nowrap;font-size:12px;color:#336748;background:#eef7f0;border-radius:6px;line-height:1.5;padding:3px 8px;font-weight:400}
:is(#organizationView,.school-grade-personnel) .so-badge-off{color:#888793;background:#f0f0f4}
:is(#organizationView,.school-grade-personnel) .so-more{font-size:12px;margin-top:12px}
:is(#organizationView,.school-grade-personnel) .so-entry-list{display:grid}
:is(#organizationView,.school-grade-personnel) .so-entry{display:flex;align-items:center;justify-content:space-between;gap:14px;background:#fff;text-align:left;border:0;border-top:1px solid var(--line,#ececef);padding:18px 0;cursor:pointer;color:var(--ink,#20212b)}
:is(#organizationView,.school-grade-personnel) .so-entry:first-child{border-top:0;padding-top:3px}
:is(#organizationView,.school-grade-personnel) .so-entry:last-child{padding-bottom:2px}
:is(#organizationView,.school-grade-personnel) .so-entry:hover strong{color:var(--brand,#5e5ce6)}
:is(#organizationView,.school-grade-personnel) .so-entry strong{font-size:14px;font-weight:600;display:block}
:is(#organizationView,.school-grade-personnel) .so-entry small{display:block;color:var(--ink-2,#6e6e76);margin-top:5px;line-height:1.6;font-size:12px}
:is(#organizationView,.school-grade-personnel) .so-entry>span:last-child{color:var(--ink-3,#9c9ca6);font-size:18px}
:is(#organizationView,.school-grade-personnel) .so-empty{text-align:center;padding:38px 15px}
:is(#organizationView,.school-grade-personnel) .so-empty p{margin:8px 0 15px}
:is(#organizationView,.school-grade-personnel) .so-empty-icon{display:grid;place-items:center;width:50px;height:50px;background:#f3f2ff;border-radius:14px;color:var(--brand,#5e5ce6);margin:0 auto 13px}
:is(#organizationView,.school-grade-personnel) .so-loading{padding:50px 24px;text-align:center;color:var(--ink-2,#6e6e76)}
:is(#organizationView,.school-grade-personnel) .so-status{padding:12px 16px;border:1px solid #dbeedd;background:#f2f9f3;color:#336748;border-radius:10px;line-height:1.6;overflow-wrap:anywhere}
:is(#organizationView,.school-grade-personnel) .so-status[hidden]{display:none}
:is(#organizationView,.school-grade-personnel) .so-status.so-error{background:#fff5f3;border-color:#f4d5cf;color:#ac4840}
:is(#organizationView,.school-grade-personnel) .so-editor{background:#f8f7ff;border:1px solid #e5e2fa;border-radius:12px;padding:20px;margin-bottom:20px}
:is(#organizationView,.school-grade-personnel) .so-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
:is(#organizationView,.school-grade-personnel) .so-form-grid label{display:grid;gap:8px;font-size:13px;color:var(--ink-2,#6e6e76)}
:is(#organizationView,.school-grade-personnel) .so-form-grid input,:is(#organizationView,.school-grade-personnel) .so-form-grid select{min-width:0;width:100%;height:40px;border:1px solid #dddce7;background:#fff;border-radius:8px;color:var(--ink,#20212b);padding:8px 11px}
:is(#organizationView,.school-grade-personnel) .so-form-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}
:is(#organizationView,.school-grade-personnel) .so-list-summary{display:flex;gap:12px;color:var(--ink-2,#6e6e76);font-size:13px;margin:0 0 12px}
:is(#organizationView,.school-grade-personnel) .so-list-summary span{color:var(--ink-3,#9c9ca6)}
:is(#organizationView,.school-grade-personnel) .so-table-wrap{overflow:auto;border:1px solid var(--line,#ececef);border-radius:10px}
:is(#organizationView,.school-grade-personnel) .so-table{width:100%;border-collapse:collapse;text-align:left;font-size:13px}
:is(#organizationView,.school-grade-personnel) .so-table th{padding:13px 15px;background:#fafafe;color:var(--ink-2,#6e6e76);font-weight:500;white-space:nowrap}
:is(#organizationView,.school-grade-personnel) .so-table td{padding:13px 15px;border-top:1px solid var(--line,#ececef);vertical-align:middle}
:is(#organizationView,.school-grade-personnel) .so-name{display:flex;gap:7px;align-items:center;padding-left:calc(var(--so-depth,0)*16px);min-width:130px;overflow-wrap:anywhere}
:is(#organizationView,.school-grade-personnel) .so-name strong{font-weight:500}
:is(#organizationView,.school-grade-personnel) .so-tree-mark{color:#b3b0cb;font-size:17px}
:is(#organizationView,.school-grade-personnel) .so-parent{color:var(--ink-2,#6e6e76);min-width:110px;overflow-wrap:anywhere}
:is(#organizationView,.school-grade-personnel) .so-row-actions{display:flex;gap:7px;flex-wrap:wrap;min-width:118px}
:is(#organizationView,.school-grade-personnel) .so-leave-dialog{width:min(420px,calc(100vw - 32px));margin:auto;padding:25px;border:1px solid var(--line,#ececef);border-radius:14px;background:#fff;color:var(--ink,#20212b);box-shadow:0 20px 70px #14133330}
:is(#organizationView,.school-grade-personnel) .so-leave-dialog::backdrop{background:#1b18374d}
:is(#organizationView,.school-grade-personnel) .so-leave-dialog h3{font-size:18px}
:is(#organizationView,.school-grade-personnel) .so-leave-dialog p{margin-top:10px}
:is(#organizationView,.school-grade-personnel) .so-leave-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}
@media(max-width:1100px){:is(#organizationView,.school-grade-personnel) .so-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}:is(#organizationView,.school-grade-personnel) .so-overview-grid{grid-template-columns:1fr}:is(#organizationView,.school-grade-personnel) .so-metric{padding:17px}}
@media(max-width:600px){:is(#organizationView,.school-grade-personnel) .so-page{gap:15px}:is(#organizationView,.school-grade-personnel) .so-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}:is(#organizationView,.school-grade-personnel) .so-metric{padding:15px;gap:7px}:is(#organizationView,.school-grade-personnel) .so-metric:last-child{grid-column:1/-1}:is(#organizationView,.school-grade-personnel) .so-metric strong{font-size:28px}:is(#organizationView,.school-grade-personnel) .so-panel{padding:17px}:is(#organizationView,.school-grade-personnel) .so-section-heading{align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:16px}:is(#organizationView,.school-grade-personnel) h2{font-size:20px}:is(#organizationView,.school-grade-personnel) .so-section-heading h2{font-size:18px}:is(#organizationView,.school-grade-personnel) .so-form-grid{grid-template-columns:1fr}:is(#organizationView,.school-grade-personnel) .so-editor{padding:15px}:is(#organizationView,.school-grade-personnel) .so-table td,:is(#organizationView,.school-grade-personnel) .so-table th{padding:11px 12px}:is(#organizationView,.school-grade-personnel) .so-name{padding-left:calc(var(--so-depth,0)*9px);min-width:110px}:is(#organizationView,.school-grade-personnel) .so-table-wrap{margin:0 -3px}:is(#organizationView,.school-grade-personnel) .so-structure{margin-left:15px}:is(#organizationView,.school-grade-personnel) .so-structure li{margin-left:calc(var(--so-depth,0)*10px)}:is(#organizationView,.school-grade-personnel) .so-empty{padding:26px 8px}}

:is(#organizationView,.school-grade-personnel) .so-drag-handle{display:inline-flex;align-items:center;justify-content:center;min-width:25px;min-height:34px;color:#9995b4;font-size:20px;letter-spacing:-5px;padding-right:5px;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;flex-shrink:0}
:is(#organizationView,.school-grade-personnel) .so-drag-handle:hover{color:var(--brand,#5e5ce6);background:#f2f0ff;border-radius:6px}
:is(#organizationView,.school-grade-personnel) .so-drag-handle[draggable="false"]{cursor:default;opacity:.45}
:is(#organizationView,.school-grade-personnel) .so-dragging{opacity:.4}
:is(#organizationView,.school-grade-personnel) .so-drop-before>td{box-shadow:inset 0 3px var(--brand,#5e5ce6);background:#f7f6ff}
:is(#organizationView,.school-grade-personnel) .so-drop-after>td{box-shadow:inset 0 -3px var(--brand,#5e5ce6);background:#f7f6ff}
:is(#organizationView,.school-grade-personnel) .so-sort-help{font-size:13px;margin-bottom:12px;color:var(--brand,#5e5ce6)}
:is(#organizationView,.school-grade-personnel) .so-row-actions button:disabled{cursor:default}
:is(#organizationView,.school-grade-personnel) .so-row-actions{min-width:160px}