/* Minimal, clean UI */
:root{
  --bg:#0b1220;
  --panel:#0f1a2d;
  --panel2:#0c1627;
  --text:#e7eefc;
  --muted:#9fb2d9;
  --line:#223355;
  --accent:#5aa8ff;
  --danger:#ff5a7a;
  --ok:#57d9a3;
  --status-notstarted: rgba(255,90,90,.90);
  --status-inprogress: rgba(255,165,0,.85);
  --status-agreed: rgba(87,217,163,.90);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius:14px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

/* Light mode overrides (applied via body.light-mode) */
body.light-mode{
  --bg:#f4f7fb;
  --panel:#ffffff;
  --panel2:#f0f4fa;
  --text:#0b1b33;
  --muted:#526785;
  --line:#d4deea;
  --accent:#2563eb;
  --danger:#e11d48;
  --ok:#059669;
  --status-notstarted: rgba(220,38,38,.85);
  --status-inprogress: rgba(245,158,11,.85);
  --status-agreed: rgba(16,185,129,.85);
  --shadow: 0 10px 30px rgba(15,23,42,.14);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(1200px 800px at 20% 10%, #13264a 0%, var(--bg) 60%);
  color:var(--text);
  font-family:var(--sans);
}

.topbar{
  height:74px;
  padding:0 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(10,16,30,.55);
  backdrop-filter: blur(10px);
  position:sticky;
  top:0;
  z-index:10;
}
.brand{display:flex; align-items:center; gap:12px;}
.logo{
  width:42px; height:42px; border-radius:12px;
  background: transparent;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  cursor:pointer;
}
.logo img{
  display:block;
  flex:1 1 auto;
  width:auto;
  height:100%;
  object-fit:contain;
}
.title .h1{font-size:16px; font-weight:800; line-height:1.1}
.title .h2{font-size:12px; color:var(--muted); margin-top:2px}

.controls{display:flex; align-items:center; gap:10px; flex-wrap:wrap}

/* Hide admin-only controls for general users (admin is managed by PHP session) */
body[data-admin="0"] #btnAddChild,
body[data-admin="0"] #btnMove,
body[data-admin="0"] #btnCopy,
body[data-admin="0"] #btnPaste,
body[data-admin="0"] #btnDelete,
body[data-admin="0"] #btnSave,
body[data-admin="0"] #btnImport{ display:none; }
.btn{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:var(--text);
  padding:9px 12px;
  border-radius:12px;
  cursor:pointer;
  transition:transform .05s ease, background .15s ease, border-color .15s ease;
  font-size:13px;
}
.btn:hover{background:rgba(255,255,255,.09)}
.btn:active{transform: translateY(1px)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn.primary{border-color: rgba(90,168,255,.55); background: rgba(90,168,255,.16)}
.btn.primary:hover{background: rgba(90,168,255,.22)}
.btn.danger{border-color: rgba(255,90,122,.55); background: rgba(255,90,122,.13)}
.btn.danger:hover{background: rgba(255,90,122,.18)}

/* Action button accents */
.btn.green{border-color: rgba(87,217,163,.55); background: rgba(87,217,163,.14)}
.btn.green:hover{background: rgba(87,217,163,.20)}

.btn.orange{border-color: rgb(245 158 11 / 55%); background: rgb(245 158 11 / 22%)}
.btn.orange:hover{background: rgb(245 158 11 / 28%)}

.btn.yellow{border-color: rgba(250,204,21,.55); background: rgba(250,204,21,.12)}
.btn.yellow:hover{background: rgba(250,204,21,.18)}

.btn.purple{border-color: rgba(167,139,250,.55); background: rgba(167,139,250,.14)}
.btn.purple:hover{background: rgba(167,139,250,.20)}

.btn.subtle{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:var(--text);}
.btn.subtle:hover{background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1)}

.toggle{display:flex; align-items:center; gap:8px; user-select:none; font-size:13px; color:var(--muted)}
.toggle input{display:none}
.toggle-ui{
  width:44px; height:26px; border-radius:16px;
  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.12);
  position:relative;
}
.toggle-ui::after{
  content:"";
  width:20px; height:20px; border-radius:50%;
  background: rgba(255,255,255,.75);
  position:absolute; top:2px; left:2px;
  transition:left .15s ease, background .15s ease;
}
.toggle input:checked + .toggle-ui{ background: rgba(87,217,163,.22); border-color: rgba(87,217,163,.45);}
.toggle input:checked + .toggle-ui::after{ left:22px; background: rgba(87,217,163,.95); }
.toggle-label{color:var(--text)}

.layout{
  height: calc(100vh - 74px);
  display:grid;
  grid-template-columns: 1.55fr .45fr;
  gap:14px;
  padding:14px;
}

/* In hierarchy view, move the details pane to the bottom to maximise horizontal space */
body[data-view="hierarchy"] .layout{
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
}
body[data-view="hierarchy"] .detailPane{
  /* Let the pane size to its content (no internal scrolling). */
  height: auto;
}
body[data-view="hierarchy"] .detailHeader{
  display: grid;
  grid-template-columns: 1.55fr .45fr;
  align-items: center;
}
body[data-view="hierarchy"] .detailHeader > :first-child{min-width:0;}
body[data-view="hierarchy"] .detailHeader > :last-child{justify-self:end;}
body[data-view="hierarchy"] .treePane{
  min-height: 0;
}

.treePane,.detailPane{
  background: rgba(10,16,30,.45);
  border:1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
  min-height:0;
}

.treeHeader{
  padding:12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  display:flex;
  gap:10px;
  align-items:center;
}
.search{
  flex:1;
  padding:10px 12px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: var(--text);
  outline:none;
}
.search::placeholder{color: rgba(231,238,252,.5)}
.hint{font-size:12px; color:var(--muted); white-space:nowrap}

.tree{
  padding:10px 0 18px 0;
  overflow:auto;
  height: calc(100% - 58px);
}

.nodeRow{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:12px;
  margin:2px 10px;
  border:1px solid transparent;
  background: transparent;
  cursor:pointer;
}
.nodeRow:hover{ background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.06); }
.nodeRow.selected{ background: rgba(90,168,255,.14); border-color: rgba(90,168,255,.35); }
.nodeRow.dragover{ outline: 2px dashed rgba(90,168,255,.7); outline-offset: 2px; }
.nodeRow.dragging{ opacity:.65 }

