/* Broker summary section (IHSG). Built on the screener's own tokens and controls, laid out like
   the broker-flow study pages: a plain hero with sentence figures, then titled sections, each
   with one line of explanation above a bordered panel. The only new colours are six broker-line
   hues, validated as a categorical set on each surface (dataviz validator: dark #0b0c10 passes
   every check; light needs visible labels, which the end labels and legend provide). Red and
   green stay reserved for buy and sell. */
:root{
  --bs-c1:#3987e5;--bs-c2:#d95926;--bs-c3:#1f9aab;--bs-c4:#9085e9;--bs-c5:#c98500;--bs-c6:#d55181;
  --bs-buy:rgba(22,199,132,.15);--bs-sell:rgba(234,57,67,.15);
}
:root[data-theme="light"]{
  --bs-c1:#2a78d6;--bs-c2:#eb6834;--bs-c3:#1a97ab;--bs-c4:#6250d6;--bs-c5:#eda100;--bs-c6:#e87ba4;
  --bs-buy:rgba(15,157,111,.13);--bs-sell:rgba(224,67,79,.13);
}

/* ---- view switch: the screener's controls and body step aside, nothing is torn down */
.bs-ctls{display:none}
.bs-asof{display:none}
.tabpanel.bs-on .controls > .ctl:not(.bs-viewctl):not(.bs-asof),
.tabpanel.bs-on .controls > .biasgrp,
.tabpanel.bs-on > .bmon,
.tabpanel.bs-on > .card{display:none !important}
.tabpanel.bs-on .bs-ctls{display:contents}
.tabpanel.bs-on .bs-asof{display:flex}
.bs-viewctl[hidden]{display:none !important}
.bs-asof-v{display:flex;flex-direction:column;gap:2px;font-size:11.5px;color:var(--muted);white-space:nowrap}
.bs-asof-v b{font-size:15px;color:var(--txt);font-weight:800}

/* ---- controls */
.bs-search{position:relative}
/* the screener's search box styles hang off #searchInp, so they are repeated for this one */
#bsCode{appearance:none;background:var(--panel);color:var(--txt);border:1px solid var(--line2);border-radius:9px;padding:9px 12px 9px 31px;
  font:700 13px/1.2 ui-monospace,"SF Mono",Menlo,monospace;width:150px;text-transform:uppercase;letter-spacing:.3px}
#bsCode:hover{border-color:var(--accent-line)}
#bsCode:focus{border-color:var(--accent-line);outline:none;box-shadow:0 0 0 3px var(--accent-dim)}
#bsCode::placeholder{color:var(--muted2);font-weight:500}
.bs-sug{position:absolute;top:calc(100% + 6px);left:0;z-index:30;min-width:260px;max-width:340px;background:var(--elev);border:1px solid var(--line2);
  border-radius:10px;box-shadow:var(--shadow);padding:4px;display:flex;flex-direction:column}
