/* Token dari OpenBridge 6.1 (Figma): tema Day. Night = penyesuaian sendiri. */
:root{
  --container-global:#fcfcfc; --container-bg:#f7f7f7; --surface:#ffffff;
  --text:#1f1f1f; --text-neutral:#525252; --divider:#dddddd; --border:#bbbbbb;
  --amp-bg:#e6f0fd; --amp-border:#aecef8; --amp-text:#183a61; --amp-neutral:#285388;
  --shadow:0 1px 2px #0000003b; --radius:6px;
  --l0:#183a61; --l1:#2a6fc4; --l2:#2f9e8f; --l3:#c98a1b; --l4:#7a5bb5;
}
:root[data-theme=night]{
  --container-global:#1b2128; --container-bg:#14191f; --surface:#222a33;
  --text:#e6e9ec; --text-neutral:#9ba5b0; --divider:#333d48; --border:#47525e;
  --amp-bg:#1f3550; --amp-border:#3b6aa0; --amp-text:#cfe2fb; --amp-neutral:#8fb8ea;
  --shadow:0 1px 2px #0000009a;
  --l0:#5f9be0; --l1:#4f95e6; --l2:#47b8a6; --l3:#e0a636; --l4:#a58be0;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden}
body{font-family:"Noto Sans",system-ui,sans-serif;font-size:16px;line-height:24px;color:var(--text);background:var(--container-bg);display:grid;grid-template-rows:48px 1fr}
svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.grow{flex:1}
button{font-family:inherit;color:inherit}

/* Topbar */
.topbar{display:flex;align-items:center;gap:4px;padding:0 8px;background:var(--container-global);box-shadow:var(--shadow);z-index:30;color:var(--text-neutral)}
.ib{width:32px;height:32px;border:1px solid transparent;background:none;border-radius:var(--radius);cursor:pointer;display:grid;place-items:center;color:var(--text-neutral)}
.ib:hover{background:var(--amp-bg);border-color:var(--amp-border)}
.appicon{margin:0 6px 0 4px}
.crumbTop{color:var(--text-neutral)}.crumbTop b{color:var(--text);font-weight:700;margin-left:6px}
.clock{font-weight:600;color:var(--text);padding:4px 12px;font-variant-numeric:tabular-nums}

.combo{position:relative;margin-right:8px}
#comboBtn{display:flex;align-items:center;gap:8px;height:32px;padding:0 8px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;min-width:240px}
#comboBtn .lbl{font-size:11px;line-height:12px;color:var(--text-neutral);text-transform:uppercase;letter-spacing:.04em}
#comboBtn b{font-weight:600;flex:1;text-align:left;color:var(--text);font-size:14px}
#comboBtn svg{width:18px;height:18px}
.pop{position:absolute;right:0;top:38px;width:300px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 8px 24px #0003;padding:8px;z-index:50}
.pop input{width:100%;height:36px;border:1px solid var(--border);background:var(--container-bg);color:var(--text);border-radius:var(--radius);padding:0 10px;font:14px "Noto Sans";outline:0}
.pop input:focus{border-color:var(--amp-neutral)}
.pop ul{list-style:none;margin:6px 0 0;padding:0;max-height:min(60vh,420px);overflow:auto}
.pop li{padding:0 10px;height:36px;border-radius:var(--radius);font-size:14px;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.pop li:hover,.pop li.act{background:var(--amp-bg);color:var(--amp-text)}
.pop li small{color:var(--text-neutral);font-size:11px}

/* Layout fullscreen */
.shell{display:grid;grid-template-columns:auto minmax(0,1fr) 380px;min-height:0}
.nav{width:280px;background:var(--container-global);border-right:1px solid var(--divider);display:flex;flex-direction:column;padding:4px;transition:width .15s,padding .15s;overflow:hidden}
.shell.navoff .nav{width:0;padding:0;border:0}
.item{height:48px;display:flex;align-items:center;gap:12px;padding:0 12px;border-radius:var(--radius);color:var(--text);text-decoration:none;border:1px solid transparent;white-space:nowrap}
.item svg{color:var(--text-neutral)}
.item:hover{background:var(--container-bg)}
.item.on{background:var(--amp-bg);border-color:var(--amp-border);color:var(--amp-text);font-weight:700}.item.on svg{color:var(--amp-neutral)}
.navfoot{border-top:1px solid var(--divider);padding-top:8px;display:flex;flex-direction:column;gap:10px;white-space:normal}
.demo{background:var(--amp-bg);border:1px solid var(--amp-border);border-radius:var(--radius);padding:10px 12px;font-size:12px;line-height:18px;color:var(--amp-text)}
.demo small{display:block;font-size:11px;line-height:16px;margin-top:2px;opacity:.85}
.brand{display:flex;gap:10px;align-items:center;padding:4px 8px;font-size:12px;line-height:16px;color:var(--text-neutral)}.brand b{color:var(--text);font-size:14px}.mark{font-size:28px;color:var(--text)}

.main{display:flex;flex-direction:column;min-width:0;min-height:0}
.toolbar{height:48px;display:flex;align-items:center;gap:12px;padding:0 16px;background:var(--container-global);border-bottom:1px solid var(--divider);flex:none}
.crumb{font-size:14px;color:var(--text-neutral);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crumb span{cursor:pointer}.crumb span:hover{color:var(--amp-neutral);text-decoration:underline}.crumb span:last-child{color:var(--text);font-weight:700;cursor:default;text-decoration:none}
.legend{display:flex;gap:12px;font-size:12px;color:var(--text-neutral)}
.legend span{display:flex;align-items:center;gap:6px}.legend i{width:10px;height:10px;border-radius:2px}
.chart{flex:1;min-height:0;overflow:auto;padding:28px 24px 48px;background:
  radial-gradient(var(--divider) 1px,transparent 1px) 0 0/20px 20px,var(--container-bg)}
.empty{color:var(--text-neutral);padding:80px;text-align:center}

/* Org chart */
.tree{display:inline-block;min-width:100%;text-align:center}
.tree ul{display:flex;justify-content:center;gap:0;padding:22px 0 0;margin:0;list-style:none;position:relative}
.tree ul ul::before{content:"";position:absolute;top:0;left:50%;border-left:1px solid var(--border);height:22px}
.tree li{position:relative;padding:22px 6px 0;display:flex;flex-direction:column;align-items:center}
.tree li::before,.tree li::after{content:"";position:absolute;top:0;width:50%;height:22px;border-top:1px solid var(--border)}
.tree li::before{right:50%}.tree li::after{left:50%;border-left:1px solid var(--border)}
.tree li:only-child::before,.tree li:only-child::after{display:none}
.tree li:only-child{padding-top:22px}
.tree li:first-child::before,.tree li:last-child::after{border:0}
.tree li:last-child::before{border-right:1px solid var(--border);border-radius:0 8px 0 0}
.tree li:first-child::after{border-radius:8px 0 0 0}
.tree>ul{padding-top:0}.tree>ul>li{padding-top:0}.tree>ul>li::before,.tree>ul>li::after{display:none}
.node{width:168px;text-align:left;background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--acc);border-radius:var(--radius);padding:8px 10px;cursor:pointer;box-shadow:var(--shadow);transition:background .12s,border-color .12s}
.node:hover{background:var(--amp-bg);border-color:var(--amp-border);border-left-color:var(--acc)}
.node.sel{background:var(--amp-bg);border-color:var(--amp-neutral);border-left-color:var(--acc);box-shadow:0 0 0 2px var(--amp-border)}
.node b{display:block;font-size:13px;line-height:18px;font-weight:700;color:var(--text)}
.node small{display:block;font-size:12px;line-height:16px;color:var(--text-neutral);font-variant-numeric:tabular-nums}
.node em{display:inline-block;font-style:normal;font-size:11px;line-height:16px;margin-top:4px;color:var(--amp-neutral);font-weight:600}
.L0{--acc:var(--l0);width:220px}.L1{--acc:var(--l1)}.L2{--acc:var(--l2)}.L3{--acc:var(--l3)}.L4{--acc:var(--l4);width:110px}

/* Panel kanan */
.panel{border-left:1px solid var(--divider);background:var(--container-global);padding:20px;overflow:auto;display:flex;flex-direction:column;min-height:0}
.eyebrow{margin:0 0 12px;font-size:12px;line-height:16px;text-transform:uppercase;letter-spacing:.05em;color:var(--amp-neutral);font-weight:700}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px;box-shadow:var(--shadow)}
.card p{margin:0;font-size:12px;line-height:16px;color:var(--text-neutral)}
.card strong{display:block;margin-top:6px;font-size:24px;line-height:28px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.card small{font-size:12px;font-weight:500;color:var(--text-neutral);margin-left:4px}
.phead{display:flex;justify-content:space-between;align-items:center;margin:22px 0 10px;flex-wrap:wrap;gap:6px}
h2{margin:0;font-size:16px;font-weight:700}
.phead[hidden]{display:none}
.tabs{display:flex;gap:2px;background:var(--container-bg);border:1px solid var(--border);border-radius:var(--radius);padding:2px}
.tabs button{border:0;background:0;font-size:12px;line-height:16px;padding:4px 8px;border-radius:4px;cursor:pointer;color:var(--text-neutral)}
.tabs button.on{background:var(--amp-bg);color:var(--amp-text);font-weight:700;box-shadow:inset 0 0 0 1px var(--amp-border)}
.bars{flex:1;min-height:160px;display:flex;align-items:flex-end;gap:4px;border-bottom:1px solid var(--border);padding-top:24px}
.bar{flex:1;background:var(--amp-border);border-radius:3px 3px 0 0;position:relative;min-width:4px;cursor:default;opacity:.75}
.bar:hover,.bar.top{background:var(--amp-neutral);opacity:1}
.bar span{position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);font-size:11px;line-height:14px;white-space:nowrap;display:none;background:var(--text);color:var(--container-global);padding:3px 7px;border-radius:4px;z-index:5}
.bar:hover span{display:block}
.barnote{font-size:12px;line-height:16px;color:var(--text-neutral);margin:8px 0 0}

@media(max-width:1100px){.shell{grid-template-columns:auto minmax(0,1fr)}.panel{display:none}#comboBtn{min-width:160px}}
@media(max-width:700px){.nav{position:fixed;top:48px;bottom:0;left:0;z-index:25;box-shadow:0 0 30px #0004}.crumbTop b{display:none}}
:fullscreen body{background:var(--container-bg)}
.card.wide{grid-column:1/-1}.card .na{font-size:16px;line-height:24px;color:var(--text-neutral);font-weight:600}.card .src{margin-top:6px;font-size:11px;line-height:16px}
.L3{width:130px}.L3 small{font-size:11px}