.expander{
  width:26px; height:26px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: var(--text);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  padding:0;
}
.expander:hover{background: rgba(255,255,255,.08)}
.expander.hidden{display:none}

.nodeLabel{ flex:1; font-size:13px; }
.badge{
  font-size:11px;
  color: var(--muted);
  border:1px solid rgba(255,255,255,.10);
  padding:4px 8px;
  border-radius:999px;
  background: rgba(255,255,255,.04);
}

/* List view badges: slightly stronger outline and tighter padding */
body[data-view="list"] .badge{
  border-width: 2px;
  padding: 3px 8px;
}

.detailPane{
  padding:0;
}
.detailPane.closed{opacity:.92}
.detailHeader{
  padding:12px 12px 10px 12px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.detailTitle{font-weight:800}
.detailMeta{font-size:12px; color:var(--muted); margin-top:2px; font-family:var(--mono)}
.detailBody{
  padding:12px;
  overflow:auto;
  height: calc(100% - 58px);
}

/* Hierarchy-view details layout (2x2 grid):
   top-left:  Description
   bottom-left: Owner
   top-right: Stewards
   bottom-right: Status */
body[data-view="hierarchy"] .detailBody{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 12px;
  /* Allow cells to match the tallest item in a row (e.g. Stewards) */
  align-items: stretch;
  /* No scroll region in hierarchy view; keep everything visible */
  overflow: visible;
  height: auto;
  flex: none;
}
body[data-view="hierarchy"] .detailBody .field{ margin-bottom: 0; }

/* Description (top-left) */
body[data-view="hierarchy"] .detailBody .field:nth-child(1){
  grid-column: 1;
  grid-row: 1;
  /* Let the textarea keep its normal min-height, but stretch ONLY if
     the Stewards cell makes the row taller. */
  display: flex;
  flex-direction: column;
  align-self: stretch;
}
body[data-view="hierarchy"] .detailBody .field:nth-child(1) textarea{
  /* Keep the old compact size by default.
     JS will increase this height only when the Stewards box is taller. */
  height: 72px;
  min-height: 72px;
  resize: none;
}

/* Owner (bottom-left) */
body[data-view="hierarchy"] .detailBody .field:nth-child(2){
  grid-column: 1;
  grid-row: 2;
}

/* Stewards (top-right) */
body[data-view="hierarchy"] .detailBody .field:nth-child(3){
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-self: stretch;
}
body[data-view="hierarchy"] .detailBody .field:nth-child(3) .stewardEditor{
  min-height: 72px;
}

/* Status (bottom-right) */
body[data-view="hierarchy"] .detailBody .field:nth-child(4){
  grid-column: 2;
  grid-row: 2;
}
.field{ margin-bottom:12px; }
.label{ font-size:12px; color: var(--muted); margin-bottom:6px; }
textarea, input, select{
  width:100%;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: var(--text);
  padding:10px 12px;
  outline:none;
  font-family: var(--sans);
  resize: vertical;
}

.hintInline{font-size:11px; color: rgba(231,238,252,.55); margin-left:6px;}

/* Steward chip editor */
.stewardEditor{
  width:100%;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: var(--text);
  padding:8px 10px;
  min-height: 42px;
}
.stewardEditor .chips{display:flex; flex-wrap:wrap; gap:6px; align-items:center;}
.stewardEditor .chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  font-size:12px;
}
.stewardEditor .chipX{
  border:0;
  background: transparent;
  color: rgba(231,238,252,.8);
  cursor:pointer;
  font-size:16px;
  line-height:1;
  padding:0;
}
.stewardEditor .chipX:hover{color: rgba(231,238,252,1)}
.stewardEditor .chipAdd{
  margin-top:8px;
  display:flex;
  gap:8px;
  align-items:center;
  width:100%;
}
.stewardEditor .chipAdd input,
.stewardEditor .chipAdd select{
  flex:1 1 auto;
  width:auto;
  min-width:0;
  max-width:100%;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: var(--text);
  border-radius: 10px;
  padding:8px 10px;
  outline:none;
}

