/* ═══════════════════════════════════════════════════════════════
   ASTRONOTE TERMINAL — Theme
   Minimalis · dingin · cerah · dominan putih · aksen biru es
   Override goldenlayout-light-theme.css
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* Palet warna */
    --bg-main:        #ffffff;
    --bg-panel:       #fbfcfe;
    --bg-header:      #f4f7fa;
    --bg-tab:         #eef2f6;
    --bg-tab-active:  #ffffff;
    --border:         #e3e9ef;
    --splitter:       #e9eef3;
    --splitter-hover: #bfd9ee;

    --text-main:      #1e2a35;
    --text-dim:       #7b8a99;
    --text-muted:     #a6b3c0;

    --accent:         #3d9be9;   /* biru es utama */
    --accent-ice:     #dcedfb;   /* biru es sangat terang */
    --accent-dark:    #1f6fb5;

    --green:          #14a06a;
    --red:            #e05252;

    --font-ui:   "Segoe UI", -apple-system, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "Cascadia Code", "JetBrains Mono", Consolas, monospace;

    --header-h: 46px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    background: var(--bg-main);
    color: var(--text-main);
    font-family: var(--font-ui);
}

/* ═══════════════ HEADER BAR ═══════════════ */
#terminal-header {
    height: var(--header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 16px;
    background: var(--bg-header);
    border-bottom: 1px solid var(--border);
}

.brand { display: flex; align-items: baseline; gap: 6px; }
.brand-logo { color: var(--accent); font-size: 16px; }
.brand-name {
    font-weight: 800;
    letter-spacing: 2px;
    font-size: 14px;
    color: var(--text-main);
}
.brand-sub {
    font-weight: 400;
    letter-spacing: 3px;
    font-size: 10px;
    color: var(--text-dim);
}

.ticker-box { display: flex; gap: 8px; }
#ticker-input {
    width: 200px;
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-main);
    color: var(--text-main);
    font-family: var(--font-mono);
    font-size: 13px;
    text-transform: uppercase;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
#ticker-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ice);
}
#btn-analyze {
    padding: 7px 18px;
    border: none;
    border-radius: 6px;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background .15s;
}
#btn-analyze:hover { background: var(--accent-dark); }

.header-right { display: flex; align-items: center; gap: 14px; }
.company-name {
    font-size: 12px;
    color: var(--text-dim);
    max-width: 260px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.conn-status { font-size: 11px; color: var(--text-muted); }
.conn-status.ok  { color: var(--green); }
.conn-status.err { color: var(--red); }
.clock {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-dim);
}

/* ═══════════════ GOLDEN LAYOUT CONTAINER ═══════════════ */
#layout-container {
    width: 100%;
    height: calc(100vh - var(--header-h));
}

/* ═══════════════ GOLDEN LAYOUT OVERRIDES (light → ice white) ═══ */
.lm_goldenlayout { background: var(--bg-main); }

.lm_content {
    background: var(--bg-panel);
    border: 1px solid var(--border);
}

/* Header tab bar */
.lm_header {
    background: var(--bg-header);
    height: 28px !important;
}
.lm_header .lm_tab {
    background: var(--bg-tab);
    color: var(--text-dim);
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .4px;
    border: 1px solid var(--border);
    border-bottom: none;
    box-shadow: none;
    margin-right: 2px;
    padding: 0 12px;
    height: 24px;
    line-height: 24px;
}
.lm_header .lm_tab.lm_active {
    background: var(--bg-tab-active);
    color: var(--accent-dark);
    border-top: 2px solid var(--accent);
    box-shadow: none;
}
.lm_header .lm_tab .lm_close_tab {
    filter: grayscale(1) opacity(.45);
}

/* Splitter (pembatas panel yang bisa di-drag) */
.lm_splitter {
    background: var(--splitter);
    opacity: 1;
    transition: background .15s;
}
.lm_splitter:hover,
.lm_splitter.lm_dragging {
    background: var(--splitter-hover);
}

/* Drop zone indicator saat drag panel */
.lm_dropTargetIndicator {
    background: var(--accent-ice);
    border: 2px dashed var(--accent);
    opacity: .85;
}

/* Maximise / popout controls */
.lm_controls .lm_maximise,
.lm_controls .lm_popout,
.lm_controls .lm_close {
    filter: grayscale(1) opacity(.5);
}
.lm_controls > li:hover { filter: none; }

