/* css/pages/energy-tree.css — extracted from viz-energy-tree.html */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;overflow:hidden;}
body{font-family:Arial,Helvetica,sans-serif;background:var(--color-bg);color:var(--color-text);-webkit-font-smoothing:antialiased;}

/* ── Shell ─────────────────────────────────────── */
.shell{display:flex;height:calc(100vh - 60px);}

/* ── Filter sidebar ────────────────────────────── */
.filter-bar{
  width:210px;flex-shrink:0;background:var(--color-surface);
  border-right:1px solid var(--color-border);
  display:flex;flex-direction:column;overflow:hidden;
  transition:width .22s;z-index:100;
}
.filter-bar.collapsed{width:40px;}
.fb-head{
  padding:12px;display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--color-border);flex-shrink:0;
}
.fb-title{
  font-family:'Arial Black',Arial,sans-serif;font-weight:900;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-mid);
  white-space:nowrap;overflow:hidden;
}
.fb-toggle{
  width:24px;height:24px;background:transparent;border:1px solid var(--color-border);
  border-radius:5px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;color:var(--color-text-mid);font-size:12px;
}
.fb-toggle:hover{border-color:var(--color-accent-c);color:var(--color-accent-c);}
.fb-body{flex:1;overflow-y:auto;padding:8px 0;}
.fb-body::-webkit-scrollbar{width:3px;}
.fb-body::-webkit-scrollbar-thumb{background:rgba(0,170,255,.15);border-radius:99px;}

.fb-section{
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--color-text-dim);padding:12px 12px 6px;
}
.fb-item{
  display:flex;align-items:center;gap:8px;padding:7px 12px;cursor:pointer;
  transition:background .12s;user-select:none;
}
.fb-item:hover{background:rgba(0,170,255,.04);}
.fb-item.off .fb-dot{opacity:.2;}
.fb-item.off .fb-label{color:var(--color-text-dim);}
.fb-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.fb-label{font-size:12px;color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;}
.fb-count{font-size:12px;color:var(--color-text-dim);flex-shrink:0;}
.fb-sw{
  width:26px;height:14px;background:var(--color-border);border-radius:999px;
  position:relative;flex-shrink:0;transition:background .14s;
}
.fb-item:not(.off) .fb-sw{background:rgba(0,170,255,.35);}
.fb-sw::after{
  content:'';position:absolute;top:2px;left:2px;width:10px;height:10px;
  border-radius:50%;background:var(--color-accent-c);transition:transform .14s;
}
.fb-item.off .fb-sw::after{transform:none;background:var(--color-text-dim);}
.fb-item:not(.off) .fb-sw::after{transform:translateX(12px);}

.fb-btn{
  margin:4px 12px;padding:7px 0;text-align:center;font-size:12px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-mid);
  background:transparent;border:1px solid var(--color-border);border-radius:6px;
  cursor:pointer;transition:all .12s;
}
.fb-btn:hover{color:var(--color-accent-c);border-color:rgba(0,170,255,0.50);}
.fb-btn.active-reset{color:var(--color-accent-c);border-color:rgba(0,170,255,.4);}

.collapsed .fb-title,.collapsed .fb-body,.collapsed .fb-section,
.collapsed .fb-item,.collapsed .fb-btn{display:none;}
.collapsed .fb-head{justify-content:center;padding:12px 0 8px;}

/* ── Canvas ────────────────────────────────────── */
.tree-canvas{flex:1;position:relative;overflow:hidden;}
#tree-svg{width:100%;height:100%;cursor:grab;}
#tree-svg:active{cursor:grabbing;}

/* ── D3 tree styles ────────────────────────────── */
.ht-link{stroke:var(--color-accent-c);stroke-width:1.8;fill:none;opacity:.45;transition:opacity .2s;}
.ht-link.spouse-link{stroke:var(--color-accent-g);stroke-dasharray:4,3;opacity:.5;}
.ht-link.friend-link{stroke:var(--color-text-dim);stroke-dasharray:2,4;opacity:.25;}
.ht-link.dim{opacity:.04;}
.ht-link.highlight{opacity:1;stroke-width:2.5;}

.ht-node{cursor:pointer;transition:opacity .2s;}
.ht-node.dim{opacity:.06;}
.ht-node .node-circle{transition:all .15s;}
.ht-node:hover .node-circle{filter:brightness(1.3);}
.ht-node.isolated .node-circle{stroke-width:3px !important;}

.ht-name{
  font-family:Arial,Helvetica,sans-serif;font-size:12px;fill:var(--color-text);
  text-anchor:middle;pointer-events:none;
}
.ht-status{
  font-family:Arial,Helvetica,sans-serif;font-size:12px;fill:var(--color-text-dim);
  text-anchor:middle;pointer-events:none;
}

/* ── Gen band labels ───────────────────────────── */
.gen-label{
  font-family:'Arial Black',Arial,sans-serif;font-weight:900;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;fill:var(--color-text-dim);
  opacity:.35;
}

