/* 画面の配色。ノード編集ツール（uiPocketLibrary の Dify ワークフロー画面）を参考にしたグレー基調。PowerPoint出力の配色は topology.js 側 */
:root{
 --gray-25:#fcfcfd;--gray-50:#f9fafb;--gray-100:#f2f4f7;--gray-150:#eceef2;--gray-200:#e4e7ec;--gray-300:#d0d5dd;--gray-400:#98a2b3;--gray-500:#667085;--gray-600:#475467;--gray-700:#344054;--gray-900:#101828;
 --blue:#155eef;--blue-500:#2970ff;--blue-50:#eff4ff;--blue-100:#d1e0ff;
 --canvas:#f2f4f7;--dot:#d5d9e0;
 --font:"Segoe UI","Yu Gothic UI","Meiryo",sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--canvas);color:var(--gray-900);font-family:var(--font);font-size:13px;line-height:1.5}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--blue-500);outline-offset:2px}
h1,h2,h3{margin:0}

/* 上部バー */
.appbar{height:52px;display:flex;align-items:center;gap:16px;padding:0 16px;background:#fff;border-bottom:1px solid var(--gray-200);position:relative;z-index:5}
.brand{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
.brand strong{font-size:14px;font-weight:600;white-space:nowrap}
.brand-mark{width:22px;height:22px;flex:none}
.brand-mark rect{fill:var(--gray-900)}
.brand-mark path{fill:none;stroke:#fff;stroke-width:1.4}
.brand-mark circle{fill:#fff}
.crumb{color:var(--gray-300)}
.brand h1{font-size:13px;font-weight:500;color:var(--gray-600);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.diagram-tabs{display:flex;gap:2px;padding:3px;background:var(--gray-100);border-radius:8px}
.diagram-tabs button{border:0;background:none;padding:5px 12px;border-radius:6px;color:var(--gray-600);font-weight:500;white-space:nowrap}
.diagram-tabs button:hover{color:var(--gray-900)}
.diagram-tabs button.active{background:#fff;color:var(--blue);box-shadow:0 1px 2px rgba(16,24,40,.08)}
.appbar-actions{display:flex;align-items:center;gap:12px;flex:1;justify-content:flex-end;min-width:0}
#status{margin:0;font-size:12px;color:var(--gray-500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#status.error{color:#d92d20}
.btn-primary{border:0;background:var(--blue);color:#fff;border-radius:8px;padding:7px 14px;font-weight:600;white-space:nowrap}
.btn-primary:hover{background:#004eeb}
.btn-primary:disabled{opacity:.5;cursor:wait}
.btn-ghost{border:0;background:none;color:var(--gray-600);padding:5px 8px;border-radius:6px;font-size:12px;white-space:nowrap}
.btn-ghost:hover{background:var(--gray-100);color:var(--gray-900)}
.btn-ghost:disabled{color:var(--gray-400);background:none;cursor:default}

/* 作業領域：キャンバス＋右パネル */
.workspace{display:flex;height:calc(100vh - 52px);min-height:560px}
.canvas{position:relative;flex:1;min-width:0;background-color:var(--canvas);background-image:radial-gradient(var(--dot) 1px,transparent 1.2px);background-size:16px 16px}
.diagram-scroll{position:absolute;inset:0;overflow:auto;display:flex;padding:64px 24px 60px}
#network{display:block;margin:auto;flex:none;height:auto;max-width:none}

.canvas-toolbar{position:absolute;z-index:2;top:12px;left:12px;right:12px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;pointer-events:none}
.canvas-toolbar>*{pointer-events:auto}
.segmented{display:flex;gap:2px;padding:3px;background:#fff;border:1px solid var(--gray-200);border-radius:8px;box-shadow:0 1px 2px rgba(16,24,40,.05)}
.segmented button{border:0;background:none;padding:4px 10px;border-radius:5px;color:var(--gray-600);font-size:12px;font-weight:500}
.segmented button:hover{color:var(--gray-900)}
.segmented button.active{background:var(--blue-50);color:var(--blue)}
.field,.check{display:flex;align-items:center;gap:6px;height:32px;padding:0 4px 0 10px;background:#fff;border:1px solid var(--gray-200);border-radius:8px;font-size:12px;color:var(--gray-500);box-shadow:0 1px 2px rgba(16,24,40,.05)}
.check{padding:0 10px;cursor:pointer;color:var(--gray-700)}
.check input{margin:0;accent-color:var(--blue)}
.field select{border:0;background:none;padding:4px;color:var(--gray-900);font-size:12px;cursor:pointer}
.canvas-meta{font-size:12px;color:var(--gray-600);padding:2px 8px;background:rgba(242,244,247,.85);border-radius:6px}

.canvas-footer{position:absolute;z-index:2;left:12px;right:12px;bottom:12px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;pointer-events:none}
.canvas-footer>*{pointer-events:auto}
.legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:7px 12px;background:#fff;border:1px solid var(--gray-200);border-radius:8px;font-size:11.5px;color:var(--gray-600);box-shadow:0 1px 2px rgba(16,24,40,.05)}
.legend-item{display:flex;align-items:center;gap:5px;white-space:nowrap}
.legend .type-icon{width:14px;height:14px}
.legend-heat{display:inline-block;width:72px;height:8px;border-radius:4px;background:linear-gradient(90deg,#fff3f3,#e60000);border:1px solid #fda29b}
.legend-flow{width:24px;height:8px}
.zoom{display:flex;align-items:center;background:#fff;border:1px solid var(--gray-200);border-radius:8px;box-shadow:0 1px 2px rgba(16,24,40,.05);flex:none}
.zoom button{border:0;background:none;height:32px;min-width:32px;padding:0 8px;color:var(--gray-600);font-size:13px}
.zoom button:hover{background:var(--gray-50);color:var(--gray-900)}
#zoom-level{min-width:56px;font-size:12px;border-left:1px solid var(--gray-150);border-right:1px solid var(--gray-150)}

.node-tip{position:fixed;z-index:20;max-width:260px;padding:7px 10px;background:var(--gray-900);color:#fff;border-radius:6px;font-size:12px;line-height:1.5;pointer-events:none}
.node-tip strong{display:block;font-weight:600}
.node-tip span{color:#d0d5dd}
.node-tip[hidden]{display:none}

/* SVG：ノードカード・接続線・区画 */
#network text{font-family:var(--font)}
.node{cursor:pointer;outline:none}
.card{fill:#fff;stroke:var(--gray-200);stroke-width:1;filter:drop-shadow(0 1px 1.5px rgba(16,24,40,.07))}
.node.unknown .card{fill:var(--gray-50);stroke:var(--gray-300);stroke-dasharray:4 3}
.node.internet .card{fill:#fff;stroke:var(--gray-300)}
.node:hover .card{stroke:var(--blue-100);stroke-width:1.5}
.node:focus-visible .card,.node.selected .card{stroke:var(--blue-500);stroke-width:2}
.node.dim{opacity:.45}
.node-name{font-size:13px;font-weight:600;fill:var(--gray-900)}
.chip{fill:var(--gray-100)}
.node-sub{font-size:11px;fill:var(--gray-600)}
.count text{font-size:11px;font-weight:700}
.edge{fill:none;stroke:#a7b0be;stroke-width:1.5}
.edge.logical{stroke-dasharray:5 4}
.edge.hot,.edge.active{stroke:var(--blue-500);stroke-width:2}
.zone-box{fill:rgba(255,255,255,.35);stroke:var(--gray-300);stroke-width:1}
.zone-box.dashed{stroke-dasharray:5 4}
.zone-tag{fill:#fff;stroke:var(--gray-200)}
.zone-label{font-size:12px;font-weight:600;fill:var(--gray-700)}
.zone-sub{font-size:11px;fill:var(--gray-500)}
.halo{paint-order:stroke;stroke:var(--canvas);stroke-width:4px;stroke-linejoin:round}
.link-label{fill:var(--gray-500)}
.flow-label{font-size:11px;fill:var(--gray-500)}
.service-count-note{font-size:12px;fill:var(--gray-600)}
.port{fill:#fff;stroke:var(--gray-300);stroke-width:1}
.port-text{fill:var(--gray-600)}
.group-line{stroke:var(--gray-500)}
rect.callout{fill:#fffaeb;stroke:#fec84b;stroke-width:1}
path.callout{stroke:#f79009;stroke-dasharray:3 3;stroke-width:1.2}
ellipse.callout{fill:#f79009}
text.callout{fill:#93370d}

/* 右パネル */
.inspector{width:400px;flex:none;display:flex;flex-direction:column;background:#fff;border-left:1px solid var(--gray-200);min-height:0}
.inspector-tabs{display:flex;gap:20px;padding:0 16px;border-bottom:1px solid var(--gray-200);flex:none}
.inspector-tabs button{border:0;background:none;padding:12px 0 10px;border-bottom:2px solid transparent;color:var(--gray-500);font-weight:600}
.inspector-tabs button:hover{color:var(--gray-900)}
.inspector-tabs button.active{color:var(--gray-900);border-bottom-color:var(--blue)}
.panel{flex:1;overflow:auto;min-height:0;overscroll-behavior:contain}
.panel[hidden]{display:none}
.selection{padding:14px 16px 0}
.sel-head{display:flex;align-items:flex-start;gap:10px}
.sel-head .type-icon{width:24px;height:24px;flex:none;margin-top:1px}
.sel-head strong{display:block;font-size:15px;font-weight:600;line-height:1.4}
.sel-head span{display:block;font-size:12px;color:var(--gray-500);margin-top:2px}
.sel-empty{margin:0;padding:10px 12px;background:var(--gray-50);border:1px dashed var(--gray-300);border-radius:8px;font-size:12px;color:var(--gray-600)}
.list-tools{display:flex;align-items:center;gap:6px;padding:12px 16px 0}
.search{flex:1;display:flex;align-items:center;gap:6px;height:32px;padding:0 10px;background:var(--gray-100);border:1px solid transparent;border-radius:8px}
.search:focus-within{background:#fff;border-color:var(--blue-500)}
.search svg{width:14px;height:14px;flex:none;fill:none;stroke:var(--gray-400);stroke-width:1.5;stroke-linecap:round}
.search input{flex:1;min-width:0;border:0;background:none;outline:none;font-size:12px}
.list-scope{margin:8px 16px 6px;font-size:11.5px;color:var(--gray-500)}
.case-list{padding:0 8px 16px}
.case{border-radius:8px}
.case+.case{border-top:1px solid var(--gray-150)}
.case[open]{background:var(--gray-25);box-shadow:inset 0 0 0 1px var(--gray-200);border-top-color:transparent}
.case[open]+.case{border-top-color:transparent}
.case summary{display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:10px 8px;cursor:pointer;list-style:none;border-radius:8px}
.case summary::-webkit-details-marker{display:none}
.case summary:hover{background:var(--gray-50)}
.case-identity{min-width:0}
.case-identity strong{display:block;font-size:13px;font-weight:600;line-height:1.45}
.case-meta{display:block;font-size:11px;color:var(--gray-500);margin-top:2px}
.case-node{grid-column:1;font-size:11.5px;color:var(--gray-600)}
.case-badge{grid-column:2;grid-row:1;align-self:start;font-size:11px;font-weight:600;padding:1px 7px;border-radius:999px;white-space:nowrap;background:var(--gray-100);color:var(--gray-600)}
.case-badge.confirmed{background:#ecfdf3;color:#067647}
.case-badge.pending{background:#fffaeb;color:#b54708}
.case-body{padding:0 10px 12px;font-size:12px;line-height:1.75;color:var(--gray-700)}
.case-body dl{margin:0}
.case-body dt{font-size:11px;font-weight:600;color:var(--gray-500);margin-top:9px}
.case-body dd{margin:2px 0 0}
.case-body a{color:var(--blue);overflow-wrap:anywhere}
.case-source{margin-top:12px;padding:8px 10px;background:#fff;border:1px solid var(--gray-200);border-radius:6px}
.case-source>strong{font-size:12px}
.empty{padding:20px 8px;color:var(--gray-500)}

.summary-block{padding:16px;border-bottom:1px solid var(--gray-150)}
.summary-block h2{font-size:15px;font-weight:600;line-height:1.5}
.summary-block h3{font-size:12px;font-weight:600;color:var(--gray-500);margin-bottom:8px}
.muted{font-size:12px;color:var(--gray-600);margin:6px 0 0;line-height:1.7}
.method p{font-size:12px;color:var(--gray-600);line-height:1.75;margin:0 0 8px}
.metrics{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--gray-150);border-bottom:1px solid var(--gray-150)}
.metric{background:#fff;padding:12px 16px}
.metric-label{display:block;font-size:11.5px;color:var(--gray-500)}
.metric-value{display:block;font-size:22px;font-weight:600;margin:2px 0;font-variant-numeric:tabular-nums}
.metric-value small{font-size:12px;font-weight:500;margin-left:3px;color:var(--gray-500)}
.metric-desc{display:block;font-size:11px;color:var(--gray-400)}
.rank-row{display:block;width:100%;border:0;background:none;padding:6px 6px;margin:0 -6px;width:calc(100% + 12px);text-align:left;border-radius:6px}
.rank-row:hover{background:var(--gray-50)}
.rank-row.active{background:var(--blue-50)}
.rank-label{display:flex;justify-content:space-between;font-size:12px}
.rank-label strong{font-variant-numeric:tabular-nums}
.rank-label em{font-style:normal;font-weight:400;color:var(--gray-500)}
.rank-track{display:block;background:var(--gray-100);height:6px;border-radius:3px;margin-top:5px;overflow:hidden}
.rank-fill{display:block;height:6px;border-radius:3px}

@media(max-width:900px){
 .appbar{height:auto;flex-wrap:wrap;padding:8px 12px;gap:8px}
 .brand{flex-basis:100%}
 .appbar-actions{flex:1}
 .workspace{display:block;height:auto}
 .canvas{height:60vh;min-height:420px}
 .inspector{width:auto;border-left:0;border-top:1px solid var(--gray-200)}
 .panel{overflow:visible}
 .canvas-meta{display:none}
 .diagram-scroll{padding:104px 12px 60px}
 .legend{display:none}
}