/* ═══════════════ PANEL PLACEHOLDER (komponen kosong) ═══════════ */
.panel-placeholder {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-muted);
    user-select: none;
}
.panel-placeholder .ph-icon  { font-size: 30px; color: var(--accent-ice); }
.panel-placeholder .ph-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--text-dim);
}
.panel-placeholder .ph-desc  { font-size: 11px; }
.panel-placeholder .ph-ticker {
    margin-top: 6px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--accent);
    font-weight: 700;
}

/* ═══════════════ CHART COMPONENT (Tab A) ═══════════════ */
.chart-root {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.chart-toolbar {
    height: 36px;                 /* selaras dengan TOOLBAR_H di app.js */
    flex: 0 0 36px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    background: var(--bg-header);
    border-bottom: 1px solid var(--border);
}
.chart-ticker {
    width: 90px;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--bg-main);
    color: var(--text-main);
    font-family: var(--font-mono);
    font-size: 12px;
    text-transform: uppercase;
    outline: none;
}
.chart-ticker:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-ice);
}
.chart-load {
    padding: 4px 14px;
    border: none;
    border-radius: 5px;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1px;
    cursor: pointer;
}
.chart-load:hover { background: var(--accent-dark); }
.chart-toggle {
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--bg-main);
    color: var(--text-muted);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 1px;
    white-space: nowrap;
    cursor: pointer;
    transition: all .15s;
}
.chart-toggle:hover { border-color: var(--accent); }
.chart-toggle.active {
    background: var(--accent-ice);
    border-color: var(--accent);
    color: var(--accent-dark);
}
/* Tombol aksi sekali-tekan (FIT, CLR) — tampilan sama, tanpa state active */
.chart-btn {
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--bg-main);
    color: var(--text-dim);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 1px;
    white-space: nowrap;
    cursor: pointer;
    transition: all .15s;
}
.chart-btn:hover  { border-color: var(--accent); color: var(--accent-dark); }
.chart-btn:active { background: var(--accent-ice); }

