/*
 * 組織架構圖（CKE5 外掛 orgChart.js 產生的內容）
 * 前台 siteserver／freeze／siteserver-module 三種樣板都有載入這支。
 * 選擇器都至少三個 class：版型與 .htmldisplay div ul li（line-height: 2）這類規則才壓不過來。
 * 配色對比（白底）：主色 ≥ 6.5:1、主色上的白字 ≥ 6.5:1、淡底上的主色字 ≥ 5.7:1
 */
.nss-orgchart {
  --oc-main: #1f4e79;
  --oc-tint: #e7eff7;
  --oc-gap: 1.25em;
  margin: 1em 0;
  color: #1a1a1a;
}
.nss-orgchart.nss-oc-c-green { --oc-main: #2b6a2f; --oc-tint: #e8f2e8; }
.nss-orgchart.nss-oc-c-red { --oc-main: #9b2226; --oc-tint: #f7e9e9; }
.nss-orgchart.nss-oc-c-gray { --oc-main: #404040; --oc-tint: #eeeeee; }

/* 放不下又沒有 JS 可以切直排時（內容頁）才會捲動；內距留給焦點框，不會被裁掉 */
.nss-orgchart .nss-oc-chart {
  overflow-x: auto;
  padding: 8px;
  text-align: center;
}
/* float：GA006 編輯模式的 .boardbar ul li ul { float: left }（給頁籤列用的）會套到這裡的第二層，
   園長室被擠到右邊、橫排也量不準（2026-11-04 使用者截圖）。外層模組的清單樣式一律擋掉 */
.nss-orgchart .nss-oc-chart .nss-oc-tree,
.nss-orgchart .nss-oc-chart .nss-oc-ul {
  float: none;
  clear: none;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nss-orgchart .nss-oc-chart .nss-oc-li {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1.4;
}

/* ---- 單位方塊 ---- */
.nss-orgchart .nss-oc-chart .nss-oc-node {
  display: inline-block;
  box-sizing: border-box;
  /* 6em：四個字一行放得下；五個單位在 600px 寬的欄位（編輯器的中間欄）還能橫排 */
  width: 6em;
  margin: 0;
  padding: .45em .5em;
  border: 2px solid var(--oc-main);
  border-radius: 6px;
  background: #fff;
  color: #1a1a1a;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
  vertical-align: top;
}
/* 有連結的單位加底線，跟沒有連結的單位分得出來（不只靠顏色） */
.nss-orgchart .nss-oc-chart a.nss-oc-node {
  text-decoration: underline;
  text-underline-offset: .2em;
}
/* 另開新視窗的 ↗（aria-hidden，報讀軟體念的是 title「(另開新視窗)」） */
.nss-orgchart .nss-oc-chart .nss-oc-ext {
  display: inline-block;
  width: .75em;
  height: .75em;
  margin-left: .25em;
  vertical-align: baseline;
}
.nss-orgchart .nss-oc-chart a.nss-oc-node:hover {
  background: var(--oc-tint);
  text-decoration-thickness: 2px;
}
.nss-orgchart .nss-oc-chart .nss-oc-root > .nss-oc-node {
  width: auto;
  min-width: 9em;
  padding-inline: 1.2em;
  background: var(--oc-main);
  color: #fff;
}
.nss-orgchart .nss-oc-chart .nss-oc-root > a.nss-oc-node:hover {
  background: var(--oc-main);
  color: #fff;
}

/* ---- 橫排：最上層、第一層 ---- */
.nss-orgchart .nss-oc-chart .nss-oc-tree {
  display: flex;
  justify-content: center;
  gap: 2em;
  width: max-content;
  min-width: 100%;
}
.nss-orgchart .nss-oc-chart .nss-oc-row {
  display: flex;
  justify-content: center;
  position: relative;
  padding-top: var(--oc-gap);
}
/* 上一層方塊往下的直線 */
.nss-orgchart .nss-oc-chart .nss-oc-row::before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(50% - 1px);
  height: var(--oc-gap);
  border-left: 2px solid var(--oc-main);
}
.nss-orgchart .nss-oc-chart .nss-oc-row > .nss-oc-li {
  padding: var(--oc-gap) .35em 0;
}
/* 橫線（左右各半）＋往下到方塊的直線 */
.nss-orgchart .nss-oc-chart .nss-oc-row > .nss-oc-li::before,
.nss-orgchart .nss-oc-chart .nss-oc-row > .nss-oc-li::after {
  content: '';
  position: absolute;
  top: 0;
  width: 50%;
  height: var(--oc-gap);
  border-top: 2px solid var(--oc-main);
}
.nss-orgchart .nss-oc-chart .nss-oc-row > .nss-oc-li::before {
  right: 50%;
}
.nss-orgchart .nss-oc-chart .nss-oc-row > .nss-oc-li::after {
  left: calc(50% - 1px);
  border-left: 2px solid var(--oc-main);
}
.nss-orgchart .nss-oc-chart .nss-oc-row > .nss-oc-li:first-child::before,
.nss-orgchart .nss-oc-chart .nss-oc-row > .nss-oc-li:last-child::after {
  border-top: 0;
}

/* ---- 直排：第二層以下掛在上一層方塊底下；整棵直排（nss-oc-vertical）也用同一套線 ---- */
.nss-orgchart .nss-oc-chart .nss-oc-col,
.nss-orgchart.nss-oc-vertical .nss-oc-chart .nss-oc-row {
  display: block;
  box-sizing: border-box;
  /* 跟上一層方塊一樣寬：左邊那條直線才會從方塊底下接出來 */
  width: 6em;
  margin: 0 auto;
  padding: 0 0 0 1em;
  text-align: left;
}
.nss-orgchart .nss-oc-chart .nss-oc-col .nss-oc-col,
.nss-orgchart.nss-oc-vertical .nss-oc-chart .nss-oc-row,
.nss-orgchart.nss-oc-vertical .nss-oc-chart .nss-oc-col {
  width: auto;
  margin: 0;
}
.nss-orgchart .nss-oc-chart .nss-oc-col > .nss-oc-li,
.nss-orgchart.nss-oc-vertical .nss-oc-chart .nss-oc-row > .nss-oc-li {
  padding: .5em 0 0;
}
/* 內距縮一點，四個字（例如「特教業務」）一行放得下 */
.nss-orgchart .nss-oc-chart .nss-oc-col > .nss-oc-li > .nss-oc-node {
  width: 5em;
  padding-inline: .35em;
}
.nss-orgchart .nss-oc-chart .nss-oc-col > .nss-oc-li::before,
.nss-orgchart.nss-oc-vertical .nss-oc-chart .nss-oc-row > .nss-oc-li::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -.5em;
  right: auto;
  width: 0;
  height: auto;
  border-top: 0;
  border-left: 2px solid var(--oc-main);
}
.nss-orgchart .nss-oc-chart .nss-oc-col > .nss-oc-li:last-child::before,
.nss-orgchart.nss-oc-vertical .nss-oc-chart .nss-oc-row > .nss-oc-li:last-child::before {
  bottom: auto;
  height: calc(1.65em + 2px);
}
.nss-orgchart .nss-oc-chart .nss-oc-col > .nss-oc-li::after,
.nss-orgchart.nss-oc-vertical .nss-oc-chart .nss-oc-row > .nss-oc-li::after {
  content: '';
  position: absolute;
  top: calc(1.65em + 1px);
  left: -.5em;
  right: auto;
  width: .5em;
  height: 0;
  border-top: 2px solid var(--oc-main);
  border-left: 0;
}
.nss-orgchart.nss-oc-vertical .nss-oc-chart {
  text-align: left;
}
.nss-orgchart.nss-oc-vertical .nss-oc-chart .nss-oc-tree {
  display: block;
  width: auto;
  min-width: 0;
}
.nss-orgchart.nss-oc-vertical .nss-oc-chart .nss-oc-tree > .nss-oc-li + .nss-oc-li {
  margin-top: 1em;
}
.nss-orgchart.nss-oc-vertical .nss-oc-chart .nss-oc-row::before {
  display: none;
}
.nss-orgchart.nss-oc-vertical .nss-oc-chart .nss-oc-node {
  width: auto;
  min-width: 5em;
  max-width: 100%;
  text-align: left;
}

/* ---- 職掌清單 ---- */
.nss-orgchart .nss-oc-desc .nss-oc-desc-item {
  margin: 0 0 .9em;
}
.nss-orgchart .nss-oc-desc .nss-oc-dt {
  color: var(--oc-main);
  font-weight: 700;
  line-height: 1.6;
}
.nss-orgchart .nss-oc-desc .nss-oc-dd {
  margin: .15em 0 0;
  line-height: 1.8;
}
.nss-orgchart .nss-oc-desc {
  margin: 1.5em 0 0;
  padding: 0;
  text-align: left;
}
.nss-orgchart .nss-oc-empty {
  color: #555;
}

/* ---- 編輯器裡的整塊（後台才看得到） ---- */
.ck-content .nss-orgchart-widget {
  margin: 1em 0;
  padding: 4px;
  cursor: default;
}
/* 編輯畫面裡點到單位不能真的跳過去（會離開後台、沒存的內容就沒了）；點擊交給整塊去選取、按兩下編輯 */
.ck-content .nss-orgchart-widget a {
  pointer-events: none;
}
.ck-content .nss-orgchart-widget::before {
  content: '組織架構圖：按兩下編輯';
  display: block;
  font-size: .8rem;
  color: #555;
  text-align: left;
}

/* ---- 編輯對話框（後台）：上面設定、中間清單自己捲動、下面預覽與按鈕一直看得到 ---- */
.nss-ocm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, .5);
}
.nss-ocm {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 10001;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: min(1120px, 96vw);
  max-height: 94vh;
  transform: translate(-50%, -50%);
  border-radius: 10px;
  background: #fff;
  color: #1a1a1a;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .25);
  font-size: 15px;
  line-height: 1.5;
  text-align: left;
}
.nss-ocm .nss-ocm-head {
  flex: 0 0 auto;
  padding: 18px 24px 10px;
  border-bottom: 1px solid #ddd;
}
.nss-ocm .nss-ocm-title {
  margin: 0 0 .2em;
  font-size: 1.25em;
}
.nss-ocm .nss-ocm-hint {
  margin: 0 0 .6em;
  color: #444;
  font-size: .93em;
}
.nss-ocm .nss-ocm-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
  align-items: center;
}
.nss-ocm .nss-ocm-body {
  flex: 1 1 auto;
  min-height: 140px;
  overflow: auto;
  padding: 12px 24px;
}
.nss-ocm .nss-ocm-rows {
  display: grid;
  gap: 6px;
}
.nss-ocm .nss-ocm-row {
  margin-left: calc(var(--lv, 0) * 1.75em);
  padding: 6px 8px;
  border-left: 4px solid #1f4e79;
  border-radius: 0 4px 4px 0;
  background: #f3f6fa;
}
.nss-ocm .nss-ocm-row:focus-within {
  background: #e3ecf6;
}
.nss-ocm .nss-ocm-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.nss-ocm .nss-ocm-lv {
  flex: 0 0 auto;
  min-width: 3.6em;
  color: #444;
  font-size: .85em;
}
.nss-ocm .nss-ocm-name {
  flex: 1 1 9em;
}
.nss-ocm .nss-ocm-linksel {
  flex: 0 1 15em;
  width: 15em;
}
.nss-ocm .nss-ocm-nw {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 4px;
  align-items: center;
  white-space: nowrap;
}
.nss-ocm .nss-ocm-nw.is-disabled {
  color: #767676;
}
.nss-ocm .nss-ocm-tools {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 2px;
  margin-left: auto;
}
.nss-ocm .nss-ocm-more {
  display: grid;
  gap: 4px;
  margin: 6px 0 0 calc(3.6em + 6px);
}
.nss-ocm .nss-ocm-desc {
  resize: vertical;
}
.nss-ocm .nss-ocm-err {
  margin: 0;
  color: #b00020;
  font-size: .93em;
}
.nss-ocm [aria-invalid="true"] {
  border-color: #b00020;
  box-shadow: 0 0 0 1px #b00020;
}
.nss-ocm input[type="text"],
.nss-ocm input[type="url"],
.nss-ocm select,
.nss-ocm textarea {
  box-sizing: border-box;
  min-width: 0;
  padding: 4px 6px;
  border: 1px solid #767676;
  border-radius: 4px;
  background: #fff;
  color: #1a1a1a;
  font: inherit;
}
.nss-ocm input[type="url"],
.nss-ocm textarea {
  width: 100%;
}
.nss-ocm button {
  padding: 3px 10px;
  border: 1px solid #767676;
  border-radius: 4px;
  background: #fff;
  color: #1a1a1a;
  font: inherit;
  cursor: pointer;
}
.nss-ocm button:hover:not(:disabled) {
  background: #eef3f8;
}
.nss-ocm button:disabled {
  border-color: #c4c4c4;
  color: #8a8a8a;
  cursor: default;
}
.nss-ocm .nss-ocm-op {
  min-width: 2.1em;
  padding: 3px 6px;
  font-size: .93em;
}
.nss-ocm .nss-ocm-op-outdent,
.nss-ocm .nss-ocm-op-indent {
  white-space: nowrap;
}
.nss-ocm .nss-ocm-desc-btn {
  flex: 0 0 auto;
  font-size: .93em;
}
.nss-ocm .nss-ocm-desc-btn[aria-expanded="true"] {
  border-color: #1f4e79;
  background: #e3ecf6;
}
.nss-ocm .nss-ocm-add {
  margin-top: 10px;
}
.nss-ocm .nss-ocm-colors {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 0;
  padding: 0;
  border: 0;
}
.nss-ocm .nss-ocm-colors legend {
  float: left;
  margin-right: 4px;
  padding: 0;
  font-weight: 700;
}
.nss-ocm .nss-ocm-color,
.nss-ocm .nss-ocm-showdesc {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.nss-ocm .nss-ocm-swatch {
  display: inline-block;
  width: 1em;
  height: 1em;
  border-radius: 2px;
  background: #1f4e79;
}
.nss-ocm .nss-oc-c-green .nss-ocm-swatch { background: #2b6a2f; }
.nss-ocm .nss-oc-c-red .nss-ocm-swatch { background: #9b2226; }
.nss-ocm .nss-oc-c-gray .nss-ocm-swatch { background: #404040; }
.nss-ocm .nss-ocm-preview {
  flex: 0 1 auto;
  max-height: 36vh;
  overflow: auto;
  padding: 8px 24px;
  border-top: 1px solid #ddd;
  background: #fafafa;
}
.nss-ocm .nss-ocm-preview-label {
  color: #444;
  font-size: .85em;
}
.nss-ocm .nss-ocm-preview .nss-orgchart {
  margin: .25em 0;
}
.nss-ocm .nss-ocm-foot {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  padding: 10px 24px 16px;
  border-top: 1px solid #ddd;
}
.nss-ocm .nss-ocm-summary {
  margin: 0 auto 0 0;
  color: #b00020;
}
.nss-ocm .nss-ocm-summary:empty {
  display: none;
}
.nss-ocm .nss-ocm-ok {
  border-color: #1f4e79;
  background: #1f4e79;
  color: #fff;
}
.nss-ocm .nss-ocm-ok:hover:not(:disabled) {
  background: #163a5b;
}
@media (max-width: 760px) {
  .nss-ocm .nss-ocm-linksel {
    flex-basis: 100%;
    width: 100%;
  }
  .nss-ocm .nss-ocm-tools {
    margin-left: 0;
  }
  .nss-ocm .nss-ocm-more {
    margin-left: 0;
  }
}