.stewardEditor .chipConfirm{
  flex:0 0 auto;
  width:36px;
  height:36px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(231,238,252,1);
  cursor:pointer;
  display:none;
  align-items:center;
  justify-content:center;
  font-size:18px;
  line-height:1;
}
.stewardEditor .chipConfirm.show{display:inline-flex;}
.stewardEditor .chipConfirm:hover{background: rgba(255,255,255,.10);}

.stewardEditor.readonly .chipX,
.stewardEditor.readonly .chipAdd{display:none;}
.stewardEditor .chipEmpty{color: rgba(231,238,252,.55); font-size:13px; padding:8px 2px;}
textarea[readonly], input[readonly]{ opacity:.9 }
.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.pill{
  display:inline-block;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-size:12px;
  width:100%;
  text-align:center;
}
.divider{
  height:1px;
  background: rgba(255,255,255,.08);
  margin:14px 0;
}
.row{display:flex; gap:10px; flex-wrap:wrap}
.smallprint{
  font-size:12px;
  color: var(--muted);
  line-height:1.35;
}
code{font-family:var(--mono); font-size:12px; color: #d7e7ff}

/* Modal */
.backdrop{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:100;
}
.backdrop.hidden{display:none}
.modal{
  width:min(520px, calc(100vw - 24px));
  background: rgba(12,22,39,.95);
  border:1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding:14px;
}
.modalTitle{font-weight:800; margin-bottom:10px}
.modalActions{display:flex; justify-content:flex-end; gap:10px; margin-top:10px}

.select{cursor:pointer}

/* Toast */
.toast{
  position:fixed;
  bottom:18px;
  left:50%;
  transform: translateX(-50%);
  background: rgba(15,26,45,.95);
  border:1px solid rgba(255,255,255,.12);
  color: var(--text);
  padding:10px 12px;
  border-radius: 12px;
  box-shadow: var(--shadow);
  opacity:0;
  pointer-events:none;
  transition: opacity .2s ease;
  z-index:200;
  max-width: min(760px, calc(100vw - 24px));
}
.toast.show{opacity:1}

/* Responsive */
@media (max-width: 980px){
  .layout{grid-template-columns: 1fr; height:auto}
  .treePane{height:60vh}
  .detailPane{height:40vh}
}


.midToggle{display:flex; align-items:center; justify-content:center; flex:1;}
.controls{display:flex; gap:8px; align-items:center; justify-content:flex-end;}
.brand{display:flex; align-items:center; gap:12px;}

.treeHeader{display:flex; gap:10px; align-items:center; justify-content:space-between;}
.treeButtons{display:flex; gap:8px;}

.triple{display:grid; grid-template-columns: 1fr 1fr 1fr; gap:10px;}

select option{background:#fff; color:#000;}


.btn.active{box-shadow:0 0 0 2px rgba(90,168,255,.25) inset; border-color: rgba(90,168,255,.55);}

select{background: var(--panel2); color: var(--text); border:1px solid var(--line); border-radius:10px; padding:10px 10px;} select option{background: var(--panel2); color: var(--text);}

.detailTitleInput{font-size:18px; font-weight:700; width:100%; background:transparent; border:1px solid transparent; color:var(--text); padding:6px 8px; border-radius:10px;} .detailTitleInput:focus{outline:none; border-color: rgba(90,168,255,.55); background: rgba(255,255,255,.04);} .detailTitleInput[readonly]{opacity:.95;}

.miniToggle{display:flex; align-items:center; gap:8px; color:var(--muted); font-size:13px; user-select:none;} .miniToggle input{accent-color: var(--accent);}

.treeHeader{gap:10px;}

/* Default (non-hierarchy) details layout uses a flexible body so the description can grow.
   In hierarchy view we use a fixed grid layout and do NOT want these rules to override it. */
body:not([data-view="hierarchy"]) .detailPane{display:flex; flex-direction:column;}
body:not([data-view="hierarchy"]) .detailBody{flex:1; display:flex; flex-direction:column; gap:14px;}
body:not([data-view="hierarchy"]) .field textarea{width:100%;}
body:not([data-view="hierarchy"]) .field:first-child{flex:1; display:flex; flex-direction:column;}
body:not([data-view="hierarchy"]) .field:first-child textarea{flex:1; min-height:180px;}

/* Light blue focus/highlight for dropdowns */
select:focus{
  outline: none;
  border-color: rgba(90,168,255,.85);
  box-shadow: 0 0 0 3px rgba(90,168,255,.28);
}
select option:checked{
  background: rgba(90,168,255,.35);
}


/* Blue hover for dropdowns */
select:hover{
  border-color: rgba(90,168,255,.65);
}
select option:hover{
  background: rgba(90,168,255,.35);
}

/* Modal confirmation styling */
.confirmBox{padding:10px 2px}
.confirmTitle{font-size:16px; font-weight:700; margin-bottom:8px}
.confirmWarn{color:var(--muted); line-height:1.35}


/* Ensure Clear button shows active filter state (stronger + obvious) */
#btnClear.active{
  border-color: rgba(90,168,255,.9) !important;
  box-shadow: 0 0 0 2px rgba(90,168,255,.30) inset;
  background: rgba(90,168,255,.10);
}


/* Hierarchy view */
.tree.hierarchy{padding:18px 12px;}
.hnode{display:flex; flex-direction:column; align-items:center; position:relative;}
.hbox{
  min-width: 140px;
  padding:8px 12px;
  border-radius:14px;
  border:2px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  box-shadow: 0 10px 25px rgba(0,0,0,.18);
  cursor:pointer;
  display:flex;
  gap:8px;
  align-items:flex-start;
  justify-content:space-between;
}
.hbox:hover{
  /* Keep status borders visible; use a subtle ring instead of replacing border colour */
  box-shadow: 0 0 0 3px rgba(90,168,255,.18), 0 10px 25px rgba(0,0,0,.20);
}
.hname{font-weight:700; font-size:14px; line-height:1.2; word-break:break-word;}
.hexp{
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  border-radius:10px;
  width:26px; height:26px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  flex:0 0 auto;
}
.hexp:hover{border-color: rgba(90,168,255,.55);}
.hchildren{
  display:flex;
  gap:18px;
  margin-top:18px;
  padding-top:18px;
  position:relative;
  justify-content:center;
  flex-wrap:wrap;
}
.hchildren:before{
  content:"";
  position:absolute;
  top:0;
  left:10px;
  right:10px;
  height:1px;
  background: rgba(255,255,255,.12);
}
.hchildWrap{
  position:relative;
  padding-top:18px;
}
.hchildWrap:before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width:1px;
  height:18px;
  background: rgba(255,255,255,.12);
  transform:translateX(-0.5px);
}