/* Mode menggambar aktif — kursor crosshair di panel utama */
.chart-main.drawing,
.chart-main.drawing * { cursor: crosshair !important; }
.chart-overlay-info {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chart-status {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chart-status.err { color: var(--red); }
.chart-legend {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    color: var(--text-dim);
    white-space: nowrap;
}
.chart-legend .lg {
    display: inline-block;
    width: 14px; height: 0;
    border-top: 2px solid;
    margin-left: 8px;
}
.chart-legend .lg-avg { border-color: #8e6cc9; }
.chart-legend .lg-cur { border-color: #3d9be9; border-top-style: dashed; }
.chart-legend .lg-idl { border-color: #14a06a; border-top-style: dashed; }
.chart-legend .lg-max { border-color: #e05252; border-top-style: dashed; }

.chart-body   { flex: 1 1 auto; min-height: 0; display: flex; }
.chart-charts { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.chart-main { flex: 1 1 auto; min-height: 0; }
.chart-sub  { flex: 0 0 auto; border-top: 1px solid var(--border); }

/* ── COMMAND CENTER (sidebar kanan chartComponent) ── */
.chart-cc {
    flex: 0 0 320px;               /* selaras CC_W di app.js */
    width: 320px;
    border-left: 1px solid var(--border);
    background: var(--bg-panel);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.cc-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    background: var(--bg-header);
    border-bottom: 1px solid var(--border);
}
.cc-title {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: var(--text-dim);
}
.cc-periods { display: flex; gap: 3px; }
.cc-periods button {
    padding: 2px 7px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-main);
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
}
.cc-periods button.active {
    background: var(--accent-ice);
    border-color: var(--accent);
    color: var(--accent-dark);
}
.cc-body { flex: 1 1 auto; overflow-y: auto; padding: 8px 10px; }
.cc-empty { padding: 20px 0; text-align: center; font-size: 11px; color: var(--text-muted); }

.cc-sec { margin-bottom: 14px; }
.cc-sec-title {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--accent-dark);
    border-bottom: 1px solid var(--border);
    padding-bottom: 4px;
    margin-bottom: 6px;
}
.cc-hint { font-weight: 400; letter-spacing: 0; color: var(--text-muted); float: right; }

.cc-verdict {
    font-size: 12px;
    font-weight: 800;
    padding: 6px 8px;
    border-radius: 5px;
    margin-bottom: 6px;
}
.cc-verdict-sub { display: block; font-size: 9px; font-weight: 400; opacity: .75; margin-top: 2px; }
.v-up   { background: rgba(20,160,106,.10); color: var(--green); }
.v-down { background: rgba(224,82,82,.10);  color: var(--red); }
.v-wait { background: var(--bg-tab);        color: var(--text-dim); }

.cc-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 10.5px;
    color: var(--text-dim);
    padding: 2px 0;
}
.cc-row b { color: var(--text-main); font-weight: 600; text-align: right; white-space: nowrap; }

.cc-meter {
    height: 4px;
    background: var(--bg-tab);
    border-radius: 2px;
    overflow: hidden;
    margin: 2px 0 6px;
}
.cc-meter i { display: block; height: 100%; }
.m-accent { background: var(--accent); }
.m-up     { background: var(--green); }
.m-down   { background: var(--red); }

.cc-buysell {
    display: flex;
    height: 5px;
    border-radius: 3px;
    overflow: hidden;
    background: var(--bg-tab);
    margin-bottom: 8px;
}
.cc-buysell .b { background: var(--green); }
.cc-buysell .s { background: var(--red); margin-left: auto; }

.dir-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; }
.dir-chip {
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 4px 5px;
    text-align: center;
    background: var(--bg-main);
}
.dir-chip .dc-name { display: block; font-size: 8.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dir-chip .dc-sig  { display: block; font-size: 10px; font-weight: 800; }
.dir-chip .dc-abbr { display: block; font-size: 7.5px; color: var(--text-muted); }
.dir-chip.s-buy  { border-color: rgba(20,160,106,.4); }  .dir-chip.s-buy .dc-sig  { color: var(--green); }
.dir-chip.s-sell { border-color: rgba(224,82,82,.4); }   .dir-chip.s-sell .dc-sig { color: var(--red); }
.dir-chip.s-wait .dc-sig { color: var(--text-muted); }

.cc-warn {
    font-size: 10px;
    color: #9a6b1f;
    background: rgba(232,161,60,.12);
    border: 1px solid rgba(232,161,60,.35);
    border-radius: 5px;
    padding: 5px 7px;
    margin: 4px 0;
}
.cc-list { margin: 4px 0 0; padding-left: 16px; font-size: 10px; color: var(--text-dim); }
.cc-list li { margin-bottom: 2px; }

.bk-sub { font-size: 9px; font-weight: 700; color: var(--text-muted); letter-spacing: .5px; margin: 6px 0 3px; text-transform: uppercase; }
.bk-row { display: flex; align-items: center; gap: 6px; font-size: 10px; padding: 2px 0; }
.bk-code { font-family: var(--font-mono); font-weight: 700; color: var(--text-main); width: 20px; }
.bk-name { flex: 1 1 auto; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-group { font-size: 8px; font-weight: 700; padding: 1px 4px; border-radius: 3px; }
.bk-group.fg { background: var(--accent-ice); color: var(--accent-dark); }
.bk-group.lc { background: var(--bg-tab); color: var(--text-dim); }
.bk-group.gv { background: rgba(20,160,106,.12); color: var(--green); }
.bk-val { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; white-space: nowrap; }
.bk-val.up { color: var(--green); }
.bk-val.down { color: var(--red); }

/* ── ROTASI BROKER (Hand-off Matrix) ── */
.rt-summary {
    font-size: 10px;
    color: var(--text-dim);
    background: var(--bg-tab);
    border-radius: 5px;
    padding: 5px 7px;
    margin-bottom: 6px;
    line-height: 1.5;
}
.rt-summary b { color: var(--text-main); font-family: var(--font-mono); font-weight: 700; }
.rt-row {
    border-left: 3px solid var(--border);
    padding: 3px 0 3px 7px;
    margin-bottom: 5px;
}
.rt-row.f-ok   { border-left-color: var(--green); }
.rt-row.f-warn { border-left-color: #e8a13c; }
.rt-row.f-off  { border-left-color: var(--border); opacity: .65; }
.rt-line { display: flex; align-items: center; gap: 5px; }
.rt-badge {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .5px;
    padding: 1px 5px;
    border-radius: 3px;
}
.rt-badge.b-acc     { background: rgba(20,160,106,.14); color: var(--green); }
.rt-badge.b-dist    { background: rgba(224,82,82,.14);  color: var(--red); }
.rt-badge.b-neutral { background: var(--bg-tab);        color: var(--text-muted); }
.rt-arrow { font-size: 9px; color: var(--text-muted); }
.rt-delta {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 700;
    white-space: nowrap;
}
.rt-delta.up   { color: var(--green); }
.rt-delta.down { color: var(--red); }
.rt-mean { font-size: 9.5px; color: var(--text-dim); margin-top: 1px; line-height: 1.35; }
.rt-mean b { color: var(--text-main); }

/* ═══════════════ SCROLLBAR (webkit) ═══════════════ */
::-webkit-scrollbar        { width: 8px; height: 8px; }
::-webkit-scrollbar-track  { background: var(--bg-panel); }
::-webkit-scrollbar-thumb  { background: #d5dee6; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--splitter-hover); }
/* ═══════════════ FUNDA COMPONENT (markdown report) ═══════════════ */
.funda-container {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--bg-main);
    padding: 14px 18px 28px;
}

/* Pesan status (loading / belum tersedia / error) di tengah panel */
.funda-message {
    height: 100%;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    padding: 0 24px;
}
.funda-msg-icon  { font-size: 30px; opacity: .85; }
.funda-msg-title { font-size: 13px; font-weight: 700; color: var(--text-main); letter-spacing: .3px; }
.funda-msg-desc  { font-size: 11px; color: var(--text-dim); line-height: 1.6; max-width: 340px; }

/* Meta bar: ticker + tanggal generate */
.funda-meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding-bottom: 8px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.funda-meta-ticker {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--accent-dark);
    background: var(--accent-ice);
    padding: 2px 8px;
    border-radius: 4px;
}
.funda-meta-date { font-size: 10px; color: var(--text-muted); }

/* ── Tipografi markdown: bersih, minimalis, ala equity research ── */
.funda-md {
    font-size: 12px;
    line-height: 1.65;
    color: var(--text-main);
    word-wrap: break-word;
}

.funda-md h1 {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .2px;
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--accent);
}
.funda-md h2 {
    font-size: 13px;
    font-weight: 700;
    margin: 22px 0 8px;
    padding: 5px 9px;
    background: var(--bg-header);
    border-left: 3px solid var(--accent);
    border-radius: 0 4px 4px 0;
}
.funda-md h3 {
    font-size: 12px;
    font-weight: 700;
    margin: 14px 0 6px;
    color: var(--accent-dark);
}
.funda-md h4 { font-size: 11.5px; font-weight: 700; margin: 12px 0 4px; }

.funda-md p  { margin: 6px 0; }
.funda-md ul, .funda-md ol { margin: 6px 0; padding-left: 20px; }
.funda-md li { margin: 3px 0; }

.funda-md strong { font-weight: 700; }
.funda-md em     { color: var(--text-dim); }

.funda-md blockquote {
    margin: 8px 0;
    padding: 6px 12px;
    border-left: 3px solid var(--accent-ice);
    background: var(--bg-panel);
    color: var(--text-dim);
    border-radius: 0 4px 4px 0;
}
.funda-md blockquote p { margin: 3px 0; }

.funda-md hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 18px 0;
}

.funda-md code {
    font-family: var(--font-mono);
    font-size: 11px;
    background: var(--bg-tab);
    padding: 1px 5px;
    border-radius: 3px;
}
.funda-md pre {
    background: var(--bg-header);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 12px;
    overflow-x: auto;
}
.funda-md pre code { background: none; padding: 0; }

/* ── Tabel ala financial report: border tipis + zebra ringan ── */
.funda-md table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0 14px;
    font-size: 11px;
    display: block;              /* tabel lebar → scroll horizontal sendiri */
    overflow-x: auto;
    white-space: nowrap;
}
.funda-md thead th {
    background: var(--bg-header);
    color: var(--text-main);
    font-weight: 700;
    text-align: left;
    letter-spacing: .2px;
    border-bottom: 2px solid var(--accent);
}
.funda-md th, .funda-md td {
    border: 1px solid var(--border);
    padding: 5px 10px;
    vertical-align: top;
}
.funda-md td {
    font-family: var(--font-mono);
    font-size: 10.5px;
}
.funda-md td:first-child { font-family: var(--font-ui); font-weight: 600; }
.funda-md tbody tr:nth-child(even) { background: var(--bg-panel); }
.funda-md tbody tr:hover           { background: var(--accent-ice); }

/* ── <details> sumber data & glosarium ── */
.funda-md details {
    margin: 8px 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 10px;
    background: var(--bg-panel);
}
.funda-md summary {
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-dim);
    user-select: none;
}
.funda-md details[open] summary { margin-bottom: 6px; }

/* ═══════════════ SCREENER COMPONENT ═══════════════ */
.scr-root {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-panel);
}

