/* Auto-Cuan Unified AI Cockpit Styles (PR 2: Layout Terpadu & Auto-Sync Ticker) */

/* Main Cockpit Grid */
.unified-cockpit-shell {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  box-sizing: border-box;
}

.unified-cockpit-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 1024px) {
  .unified-cockpit-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
  }
}

.unified-primary-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.unified-chat-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 1024px) {
  .unified-chat-col {
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
  }
}

/* Cockpit Header & Search Bar */
.unified-top-bar {
  background: rgba(17, 24, 39, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 4px;
}

.unified-input-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.unified-input-wrapper {
  flex: 1 1 240px;
  position: relative;
}

.unified-ticker-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #34d399;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.25);
  padding: 3px 9px;
  border-radius: 9999px;
}

/* Card Shell */
.unified-card {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  overflow: hidden;
  box-sizing: border-box;
}

/* #rankingTableWrap gets its scrollbox from premium-workstation-core.css /
   -v6.css on index.html, but analisis-saham.html never loads that bundle —
   so the Ranking Harian tab there had no overflow/max-height at all and the
   sticky <thead> in analisis-saham-runtime.js's renderRankingTable() stuck to
   the browser viewport instead of the table panel. Declared here (shared by
   both pages) so the table scrolls the same way everywhere regardless of
   which host page's stylesheet bundle is loaded. Values match the dashboard's
   own #rankingTableWrap rule in premium-workstation-v6.css. */
#rankingTableWrap {
  overflow: auto;
  max-height: min(66vh, 720px);
}

.unified-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.15);
}

/* Interactive Chart Area */
.unified-chart-box {
  position: relative;
  width: 100%;
  min-height: 280px;
}

.unified-chart-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 6px 14px;
  font-size: 10px;
  background: rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Sub-tab Switcher */
.unified-subtabs {
  display: flex;
  gap: 4px;
  background: rgba(0, 0, 0, 0.25);
  padding: 3px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.unified-subtab-btn {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.unified-subtab-btn:hover {
  color: #f1f5f9;
  background: rgba(255, 255, 255, 0.04);
}

.unified-subtab-btn.active {
  color: #10b981;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.unified-subtab-btn.vision-tab.active {
  color: #60a5fa;
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.25);
}

/* Chat Messages Container */
.unified-chat-messages {
  overflow-y: auto;
  overscroll-behavior-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 240px;
  max-height: 480px;
  box-sizing: border-box;
}

@media (min-width: 1024px) {
  .unified-chat-messages {
    max-height: calc(100vh - 280px);
    min-height: 360px;
  }
}

/* Chat composer wrapper */
.unified-chat-composer {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.2);
}

.unified-quick-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.unified-prompt-chip {
  font-size: 11px;
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 4px 10px;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.unified-prompt-chip:hover {
  color: #6ee7b7;
  border-color: rgba(16, 185, 129, 0.3);
  background: rgba(16, 185, 129, 0.08);
}

/* ===== ANALISIS SAHAM SUB-TAB STRIP (POLA PORTFOLIO) ===== */
/* PR1 layout fix (measured via CDP): the header is `position: sticky; top: 0`
   and 61px tall. The tab strip was also `position: sticky; top: 61px`, which
   DOUBLE-counted the header height on first paint: with scrollY = 0 the strip
   sat at y=122 instead of y=61, opening a 61px black void directly under the
   header (headerBottom=61, tabTop=122, gap=61).
   Root cause: the scroll container is <body>, not #page-analisis. A sticky
   element whose `top` is a positive offset in a non-scrolled flex parent gains
   that offset as a static shift. The correct value is `top: 0` — the sticky
   header (z-index 50) already sits above the strip (z-index 20) while
   scrolling, so no manual offset is needed. */
:root { --analisis-header-h: 61px; }
#page-analisis {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
.analisis-tab-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 0 12px;
  margin-top: 0;
  position: sticky;
  top: 0;
  z-index: 20;
  background: linear-gradient(rgba(11, 14, 20, 0.98) 80%, transparent);
  scrollbar-width: none;
}
.analisis-tab-strip::-webkit-scrollbar { display: none; }