/* --- Hierarchy view improvements (horizontal lanes + pan) --- */
.tree.hierarchy{
  overflow:auto;
  cursor: grab;
}
.tree.hierarchy:active{cursor: grabbing;}
.treeRoot.hroot{
  display:flex;
  gap:28px;
  align-items:flex-start;
  flex-wrap:nowrap;
  width:max-content;
  padding:18px 16px;
}
.hchildren{
  flex-wrap:nowrap !important;
  overflow: visible;
}
.hchildren{
  width:max-content;
  justify-content:flex-start !important;
}
.hchildren:before{
  left:0 !important;
  right:0 !important;
}
.hchildren:after{
  content:"";
  position:absolute;
  top:-18px;
  left:50%;
  width:1px;
  height:18px;
  background: rgba(255,255,255,.12);
  transform:translateX(-0.5px);
}
.hchildWrap{
  padding-top:18px;
}
/* ensure vertical connectors meet the horizontal line */
.hchildWrap:before{
  top:0 !important;
  height:18px !important;
}

/* --- Connector fixes (line spans only between children) --- */
.hchildren{
  padding-top: 0 !important;
  margin-top: 18px;
  padding-bottom: 0;
}
.hchildren:before{
  left: var(--line-left, 0px) !important;
  right: var(--line-right, 0px) !important;
}
.hchildWrap{
  padding-top: 18px;
}
.hchildWrap:before{
  top: 0 !important;
  height: 18px !important;
}