/* Toolbar — menyatu dengan header Golden Layout (pola .chart-toolbar) */
.scr-toolbar {
    flex: 0 0 34px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 8px;
    background: var(--bg-header);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

/* Tab Technical / Fundamental — gaya sama dengan .cc-periods */
.scr-tabs { display: flex; gap: 2px; }
.scr-tabs button {
    padding: 4px 12px;
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    background: var(--bg-tab);
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .6px;
    cursor: pointer;
    position: relative;
    top: 1px;
}
.scr-tabs button.active {
    background: var(--bg-panel);
    color: var(--accent-dark);
    border-top: 2px solid var(--accent);
}

.scr-minlabel {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
    color: var(--text-dim);
}
.scr-min { width: 90px; accent-color: var(--accent); }
.scr-min-val {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--accent-dark);
    min-width: 24px;
}

.scr-refresh {
    padding: 4px 12px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--bg-main);
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
    cursor: pointer;
    transition: color .15s, border-color .15s;
}
.scr-refresh:hover:not(:disabled) { color: var(--accent-dark); border-color: var(--accent); }
.scr-refresh:disabled { opacity: .55; cursor: wait; }
.scr-refresh.busy { animation: scr-pulse 1.2s ease-in-out infinite; }
@keyframes scr-pulse { 50% { opacity: .45; } }