.bs-sug[hidden]{display:none}
.bs-sug button{display:flex;gap:10px;align-items:baseline;text-align:left;border:0;background:transparent;color:var(--txt);padding:7px 9px;border-radius:7px;cursor:pointer;font-size:12.5px}
.bs-sug button b{min-width:44px;font-weight:800}
.bs-sug button span{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bs-sug button:hover,.bs-sug button.on{background:var(--accent-dim)}
.bs-range{display:flex;align-items:center;gap:6px;color:var(--muted2)}
.bs-range input{background:var(--panel);color:var(--txt);border:1px solid var(--line2);border-radius:9px;padding:8px 9px;font:600 12.5px/1.2 ui-monospace,"SF Mono",Menlo,monospace;color-scheme:dark}
:root[data-theme="light"] .bs-range input{color-scheme:light}
.bs-range input:hover{border-color:var(--accent-line)}

/* the screener's Broker Flow cell is the doorway into this section */
td.bfcol[data-bs]{cursor:pointer}
td.bfcol[data-bs]:hover{background:var(--accent-dim)}

/* ---- page */
.bs{display:flex;flex-direction:column;gap:34px;padding:8px 4px 6px}
.bs[hidden]{display:none}
.bs.bs-busy,.bs-chart.bs-busy{opacity:.55;transition:opacity .15s}
.bs .num{font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}
.bs .up{color:var(--up)} .bs .dn{color:var(--down)}
.bs-empty{color:var(--muted);padding:28px 4px;text-align:center;font-size:13px}
.bs-pulse{animation:bsPulse 1.2s ease-in-out infinite}
@keyframes bsPulse{50%{opacity:.45}}
.bs-link{border:0;background:transparent;color:var(--accent2);cursor:pointer;font-weight:700;font-size:12.5px;padding:0}
.bs-link:hover{text-decoration:underline}
.bs-note{font-size:12.5px;color:var(--accent2);line-height:1.45}
.bs-note[hidden]{display:none}
.bs-fine{margin-top:12px;font-size:11.5px;line-height:1.5;color:var(--muted2);max-width:90ch}

/* hero: a kicker line, the ticker with its price, then figures that each carry a sentence */
.bs-hero{display:flex;flex-direction:column;gap:12px}
.bs-kicker{font:12px/1.5 ui-monospace,"SF Mono",Menlo,monospace;color:var(--muted)}
.bs-title{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.bs-tk{font-size:32px;font-weight:850;letter-spacing:.2px;line-height:1}
.bs-tk.g-r{color:var(--fl-r)} .bs-tk.g-f{color:var(--fl-f)} .bs-tk.g-s{color:var(--fl-s)}
.bs-last{font-size:26px;font-weight:700}
.bs-chg{font-size:16px;font-weight:700}
.bs-sub{font-size:16px;color:var(--muted);font-weight:600}
.bs-figs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));background:var(--panel);border:1px solid var(--line2);border-radius:12px;overflow:hidden}
.bs-figs.n4{grid-template-columns:repeat(4,minmax(0,1fr))}
.bs-figs.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.bs-fig{padding:15px 17px;display:flex;flex-direction:column;gap:6px;min-width:0;box-shadow:1px 0 0 var(--line),0 1px 0 var(--line)}
.bs-fig b{font-size:21px;font-weight:650;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bs-fig > span{color:var(--muted);font-size:12.5px;line-height:1.45}
.bs-fig .bs-tag{font-size:13px;padding:5px 10px;min-width:0}

/* sections: title, one line of explanation, then the panel */
.bs-sec{display:flex;flex-direction:column;gap:12px;min-width:0}
.bs-sechead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.bs-sechead h2{margin:0;font-size:17px;font-weight:650;letter-spacing:.1px;color:var(--txt)}
.bs-sechead p{margin:5px 0 0;font-size:13px;line-height:1.5;color:var(--muted);max-width:92ch}
.bs-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.bs-tools .pill{padding:6px 12px}
.bs-tools .toggle button{padding:7px 13px}
.bs-panel{background:var(--panel);border:1px solid var(--line2);border-radius:12px;padding:16px 18px;min-width:0}
.bs-tblpanel{padding:4px 0 8px}
.bs-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;align-items:start}

/* chart block, after the study pages: legend with names and totals, panels, lettered key */
.bs-chartbox{background:var(--panel);border:1px solid var(--line2);border-radius:12px;padding:14px 14px 6px;position:relative;min-width:0}
.bs-legend{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;padding:0 2px 10px}
.bs-lgi{display:inline-flex;align-items:center;border-radius:8px}
.bs-lgi > button:first-child{display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;color:var(--muted);padding:6px 8px;border-radius:8px;cursor:pointer;font-size:12.5px}
.bs-lgi > button:first-child:hover{background:var(--elev)}
.bs-lgi b{color:var(--txt);font-weight:600}
.bs-lgc::before{content:"("} .bs-lgc::after{content:")"}
.bs-lgs{display:none}
.bs-lgi i{display:inline-block;width:16px;height:3px;border-radius:2px;background:var(--c)}
.bs-lgi i.dash{background:repeating-linear-gradient(90deg,var(--c) 0 5px,transparent 5px 8px)}
.bs-lgi.off > button:first-child{opacity:.42}
.bs-lgi.dis > button:first-child{cursor:default}
.bs-x{border:0;background:transparent;color:var(--muted2);cursor:pointer;font-size:15px;line-height:1;padding:4px 6px 4px 0}
.bs-x:hover{color:var(--txt)}
.bs .bs-add{margin-left:4px;max-width:100%}
.bs .bs-add select{min-width:0;width:auto;max-width:100%;padding:6px 28px 6px 10px;font-size:12px;border-radius:8px}
.bs-chart{position:relative;width:100%;min-height:80px}
.bs-chart svg{display:block;width:100%;height:auto;overflow:visible;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
.bs-chart svg .num{font-family:ui-monospace,"SF Mono",Menlo,monospace}
.bs-keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:8px 26px;font-size:13px;line-height:1.5;color:var(--muted);padding:2px 2px 0}
.bs-keys:empty{display:none}
.bs-keys b{color:var(--accent);font-family:ui-monospace,"SF Mono",Menlo,monospace;margin-right:7px}
.bs-keys span{color:var(--txt)}
.bs-tip{position:absolute;z-index:20;pointer-events:none;background:var(--elev);border:1px solid var(--line2);border-radius:10px;box-shadow:var(--shadow);
  padding:10px 12px;font-size:12px;min-width:230px}
