/* ============================================================
   NSE Option Chain — Advanced UI (fixed sticky/scroll)
   ============================================================ */

* { box-sizing: border-box; }

html, body {
    overflow: hidden;
    height: 100%;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0f172a; }
::-webkit-scrollbar-thumb { background: #475569; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #64748b; }
::-webkit-scrollbar-corner { background: #0f172a; }

.number-format {
    font-family: 'JetBrains Mono', 'Segoe UI', monospace;
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   MAIN SCROLL CONTAINER
   ============================================================ */
#table-wrap {
    position: relative;
    overflow: auto;
    flex: 1 1 0;
    min-height: 0;
}

#chain-table {
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
    width: 100%;
    min-width: max-content;
}

/* ============================================================
   STICKY THEAD
   ============================================================ */
#chain-table thead tr:nth-child(1) th {
    position: sticky;
    top: 0;
    z-index: 27;
    background-color: #0f172a;
}

#chain-table thead tr:nth-child(2) th {
    position: sticky;
    top: 46px;
    z-index: 26;
    background-color: #0f172a;
    border-bottom: 1px solid #1e293b;
}

/* ============================================================
   STICKY STRIKE COLUMN (7th column)
   ============================================================ */
#chain-table thead th:nth-child(7),
#chain-table tbody td:nth-child(7) {
    position: sticky;
    left: 0;
    z-index: 15;
    background-color: #1e293b;
}

#chain-table thead th:nth-child(7) {
    z-index: 40 !important;
    background-color: #1f2937 !important;
    border-left: 1px solid #334155;
    border-right: 1px solid #334155;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.5);
}

#chain-table tbody td:nth-child(7) {
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.4);
    border-left: 1px solid #334155;
    border-right: 1px solid #334155;
}

/* ============================================================
   TABLE BODY
   ============================================================ */
#chain-table tbody tr {
    transition: background-color 0.15s ease;
}

#chain-table tbody tr:nth-child(even) {
    background: rgba(15, 23, 42, 0.5);
}

#chain-table tbody tr:hover {
    background: rgba(51, 65, 85, 0.5);
}

#chain-table tbody td {
    padding: 8px 6px;
    font-size: 13.5px;
    color: #e2e8f0;
    border-bottom: 1px solid rgba(30, 41, 59, 0.7);
    white-space: nowrap;
}

/* ============================================================
   ATM ROW
   ============================================================ */
#chain-table tbody tr.spot-row {
    background: linear-gradient(
        90deg,
        rgba(59, 130, 246, 0.20) 0%,
        rgba(59, 130, 246, 0.32) 50%,
        rgba(59, 130, 246, 0.20) 100%
    ) !important;
    box-shadow:
        inset 0 0 0 2px rgba(59, 130, 246, 0.75),
        inset 0 8px 24px rgba(59, 130, 246, 0.18),
        0 0 24px rgba(59, 130, 246, 0.35);
    position: relative;
}

#chain-table tbody tr.spot-row td {
    color: #ffffff !important;
    font-weight: 800 !important;
    text-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
    background: transparent;
}

#chain-table tbody tr.spot-row td:nth-child(7) {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
    color: #ffffff !important;
    box-shadow:
        2px 0 12px rgba(0, 0, 0, 0.5),
        0 0 24px rgba(59, 130, 246, 0.9) !important;
    z-index: 20 !important;
    position: sticky;
    left: 0;
}

#chain-table tbody tr.spot-row td:nth-child(7)::before {
    content: "★ ATM";
    position: absolute;
    top: 2px;
    right: 6px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.6px;
    color: #fbbf24;
    text-shadow: 0 0 6px #fbbf24;
}

#chain-table tbody tr.spot-row::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, transparent 0%, rgba(59, 130, 246, 0.22) 50%, transparent 100%);
    animation: atmSweep 3s ease-in-out infinite;
}

@keyframes atmSweep {
    0%   { transform: translateX(-100%); opacity: 0; }
    50%  { opacity: 1; }
    100% { transform: translateX(100%); opacity: 0; }
}

/* ============================================================
   SUPPORT / RESISTANCE
   ============================================================ */
#chain-table tbody tr.resistance-1 td:nth-child(-n+6) { background: rgba(239, 68, 68, 0.20) !important; }
#chain-table tbody tr.resistance-2 td:nth-child(-n+6) { background: rgba(239, 68, 68, 0.13) !important; }
#chain-table tbody tr.resistance-3 td:nth-child(-n+6) { background: rgba(239, 68, 68, 0.08) !important; }

#chain-table tbody tr.support-1 td:nth-child(n+8) { background: rgba(16, 185, 129, 0.20) !important; }
#chain-table tbody tr.support-2 td:nth-child(n+8) { background: rgba(16, 185, 129, 0.13) !important; }
#chain-table tbody tr.support-3 td:nth-child(n+8) { background: rgba(16, 185, 129, 0.08) !important; }