.scr-status {
    font-size: 10px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
}
.scr-status.err { color: var(--red); }

/* Body & pane tabel */
.scr-body { flex: 1; overflow: hidden; display: flex; }
.scr-pane { flex: 1; overflow: auto; padding: 0 0 8px; }

/* Search box DataTables */
.scr-search { padding: 6px 8px 4px; }
.scr-search .dataTables_filter { text-align: left; }
.scr-search .dataTables_filter label { font-size: 0; color: transparent; }
.scr-search .dataTables_filter input {
    width: 160px;
    margin: 0;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--bg-main);
    color: var(--text-main);
    font-family: var(--font-mono);
    font-size: 11px;
    outline: none;
}
.scr-search .dataTables_filter input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ice);
}

/* ── Tabel: hilangkan border tebal bawaan DataTables ── */
.scr-table.dataTable,
.scr-table.dataTable.no-footer {
    border: none !important;
    border-collapse: collapse;
    font-size: 11px;
    width: 100% !important;
}
.scr-table.dataTable thead th {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border) !important;
    background: var(--bg-header);
    color: var(--text-dim);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    text-align: left;
    position: sticky;
    top: 0;
    z-index: 2;
}
.scr-table.dataTable thead .sorting:before,
.scr-table.dataTable thead .sorting:after,
.scr-table.dataTable thead .sorting_asc:before,
.scr-table.dataTable thead .sorting_asc:after,
.scr-table.dataTable thead .sorting_desc:before,
.scr-table.dataTable thead .sorting_desc:after { bottom: 6px; opacity: .35; }

.scr-table.dataTable tbody td {
    padding: 5px 8px;
    border-bottom: 1px solid var(--splitter);
    color: var(--text-main);
    vertical-align: middle;
}
.scr-table.dataTable tbody tr { background: transparent; cursor: pointer; }
.scr-table.dataTable tbody tr:nth-child(even) { background: rgba(238,242,246,.35); }
.scr-table.dataTable tbody tr:hover { background: var(--accent-ice); }

/* Baris emiten terpilih (sinkron TickerBus) */
.scr-table.dataTable tbody tr.scr-selected {
    background: var(--accent-ice);
    box-shadow: inset 2px 0 0 var(--accent);
}

/* Baris tanpa data bandarmologi — skor belum lengkap */
.scr-table.dataTable tbody tr.scr-insufficient { opacity: .55; }
.scr-table.dataTable tbody tr.scr-insufficient:hover { opacity: .9; }

/* Sel */
.scr-table .mono { font-family: var(--font-mono); }
.scr-table .num  { text-align: right; }
.scr-table .strong { font-weight: 700; }
.scr-table .dim, .scr-dim { color: var(--text-muted); }
.scr-table .up   { color: var(--green); }
.scr-table .down { color: var(--red); }

