:root{
  --top-h: 3rem;
  --left-w: 5rem;
  --right-w: 20vw;
  --bottom-h: 3rem;
  --gap: .5rem;
  --radius: .75rem;
  --panel: #0f1520;
  --panel2:#121a28;
  --ink: #e6edf3;
  --muted:#9fb0c3;
}

* { box-sizing: border-box; }

html, body, .app { height: 100%; }
body { margin: 0; background: #0a0e14; color: var(--ink); font-family: system-ui, sans-serif; overflow: hidden; }

.app{
  display: grid;
  grid-template-columns: var(--left-w) 1fr var(--right-w);
  grid-template-rows: var(--top-h) 1fr var(--bottom-h);
  grid-template-areas:
    "top top right"
    "left main right"
    "bottom bottom right";
  gap: var(--gap);
  padding: var(--gap);
}

.menu{
  position: fixed;
  z-index: 40;
  top: calc(var(--gap) + 0.5rem);
  left: calc(var(--gap) + 0.5rem);
  display: flex;
  align-items: flex-start;
  gap: .5rem;
}
#menuBtn{
  width: 2.4rem;
  height: 2.4rem;
  border-radius: .75rem;
  background: linear-gradient(135deg, #1f2a44 0%, #334866 100%);
  color: #f8fafc;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.45);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#menuBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.5);
}
#menuBtn:focus-visible {
  outline: 3px solid rgba(59, 130, 246, 0.6);
  outline-offset: 2px;
}
.dropdown{
  position: absolute;
  top: 100%;
  left: 0;
  list-style: none;
  padding: .75rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  min-width: 14rem;
  border-radius: 1rem;
  background: rgba(17, 24, 39, 0.92);
  border: 1px solid rgba(59, 130, 246, 0.22);
  box-shadow: 0 25px 45px rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(16px);
}

.dropdown[hidden] {
  display: none !important;
}
.dropdown li{
  list-style: none;
}
.dropdown li a,
.dropdown li button{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .6rem .8rem;
  border-radius: .65rem;
  font-size: .95rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.dropdown li a{
  color: #e2e8f0;
  background: transparent;
}
.dropdown li a:hover{
  background: rgba(59, 130, 246, 0.18);
  color: #f8fafc;
}
.dropdown li button{
  width: 100%;
  border: none;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
  box-shadow: 0 15px 32px rgba(248, 113, 113, 0.35);
}
.dropdown li button:hover{
  background: linear-gradient(135deg, #dc2626 0%, #f87171 100%);
  transform: translateY(-1px);
}

.tools-top{
  grid-area: top;
  display: flex; align-items: center; gap: .75rem;
  background: var(--panel); border-radius: var(--radius);
  padding: .4rem .6rem .4rem 3rem;
}
.tools-top label, .tools-top select, .tools-top input, .tools-top button{ font-size: .9rem; }
.selected-node{ display:flex; align-items:center; gap:.5rem; justify-content:flex-start; overflow:hidden; }
.tool-icon.active{ outline:2px solid #3a79ff55; background:#3a79ff33; }

@keyframes node-pulse {
  0% {
    transform: scale(2);
    text-shadow: 0 0 8px #fff;
  }
  100% {
    transform: scale(1);
    text-shadow: none;
  }
}

#selectedNodeName.pulse {
  display:inline-block;
  animation: node-pulse 0.6s ease-out;
}

#metricBanner{
  flex:1;
  overflow:hidden;
  background:var(--panel);
  height:2rem;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  border:1px solid #243047;
  border-radius:var(--radius);
  box-shadow:none;
}
#metricBanner .banner-content{
  display:flex;
  align-items:center;
  white-space:nowrap;
  color:var(--ink);
  font-family:system-ui, sans-serif;
  text-shadow:none;
}
#metricBanner .banner-content .metric-row{
  display:flex;
}
#metricBanner .banner-content .metric{
  padding-right:2rem;
  color:#00ff99;
}