#chain-table tbody tr[class*="resistance"] td:nth-child(7)::after,
#chain-table tbody tr[class*="support"] td:nth-child(7)::after {
    position: absolute;
    top: 2px;
    left: 6px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 1px 4px;
    border-radius: 3px;
}
#chain-table tbody tr.resistance-1 td:nth-child(7)::after { content: "R1"; background: #dc2626; color: #fff; }
#chain-table tbody tr.resistance-2 td:nth-child(7)::after { content: "R2"; background: #b91c1c; color: #fff; }
#chain-table tbody tr.resistance-3 td:nth-child(7)::after { content: "R3"; background: #991b1b; color: #fff; }
#chain-table tbody tr.support-1 td:nth-child(7)::after { content: "S1"; background: #059669; color: #fff; }
#chain-table tbody tr.support-2 td:nth-child(7)::after { content: "S2"; background: #047857; color: #fff; }
#chain-table tbody tr.support-3 td:nth-child(7)::after { content: "S3"; background: #065f46; color: #fff; }

/* ============================================================
   ITM / OTM
   ============================================================ */
#chain-table tbody tr.itm-ce td:nth-child(-n+6) { background: rgba(239, 68, 68, 0.06); }
#chain-table tbody tr.itm-pe td:nth-child(n+8) { background: rgba(16, 185, 129, 0.06); }

/* ============================================================
   HIGHLIGHTS
   ============================================================ */
.ce-high-oi { background-color: #dc2626 !important; color: #fff !important; font-weight: 800 !important; }
.pe-high-oi { background-color: #059669 !important; color: #fff !important; font-weight: 800 !important; }
.ce-high-volume { background: #b91c1c !important; color: #fff !important; font-weight: 800 !important; }
.pe-high-volume { background: #047857 !important; color: #fff !important; font-weight: 800 !important; }
.ce-high-change { background: #ef4444 !important; color: #fff !important; font-weight: 800 !important; }
.pe-high-change { background: #10b981 !important; color: #fff !important; font-weight: 800 !important; }

.highlight-cell {
    position: relative;
    animation: highlightPulse 0.6s ease;
}
.highlight-cell::after {
    content: '';
    position: absolute;
    top: 3px;
    right: 3px;
    width: 6px;
    height: 6px;
    background: #fbbf24;
    border-radius: 50%;
    box-shadow: 0 0 7px #fbbf24;
}
@keyframes highlightPulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* ============================================================
   LIVE CELL FLASH
   ============================================================ */
.cell-flash-up { animation: cellFlashUp 0.6s ease; }
.cell-flash-down { animation: cellFlashDown 0.6s ease; }
@keyframes cellFlashUp {
    0%, 100% { background: transparent; }
    30% { background: rgba(52, 211, 153, 0.35); }
}
@keyframes cellFlashDown {
    0%, 100% { background: transparent; }
    30% { background: rgba(248, 113, 113, 0.35); }
}

/* ============================================================
   SPOT PRICE
   ============================================================ */
#spot-price {
    font-family: 'JetBrains Mono', monospace;
    font-size: 24px;
    font-weight: 800;
    color: #60a5fa;
    letter-spacing: 0.3px;
    text-shadow: 0 0 10px rgba(96, 165, 250, 0.35);
    transition: color 0.3s ease;
    line-height: 1;
}
#spot-price.spot-up { color: #34d399; text-shadow: 0 0 10px rgba(52, 211, 153, 0.55); }
#spot-price.spot-down { color: #f87171; text-shadow: 0 0 10px rgba(248, 113, 113, 0.55); }
#spot-price.spot-flash-up { animation: flashGreen 0.7s ease; }
#spot-price.spot-flash-down { animation: flashRed 0.7s ease; }

@keyframes flashGreen {
    0%, 100% { background: transparent; }
    30% { background: rgba(52, 211, 153, 0.35); border-radius: 4px; }
}
@keyframes flashRed {
    0%, 100% { background: transparent; }
    30% { background: rgba(248, 113, 113, 0.35); border-radius: 4px; }
}

#spot-change.spot-up { color: #34d399; }
#spot-change.spot-down { color: #f87171; }
#spot-arrow.spot-up { color: #34d399; }
#spot-arrow.spot-down { color: #f87171; }

/* ============================================================
   MODAL
   ============================================================ */
#disclaimer-modal.hidden { display: none !important; }
#disclaimer-modal:not(.hidden) { display: flex !important; }

.tab-btn {
    transition: all 0.2s ease;
    background: none;
    border: 0;
    cursor: pointer;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
}
.tab-btn.active {
    color: #34d399;
    border-bottom-color: #34d399;
}
.tab-pane { animation: fadeIn 0.3s ease; }
.tab-pane.hidden { display: none !important; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   MARKET STATUS
   ============================================================ */
#market-status.open   { color: #34d399; }
#market-status.closed { color: #f87171; }
#market-status.pre    { color: #fbbf24; }

/* ============================================================
   HEADER / FOOTER
   ============================================================ */
.app-topbar {
    position: relative;
    z-index: 50;
    flex-shrink: 0;
}

.app-footer {
    position: relative;
    z-index: 50;
}

/* ============================================================
   HOVER
   ============================================================ */
.data-cell {
    transition: background-color 0.15s ease;
}
.data-cell:hover {
    background: rgba(59, 130, 246, 0.08);
}