/* ── Badge — selaras Command Center (hijau akumulasi, merah distribusi) ── */
.scr-badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 8px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .5px;
    white-space: nowrap;
    vertical-align: 1px;
}
.scr-badge.b-up      { background: rgba(20,160,106,.12); color: var(--green); }
.scr-badge.b-down    { background: rgba(224,82,82,.12);  color: var(--red); }
.scr-badge.b-neutral { background: var(--bg-tab);        color: var(--text-dim); }
.scr-badge.b-warn    { background: rgba(232,161,60,.15); color: #b97a1d; }
/* Early accumulation — sinyal paling berharga, warna khusus ungu */
.scr-badge.b-early   { background: rgba(142,108,201,.15); color: #8e6cc9; }

/* ═══════════════ FUNDA SUB-TABS (Report / Keystat) ═══════════════ */
.funda-root { display: flex; flex-direction: column; height: 100%; }
.funda-subtabs {
    display: flex;
    gap: 2px;
    padding: 6px 8px 0;
    background: var(--bg-header);
    border-bottom: 1px solid var(--border);
    flex: 0 0 auto;
}
.funda-subtab {
    border: 1px solid transparent;
    border-bottom: none;
    background: transparent;
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 6px 6px 0 0;
    cursor: pointer;
}
.funda-subtab:hover { color: var(--text-main); background: var(--bg-tab); }
.funda-subtab.active {
    color: var(--accent-dark);
    background: var(--bg-main);
    border-color: var(--border);
    border-bottom: 1px solid var(--bg-main);
    margin-bottom: -1px;
}
.funda-pane { flex: 1 1 auto; }

/* ═══════════════ KEYSTAT ANALYSIS ═══════════════ */
.keystat-pane { padding: 0; }
.ks-wrap { padding: 10px 12px 24px; }

.ks-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.ks-head-left { display: flex; align-items: baseline; gap: 8px; }
.ks-tk {
    font-family: var(--font-mono);
    font-size: 14px; font-weight: 800; letter-spacing: 1px;
    color: var(--accent-dark);
    background: var(--accent-ice);
    padding: 2px 8px; border-radius: 4px;
}
.ks-mrq { font-size: 10px; color: var(--text-muted); }
.ks-head-right { display: flex; align-items: center; gap: 14px; }
.ks-stat { display: flex; flex-direction: column; align-items: flex-end; }
.ks-stat b { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--text-main); }
.ks-stat i { font-size: 8.5px; color: var(--text-muted); font-style: normal; }
.ks-src {
    font-size: 8px; font-weight: 700; text-transform: uppercase;
    padding: 1px 5px; border-radius: 3px; letter-spacing: .5px;
    background: var(--bg-tab); color: var(--text-muted);
}
.ks-src-api { background: rgba(20,160,106,.14); color: var(--green); }
.ks-src-cache-stale { background: rgba(224,82,82,.14); color: var(--red); }

.ks-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 12px;
}
.ks-card-title { font-size: 12px; font-weight: 700; color: var(--text-main); margin-bottom: 2px; }
.ks-card-sub { font-size: 10px; color: var(--text-dim); margin-bottom: 8px; }
.ks-sub2 { font-size: 10px; font-weight: 600; color: var(--text-dim); text-align: center; margin-bottom: 4px; }
.ks-chart-box { position: relative; height: 200px; }
.ks-na { font-size: 11px; color: var(--text-muted); text-align: center; padding: 24px 0; }

/* Badges (YoY, FCF) */
.ks-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ks-badge {
    font-size: 10px; color: var(--text-dim);
    background: var(--bg-tab); border-radius: 4px; padding: 3px 8px;
}
.ks-badge b { font-family: var(--font-mono); font-weight: 700; color: var(--text-main); }
.ks-badge.up b   { color: var(--green); }
.ks-badge.down b { color: var(--red); }

/* KPI cards (dividen) */
.ks-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.ks-kpi {
    display: flex; flex-direction: column; gap: 2px;
    background: var(--bg-main); border: 1px solid var(--border);
    border-radius: 6px; padding: 7px 9px;
}
.ks-kpi b { font-family: var(--font-mono); font-size: 13px; font-weight: 800; color: var(--accent-dark); }
.ks-kpi i { font-size: 8.5px; color: var(--text-muted); font-style: normal; }

/* Split: gauge + radar. Panel kanan Golden Layout sering sempit → default
   menumpuk vertikal agar radar dapat lebar penuh (label tak terpotong).
   Container query: saat PANEL (bukan viewport) ≥ 380px, tampil berdampingan. */
.keystat-pane { container-type: inline-size; }
.ks-split { display: grid; grid-template-columns: 1fr; gap: 6px; align-items: center; }
@container (min-width: 380px) {
    .ks-split { grid-template-columns: 40% 60%; }
}
.ks-gauge-box { text-align: center; }
.ks-radar-box { height: 210px; }
.ks-gauge { width: 100%; max-width: 180px; }
.ks-gauge-val { font-family: var(--font-mono); font-size: 30px; font-weight: 800; }
.ks-gauge-max { font-size: 15px; fill: var(--text-muted); }
.ks-gauge-lbl { font-size: 11px; font-weight: 700; fill: var(--text-dim); }