/* Status styling */
.hbox.inprogress{border-color: var(--status-inprogress) !important;}
.badge.inprogress{border-color: var(--status-inprogress) !important; color: rgba(255,200,120,1);}

.hbox.notstarted{border-color: var(--status-notstarted) !important;}
.badge.notstarted{border-color: var(--status-notstarted) !important; color: rgba(255,160,160,1);}

.hbox.agreed{border-color: var(--status-agreed) !important;}
.badge.agreed{border-color: var(--status-agreed) !important; color: rgba(180,255,220,1);}

/* Prevent wrapping titles; allow boxes to grow */
.hbox{width:max-content; min-width:unset !important;}
.hname{white-space:nowrap; text-align:center; width:100%;}
.nodeName{white-space:nowrap;}

/* Center content in hierarchy nodes */
.hbox{position:relative; justify-content:center; align-items:center;}
/* Move expand/collapse button to bottom center */
.hexp{
  position:absolute;
  left:50%;
  bottom:-13px;
  transform:translateX(-50%);
}

/* Expander styling (requested) */
.hexp{
  bottom:-11px !important;
  background: rgb(0 140 243 / 35%) !important;
  border-radius: 5px !important;
  width: 20px !important;
  height: 20px !important;
}
/* Selected hierarchy node background for clarity */
/* Canvas padding so root/selected can be centred */
.tree.hierarchy{padding: 0 !important;}

/* Selected hierarchy node background */
.hbox.selected{background: rgb(0 121 255 / 40%) !important;}

.detailHeader > div{width:100%;}

/* Local absolute children: keep parent row snug (children don't affect width) */
.hnode{position:relative;}
.hchildren.absLocal{
  position:absolute;
  left:50%;
  top: calc(100% + 26px);
  transform: translateX(-50%);
  margin:0 !important;
  padding-top:0 !important;
  z-index:2;
  width:max-content;
}