.filters-section{
  margin-left:auto; display:flex; align-items:center; gap:.4rem;
  border-left:1px solid #243047; padding-left:.75rem;
}
#filterContainer{ display:flex; gap:.4rem; }
.filter-select{
  border:1px solid #243047; background:var(--panel2); color:var(--ink);
  border-radius:.5rem; padding:.25rem;
  width:8rem;
  flex:0 0 auto;
}
.filter-container{
  position: relative;
}
.filter-container--locked{
  cursor: pointer;
  border-color: rgba(255, 105, 135, 0.45);
}
.filter-container--locked::before{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(15, 23, 42, 0.55);
  pointer-events: none;
}
.filter-container--locked > *{
  position: relative;
}
.filter-container--locked .filter-select,
.filter-container--locked input,
.filter-container--locked .value-toggle{
  opacity: 0.65;
  color: #c8d2e6;
}
.filter-container--locked .filter-locked-warning{
  opacity: 1;
  background: rgba(255, 105, 135, 0.22);
  border-color: rgba(255, 105, 135, 0.45);
  color: #ffd6db;
}
#sizeMetric,
#opacityMetric,
.filter-container .filter-select{
  width:86%;
}
#addFilter{
  border:1px solid #243047; background:var(--panel2); color:var(--ink);
  border-radius:.5rem; cursor:pointer; width:2rem; height:2rem; font-size:1rem;
}

.filter-select option.dropdown-title{
  font-weight:bold;
  color:grey;
}

.filter-select option.dropdown-subtitle{
  font-weight:bold;
  color:grey;
}

.popup-table .category-row th{
  text-align:left;
  padding-top:.5rem;
}

.popup-table .subcategory-row th{
  text-align:left;
  padding-left:1rem;
}

.metric-category{ margin-top:1rem; }
.metric-category .category-header{ font-weight:bold; cursor:pointer; }
.metric-category .category-body{ display:none; }
.metric-category.open .category-body{ display:block; }

#financialChart{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.metric-chart{ height:40vh; }
.metric-chart svg{ width:100%; height:100%; }

.tools-left{
  grid-area: left;
  background: var(--panel); border-radius: var(--radius);
  padding: .4rem; overflow: visible;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
}
.tool-icon{
  width:2.5rem; height:2.5rem; font-size:1.2rem;
  border:1px solid #243047; background:var(--panel2); color:var(--ink);
  border-radius:.5rem; cursor:pointer;
}
.popup{
  position:absolute; background:var(--panel2); color:var(--ink);
  border:1px solid #243047; border-radius:.5rem; padding:.4rem .6rem;
  font-size:.8rem; z-index:20; max-width:12rem;
}
.popup label{ display:block; margin:.25rem 0; }
.slider-value{ margin-left:.25rem; }
.lasso .selection{
  /* Brighter, more opaque highlight for clearer selection */
  fill: rgba(255, 255, 0, 0.25); /* bright yellow with higher alpha */
  stroke: #ffff33;               /* neon yellow */
  stroke-width: 4px;             /* thicker outline */
  stroke-dasharray: 6 4;         /* slightly tighter dash pattern */
  filter: drop-shadow(0 0 6px rgba(255,255,0,0.9)) drop-shadow(0 0 12px rgba(255,255,0,0.6));
}
/* free-form lasso path */
.lasso-path{
  fill: rgba(255, 255, 0, 0.25);
  stroke: #ffff33;
  stroke-width: 4px;
  stroke-dasharray: 6 4;
  filter: drop-shadow(0 0 6px rgba(255,255,0,0.9)) drop-shadow(0 0 12px rgba(255,255,0,0.6));
}

.chart-modal-overlay{
  position:fixed;
  top:0; left:0;
  width:100vw; height:100vh;
  background:rgba(0,0,0,0.7);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1000;
}
.chart-modal-content{
  position:relative;
  width:90vw; height:90vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
#tradingview-chart{
  width:100%;
  height:100%;
  flex:1;
}
/* Close modal button */
.chart-modal-close{
  position:absolute;
  top:10px;
  right:40px; /* avoid overlaying TradingView camera icon */
  background:transparent;
  border:none;
  color:#fff;
  font-size:24px;
  cursor:pointer;
  z-index:1001;
}
.selected{
  stroke:#ff8c00;
  stroke-width:6px;
  filter:drop-shadow(0 0 12px rgba(255,140,0,0.9)) drop-shadow(0 0 24px rgba(255,140,0,0.6));
}

.main{ grid-area: main; min-width:0; min-height:0; }
#canvas{
  position: relative; width: 100%; height: 100%;
  background: #0b1019; border-radius: var(--radius);
  box-shadow: 0 0 0 1px #1a2233 inset;
  overflow: hidden;
}
#network{ width:100%; height:100%; display:block; }

