/* Sidebar watchlist + segment tabs.
   Colours follow the palette already used in indexStyle.css so the panel
   matches the rest of the page in both light and dark mode. */

/* ---------- brand logo ----------
   Drawn as an inline SVG mark + HTML text so it stays sharp at any size and
   can recolour itself for light / dark mode. */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    padding: 4px 2px;
}

.brand-mark {
    width: 42px;
    height: 42px;
    flex: none;
}

.bm-body {
    fill: currentColor;
}

.bm-wick {
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.bm-up {
    color: #16A34A;
}

.bm-down {
    color: #DC2626;
}

.dark-mode .bm-up {
    color: #00E676;
}

.dark-mode .bm-down {
    color: #FF4C4C;
}

.brand-name {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.015em;
    line-height: 1;
    white-space: nowrap;
}

.bn-a {
    color: #16743C;
}

.bn-r {
    color: #B02B26;
}

.dark-mode .bn-a {
    color: #34D67F;
}

.dark-mode .bn-r {
    color: #FF6B62;
}

@media (max-width: 700px) {
    .brand-name {
        display: none;
    }
}

/* ---------- ARK stat: 30% larger than the other values ---------- */
.atm-values .ark-value {
    font-size: 1.3em;
    font-weight: 800;
    line-height: 1;
}

/* `.atm-values .value` sets a fixed colour, so the up/down classes need to be
   more specific than that to win — used by ARK and DIFFERENCE. */
.atm-values .value.up {
    color: #16A34A;
}

.atm-values .value.down {
    color: #DC2626;
}

.dark-mode .atm-values .value.up {
    color: #00E676;
}

.dark-mode .atm-values .value.down {
    color: #FF4C4C;
}

/* ---------- header nav: segment group + page group ---------- */
.nav-groups {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    justify-content: center;
}

.seg-tabs,
.page-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
}

.seg-tab {
    font: 600 13px/1 inherit;
    letter-spacing: .04em;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid #c9ced6;
    background: transparent;
    color: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: background .2s, border-color .2s, color .2s;
}

.seg-tab:hover {
    border-color: #7d8a9a;
}

.seg-tab.active {
    background: #d9f2e2;
    border-color: #5b9a5d;
    color: #256b34;
}

.dark-mode .seg-tab {
    border-color: #3a3a3a;
}

.dark-mode .seg-tab:hover {
    border-color: #666;
}

.dark-mode .seg-tab.active {
    background: rgba(0, 230, 118, .14);
    border-color: #00E676;
    color: #00E676;
}

/* ---------- two-column body ---------- */
.app-body {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px;
}

.app-main {
    flex: 1 1 auto;
    min-width: 0;
}

#watchlistPanel {
    flex: 0 0 268px;
    width: 268px;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    position: sticky;
    top: 8px;
    border: 1px solid #dfe3e8;
    border-radius: 8px;
    background: #fff;
    transition: flex-basis .18s ease, width .18s ease;
}

.dark-mode #watchlistPanel {
    background: #0d0d0d;
    border-color: #2a2a2a;
}

/* collapsed: panel disappears, a "Watchlist" button takes its place on top */
.app-body.wl-collapsed #watchlistPanel {
    display: none;
}

#wlShowBtn {
    display: none;
    align-items: center;
    gap: 8px;
    font: 600 13px/1 inherit;
    padding: 10px 16px;
    margin-bottom: 10px;
    border-radius: 8px;
    border: 1px solid #dfe3e8;
    background: #fff;
    color: inherit;
    cursor: pointer;
}

.app-body.wl-collapsed #wlShowBtn {
    display: inline-flex;
}

#wlShowBtn:hover {
    border-color: #5b9a5d;
    color: #256b34;
}

.dark-mode #wlShowBtn {
    background: #0d0d0d;
    border-color: #2a2a2a;
}

.dark-mode #wlShowBtn:hover {
    border-color: #00E676;
    color: #00E676;
}