.analisis-tab {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #17202e;
  color: #94a3b8;
  border-radius: 12px;
  padding: 8px 16px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.18s ease;
}

.analisis-tab:hover {
  color: #f1f5f9;
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.2);
}

.analisis-tab.active {
  background: #10b981;
  border-color: #10b981;
  color: #04251c;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.25);
}

.analisis-tab-panel {
  display: none;
  width: 100%;
}

.analisis-tab-panel.active {
  display: block;
}

/* ===== PR1 LAYOUT FIX: dropdown & search containers ===== */
/* The broker date dropdown wrapper is injected ABOVE the panel content and
   had no containing block, so it stacked over the "Broker Summary" heading.
   Give it its own row, isolation, and a stacking context below the sticky
   tab strip (z-index 20). */
#brokerDateSelectWrap {
  position: relative;
  z-index: 10;
  width: 100%;
  isolation: isolate;
}

/* The Sinyal Intelijen search bar is covered by the sticky tab strip on
   scroll because it had no scroll offset compensation. Reserve room equal to
   the header + strip so the input's top edge stays visible. */
#intelSearchBarContainer {
  scroll-margin-top: calc(var(--analisis-header-h) + 44px);
  position: relative;
  z-index: 10;
}

/* ===== INDEPENDENT TAB SEARCH BARS ===== */
.tab-independent-search {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tab-independent-search input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  color: #f1f5f9;
  padding: 6px 10px;
  font-size: 12px;
  outline: none;
  transition: all 0.15s ease;
}

.tab-independent-search input:focus {
  border-color: rgba(16, 185, 129, 0.6);
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15);
}

.tab-independent-search button {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #6ee7b7;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.tab-independent-search button:hover {
  background: rgba(16, 185, 129, 0.28);
  border-color: rgba(16, 185, 129, 0.5);
  color: #a7f3d0;
}

@media (max-width: 640px) {
  .tab-independent-search input {
    width: 100px;
    font-size: 11px;
    padding: 5px 8px;
  }
  .tab-independent-search button {
    padding: 5px 10px;
    font-size: 11px;
  }
}

/* =========================================================================
   TABLE & CONTAINER SCROLL BOUNDING (Fixed Heights & Containment)
   Guarantees that tables and data containers scroll internally within their
   own boxes and never hijack the page/window scrolling across all 9 pages.
   ========================================================================= */
#rankingTableWrap {
  overflow-x: auto;
  overflow-y: auto;
  max-height: min(66vh, 560px);
  scrollbar-width: thin;
  overscroll-behavior-y: contain;
}

#portTableWrap,
.table-wrap {
  overflow-x: auto;
  overflow-y: auto;
  max-height: min(66vh, 520px);
  scrollbar-width: thin;
  overscroll-behavior-y: contain;
}

#trTableWrap,
#trBacktestTradesWrap {
  overflow-x: auto;
  overflow-y: auto;
  max-height: min(66vh, 580px);
  scrollbar-width: thin;
  overscroll-behavior-y: contain;
}

#screenerTableWrap,
#nkScreenerTableWrap,
#dtScreenerTableWrap {
  overflow-x: auto;
  overflow-y: auto;
  max-height: min(66vh, 560px);
  scrollbar-width: thin;
  overscroll-behavior-y: contain;
}

#sektorDetailTable {
  overflow-x: auto;
  overflow-y: auto;
  max-height: min(66vh, 560px);
  scrollbar-width: thin;
  overscroll-behavior-y: contain;
}

#newsPageContainer {
  overflow-y: auto;
  max-height: min(70vh, 640px);
  scrollbar-width: thin;
  overscroll-behavior-y: contain;
}

#analisisResult {
  overflow-y: auto;
  max-height: min(70vh, 640px);
  scrollbar-width: thin;
  overscroll-behavior-y: contain;
}

#unifiedAiChartResultWrap {
  overflow-y: auto;
  max-height: min(66vh, 560px);
  scrollbar-width: thin;
  overscroll-behavior-y: contain;
}

.scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.3) transparent;
  overscroll-behavior-y: contain;
}
.scrollbar-thin::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.3);
  border-radius: 4px;
}
.scrollbar-thin::-webkit-scrollbar-track {
  background: transparent;
}