.treeRoot.hroot{flex-wrap:nowrap !important; width:max-content; position:relative;}

/* Canvas padding so left/right edges are reachable */


/* Canvas gutters so far-left/far-right content is reachable */
.tree.hierarchy{overflow:auto;}
.treeRoot.hroot{
  width: max-content;
  position: relative;
  margin-left: 50vw;
  margin-right: 50vw;
  padding-top: 40px;
  padding-bottom: 40px;
}

/* Gutters so far-left/far-right are always reachable in hierarchy view */
.tree.hierarchy .treeRoot.hroot{
  padding-left: 50vw !important;
  padding-right: 50vw !important;
  padding-top: 40px !important;
  padding-bottom: 40px !important;
  box-sizing: border-box;
}

/* Prevent the browser grabbing/dragging the whole hierarchy canvas */
.tree.hierarchy, .tree.hierarchy *,
.tree.flow, .tree.flow *{
  -webkit-user-select: none;
  user-select: none;
}

/* --- Flow view (left-to-right) --- */
.tree.flow{
  overflow:auto;
  cursor: grab;
  padding: 0 !important;
}
.tree.flow:active{cursor: grabbing;}

.tree.flow .treeRoot.hroot{
  display:flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  width: max-content;
  position: relative;
  box-sizing: border-box;
  margin: 0 !important;
  /* In flow view we want the first/root node to sit close to the LEFT edge */
  padding-left: 16px !important;
  padding-right: 50vw !important;
  padding-top: 50vh !important;
  padding-bottom: 50vh !important;
}

/* Fixed node width + wrapping for flow view */
.tree.flow .hnode{
  display: flex;
  flex-direction: row; /* important: allow vertical centring when node height grows to fit children */
  align-items: center;
  justify-content: flex-start;
}
.tree.flow .hbox{
  width: 180px !important;
  min-width: 180px !important;
}

/* Flow view: expander belongs on the RIGHT edge (direction of travel) */
.tree.flow .hexp{
  left: auto !important;
  bottom: auto !important;
  right: -11px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}