.bs-tip[hidden]{display:none}
.bs-thead{display:flex;justify-content:space-between;gap:16px;margin-bottom:6px;white-space:nowrap}
.bs-trow,.bs-tsub{display:grid;grid-template-columns:64px 1fr 1fr;gap:12px;padding:2px 0;white-space:nowrap}
.bs-trow span:not(:first-child),.bs-tsub span:not(:first-child){text-align:right}
.bs-trow i{display:inline-block;width:10px;height:3px;border-radius:2px;margin-right:6px;vertical-align:middle}
.bs-tsub{margin-top:7px;padding-top:6px;border-top:1px solid var(--line);font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted2)}
.bs-trow2{display:flex;justify-content:space-between;gap:16px;padding:2px 0;color:var(--muted)}
.bs-trow2 b{color:var(--txt);font-weight:600}

/* The screener styles bare table / thead / tbody globally (a 1080px floor, sticky headers,
   and on phones every row becomes a grid card). This section's tables opt out of all of it. */
.bs table{min-width:0 !important;display:table !important;width:100%}
.bs thead{display:table-header-group !important}
.bs tbody{display:table-row-group !important}
.bs tfoot{display:table-footer-group !important}
.bs tr{display:table-row !important;grid-template-areas:none !important;padding:0 !important;background:transparent;border:0;box-shadow:none}
.bs td,.bs th{display:table-cell !important}
.bs thead th{position:static;z-index:auto;background:transparent;flex:none;border:0;border-radius:0;box-shadow:none;width:auto;min-width:0}
.bs tbody tr:hover{background:transparent}

/* broker codes: a tinted chip in the roster group's hue, the Broker Flow column's colours */
.bs-code{border:0;background:var(--elev);padding:4px 7px;border-radius:6px;font:800 12px/1 ui-monospace,"SF Mono",Menlo,monospace;color:var(--txt);cursor:pointer;letter-spacing:.3px}
.bs-code:hover{outline:1px solid var(--line2)}
.bs-code.g-r{color:var(--fl-r);background:color-mix(in srgb,var(--fl-r) 14%,transparent)}
.bs-code.g-f{color:var(--fl-f);background:color-mix(in srgb,var(--fl-f) 16%,transparent)}
.bs-code.g-s{color:var(--fl-s);background:color-mix(in srgb,var(--fl-s) 15%,transparent)}

/* paired buy / sell table */
.bs-tblwrap{overflow-x:auto}
.bs-tbl{border-collapse:separate;border-spacing:0;width:100%;font-size:13px}
.bs .bs-tbl th{color:var(--muted2);font-size:10.5px;text-transform:uppercase;letter-spacing:.7px;font-weight:700;text-align:right;padding:10px 12px;white-space:nowrap}
.bs .bs-tbl thead tr:last-child th{border-bottom:1px solid var(--line2)}
.bs .bs-tbl th:nth-child(2),.bs .bs-tbl td:nth-child(2){text-align:left}
.bs .bs-tbl tr.bs-sidehead th{text-align:left;padding:12px 12px 8px;font-size:12px;letter-spacing:.3px;text-transform:none;font-weight:700}
.bs .bs-tbl tr.bs-sidehead th .num{color:var(--muted2);font-weight:600;margin-left:4px}
.bs .bs-tbl tr.bs-sidehead th.b{color:var(--up)}
.bs .bs-tbl tr.bs-sidehead th.s{color:var(--down)}
.bs .bs-tbl th.bs-by{color:var(--up)} .bs .bs-tbl th.bs-sl{color:var(--down)}
.bs .bs-tbl td{padding:8px 12px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
.bs .bs-tbl tbody tr:hover td{background:var(--accent-dim)}
.bs-tbl tbody tr{cursor:pointer}
.bs .bs-tbl .bs-s0{border-left:1px solid var(--line2);text-align:left}
.bs-tbl:not(.bs-btbl) td.bs-c{position:relative}
.bs-tbl td.bs-c.on::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:3px;border-radius:2px;background:var(--c)}
.bs .bs-rk{color:var(--muted2);width:30px}
.bs-v{position:relative;min-width:72px}
.bs-v span{position:relative}
.bs-bar{position:absolute;right:6px;top:6px;bottom:6px;border-radius:4px;max-width:calc(100% - 12px)}
.bs-bar.b{background:var(--bs-buy)} .bs-bar.s{background:var(--bs-sell)}
.bs .bs-tbl tfoot td{border-bottom:0;color:var(--muted);font-weight:700;padding-top:10px}
.bs .bs-tbl tfoot td:nth-child(2){color:var(--muted2);text-transform:uppercase;font-size:10.5px;letter-spacing:.7px}
.bs-tblfoot{display:flex;justify-content:flex-end;padding:8px 14px 2px}
.bs-stk{border:0;background:var(--elev);color:var(--txt);font:800 12px/1 ui-monospace,"SF Mono",Menlo,monospace;cursor:pointer;padding:4px 7px;border-radius:6px}
.bs-stk:hover{color:var(--accent2)}