svg .outlier-node{
  stroke:none;
  stroke-width:0;
  filter:none;
}
svg.show-outliers .outlier-node{
  stroke:#ffd700;
  stroke-width:5px;
  filter:drop-shadow(0 0 10px #ffd700);
}

svg .outlier-node.selected{
  stroke:#ff8c00;
  stroke-width:6px;
  filter:drop-shadow(0 0 12px rgba(255,140,0,0.9)) drop-shadow(0 0 24px rgba(255,140,0,0.6));
}

.right{
  grid-area: right;
  background: var(--panel);
  border-radius: var(--radius);
  padding:.6rem;
  display:flex;
  flex-direction:column;
  gap:.6rem;
  overflow:hidden;
}
.right-top,
.right-bottom{
  flex:1;
  overflow:auto;
  border:1px solid #243047;
  padding:.5rem;
  box-sizing:border-box;
}
.right h3{ margin:.4rem 0 .3rem; font-size: 1.15rem; }
.legend-section h4{ margin:.3rem 0 .2rem; font-size: 1rem; }
#legend{ font-size:1rem; }
#legend .legend-item{
  display:flex; align-items:center; margin-bottom:.4rem;
}
#legend .legend-color{
  width:12px; height:12px; border-radius:50%; margin-right:6px;
}
#legend .legend-icon{
  width:10px; height:10px; margin-right:6px;
}
.legend-note{
  font-size:0.85rem;
  margin-top:4px;
}
.collapse-triangle{
  display:inline-block;
  margin-right:4px;
}
.list{ list-style:none; padding:0; margin:.25rem 0 .75rem; font-size:1rem; }
.list li{ padding:.25rem .35rem; border-radius:.35rem; }
.list li:hover{ background:#162137; }

#tablesView{
  width:100%;
  height:100%;
  overflow:auto;
  background:var(--panel);
  color:var(--ink);
  border:1px solid #243047;
  box-shadow:0 0 5px #243047;
  font-family:system-ui, sans-serif;
  position:relative; /* enables sticky header/column */
}
.tab-view{
  width:100%;
  height:100%;
}
#tablesView .data-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:1rem;
  table-layout:fixed;
}
#tablesView .data-table th,
#tablesView .data-table td{
  border:1px solid #243047;
  padding:.25rem .5rem;
  text-align:left;
}
#tablesView .data-table th{
  background:var(--panel2);
  position:sticky;
  top:0;
  z-index:2;
}
#tablesView .data-table th:first-child{
  position:sticky;
  left:0;
  top:0;
  z-index:4;
}
#tablesView .data-table th:nth-child(2){
  position:sticky;
  left:150px;
  top:0;
  z-index:3;
}
#tablesView .data-table td:first-child{
  position:sticky;
  left:0;
  background:var(--panel2);
  z-index:3;
}
#tablesView .data-table td:nth-child(2){
  position:sticky;
  left:150px;
  background:var(--panel2);
  z-index:2;
}
#tablesView .data-table td:not(:first-child):not(:nth-child(2)){
  position:relative;
  z-index:1;
}
#tablesView .data-table th.text-col,
#tablesView .data-table td.text-col{
  width:150px;
}
#tablesView .data-table th.num-col,
#tablesView .data-table td.num-col{
  width:100px;
  text-align:right;
}
#tablesView .data-table tr:nth-child(even){ background:var(--panel2); }

/* Ensure watchlist table headers stay visible while scrolling */
#companyTable{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}
/* keep headers visible above scrolling rows */
#companyTable thead th{
  position:sticky;
  top:0;
  background:var(--panel2);
  z-index:3;
}
#companyTable th,
#companyTable td{
  border:1px solid #243047;
  padding:.25rem .5rem;
}
#companyTable th:first-child,
#companyTable td:first-child{
  width:60px;
  position:sticky;
  left:0;
  background:var(--panel2);
}
#companyTable th:first-child{ z-index:4; }
#companyTable td:first-child{ z-index:2; }
#companyTable th:not(:first-child),
#companyTable td:not(:first-child){
  width:40px;
  text-align:right;
}
#companyTable td:nth-child(3),
#companyTable th:nth-child(3),
#companyTable td:nth-child(4),
#companyTable th:nth-child(4),
#companyTable td:nth-child(5),
#companyTable th:nth-child(5){
  text-align:center;
  width:30px;
}

#statsView{
  background: var(--panel);
  color: var(--ink);
  padding:1rem;
  overflow-y:auto;
}
#statsView svg text{
  fill: var(--ink);
}
#statsView .stats-disclaimer{
  font-size:0.9rem;
  font-style:italic;
  margin-bottom:1rem;
  text-align:center;
}
#statsView .stats-control{
  text-align:center;
  margin-bottom:1rem;
}
#statsView .stats-section{
  margin-bottom:1.5rem;
  text-align:center;
}
#statsView .stats-section ul{
  list-style:none;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1rem;
}
#statsView .stats-helper{
  max-height:300px;
  overflow-y:auto;
  margin-top:1rem;
}
#statsView .stats-charts{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1rem;
}
#statsView .stat-chart{
  flex:1 1 40%;
  max-width:40%;
}
#statsView .stat-chart svg{
  width:100%;
  height:auto;
}