/* Bullet chart valuasi */
.ks-bullet-head { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-dim); margin-bottom: 6px; }
.ks-bullet-head b { font-family: var(--font-mono); font-size: 14px; color: var(--text-main); margin-left: 4px; }
.ks-bullet-verdict { font-weight: 700; }
.ks-bullet-track {
    position: relative; height: 22px;
    background: var(--bg-tab); border-radius: 5px; overflow: hidden;
}
.ks-bullet-fill { height: 100%; border-radius: 5px 0 0 5px; transition: width .3s; }
.ks-bullet-marker {
    position: absolute; top: -3px; width: 3px; height: 28px;
    background: var(--text-main); transform: translateX(-1px);
}
.ks-bullet-fwd {
    position: absolute; top: 4px; width: 0; height: 0;
    border-left: 5px solid transparent; border-right: 5px solid transparent;
    border-top: 7px solid var(--accent-dark); transform: translateX(-5px);
}
.ks-bullet-legend { display: flex; gap: 14px; margin-top: 6px; font-size: 9.5px; color: var(--text-muted); }
.ks-bullet-legend span { display: flex; align-items: center; gap: 4px; }
.ks-bullet-legend .dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.ks-bullet-legend .tick { width: 3px; height: 10px; background: var(--text-main); display: inline-block; }
.ks-bullet-legend .tri {
    width: 0; height: 0; border-left: 4px solid transparent;
    border-right: 4px solid transparent; border-top: 6px solid var(--accent-dark); display: inline-block;
}

/* Grid metrik profitabilitas */
.ks-metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.ks-metric {
    display: flex; flex-direction: column; gap: 2px;
    background: var(--bg-main); border: 1px solid var(--border);
    border-left: 3px solid var(--border); border-radius: 5px; padding: 6px 9px;
}
.ks-metric b { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--text-main); }
.ks-metric i { font-size: 8.5px; color: var(--text-muted); font-style: normal; }
.ks-metric.up   { border-left-color: var(--green); }
.ks-metric.down { border-left-color: var(--red); }

/* ═══════════════ REKOMENDASI COMPONENT (AI trade plan) ═══════════════ */
.reko-root { display: flex; flex-direction: column; height: 100%; background: var(--bg-main); }

.reko-toolbar {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px; flex: 0 0 auto;
    background: var(--bg-header);
    border-bottom: 1px solid var(--border);
}
.reko-generate {
    border: none; background: var(--accent); color: #fff;
    font-size: 11px; font-weight: 700; letter-spacing: .4px;
    padding: 5px 12px; border-radius: 4px; cursor: pointer;
    transition: background .15s;
}
.reko-generate:hover:not(:disabled) { background: var(--accent-dark); }
.reko-generate:disabled { opacity: .55; cursor: default; }
.reko-generate.busy { background: var(--text-dim); }

.reko-ticker-badge {
    font-family: var(--font-mono); font-size: 11px; font-weight: 800;
    letter-spacing: 1px; color: var(--accent-dark);
    background: var(--accent-ice); padding: 2px 8px; border-radius: 4px;
}
.reko-status { font-size: 10px; color: var(--text-dim); font-style: italic; }
.reko-meta   { font-size: 10px; color: var(--text-muted); margin-left: auto; font-family: var(--font-mono); }

.reko-body {
    flex: 1 1 auto; overflow-y: auto; overflow-x: hidden;
    padding: 14px 18px 28px;
}

/* Pesan status (kosong / loading / error) di tengah panel */
.reko-message {
    height: 100%; min-height: 220px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 8px; text-align: center; padding: 0 24px;
}
.reko-msg-icon  { font-size: 30px; opacity: .85; }
.reko-msg-title { font-size: 13px; font-weight: 700; color: var(--text-main); letter-spacing: .3px; }
.reko-msg-desc  { font-size: 11px; color: var(--text-dim); line-height: 1.6; max-width: 340px; }
.reko-msg-desc b { color: var(--accent-dark); }

/* Verdict — DeepSeek diminta menaruh baris verdict sebagai blockquote,
   dijadikan kartu aksen supaya menonjol di atas trade plan. */
.reko-md.funda-md blockquote {
    margin: 0 0 14px; padding: 9px 13px;
    background: var(--accent-ice);
    border-left: 4px solid var(--accent);
    border-radius: 0 5px 5px 0;
    font-size: 12.5px;
}
.reko-md.funda-md blockquote p { margin: 0; font-weight: 600; color: var(--accent-dark); }