/* concentration + groups */
.bs-conc{width:100%;border-collapse:collapse;font-size:13px}
.bs .bs-conc th{font-size:10px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted2);font-weight:700;text-align:right;padding:0 8px 9px}
.bs .bs-conc td{padding:9px 8px;text-align:right;border-top:1px solid var(--line)}
.bs .bs-conc td:first-child,.bs .bs-conc th:first-child{text-align:left;color:var(--muted);font-weight:700;padding-left:0;white-space:nowrap}
.bs .bs-conc td:last-child{padding-right:0}
.bs-tag{display:inline-block;min-width:66px;text-align:center;font-size:11px;font-weight:800;padding:4px 8px;border-radius:7px;border:1px solid var(--rate-n-bd);color:var(--rate-n-c)}
.bs-tag.t-acc{color:var(--rate-b-c);border-color:var(--rate-b-bd)}
.bs-tag.t-bigacc{color:var(--rate-sb-c);border-color:var(--rate-sb-bd)}
.bs-tag.t-dist{color:var(--rate-s-c);border-color:var(--rate-s-bd)}
.bs-tag.t-bigdist{color:var(--rate-ss-c);border-color:var(--rate-ss-bd)}
.bs-count{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:12px;color:var(--muted)}
.bs-count b{color:var(--txt)}
.bs-cbar{flex:1;height:6px;border-radius:3px;background:var(--bs-sell);overflow:hidden}
.bs-cbar i{display:block;height:100%;background:var(--up);opacity:.75;border-radius:3px 0 0 3px}
.bs-grps{display:flex;flex-direction:column;gap:14px}
.bs-grp{display:grid;grid-template-columns:70px minmax(0,1fr) 84px;grid-template-rows:auto auto;column-gap:12px;row-gap:3px;align-items:center;font-size:13px}
.bs-gl{color:var(--txt);font-weight:700}
.bs-gt{position:relative;height:14px;background:var(--fl-track);border-radius:4px}
.bs-g0{position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:var(--fl-axis)}
.bs-gb{position:absolute;top:2px;bottom:2px;border-radius:3px}
.bs-grp.g-r .bs-gb{background:var(--fl-r)} .bs-grp.g-r .bs-gb.neg{background:var(--fl-r-neg)}
.bs-grp.g-f .bs-gb{background:var(--fl-f)} .bs-grp.g-f .bs-gb.neg{background:var(--fl-f-neg)}
.bs-grp.g-s .bs-gb{background:var(--fl-s)} .bs-grp.g-s .bs-gb.neg{background:var(--fl-s-neg)}
.bs-grp.g-o .bs-gb{background:var(--fl-o)} .bs-grp.g-o .bs-gb.neg{background:var(--fl-o-neg)}
.bs-grp > b{text-align:right}
.bs-gsub{grid-column:2 / 4;font-size:11px;color:var(--muted2)}
.bs-flash{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:90;background:var(--elev);color:var(--txt);border:1px solid var(--accent-line);
  border-radius:10px;padding:10px 16px;font-size:12.5px;box-shadow:var(--shadow)}
.bs-flash[hidden]{display:none}

@media (max-width:1400px){
  .bs-figs,.bs-figs.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bs-figs.n4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1000px){
  .bs-two{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:680px){
  /* a phone keeps the paired reading (who bought against who sold) and drops the detail */
  .bs .bs-rk,.bs .bs-lotc,.bs .bs-fq,.bs .bs-cs,.bs .bs-tbl tr.bs-sidehead{display:none !important}
  .bs{gap:28px;padding:4px 0}
  .bs-figs,.bs-figs.n3,.bs-figs.n4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bs-fig{padding:12px 13px}
  .bs-fig b{font-size:17px}
  .bs-tk{font-size:26px} .bs-last{font-size:20px}
  .bs-panel{padding:13px 14px}
  .bs-chartbox{padding:10px 8px 4px}
  .bs-tbl{font-size:11.5px}
  .bs .bs-tbl td,.bs .bs-tbl th{padding:7px 5px}
  .bs-v{min-width:0}
  #bsCode{width:120px}
  .bs-range input{width:132px}
  .bs-keys{grid-template-columns:minmax(0,1fr)}
  /* phone legend: code and total only, the full names stay on wider screens */
  .bs-lgn{display:none} .bs-lgs{display:inline}
  .bs-lgc::before,.bs-lgc::after{content:none}
  .bs-legend{gap:2px 2px}
  .bs-lgi > button:first-child{padding:5px 6px;gap:6px}
}