/* ═══ BANYU LANGIT — BLOOMBERG TERMINAL THEME ═══ */
/* V4: Authentic Bloomberg palette — black, amber, green/red, high contrast */

:root{
  --f:'IBM Plex Mono',monospace;
  --fm:'IBM Plex Mono',monospace;
  --accent:#ff9800;
  --accentB:rgba(255,152,0,.12);
  /* Sidebar */
  --sidebar-w:44px;
  --sidebar-w-expanded:180px;
  /* Topbar */
  --topbar-h:36px;
  /* Compact mode */
  --cell-py:3px;
  --cell-px:6px;
  --section-gap:8px;
  --card-pad:8px;
  --font-xs:9px;
  --font-sm:10px;
  --font-md:11px;
  --font-lg:12px;
  --font-xl:13px;
}
/* Compact overrides */
.compact{--cell-py:2px;--cell-px:4px;--section-gap:4px;--card-pad:5px;--font-xs:8px;--font-sm:9px;--font-md:10px;--font-lg:11px;--font-xl:12px}

/* ═══ DARK THEME (default) — Bloomberg authentic ═══ */
[data-theme="dark"]{
  /* Backgrounds: true black like Bloomberg */
  --bg0:#000000;
  --bg1:#0a0a0a;
  --bg2:#111111;
  --bgH:#1a1a1a;
  /* Borders: subtle dark gray */
  --b1:#1e1e1e;
  --b2:#2a2a2a;
  --b3:#363636;
  /* Text: high contrast white/gray hierarchy */
  --t1:#e8e8e8;
  --t2:#888888;
  --t3:#555555;
  /* Green: Bloomberg bright green for positive */
  --gn:#00e676;
  --gnB:rgba(0,230,118,.10);
  --gnBo:rgba(0,230,118,.25);
  /* Red: Bloomberg red for negative */
  --rd:#ff3d00;
  --rdB:rgba(255,61,0,.10);
  --rdBo:rgba(255,61,0,.22);
  /* Blue → Amber/Orange: Bloomberg primary accent */
  --bl:#ff9800;
  --blB:rgba(255,152,0,.10);
  --blBo:rgba(255,152,0,.22);
  /* Amber: secondary accent (warm yellow) */
  --am:#ffd600;
  --amB:rgba(255,214,0,.10);
  --ov:rgba(0,0,0,.88);
  --sh:0 4px 24px rgba(0,0,0,.8);
  --sb:#2a2a2a;
  /* Topbar: Bloomberg red */
  --topbar-bg:#b71c1c;
  --topbar-border:#d32f2f
}

/* ═══ LIGHT THEME ═══ */
[data-theme="light"]{
  --bg0:#eef0f4;
  --bg1:#f8f9fb;
  --bg2:#fff;
  --bgH:#eef1f5;
  --b1:#dde1e8;
  --b2:#c8ced8;
  --b3:#b0b8c8;
  --t1:#0f1218;
  --t2:#5c6270;
  --t3:#8890a0;
  --gn:#00a843;
  --gnB:rgba(0,168,67,.08);
  --gnBo:rgba(0,168,67,.2);
  --rd:#d50032;
  --rdB:rgba(213,0,50,.06);
  --rdBo:rgba(213,0,50,.15);
  --bl:#c67c00;
  --blB:rgba(198,124,0,.08);
  --blBo:rgba(198,124,0,.15);
  --am:#c67c00;
  --amB:rgba(198,124,0,.08);
  --ov:rgba(0,0,0,.45);
  --sh:0 4px 24px rgba(0,0,0,.1);
  --sb:#c8ccd4;
  /* Topbar: same red in light mode */
  --topbar-bg:#c62828;
  --topbar-border:#e53935
}

*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg0);color:var(--t1);font-family:var(--f);font-size:var(--font-md);height:100vh;overflow:hidden;line-height:1.4}