/* ── Zoom controls ─────────────────────────────── */
.zoom-ctrl{position:absolute;top:12px;right:12px;display:flex;flex-direction:column;gap:5px;z-index:50;}
.zc{
  width:30px;height:30px;background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:6px;cursor:pointer;color:var(--color-text-mid);font-size:14px;
  display:flex;align-items:center;justify-content:center;transition:all .12s;
}
.zc:hover{border-color:rgba(0,170,255,0.7);color:var(--color-accent-c);}

/* ── Loading ───────────────────────────────────── */
.loading{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:var(--color-bg);z-index:200;
}
.loading-text{color:var(--color-text-mid);font-size:14px;}

/* ── Tooltip ───────────────────────────────────── */
.tip{
  position:absolute;background:var(--color-tooltip-bg,#0D1820);border:1px solid var(--color-border-strong);
  border-radius:8px;padding:10px 13px;pointer-events:auto;opacity:0;
  transition:opacity .12s;z-index:100;min-width:150px;max-width:260px;
  box-shadow:0 4px 16px rgba(0,0,0,0.28);
}
.hh-tooltip--vis{opacity:1;}
.tip-name{font-family:'Arial Black',Arial,sans-serif;font-weight:900;font-size:14px;color:var(--color-text);margin-bottom:4px;}
.tip-detail{font-size:12px;color:var(--color-text-dim);line-height:1.5;}
.tip-reorder-btn{display:block;width:100%;margin-top:6px;padding:6px 8px;background:var(--color-surface2);border:1px solid var(--color-border-strong);border-radius:7px;font-size:12px;font-weight:600;color:var(--color-text);cursor:pointer;text-align:left;}
.tip-reorder-btn:hover{background:var(--color-accent-c-tint,rgba(0,170,255,0.12));}

/* ── Mobile ────────────────────────────────────── */
@media(max-width:640px){
  .filter-bar{position:absolute;left:0;top:0;bottom:0;z-index:200;width:200px;
    transform:translateX(-100%);transition:transform .22s;}
  .filter-bar.mobile-open{transform:translateX(0);}
  .filter-bar.collapsed{transform:translateX(-100%);}
  .mob-filter-btn{display:flex !important;}
}
.mob-filter-btn{
  display:none;position:absolute;top:12px;left:12px;z-index:50;
  width:30px;height:30px;background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:6px;cursor:pointer;color:var(--color-text-mid);font-size:14px;
  align-items:center;justify-content:center;
}
.mob-filter-btn:hover{color:var(--color-accent-c);border-color:rgba(0,170,255,0.60);}

/* ── Print toolbar ── */
.print-toolbar{position:absolute;bottom:16px;right:16px;z-index:100;display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end;}
.print-btn{background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;color:var(--color-text);padding:7px 12px;font-size:12px;font-weight:700;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:5px;white-space:nowrap;}
.print-btn:hover{border-color:var(--color-accent-b);color:var(--color-accent-b);}
.print-btn.primary{background:var(--color-accent-b);border-color:var(--color-accent-b);color:var(--color-bg);}
.print-btn.primary:hover{opacity:.85;}

/* ── Print mode ── */
@media print {
  body{background:#fff !important;}
  #eco-header,#eco-install-bar,.filter-bar,.mob-filter-btn,.print-toolbar,.tree-banner{display:none !important;}
  .shell{height:100vh;}
  .tree-canvas{width:100vw;height:100vh;}
  #tree-svg{width:100%;height:100%;}
  #print-title-overlay{display:block !important;}
}
#print-title-overlay{display:none;position:absolute;top:10px;left:50%;transform:translateX(-50%);font-family:'Arial Black',Arial;font-size:14px;color:var(--color-text-dim);text-align:center;z-index:50;}
.tree-banner{
  position:fixed; top:72px; left:50%; transform:translateX(-50%); z-index:100;
  background:rgba(0,170,255,0.92); border-radius:24px; padding:14px 32px;
  text-align:center; max-width:520px; width:90%;
  box-shadow:0 4px 20px rgba(0,0,0,0.3); cursor:pointer;
  transition:background 0.2s, transform 0.15s;
  text-decoration:none; display:block;
}
.tree-banner:hover{background:rgba(0,204,68,0.95); transform:translateX(-50%) scale(1.02);}
.tree-banner-line1{
  font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:15px;
  color:var(--color-text); line-height:1.3; margin-bottom:4px;
}
.tree-banner-line2{
  font-family:Arial,sans-serif; font-weight:400; font-size:13px;
  color:rgba(255,255,255,0.85); line-height:1.3;
}
/* S360: CSP burndown — gen filter dot classes */
.fb-dot        { --dna-dot-bg:#888; background:var(--dna-dot-bg); }
.dna-dot-0     { background:#FF8C42; }
.dna-dot-1     { background:var(--color-accent-c); }
.dna-dot-2     { background:var(--color-accent-g); }
.dna-dot-3     { background:#9B59B6; }
.dna-dot-4     { background:#E91E63; }
.dna-dot-5     { background:#1ABC9C; }
.dna-dot-6     { background:var(--color-accent-a); }