#logsView{
  overflow:auto;
  background:var(--panel);
  color:var(--ink);
  border:1px solid #243047;
  box-shadow:0 0 5px #243047;
  font-family:monospace;
}
#logsView ul{ list-style:none; margin:0; padding:0; }
#logsView li{ padding:.25rem .5rem; border-bottom:1px solid #243047; }

.popup-table{
  margin:0 auto;
  border-collapse:collapse;
}
.popup-table th,.popup-table td{
  padding:4px;
  border:1px solid #232835;
  text-align:left;
  white-space:nowrap;
}

.bottom-tabs{
  grid-area: bottom;
  display: flex; align-items: center; gap: .4rem;
  background:var(--panel);
  border:1px solid #243047;
  border-radius: var(--radius);
  box-shadow:none;
  padding:.25rem .4rem;
}
.bottom-tabs button{
  background:var(--panel2);
  border:1px solid #243047;
  color:var(--ink);
  border-radius:.5rem;
  cursor:pointer;
}
.tab{
  padding:.4rem .6rem;
}
.tab.is-active{ outline:2px solid #3a79ff55; background:#3a79ff33; }
.grow{ flex:1 }

@media (max-width: 1100px){
  .app{
    grid-template-columns: var(--left-w) 1fr;
    grid-template-areas:
      "top top"
      "left main"
      "bottom bottom";
  }
  .right{ display:none; }
}

#btn-send-panel{
  position:absolute;
  top:10px;
  right:10px;
  display:none;
  gap:.4rem;
  background:var(--panel);
  padding:.4rem;
  border-radius:.5rem;
  box-shadow:0 2px 4px rgba(0,0,0,0.3);
}

/* Loading spinner */
.spinner{
  border:4px solid rgba(0,0,0,0.1);
  border-left-color:#29b6f6;
  border-radius:50%;
  width:24px;
  height:24px;
  animation:spin 1s linear infinite;
}

@keyframes spin{
  to{ transform: rotate(360deg); }
}

#networkSpinner{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
}
.trial-popup {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  background: rgba(20, 26, 38, 0.92);
  color: #dfe6f3;
  padding: 1rem;
  z-index: 1000;
  border-radius: var(--radius);
  font-weight: 500;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: 20rem;
  border: 1px solid rgba(72, 86, 115, 0.6);
  box-shadow: 0 18px 30px rgba(3, 9, 20, 0.45);
}

.trial-popup--trial {
  background: linear-gradient(135deg, rgba(27, 36, 54, 0.96), rgba(18, 24, 38, 0.96));
  border: 1px solid rgba(102, 153, 255, 0.45);
  color: #f1f5ff;
}

.trial-popup__message {
  line-height: 1.45;
  font-size: 0.95rem;
}

.trial-popup__cta {
  background: #3e8ee5;
  color: #0b1b2d;
  border: none;
  border-radius: 0.5rem;
  padding: 0.55rem 0.9rem;
  font-weight: 600;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  transition: background 0.2s ease, transform 0.2s ease;
}

.trial-popup__cta:hover {
  background: #5aa0f0;
  transform: translateY(-1px);
}

.trial-popup--trial .trial-popup__cta {
  background: #5aa0f0;
  color: #061423;
}

.trial-popup--trial .trial-popup__cta:hover {
  background: #7bb5ff;
}

.trial-popup--locked {
  background: rgba(36, 48, 71, 0.95);
  border: 1px solid rgba(255, 105, 135, 0.45);
  color: #ffe4e6;
}

.trial-popup--locked .trial-popup__cta {
  background: #288dc7;
  color: #ffffff;
}

.trial-popup--locked .trial-popup__cta:hover {
  background: #1f6c9f;
}

.filter-select option.filter-option--locked,
.filter-select option[data-locked="true"] {
  color: #8a94ad;
  background-color: #202637;
  background-image: linear-gradient(#202637, #202637);
  font-style: italic;
  opacity: 0.65;
}

.filter-locked-warning {
  margin-bottom: 0.5rem;
  padding: 0.45rem 0.6rem;
  border-radius: 0.5rem;
  background: rgba(255, 105, 135, 0.12);
  border: 1px solid rgba(255, 105, 135, 0.35);
  color: #ff9ba6;
  font-size: 0.82rem;
  line-height: 1.35;
}