/* ---------- panel header ---------- */
.wl-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid #eceff3;
    position: sticky;
    top: 0;
    background: inherit;
    z-index: 1;
}

.dark-mode .wl-head {
    border-bottom-color: #232323;
}

.wl-title {
    font: 600 11px/1 inherit;
    letter-spacing: .12em;
    opacity: .55;
}

#wlCollapseBtn {
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 4px;
    opacity: .6;
}

#wlCollapseBtn:hover {
    opacity: 1;
    background: rgba(127, 127, 127, .15);
}

/* The old two-table layout styles #tableSection as a wrapping flex row
   (.table-container-data). Inside the sidebar we want a plain vertical list. */
#watchlistPanel .table-container-data,
#watchlistPanel .table-container-data > div {
    display: block;
    flex: none;
    margin: 0;
    padding: 0;
    gap: 0;
}

/* ---------- cards ---------- */
.wl-card {
    padding: 9px 12px;
    border-bottom: 1px solid #f1f3f6;
    cursor: pointer;
    transition: background .15s;
}

.dark-mode .wl-card {
    border-bottom-color: #1d1d1d;
}

.wl-card:last-child {
    border-bottom: none;
}

.wl-card:hover {
    background: #f6f8fa;
}

.dark-mode .wl-card:hover {
    background: #161616;
}

.wl-card.selected {
    background: #eef7f1;
    box-shadow: inset 3px 0 0 #5b9a5d;
}

.dark-mode .wl-card.selected {
    background: rgba(0, 230, 118, .08);
    box-shadow: inset 3px 0 0 #00E676;
}

.wl-line {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.wl-line + .wl-line {
    margin-top: 3px;
}

.wl-line-top .index-name {
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .02em;
}

.wl-line-top .changeper {
    margin-left: auto;
    font-size: 12px;
    font-weight: 600;
}

.wl-card .stock-value {
    font-size: 13px;
    font-weight: 600;
}

.wl-card .change {
    font-size: 11px;
}

.wl-dte {
    margin-left: auto;
    font-size: 11px;
    opacity: .6;
    white-space: nowrap;
}

.wl-line-atm {
    font-size: 11px;
    opacity: .85;
}

.wl-tag {
    font-size: 9px;
    letter-spacing: .1em;
    opacity: .5;
}

.wl-card .small {
    font-size: 11px;
}

.wl-card .atm {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
}

.wl-atmpct {
    font-size: 10px;
    opacity: .55;
    min-width: 34px;
    text-align: right;
}

/* ---------- narrow screens: panel goes on top, scrolls sideways ---------- */
@media (max-width: 900px) {
    .app-body {
        flex-direction: column;
    }

    #watchlistPanel {
        flex: 1 1 auto;
        width: 100%;
        position: static;
        max-height: 230px;
    }

    .app-body.wl-collapsed #wlShowBtn {
        align-self: flex-start;
    }
}


/* ===== OI/Volume rank highlight (aoccalculator jaisa) =====
   r1 = sabse bada (100%) laal, r2 = doosra amber, r3 = teesra halka peela.
   .oi-cell ka background SOLID hai taaki ATM wali peeli patti (tr par
   lagti hai) in 6 columns ke neeche se na jhalke - wahan ranking ke
   rang ya saada background hi dikhe. */
