/* The dashboard is a separate network page. Do not inherit the packet
   panel's fixed-height, virtual-table scroll rules or upstream node widgets. */
.app-main:has(.mesh74-network-dashboard) { overflow-y:auto; min-height:0; }
.mesh74-network-dashboard { max-width:1600px; width:100%; margin:0 auto; padding:16px 0 28px; color:#e8e4dc; font-family:system-ui,-apple-system,'Segoe UI',sans-serif; }
.mesh74-network-dashboard *, .mesh74-network-dashboard *::before, .mesh74-network-dashboard *::after { box-sizing:border-box; }
.mesh74-network-dashboard h1 { font:650 28px/1.25 system-ui,-apple-system,'Segoe UI',sans-serif; letter-spacing:-.035em; margin:6px 0; }
.mesh74-network-dashboard h2 { font:650 15px/1.4 system-ui,-apple-system,'Segoe UI',sans-serif; margin:0; }
.mesh74-network-dashboard p { margin:6px 0 0; color:#b3aaa0; font-size:12px; line-height:1.55; }
.mesh74-network-dashboard button, .mesh74-network-dashboard a { font:inherit; }
.mesh74-network-dashboard button:focus-visible,.mesh74-network-dashboard a:focus-visible { outline:2px solid #c4a574; outline-offset:3px; }
.mesh74-network-dashboard a { color:#c4a574; text-decoration:none; }
.mesh74-network-dashboard a:hover { color:#e8e4dc; text-decoration:underline; }
.mesh74-nd-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:20px; }
.mesh74-nd-eyebrow { color:#c4a574; font-size:11px; font-weight:700; letter-spacing:.14em; }
.mesh74-nd-actions { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.mesh74-nd-actions>a { padding:10px 14px; border:1px solid #3a342c; border-radius:5px; font-size:12px; white-space:nowrap; }
.mesh74-nd-periods { display:flex; gap:4px; padding:4px; border:1px solid #3a342c; border-radius:6px; background:#1c1916; }
.mesh74-nd-periods button { padding:8px 13px; border:0; border-radius:4px; background:transparent; color:#b3aaa0; font-size:12px; cursor:pointer; white-space:nowrap; }
.mesh74-nd-periods button[aria-pressed=true] { background:#c4a574; color:#141210; font-weight:700; }
.mesh74-nd-metrics { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); border:1px solid #3a342c; border-radius:6px; background:#1c1916; overflow:hidden; margin-bottom:12px; }
.mesh74-nd-metric { padding:16px 18px; border-right:1px solid #3a342c; min-width:0; }
.mesh74-nd-metric:last-child { border-right:0; }
.mesh74-nd-metric>span { color:#b3aaa0; font-size:11px; }
.mesh74-nd-metric>strong { display:block; font:600 27px/1.25 ui-monospace,Consolas,monospace; letter-spacing:-.055em; font-variant-numeric:tabular-nums; margin:8px 0; white-space:nowrap; }
.mesh74-nd-metric>small { color:#b3aaa0; font-size:10px; line-height:1.5; display:block; }
.mesh74-nd-metric.is-critical { background:#de173e16; }
.mesh74-nd-metric.is-critical>strong,.mesh74-nd-load-heading>.is-critical { color:#ff839d; }
.mesh74-nd-freshness { display:flex; justify-content:space-between; gap:12px; color:#b3aaa0; font-size:11px; margin-bottom:24px; line-height:1.6; }
.mesh74-nd-freshness>.is-stale { color:#c4a574; }
.mesh74-nd-main { display:grid; grid-template-columns:minmax(0,2.2fr) minmax(280px,1fr); gap:16px; margin-bottom:16px; align-items:start; }
.mesh74-nd-panel { background:#1c1916; border:1px solid #3a342c; border-radius:6px; padding:20px; min-width:0; }
.mesh74-nd-chart { display:grid; grid-template-columns:30px minmax(0,1fr); gap:8px; margin-top:20px; }
.mesh74-nd-scale { display:flex; flex-direction:column; justify-content:space-between; height:108px; color:#b3aaa0; font:10px ui-monospace,Consolas,monospace; }
.mesh74-nd-bars { display:flex; align-items:end; gap:8px; height:108px; border-bottom:1px solid #3a342c; background:repeating-linear-gradient(to top,transparent 0,transparent 35px,#3a342c66 35px,#3a342c66 36px); }
.mesh74-nd-bars>div { flex:1; min-width:0; background:#c4a574; border-radius:3px 3px 0 0; }
.mesh74-nd-axis { display:flex; justify-content:space-between; color:#b3aaa0; margin-top:7px; font:10px ui-monospace,Consolas,monospace; }
.mesh74-nd-load-heading { display:flex; justify-content:space-between; gap:12px; margin-top:20px; padding-top:16px; border-top:1px solid #3a342c; font-size:12px; }
.mesh74-nd-load-heading strong { font:12px ui-monospace,Consolas,monospace; }
.mesh74-nd-load-chart { width:100%; height:85px; display:block; margin-top:8px; overflow:visible; }
.mesh74-nd-load-chart text { font:9px ui-monospace,Consolas,monospace; fill:#b3aaa0; }
.mesh74-nd-baseline { stroke:#3a342c; }
.mesh74-nd-threshold { stroke:#de173e; stroke-dasharray:4 4; }
.mesh74-nd-load-chart .mesh74-nd-threshold-label { fill:#ff839d; }
.mesh74-nd-load-line { stroke:#c4a574; stroke-width:2; fill:none; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.mesh74-nd-load-point { fill:#c4a574; }
.mesh74-nd-incident { border-top:1px solid #3a342c; padding:15px 0; margin-top:12px; }
.mesh74-nd-incident-title { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:13px; }
.mesh74-nd-incident-title strong { font:600 13px ui-monospace,Consolas,monospace; }
.mesh74-nd-tag { display:inline-block; padding:3px 6px; border:1px solid #de173e66; border-radius:4px; background:#de173e20; color:#ff839d; font-size:10px; font-weight:700; letter-spacing:.05em; white-space:nowrap; margin-left:6px; }
.mesh74-nd-incident-value { display:block; font:600 22px/1.2 ui-monospace,Consolas,monospace; color:#ff839d; margin-top:10px; }
.mesh74-nd-incident a { display:inline-block; margin-top:10px; font-size:11px; }
.mesh74-nd-control-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.mesh74-nd-control-state { font-size:10px; padding:4px 8px; border-radius:4px; background:#242019; color:#b3aaa0; }
.mesh74-nd-control-state.is-clear { background:#8ac69b14; color:#a4c9ab; }
.mesh74-nd-control-state.is-alert { background:#de173e20; }
.mesh74-nd-control .is-alert { color:#ff839d; }
.mesh74-nd-control-checks { margin-top:14px; }
.mesh74-nd-control-checks>div { display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid #3a342c; font-size:12px; }
.mesh74-nd-control-checks span { color:#b3aaa0; }
.mesh74-nd-control-checks strong { font-weight:550; text-align:right; }
.mesh74-nd-control-help { margin-top:14px; color:#b3aaa0; font-size:11px; }
.mesh74-nd-control-help summary { cursor:pointer; width:fit-content; }
.mesh74-nd-control-help summary:focus-visible { outline:2px solid #c4a574; outline-offset:3px; }
.mesh74-nd-secondary { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:16px; margin-bottom:20px; }
.mesh74-nd-row { margin-top:13px; }
.mesh74-nd-row-label { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:11px; line-height:1.4; }
.mesh74-nd-row-label a,.mesh74-nd-row-label>span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mesh74-nd-row-label strong { font:500 11px ui-monospace,Consolas,monospace; font-variant-numeric:tabular-nums; white-space:nowrap; }
.mesh74-nd-track { height:4px; background:#242019; border-radius:3px; margin-top:6px; }
.mesh74-nd-track>div { height:100%; background:#c4a574; border-radius:3px; }
.mesh74-nd-row.is-flood a { color:#ff839d; }
.mesh74-nd-row.is-flood .mesh74-nd-track>div { background:#de173e; }
.mesh74-nd-hops { display:flex; align-items:end; gap:10px; height:119px; margin:36px 0 24px; }
.mesh74-nd-hops>div { flex:1; min-width:0; position:relative; background:#c4a574; border-radius:3px 3px 0 0; }
.mesh74-nd-hops>.is-unknown { background:#242019; outline:1px solid #3a342c; }
.mesh74-nd-hop-value { position:absolute; top:-18px; left:0; right:0; text-align:center; font:10px ui-monospace,Consolas,monospace; color:#b3aaa0; }
.mesh74-nd-hop-name { position:absolute; bottom:-20px; left:0; right:0; text-align:center; font-size:10px; white-space:nowrap; }
.mesh74-network-dashboard .mesh74-nd-note { color:#b3aaa0; font-size:10px; line-height:1.55; margin-top:12px; }
.mesh74-nd-footer { display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:24px; border-top:1px solid #3a342c; padding-top:18px; }
.mesh74-nd-footer h3 { margin:0 0 6px; font-size:11px; font-weight:650; }
.mesh74-nd-footer p { font-size:10px; }
.mesh74-nd-empty,.mesh74-nd-error { color:#b3aaa0; font-size:12px; padding:16px 0; line-height:1.6; }
.mesh74-nd-error { border:1px solid #c4a574; border-radius:6px; padding:16px; }
.mesh74-nd-error button { color:#c4a574; border:1px solid #3a342c; background:#242019; border-radius:4px; padding:6px 10px; cursor:pointer; }
@media(max-width:1200px) {
  .mesh74-nd-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .mesh74-nd-metric:nth-child(3) { border-right:0; }
  .mesh74-nd-metric:nth-child(-n+3) { border-bottom:1px solid #3a342c; }
  .mesh74-nd-heading { align-items:start; }
  .mesh74-nd-main { grid-template-columns:minmax(0,1.6fr) minmax(270px,1fr); }
}
@media(max-width:850px) { .mesh74-nd-secondary { grid-template-columns:1fr; } }
@media(max-width:700px) {
  .mesh74-network-dashboard { padding:8px 0 24px; }
  .mesh74-nd-heading { display:block; }
  .mesh74-network-dashboard h1 { font-size:24px; }
  .mesh74-nd-actions { margin-top:14px; justify-content:space-between; gap:8px; }
  .mesh74-nd-periods button { padding:7px 10px; }
  .mesh74-nd-actions>a { padding:10px; font-size:11px; }
  .mesh74-nd-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mesh74-nd-metric { padding:14px; }
  .mesh74-nd-metric:nth-child(3) { border-right:1px solid #3a342c; }
  .mesh74-nd-metric:nth-child(2n) { border-right:0; }
  .mesh74-nd-metric:nth-child(-n+4) { border-bottom:1px solid #3a342c; }
  .mesh74-nd-metric>strong { font-size:25px; }
  .mesh74-nd-freshness { display:block; font-size:10px; }
  .mesh74-nd-freshness>span { display:block; }
  .mesh74-nd-main,.mesh74-nd-footer { grid-template-columns:1fr; gap:15px; }
  .mesh74-nd-panel { padding:16px; }
  .mesh74-nd-bars { gap:5px; }
}