.tree.flow .hname{
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Children positioned to the right of the parent */
.tree.flow .hchildren.absLocal{
  position: absolute;
  left: calc(100% + 18px);
  top: 50%;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  padding-top: 0 !important;
  width: max-content;
}

.tree.flow .hchildren{
  display: flex;
  flex-direction: column;
  gap: 18px;
  justify-content: flex-start !important;
  align-items: flex-start;
  margin-top: 0 !important;
  padding-left: 0 !important;
}

/* Vertical spine between first/last child */
.tree.flow .hchildren:before{
  content: "";
  position: absolute;
  left: 0 !important;
  right: auto !important;
  top: var(--line-top, 0px) !important;
  bottom: var(--line-bottom, 0px) !important;
  width: 1px;
  height: auto !important;
  background: rgba(255,255,255,.12);
}

/* Link from parent to spine */
.tree.flow .hchildren:after{
  content: "";
  position: absolute;
  left: -18px;
  top: 50%;
  width: 18px;
  height: 1px;
  background: rgba(255,255,255,.12);
  transform: translateY(-0.5px);
}

/* Horizontal elbows to each child */
.tree.flow .hchildWrap{
  position: relative;
  padding-left: 18px;
  padding-top: 0 !important;
}
.tree.flow .hchildWrap:before{
  content: "";
  position: absolute;
  left: 0;
  top: 50% !important;
  width: 18px;
  height: 1px !important;
  background: rgba(255,255,255,.12);
  transform: translateY(-0.5px);
}

/* List view tree SVG overlay */
.listCanvas{ position: relative; }
.listCanvas svg.listLines{
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 0;
}

/* -----------------------------
   Light mode (layout + glass)
   ----------------------------- */
body.light-mode{
  /* Solid background in light mode (no gradient) */
  background: var(--bg);
}

body.light-mode .topbar{
  background: rgba(255,255,255,.72);
  border-bottom: 1px solid rgba(11,27,51,.08);
}

body.light-mode .treePane,
body.light-mode .detailPane{
  background: rgba(255,255,255,.78);
  border-color: rgba(11,27,51,.10);
}

body.light-mode .treeHeader,
body.light-mode .detailHeader{
  background: rgba(11,27,51,.03);
  border-bottom-color: rgba(11,27,51,.08);
}

body.light-mode .search{
  background: rgba(255,255,255,.92);
  border-color: rgba(11,27,51,.12);
}
body.light-mode .search::placeholder{color: rgba(11,27,51,.45)}

body.light-mode textarea,
body.light-mode input,
body.light-mode select{
  background: rgba(255,255,255,.92);
  border-color: rgba(11,27,51,.12);
  color: var(--text);
}

body.light-mode .btn{
  background: rgba(11,27,51,.04);
  border-color: rgba(11,27,51,.12);
  color: var(--text);
}
body.light-mode .btn:hover{background: rgba(11,27,51,.06)}

body.light-mode .btn.primary{
  border-color: rgba(37,99,235,.35);
  background: rgba(37,99,235,.10);
}
body.light-mode .btn.primary:hover{background: rgba(37,99,235,.14)}

body.light-mode .btn.danger{
  border-color: rgba(225,29,72,.35);
  background: rgba(225,29,72,.08);
}
body.light-mode .btn.danger:hover{background: rgba(225,29,72,.12)}

body.light-mode .btn.green{
  border-color: rgba(16,185,129,.35);
  background: rgba(16,185,129,.10);
}
body.light-mode .btn.green:hover{background: rgba(16,185,129,.14)}

body.light-mode .btn.orange{
  border-color: rgb(245 158 11 / 40%);
  background: rgb(245 158 11 / 22%);
}
body.light-mode .btn.orange:hover{background: rgb(245 158 11 / 28%)}

body.light-mode .btn.yellow{
  border-color: rgba(234,179,8,.42);
  background: rgba(234,179,8,.09);
}
body.light-mode .btn.yellow:hover{background: rgba(234,179,8,.13)}

body.light-mode .btn.purple{
  border-color: rgba(124,58,237,.30);
  background: rgba(124,58,237,.10);
}
body.light-mode .btn.purple:hover{background: rgba(124,58,237,.14)}

body.light-mode .nodeRow:hover{
  background: rgba(11,27,51,.03);
  border-color: rgba(11,27,51,.06);
}
body.light-mode .nodeRow.selected{
  background: rgba(37,99,235,.10);
  border-color: rgba(37,99,235,.24);
}

body.light-mode .badge{
  background: rgba(11,27,51,.03);
  border-color: rgba(11,27,51,.10);
}

/* In list view, light mode badges should be "border only" (no fill) */
body.light-mode[data-view="list"] .badge{
  background: transparent;
}

body.light-mode .expander{
  background: rgba(11,27,51,.03);
  border-color: rgba(11,27,51,.10);
}
body.light-mode .expander:hover{background: rgba(11,27,51,.05)}

body.light-mode .stewardEditor{
  background: rgba(255,255,255,.92);
  border-color: rgba(11,27,51,.12);
}
body.light-mode .stewardEditor .chip{
  background: rgba(11,27,51,.04);
  border-color: rgba(11,27,51,.10);
}
body.light-mode .stewardEditor .chipX{color: rgba(11,27,51,.55);}
body.light-mode .stewardEditor .chipX:hover{color: rgba(11,27,51,.85);}
body.light-mode .stewardEditor .chipAdd select,
body.light-mode .stewardEditor .chipAdd input{
  background: rgba(11,27,51,.03);
  border-color: rgba(11,27,51,.10);
}
body.light-mode .stewardEditor .chipConfirm{
  background: rgba(11,27,51,.05);
  border-color: rgba(11,27,51,.12);
}

body.light-mode .modal{
  background: rgba(255,255,255,.97);
  border-color: rgba(11,27,51,.12);
}

body.light-mode .toast{
  background: rgba(255,255,255,.92);
  border-color: rgba(11,27,51,.12);
  color: var(--text);
}

/* Make list dropdown options readable in light mode */
body.light-mode select option{background:#fff; color:#0b1b33;}

/* Hierarchy/flow view connector lines */
body.light-mode .hchildren:before,
body.light-mode .hchildren:after,
body.light-mode .hchildWrap:before,
body.light-mode .tree.flow .hchildren:before,
body.light-mode .tree.flow .hchildren:after,
body.light-mode .tree.flow .hchildWrap:before{
  background: rgba(11,27,51,.18) !important;
}

/* Hierarchy node boxes */
body.light-mode .hbox{
  /* Light mode nodes are "border-only" by default */
  background: transparent !important;
  border-color: rgba(11,27,51,.16);
  box-shadow: 0 10px 25px rgba(15,23,42,.10) !important;
}
body.light-mode .hbox:hover{
  box-shadow: 0 0 0 3px rgba(37,99,235,.16), 0 10px 25px rgba(15,23,42,.12) !important;
}
body.light-mode .hbox.selected{
  background: transparent !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.26), 0 10px 25px rgba(15,23,42,.12) !important;
}

/* Status badge text colours (more legible on light backgrounds) */
body.light-mode .badge.inprogress{color:#92400e;}
body.light-mode .badge.notstarted{color:#991b1b;}
body.light-mode .badge.agreed{color:#065f46;}
.listCanvas .treeRoot{ position: relative; z-index: 1; }

.listCanvas svg.listLines{ width: 100%; height: 100%; }

/* List view: keep expander above connector lines and opaque */
.listCanvas .expander{
  position: relative;
  z-index: 3;
  background: var(--panel2);
}

/* List view (light mode): expander must be fully opaque so connector lines don't show through */
body.light-mode[data-view="list"] .listCanvas .expander{
  background: var(--panel) !important;
  border-color: rgba(11,27,51,.14);
}
body.light-mode[data-view="list"] .listCanvas .expander:hover{
  background: #f7f9fd !important;
}


/* --- Status summary modal (hover on header title) --- */
#statusBackdrop{ z-index: 110; }

.statusModal{
  width: min(500px, calc(100vw - 24px));
}
.statusModalHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 10px;
}

#statusModalClose{ flex: 0 0 auto; }

.statusTabs{
  display:flex;
  align-items:center;
  gap:8px;
  flex: 1 1 auto;
  min-width: 0;
}
#statusModalBody{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.statusPopoverTop{
  display:flex;
  gap:8px;
  margin-bottom:12px;
}
.segBtn{
  flex: 1 1 0;
  padding: 8px 10px;
  text-align: center;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}
.segBtn:hover{ background: rgba(255,255,255,.08); }
.segBtn.active{
  border-color: rgba(90,168,255,.85);
  background: rgba(90,168,255,.16);
}

.statusPopoverMain{
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}

.donutWrap{
  width:160px;
  height:160px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.statusStats{
  min-width: 220px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.statRow{
  display:grid;
  grid-template-columns: 12px 1fr 64px 12px 64px;
  align-items:center;
  column-gap:10px;
  font-size: 16px;
}
.statRow .statLabel{ color: var(--muted); }
.statRow .statCount{
  text-align:center;
  font-weight: 900;
  color: var(--text);
  font-size: 18px;
}
.statRow .statSep{
  text-align:center;
  font-weight: 800;
  color: var(--muted);
  font-size: 16px;
}
.statRow .statPct{
  text-align:center;
  font-weight: 800;
  color: var(--muted);
  font-size: 16px;
}
.statRow.total{
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.10);
}

.swatch{
  width:12px;
  height:12px;
  border-radius:3px;
  display:inline-block;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25);
}
.swatch.notstarted{ background: var(--status-notstarted); }
.swatch.inprogress{ background: var(--status-inprogress); }
.swatch.agreed{ background: var(--status-agreed); }

.donutSvg .seg.notstarted{ stroke: var(--status-notstarted); }
.donutSvg .seg.inprogress{ stroke: var(--status-inprogress); }
.donutSvg .seg.agreed{ stroke: var(--status-agreed); }

.donutPct{
  fill: var(--text);
  font-size: 22px;
  font-weight: 900;
}
.donutLabel{
  fill: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
}