/* ============================================================
 * BJF Arbitrage Statistics Analyzer — frontend dashboard styles
 * All rules scoped to .bjf-arbstats-app
 * ============================================================ */

.bjf-arbstats-app{
  background:#0A1628;color:#E8EEF7;
  font-family:'Segoe UI',-apple-system,BlinkMacSystemFont,system-ui,Arial,sans-serif;
  font-size:13px;line-height:1.4;border-radius:8px;overflow:hidden;
  border:1px solid #223552;max-width:1600px;margin:0 auto;
}
.bjf-arbstats-app *{box-sizing:border-box;}

.bjf-arbstats-header{
  background:#122136;border-bottom:1px solid #223552;padding:12px 18px;
}
.bjf-arbstats-app .bjf-arbstats-title{color:#C9A84C;font-weight:500;font-size:16px;}

.bjf-arbstats-app .bjf-arbstats-summary{
  margin:10px 14px 6px;background:#1B2F4C;border:1px solid #223552;border-radius:4px;
  padding:7px 11px;color:#8A9BB3;font-size:11px;
}

/* ---- Filter bar ---- */
.bjf-arbstats-filters{
  margin:8px 14px 12px;background:#1B2F4C;border:1px solid #223552;border-radius:4px;
  padding:12px;display:grid;
  grid-template-columns:1.4fr 1.4fr 1fr 1.2fr .85fr .85fr auto;
  gap:10px;align-items:end;
}
.bjf-arbstats-app .bjf-arbstats-filters label{
  display:flex;flex-direction:column;gap:3px;color:#E8EEF7;
}
.bjf-arbstats-app .bjf-arbstats-lbl{
  color:#C9A84C;font-size:10px;letter-spacing:.5px;font-weight:600;
}
.bjf-arbstats-app .bjf-arbstats-filters input,
.bjf-arbstats-app .bjf-arbstats-filters select{
  background:#0A1628;border:1px solid #223552;color:#E8EEF7;
  padding:6px 8px;border-radius:3px;font-size:13px;font-family:inherit;
  width:100%;min-width:0;
}
.bjf-arbstats-app .bjf-arbstats-filters input:focus,
.bjf-arbstats-app .bjf-arbstats-filters select:focus{outline:none;border-color:#C9A84C;}
.bjf-arbstats-app .bjf-arbstats-filters select{cursor:pointer;}

.bjf-arbstats-app .bjf-arbstats-btn-primary{
  background:#C9A84C;color:#0A1628;font-weight:600;padding:8px 20px;
  border-radius:3px;border:0;cursor:pointer;font-size:13px;font-family:inherit;
  align-self:end;
}
.bjf-arbstats-app .bjf-arbstats-btn-primary:hover{background:#E5C46B;}
.bjf-arbstats-app .bjf-arbstats-btn-primary:disabled{opacity:.5;cursor:wait;}

/* ---- KPI cards row ---- */
.bjf-arbstats-kpis{
  margin:0 14px 12px;display:grid;
  grid-template-columns:repeat(5,1fr) 1.4fr;gap:8px;
}
.bjf-arbstats-app .kpi{
  background:#1B2F4C;border:1px solid #223552;border-left:3px solid #C9A84C;
  border-radius:3px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;
}
.bjf-arbstats-app .kpi.accent-green{border-left-color:#3DD07A;}
.bjf-arbstats-app .kpi.accent-gold{border-left-color:#C9A84C;}
.bjf-arbstats-app .kpi .lbl{color:#C9A84C;font-size:10px;letter-spacing:.5px;font-weight:600;}
.bjf-arbstats-app .kpi .val{color:#E8EEF7;font-size:20px;font-weight:500;line-height:1.1;}
.bjf-arbstats-app .kpi .val.small{font-size:15px;}
.bjf-arbstats-app .kpi .val.mono{font-family:Consolas,Menlo,monospace;}
.bjf-arbstats-app .kpi .sub{color:#8A9BB3;font-size:10px;margin-top:2px;}

/* ---- Two-column grid for panels ---- */
.bjf-arbstats-grid-2{
  margin:0 14px 10px;display:grid;grid-template-columns:1fr 1fr;gap:10px;
}

.bjf-arbstats-app .bjf-arbstats-panel{
  background:#1B2F4C;border:1px solid #223552;border-radius:4px;padding:10px 12px;
  margin:0 14px 10px;
}
.bjf-arbstats-grid-2 > .bjf-arbstats-panel{margin:0; width: 100%; min-width: 100%;}
.bjf-arbstats-app .sec-title{
  color:#C9A84C;font-size:11px;font-weight:500;letter-spacing:.3px;margin-bottom:8px;
}
.bjf-arbstats-app .sec-title-row{
  display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;
}

/* ---- Heatmap (CSS grid) ---- */
.bjf-arbstats-app .bjf-arbstats-heatmap{
  display:grid;grid-template-columns:24px repeat(24,1fr);gap:1px;font-size:9px;
}
.bjf-arbstats-app .bjf-arbstats-heatmap .hm-cell{height:14px;border-radius:1px;}
.bjf-arbstats-app .bjf-arbstats-heatmap .hm-label{color:#8A9BB3;text-align:center;line-height:14px;}
.bjf-arbstats-app .bjf-arbstats-heatmap .hm-row-label{color:#8A9BB3;line-height:14px;}

/* ---- Sessions cards ---- */
.bjf-arbstats-app .bjf-arbstats-sessions{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
}
.bjf-arbstats-app .sess-card{
  background:#264070;border-radius:4px;padding:10px 12px;
}
.bjf-arbstats-app .sess-card .sess-key{
  color:#C9A84C;font-size:10px;letter-spacing:.5px;font-weight:600;
}
.bjf-arbstats-app .sess-card .sess-count{color:#E8EEF7;font-size:18px;font-weight:500;}
.bjf-arbstats-app .sess-card .sess-sub{color:#8A9BB3;font-size:10px;}

/* ---- Symbol ranking ---- */
.bjf-arbstats-app .bjf-arbstats-ranking{
  display:flex;flex-direction:column;gap:5px;
}
.bjf-arbstats-app .rank-row{
  display:grid;grid-template-columns:70px 1fr 60px 70px;
  align-items:center;gap:8px;font-size:12px;
}
.bjf-arbstats-app .rank-row .rank-bar{
  background:#0F2540;height:7px;border-radius:2px;overflow:hidden;
}
.bjf-arbstats-app .rank-row .rank-bar > span{
  display:block;background:#C9A84C;height:7px;border-radius:2px;
}
.bjf-arbstats-app .rank-row .rank-n{
  font-family:Consolas,Menlo,monospace;text-align:right;
}
.bjf-arbstats-app .rank-row .rank-avg{color:#8A9BB3;font-family:Consolas,Menlo,monospace;text-align:right;}

/* ---- Events table ---- */
.bjf-arbstats-app .bjf-arbstats-events-wrap{overflow-x:auto;}
.bjf-arbstats-app table.bjf-arbstats-events{
  width:100%;border-collapse:collapse;font-family:Consolas,Menlo,monospace;font-size:11px;
}
.bjf-arbstats-app table.bjf-arbstats-events th{
  background:#0F2540;color:#C9A84C;text-align:left;padding:6px 8px;
  font-size:10px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;
  border-bottom:1px solid #223552;
}
.bjf-arbstats-app table.bjf-arbstats-events td{
  padding:5px 8px;border-bottom:1px solid #142440;color:#E8EEF7;white-space:nowrap;
}
.bjf-arbstats-app table.bjf-arbstats-events td.dir-long{color:#3DD07A;font-weight:600;}
.bjf-arbstats-app table.bjf-arbstats-events td.dir-short{color:#E5484D;font-weight:600;}
.bjf-arbstats-app table.bjf-arbstats-events td.diff-cell{color:#C9A84C;font-weight:600;}

.bjf-arbstats-app .bjf-arbstats-paging{
  margin-top:8px;display:flex;justify-content:flex-end;align-items:center;
  gap:10px;color:#8A9BB3;font-size:11px;
}
.bjf-arbstats-app .bjf-arbstats-paging button{
  background:#0A1628;border:1px solid #223552;color:#E8EEF7;
  padding:4px 10px;border-radius:3px;cursor:pointer;font-family:inherit;font-size:11px;
}
.bjf-arbstats-app .bjf-arbstats-paging button:hover:not(:disabled){border-color:#C9A84C;}
.bjf-arbstats-app .bjf-arbstats-paging button:disabled{opacity:.4;cursor:default;}

.bjf-arbstats-app .bjf-arbstats-export button{
  background:#0A1628;border:1px solid #223552;color:#E8EEF7;
  padding:4px 10px;border-radius:3px;cursor:pointer;font-family:inherit;font-size:11px;
}
.bjf-arbstats-app .bjf-arbstats-export button:hover{border-color:#C9A84C;}

.bjf-arbstats-app .bjf-arbstats-status{
  background:#122136;border-top:1px solid #223552;padding:6px 18px;
  color:#8A9BB3;font-size:10px;
}

/* ---- Responsive: collapse filter and KPIs on narrow screens ---- */
@media (max-width:980px){
  .bjf-arbstats-filters{grid-template-columns:1fr 1fr;}
  .bjf-arbstats-app .bjf-arbstats-btn-primary{grid-column:1/-1;}
  .bjf-arbstats-kpis{grid-template-columns:repeat(2,1fr);}
  .bjf-arbstats-grid-2{grid-template-columns:1fr;}
}

.bjf-arbstats-app canvas {
    height: 300px;
    position: relative;
    overflow: hidden;
    max-height: 300px;
}

/* Tablet */
@media (max-width:980px){
  .bjf-arbstats-filters{
    grid-template-columns:repeat(2,1fr);
  }

  .bjf-arbstats-app .bjf-arbstats-btn-primary{
    grid-column:1/-1;
    width:100%;
  }

  .bjf-arbstats-kpis{
    grid-template-columns:repeat(2,1fr);
  }

  .bjf-arbstats-grid-2{
    grid-template-columns:1fr;
  }
}

/* Mobile */
@media (max-width:640px){
  .bjf-arbstats-filters{
    grid-template-columns:1fr;
    gap:12px;
    margin:8px;
    padding:10px;
  }

  .bjf-arbstats-app .bjf-arbstats-filters label{
    width:100%;
  }

  .bjf-arbstats-app .bjf-arbstats-filters input,
  .bjf-arbstats-app .bjf-arbstats-filters select{
    font-size:16px; /* prevents iOS zoom */
    min-height:42px;
  }

  .bjf-arbstats-app .bjf-arbstats-btn-primary{
    width:100%;
    min-height:44px;
  }

  .bjf-arbstats-kpis{
    grid-template-columns:1fr;
  }
}