.oi-cell { font-size: 0.85em; white-space: nowrap; }
.dark-mode .table td.oi-cell { background: #1F1F1F; color: #ddd; }
body:not(.dark-mode) .table td.oi-cell { background: #ffffff; color: #222; }
.dark-mode td.oi-cell.oi-r1 { background: #FF3B30 !important; color: #fff !important; }
/* 2nd number = SKYBLUE, 3rd number = PLATINUM - dono side (call/put) same.
   Sirf 100% wala laal (call) / hara (put) hota hai. */
.dark-mode td.oi-cell.oi-r2 { background: #87CEEB !important; color: #000 !important; }
.dark-mode td.oi-cell.oi-r3 { background: #E5E4E2 !important; color: #000 !important; }
body:not(.dark-mode) td.oi-cell.oi-r1 { background: #FF3B30 !important; color: #fff !important; }
body:not(.dark-mode) td.oi-cell.oi-r2 { background: #87CEEB !important; color: #000 !important; }
body:not(.dark-mode) td.oi-cell.oi-r3 { background: #C0BFBD !important; color: #000 !important; }

/* 100% wala cell: CALL side chamakdar LAAL, PUT side chamakdar HARA -
   ye special rang sirf sabse bade number ke hain, door se dikhne chahiye */
.dark-mode td.oi-cell.oi-r1.peOi,
.dark-mode td.oi-cell.oi-r1.peOiC,
.dark-mode td.oi-cell.oi-r1.peV { background: #00E676 !important; color: #fff !important; }
body:not(.dark-mode) td.oi-cell.oi-r1.peOi,
body:not(.dark-mode) td.oi-cell.oi-r1.peOiC,
body:not(.dark-mode) td.oi-cell.oi-r1.peV { background: #00C853 !important; color: #fff !important; }

/* top-3 cells mein value ke upar chhota % */
.oi-pct { display: block; font-size: 0.8em; font-weight: bold; opacity: 0.95; line-height: 1.1; }


/* ===== 0.20 ke sabse kareeb wali strike (har side ek) =====
   MAGENTA box, safed likhai - dono mode mein
   (delta, us side ka bhaav, aur strike - teeno cells par) */
.dlt-low { background: #FF00FF !important; color: #FFFFFF !important; font-weight: bold; }


/* ===== Support & Resistance toggle (dropdown-patti mein) ===== */
.sr-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #c9ced6;
    background: transparent;
    font: 600 13px/1 inherit;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}
.dark-mode .sr-toggle { border-color: #3a3a3a; background: #1c1c1c; color: #ddd; }
.sr-toggle input { accent-color: #00E676; cursor: pointer; }


/* ===== Strike column ke dono taraf khadi lakeer =====
   taaki beech wala strike-khamba door se alag dikhe */
.table td.strike,
.table th:nth-child(6) {
    border-left: 1px solid #7a7a7a !important;
    border-right: 1px solid #7a7a7a !important;
}
.dark-mode .table td.strike,
.dark-mode .table th:nth-child(6) {
    border-left-color: #8a8a8a !important;
    border-right-color: #8a8a8a !important;
}


/* call-delta se pehle aur put-delta ke baad bhi khadi lakeer -
   OI wala hissa aur bhaav wala hissa alag-alag khaano mein dikhe */
.table td.dce,
.table th:nth-child(4) {
    border-left: 1px solid #7a7a7a !important;
}
.table td.dpe,
.table th:nth-child(8) {
    border-right: 1px solid #7a7a7a !important;
}
.dark-mode .table td.dce,
.dark-mode .table th:nth-child(4) {
    border-left-color: #8a8a8a !important;
}
.dark-mode .table td.dpe,
.dark-mode .table th:nth-child(8) {
    border-right-color: #8a8a8a !important;
}


/* Straddle (aakhri column) se pehle bhi khadi lakeer */
.table td.sp,
.table th:nth-child(12) {
    border-left: 1px solid #7a7a7a !important;
}
.dark-mode .table td.sp,
.dark-mode .table th:nth-child(12) {
    border-left-color: #8a8a8a !important;
}


/* ===== LIVE viewers pill (header) ===== */
.live-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid #c9ced6;
    font: 700 13px/1 inherit;
    letter-spacing: .03em;
    white-space: nowrap;
}
.dark-mode .live-pill { border-color: #3a3a3a; background: #1c1c1c; color: #eee; }
.live-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: #00C853;
    animation: livePulse 1.6s ease-in-out infinite;
}
.dark-mode .live-dot { background: #00E676; }
@keyframes livePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 200, 83, .55); }
    60% { box-shadow: 0 0 0 7px rgba(0, 200, 83, 0); }
}


/* ===== Full-screen chart button ===== */
.fs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border-radius: 8px;
    border: 1px solid #c9ced6;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 15px;
}
.dark-mode .fs-btn { border-color: #3a3a3a; background: #1c1c1c; color: #eee; }
.fs-btn:hover { border-color: #5b9a5d; color: #256b34; }
.dark-mode .fs-btn:hover { border-color: #00E676; color: #00E676; }

/* Full-screen mein: ui-container poora page bhare, chart bada ho */
.ui-container:fullscreen {
    background: #fff;
    padding: 14px;
    overflow: auto;
}
.dark-mode .ui-container:fullscreen,
.ui-container:fullscreen.dark {
    background: #121212;
}
/* chart aur table dono upar se shuru hon - JS oonchai barabar karta hai */
.ui-container:fullscreen .table-container { flex-direction: row; align-items: flex-start; }
.ui-container:fullscreen .table { align-self: flex-start !important; }
@media (max-width: 1100px) {
    .ui-container:fullscreen .table-container { flex-direction: column; }
}


/* ===== 0.10 ke sabse kareeb wali strike =====
   Safed aur chamakdar - 0.20 wale magenta se aur alag dikhe.
   (0.20 se door hai, isliye seller ke liye aur mehfooz strike) */
.dlt-low10 {
    background: #FFFFFF !important;
    color: #000000 !important;
    font-weight: 800;
    box-shadow: inset 0 0 0 1px #9aa0a6;
}


/* ===== Dropdown ka teer =====
   Pehle CSS mein "\25BC" wala text-glyph tha - wo har font/OS par alag
   naapa jata hai aur theek se beech mein nahi baithta. Ab SVG chevron,
   jo har jagah ek jaisa aur saaf dikhta hai. */
.dropdown::after { display: none !important; }

.dropdown select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.75 6 6.25 10.5 1.75' fill='none' stroke='%23555' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 11px 8px;
    padding-right: 32px !important;
}
.dark-mode .dropdown select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.75 6 6.25 10.5 1.75' fill='none' stroke='%23bbb' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ===========================================================
   Synthetic Future ki patti (option chain ke andar)
   Bhaav jis do strikes ke beech hai, wahin ye line baithti hai.

   Rang: wahi jo chart mein Synthetic Future line ka hai
   (common.js -> synFutColor). 4 Aug 2026 se SynFut = SAFED (dark) /
   KAALI (light) - Spot ke saath rang aapas mein badle gaye, Spot ab
   cyan hai. Patti SynFut ke saath chalti hai, isliye yahan bhi wahi.
   ⚠ Rang badalna ho to common.js ke SYNFUT_DARK/SYNFUT_LIGHT bhi
   saath badalna - warna line aur patti alag ho jayengi.
   =========================================================== */
tr.sf-marker { height: 0; }
tr.sf-marker td {
    padding: 0 !important;
    border: 0 !important;
    border-top: 2px solid #000000 !important;
    height: 0;
    line-height: 0;
    position: relative;
    background: transparent !important;
}
.dark-mode tr.sf-marker td { border-top-color: #FFFFFF !important; }

/* patti khud row ki oonchai nahi ghereti - lakeer par baithi rehti hai,
   isliye table ki lambai waisi ki waisi rehti hai */
tr.sf-marker td.sf-cell { overflow: visible; }
tr.sf-marker .sf-pill {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
    background: #000000;
    color: #FFFFFF;
    font: 800 11px/1 'Segoe UI', Arial, sans-serif;
    letter-spacing: .2px;
    padding: 3px 9px;
    border-radius: 3px;
    white-space: nowrap;
    z-index: 3;
    pointer-events: none;
    box-shadow: 0 0 0 1px rgba(255,255,255,.35), 0 0 8px rgba(0,0,0,.45);
}
.dark-mode tr.sf-marker .sf-pill {
    background: #FFFFFF;
    color: #111111;
    box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 0 10px rgba(255,255,255,.85);
}