/* Trade plan table: 3 kolom sempit → layout tetap + bungkus (JANGAN scroll
   horizontal seperti report), angka (kolom Level) monospace. */
.reko-md.funda-md table {
    display: table; table-layout: fixed; width: 100%; white-space: normal;
}
.reko-md.funda-md th, .reko-md.funda-md td { word-break: break-word; white-space: normal; }
.reko-md.funda-md td:nth-child(1) { width: 27%; }
.reko-md.funda-md td:nth-child(2) { width: 30%; font-family: var(--font-mono); font-weight: 700; }
.reko-md.funda-md td:nth-child(3) { width: 43%; font-size: 10px; color: var(--text-dim); }

/* ═══════════════════════════════════════════════════════════════
   AUTH — Tab 0 (login/register pages · header badge · limit modal)
   Konsisten tema: putih bersih + aksen biru es.
   ═══════════════════════════════════════════════════════════════ */

/* ── Halaman login/register (center-page, tanpa Golden Layout) ── */
body.auth-page {
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
    background:
        radial-gradient(1200px 600px at 50% -10%, var(--accent-ice) 0%, transparent 60%),
        var(--bg-main);
}
.auth-card {
    width: 100%;
    max-width: 400px;
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 32px 30px 26px;
    box-shadow: 0 10px 40px rgba(31, 111, 181, 0.10);
}
.auth-brand {
    display: flex;
    align-items: baseline;
    gap: 6px;
    justify-content: center;
    margin-bottom: 18px;
}
.auth-title {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .5px;
    color: var(--text-main);
    text-align: center;
}
.auth-lead {
    margin: 6px 0 22px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-dim);
    text-align: center;
}
.auth-lead b { color: var(--accent-dark); font-weight: 700; }

.auth-field { display: block; margin-bottom: 14px; }
.auth-field > span {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 6px;
}
.auth-field > input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-panel);
    color: var(--text-main);
    font-family: var(--font-ui);
    font-size: 14px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.auth-field > input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ice);
    background: var(--bg-main);
}

.auth-btn {
    width: 100%;
    margin-top: 6px;
    padding: 11px 16px;
    border: none;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: background .15s, transform .05s;
}
.auth-btn:hover:not(:disabled) { background: var(--accent-dark); }
.auth-btn:active:not(:disabled) { transform: translateY(1px); }
.auth-btn:disabled { opacity: .6; cursor: default; }

.auth-msg {
    display: none;
    margin: 4px 0 12px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 12.5px;
    line-height: 1.4;
}
.auth-msg.show { display: block; }
.auth-msg.err {
    background: #fdecec;
    color: #b03a3a;
    border: 1px solid #f4c9c9;
}
.auth-msg.ok {
    background: #e7f6ef;
    color: #147a52;
    border: 1px solid #bfe6d3;
}

.auth-alt {
    margin: 18px 0 0;
    text-align: center;
    font-size: 12.5px;
    color: var(--text-dim);
}
.auth-alt a { color: var(--accent-dark); font-weight: 700; text-decoration: none; }
.auth-alt a:hover { text-decoration: underline; }

/* ── Badge membership + Logout di header terminal ── */
.member-badge {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .6px;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
    cursor: default;
    user-select: none;
}
.member-badge.vip {
    color: #7a5300;
    background: linear-gradient(135deg, #fff4d6, #ffe7a8);
    border: 1px solid #e9c766;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
}
.member-badge.free {
    color: var(--text-dim);
    background: var(--bg-tab);
    border: 1px solid var(--border);
}
.member-badge.admin {
    color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    border: 1px solid var(--accent-dark);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}
.btn-logout {
    padding: 5px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-main);
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.btn-logout:hover {
    border-color: var(--red);
    color: var(--red);
    background: #fdf2f2;
}

/* ── Modal limit 3 emiten/hari ── */
.auth-modal-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(20, 34, 48, 0.35);
    backdrop-filter: blur(2px);
    z-index: 9999;
}
.auth-modal-overlay.show { display: flex; }
.auth-modal {
    width: 100%;
    max-width: 400px;
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 28px 26px 22px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(31, 111, 181, 0.22);
}
.auth-modal-icon { font-size: 32px; line-height: 1; }
.auth-modal-title {
    margin: 12px 0 8px;
    font-size: 17px;
    font-weight: 800;
    color: var(--text-main);
}
.auth-modal-msg {
    margin: 0 0 20px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-dim);
}
.auth-modal-close {
    padding: 9px 22px;
    border: none;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background .15s;
}
.auth-modal-close:hover { background: var(--accent-dark); }