/* ═══ TOPBAR — Bloomberg red header bar ═══ */
.topbar{
  height:var(--topbar-h);
  background:var(--topbar-bg,#b71c1c);
  border-bottom:1px solid var(--topbar-border,#d32f2f);
  display:flex;
  align-items:center;
  padding:0 10px;
  gap:8px;
  z-index:100;
  position:relative
}
.logo{display:flex;align-items:center;gap:6px;font-weight:700;font-size:var(--font-lg);letter-spacing:1px;white-space:nowrap;color:#fff;text-transform:uppercase;flex-shrink:0}
.logo img{width:20px;height:20px;border-radius:4px;object-fit:cover}
.topbar-r{display:flex;align-items:center;gap:1px;margin-left:auto}
.ib{width:28px;height:28px;border-radius:4px;border:none;background:0 0;color:rgba(255,255,255,.6);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;transition:all .1s}
.ib:hover{background:rgba(255,255,255,.12);color:#fff}
#bell{position:relative}
.badge{position:absolute;top:0;right:0;min-width:14px;height:14px;border-radius:7px;background:#ffd600;color:#000;font-size:8px;font-weight:700;display:none;align-items:center;justify-content:center;padding:0 3px}
.badge.v{display:flex}

/* Dropdowns */
.ndrop{display:none;position:absolute;top:var(--topbar-h);right:0;width:300px;max-height:360px;background:var(--bg2);border:1px solid var(--b2);border-radius:6px;box-shadow:var(--sh);z-index:999;overflow:hidden}
.ndrop.o{display:block}
.ndrop-h{padding:8px 12px;font-weight:700;font-size:var(--font-lg);border-bottom:1px solid var(--b1);display:flex;justify-content:space-between;align-items:center}
.ndrop-h button{background:none;border:none;color:var(--bl);font-size:var(--font-sm);cursor:pointer;font-family:var(--f)}
.ndrop-l{max-height:300px;overflow-y:auto}
.nit{padding:8px 12px;border-bottom:1px solid var(--b1);font-size:var(--font-md)}
.nit.ur{background:var(--amB)}
.nit-s{font-weight:700;color:var(--am);font-size:var(--font-md)}
.nit-m{color:var(--t2);margin-top:1px;font-size:var(--font-sm)}
.nit-t{color:var(--t3);font-size:var(--font-xs);margin-top:1px}
.ndrop-e{padding:20px;text-align:center;color:var(--t3);font-size:var(--font-md)}

/* ═══ GLOBAL SEARCH — centered in red topbar ═══ */
.topbar-search{flex:1;max-width:400px;position:relative;margin:0 auto}
.topbar-search input{
  width:100%;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.15);
  border-radius:4px;
  padding:4px 10px;
  color:#fff;
  font-size:var(--font-md);
  font-family:var(--f);
  outline:none;
  transition:border-color .1s
}
.topbar-search input:focus{border-color:rgba(255,255,255,.4);background:rgba(0,0,0,.5)}
.topbar-search input::placeholder{color:rgba(255,255,255,.4)}
.gs-ac{position:absolute;top:100%;left:0;right:0;background:var(--bg2);border:1px solid var(--b2);border-top:none;border-radius:0 0 6px 6px;max-height:260px;overflow-y:auto;z-index:999;display:none;box-shadow:var(--sh)}
.gs-ac.v{display:block}
.gs-ac-item{padding:5px 10px;cursor:pointer;display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--b1);transition:background .05s}
.gs-ac-item:hover,.gs-ac-item.sel{background:var(--bgH)}
.gs-ac-item .ac-code{font-weight:700;font-size:var(--font-md);color:var(--bl);min-width:48px}
.gs-ac-item .ac-name{font-size:var(--font-sm);color:var(--t2);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gs-ac-item .ac-val{font-size:var(--font-xs);white-space:nowrap}

/* ═══ LAYOUT — Sidebar + Content ═══ */
.layout{display:flex;height:calc(100vh - var(--topbar-h))}

/* ═══ SIDEBAR TABS ═══ */
.sidebar{
  width:var(--sidebar-w);
  background:var(--bg1);
  border-right:1px solid var(--b1);
  display:flex;
  flex-direction:column;
  flex-shrink:0;
  transition:width .15s ease;
  overflow:hidden;
  z-index:50
}
.sidebar.expanded{width:var(--sidebar-w-expanded)}
.sidebar-tabs{flex:1;display:flex;flex-direction:column;padding:4px 0}
.sidebar-tab{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  cursor:pointer;
  color:var(--t3);
  font-size:var(--font-md);
  font-weight:600;
  border-left:2px solid transparent;
  transition:all .1s;
  white-space:nowrap;
  overflow:hidden;
  min-height:36px
}
.sidebar-tab:hover{background:var(--bgH);color:var(--t2)}
.sidebar-tab.on{color:var(--bl);border-left-color:var(--bl);background:var(--blB)}
.sidebar-tab .tab-icon{width:20px;text-align:center;font-size:14px;flex-shrink:0}
.sidebar-tab .tab-label{opacity:0;transition:opacity .1s;font-size:var(--font-sm)}
.sidebar.expanded .sidebar-tab .tab-label{opacity:1}
.sidebar-toggle{
  padding:6px 10px;
  cursor:pointer;
  color:var(--t3);
  font-size:12px;
  border-top:1px solid var(--b1);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all .1s
}
.sidebar-toggle:hover{background:var(--bgH);color:var(--t1)}
.sidebar-bottom{margin-top:auto;border-top:1px solid var(--b1);padding:2px 0}
.sidebar-bottom .sidebar-tab{min-height:32px;padding:6px 10px}

/* Compact mode toggle in sidebar */
.compact-indicator{font-size:8px;padding:1px 4px;border-radius:3px;background:var(--amB);color:var(--am);margin-left:auto;display:none}
.compact .compact-indicator{display:inline}

/* ═══ MAIN CONTENT AREA ═══ */
.pL{
  flex:1;
  display:flex;
  flex-direction:column;
  background:var(--bg0);
  overflow:hidden;
  min-width:0
}

/* Old .tabs hidden — replaced by sidebar */
.tabs{display:none}

/* Tab panels */
.tpanel{flex:1;overflow:hidden;display:none;flex-direction:column}
.tpanel.on{display:flex}

/* Sub-tabs (within panels) */
.wt{display:flex;border-bottom:1px solid var(--b1);flex-shrink:0;background:var(--bg1)}
.wt-b{padding:5px 12px;background:none;border:none;border-bottom:2px solid transparent;color:var(--t3);font-family:var(--f);font-size:var(--font-sm);font-weight:600;cursor:pointer;transition:all .1s;white-space:nowrap}
.wt-b.on{color:var(--bl);border-bottom-color:var(--bl)}
.wt-b:hover:not(.on){background:var(--bgH);color:var(--t2)}
.wp{flex:1;overflow:hidden;display:none;flex-direction:column}
.wp.on{display:flex}

/* ═══ LOADING / SKELETON ═══ */
@keyframes shimmer{0%{background-position:-200px 0}100%{background-position:200px 0}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.skel{background:linear-gradient(90deg,var(--bgH) 25%,var(--b1) 50%,var(--bgH) 75%);background-size:400px 100%;animation:shimmer 1.2s infinite;border-radius:3px;height:14px;margin:3px 0}
.skel-row{display:flex;gap:6px;padding:var(--cell-py) var(--cell-px);border-bottom:1px solid var(--b1)}
.skel-row .skel{flex:1}
.kbd{display:inline-block;padding:0 4px;border-radius:3px;border:1px solid var(--b2);background:var(--bgH);font-size:var(--font-xs);color:var(--t3);line-height:1.5}

/* ═══ TICKER OVERLAY ═══ */
.ticker-overlay{display:none;position:fixed;inset:0;z-index:900;background:var(--ov)}
.ticker-overlay.v{display:flex;align-items:stretch}
.ticker-page{width:100%;max-width:1100px;margin:var(--topbar-h) auto 0;background:var(--bg1);overflow-y:auto;border-left:1px solid var(--b1);border-right:1px solid var(--b1)}
.tp-header{padding:10px 14px;border-bottom:1px solid var(--b1)}
.tp-top{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.tp-close{width:28px;height:28px;border-radius:4px;border:1px solid var(--b2);background:var(--bgH);color:var(--t2);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;transition:all .1s}
.tp-close:hover{background:var(--b2);color:var(--t1)}
.tp-code{font-size:18px;font-weight:700;color:var(--bl)}
.tp-name{font-size:var(--font-sm);color:var(--t2);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp-actions{display:flex;gap:3px}
.tp-actions button{padding:3px 8px;border-radius:4px;border:1px solid var(--b2);background:var(--bgH);color:var(--t2);font-size:var(--font-sm);font-family:var(--f);cursor:pointer;transition:all .1s;white-space:nowrap}
.tp-actions button:hover{background:var(--bl);color:#000;border-color:var(--bl)}
.tp-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.tp-price .price{font-size:22px;font-weight:700}
.tp-price .chg{font-size:var(--font-lg);font-weight:700}
.tp-meta{display:flex;gap:12px;font-size:var(--font-sm);color:var(--t3);margin-top:4px;flex-wrap:wrap}
.tp-meta span{display:flex;align-items:center;gap:2px}
.tp-meta b{color:var(--t2);font-weight:600}
.tp-tabs{display:flex;border-bottom:1px solid var(--b1)}
.tp-tab{flex:1;padding:6px 0;background:none;border:none;border-bottom:2px solid transparent;color:var(--t3);font-size:var(--font-sm);font-weight:600;cursor:pointer;transition:all .1s}
.tp-tab:hover{color:var(--t1)}
.tp-tab.on{color:var(--bl);border-bottom-color:var(--bl)}
.tp-body{padding:10px 14px}
.tp-section{font-size:var(--font-xs);font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--t3);margin:10px 0 4px}
.tp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:4px;margin-bottom:8px}
.tp-stat{background:var(--bgH);border-radius:4px;padding:4px 6px;text-align:center}
.tp-stat .sv{font-size:var(--font-lg);font-weight:700}
.tp-stat .sl{font-size:var(--font-xs);color:var(--t3);text-transform:uppercase;letter-spacing:.3px;margin-top:0}
.tp-holders{width:100%;font-size:var(--font-md);border-collapse:collapse;margin-top:4px}
.tp-holders th{text-align:left;padding:var(--cell-py) var(--cell-px);font-size:var(--font-xs);font-weight:600;color:var(--t3);border-bottom:1px solid var(--b1);text-transform:uppercase}
.tp-holders td{padding:var(--cell-py) var(--cell-px);border-bottom:1px solid var(--b1)}
.tp-holders .ar{text-align:right}
.tp-flow-bar{display:flex;height:12px;margin:2px 0}
.tp-flow-bar .bar-neg{flex:1;display:flex;justify-content:flex-end}
.tp-flow-bar .bar-mid{width:1px;background:var(--b2)}
.tp-flow-bar .bar-pos{flex:1;display:flex}

/* ═══ SCROLLBAR ═══ */
::-webkit-scrollbar{width:3px;height:3px}
::-webkit-scrollbar-thumb{background:var(--sb);border-radius:2px}
::-webkit-scrollbar-track{background:transparent}

/* ═══ RESPONSIVE ═══ */
@media(max-width:768px){
  .sidebar{width:0;position:absolute;height:calc(100vh - var(--topbar-h));top:var(--topbar-h)}
  .sidebar.mobile-open{width:var(--sidebar-w-expanded)}
  .topbar-search{max-width:200px}
}