/* ========================================================================== 🚀 QUANT TERMINAL PRO - HIGH-END INSTITUTIONAL STYLING OVERRIDES ========================================================================== */ :root, html[data-theme="light"], body[data-theme="light"] { --bg-base: #f1f5f9; --bg-card: #ffffff; --bg-card-hover: #f8fafc; --bg-subtle: #f8fafc; --border-subtle: #e2e8f0; --border-default: #cbd5e1; --border-hover: #94a3b8; --border-focus: #2563eb; --text-primary: #0f172a; --text-secondary: #1e293b; --text-muted: #475569; --primary: #2563eb; --primary-gradient: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); --primary-glow: rgba(37, 99, 235, 0.2); --green: #16a34a; --green-bg: #f0fdf4; --green-border: #bbf7d0; --red: #dc2626; --red-bg: #fef2f2; --red-border: #fecaca; --amber: #d97706; --cyan: #0284c7; --purple: #7c3aed; --table-th-bg: #e2e8f0; --table-th-text: #0f172a; --table-tr-even: #f8fafc; --table-tr-odd: #ffffff; --table-tr-hover: #e0f2fe; --table-border: #e2e8f0; --table-text: #0f172a; --poi-net-row-bg: rgba(37, 99, 235, 0.05); --poi-net-sticky-bg: #f0f7ff; --poi-net-label: #1d4ed8; --input-bg: #ffffff; --input-border: #cbd5e1; --input-text: #0f172a; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05); --shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -1px rgba(15, 23, 42, 0.04); --shadow-lg: 0 10px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.04); } html[data-theme="dark"], body[data-theme="dark"] { --bg-base: #060a14; --bg-card: #0b1325; --bg-card-hover: #111c36; --bg-subtle: #0d172e; --border-subtle: #15223c; --border-default: #1e2f52; --border-hover: #2b4170; --border-focus: #3b82f6; --text-primary: #f8fafc; --text-secondary: #e2e8f0; --text-muted: #94a3b8; --primary: #3b82f6; --primary-gradient: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); --primary-glow: rgba(59, 130, 246, 0.35); --green: #10b981; --green-bg: rgba(16, 185, 129, 0.15); --green-border: rgba(16, 185, 129, 0.35); --red: #ef4444; --red-bg: rgba(239, 68, 68, 0.15); --red-border: rgba(239, 68, 68, 0.35); --amber: #f59e0b; --cyan: #38bdf8; --purple: #c084fc; --table-th-bg: #0f1b34; --table-th-text: #f8fafc; --table-tr-even: #0c1427; --table-tr-odd: #070d1a; --table-tr-hover: #162444; --table-border: #1a2948; --table-text: #f8fafc; --poi-net-row-bg: rgba(56, 189, 248, 0.08); --poi-net-sticky-bg: #0d1a33; --poi-net-label: #38bdf8; --input-bg: #070d1a; --input-border: #1e2f52; --input-text: #f8fafc; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.6); --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.7); --shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.85); } .fii-dii-period-btn, .fii-dii-view-btn { background: transparent; color: #94a3b8; border: none; padding: 6px 12px; font-size: 11px; font-weight: 700; font-family: 'JetBrains Mono', monospace; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; } .fii-dii-period-btn:hover, .fii-dii-view-btn:hover { color: #f8fafc; background: rgba(255, 255, 255, 0.05); } .fii-dii-period-btn.active, .fii-dii-view-btn.active { background: #2563eb; color: #ffffff; box-shadow: 0 2px 4px rgba(37, 99, 235, 0.3); } .fii-dii-subtab-btn { background: var(--bg-card); color: var(--text-muted); border: 1px solid var(--border-default); padding: 8px 18px; font-size: 12.5px; font-weight: 700; border-radius: var(--radius-sm); cursor: pointer; transition: all 0.2s ease; } .fii-dii-subtab-btn:hover { background: var(--bg-card-hover); color: var(--text-primary); border-color: var(--border-hover); } .fii-dii-subtab-btn.active { background: var(--primary) !important; color: #ffffff !important; border-color: var(--primary) !important; box-shadow: 0 2px 8px var(--primary-glow); } /* ========================================================================== ⚡ ULTRA-MODERN QUANT TERMINAL TICKER & THEME UPGRADES ========================================================================== */ .market-ticker-tape { background: var(--bg-card); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); backdrop-filter: blur(12px); padding: 8px 16px; margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; } .market-ticker-tape::-webkit-scrollbar { display: none; } .ticker-wrapper { display: flex; align-items: center; gap: 12px; white-space: nowrap; } .ticker-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--bg-card-hover); border: 1px solid var(--border-default); padding: 6px 14px; border-radius: 20px; font-size: 11px; font-family: 'JetBrains Mono', monospace; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); user-select: none; } .ticker-chip.clickable { cursor: pointer; } .ticker-chip.clickable:hover { background: var(--bg-card); border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3); } .ticker-chip.clickable:active { transform: translateY(0); } .ticker-dot { width: 7px; height: 7px; border-radius: 50%; background: #64748b; box-shadow: 0 0 6px rgba(100, 116, 139, 0.5); } .ticker-dot.green { background: #10b981; box-shadow: 0 0 8px rgba(16, 185, 129, 0.8); } .ticker-dot.red { background: #ef4444; box-shadow: 0 0 8px rgba(239, 68, 68, 0.8); } .ticker-label { color: var(--text-muted); font-weight: 700; letter-spacing: 0.5px; } .ticker-val { font-weight: 800; color: var(--text-primary); } .ticker-val.positive { color: #10b981; } .ticker-val.negative { color: #ef4444; } .ticker-val.neutral { color: #f59e0b; } .ticker-change { font-size: 10px; padding: 2px 6px; border-radius: 4px; font-weight: 700; } .ticker-change.positive { background: rgba(16, 185, 129, 0.15); color: #10b981; } .ticker-change.negative { background: rgba(239, 68, 68, 0.15); color: #ef4444; } .ticker-sub { color: #64748b; font-size: 10px; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; font-variant-numeric: tabular-nums !important; background-color: var(--bg-base) !important; color: var(--text-primary) !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; } /* Custom Ultra-Sleek Scrollbars */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: #f1f5f9; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* ======================================================================== 🌑 DARK TERMINAL TOPBAR — OVERRIDES ALL PREVIOUS DEFINITIONS ======================================================================== */ .topbar { background: linear-gradient(135deg, #0a0f1e 0%, #0d1529 50%, #0a1628 100%) !important; border: none !important; border-bottom: 1px solid rgba(37, 99, 235, 0.35) !important; border-radius: 0 !important; box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 8px 32px rgba(0,0,0,0.5) !important; padding: 10px 20px !important; backdrop-filter: none !important; margin-bottom: 14px !important; } .brand-icon { width: 38px !important; height: 38px !important; background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%) !important; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.5), 0 0 20px rgba(37, 99, 235, 0.2) !important; border-radius: 9px !important; font-size: 18px !important; } .brand-wrapper h1 { font-size: 16px !important; font-weight: 800 !important; letter-spacing: 0.1px !important; color: #ffffff !important; } .eyebrow { color: #3b82f6 !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.6px !important; } .eyebrow::before { content: '• '; animation: eyebrowPulse 2s ease-in-out infinite; display: inline; } @keyframes eyebrowPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } /* Tab Nav — float on dark background, no pill */ .tab-nav { background: transparent !important; border: none !important; border-radius: 0 !important; padding: 0 !important; gap: 2px !important; box-shadow: none !important; } .tab-btn { background: transparent !important; color: rgba(255,255,255,0.55) !important; border: none !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; padding: 8px 14px !important; font-size: 12.5px !important; font-weight: 600 !important; transition: all 0.18s ease !important; transform: none !important; box-shadow: none !important; } .tab-btn:hover { color: #ffffff !important; background: rgba(255,255,255,0.06) !important; border-bottom-color: rgba(59,130,246,0.4) !important; } .tab-btn.active { color: #ffffff !important; background: rgba(59,130,246,0.1) !important; font-weight: 700 !important; border-bottom: 2px solid #3b82f6 !important; box-shadow: none !important; text-shadow: 0 0 12px rgba(59,130,246,0.5) !important; transform: none !important; } /* ---- Light theme overrides for hardcoded dark elements ---- */ [data-theme="light"] .topbar { background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 50%, #1e3a8a 100%) !important; } [data-theme="light"] .brand-wrapper h1 { color: #ffffff !important; } [data-theme="light"] .tab-btn { color: rgba(255,255,255,0.80) !important; } [data-theme="light"] .tab-btn:hover { color: #ffffff !important; background: rgba(255,255,255,0.15) !important; } [data-theme="light"] .tab-btn.active { color: #ffffff !important; background: rgba(255,255,255,0.2) !important; border-bottom-color: #ffffff !important; text-shadow: none !important; } [data-theme="light"] .control-band { background: var(--bg-card) !important; border-color: var(--border-subtle) !important; color: var(--text-primary) !important; } [data-theme="light"] .control-band label, [data-theme="light"] .control-band span { color: var(--text-secondary) !important; } [data-theme="light"] canvas:not(.tv-lightweight-charts canvas):not(#lw_chart_container canvas) { background: #f8fafc !important; } /* Cards Elevation & Premium Borders */ .card, .sm-card, .stat-hero-card, .metric-card, .opt-metric-item { background: var(--bg-card) !important; border: 1px solid var(--border-default) !important; border-radius: 12px !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 6px 16px -4px rgba(15, 23, 42, 0.04) !important; transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; } .card:hover, .sm-card:hover, .stat-hero-card:hover { transform: translateY(-2px) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 12px 24px -4px rgba(15, 23, 42, 0.07) !important; } /* Metric Cards Top Accent */ .metric-card, .opt-metric-item { border-top: 3px solid #3b82f6 !important; } /* High-Contrast Table Styling */ .wpcr-data-table, .opt-table, .sm-table, .deliv-table, .mtf-table, table { border-collapse: separate !important; border-spacing: 0 !important; width: 100% !important; color: var(--table-text) !important; } .wpcr-data-table thead th, .opt-table thead th, .sm-table thead th, .deliv-table thead th, table thead th { background: var(--table-th-bg) !important; color: var(--table-th-text) !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.4px !important; padding: 10px 14px !important; border-bottom: 2px solid var(--border-default) !important; position: sticky !important; top: 0 !important; z-index: 10 !important; } .wpcr-data-table tbody tr, .opt-table tbody tr, .sm-table tbody tr, table tbody tr { transition: background 0.12s ease !important; background-color: var(--table-tr-odd) !important; color: var(--table-text) !important; } .wpcr-data-table tbody tr:nth-child(even), .opt-table tbody tr:nth-child(even), .sm-table tbody tr:nth-child(even), table tbody tr:nth-child(even) { background-color: var(--table-tr-even) !important; } .wpcr-data-table tbody tr:hover, .opt-table tbody tr:hover, .sm-table tbody tr:hover, table tbody tr:hover { background-color: var(--table-tr-hover) !important; } .wpcr-data-table td, .opt-table td, .sm-table td, table td { padding: 9px 14px !important; font-size: 12.5px !important; border-bottom: 1px solid var(--table-border) !important; color: var(--table-text) !important; } .wpcr-data-table td.text-right, .sm-table td.text-right, table td.text-right { font-family: 'JetBrains Mono', monospace !important; font-weight: 600 !important; } /* Control Bands & Buttons */ .control-band, .controls, .options-control-band, .sm-controls { background: var(--bg-card) !important; border: 1px solid var(--border-default) !important; border-radius: 12px !important; box-shadow: var(--shadow-sm) !important; padding: 12px 18px !important; color: var(--text-primary) !important; } button.primary, button.primary-btn, #runBtn, #optRefreshButton, #delivRefreshBtn, #mtfRefreshBtn { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important; color: #ffffff !important; border: 1px solid #1d4ed8 !important; border-radius: 8px !important; font-weight: 700 !important; box-shadow: 0 3px 10px rgba(37, 99, 235, 0.25) !important; transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important; } button.primary:hover, button.primary-btn:hover, #runBtn:hover, #optRefreshButton:hover, #delivRefreshBtn:hover, #mtfRefreshBtn:hover { background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%) !important; box-shadow: 0 5px 15px rgba(37, 99, 235, 0.35) !important; transform: translateY(-1px) !important; } button.primary:active, button.primary-btn:active, #runBtn:active { transform: translateY(1px) !important; box-shadow: 0 2px 6px rgba(37, 99, 235, 0.2) !important; } select, input[type="text"], input[type="date"], input[type="number"], input[type="password"], textarea { border-radius: 7px !important; border: 1px solid var(--input-border) !important; padding: 6px 12px !important; font-size: 12px !important; background: var(--input-bg) !important; color: var(--input-text) !important; transition: all 0.15s ease !important; } select:focus, input:focus, textarea:focus { border-color: var(--border-focus) !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important; } /* Crisp Action Pills & Badges */ .action-pill, .badge-tag, .score-pill, .deliv-sig-pill { font-weight: 700 !important; letter-spacing: 0.3px !important; border-radius: 6px !important; padding: 3px 9px !important; } .action-accum, .badge-bullish { background: #dcfce7 !important; color: #15803d !important; border: 1px solid #86efac !important; } .action-dist, .badge-bearish { background: #fee2e2 !important; color: #b91c1c !important; border: 1px solid #fca5a5 !important; } /* ========================================================================== TradersDesk & Advanced Options Desk - Professional Crisp White / Light Theme ========================================================================== */ :root, html[data-theme="light"], body[data-theme="light"] { color-scheme: light; --bg-base: #f1f5f9; --bg-card: #ffffff; --bg-card-hover: #f8fafc; --bg-input: #ffffff; --bg-input-focus: #ffffff; --border-subtle: #e2e8f0; --border-default: #cbd5e1; --border-hover: #94a3b8; --border-focus: #2563eb; --text-primary: #0f172a; --text-secondary: #1e293b; --text-muted: #475569; --primary: #2563eb; --primary-glow: rgba(37, 99, 235, 0.15); --green: #16a34a; --green-bg: #f0fdf4; --green-border: #bbf7d0; --red: #dc2626; --red-bg: #fef2f2; --red-border: #fecaca; --amber: #d97706; --cyan: #0284c7; --purple: #7c3aed; --radius-sm: 5px; --radius-md: 8px; --radius-lg: 12px; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -1px rgba(0, 0, 0, 0.04); } html[data-theme="dark"], body[data-theme="dark"] { color-scheme: dark; --bg-base: #070c18; --bg-card: #0c1427; --bg-card-hover: #131f3b; --bg-input: #060b17; --bg-input-focus: #060b17; --border-subtle: #142038; --border-default: #1e2d4d; --border-hover: #2e4370; --border-focus: #3b82f6; --text-primary: #f8fafc; --text-secondary: #e2e8f0; --text-muted: #94a3b8; --primary: #3b82f6; --primary-glow: rgba(59, 130, 246, 0.35); --green: #10b981; --green-bg: rgba(16, 185, 129, 0.15); --green-border: rgba(16, 185, 129, 0.35); --red: #ef4444; --red-bg: rgba(239, 68, 68, 0.15); --red-border: rgba(239, 68, 68, 0.35); --amber: #f59e0b; --cyan: #38bdf8; --purple: #c084fc; --radius-sm: 5px; --radius-md: 8px; --radius-lg: 12px; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.6); } * { box-sizing: border-box; margin: 0; padding: 0; } body { background-color: var(--bg-base); color: var(--text-primary); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing: antialiased; line-height: 1.4; font-size: 13px; } button, input, select, textarea { font: inherit; color: inherit; } .app { width: min(1680px, calc(100vw - 24px)); margin: 0 auto; padding: 12px 0 36px; } /* ========================================================================== Top Header & Navigation (Unified Clean Bar) ========================================================================== */ .topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 18px; background: linear-gradient(135deg, #0a0f1e 0%, #0d1529 50%, #0a1628 100%); border: none; border-bottom: 1px solid rgba(37, 99, 235, 0.3); border-radius: var(--radius-md); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 32px rgba(0, 0, 0, 0.4); margin-bottom: 12px; } .brand-wrapper { display: flex; align-items: center; gap: 10px; } .brand-icon { width: 38px; height: 38px; border-radius: var(--radius-sm); background: linear-gradient(135deg, #2563eb, #1d4ed8); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.5), 0 0 20px rgba(37, 99, 235, 0.2); flex-shrink: 0; } .brand-wrapper h1 { font-size: 16px; font-weight: 800; letter-spacing: 0.1px; color: #ffffff; line-height: 1.1; } .eyebrow { font-size: 10px; color: #3b82f6; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .eyebrow::before { content: '• '; animation: eyebrowPulse 2s ease-in-out infinite; } @keyframes eyebrowPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } /* Tab Navigation */ .tab-nav { display: flex; background: transparent; border: none; border-radius: 0; padding: 0; gap: 2px; } .tab-btn { background: transparent; color: rgba(255, 255, 255, 0.6); border: none; border-bottom: 2px solid transparent; border-radius: 6px 6px 0 0; padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.15s ease; display: inline-flex; align-items: center; gap: 6px; } .tab-btn:hover { color: #ffffff; background: rgba(255, 255, 255, 0.06); } .tab-btn.active { background: transparent; color: #ffffff; font-weight: 700; border-bottom: 2px solid #3b82f6; text-shadow: 0 0 12px rgba(59, 130, 246, 0.4); box-shadow: none; } .topbar-right-group { display: flex !important; align-items: center !important; gap: 10px !important; flex-shrink: 0 !important; z-index: 100 !important; } .pro-tier-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 20px; background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(217, 119, 6, 0.08) 100%); border: 1px solid rgba(245, 158, 11, 0.35); box-shadow: 0 0 12px rgba(245, 158, 11, 0.12); font-family: 'JetBrains Mono', monospace; cursor: default; transition: all 0.2s ease; user-select: none; } .pro-tier-pill:hover { box-shadow: 0 0 16px rgba(245, 158, 11, 0.25); border-color: rgba(245, 158, 11, 0.55); } .pro-badge-icon { font-size: 13px; filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.5)); } .pro-badge-title { font-size: 10.5px; font-weight: 800; letter-spacing: 0.8px; background: linear-gradient(90deg, #fde68a, #f59e0b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-transform: uppercase; } .pro-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #10b981; box-shadow: 0 0 8px #10b981; animation: proPulse 1.8s ease-in-out infinite; } @keyframes proPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.8); } } .status { font-size: 11px; font-weight: 600; color: #94a3b8; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); padding: 4px 10px; border-radius: var(--radius-sm); font-family: 'JetBrains Mono', monospace; display: inline-flex; align-items: center; gap: 6px; } .status.connected::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 6px rgba(34, 197, 94, 0.7); animation: statusPulse 1.8s ease-in-out infinite; flex-shrink: 0; } .status.error::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 6px rgba(239, 68, 68, 0.7); flex-shrink: 0; } @keyframes statusPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.85); } } /* Tab Panels */ .tab-panel { display: none; } .tab-panel.active { display: block; animation: fadeIn 0.15s ease; } @keyframes fadeIn { from { opacity: 0.8; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================================== Control Bands & Forms ========================================================================== */ .control-band, .options-control-band { background: linear-gradient(135deg, rgba(13, 17, 28, 0.95) 0%, rgba(20, 27, 45, 0.95) 100%); border: 1px solid rgba(56, 189, 248, 0.15); border-radius: var(--radius-md); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); padding: 10px 16px; margin-bottom: 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; } .ctrl-group { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .ctrl-group label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-secondary); } .ctrl-group label span { white-space: nowrap; } .expiry-label-box { background: #eff6ff; border: 1px solid #bfdbfe; padding: 3px 8px; border-radius: var(--radius-sm); color: #1e40af !important; } select, input[type="date"], input[type="text"], input[type="number"], input[type="password"] { background: var(--bg-input); color: var(--text-primary); border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: 5px 9px; font-size: 12px; font-weight: 500; outline: none; transition: all 0.15s ease; } select:focus, input:focus { border-color: var(--border-focus); box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15); } .expiry-select-highlight { font-weight: 700 !important; color: #38bdf8 !important; background: var(--bg-card) !important; border-color: #3b82f6 !important; } .check-label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; user-select: none; } .check-label input[type="checkbox"] { accent-color: var(--primary); cursor: pointer; } button { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: 6px 14px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s ease; } button:hover { background: #f8fafc; border-color: var(--border-hover); } button.primary-btn, #runBtn, #optRefreshButton { background: var(--primary); color: #ffffff; border-color: var(--primary); font-weight: 700; } button.primary-btn:hover, #runBtn:hover, #optRefreshButton:hover { background: #1d4ed8; border-color: #1d4ed8; } button:disabled { opacity: 0.6; cursor: not-allowed; } /* ========================================================================== KPI Summary Strips (Market Breadth & Options Desk) ========================================================================== */ .summary-ribbon, .options-summary-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-bottom: 12px; } .metric-card, .opt-metric-item { background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; } .metric-card span, .opt-metric-item span { font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; } .metric-card strong, .opt-metric-item strong { font-size: 15px; font-weight: 800; font-family: 'JetBrains Mono', monospace; color: var(--text-primary); } .support-item strong { color: var(--green) !important; } .resistance-item strong { color: var(--red) !important; } /* Top OI Chips Strip */ .top-oi-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 8px 14px; margin-bottom: 12px; } .top-oi-group { display: flex; align-items: center; gap: 8px; } .top-oi-label { font-size: 11px; font-weight: 700; color: var(--text-secondary); } .top-oi-chips { display: flex; gap: 6px; } .oi-chip { padding: 3px 8px; border-radius: 4px; font-size: 11px; font-family: 'JetBrains Mono', monospace; font-weight: 600; } .call-chip { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; } .put-chip { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; } /* ========================================================================== ⚡ Live Real-Time Auto-Refresh Engine & Toolbar ========================================================================== */ .live-refresh-bar { background: #ffffff; border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 8px 14px; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); } .live-refresh-left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .live-pulse-badge { display: inline-flex; align-items: center; gap: 6px; background: #ecfdf5; border: 1px solid #a7f3d0; color: #059669; padding: 3px 9px; border-radius: 12px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.4px; } .live-pulse-badge.paused { background: #f1f5f9; border-color: #cbd5e1; color: #64748b; } .pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); animation: pulseRadar 1.8s infinite; } .live-pulse-badge.paused .pulse-dot { background: #94a3b8; animation: none; box-shadow: none; } @keyframes pulseRadar { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 7px rgba(16, 185, 129, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } } .toggle-switch-label { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: 11.5px; font-weight: 700; color: var(--text-primary); user-select: none; } .toggle-switch-label input { display: none; } .toggle-switch-slider { width: 32px; height: 18px; background: #cbd5e1; border-radius: 18px; position: relative; transition: background 0.2s ease; } .toggle-switch-slider::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 2px rgba(0,0,0,0.2); transition: transform 0.2s ease; } .toggle-switch-label input:checked + .toggle-switch-slider { background: #10b981; } .toggle-switch-label input:checked + .toggle-switch-slider::after { transform: translateX(14px); } .refresh-interval-wrap { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-muted); } .interval-select { padding: 3px 6px; border: 1px solid var(--border-default); border-radius: 4px; font-size: 11px; font-family: inherit; font-weight: 600; background: var(--bg-card); color: var(--text-primary); cursor: pointer; } .live-refresh-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .countdown-wrap { display: inline-flex; align-items: center; gap: 6px; } .countdown-label { font-size: 10.5px; color: var(--text-muted); font-weight: 600; } .countdown-badge { background: #eff6ff; border: 1px solid #bfdbfe; color: #2563eb; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 4px; min-width: 32px; text-align: center; } .countdown-bar-track { width: 60px; height: 5px; background: #e2e8f0; border-radius: 3px; overflow: hidden; } .countdown-bar-fill { height: 100%; width: 100%; background: #2563eb; transition: width 0.9s linear; } .last-updated-text { font-size: 10px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; } /* Options Sub-navigation Tabs */ .options-subnav-bar { display: flex; gap: 6px; margin-bottom: 12px; border-bottom: 1px solid var(--border-default); padding-bottom: 6px; } .opt-subtab-btn { background: var(--bg-card); border: 1px solid var(--border-default); color: var(--text-secondary); font-size: 12px; font-weight: 700; padding: 6px 14px; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all 0.15s ease; } .opt-subtab-btn:hover { background: #f8fafc; color: var(--text-primary); border-color: var(--primary); } .opt-subtab-btn.active { background: #2563eb; color: #ffffff; border-color: #2563eb; box-shadow: 0 1px 4px rgba(37, 99, 235, 0.25); } .badge-pro { background: linear-gradient(135deg, #f59e0b, #d97706); color: #ffffff; font-size: 9px; font-weight: 900; padding: 1px 5px; border-radius: 3px; letter-spacing: 0.5px; } /* ========================================================================== 📈 GoCharting-Grade Options Statistics Dashboard Styles ========================================================================== */ #optStatsViewWrap { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; } .stats-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; } .stats-card { background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 10px 12px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 6px; transition: transform 0.15s ease, border-color 0.15s ease; } .stats-card:hover { border-color: var(--primary); transform: translateY(-1px); } .stats-card-header { display: flex; align-items: center; gap: 6px; } .stats-tag { font-size: 9px; font-weight: 800; letter-spacing: 0.5px; color: var(--primary); background: #eff6ff; padding: 2px 5px; border-radius: 3px; } .stats-card-header h4 { font-size: 11.5px; font-weight: 700; color: var(--text-primary); margin: 0; } .stats-val-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .stats-main-val { font-size: 18px; font-weight: 900; font-family: 'JetBrains Mono', monospace; color: var(--text-primary); } .stats-main-val.theta-val { color: #ea580c; } .stats-badge { font-size: 10px; font-weight: 700; font-family: 'JetBrains Mono', monospace; padding: 2px 6px; border-radius: 4px; background: #f1f5f9; color: var(--text-secondary); } .stats-badge.bullish { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; } .stats-badge.bearish { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; } .stats-sub-row { display: flex; align-items: center; justify-content: space-between; font-size: 10.5px; color: var(--text-muted); } .stats-sub-row b { color: var(--text-primary); font-family: 'JetBrains Mono', monospace; } .stats-note { font-size: 9.5px; color: var(--text-muted); line-height: 1.3; } /* Distribution Section */ .stats-distribution-section { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 10px; } .dist-card { background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 12px 14px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 8px; } .dist-card-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; } .dist-card-header h4 { font-size: 12px; font-weight: 800; margin: 0; color: var(--text-primary); } .dist-summary-pills { display: flex; gap: 6px; font-size: 11px; font-family: 'JetBrains Mono', monospace; } .pill-call { background: #fee2e2; color: #b91c1c; padding: 2px 7px; border-radius: 4px; font-weight: 700; } .pill-put { background: #dcfce7; color: #15803d; padding: 2px 7px; border-radius: 4px; font-weight: 700; } .ratio-progress-container { height: 22px; background: #f1f5f9; border-radius: 4px; overflow: hidden; display: flex; box-shadow: inset 0 1px 2px rgba(0,0,0,0.06); } .ratio-bar-call { background: #ef4444; color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 800; font-family: 'JetBrains Mono', monospace; transition: width 0.4s ease; min-width: 35px; } .ratio-bar-put { background: #10b981; color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 800; font-family: 'JetBrains Mono', monospace; transition: width 0.4s ease; min-width: 35px; } .dist-footer-info { display: flex; justify-content: space-between; font-size: 10px; font-weight: 600; color: var(--text-muted); } /* Bottom Grid: Buildups & S/R Walls */ .stats-bottom-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; } @media (max-width: 900px) { .stats-bottom-grid { grid-template-columns: 1fr; } } .buildup-matrix-card, .walls-card { background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 12px 14px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 10px; } .matrix-card-header h4 { font-size: 13px; font-weight: 800; margin: 0; color: var(--text-primary); } .matrix-subtitle { font-size: 10.5px; color: var(--text-muted); } .buildup-quad-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; } .buildup-column { background: var(--bg-base); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; } .col-head { display: flex; align-items: center; justify-content: space-between; gap: 4px; } .col-head strong { font-size: 11px; color: var(--text-primary); } .dot-indicator { width: 6px; height: 6px; border-radius: 50%; display: inline-block; } .dot-indicator.green { background: #16a34a; } .dot-indicator.red { background: #dc2626; } .dot-indicator.blue { background: #2563eb; } .dot-indicator.amber { background: #d97706; } .badge-count { font-size: 9.5px; font-weight: 800; padding: 1px 5px; border-radius: 10px; background: #e2e8f0; color: var(--text-primary); font-family: 'JetBrains Mono', monospace; } .col-desc { font-size: 9px; color: var(--text-muted); line-height: 1.2; } .buildup-items-list { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; } .buildup-item-row { display: flex; align-items: center; justify-content: space-between; font-size: 10px; font-family: 'JetBrains Mono', monospace; padding: 2px 4px; background: #ffffff; border: 1px solid var(--border-subtle); border-radius: 3px; } .buildup-item-row .stk { font-weight: 800; } .buildup-item-row .val { font-weight: 700; } /* Walls Box */ .walls-content { display: flex; flex-direction: column; gap: 8px; } .wall-box { padding: 8px 10px; border-radius: var(--radius-sm); display: flex; flex-direction: column; gap: 5px; } .call-wall-box { background: #fef2f2; border: 1px solid #fecaca; } .put-wall-box { background: #f0fdf4; border: 1px solid #bbf7d0; } .wall-title { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.3px; } .call-wall-box .wall-title { color: #b91c1c; } .put-wall-box .wall-title { color: #15803d; } .wall-strikes-list { display: flex; flex-direction: column; gap: 3px; } .wall-strike-row { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-family: 'JetBrains Mono', monospace; background: #ffffff; padding: 3px 6px; border-radius: 3px; border: 1px solid rgba(0,0,0,0.06); } .wall-strike-row strong { font-weight: 800; } /* ========================================================================== Option Chain Real-Time Tick Flashes & OI Cell Depth Bars ========================================================================== */ .flash-tick-up { animation: flashGreen 0.8s ease-out; } .flash-tick-down { animation: flashRed 0.8s ease-out; } @keyframes flashGreen { 0% { background-color: #86efac !important; color: #14532d !important; font-weight: 900; } 100% { background-color: inherit; } } @keyframes flashRed { 0% { background-color: #fca5a5 !important; color: #7f1d1d !important; font-weight: 900; } 100% { background-color: inherit; } } /* Horizontal depth bar in OI cells */ .oi-cell-wrap { position: relative; overflow: hidden; z-index: 1; } .oi-depth-bg { position: absolute; top: 0; bottom: 0; opacity: 0.22; pointer-events: none; z-index: -1; transition: width 0.3s ease; } .oi-depth-bg.call { right: 0; background: #ef4444; } .oi-depth-bg.put { left: 0; background: #10b981; } /* ========================================================================== ⚡ Institutional Quant Options Desk & Intraday Straddle Engine ========================================================================== */ .quant-straddle-section { background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 14px 16px; margin-bottom: 12px; } .quant-straddle-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; border-bottom: 1px solid var(--border-subtle); padding-bottom: 10px; margin-bottom: 10px; } .straddle-title-group { display: flex; align-items: center; gap: 10px; } .quant-badge-icon { background: linear-gradient(135deg, #7c3aed, #4f46e5); color: #ffffff; font-size: 10px; font-weight: 800; padding: 4px 8px; border-radius: 4px; letter-spacing: 0.5px; box-shadow: 0 2px 6px rgba(124, 58, 237, 0.25); white-space: nowrap; } .straddle-title-group h3 { font-size: 13.5px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.2px; margin: 0; } .quant-subtext { font-size: 10.5px; color: var(--text-muted); margin-top: 1px; } /* Straddle Summary KPI Ribbon */ .straddle-kpi-ribbon { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .straddle-kpi-item { background: var(--bg-base); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 5px 9px; display: flex; flex-direction: column; gap: 2px; min-width: 85px; } .straddle-kpi-item span { font-size: 9.5px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; } .straddle-kpi-item strong { font-size: 12.5px; font-weight: 800; font-family: 'JetBrains Mono', monospace; color: var(--text-primary); } .straddle-highlight { color: #7c3aed !important; } .regime-badge-item { min-width: 120px; } .regime-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 12px; white-space: nowrap; font-family: 'JetBrains Mono', monospace; } .regime-pill.decay { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; } .regime-pill.expansion { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; } .regime-pill.neutral { background: #f1f5f9; color: var(--text-secondary); border: 1px solid var(--border-default); } /* Strike Selection Chips & Chart Controls */ .straddle-controls-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; padding: 6px 10px; background: var(--bg-base); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); } .strike-switcher-wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ctrl-label { font-size: 11px; font-weight: 700; color: var(--text-secondary); white-space: nowrap; } .strike-chips-group { display: inline-flex; gap: 5px; flex-wrap: wrap; } .strike-chip-btn { background: var(--bg-card); border: 1px solid var(--border-default); border-radius: 4px; padding: 3px 8px; font-size: 10.5px; font-weight: 700; font-family: 'JetBrains Mono', monospace; color: var(--text-secondary); cursor: pointer; transition: all 0.15s ease; } .strike-chip-btn:hover { background: #f8fafc; border-color: var(--primary); color: var(--text-primary); } .strike-chip-btn.active { background: #7c3aed; color: #ffffff; border-color: #7c3aed; box-shadow: 0 1px 3px rgba(124, 58, 237, 0.3); } .straddle-tf-wrap { display: flex; align-items: center; gap: 6px; } .straddle-tf-group { display: flex; align-items: center; gap: 4px; background: var(--bg-base); border: 1px solid var(--border-subtle); padding: 2px; border-radius: var(--radius-sm); } .straddle-tf-btn { background: transparent; border: none; font-size: 10.5px; font-weight: 700; color: var(--text-muted); padding: 3px 8px; border-radius: 3px; cursor: pointer; font-family: inherit; transition: all 0.15s ease; } .straddle-tf-btn:hover { color: var(--text-primary); background: rgba(0, 0, 0, 0.04); } .straddle-tf-btn.active { background: #2563eb; color: #ffffff; box-shadow: 0 1px 2px rgba(37, 99, 235, 0.25); } .chart-toggles-wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .toggle-pill { font-size: 10.5px !important; font-weight: 600; color: var(--text-secondary); padding: 2px 6px; border-radius: 3px; background: var(--bg-card); border: 1px solid var(--border-subtle); cursor: pointer; } .toggle-pill span { font-family: 'JetBrains Mono', monospace; } .toggle-pill.call-toggle span { color: var(--green); font-weight: 700; } .toggle-pill.put-toggle span { color: var(--red); font-weight: 700; } .toggle-pill.diff-toggle span { color: #0284c7; font-weight: 700; } .toggle-pill.vwap-toggle span { color: var(--amber); font-weight: 700; } /* Straddle Canvas & Tooltip */ .straddle-canvas-container { position: relative; width: 100%; margin-bottom: 12px; } #straddleCanvas { width: 100%; height: 280px; display: block; background: #ffffff; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); } .straddle-chart-tooltip { position: absolute; pointer-events: none; background: rgba(15, 23, 42, 0.95); color: #f8fafc; border: 1px solid #334155; border-radius: var(--radius-sm); backdrop-filter: blur(8px); padding: 8px 12px; font-size: 11px; font-family: 'JetBrains Mono', monospace; z-index: 100; box-shadow: var(--shadow-md); display: none; flex-direction: column; gap: 3px; } .straddle-chart-tooltip.visible { display: flex; } /* Quant Greeks Strip */ .quant-greeks-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; } .greek-metric-card { background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; transition: transform 0.15s ease, border-color 0.15s ease; } .greek-metric-card:hover { border-color: var(--primary); transform: translateY(-1px); } .greek-top { display: flex; align-items: center; gap: 6px; } .greek-symbol { font-size: 13px; font-weight: 800; color: var(--primary); font-family: 'JetBrains Mono', monospace; } .greek-name { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; } .greek-val { font-size: 14px; font-weight: 800; font-family: 'JetBrains Mono', monospace; color: var(--text-primary); } .theta-val { color: #ea580c !important; } .greek-sub { font-size: 9.5px; color: var(--text-muted); } .expected-move-card { border-left: 3px solid #7c3aed; background: #faf5ff; } .expected-move-card .greek-symbol { color: #7c3aed; } /* ========================================================================== Advanced Option Chain Matrix Table (Sensibull / Opstra Grade) ========================================================================== */ .option-chain-container { background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; margin-bottom: 12px; } .table-scroll { overflow-x: auto; max-height: 560px; } .option-chain-table { width: 100%; border-collapse: collapse; font-size: 11.5px; font-family: 'JetBrains Mono', Consolas, monospace; text-align: right; white-space: nowrap; } .option-chain-table thead { position: sticky; top: 0; z-index: 10; background: #f8fafc; } .header-level-1 th { padding: 7px 10px; font-size: 11px; font-weight: 800; letter-spacing: 0.5px; border-bottom: 1px solid var(--border-default); } .calls-header { background: #dcfce7; color: #15803d; text-align: center; border-right: 1px solid var(--border-default); } .puts-header { background: #fee2e2; color: #b91c1c; text-align: center; border-left: 1px solid var(--border-default); } .strike-header { background: #1e293b; color: #ffffff; text-align: center; font-weight: 800; } .header-level-2 th { padding: 6px 8px; font-size: 10px; color: var(--text-muted); font-weight: 700; border-bottom: 2px solid var(--border-default); background: #f1f5f9; } .header-level-2 th.col-strike { text-align: center; background: #e2e8f0; color: #0f172a; border-left: 1px solid var(--border-default); border-right: 1px solid var(--border-default); } .option-chain-table tbody tr { border-bottom: 1px solid #f1f5f9; transition: background 0.1s ease; } .option-chain-table tbody tr:hover { background: #f1f5f9 !important; } .option-chain-table td { padding: 5px 8px; color: var(--text-primary); } /* In-The-Money (ITM) Highlighting */ .option-row.itm-call td.call-col { background: rgba(22, 163, 74, 0.07); } .option-row.itm-put td.put-col { background: rgba(220, 38, 38, 0.07); } /* ATM Row Highlighting */ .option-row.atm-row { background: #eff6ff !important; border-top: 2px solid #3b82f6 !important; border-bottom: 2px solid #3b82f6 !important; } .strike-col { text-align: center; font-weight: 700; color: #0f172a; background: #f8fafc; border-left: 1px solid var(--border-default); border-right: 1px solid var(--border-default); padding: 4px 6px !important; } .strike-col.atm-badge { background: #2563eb !important; color: #ffffff !important; font-weight: 800; } .strike-title { display: flex; align-items: center; justify-content: center; gap: 3px; font-size: 12px; font-weight: 800; } .strike-straddle-sub { font-size: 9.5px; font-weight: 700; font-family: 'JetBrains Mono', monospace; color: #64748b; margin-top: 1px; } .strike-col.atm-badge .strike-straddle-sub { color: #dbeafe !important; font-weight: 800; } .atm-tag { font-size: 9px; background: #ffffff; color: #2563eb; padding: 1px 4px; border-radius: 3px; margin-left: 3px; font-weight: 800; } /* Visual Open Interest (OI) Progress Bars */ .col-oi { position: relative; z-index: 1; } .oi-bar { position: absolute; top: 3px; bottom: 3px; border-radius: 3px; z-index: -1; } .call-oi-bar { right: 0; background: rgba(22, 163, 74, 0.18); border-right: 2px solid #16a34a; } .put-oi-bar { left: 0; background: rgba(220, 38, 38, 0.18); border-left: 2px solid #dc2626; } .oi-text { position: relative; z-index: 2; font-weight: 600; } .change-pos { color: #16a34a !important; font-weight: 600; } .change-neg { color: #dc2626 !important; font-weight: 600; } .change-zero { color: var(--text-muted) !important; } .font-semibold { font-weight: 700; } .greek-hidden .col-greek { display: none; } .compact-view-enabled td, .compact-view-enabled th { padding: 3px 6px !important; font-size: 10.5px !important; } /* ========================================================================== 🔥 Sector Performance & Breadth Matrix Styling ========================================================================== */ .sector-heatmap-section { background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 12px 14px; margin-bottom: 12px; } .sector-header-wrap { margin-bottom: 10px; border-bottom: 1px solid var(--border-subtle); padding-bottom: 8px; cursor: pointer; user-select: none; transition: opacity 0.15s ease; } .sector-header-wrap:hover { opacity: 0.92; } .sector-header-title-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; } .sector-title-group { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .sector-title-group h3 { font-size: 13px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.2px; margin: 0; } .sector-meta-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; } .sec-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 12px; font-family: 'JetBrains Mono', monospace; } .sec-pill.bull { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); } .sec-pill.bear { background: var(--red-bg); color: var(--red); border: 1px solid var(--red-border); } .sec-pill.avg { background: #eff6ff; color: var(--primary); border: 1px solid #bfdbfe; } .sector-controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .sector-btn-group { display: inline-flex; background: var(--bg-base); border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: 2px; gap: 2px; } .sec-ctrl-btn { background: transparent; color: var(--text-secondary); border: none; border-radius: 3px; padding: 3px 8px; font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.15s ease; line-height: 1.2; } .sec-ctrl-btn:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.7); } .sec-ctrl-btn.active { background: #ffffff; color: var(--primary); font-weight: 700; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); } .sec-filter-select { height: 24px; padding: 1px 6px; font-size: 11px; font-weight: 600; border-radius: var(--radius-sm); border: 1px solid var(--border-default); background: var(--bg-card); color: var(--text-secondary); cursor: pointer; } /* Grid of Sector Cards */ .sector-heatmap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; } @media (max-width: 768px) { .sector-heatmap-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; } } /* Individual Sector Card */ .sector-card { background: #ffffff; border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; position: relative; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); } .sector-card:hover { transform: translateY(-1.5px); box-shadow: var(--shadow-md); border-color: var(--border-hover); } .sector-card.bullish { border-left: 3px solid var(--green); } .sector-card.bearish { border-left: 3px solid var(--red); } .sector-card.neutral { border-left: 3px solid var(--amber); } /* Card Header */ .sector-card-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .sector-card-name { font-size: 11.5px; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 125px; } .sector-card-pct { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; font-weight: 800; font-family: 'JetBrains Mono', monospace; padding: 2px 6px; border-radius: 4px; letter-spacing: -0.2px; white-space: nowrap; } .sector-card-pct.bull { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); } .sector-card-pct.bear { background: var(--red-bg); color: var(--red); border: 1px solid var(--red-border); } /* Ratio Bar */ .sector-card-bar-wrap { display: flex; height: 5px; border-radius: 3px; overflow: hidden; background: #e2e8f0; } .sector-bar-adv { background: var(--green); transition: width 0.3s ease; } .sector-bar-dec { background: var(--red); transition: width 0.3s ease; } .sector-bar-neu { background: #cbd5e1; transition: width 0.3s ease; } /* Card Bottom Stats */ .sector-card-stats { display: flex; align-items: center; justify-content: space-between; font-size: 10px; font-weight: 600; font-family: 'JetBrains Mono', monospace; color: var(--text-muted); } .sec-count-adv { color: var(--green); } .sec-count-dec { color: var(--red); } .sec-count-net { font-weight: 700; padding: 1px 5px; border-radius: 3px; font-size: 9.5px; } .sec-count-net.pos { background: var(--green-bg); color: var(--green); } .sec-count-net.neg { background: var(--red-bg); color: var(--red); } .sec-count-net.zero { background: #f1f5f9; color: var(--text-muted); } /* Empty or Loading State */ .sector-empty-state { padding: 16px; text-align: center; color: var(--text-muted); font-size: 12px; grid-column: 1 / -1; background: var(--bg-base); border-radius: var(--radius-sm); border: 1px dashed var(--border-default); } /* ========================================================================== Paired Charts ========================================================================== */ .paired-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; } @media (max-width: 900px) { .paired-charts { grid-template-columns: 1fr; } } .chart-section { background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 12px; } .chart-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .chart-header h2 { font-size: 13px; font-weight: 700; color: var(--text-primary); } .chart-header p { font-size: 10px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; } .legend { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; color: var(--text-muted); } .legend span { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; } .legend .line { display: inline-block; width: 14px; height: 2.5px; border-radius: 2px; } .legend .line.breadth { background: #38bdf8; } .legend .line.average { background: #f59e0b; } .legend .line.advance-line { background: #10b981; } .legend .line.decline-line { background: #f43f5e; } .legend .line.net-line { background: #38bdf8; } .legend .dash { display: inline-block; width: 14px; height: 0; border-top: 1.5px dashed #64748b; } .canvas-wrap { position: relative; } canvas { width: 100%; display: block; border-radius: var(--radius-sm); background: var(--bg-card); border: 1px solid var(--border-subtle); } .chart-tooltip { position: absolute; pointer-events: none; background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-default); border-radius: var(--radius-sm); backdrop-filter: blur(8px); padding: 8px 12px; font-size: 11px; font-family: 'JetBrains Mono', monospace; z-index: 100; box-shadow: var(--shadow-md); } /* Messages / Logs Panel */ .message-panel { margin-top: 12px; padding: 8px 12px; background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-sm); font-size: 11.5px; color: var(--text-secondary); } .eyebrow { font-size: 10px; color: var(--text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; } /* Tab Navigation */ .tab-nav { display: flex; background: var(--bg-input); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 2px; gap: 2px; } .tab-btn { background: transparent; color: var(--text-secondary); border: none; border-radius: var(--radius-sm); padding: 6px 14px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s ease; display: inline-flex; align-items: center; gap: 5px; } .tab-btn:hover { color: var(--text-primary); } .tab-btn.active { background: var(--primary); color: #fff; font-weight: 700; box-shadow: 0 1px 4px rgba(0,0,0,0.3); } .status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; border: 1px solid var(--border-default); background: var(--bg-input); color: var(--text-muted); white-space: nowrap; } .status.ready { color: #34d399; border-color: rgba(52, 211, 153, 0.3); background: rgba(52, 211, 153, 0.08); } .status.warn { color: #fbbf24; border-color: rgba(251, 191, 36, 0.3); background: rgba(251, 191, 36, 0.08); } .tab-panel { display: none; } .tab-panel.active { display: block; } /* ========================================================================== Compact Control Band ========================================================================== */ .control-band, .options-control-band { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; padding: 10px 14px; background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); margin-bottom: 8px; } .ctrl-group { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 8px; } label { display: flex; flex-direction: column; gap: 3px; } label span { font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; } input, select, textarea { height: 32px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--bg-input); color: var(--text-primary); padding: 4px 8px; font-size: 12px; outline: none; transition: border-color 0.15s; } input[type="date"] { color-scheme: dark; width: 120px; } input[type="number"] { width: 60px; } select { cursor: pointer; } input:hover, select:hover, textarea:hover { border-color: var(--border-hover); } input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-glow); } .check-label { display: inline-flex; flex-direction: row; align-items: center; gap: 5px; height: 32px; cursor: pointer; user-select: none; } .check-label input[type="checkbox"] { height: 14px; width: 14px; margin: 0; accent-color: var(--primary); cursor: pointer; } .check-label span { font-size: 11px; font-weight: 500; color: var(--text-secondary); text-transform: none; } button { height: 32px; border: 0; border-radius: var(--radius-sm); background: var(--primary); color: #fff; padding: 0 14px; font-weight: 600; font-size: 12px; cursor: pointer; transition: all 0.15s ease; display: inline-flex; align-items: center; justify-content: center; gap: 4px; } button:hover { background: #1d4ed8; box-shadow: 0 2px 8px var(--primary-glow); } button.secondary { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-default); color: var(--text-primary); } button.secondary:hover { background: rgba(255, 255, 255, 0.1); } .actions, .opt-actions { display: flex; gap: 6px; margin-left: auto; } /* Sub-band for Auto Refresh & Custom Symbols */ .sub-band { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 6px 12px; background: rgba(17, 23, 38, 0.6); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); margin-bottom: 8px; font-size: 11px; } .auto-refresh-wrap { display: flex; align-items: center; gap: 8px; } .mini-select { height: 24px; padding: 1px 6px; font-size: 11px; } .refresh-state { color: var(--text-muted); font-family: 'JetBrains Mono', monospace; font-size: 10px; } /* Integrated Control Band Auto Refresh */ .ctrl-group.auto-refresh-ctrl-group { display: flex; align-items: center; height: 32px; background: rgba(16, 185, 129, 0.08); border: 1px solid rgba(16, 185, 129, 0.25); border-radius: var(--radius-sm); padding: 0 10px; } .ctrl-group.auto-refresh-ctrl-group .auto-refresh-wrap { display: flex; align-items: center; gap: 8px; } .ctrl-group.auto-refresh-ctrl-group .check-label { height: 32px; display: inline-flex; align-items: center; cursor: pointer; user-select: none; font-weight: 600; color: #10b981; } .ctrl-group.auto-refresh-ctrl-group .check-label input[type="checkbox"] { accent-color: #10b981; cursor: pointer; } .ctrl-group.auto-refresh-ctrl-group .refresh-state { color: #10b981; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.3px; } [data-theme="light"] .ctrl-group.auto-refresh-ctrl-group { background: rgba(16, 185, 129, 0.1) !important; border-color: rgba(16, 185, 129, 0.35) !important; } [data-theme="light"] .ctrl-group.auto-refresh-ctrl-group .check-label { color: #047857 !important; } [data-theme="light"] .ctrl-group.auto-refresh-ctrl-group .check-label span { color: #047857 !important; } [data-theme="light"] .ctrl-group.auto-refresh-ctrl-group .refresh-state { color: #047857 !important; } /* ========================================================================== Compact KPI Strip ========================================================================== */ .metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 6px; margin-bottom: 8px; } .metric { padding: 8px 12px; background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-sm); display: flex; flex-direction: column; gap: 2px; } .metric span { font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; } .metric strong { font-size: 16px; font-weight: 700; font-family: 'JetBrains Mono', monospace; color: var(--text-primary); } .metric.positive strong { color: var(--green); } .metric.negative strong { color: var(--red); } /* Delivery % Progress Bar in table */ .deliv-pct-wrap { display: flex; align-items: center; gap: 8px; } .deliv-pct-val { min-width: 48px; text-align: right; font-weight: 700; } .deliv-progress-bar { flex: 1; height: 6px; background: rgba(255, 255, 255, 0.08); border-radius: 3px; overflow: hidden; min-width: 60px; } .deliv-progress-fill { height: 100%; border-radius: 3px; transition: width 0.3s ease; } .fill-high { background: #10b981; } .fill-mid { background: #f59e0b; } .fill-low { background: #64748b; } .action-pill { display: inline-block; padding: 2px 6px; border-radius: 3px; font-size: 10px; font-weight: 600; } .action-accum { background: rgba(16, 185, 129, 0.15); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.3); } .action-dist { background: rgba(244, 63, 94, 0.15); color: #fb7185; border: 1px solid rgba(244, 63, 94, 0.3); } .action-cover { background: rgba(56, 189, 248, 0.15); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.3); } .action-neutral { background: rgba(255, 255, 255, 0.05); color: var(--text-muted); } .section-sub-heading { margin: 14px 0 6px; } .section-sub-heading h3 { font-size: 12px; font-weight: 700; color: var(--text-secondary); } .message-panel { display: none; padding: 10px 14px; background: rgba(17, 23, 38, 0.8); border: 1px solid var(--border-default); border-left: 3px solid var(--primary); border-radius: var(--radius-sm); font-size: 11px; color: var(--text-secondary); line-height: 1.5; margin-top: 10px; font-family: 'JetBrains Mono', monospace; } .message-panel.visible { display: block; } .positive-text { color: var(--green) !important; } .negative-text { color: var(--red) !important; } /* ========================================================================== 🕵️ Smart Money Secret Institutional Terminal Styling ========================================================================== */ .secret-terminal-card { border: 1px solid rgba(139, 92, 246, 0.4) !important; background: radial-gradient(circle at 10% 20%, rgba(30, 27, 75, 0.4) 0%, rgba(13, 17, 23, 0.95) 90%) !important; box-shadow: 0 4px 20px rgba(139, 92, 246, 0.08); } .secret-glow-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #a855f7; box-shadow: 0 0 10px #a855f7; margin-right: 6px; animation: pulseSecret 2s infinite ease-in-out; } @keyframes pulseSecret { 0%, 100% { opacity: 0.6; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.2); } } .secret-status-tag { font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 3px; background: rgba(168, 85, 247, 0.15); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.35); letter-spacing: 0.5px; } .secret-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; } @media (max-width: 1024px) { .secret-grid { grid-template-columns: 1fr; } } .secret-card { background: rgba(17, 24, 39, 0.85); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; } .secret-card-title { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 700; color: #f1f5f9; } .trap-prob-badge { font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 12px; background: rgba(239, 68, 68, 0.18); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.4); } .trap-alert-box { background: rgba(15, 23, 42, 0.9); border: 1px solid rgba(147, 51, 234, 0.3); border-left: 4px solid #a855f7; border-radius: var(--radius-sm); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; } .trap-alert-header { font-size: 12px; font-weight: 800; color: #e2e8f0; letter-spacing: 0.3px; } .trap-alert-desc { font-size: 11px; color: #94a3b8; line-height: 1.4; } .trap-trade-bias-strip { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding-top: 6px; border-top: 1px dashed rgba(255, 255, 255, 0.1); font-size: 10px; color: var(--text-muted); font-weight: 700; } .bias-highlight { font-size: 12px; font-weight: 800; color: #38bdf8; font-family: 'JetBrains Mono', monospace; } .gamma-metrics-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 4px; } .gamma-metric-cell { background: var(--bg-input); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; } .g-label { font-size: 9px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; } .g-val { font-size: 14px; font-weight: 800; font-family: 'JetBrains Mono', monospace; color: #f8fafc; } .g-sub { font-size: 9px; color: var(--text-muted); } .score-pill { display: inline-block; padding: 2px 7px; border-radius: 10px; font-size: 10px; font-weight: 800; font-family: 'JetBrains Mono', monospace; } .score-high { background: rgba(16, 185, 129, 0.2); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.4); } .score-mid { background: rgba(245, 158, 11, 0.2); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.4); } .score-low { background: rgba(239, 68, 68, 0.2); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.4); } .playbook-box { background: rgba(15, 23, 42, 0.85); border: 1px solid rgba(56, 189, 248, 0.25); border-radius: var(--radius-sm); padding: 10px 12px; margin-top: 6px; display: flex; flex-direction: column; gap: 6px; } .playbook-title { font-size: 11px; font-weight: 800; color: #38bdf8; letter-spacing: 0.3px; } .playbook-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 5px; } .playbook-list li { font-size: 11px; color: #cbd5e1; line-height: 1.4; padding-left: 10px; position: relative; } .playbook-list li::before { content: "•"; color: #38bdf8; position: absolute; left: 0; font-weight: bold; } .playbook-list li strong { color: #f8fafc; } /* ========================================================================== 🎯 Positional Option Selling Strategy Engine Styling ========================================================================== */ .positional-strategy-card { border: 1px solid rgba(16, 185, 129, 0.4) !important; background: radial-gradient(circle at 10% 10%, rgba(6, 78, 59, 0.35) 0%, rgba(13, 17, 23, 0.95) 80%) !important; box-shadow: 0 4px 20px rgba(16, 185, 129, 0.08); margin-bottom: 16px; } .strategy-glow-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #10b981; box-shadow: 0 0 10px #10b981; margin-right: 6px; animation: pulseStrategy 2s infinite ease-in-out; } @keyframes pulseStrategy { 0%, 100% { opacity: 0.6; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.2); } } .pos-strat-badge { font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 12px; background: rgba(16, 185, 129, 0.18); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.4); } .pos-hero-box { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; } .pos-hero-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; padding: 14px; background: rgba(15, 23, 42, 0.9); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-md); } .pos-hero-title-group { display: flex; flex-direction: column; gap: 4px; max-width: 550px; } .pos-label { font-size: 9px; font-weight: 800; color: #38bdf8; letter-spacing: 0.5px; } .pos-strat-title { font-size: 16px; font-weight: 800; color: #f8fafc; margin: 0; } .pos-strat-rationale { font-size: 11px; color: #94a3b8; line-height: 1.4; margin: 0; } .pos-hero-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } @media (min-width: 768px) { .pos-hero-stats { grid-template-columns: repeat(4, 1fr); } } .pos-stat-pill { background: var(--bg-input); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 100px; } .pos-stat-pill span { font-size: 9px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; } .pos-stat-pill strong { font-size: 13px; font-weight: 800; font-family: 'JetBrains Mono', monospace; } .pos-legs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 900px) { .pos-legs-grid { grid-template-columns: 1fr; } } .pos-legs-card, .pos-risk-card { background: rgba(17, 24, 39, 0.85); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; } .pos-sub-title { font-size: 10px; font-weight: 800; color: var(--text-secondary); letter-spacing: 0.5px; } .pos-legs-container { display: flex; flex-direction: column; gap: 6px; } .pos-leg-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-radius: var(--radius-sm); background: rgba(15, 23, 42, 0.8); border: 1px solid var(--border-subtle); } .leg-act { font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 3px; font-family: 'JetBrains Mono', monospace; } .leg-act.sell { background: rgba(239, 68, 68, 0.2); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.4); } .leg-act.buy { background: rgba(56, 189, 248, 0.2); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.4); } .leg-name { font-size: 12px; font-weight: 700; color: #f1f5f9; font-family: 'JetBrains Mono', monospace; } .leg-price { font-size: 11px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; } .pos-sl-box { background: rgba(15, 23, 42, 0.9); border: 1px solid rgba(239, 68, 68, 0.3); border-left: 3px solid #ef4444; border-radius: var(--radius-sm); padding: 8px 10px; font-size: 11px; color: #cbd5e1; line-height: 1.4; } .pos-condition-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .cond-pill { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-subtle); color: var(--text-secondary); } .cond-pill.active { background: rgba(16, 185, 129, 0.15); color: #34d399; border-color: rgba(16, 185, 129, 0.35); } /* ========================================================================== 🎯 Nifty 500 Stealth Accumulation Scanner Controls Styling ========================================================================== */ .scanner-count-tag { font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 10px; background: rgba(56, 189, 248, 0.15); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.3); } .scanner-select { background: var(--bg-input); border: 1px solid var(--border-default); color: var(--text-primary); font-size: 11px; font-weight: 600; padding: 4px 8px; border-radius: var(--radius-sm); outline: none; cursor: pointer; } .scanner-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .scanner-pills { display: flex; gap: 4px; flex-wrap: wrap; } .s-pill { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-subtle); color: var(--text-muted); font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 4px; cursor: pointer; transition: all 0.15s ease; } .s-pill:hover { background: rgba(255, 255, 255, 0.1); color: #fff; } .s-pill.active { background: rgba(56, 189, 248, 0.2); border-color: rgba(56, 189, 248, 0.5); color: #38bdf8; } .scanner-search-box { flex: 1; min-width: 180px; max-width: 280px; } .scanner-search-box input { width: 100%; background: var(--bg-input); border: 1px solid var(--border-default); border-radius: var(--radius-sm); color: #fff; font-size: 11px; padding: 4px 8px; outline: none; transition: border-color 0.15s ease; } .scanner-search-box input:focus { border-color: var(--primary); } /* ========================================================================== 🚀 Morning Market Radar & Sector Heatmap Styling ========================================================================== */ .radar-sector-card { border: 1px solid rgba(56, 189, 248, 0.4) !important; background: radial-gradient(circle at 10% 10%, rgba(14, 116, 144, 0.3) 0%, rgba(13, 17, 23, 0.95) 80%) !important; box-shadow: 0 4px 20px rgba(56, 189, 248, 0.08); margin-bottom: 14px; } .radar-glow-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #38bdf8; box-shadow: 0 0 10px #38bdf8; margin-right: 6px; animation: pulseRadar 2s infinite ease-in-out; } @keyframes pulseRadar { 0%, 100% { opacity: 0.6; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.2); } } .sector-tiles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-top: 8px; } .sector-tile { background: var(--bg-input); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; transition: all 0.15s ease; cursor: pointer; } .sector-tile:hover { border-color: var(--primary); transform: translateY(-1px); } .sec-tile-top { display: flex; justify-content: space-between; align-items: center; } .sec-name { font-size: 10px; font-weight: 800; color: #e2e8f0; } .sec-chg { font-size: 11px; font-weight: 800; font-family: 'JetBrains Mono', monospace; } .sec-ratio-bar { display: flex; height: 4px; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, 0.08); margin: 2px 0; } .sec-ratio-adv { background: var(--green); height: 100%; } .sec-ratio-dec { background: var(--red); height: 100%; } .sec-del-sub { font-size: 9px; color: var(--text-muted); } .radar-highlights-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; } @media (max-width: 1100px) { .radar-highlights-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .radar-highlights-grid { grid-template-columns: 1fr; } } .highlight-card { background: rgba(17, 24, 39, 0.85); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; } .hl-header { font-size: 11px; font-weight: 800; color: #f1f5f9; display: flex; align-items: center; gap: 6px; } .hl-dot { width: 6px; height: 6px; border-radius: 50%; } .hl-dot.green { background: var(--green); box-shadow: 0 0 6px var(--green); } .hl-dot.red { background: var(--red); box-shadow: 0 0 6px var(--red); } .hl-dot.cyan { background: var(--cyan); box-shadow: 0 0 6px var(--cyan); } .hl-dot.amber { background: var(--amber); box-shadow: 0 0 6px var(--amber); } .hl-list { display: flex; flex-direction: column; gap: 5px; } .hl-item { display: flex; justify-content: space-between; align-items: center; font-size: 11px; padding: 3px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.04); } .hl-item:last-child { border-bottom: none; } .hl-sym { font-weight: 700; color: #e2e8f0; font-family: 'JetBrains Mono', monospace; } .hl-val { font-weight: 800; font-family: 'JetBrains Mono', monospace; } .radar-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 6px; } .radar-filter-group { display: flex; gap: 6px; } .surge-pill { font-size: 10px; font-weight: 800; padding: 1px 5px; border-radius: 3px; font-family: 'JetBrains Mono', monospace; } .surge-high { background: rgba(56, 189, 248, 0.2); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.4); } .surge-neutral { color: var(--text-muted); } /* ========================================================================== wPCR & PCE Quant Terminal Styling ========================================================================== */ .wpcr-chart-section { background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 14px 16px; margin-top: 14px; } .trap-alert-card { border-left: 3px solid #ef4444 !important; } .trap-badge-wrap { margin: 4px 0 6px; } .trap-banner-badge { display: inline-block; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 4px; background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; letter-spacing: 0.3px; } .trap-banner-badge.bullish-trap { background: #f0fdf4; color: #16a34a; border-color: #bbf7d0; } .trap-banner-badge.neutral-trap { background: #f8fafc; color: #475569; border-color: #cbd5e1; } .trap-detail-desc { font-size: 11px; line-height: 1.45; color: var(--text-secondary); margin-top: 6px; margin-bottom: 0; } .wpcr-table-wrap { overflow-x: auto; max-height: 380px; margin-top: 10px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); } .wpcr-data-table { width: 100%; border-collapse: collapse; font-size: 11px; } .wpcr-data-table th { position: sticky; top: 0; background: #f8fafc; color: #475569; font-weight: 700; padding: 6px 8px; border-bottom: 2px solid var(--border-default); text-align: right; white-space: nowrap; } .wpcr-data-table th:first-child { text-align: center; } .wpcr-data-table td { padding: 5px 8px; border-bottom: 1px solid var(--border-subtle); font-family: 'JetBrains Mono', monospace; text-align: right; white-space: nowrap; } .wpcr-data-table td:first-child { text-align: center; font-weight: 800; } .wpcr-data-table tr.atm-row { background: rgba(37, 99, 235, 0.08); } .wpcr-data-table tr:hover { background: #f1f5f9; } .dom-pill { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 800; } .dom-pill.put { background: #dcfce7; color: #16a34a; } .dom-pill.call { background: #fee2e2; color: #dc2626; } .dom-pill.balanced { background: #f1f5f9; color: #64748b; } .macro-pce-body { margin-top: 10px; } .macro-kpi-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; } .macro-kpi-box { background: #f8fafc; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; } .macro-label { font-size: 10px; color: var(--text-muted); font-weight: 700; text-transform: uppercase; } .macro-val { font-size: 16px; font-weight: 800; font-family: 'JetBrains Mono', monospace; color: var(--text-primary); } .macro-status-pill { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 3px; width: fit-content; } .macro-status-pill.green { background: #dcfce7; color: #15803d; } .macro-status-pill.blue { background: #eff6ff; color: #1d4ed8; } .macro-impact-card { background: #f8fafc; border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 12px; } .macro-impact-card h5 { margin: 0 0 8px; font-size: 11.5px; font-weight: 700; color: var(--text-primary); } .macro-fortress-wrap h5 { margin: 0 0 8px; font-size: 11.5px; font-weight: 700; color: var(--text-primary); } .fortress-split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .fortress-col { background: #ffffff; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 8px 10px; } .col-head-title { font-size: 10.5px; font-weight: 800; display: block; margin-bottom: 6px; border-bottom: 1px solid var(--border-subtle); padding-bottom: 3px; } .fortress-item-row { display: flex; justify-content: space-between; align-items: center; font-size: 10.5px; font-family: 'JetBrains Mono', monospace; padding: 2px 0; border-bottom: 1px dashed #f1f5f9; } .macro-tickers-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; background: #ffffff; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 6px 8px; } .macro-ticker-item { display: flex; flex-direction: column; align-items: center; border-right: 1px solid var(--border-subtle); padding: 0 4px; } .macro-ticker-item:last-child { border-right: none; } .ticker-label { font-size: 9px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; } .ticker-val { font-size: 12px; font-weight: 800; font-family: 'JetBrains Mono', monospace; color: #1e293b; } /* ========================================================================== Model Fair Value & Arbitrage Edge Styling ========================================================================== */ .model-pricing-ribbon { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; background: #f8fafc; border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: 8px 12px; margin-bottom: 8px; } .ribbon-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ribbon-tag { font-size: 9.5px; font-weight: 800; padding: 2px 6px; border-radius: 3px; background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; letter-spacing: 0.4px; } .ribbon-text { font-size: 11px; font-weight: 700; font-family: 'JetBrains Mono', monospace; color: #334155; } .ribbon-right { display: flex; align-items: center; gap: 8px; } .filter-label { font-size: 11px; font-weight: 700; color: var(--text-muted); } .edge-filter-group { display: flex; gap: 4px; } .edge-filter-btn { background: #ffffff; border: 1px solid var(--border-default); border-radius: 4px; padding: 3px 8px; font-size: 10.5px; font-weight: 700; color: var(--text-secondary); cursor: pointer; transition: all 0.15s ease; } .edge-filter-btn:hover { background: #f1f5f9; color: var(--text-primary); } .edge-filter-btn.active { background: #2563eb; color: #ffffff; border-color: #2563eb; } .edge-filter-btn.buyer-filter.active { background: #16a34a; border-color: #16a34a; } .edge-filter-btn.seller-filter.active { background: #dc2626; border-color: #dc2626; } .edge-badge { display: inline-block; padding: 1px 5px; border-radius: 3px; font-size: 9.5px; font-weight: 800; font-family: 'JetBrains Mono', monospace; white-space: nowrap; } .edge-badge.undervalued { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; } .edge-badge.overvalued { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; } .edge-badge.fair { background: #f1f5f9; color: #64748b; } .col-model.col-fair { color: #475569; font-weight: 600; } .table-hide-model-pricing .col-model { display: none !important; } /* ========================================================================== 🏛️ Smart Money EOD Tracker (FII / DII / PRO vs Retail) Styles ========================================================================== */ .sm-controls { background: #ffffff; border: 1px solid var(--border-color); border-radius: 8px; padding: 10px 14px; } .sm-quick-dates { display: inline-flex; gap: 6px; margin-left: 8px; } .sm-quick-btn { padding: 4px 10px !important; font-size: 11px !important; border-radius: 6px !important; background: #f8fafc; color: var(--text-muted); border: 1px solid #e2e8f0; } .sm-quick-btn.active { background: #2563eb !important; color: #ffffff !important; border-color: #2563eb !important; font-weight: 700; } .sm-eod-badge { font-size: 11px; font-weight: 700; color: #15803d; background: #dcfce7; padding: 4px 10px; border-radius: 12px; border: 1px solid #bbf7d0; display: inline-flex; align-items: center; } .sm-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; } .sm-card { background: #ffffff; border: 1px solid var(--border-color); border-radius: 10px; padding: 14px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); } .sm-card-header { border-bottom: 1px solid var(--border-color); padding-bottom: 8px; margin-bottom: 10px; } .sm-card-title { font-size: 12.5px; font-weight: 800; color: #1e293b; letter-spacing: -0.2px; } .sm-gauge-body { display: flex; flex-direction: column; gap: 10px; } .sm-gauge-ratio-numbers { display: flex; justify-content: space-between; align-items: flex-end; } .ratio-label { font-size: 11px; font-weight: 800; letter-spacing: 0.5px; } .ratio-val { display: block; font-size: 26px; font-weight: 900; font-family: 'JetBrains Mono', monospace; color: #0f172a; } .sm-split-bar-wrap { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: #e2e8f0; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); } .sm-split-bar-long { background: linear-gradient(90deg, #10b981, #16a34a); transition: width 0.4s ease; } .sm-split-bar-short { background: linear-gradient(90deg, #dc2626, #ef4444); transition: width 0.4s ease; } .sm-metric-subrow { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #64748b; font-family: 'JetBrains Mono', monospace; } .sm-zone-desc { font-size: 11px; line-height: 1.4; color: #475569; background: #f8fafc; padding: 8px 10px; border-radius: 6px; border-left: 3px solid #2563eb; } .sm-trap-body { display: flex; flex-direction: column; gap: 8px; } .sm-trap-title { margin: 0; font-size: 13px; font-weight: 800; color: #0f172a; } .sm-trap-desc { margin: 0; font-size: 11px; color: #64748b; line-height: 1.4; } .sm-clash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 4px; } .sm-clash-box { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: 6px 8px; display: flex; flex-direction: column; } .clash-label { font-size: 9.5px; color: #64748b; text-transform: uppercase; font-weight: 700; } .sm-clash-box strong { font-size: 12px; font-family: 'JetBrains Mono', monospace; margin-top: 2px; } .sm-gameplan-body { display: flex; flex-direction: column; gap: 8px; } .sm-gameplan-rule p { margin: 4px 0 0 0; font-size: 11px; color: #334155; line-height: 1.4; } .sm-gameplan-bullets { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; } .gp-bullet { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: 6px 8px; font-size: 10.5px; line-height: 1.35; color: #475569; } .sm-table td { font-size: 11.5px; padding: 8px 10px; } .participant-tag { font-weight: 800; font-size: 11px; padding: 2px 8px; border-radius: 4px; display: inline-block; } .participant-tag.fii { background: #dbeafe; color: #1d4ed8; border: 1px solid #bfdbfe; } .participant-tag.pro { background: #f3e8ff; color: #7e22ce; border: 1px solid #e9d5ff; } .participant-tag.client { background: #fef3c7; color: #b45309; border: 1px solid #fde68a; } .participant-tag.dii { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; } .participant-tag.total { background: #0f172a; color: #ffffff; } .stance-pill { font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 4px; display: inline-block; } .stance-pill.bullish { background: #dcfce7; color: #15803d; } .stance-pill.bearish { background: #fee2e2; color: #b91c1c; } .stance-pill.neutral { background: #f1f5f9; color: #64748b; } /* ========================================================================== 📦 Delivery Desk (StockEdge + Moneycontrol Advanced) Styles ========================================================================== */ .filter-pill { background: #f8fafc; color: #475569; border: 1px solid #cbd5e1; border-radius: 6px; padding: 5px 12px; font-size: 11.5px; font-weight: 600; cursor: pointer; transition: all 0.15s ease; } .filter-pill:hover { background: #e2e8f0; color: #0f172a; } .filter-pill.active { background: #0f172a !important; color: #ffffff !important; border-color: #0f172a !important; font-weight: 800; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12); } body[data-theme="dark"] .filter-pill, :root[data-theme="dark"] .filter-pill { background: #1e293b; color: #94a3b8; border-color: #334155; } body[data-theme="dark"] .filter-pill:hover, :root[data-theme="dark"] .filter-pill:hover { background: #334155; color: #f1f5f9; } body[data-theme="dark"] .filter-pill.active, :root[data-theme="dark"] .filter-pill.active { background: #2563eb !important; color: #ffffff !important; border-color: #2563eb !important; } .deliv-progress-wrap { display: flex; align-items: center; gap: 8px; width: 100%; } .deliv-progress-bar { flex: 1; height: 8px; background: #e2e8f0; border-radius: 4px; overflow: hidden; position: relative; } .deliv-progress-fill { height: 100%; border-radius: 4px; transition: width 0.3s ease; } .deliv-progress-fill.high { background: linear-gradient(90deg, #10b981, #059669); } .deliv-progress-fill.med { background: linear-gradient(90deg, #3b82f6, #2563eb); } .deliv-progress-fill.low { background: linear-gradient(90deg, #94a3b8, #64748b); } .shock-badge { font-size: 10.5px; font-weight: 800; font-family: 'JetBrains Mono', monospace; padding: 2px 6px; border-radius: 4px; display: inline-block; } .shock-badge.surge { background: #fef3c7; color: #b45309; border: 1px solid #fde68a; } .shock-badge.extreme { background: #ffedd5; color: #c2410c; border: 1px solid #fed7aa; animation: pulse 1.5s infinite; } .deliv-sig-pill { font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 4px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; } .deliv-sig-pill.acc { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; } .deliv-sig-pill.dist { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; } .deliv-sig-pill.short-cover { background: #fef9c3; color: #854d0e; border: 1px solid #fef08a; } .deliv-sig-pill.unwind { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; } .deliv-sig-pill.high-deliv { background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; } .deliv-table tr:hover { background: #f8fafc; cursor: pointer; } .drilldown-btn { background: #f1f5f9; color: #2563eb; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 11px; padding: 2px 8px; font-weight: 700; cursor: pointer; transition: all 0.15s ease; } .drilldown-btn:hover { background: #2563eb; color: #ffffff; border-color: #2563eb; } /* Modal Overlay for StockEdge Date-Wise Drilldown */ .deliv-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(15, 23, 42, 0.65); backdrop-filter: blur(3px); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; } .deliv-modal-content { background: #ffffff; border-radius: 12px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1); width: 100%; max-width: 920px; padding: 20px; animation: modalPop 0.2s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes modalPop { from { opacity: 0; transform: scale(0.96) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } } .deliv-mini-row { display: flex; justify-content: space-between; align-items: center; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: 6px 10px; font-size: 11.5px; } /* ========================================================================== 🏛️ Index-Wise Activity & Position Master Terminal Styles ========================================================================== */ .idx-overview-kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 16px; } .idx-kpi-card { background: var(--bg-card); border: 1px solid var(--border-default); border-radius: 10px; padding: 14px 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); display: flex; flex-direction: column; gap: 4px; } .idx-kpi-label { font-size: 11.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; } .idx-kpi-val { font-size: 20px; font-weight: 800; color: var(--text-primary); font-family: 'JetBrains Mono', monospace, tabular-nums; } .idx-kpi-sub { font-size: 11px; font-weight: 600; color: var(--text-secondary); } .idx-section-card { background: var(--bg-card); border: 1px solid var(--border-default); border-radius: 10px; padding: 16px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); } .idx-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border-default); flex-wrap: wrap; gap: 10px; } .idx-header-title-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .idx-section-title { font-size: 14px; font-weight: 800; color: var(--text-primary); } .idx-badge-kaam { background: rgba(37, 99, 235, 0.12); color: #2563eb; border: 1px solid rgba(37, 99, 235, 0.25); font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 4px; letter-spacing: 0.5px; } .idx-badge-position { background: rgba(5, 150, 105, 0.12); color: #059669; border: 1px solid rgba(5, 150, 105, 0.25); font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 4px; letter-spacing: 0.5px; } .idx-badge-info { font-size: 11px; color: var(--text-muted); background: var(--bg-body); border: 1px solid var(--border-default); padding: 2px 8px; border-radius: 4px; } .idx-timestamp-tag { font-size: 11px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; } .idx-btn-refresh { background: var(--bg-card); border: 1px solid var(--border-default); color: var(--text-primary); font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 6px; cursor: pointer; transition: all 0.15s ease; } .idx-btn-refresh:hover { background: #f1f5f9; border-color: #2563eb; } .idx-table-container { overflow-x: auto; border-radius: 8px; border: 1px solid var(--border-default); } .idx-quant-table { width: 100%; border-collapse: collapse; font-size: 12px; text-align: left; } .idx-quant-table th { background: #f8fafc; color: #475569; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; padding: 8px 12px; border-bottom: 1px solid var(--border-default); white-space: nowrap; } .idx-quant-table td { padding: 10px 12px; border-bottom: 1px solid var(--border-default); color: var(--text-primary); white-space: nowrap; vertical-align: middle; } .idx-quant-table tbody tr { transition: background-color 0.15s ease; } .idx-quant-table tbody tr:hover { background-color: rgba(37, 99, 235, 0.03); } .idx-quant-table tbody tr:last-child td { border-bottom: none; } .idx-loading-cell { text-align: center; padding: 30px !important; color: var(--text-muted); font-style: italic; } .idx-name-cell { display: flex; flex-direction: column; gap: 2px; } .idx-name-text { font-weight: 800; font-size: 13px; color: var(--text-primary); } .idx-spot-text { font-size: 11.5px; font-family: 'JetBrains Mono', monospace; color: var(--text-secondary); } .idx-share-bar-wrap { display: flex; align-items: center; gap: 6px; width: 120px; } .idx-share-track { flex: 1; height: 6px; background: #e2e8f0; border-radius: 3px; overflow: hidden; } .idx-share-fill { height: 100%; background: #2563eb; border-radius: 3px; } .idx-split-bar-wrap { display: flex; flex-direction: column; gap: 3px; width: 160px; } .idx-split-bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: #e2e8f0; } .idx-split-ce { background: #16a34a; height: 100%; } .idx-split-pe { background: #dc2626; height: 100%; } .idx-split-labels { display: flex; justify-content: space-between; font-size: 10px; font-family: 'JetBrains Mono', monospace; } .idx-pcr-badge { display: inline-block; font-weight: 800; font-size: 11px; font-family: 'JetBrains Mono', monospace; padding: 2px 7px; border-radius: 4px; } .idx-pcr-badge.bullish { background: rgba(22, 163, 74, 0.12); color: #16a34a; border: 1px solid rgba(22, 163, 74, 0.25); } .idx-pcr-badge.bearish { background: rgba(220, 38, 38, 0.12); color: #dc2626; border: 1px solid rgba(220, 38, 38, 0.25); } .idx-pcr-badge.neutral { background: rgba(217, 119, 6, 0.12); color: #d97706; border: 1px solid rgba(217, 119, 6, 0.25); } .idx-buildup-badge { display: inline-block; font-weight: 800; font-size: 10.5px; padding: 3px 8px; border-radius: 4px; letter-spacing: 0.3px; } .idx-buildup-badge.bullish { background: #16a34a; color: #ffffff; } .idx-buildup-badge.bearish { background: #dc2626; color: #ffffff; } .idx-buildup-badge.neutral { background: #64748b; color: #ffffff; } .idx-jump-btn { background: var(--bg-body); border: 1px solid var(--border-default); color: #2563eb; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 5px; cursor: pointer; transition: all 0.15s ease; } .idx-jump-btn:hover { background: #2563eb; color: #ffffff; border-color: #2563eb; } /* Multi-Index Mini Cards Grid */ .idx-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 12px; margin-bottom: 16px; } .idx-mini-card { background: var(--bg-card); border: 1px solid var(--border-default); border-radius: 10px; padding: 14px; box-shadow: 0 1px 3px rgba(0,0,0,0.03); display: flex; flex-direction: column; gap: 10px; cursor: pointer; transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .idx-mini-card:hover { transform: translateY(-2px); border-color: #2563eb; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1); } .idx-mini-header { display: flex; justify-content: space-between; align-items: center; } .idx-mini-title { font-size: 13.5px; font-weight: 800; color: var(--text-primary); } .idx-mini-spot { font-size: 12.5px; font-weight: 700; font-family: 'JetBrains Mono', monospace; } .idx-mini-row { display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; color: var(--text-secondary); } .idx-mini-row strong { color: var(--text-primary); font-family: 'JetBrains Mono', monospace; } .idx-mini-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 8px; border-top: 1px solid var(--border-default); margin-top: auto; } /* Smart Money link banner */ .sm-index-link-banner { display: flex; align-items: center; justify-content: space-between; background: linear-gradient(90deg, rgba(37,99,235,0.07), rgba(5,150,105,0.07)); border: 1px solid rgba(37, 99, 235, 0.2); border-radius: 8px; padding: 12px 18px; margin-bottom: 16px; gap: 14px; } .sm-index-link-left { display: flex; align-items: center; gap: 12px; } .sm-index-link-icon { font-size: 22px; } .sm-index-link-title { font-size: 13px; font-weight: 800; color: var(--text-primary); } .sm-index-link-desc { font-size: 11.5px; color: var(--text-secondary); margin-top: 2px; } .sm-index-link-btn { background: #2563eb; color: #ffffff; border: none; padding: 7px 16px; border-radius: 6px; font-weight: 700; font-size: 12px; cursor: pointer; white-space: nowrap; transition: background-color 0.15s ease; } .sm-index-link-btn:hover { background: #1d4ed8; } /* ============================================================================== 📅 Dynamic Calendar Spread Terminal (Dhan Quant Model) Styles ============================================================================== */ .cal-control-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; background: var(--card-bg, #ffffff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 10px; padding: 12px 18px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } .cal-control-left { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; } .cal-control-right { display: flex; align-items: center; gap: 12px; } .cal-control-field { display: flex; flex-direction: column; gap: 4px; } .cal-control-field label { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--text-muted, #64748b); letter-spacing: 0.5px; } .cal-select { height: 36px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--border-color, #cbd5e1); background: var(--input-bg, #f8fafc); color: var(--text-primary, #0f172a); font-size: 13px; font-weight: 600; outline: none; cursor: pointer; transition: all 0.15s ease; } .cal-select:hover, .cal-select:focus { border-color: #3b82f6; background: #ffffff; } .cal-mode-switch { display: inline-flex; background: #f1f5f9; border-radius: 7px; padding: 3px; gap: 3px; border: 1px solid #e2e8f0; } .cal-mode-btn { border: none; background: transparent; color: #475569; font-size: 12px; font-weight: 700; padding: 6px 13px; border-radius: 5px; cursor: pointer; transition: all 0.15s ease; white-space: nowrap; } .cal-mode-btn.active { background: #0f172a; color: #ffffff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } .cal-mode-btn:hover:not(.active) { background: #e2e8f0; color: #0f172a; } /* Executive KPI Strip */ .cal-kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-bottom: 18px; } .cal-kpi-card { background: var(--card-bg, #ffffff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 10px; padding: 14px 16px; position: relative; display: flex; flex-direction: column; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); } .cal-kpi-label { font-size: 11px; font-weight: 700; text-transform: uppercase; color: #64748b; letter-spacing: 0.4px; } .cal-kpi-val { font-size: 18px; font-weight: 800; color: #0f172a; margin: 6px 0 2px 0; font-variant-numeric: tabular-nums; } .cal-kpi-sub { font-size: 11px; font-weight: 600; color: #64748b; line-height: 1.35; } .cal-kpi-badge { display: inline-block; align-self: flex-start; margin-top: 6px; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; background: #f1f5f9; color: #334155; } /* Tables Section */ .cal-tables-wrap { display: flex; flex-direction: column; gap: 20px; } .cal-table-section { background: var(--card-bg, #ffffff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } .cal-table-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; border-bottom: 1px solid #e2e8f0; } .cal-header-ce { background: linear-gradient(90deg, #ecfdf5 0%, #ffffff 100%); border-left: 5px solid #10b981; } .cal-header-pe { background: linear-gradient(90deg, #fef2f2 0%, #ffffff 100%); border-left: 5px solid #ef4444; } .cal-header-title { display: flex; align-items: center; gap: 10px; } .cal-header-title h4 { margin: 0; font-size: 14px; font-weight: 800; letter-spacing: 0.3px; color: #0f172a; } .cal-leg-legend { font-size: 12px; color: #475569; margin-left: 10px; } .cal-leg-legend strong { color: #0f172a; } .cal-header-meta { font-size: 12px; font-weight: 700; color: #64748b; } .cal-table-scroll { overflow-x: auto; max-height: 560px; } .cal-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; font-variant-numeric: tabular-nums; margin: 0; } .cal-table thead th { position: sticky; top: 0; z-index: 10; background: #f8fafc; color: #334155; font-weight: 700; font-size: 11px; padding: 6px 8px; border-bottom: 1px solid #cbd5e1; border-right: 1px solid #f1f5f9; white-space: nowrap; text-align: right; } .cal-table thead tr:first-child th { top: 0; z-index: 11; text-align: center; font-size: 10.5px; letter-spacing: 0.5px; padding: 5px 6px; border-bottom: 1px solid #e2e8f0; } .cal-table thead tr:nth-child(2) th { top: 27px; z-index: 10; } .cal-th-strike { position: sticky !important; left: 0; z-index: 15 !important; background: #f1f5f9 !important; color: #0f172a !important; text-align: center !important; width: 80px; border-right: 2px solid #cbd5e1 !important; } .cal-th-grp { text-transform: uppercase; } .cal-grp-pricing { background: #eff6ff !important; color: #1e40af !important; } .cal-grp-vol { background: #fefce8 !important; color: #854d0e !important; } .cal-grp-greeks { background: #faf5ff !important; color: #6b21a8 !important; } .cal-grp-liq { background: #f0fdf4 !important; color: #166534 !important; } .cal-table tbody td { padding: 5px 8px; border-bottom: 1px solid #f1f5f9; border-right: 1px solid #f8fafc; text-align: right; white-space: nowrap; font-size: 12px; } .cal-td-strike { position: sticky; left: 0; z-index: 5; background: #ffffff; font-weight: 800; text-align: center !important; border-right: 2px solid #cbd5e1 !important; color: #0f172a; } .cal-table tbody tr:hover td { background-color: #f1f5f9; } .cal-table tbody tr.atm-row td { background-color: #fef3c7 !important; font-weight: 700; } .cal-table tbody tr.atm-row .cal-td-strike { background-color: #fde68a !important; color: #92400e; border-left: 4px solid #d97706; } /* Specific cell formatters */ .cal-pill { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 11px; font-weight: 700; } .cal-pill-edge { background: #dcfce7; color: #15803d; border: 1px solid #86efac; } .cal-pill-contango { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; } .cal-ratio-box { display: flex; align-items: center; justify-content: flex-end; gap: 6px; } .cal-ratio-bar-bg { width: 40px; height: 6px; background: #e2e8f0; border-radius: 3px; overflow: hidden; display: inline-block; } .cal-ratio-bar-fill { height: 100%; background: #3b82f6; border-radius: 3px; } .cal-delta-pill { display: inline-block; padding: 1px 5px; border-radius: 3px; font-size: 10.5px; font-weight: 700; } .cal-delta-neutral { background: #e0e7ff; color: #3730a3; } /* Trading edge explanatory footnote */ .cal-guide-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px 18px; margin-top: 10px; } .cal-guide-title { font-size: 13px; font-weight: 800; color: #0f172a; margin-bottom: 10px; } .cal-guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; } .cal-guide-item { font-size: 11.5px; line-height: 1.45; color: #475569; } .cal-guide-item strong { color: #0f172a; } /* ============================================================================== 🎯 Interactive Strategy Analyzer & Payoff Simulator Styles ============================================================================== */ .cal-strategy-analyzer { background: #0f172a; color: #f8fafc; border-radius: 12px; padding: 16px 20px; margin-bottom: 20px; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18); border: 1px solid #1e293b; } .cal-analyzer-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid #334155; margin-bottom: 16px; } .cal-analyzer-title-wrap { display: flex; align-items: center; gap: 12px; } .cal-analyzer-icon { font-size: 26px; } .cal-analyzer-title-wrap h3 { margin: 0; font-size: 16px; font-weight: 800; color: #ffffff; letter-spacing: 0.3px; } .cal-analyzer-sub { font-size: 12px; color: #94a3b8; } .cal-analyzer-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .cal-stepper-wrap { display: inline-flex; align-items: center; background: #1e293b; border-radius: 6px; border: 1px solid #475569; overflow: hidden; } .cal-step-btn { background: transparent; border: none; color: #94a3b8; font-size: 12px; font-weight: 700; padding: 6px 10px; cursor: pointer; transition: all 0.15s; } .cal-step-btn:hover { background: #334155; color: #ffffff; } .cal-strike-picker { background: transparent; border: none; color: #38bdf8; font-weight: 800; font-size: 13px; padding: 6px 8px; outline: none; cursor: pointer; } .cal-strike-picker option { background: #0f172a; color: #f8fafc; } .cal-type-toggle { display: inline-flex; background: #1e293b; border-radius: 6px; padding: 2px; border: 1px solid #334155; } .cal-type-btn { background: transparent; border: none; color: #94a3b8; font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: 4px; cursor: pointer; transition: all 0.15s; } .cal-type-btn.active#btnCalTypeCe { background: #059669; color: #ffffff; } .cal-type-btn.active#btnCalTypePe { background: #dc2626; color: #ffffff; } .cal-lot-stepper { display: inline-flex; align-items: center; background: #1e293b; border-radius: 6px; border: 1px solid #334155; padding: 2px 6px; } .cal-lot-btn { background: #334155; border: none; color: #ffffff; font-size: 14px; font-weight: 800; width: 24px; height: 24px; border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; } .cal-lot-btn:hover { background: #475569; } .cal-lot-count { font-size: 12px; font-weight: 700; color: #f8fafc; padding: 0 10px; } /* Dual Leg Blueprint Cards */ .cal-legs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; } @media (max-width: 768px) { .cal-legs-grid { grid-template-columns: 1fr; } } .cal-leg-card { background: #1e293b; border-radius: 8px; padding: 12px 14px; border: 1px solid #334155; display: flex; flex-direction: column; gap: 8px; } .cal-leg-buy { border-left: 4px solid #10b981; } .cal-leg-sell { border-left: 4px solid #ef4444; } .cal-leg-card-header { display: flex; justify-content: space-between; align-items: center; } .cal-leg-action-badge { font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 4px; letter-spacing: 0.5px; } .cal-leg-action-badge.buy { background: #064e3b; color: #34d399; border: 1px solid #059669; } .cal-leg-action-badge.sell { background: #7f1d1d; color: #f87171; border: 1px solid #dc2626; } .cal-leg-expiry { font-size: 11px; font-weight: 600; color: #94a3b8; } .cal-leg-pricing { display: flex; align-items: baseline; gap: 12px; } .cal-leg-ltp { font-size: 20px; font-weight: 800; color: #ffffff; } .cal-leg-bidask { font-size: 11px; color: #94a3b8; } .cal-leg-greeks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; background: #0f172a; border-radius: 6px; padding: 6px 10px; } .cal-grk-item { display: flex; flex-direction: column; } .cal-grk-item span { font-size: 10px; color: #64748b; font-weight: 600; } .cal-grk-item strong { font-size: 12px; color: #cbd5e1; } /* Risk Profile Cards */ .cal-risk-profile-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 12px; } .cal-risk-card { background: #1e293b; border-radius: 8px; padding: 10px 14px; display: flex; flex-direction: column; border: 1px solid #334155; } .cal-risk-label { font-size: 10px; font-weight: 700; text-transform: uppercase; color: #94a3b8; } .cal-risk-val { font-size: 17px; font-weight: 800; margin: 4px 0 2px 0; } .cal-risk-val.text-blue { color: #38bdf8; } .cal-risk-val.text-green { color: #34d399; } .cal-risk-val.text-red { color: #f87171; } .cal-risk-sub { font-size: 10.5px; color: #64748b; } /* Net Greeks Matrix */ .cal-net-greeks-bar { display: flex; flex-wrap: wrap; gap: 16px; background: #1e293b; border-radius: 8px; padding: 8px 14px; margin-bottom: 14px; border: 1px solid #334155; font-size: 12px; } .cal-net-grk { display: flex; align-items: center; gap: 6px; } .cal-net-grk span { color: #94a3b8; } .cal-net-grk strong { color: #ffffff; } .cal-tag { font-size: 9px; font-weight: 800; padding: 1px 5px; border-radius: 3px; background: #334155; color: #38bdf8; } /* Payoff Chart */ .cal-payoff-chart-wrap { background: #1e293b; border-radius: 8px; padding: 12px 14px; border: 1px solid #334155; } .cal-payoff-chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .cal-payoff-title { font-size: 12px; font-weight: 800; color: #ffffff; } .cal-payoff-legend { font-size: 11px; color: #94a3b8; display: flex; align-items: center; gap: 10px; } .dot-green { width: 8px; height: 8px; border-radius: 50%; background: #34d399; display: inline-block; } .dot-red { width: 8px; height: 8px; border-radius: 50%; background: #f87171; display: inline-block; } .dot-blue { width: 8px; height: 8px; border-radius: 50%; background: #38bdf8; display: inline-block; } .cal-payoff-tooltip { position: absolute; background: rgba(15, 23, 42, 0.95); border: 1px solid #38bdf8; color: #ffffff; padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; pointer-events: none; z-index: 20; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); } /* Selected row in the table */ .cal-table tbody tr { cursor: pointer; transition: background-color 0.15s ease; } .cal-table tbody tr.selected-strategy-row td { background-color: #eff6ff !important; font-weight: 700; } .cal-table tbody tr.selected-strategy-row .cal-td-strike { background-color: #2563eb !important; color: #ffffff !important; box-shadow: inset 0 0 0 2px #1d4ed8; } .cal-table tbody tr.selected-strategy-row.atm-row .cal-td-strike { background-color: #d97706 !important; color: #ffffff !important; } /* ============================================================================== 📑 Excel Spread Sheet (Calendar & Diagonal Builder) - Dhan Quant Workspace ============================================================================== */ .excel-desk-switcher { display: flex; gap: 8px; margin-bottom: 14px; background: #0f172a; padding: 6px; border-radius: 8px; border: 1px solid #1e293b; } .excel-desk-tab-btn { padding: 8px 18px; border-radius: 6px; background: transparent; color: #94a3b8; border: none; font-size: 13px; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all 0.2s ease; } .excel-desk-tab-btn:hover { color: #f8fafc; background: rgba(255, 255, 255, 0.05); } .excel-desk-tab-btn.active { background: #2563eb; color: #ffffff; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35); } .excel-sheet-container { background: #0b111e; border: 1px solid #1e293b; border-radius: 10px; overflow: hidden; margin-bottom: 20px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); } .excel-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: #0f172a; border-bottom: 1px solid #1e293b; flex-wrap: wrap; gap: 10px; } .excel-toolbar-left { display: flex; flex-direction: column; } .excel-sheet-title { font-size: 15px; font-weight: 800; color: #f8fafc; letter-spacing: -0.2px; } .excel-sheet-sub { font-size: 11px; color: #94a3b8; margin-top: 2px; } .excel-toolbar-actions { display: flex; gap: 6px; flex-wrap: wrap; } .excel-btn { padding: 6px 12px; font-size: 11.5px; font-weight: 700; border-radius: 6px; border: 1px solid #334155; background: #1e293b; color: #cbd5e1; cursor: pointer; transition: all 0.15s ease; display: inline-flex; align-items: center; gap: 4px; } .excel-btn:hover { background: #334155; color: #ffffff; border-color: #475569; } .excel-btn.btn-primary { background: #059669; border-color: #047857; color: #ffffff; } .excel-btn.btn-primary:hover { background: #10b981; } .excel-btn.btn-danger { background: rgba(239, 68, 68, 0.15); border-color: #ef4444; color: #fca5a5; } .excel-btn.btn-danger:hover { background: #ef4444; color: #ffffff; } .excel-table-scroll { overflow-x: auto; max-height: 650px; } .excel-grid-table { width: 100%; border-collapse: collapse; font-size: 12px; font-family: 'JetBrains Mono', -apple-system, BlinkMacSystemFont, 'Segoe UI', monospace; background: #0b111e; } .excel-grid-table thead th { position: sticky; top: 0; background: #111827; color: #94a3b8; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; padding: 8px 10px; border: 1px solid #1f293d; white-space: nowrap; z-index: 10; } .excel-grid-table tbody td { padding: 6px 8px; border: 1px solid #162032; white-space: nowrap; vertical-align: middle; } .excel-grid-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.015); } .excel-grid-table tbody tr:hover { background: rgba(37, 99, 235, 0.08); } .excel-cell-select { background: #1e293b; border: 1px solid #334155; color: #f8fafc; font-size: 11.5px; font-weight: 700; padding: 3px 6px; border-radius: 4px; outline: none; cursor: pointer; } .excel-cell-select.select-ce { color: #10b981; border-color: rgba(16, 185, 129, 0.4); } .excel-cell-select.select-pe { color: #f43f5e; border-color: rgba(244, 63, 94, 0.4); } .excel-strike-box { display: inline-flex; align-items: center; background: #131d2e; border: 1px solid #283548; border-radius: 5px; overflow: hidden; } .excel-strike-btn { background: transparent; border: none; color: #94a3b8; font-weight: 800; padding: 2px 7px; cursor: pointer; font-size: 11px; } .excel-strike-btn:hover { background: #2563eb; color: #ffffff; } .excel-strike-select { background: transparent; border: none; color: #f8fafc; font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 800; padding: 3px 6px; outline: none; cursor: pointer; } .excel-strike-select option { background: #0f172a; color: #f8fafc; } .spread-tag { font-size: 9.5px; font-weight: 800; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; display: inline-block; } .spread-tag.tag-cal { background: rgba(59, 130, 246, 0.18); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.35); } .spread-tag.tag-diag-bull { background: rgba(16, 185, 129, 0.18); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.35); } .spread-tag.tag-diag-bear { background: rgba(245, 158, 11, 0.18); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.35); } .spread-tag.tag-diag-custom { background: rgba(168, 85, 247, 0.18); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.35); } .excel-action-btn { background: transparent; border: 1px solid #334155; color: #94a3b8; border-radius: 4px; padding: 2px 6px; font-size: 11px; cursor: pointer; margin-right: 3px; transition: all 0.15s ease; } .excel-action-btn:hover { background: #1e293b; color: #f8fafc; border-color: #64748b; } .excel-action-btn.del-btn:hover { background: #ef4444; color: #ffffff; border-color: #dc2626; } /* ========================================================================== 📊 Multi-Chart Desk (Spot, Future, ATM CE & ATM PE) ========================================================================== */ .mc-control-band { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; background: linear-gradient(135deg, #0d1117 0%, #161b27 100%); border: 1px solid rgba(56, 189, 248, 0.12); border-radius: 12px; padding: 12px 18px; margin-bottom: 12px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 24px rgba(0, 0, 0, 0.4); backdrop-filter: blur(8px); } .mc-select { height: 30px; background: #1e2433; border: 1px solid #333d52; color: #f8fafc; border-radius: 5px; padding: 2px 8px; font-size: 12px; font-family: inherit; cursor: pointer; } .mc-select:focus { border-color: #0284c7; } .mc-strike-ctrl-group { display: flex; flex-direction: column; gap: 3px; } .ctrl-sublabel { font-size: 10px; font-weight: 600; color: #94a3b8; text-transform: uppercase; } .mc-strike-box { display: flex; align-items: center; background: #1e2433; border: 1px solid #333d52; border-radius: 5px; overflow: hidden; height: 30px; } .mc-step-btn { background: #2a3346; border: none; color: #f8fafc; width: 26px; height: 100%; font-size: 14px; font-weight: bold; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s ease; } .mc-step-btn:hover { background: #3b4760; } .mc-strike-select { border: none; background: transparent; color: #38bdf8; font-weight: 700; font-family: 'JetBrains Mono', monospace; font-size: 12px; padding: 0 8px; cursor: pointer; outline: none; } .mc-chips-container { display: flex; align-items: center; gap: 4px; margin-left: 4px; } .mc-chip { background: #1e2433; border: 1px solid #333d52; color: #94a3b8; font-family: 'JetBrains Mono', monospace; font-size: 11px; padding: 4px 10px; border-radius: 20px; cursor: pointer; transition: all 0.15s ease; } .mc-chip:hover { background: #2a3346; color: #f8fafc; } .mc-chip.active { background: linear-gradient(135deg, #0284c7, #0369a1); color: #ffffff; border-color: #38bdf8; font-weight: 700; box-shadow: 0 2px 8px rgba(2, 132, 199, 0.4); } .mc-actions-group { margin-left: auto; display: flex; align-items: center; gap: 12px; } #btnMcRefresh { background: linear-gradient(135deg, #2563eb, #1d4ed8); color: white; font-weight: 700; padding: 7px 18px; border-radius: 8px; border: none; cursor: pointer; font-size: 13px; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35); transition: all 0.15s ease; } #btnMcRefresh:hover { background: linear-gradient(135deg, #3b82f6, #2563eb); box-shadow: 0 6px 18px rgba(37, 99, 235, 0.55); } /* KPI Summary Strip */ .mc-kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-bottom: 12px; } .mc-kpi-card { background: linear-gradient(145deg, #0d1117, #161b27); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; position: relative; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .mc-kpi-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); border-color: rgba(56, 189, 248, 0.3); } /* Per-card left-border accent */ .spot-card { border-left: 3px solid #38bdf8; } .fut-card { border-left: 3px solid #c084fc; } .ce-card { border-left: 3px solid #34d399; } .pe-card { border-left: 3px solid #f87171; } .straddle-card { border-left: 3px solid #fbbf24; } .mc-kpi-header { display: flex; align-items: center; justify-content: space-between; } .mc-kpi-badge { font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 4px; letter-spacing: 0.5px; } .spot-bg { background: rgba(2, 132, 199, 0.2); color: #38bdf8; border: 1px solid rgba(2, 132, 199, 0.4); } .fut-bg { background: rgba(139, 92, 246, 0.2); color: #c084fc; border: 1px solid rgba(139, 92, 246, 0.4); } .ce-bg { background: rgba(16, 185, 129, 0.2); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.4); } .pe-bg { background: rgba(239, 68, 68, 0.2); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.4); } .straddle-bg { background: rgba(245, 158, 11, 0.2); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.4); } .mc-kpi-sub { font-size: 11px; color: #94a3b8; font-family: 'JetBrains Mono', monospace; } .mc-kpi-body { display: flex; align-items: baseline; gap: 8px; } .mc-kpi-val { font-size: 22px; font-weight: 800; font-family: 'JetBrains Mono', monospace; color: #f8fafc; } .mc-kpi-chg { font-size: 12px; font-family: 'JetBrains Mono', monospace; font-weight: 600; } .mc-kpi-footer { font-size: 11px; color: #64748b; font-family: 'JetBrains Mono', monospace; } .mc-basis-pill { background: #1e293b; color: #cbd5e1; padding: 1px 6px; border-radius: 4px; font-size: 11px; } /* Quad Chart Grid */ .mc-grid-container { display: grid; gap: 14px; width: 100%; } .mc-grid-container.grid-2x2 { grid-template-columns: repeat(2, 1fr); } .mc-grid-container.dual-2x1 { grid-template-columns: repeat(2, 1fr); } .mc-grid-container.stack-4x1 { grid-template-columns: 1fr; } @media (max-width: 1024px) { .mc-grid-container.grid-2x2 { grid-template-columns: 1fr; } } .mc-chart-card { background: #0b0f1a; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; min-height: 380px; position: relative; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.03); transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .mc-chart-card:hover { border-color: rgba(56, 189, 248, 0.25); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(56, 189, 248, 0.1); } /* Per-chart accent top borders */ #mcSpotCard { border-top: 2px solid #38bdf8; } #mcFutCard { border-top: 2px solid #c084fc; } #mcCeCard { border-top: 2px solid #34d399; } #mcPeCard { border-top: 2px solid #f87171; } .mc-chart-card.maximized { position: fixed !important; inset: 65px 16px 16px 16px !important; z-index: 10000 !important; min-height: unset !important; height: calc(100vh - 85px) !important; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85) !important; } .mc-chart-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: rgba(255, 255, 255, 0.025); border-bottom: 1px solid rgba(255, 255, 255, 0.06); backdrop-filter: blur(4px); } .mc-chart-title-area { display: flex; align-items: center; gap: 8px; } .mc-pane-badge { font-size: 9px; font-weight: 800; padding: 2px 5px; border-radius: 3px; letter-spacing: 0.5px; } .mc-pane-title { font-size: 14px; font-weight: 700; color: #e2e8f0; letter-spacing: -0.2px; } .mc-tag-interval, .mc-tag-basis, .mc-tag-greeks { font-size: 10px; font-family: 'JetBrains Mono', monospace; padding: 2px 6px; border-radius: 3px; background: #1e293b; color: #94a3b8; } .mc-chart-metric-area { display: flex; align-items: center; gap: 8px; } .mc-pane-price { font-size: 13px; font-weight: 700; font-family: 'JetBrains Mono', monospace; color: #f8fafc; } .mc-pane-chg { font-size: 11px; font-family: 'JetBrains Mono', monospace; font-weight: 600; } .mc-btn-tool { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); color: #94a3b8; border-radius: 6px; width: 28px; height: 28px; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s ease; padding: 0; } .mc-btn-tool:hover { background: rgba(56, 189, 248, 0.15); color: #38bdf8; border-color: rgba(56, 189, 248, 0.4); } .mc-canvas-container { position: relative; flex: 1; min-height: 290px; width: 100%; } .mc-canvas-container canvas { width: 100%; height: 100%; display: block; } /* Loading overlay for future use */ .mc-loading-overlay { position: absolute; inset: 0; background: rgba(11, 15, 26, 0.75); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; border-radius: 14px; z-index: 10; } .mc-loading-spinner { width: 32px; height: 32px; border: 3px solid rgba(56, 189, 248, 0.2); border-top-color: #38bdf8; border-radius: 50%; animation: mcSpin 0.7s linear infinite; } @keyframes mcSpin { to { transform: rotate(360deg); } } /* Floating Synchronized HUD Tooltip */ .mc-hud-tooltip { position: absolute; pointer-events: none; backdrop-filter: blur(12px); background: rgba(19, 23, 34, 0.95); border: 1px solid rgba(56, 189, 248, 0.35); border-radius: 8px; padding: 8px 12px; font-family: 'JetBrains Mono', monospace; font-size: 11px; z-index: 20; display: none; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.65), 0 0 15px rgba(56, 189, 248, 0.1); line-height: 1.4; white-space: nowrap; } .mc-hud-row { display: flex; justify-content: space-between; gap: 12px; } .mc-hud-label { color: #94a3b8; } .mc-hud-val { font-weight: 600; color: #f8fafc; } /* ========================================================================== 🏦 MTA - MTF Analytics & Institutional Flow Engine Inspired by mtf.trading & Bloomberg Terminal ========================================================================== */ .mta-panel { display: none; flex-direction: column; gap: 16px; animation: fadeIn 0.2s ease; } .mta-panel.active { display: flex; } /* Hero KPI Strip */ .mta-hero-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; } .mta-hero-card { position: relative; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px 18px; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.02); display: flex; flex-direction: column; justify-content: space-between; min-height: 110px; overflow: hidden; transition: transform 0.15s ease, box-shadow 0.15s ease; } .mta-hero-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08); } .mta-hero-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; } .mta-hero-nse::before { background: #2563eb; } .mta-hero-bse::before { background: #16a34a; } .mta-hero-combined::before { background: linear-gradient(90deg, #2563eb, #16a34a); } .mta-hero-stocks::before { background: #8b5cf6; } .mta-hero-fresh::before { background: #d97706; } .mta-hero-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #64748b; margin-bottom: 6px; } .mta-hero-val { font-size: 24px; font-weight: 800; font-family: 'JetBrains Mono', 'Inter', monospace; letter-spacing: -0.02em; color: #0f172a; line-height: 1.2; } .mta-hero-sub { font-size: 11.5px; color: #64748b; margin-top: 4px; } .mta-hero-badge { position: absolute; top: 14px; right: 14px; font-size: 9.5px; font-weight: 800; padding: 2px 7px; border-radius: 5px; text-transform: uppercase; letter-spacing: 0.05em; } /* Inner Navigation Bar */ .mta-inner-nav { display: flex; gap: 4px; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 10px; padding: 4px; overflow-x: auto; scrollbar-width: none; } .mta-inner-nav::-webkit-scrollbar { display: none; } .mta-inner-tab { background: transparent; border: none; border-radius: 7px; padding: 8px 16px; font-size: 12.5px; font-weight: 700; font-family: inherit; color: #475569; cursor: pointer; white-space: nowrap; transition: all 0.15s ease; display: inline-flex; align-items: center; gap: 6px; } .mta-inner-tab:hover { color: #0f172a; background: rgba(255, 255, 255, 0.6); } .mta-inner-tab.active { background: #ffffff; color: #2563eb; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08); } /* Inner Panels */ .mta-inner-panel { display: none; } .mta-inner-panel.active { display: block; } /* Generic Section Card */ .mta-section { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px 20px; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03); } .mta-section-header { display: flex; justify-content: space-between; align-items: center; font-size: 14.5px; font-weight: 800; color: #0f172a; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid #f1f5f9; } /* Overview Layout */ .mta-overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 900px) { .mta-overview-grid { grid-template-columns: 1fr; } } .mta-session-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .mta-session-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px; } .mta-session-label { font-size: 11px; font-weight: 700; text-transform: uppercase; color: #64748b; margin-bottom: 4px; } .mta-session-val { font-size: 20px; font-weight: 800; font-family: 'JetBrains Mono', monospace; color: #0f172a; } .mta-session-sub { font-size: 10.5px; color: #94a3b8; margin-top: 3px; } /* Sparkline Container */ .mta-sparkline { width: 100%; height: 125px; background: #f8fafc; border-radius: 8px; border: 1px solid #f1f5f9; position: relative; overflow: hidden; } .mta-spark-legend { display: flex; align-items: center; font-size: 11px; color: #64748b; margin-top: 8px; } .mta-spark-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; } /* Tables */ .mta-table { width: 100%; border-collapse: collapse; font-size: 12.5px; } .mta-table th { background: #f8fafc; color: #475569; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; padding: 10px 12px; text-align: left; border-bottom: 1px solid #e2e8f0; } .mta-table td { padding: 10px 12px; border-bottom: 1px solid #f1f5f9; color: #1e293b; } .mta-table tbody tr:hover { background: #f8fafc; } .mta-table-sticky thead th { position: sticky; top: 0; z-index: 5; box-shadow: 0 1px 2px rgba(0,0,0,0.05); } .mta-row-heavy { background: rgba(254, 242, 242, 0.45); } .mta-row-heavy:hover { background: rgba(254, 242, 242, 0.8) !important; } .mta-row-sig { background: rgba(254, 243, 199, 0.25); } .mta-sym { font-family: 'JetBrains Mono', monospace; font-weight: 800; color: #2563eb; } .mta-name { font-size: 11.5px; color: #64748b; } /* Badges */ .mta-badge { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 5px; line-height: 1.3; } .mta-badge-nse { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; } .mta-badge-bse { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; } .mta-badge-fno { background: #faf5ff; color: #7c3aed; border: 1px solid #e9d5ff; } .mta-badge-cash { background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; } .mta-badge-retail { background: #fef3c7; color: #b45309; border: 1px solid #fde68a; } .mta-badge-inst { background: #dcfce7; color: #15803d; border: 1px solid #86efac; } .mta-badge-momentum { background: #eff6ff; color: #1d4ed8; border: 1px solid #93c5fd; } .mta-badge-spec { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; } /* Inputs & Controls */ .mta-input, .mta-select { border: 1px solid #cbd5e1; background: #ffffff; color: #0f172a; font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 6px; outline: none; transition: border-color 0.15s ease; } .mta-input:focus, .mta-select:focus { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15); } /* Signal Strip for Retail Tab */ .mta-signal-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 16px; } .mta-signal-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03); } .mta-signal-retail { border-left: 4px solid #d97706; } .mta-signal-inst { border-left: 4px solid #16a34a; } .mta-signal-warn { border-left: 4px solid #dc2626; } .mta-signal-icon { font-size: 20px; margin-bottom: 6px; } .mta-signal-title { font-size: 13px; font-weight: 800; color: #0f172a; } .mta-signal-val { font-size: 24px; font-weight: 800; font-family: 'JetBrains Mono', monospace; margin: 4px 0; color: #0f172a; } .mta-signal-desc { font-size: 11px; color: #64748b; line-height: 1.4; } /* Retail Split Row */ .mta-retail-split-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; } @media (max-width: 900px) { .mta-retail-split-row { grid-template-columns: 1fr; } } .mta-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .mta-sum-item { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; } .mta-sum-label { font-size: 11px; font-weight: 700; text-transform: uppercase; color: #64748b; margin-bottom: 4px; } .mta-sum-val { font-size: 18px; font-weight: 800; font-family: 'JetBrains Mono', monospace; } .mta-donut-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 10px 0; } .mta-donut { position: relative; display: inline-flex; align-items: center; justify-content: center; } .mta-donut-center-label { position: absolute; text-align: center; font-size: 13px; font-weight: 800; font-family: 'JetBrains Mono', monospace; color: #0f172a; line-height: 1.15; } .mta-donut-center-label small { font-size: 9px; font-weight: 600; color: #64748b; text-transform: uppercase; } .mta-donut-legend { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 240px; } .mta-donut-leg-item { display: flex; align-items: center; font-size: 11.5px; color: #475569; } /* Signal Strength Bar in Table */ .mta-signal-bar-wrap { background: #f1f5f9; border-radius: 4px; height: 6px; width: 90px; overflow: hidden; } .mta-signal-bar { height: 100%; border-radius: 4px; transition: width 0.4s ease; } .mta-insight-text { font-size: 11.5px; color: #475569; font-style: italic; } /* Concentration Heatmap */ .mta-heatmap { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 0; } .mta-heatmap-cell { border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #ffffff; font-weight: 800; font-family: 'JetBrains Mono', monospace; cursor: pointer; transition: transform 0.12s ease, filter 0.12s ease; box-shadow: 0 1px 2px rgba(0,0,0,0.15); overflow: hidden; text-align: center; padding: 2px; } .mta-heatmap-cell:hover { transform: scale(1.1); filter: brightness(1.15); z-index: 10; } /* Historical Trend Chart Component */ .mta-tf-group { display: inline-flex; border: 1px solid #cbd5e1; border-radius: 6px; overflow: hidden; background: #ffffff; } .mta-tf-btn { background: transparent; border: none; border-right: 1px solid #cbd5e1; padding: 4px 10px; font-size: 11.5px; font-weight: 700; color: #64748b; cursor: pointer; transition: all 0.12s ease; } .mta-tf-btn:last-child { border-right: none; } .mta-tf-btn:hover { background: #f8fafc; color: #0f172a; } .mta-tf-btn.active { background: #2563eb; color: #ffffff; } .mta-toggle-label { font-size: 12px; font-weight: 600; color: #475569; display: flex; align-items: center; cursor: pointer; } .mta-trend-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 14px 0; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px 14px; } .mta-tstat-label { font-size: 10px; font-weight: 700; text-transform: uppercase; color: #64748b; } .mta-tstat-val { font-size: 15px; font-weight: 800; font-family: 'JetBrains Mono', monospace; color: #0f172a; margin-top: 2px; } .mta-chart-container { position: relative; width: 100%; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; } .mta-chart-tooltip { position: absolute; pointer-events: none; background: rgba(15, 23, 42, 0.95); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); border-radius: 8px; padding: 10px 14px; z-index: 50; color: #f8fafc; min-width: 230px; line-height: 1.4; transition: opacity 0.08s ease; } .mta-tt-date { font-size: 11.5px; font-weight: 800; color: #94a3b8; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); letter-spacing: 0.02em; } .mta-tt-row { display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; margin-bottom: 3px; gap: 14px; } .mta-tt-row strong { font-family: 'JetBrains Mono', monospace; font-weight: 700; } .mta-tt-divider { height: 1px; background: rgba(255, 255, 255, 0.1); margin: 6px 0; } .mta-chart-legend { display: flex; align-items: center; font-size: 11.5px; color: #64748b; margin-top: 10px; } /* Broker Desk Top 3 Cards */ .mta-broker-top3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 16px; } .mta-broker-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px; position: relative; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03); } .mta-broker-rank-1 { border-top: 3px solid #f59e0b; } .mta-broker-rank-2 { border-top: 3px solid #94a3b8; } .mta-broker-rank-3 { border-top: 3px solid #d97706; } .mta-broker-medal { font-size: 24px; margin-bottom: 6px; } .mta-broker-name { font-size: 14px; font-weight: 800; color: #0f172a; } .mta-broker-book { font-size: 22px; font-weight: 800; font-family: 'JetBrains Mono', monospace; color: #2563eb; margin: 6px 0; } .mta-broker-share { font-size: 11.5px; color: #64748b; } .mta-broker-bar-wrap { background: #f1f5f9; border-radius: 4px; height: 6px; margin-top: 10px; overflow: hidden; } .mta-broker-bar { height: 100%; background: #2563eb; border-radius: 4px; } /* HHI Section */ .mta-hhi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; } .mta-hhi-stat { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px; } .mta-hhi-label { font-size: 11px; font-weight: 700; text-transform: uppercase; color: #64748b; } .mta-hhi-val { font-size: 24px; font-weight: 800; font-family: 'JetBrains Mono', monospace; color: #0f172a; margin: 4px 0; } .mta-hhi-sub { font-size: 10.5px; color: #94a3b8; line-height: 1.35; } /* Global Bar Chart */ .mta-global-bar-chart { display: flex; flex-direction: column; gap: 10px; } .mta-global-bar-row { display: grid; grid-template-columns: 140px 1fr 90px; align-items: center; gap: 12px; } .mta-global-bar-label { font-size: 12.5px; font-weight: 700; color: #1e293b; white-space: nowrap; } .mta-global-bar-track { background: #f1f5f9; border-radius: 6px; height: 14px; overflow: hidden; } .mta-global-bar-fill { height: 100%; border-radius: 6px; transition: width 0.5s ease; } .mta-global-bar-val { font-size: 12px; font-weight: 700; font-family: 'JetBrains Mono', monospace; text-align: right; } /* Color Utilities */ .text-blue { color: #2563eb !important; } .text-green { color: #16a34a !important; } .text-red { color: #dc2626 !important; } .text-amber { color: #d97706 !important; } .text-purple { color: #7c3aed !important; } /* Movers & Squeeze Radar Grid */ .mta-movers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 16px; } @media (max-width: 900px) { .mta-movers-grid { grid-template-columns: 1fr; } } /* Stock Drilldown Modal */ .mta-modal-backdrop { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(15, 23, 42, 0.65); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; } .mta-modal-box { background: #ffffff; border-radius: 12px; box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.08); width: 100%; max-width: 720px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; animation: mtaModalFadeIn 0.2s ease-out; } @keyframes mtaModalFadeIn { from { opacity: 0; transform: scale(0.96) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } } .mta-modal-header { padding: 16px 20px; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center; background: #fafafa; } .mta-modal-body { padding: 18px 20px; overflow-y: auto; flex: 1; } .mta-modal-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(115px, 1fr)); gap: 10px; } .mta-mstat { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px 12px; } .mta-mstat-lbl { font-size: 10.5px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 4px; } .mta-mstat-val { font-size: 15px; font-weight: 800; font-family: 'JetBrains Mono', monospace; color: #0f172a; } /* Interactive Table Hover */ .mta-table tr[onclick]:hover { background-color: #f1f5f9 !important; cursor: pointer; } /* Segmented Filter Pills */ .mta-pills-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .mta-pill { padding: 5px 12px; border-radius: 20px; font-size: 11.5px; font-weight: 700; border: 1px solid #cbd5e1; background: #ffffff; color: #475569; cursor: pointer; transition: all 0.15s ease; display: inline-flex; align-items: center; gap: 5px; } .mta-pill:hover { background: #f1f5f9; border-color: #94a3b8; color: #0f172a; } .mta-pill.active { background: #2563eb; color: #ffffff; border-color: #2563eb; box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25); } .mta-pill-count { font-size: 10px; background: rgba(0, 0, 0, 0.08); padding: 1px 6px; border-radius: 10px; } .mta-pill.active .mta-pill-count { background: rgba(255, 255, 255, 0.25); color: #ffffff; } /* Dual Side-by-Side Grid */ .mta-dual-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 16px; margin-bottom: 16px; } .mta-side-card { background: #ffffff; border-radius: 10px; border: 1px solid #e2e8f0; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.03); } .mta-side-header { padding: 10px 14px; font-size: 12.5px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #e2e8f0; } .mta-side-body { padding: 6px 12px; } /* ========================================================================== 🧮 MTF CALCULATOR & COMPARISON STYLES ========================================================================== */ .theme-toggle-btn { background: #ffffff; color: #0f172a; border: 1px solid #cbd5e1; padding: 5px 12px; border-radius: 6px; cursor: pointer; font-size: 11px; font-weight: 700; transition: all 0.2s; display: inline-flex; align-items: center; gap: 4px; } .theme-toggle-btn:hover { background: #f1f5f9; border-color: #94a3b8; } .mta-calc-grid { display: grid; grid-template-columns: minmax(420px, 1.15fr) minmax(380px, 1fr); gap: 20px; } @media (max-width: 960px) { .mta-calc-grid { grid-template-columns: 1fr; } } .mta-calc-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); } .mta-calc-field { margin-bottom: 12px; } .mta-calc-stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .mta-calc-stat-box { background: var(--bg-card-hover, #f8fafc); border: 1px solid var(--border-default, #e2e8f0); border-radius: 8px; padding: 10px 12px; } .mta-calc-stat-lbl { font-size: 11px; font-weight: 700; color: var(--text-muted, #64748b); margin-bottom: 3px; text-transform: uppercase; letter-spacing: 0.3px; } .mta-calc-stat-val { font-size: 17px; font-weight: 800; font-family: 'JetBrains Mono', monospace; color: var(--text-primary, #0f172a); } .mta-calc-stat-sub { font-size: 10px; color: var(--text-muted, #64748b); margin-top: 2px; } /* Spacious MTF Calculator Input Boxes */ .mta-calc-box { background: var(--bg-card-hover, #f8fafc); border: 1px solid var(--border-default, #e2e8f0); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .mta-calc-box:focus-within { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); } .mta-calc-box-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; flex-wrap: wrap; gap: 6px; } .mta-calc-box-label { font-size: 12px; font-weight: 800; color: var(--text-primary, #0f172a); display: flex; align-items: center; gap: 6px; } .mta-calc-input-row { display: flex; align-items: center; gap: 10px; position: relative; } .mta-calc-currency-sign { font-size: 20px; font-weight: 800; color: #2563eb; font-family: 'JetBrains Mono', monospace; user-select: none; } .mta-calc-large-input { width: 100%; font-size: 20px !important; font-weight: 800 !important; font-family: 'JetBrains Mono', monospace !important; padding: 8px 14px !important; border-radius: 8px !important; border: 1px solid var(--border-default, #cbd5e1) !important; background: var(--bg-card, #ffffff) !important; color: var(--text-primary, #0f172a) !important; outline: none; transition: all 0.15s ease; } .mta-calc-large-input:focus { border-color: #2563eb !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18) !important; } .mta-calc-preview-badge { font-size: 11px; font-weight: 700; color: #2563eb; background: #eff6ff; border: 1px solid #bfdbfe; padding: 3px 8px; border-radius: 6px; white-space: nowrap; } .mta-calc-preset-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; } .mta-calc-preset-btn { background: var(--bg-card, #ffffff); border: 1px solid var(--border-default, #cbd5e1); color: var(--text-secondary, #475569); padding: 3px 9px; border-radius: 6px; font-size: 11px; font-weight: 700; cursor: pointer; transition: all 0.15s ease; } .mta-calc-preset-btn:hover { background: #2563eb; color: #ffffff; border-color: #2563eb; } .mta-calc-preset-btn.active { background: #0f172a; color: #ffffff; border-color: #0f172a; } /* ========================================================================== 🌙 COMPREHENSIVE INSTITUTIONAL DARK THEME (ALL DESKS & CARDS) ========================================================================== */ [data-theme="dark"] { --bg-base: #07090e; --bg-card: #0d121d; --bg-card-hover: #161e2e; --bg-input: #111827; --bg-input-focus: #1a2234; --border-subtle: #151d2c; --border-default: #1e293b; --border-hover: #334155; --border-focus: #3b82f6; --text-primary: #f8fafc; --text-secondary: #94a3b8; --text-muted: #64748b; --green: #22c55e; --green-bg: rgba(34, 197, 94, 0.12); --green-border: rgba(34, 197, 94, 0.25); --red: #ef4444; --red-bg: rgba(239, 68, 68, 0.12); --red-border: rgba(239, 68, 68, 0.25); } [data-theme="dark"] body { background-color: #07090e !important; color: #f8fafc !important; } [data-theme="dark"] .topbar { background: linear-gradient(135deg, #0a0f1e 0%, #0d1529 50%, #0a1628 100%) !important; border-bottom: 1px solid rgba(59, 130, 246, 0.3) !important; } [data-theme="dark"] .card, [data-theme="dark"] .sm-card, [data-theme="dark"] .stat-hero-card, [data-theme="dark"] .metric-card, [data-theme="dark"] .opt-metric-item, [data-theme="dark"] .control-band, [data-theme="dark"] .controls, [data-theme="dark"] .options-control-band, [data-theme="dark"] .sm-controls { background: #0d121d !important; border: 1px solid #1e293b !important; color: #f8fafc !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important; } [data-theme="dark"] .card:hover, [data-theme="dark"] .sm-card:hover, [data-theme="dark"] .stat-hero-card:hover { background: #111726 !important; border-color: #334155 !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important; } [data-theme="dark"] select, [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="date"], [data-theme="dark"] input[type="number"], [data-theme="dark"] textarea { background: #111827 !important; border: 1px solid #1e293b !important; color: #f8fafc !important; } [data-theme="dark"] select option, [data-theme="dark"] select optgroup { background: #111827 !important; color: #f8fafc !important; } [data-theme="dark"] select:focus, [data-theme="dark"] input:focus, [data-theme="dark"] textarea:focus { border-color: #3b82f6 !important; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25) !important; } [data-theme="dark"] .theme-toggle-btn { background: rgba(255, 255, 255, 0.08) !important; color: #f8fafc !important; border-color: rgba(255, 255, 255, 0.15) !important; } [data-theme="dark"] .theme-toggle-btn:hover { background: rgba(255, 255, 255, 0.14) !important; } /* Tables across all tabs */ [data-theme="dark"] .wpcr-data-table, [data-theme="dark"] .opt-table, [data-theme="dark"] .sm-table, [data-theme="dark"] .deliv-table, [data-theme="dark"] .mtf-table, [data-theme="dark"] .mta-table, [data-theme="dark"] .market-table, [data-theme="dark"] .option-chain-table { background: #0d121d !important; color: #f8fafc !important; } [data-theme="dark"] .wpcr-data-table thead th, [data-theme="dark"] .opt-table thead th, [data-theme="dark"] .sm-table thead th, [data-theme="dark"] .deliv-table thead th, [data-theme="dark"] .mtf-table thead th, [data-theme="dark"] .mta-table th, [data-theme="dark"] .market-table thead th, [data-theme="dark"] .option-chain-table thead th, [data-theme="dark"] .header-level-1 th, [data-theme="dark"] .header-level-2 th { background: #111827 !important; color: #94a3b8 !important; border-bottom: 1px solid #1e293b !important; } [data-theme="dark"] .wpcr-data-table tbody tr, [data-theme="dark"] .opt-table tbody tr, [data-theme="dark"] .sm-table tbody tr, [data-theme="dark"] .deliv-table tbody tr, [data-theme="dark"] .market-table tbody tr, [data-theme="dark"] .option-chain-table tbody tr { background: transparent !important; } [data-theme="dark"] .wpcr-data-table tbody tr:nth-child(even), [data-theme="dark"] .opt-table tbody tr:nth-child(even), [data-theme="dark"] .sm-table tbody tr:nth-child(even), [data-theme="dark"] .deliv-table tbody tr:nth-child(even), [data-theme="dark"] .market-table tbody tr:nth-child(even), [data-theme="dark"] .option-chain-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.02) !important; } [data-theme="dark"] .wpcr-data-table tbody tr:hover, [data-theme="dark"] .opt-table tbody tr:hover, [data-theme="dark"] .sm-table tbody tr:hover, [data-theme="dark"] .deliv-table tbody tr:hover, [data-theme="dark"] .market-table tbody tr:hover, [data-theme="dark"] .option-chain-table tbody tr:hover, [data-theme="dark"] .mta-table tr:hover td, [data-theme="dark"] .mta-table tr[onclick]:hover { background: #162032 !important; } [data-theme="dark"] .wpcr-data-table td, [data-theme="dark"] .opt-table td, [data-theme="dark"] .sm-table td, [data-theme="dark"] .deliv-table td, [data-theme="dark"] .mta-table td, [data-theme="dark"] .market-table td, [data-theme="dark"] .option-chain-table td { border-bottom: 1px solid #151d2c !important; color: #e2e8f0 !important; } /* High-contrast stock names, symbols and links in dark mode */ [data-theme="dark"] td strong, [data-theme="dark"] .stock-sym, [data-theme="dark"] .symbol-cell, [data-theme="dark"] .mta-sym, [data-theme="dark"] strong[style*="color:#2563eb"], [data-theme="dark"] strong[style*="color: #2563eb"], [data-theme="dark"] .strike-col { color: #38bdf8 !important; } [data-theme="dark"] .strike-col { background: #0d121d !important; border-color: #1e293b !important; } [data-theme="dark"] .strike-col.atm-badge { background: #2563eb !important; color: #ffffff !important; } [data-theme="dark"] .option-row.atm-row { background: rgba(37, 99, 235, 0.15) !important; border-top: 1px solid #3b82f6 !important; border-bottom: 1px solid #3b82f6 !important; } /* MTF Analytics in Dark Theme */ [data-theme="dark"] #panelMtf { color: #f8fafc !important; } [data-theme="dark"] .mta-section, [data-theme="dark"] .mta-calc-card, [data-theme="dark"] .mta-side-card, [data-theme="dark"] .mta-hero-card { background: #0d121d !important; border-color: #1e293b !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .mta-hero-card.mta-hero-nse { background: linear-gradient(145deg, #0d121d 0%, #0c2040 100%) !important; } [data-theme="dark"] .mta-hero-card.mta-hero-bse { background: linear-gradient(145deg, #0d121d 0%, #0b2e1b 100%) !important; } [data-theme="dark"] .mta-hero-card.mta-hero-comb { background: linear-gradient(145deg, #0d121d 0%, #17153d 100%) !important; } [data-theme="dark"] .mta-hero-label { color: #94a3b8 !important; } [data-theme="dark"] .mta-hero-val { color: #f8fafc !important; } [data-theme="dark"] .mta-hero-sub { color: #64748b !important; } [data-theme="dark"] .mta-session-card { background: #111827 !important; border-color: #1e293b !important; } [data-theme="dark"] .mta-session-label { color: #94a3b8 !important; } [data-theme="dark"] .mta-session-val { color: #f8fafc !important; } [data-theme="dark"] .mta-session-sub { color: #64748b !important; } [data-theme="dark"] .mta-section-header { color: #f8fafc !important; border-bottom-color: #1e293b !important; } [data-theme="dark"] .mta-section-header span, [data-theme="dark"] .mta-section-header div { color: #f8fafc !important; } [data-theme="dark"] .mta-signal-card { background: #111827 !important; border-color: #1e293b !important; } [data-theme="dark"] .mta-signal-title { color: #f8fafc !important; } [data-theme="dark"] .mta-signal-val { color: #f8fafc !important; } [data-theme="dark"] .mta-signal-desc { color: #94a3b8 !important; } [data-theme="dark"] .mta-side-header { background: #111827 !important; color: #f8fafc !important; border-color: #1e293b !important; } [data-theme="dark"] .mta-side-header-amber { background: rgba(217, 119, 6, 0.15) !important; color: #fbbf24 !important; border-bottom: 1px solid rgba(217, 119, 6, 0.3) !important; } [data-theme="dark"] .mta-side-header-green { background: rgba(22, 163, 74, 0.15) !important; color: #4ade80 !important; border-bottom: 1px solid rgba(22, 163, 74, 0.3) !important; } [data-theme="dark"] .mta-sum-item { background: #111827 !important; border-color: #1e293b !important; } [data-theme="dark"] .mta-sum-label { color: #94a3b8 !important; } [data-theme="dark"] .mta-sum-val { color: #f8fafc !important; } [data-theme="dark"] .mta-donut-center-label { color: #f8fafc !important; } [data-theme="dark"] .mta-donut-center-label small { color: #94a3b8 !important; } [data-theme="dark"] .mta-donut-leg-item { color: #cbd5e1 !important; } [data-theme="dark"] .mta-sparkline { background: #111827 !important; border-color: #1e293b !important; } [data-theme="dark"] .mta-spark-legend { color: #94a3b8 !important; } [data-theme="dark"] .mta-tf-group { background: #111827 !important; border-color: #1e293b !important; } [data-theme="dark"] .mta-tf-btn { color: #94a3b8 !important; border-color: #1e293b !important; } [data-theme="dark"] .mta-tf-btn:hover { background: #1e293b !important; color: #f8fafc !important; } [data-theme="dark"] .mta-tf-btn.active { background: #2563eb !important; color: #ffffff !important; } [data-theme="dark"] .mta-trend-stats { background: #111827 !important; border-color: #1e293b !important; } [data-theme="dark"] .mta-tstat-label { color: #94a3b8 !important; } [data-theme="dark"] .mta-tstat-val { color: #f8fafc !important; } [data-theme="dark"] .mta-chart-container { background: #0d121d !important; border-color: #1e293b !important; } [data-theme="dark"] .mta-broker-card { background: #111827 !important; border-color: #1e293b !important; } [data-theme="dark"] .mta-broker-name { color: #f8fafc !important; } [data-theme="dark"] .mta-broker-book { color: #60a5fa !important; } [data-theme="dark"] .mta-broker-share { color: #94a3b8 !important; } [data-theme="dark"] .mta-broker-bar-wrap { background: #1e293b !important; } [data-theme="dark"] .mta-hhi-stat { background: #111827 !important; border-color: #1e293b !important; } [data-theme="dark"] .mta-hhi-label { color: #94a3b8 !important; } [data-theme="dark"] .mta-hhi-val { color: #f8fafc !important; } [data-theme="dark"] .mta-hhi-sub { color: #64748b !important; } [data-theme="dark"] .mta-global-bar-label { color: #cbd5e1 !important; } [data-theme="dark"] .mta-global-bar-track { background: #1e293b !important; } [data-theme="dark"] .mta-global-bar-val { color: #f8fafc !important; } [data-theme="dark"] .mta-mstat { background: #111827 !important; border-color: #1e293b !important; } [data-theme="dark"] .mta-mstat-lbl { color: #94a3b8 !important; } [data-theme="dark"] .mta-mstat-val { color: #f8fafc !important; } [data-theme="dark"] .mta-name, [data-theme="dark"] .mta-insight-text { color: #94a3b8 !important; } [data-theme="dark"] .mta-edu-section { background: #111827 !important; border-color: #1e293b !important; } [data-theme="dark"] .mta-edu-section h4 { color: #f8fafc !important; } [data-theme="dark"] .mta-edu-section p { color: #94a3b8 !important; } [data-theme="dark"] .mta-reg-notice { background: #111827 !important; border-color: #1e293b !important; color: #cbd5e1 !important; } [data-theme="dark"] .mta-row-heavy { background: rgba(220, 38, 38, 0.15) !important; } [data-theme="dark"] .mta-row-heavy:hover { background: rgba(220, 38, 38, 0.25) !important; } [data-theme="dark"] .mta-row-sig { background: rgba(217, 119, 6, 0.15) !important; } [data-theme="dark"] .mta-row-sig:hover { background: rgba(217, 119, 6, 0.25) !important; } [data-theme="dark"] .mta-badge-nse { background: rgba(37, 99, 235, 0.2) !important; color: #93c5fd !important; border-color: rgba(37, 99, 235, 0.4) !important; } [data-theme="dark"] .mta-badge-bse { background: rgba(22, 163, 74, 0.2) !important; color: #86efac !important; border-color: rgba(22, 163, 74, 0.4) !important; } [data-theme="dark"] .mta-badge-fno { background: rgba(124, 58, 237, 0.2) !important; color: #c084fc !important; border-color: rgba(124, 58, 237, 0.4) !important; } [data-theme="dark"] .mta-badge-cash { background: #1e293b !important; color: #cbd5e1 !important; border-color: #334155 !important; } [data-theme="dark"] .mta-badge-retail { background: rgba(217, 119, 6, 0.2) !important; color: #fde68a !important; border-color: rgba(217, 119, 6, 0.4) !important; } [data-theme="dark"] .mta-badge-inst { background: rgba(22, 163, 74, 0.2) !important; color: #86efac !important; border-color: rgba(22, 163, 74, 0.4) !important; } [data-theme="dark"] .mta-badge-momentum { background: rgba(29, 78, 216, 0.2) !important; color: #93c5fd !important; border-color: rgba(29, 78, 216, 0.4) !important; } [data-theme="dark"] .mta-badge-spec { background: rgba(185, 28, 28, 0.2) !important; color: #fca5a5 !important; border-color: rgba(185, 28, 28, 0.4) !important; } [data-theme="dark"] .mta-input, [data-theme="dark"] .mta-select { background: #111827 !important; border-color: #1e293b !important; color: #f8fafc !important; } [data-theme="dark"] .mta-calc-box { background: #111827 !important; border-color: #1e293b !important; } [data-theme="dark"] .mta-calc-large-input { background: #0d121d !important; border-color: #1e293b !important; color: #f8fafc !important; } [data-theme="dark"] .mta-calc-preview-badge { background: rgba(37, 99, 235, 0.2) !important; border-color: rgba(37, 99, 235, 0.45) !important; color: #93c5fd !important; } [data-theme="dark"] .mta-calc-preset-btn { background: #161e2e !important; border-color: #1e293b !important; color: #94a3b8 !important; } [data-theme="dark"] .mta-calc-preset-btn:hover { background: #2563eb !important; border-color: #2563eb !important; color: #ffffff !important; } [data-theme="dark"] .mta-calc-preset-btn.active { background: #2563eb !important; border-color: #2563eb !important; color: #ffffff !important; } [data-theme="dark"] .mta-pill { background: #111827 !important; border-color: #1e293b !important; color: #94a3b8 !important; } [data-theme="dark"] .mta-pill:hover { background: #1e293b !important; color: #f8fafc !important; } [data-theme="dark"] .mta-modal-box { background: #0d121d !important; border-color: #1e293b !important; color: #f8fafc !important; } [data-theme="dark"] .mta-modal-header { background: #111827 !important; border-bottom-color: #1e293b !important; } [data-theme="dark"] .mta-inner-nav { background: #0d121d !important; border-color: #1e293b !important; } [data-theme="dark"] .mta-inner-tab { background: #111827 !important; border-color: #1e293b !important; color: #94a3b8 !important; } [data-theme="dark"] .mta-inner-tab:hover { background: #1e293b !important; color: #f8fafc !important; } [data-theme="dark"] .mta-inner-tab.active { background: #2563eb !important; color: #ffffff !important; border-color: #2563eb !important; } /* Fallback overrides for inline styles inside #panelMtf in Dark Mode */ [data-theme="dark"] #panelMtf [style*="color:#0f172a"], [data-theme="dark"] #panelMtf [style*="color: #0f172a"], [data-theme="dark"] #panelMtf [style*="color:#1e293b"], [data-theme="dark"] #panelMtf [style*="color: #1e293b"] { color: #f8fafc !important; } [data-theme="dark"] #panelMtf [style*="color:#334155"], [data-theme="dark"] #panelMtf [style*="color: #334155"], [data-theme="dark"] #panelMtf [style*="color:#475569"], [data-theme="dark"] #panelMtf [style*="color: #475569"] { color: #cbd5e1 !important; } [data-theme="dark"] #panelMtf [style*="background:#f8fafc"], [data-theme="dark"] #panelMtf [style*="background: #f8fafc"] { background: #111827 !important; } [data-theme="dark"] #panelMtf [style*="background:#ffffff"], [data-theme="dark"] #panelMtf [style*="background: #ffffff"], [data-theme="dark"] #panelMtf [style*="background:#fff"], [data-theme="dark"] #panelMtf [style*="background: #fff"] { background: #0d121d !important; } [data-theme="dark"] #panelMtf [style*="background:#eff6ff"], [data-theme="dark"] #panelMtf [style*="background: #eff6ff"] { background: rgba(37, 99, 235, 0.2) !important; color: #93c5fd !important; border-color: rgba(37, 99, 235, 0.4) !important; } [data-theme="dark"] #panelMtf [style*="background:#fef3c7"], [data-theme="dark"] #panelMtf [style*="background: #fef3c7"] { background: rgba(217, 119, 6, 0.2) !important; color: #fde68a !important; border-color: rgba(217, 119, 6, 0.4) !important; } [data-theme="dark"] #panelMtf [style*="background:#dcfce7"], [data-theme="dark"] #panelMtf [style*="background: #dcfce7"], [data-theme="dark"] #panelMtf [style*="background:#f0fdf4"], [data-theme="dark"] #panelMtf [style*="background: #f0fdf4"] { background: rgba(22, 163, 74, 0.2) !important; color: #86efac !important; border-color: rgba(22, 163, 74, 0.4) !important; } [data-theme="dark"] #panelMtf [style*="background:#fee2e2"], [data-theme="dark"] #panelMtf [style*="background: #fee2e2"] { background: rgba(220, 38, 38, 0.2) !important; color: #fca5a5 !important; border-color: rgba(220, 38, 38, 0.4) !important; } /* Options Desk specific elements in Dark Mode */ [data-theme="dark"] .opt-badge, [data-theme="dark"] .opt-metric-sub, [data-theme="dark"] .opt-call-side, [data-theme="dark"] .opt-put-side { color: #94a3b8 !important; } [data-theme="dark"] .opt-table td.call-itm { background: rgba(34, 197, 94, 0.08) !important; } [data-theme="dark"] .opt-table td.put-itm { background: rgba(239, 68, 68, 0.08) !important; } [data-theme="dark"] .opt-table td.strike-cell { background: #111827 !important; color: #38bdf8 !important; } /* 🎨 Canvases & Charts in Dark Mode */ [data-theme="dark"] canvas:not(.tv-lightweight-charts canvas):not(#lw_chart_container canvas), [data-theme="dark"] #straddleCanvas { background: #0c121e !important; border-color: #1e293b !important; } [data-theme="dark"] .chart-section { background: #0d121d !important; border-color: #1e293b !important; } /* ⚡ Live Refresh Bar & Controls in Dark Mode */ [data-theme="dark"] .live-refresh-bar { background: #0d121d !important; border-color: #1e293b !important; } [data-theme="dark"] .live-counter-pill, [data-theme="dark"] .live-clock { background: #111827 !important; border-color: #1e293b !important; color: #cbd5e1 !important; } /* 🗺️ Sector Heatmap & Cards in Dark Mode */ [data-theme="dark"] .sector-card { background: #0d121d !important; border-color: #1e293b !important; color: #f8fafc !important; } [data-theme="dark"] .sec-ctrl-bar { background: #111827 !important; border-color: #1e293b !important; } [data-theme="dark"] .sec-ctrl-btn { color: #94a3b8 !important; } [data-theme="dark"] .sec-ctrl-btn.active { background: #1e293b !important; color: #38bdf8 !important; } [data-theme="dark"] .sec-filter-select { background: #111827 !important; border-color: #1e293b !important; color: #f8fafc !important; } /* 🏛️ Smart Money Tracker in Dark Mode */ [data-theme="dark"] .sm-card, [data-theme="dark"] .sm-controls { background: #0d121d !important; border-color: #1e293b !important; } [data-theme="dark"] .sm-quick-btn { background: #111827 !important; border-color: #1e293b !important; color: #94a3b8 !important; } [data-theme="dark"] .sm-quick-btn.active { background: #2563eb !important; color: #ffffff !important; } [data-theme="dark"] .sm-row:hover, [data-theme="dark"] .sm-data-row:hover { background: #162032 !important; } /* 📦 Delivery Desk in Dark Mode */ [data-theme="dark"] .deliv-card, [data-theme="dark"] .deliv-modal-content { background: #0d121d !important; border-color: #1e293b !important; color: #f8fafc !important; } [data-theme="dark"] .deliv-summary-strip { background: #111827 !important; border-color: #1e293b !important; } /* 🧱 Option Chain Buildups & Walls in Dark Mode */ [data-theme="dark"] .buildup-item-row, [data-theme="dark"] .wall-strike-row { background: #111827 !important; border-color: #1e293b !important; color: #cbd5e1 !important; } [data-theme="dark"] .call-wall-box { background: rgba(239, 68, 68, 0.1) !important; border-color: rgba(239, 68, 68, 0.25) !important; } [data-theme="dark"] .put-wall-box { background: rgba(34, 197, 94, 0.1) !important; border-color: rgba(34, 197, 94, 0.25) !important; } /* 🛡️ Fortress & Edge Boxes in Dark Mode */ [data-theme="dark"] .fortress-col, [data-theme="dark"] .macro-tickers-strip { background: #0d121d !important; border-color: #1e293b !important; } [data-theme="dark"] .fortress-item-row { border-bottom-color: #1e293b !important; } [data-theme="dark"] .edge-filter-btn { background: #111827 !important; border-color: #1e293b !important; color: #cbd5e1 !important; } /* 📅 Calendar Spreads Desk in Dark Mode */ [data-theme="dark"] .cal-select { background: #111827 !important; border-color: #1e293b !important; color: #f8fafc !important; } [data-theme="dark"] .cal-mode-switch { background: #111827 !important; border-color: #1e293b !important; } [data-theme="dark"] .cal-mode-btn { color: #94a3b8 !important; } [data-theme="dark"] .cal-mode-btn.active { background: #1e293b !important; color: #38bdf8 !important; } [data-theme="dark"] .cal-table { background: #0d121d !important; } [data-theme="dark"] .cal-table th { background: #111827 !important; color: #94a3b8 !important; border-color: #1e293b !important; } [data-theme="dark"] .cal-td-strike { background: #111827 !important; border-right-color: #1e293b !important; color: #38bdf8 !important; } [data-theme="dark"] .cal-table tbody tr:hover td { background-color: #162032 !important; } /* 💬 Messages & Tooltips in Dark Mode */ [data-theme="dark"] .message-panel { background: #0d121d !important; border-color: #1e293b !important; color: #94a3b8 !important; } /* 🪟 Modals & Dialogs */ [data-theme="dark"] .modal-content, [data-theme="dark"] .chart-modal-box, [data-theme="dark"] .mta-modal-box { background: #0d121d !important; border: 1px solid #1e293b !important; color: #f8fafc !important; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.75) !important; } [data-theme="dark"] .mta-modal-header, [data-theme="dark"] .chart-modal-header { background: #111827 !important; border-bottom-color: #1e293b !important; } [data-theme="dark"] .mta-mstat { background: #111827 !important; border-color: #1e293b !important; } [data-theme="dark"] .mta-mstat-val { color: #f8fafc !important; } [data-theme="dark"] .mta-signal-card, [data-theme="dark"] .mta-broker-card, [data-theme="dark"] .mta-side-card { background: #0d121d !important; border-color: #1e293b !important; } [data-theme="dark"] .mta-side-header { background: #111827 !important; border-bottom-color: #1e293b !important; } [data-theme="dark"] .mta-tf-group { background: #111827 !important; border-color: #1e293b !important; } [data-theme="dark"] .mta-tf-btn { color: #94a3b8 !important; border-right-color: #1e293b !important; } [data-theme="dark"] .mta-tf-btn:hover { background: #1e293b !important; color: #f8fafc !important; } [data-theme="dark"] .mta-tf-btn.active { background: #2563eb !important; color: #ffffff !important; } /* 🔍 Stock Delivery Inspector & Drilldown in Dark Mode */ [data-theme="dark"] .nse-stock-inspector, [data-theme="dark"] #stockInspectorCard { background: #0d121d !important; border-color: #1e293b !important; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important; } [data-theme="dark"] .nse-stock-inspector h3, [data-theme="dark"] #inspectSymbol, [data-theme="dark"] #drilldownTitle { color: #38bdf8 !important; } [data-theme="dark"] .nse-inspect-box { background: #111827 !important; border-color: #1e293b !important; } [data-theme="dark"] .nse-inspect-box div[style*="color:#0f172a"], [data-theme="dark"] .nse-inspect-box div[style*="color: #0f172a"] { color: #f8fafc !important; } [data-theme="dark"] .nse-stock-inspector div[style*="border-bottom:1px solid #f1f5f9"], [data-theme="dark"] .deliv-modal-header[style*="border-bottom:1px solid #e2e8f0"] { border-bottom-color: #1e293b !important; } [data-theme="dark"] .nse-inspect-box:nth-child(3) { background: rgba(37, 99, 235, 0.12) !important; border-color: rgba(37, 99, 235, 0.3) !important; } [data-theme="dark"] .nse-inspect-box:nth-child(4) { background: rgba(34, 197, 94, 0.12) !important; border-color: rgba(34, 197, 94, 0.3) !important; } /* ============================================================================== ⚙️ Broker Settings Tab Styles ============================================================================== */ .settings-container { max-width: 1200px; margin: 0 auto; padding: 24px 16px 80px 16px; display: flex; flex-direction: column; gap: 20px; } .settings-top-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 16px 20px; background: var(--bg-card, #131b2e); border: 1px solid var(--border-color, #1e293b); border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,0.2); } .settings-title { font-size: 20px; font-weight: 800; color: #f8fafc; margin: 0 0 4px 0; letter-spacing: -0.3px; } .settings-subtitle { font-size: 13px; color: #94a3b8; margin: 0; } .settings-header-actions { display: flex; align-items: center; gap: 10px; } .settings-btn { padding: 9px 18px; font-size: 13px; font-weight: 700; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all 0.2s ease; border: none; } .settings-btn.btn-save { background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #ffffff; box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4); } .settings-btn.btn-save:hover { background: linear-gradient(135deg, #3b82f6, #2563eb); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(37, 99, 235, 0.5); } .settings-btn.btn-test { background: rgba(255, 255, 255, 0.08); color: #e2e8f0; border: 1px solid rgba(255, 255, 255, 0.15); } .settings-btn.btn-test:hover { background: rgba(56, 189, 248, 0.15); color: #38bdf8; border-color: rgba(56, 189, 248, 0.4); } .settings-alert { padding: 12px 18px; border-radius: 8px; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; } .settings-alert.success { background: rgba(16, 185, 129, 0.15); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.3); } .settings-alert.error { background: rgba(239, 68, 68, 0.15); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); } .settings-alert.info { background: rgba(56, 189, 248, 0.15); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.3); } /* Active Broker Picker */ .settings-section-card { background: var(--bg-card, #131b2e); border: 1px solid var(--border-color, #1e293b); border-radius: 12px; padding: 20px; box-shadow: 0 4px 16px rgba(0,0,0,0.2); } .section-title-wrap { margin-bottom: 16px; } .section-badge { font-size: 10px; font-weight: 800; letter-spacing: 0.8px; color: #38bdf8; background: rgba(56, 189, 248, 0.12); padding: 3px 8px; border-radius: 4px; display: inline-block; margin-bottom: 6px; } .section-title-wrap h3 { font-size: 16px; font-weight: 700; color: #f8fafc; margin: 0 0 4px 0; } .section-title-wrap p { font-size: 12px; color: #94a3b8; margin: 0; } .broker-picker-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; } .broker-card-radio { cursor: pointer; position: relative; display: block; } .broker-card-radio input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; } .broker-card-inner { background: #0d1322; border: 2px solid #1e293b; border-radius: 10px; padding: 16px; transition: all 0.2s ease; position: relative; display: flex; flex-direction: column; height: 100%; } .broker-card-radio:hover .broker-card-inner { border-color: rgba(56, 189, 248, 0.4); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.3); } .broker-card-radio.active .broker-card-inner, .broker-card-radio input:checked + .broker-card-inner { border-color: #38bdf8; background: linear-gradient(145deg, #0f1c38 0%, #0d1527 100%); box-shadow: 0 0 20px rgba(56, 189, 248, 0.2), inset 0 0 10px rgba(56, 189, 248, 0.05); } .broker-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .broker-logo { font-size: 22px; } .broker-status-pill { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px; background: rgba(148, 163, 184, 0.15); color: #94a3b8; } .broker-status-pill.configured { background: rgba(16, 185, 129, 0.15); color: #34d399; } .broker-status-pill.unconfigured { background: rgba(239, 68, 68, 0.15); color: #f87171; } .broker-name { font-size: 15px; font-weight: 800; color: #f8fafc; margin: 0 0 2px 0; } .broker-desc { font-size: 11px; color: #94a3b8; margin: 0 0 8px 0; } .broker-active-tag { display: none; font-size: 9px; font-weight: 800; letter-spacing: 0.6px; color: #38bdf8; background: rgba(56, 189, 248, 0.2); padding: 2px 6px; border-radius: 3px; align-self: flex-start; margin-top: auto; } .broker-card-radio.active .broker-active-tag, .broker-card-radio input:checked + .broker-card-inner .broker-active-tag { display: inline-block; } /* Settings 4-Card Grid */ .settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; } .settings-card { background: var(--bg-card, #131b2e); border: 1px solid var(--border-color, #1e293b); border-radius: 12px; padding: 18px 20px; box-shadow: 0 4px 16px rgba(0,0,0,0.15); display: flex; flex-direction: column; } .broker-angel-card { border-top: 3px solid #3b82f6; } .broker-upstox-card { border-top: 3px solid #a855f7; } .broker-kotak-card { border-top: 3px solid #ef4444; } .broker-fyers-card { border-top: 3px solid #f59e0b; } .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .card-title-group { display: flex; align-items: center; gap: 10px; } .card-icon { font-size: 20px; } .card-title-group h4 { font-size: 14px; font-weight: 700; color: #f8fafc; margin: 0; } .card-tag { font-size: 10px; color: #94a3b8; } .card-link { font-size: 11px; color: #38bdf8; text-decoration: none; font-weight: 600; } .card-link:hover { text-decoration: underline; } .card-body { display: flex; flex-direction: column; gap: 12px; } .form-row { display: flex; flex-direction: column; gap: 4px; } .form-row label { font-size: 11.5px; font-weight: 600; color: #94a3b8; } .form-row input { width: 100%; padding: 8px 12px; font-size: 12px; font-family: 'JetBrains Mono', monospace; background: #0d1322; border: 1px solid #1e293b; border-radius: 6px; color: #f8fafc; transition: border-color 0.2s ease; box-sizing: border-box; } .form-row input:focus { outline: none; border-color: #38bdf8; box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2); } .input-with-btn { position: relative; display: flex; align-items: center; } .input-with-btn input { padding-right: 36px; } .btn-toggle-vis { position: absolute; right: 6px; background: none; border: none; font-size: 13px; cursor: pointer; padding: 4px; opacity: 0.6; } .btn-toggle-vis:hover { opacity: 1; } .form-hint { font-size: 11px; color: #64748b; margin-top: 4px; line-height: 1.4; } .form-hint code { color: #38bdf8; background: #0d1322; padding: 1px 4px; border-radius: 3px; } /* Bottom Bar */ .settings-bottom-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 16px 20px; background: var(--bg-card, #131b2e); border: 1px solid var(--border-color, #1e293b); border-radius: 12px; } .bottom-info-text { font-size: 12px; color: #94a3b8; } .bottom-btns { display: flex; align-items: center; gap: 10px; } /* ============================================================================== 🛠️ Quant Tools & Institutional Alpha Desks Styling ============================================================================== */ .tools-header-card { background: linear-gradient(135deg, rgba(13, 17, 28, 0.95), rgba(20, 27, 45, 0.95)); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 18px 24px; margin-bottom: 20px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); } .tools-title-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; } .tools-title { margin: 0; font-size: 20px; font-weight: 800; color: #f8fafc; letter-spacing: -0.02em; } .tools-subtitle { margin: 4px 0 0; font-size: 13px; color: #94a3b8; } .tools-subnav-bar { display: flex; gap: 10px; flex-wrap: wrap; border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 14px; } .tool-subtab-btn { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; color: #cbd5e1; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: all 0.2s ease; } .tool-subtab-btn:hover { background: rgba(255, 255, 255, 0.08); color: #fff; } .tool-subtab-btn.active { background: rgba(59, 130, 246, 0.15); border-color: rgba(59, 130, 246, 0.5); color: #60a5fa; } .tool-badge { font-size: 10px; padding: 2px 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); color: #94a3b8; font-weight: 700; } .tool-subtab-btn.active .tool-badge { background: #2563eb; color: #fff; } .tool-control-band { background: #0f172a; border: 1px solid #1e293b; border-radius: 10px; padding: 12px 18px; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; } .tool-hint-box { font-size: 12px; color: #94a3b8; background: rgba(15, 23, 42, 0.6); padding: 6px 12px; border-radius: 6px; border-left: 3px solid #3b82f6; max-width: 650px; } .tool-table-card { background: #0f172a; border: 1px solid #1e293b; border-radius: 12px; padding: 16px; } .tool-table-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .tool-table-header h3 { margin: 0; font-size: 16px; color: #f1f5f9; } .date-badge { font-size: 11px; color: #64748b; background: #1e293b; padding: 4px 8px; border-radius: 6px; } .vol-grid-row, .avwap-dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 20px; } .vol-stat-card, .avwap-card { background: #0f172a; border: 1px solid #1e293b; border-radius: 12px; padding: 16px 20px; } .vol-stat-header, .avwap-card-lbl { font-size: 12px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; } .vol-stat-val, .avwap-card-val { font-size: 24px; font-weight: 800; color: #f8fafc; margin-bottom: 4px; } .vol-stat-sub, .avwap-card-sub { font-size: 12px; color: #64748b; } .avwap-bands-sub { font-size: 11px; color: #38bdf8; margin-top: 4px; } .vol-edge-card, .avwap-participant-card { background: #0f172a; border: 1px solid #1e293b; border-radius: 12px; padding: 20px; margin-bottom: 20px; } .vol-rec-list { display: flex; gap: 12px; flex-wrap: wrap; } .vol-rec-item { background: rgba(30, 41, 59, 0.7); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; padding: 12px 16px; flex: 1; min-width: 220px; } .vol-rec-strategy { font-weight: 700; color: #60a5fa; font-size: 14px; margin-bottom: 4px; } .vol-rec-edge { font-size: 12px; color: #e2e8f0; } .vol-rec-bias { font-size: 11px; color: #94a3b8; margin-top: 4px; } .trap-dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; } @media (max-width: 860px) { .trap-dashboard-grid { grid-template-columns: 1fr; } } .trap-alert-card { background: #0f172a; border: 1px solid #1e293b; border-radius: 12px; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; } .trap-alert-badge { display: inline-block; font-size: 13px; font-weight: 800; padding: 4px 10px; border-radius: 6px; background: #1e293b; color: #f8fafc; margin-bottom: 8px; align-self: flex-start; } .trap-score-bar-track { width: 100%; height: 8px; background: #1e293b; border-radius: 4px; overflow: hidden; } .trap-score-bar-fill { height: 100%; background: linear-gradient(90deg, #3b82f6, #ef4444); transition: width 0.3s ease; } .trap-walls-card { background: #0f172a; border: 1px solid #1e293b; border-radius: 12px; padding: 20px; } .wall-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; } .wall-box { border-radius: 8px; padding: 14px; } .call-wall-box { background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.25); } .put-wall-box { background: rgba(34, 197, 94, 0.08); border: 1px solid rgba(34, 197, 94, 0.25); } .wall-label { font-size: 11px; color: #94a3b8; display: block; margin-bottom: 4px; } .wall-strike { font-size: 20px; font-weight: 800; display: block; } .call-wall-box .wall-strike { color: #f87171; } .put-wall-box .wall-strike { color: #4ade80; } .wall-sub { font-size: 11px; color: #64748b; margin-top: 2px; display: block; } .participant-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px; } .participant-item { background: #1e293b; border-radius: 8px; padding: 12px 16px; } .p-label { font-size: 12px; color: #94a3b8; display: block; margin-bottom: 4px; } .p-status { font-size: 14px; font-weight: 700; color: #f8fafc; } /* ========================================================================== 👤 AUTH & WORKSPACE STATE SYNC STYLING ========================================================================== */ #topbarAuthArea { display: flex; align-items: center; } .auth-btn-group { display: flex; align-items: center; gap: 8px; } .auth-signin-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; background: rgba(37, 99, 235, 0.1); border: 1px solid rgba(37, 99, 235, 0.25); color: #2563eb; font-size: 12px; font-weight: 700; border-radius: var(--radius-sm); cursor: pointer; transition: all 0.2s ease; } [data-theme="dark"] .auth-signin-btn { background: rgba(59, 130, 246, 0.12) !important; border-color: rgba(59, 130, 246, 0.3) !important; color: #60a5fa !important; } .auth-signin-btn:hover { background: #2563eb; color: #ffffff !important; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3); } .auth-signup-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; background: #2563eb; border: 1px solid #2563eb; color: #ffffff; font-size: 12px; font-weight: 700; border-radius: var(--radius-sm); cursor: pointer; transition: all 0.2s ease; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25); } .auth-signup-btn:hover { background: #1d4ed8; border-color: #1d4ed8; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35); } /* Modal Auth Tabs */ .auth-tabs-header { display: flex; gap: 8px; margin-bottom: 16px; border-bottom: 2px solid var(--border-default); padding-bottom: 10px; } [data-theme="dark"] .auth-tabs-header { border-color: #1e293b !important; } .auth-tab-btn { flex: 1; padding: 8px 12px; border: 1px solid transparent; background: transparent; color: var(--text-muted); font-size: 13px; font-weight: 700; border-radius: 6px; cursor: pointer; transition: all 0.15s ease; } .auth-tab-btn.active { background: var(--bg-card-hover); border-color: var(--border-default); color: var(--text-primary); } [data-theme="dark"] .auth-tab-btn.active { background: #1e293b !important; border-color: #334155 !important; color: #f8fafc !important; } .auth-form-group { margin-bottom: 14px; } .auth-form-group label { display: block; font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; margin-bottom: 4px; } .btn-primary-block { width: 100%; padding: 11px; background: #2563eb; color: #ffffff; border: none; border-radius: 6px; font-size: 13px; font-weight: 700; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3); } .btn-primary-block:hover { background: #1d4ed8; } .auth-user-btn { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 6px; background: var(--bg-card); border: 1px solid var(--border-default); border-radius: 20px; cursor: pointer; transition: all 0.2s ease; } [data-theme="dark"] .auth-user-btn { background: #111827 !important; border-color: #1e293b !important; } .auth-user-btn:hover { border-color: #2563eb; } .auth-user-avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; } .auth-user-initials { width: 24px; height: 24px; border-radius: 50%; background: #2563eb; color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; } .auth-user-name { font-size: 12px; font-weight: 700; color: var(--text-primary); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-theme="dark"] .auth-user-name { color: #f8fafc !important; } .auth-sync-dot { width: 7px; height: 7px; border-radius: 50%; background: #10b981; box-shadow: 0 0 6px #10b981; } /* Modal Overlay & Dialog */ .auth-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; z-index: 99999; padding: 16px; } .auth-modal-dialog { background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); width: 100%; max-width: 440px; box-shadow: var(--shadow-lg); overflow: hidden; animation: modalFadeIn 0.2s ease-out; } [data-theme="dark"] .auth-modal-dialog { background: #0d121d !important; border-color: #1e293b !important; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6) !important; } @keyframes modalFadeIn { from { opacity: 0; transform: translateY(-10px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .auth-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border-default); } [data-theme="dark"] .auth-modal-header { border-color: #1e293b !important; } .auth-modal-title { font-size: 15px; font-weight: 800; color: var(--text-primary); } [data-theme="dark"] .auth-modal-title { color: #f8fafc !important; } .auth-modal-close { background: transparent; border: none; font-size: 22px; line-height: 1; color: var(--text-muted); cursor: pointer; } .auth-modal-close:hover { color: var(--text-primary); } .auth-modal-body { padding: 24px; } .auth-login-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin: 0 0 20px 0; } [data-theme="dark"] .auth-login-desc { color: #94a3b8 !important; } .btn-google-login { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 11px 16px; background: #ffffff; border: 1px solid #dadce0; border-radius: 6px; color: #3c4043; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } .btn-google-login:hover { background: #f8fafc; border-color: #c6c9ce; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); } .auth-divider { display: flex; align-items: center; text-align: center; margin: 20px 0; color: var(--text-muted); font-size: 10px; font-weight: 700; letter-spacing: 0.05em; } .auth-divider::before, .auth-divider::after { content: ''; flex: 1; border-bottom: 1px solid var(--border-default); } [data-theme="dark"] .auth-divider::before, [data-theme="dark"] .auth-divider::after { border-color: #1e293b !important; } .auth-divider span { padding: 0 10px; } .auth-input { width: 100%; padding: 9px 12px; border: 1px solid var(--border-default); border-radius: 6px; background: var(--bg-base); color: var(--text-primary); font-size: 13px; box-sizing: border-box; } [data-theme="dark"] .auth-input { background: #111827 !important; border-color: #1e293b !important; color: #f8fafc !important; } .btn-guest-login { width: 100%; margin-top: 10px; padding: 10px; background: var(--bg-card-hover); border: 1px solid var(--border-default); border-radius: 6px; color: var(--text-primary); font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.15s ease; } [data-theme="dark"] .btn-guest-login { background: #1e293b !important; border-color: #334155 !important; color: #f8fafc !important; } .btn-guest-login:hover { background: #2563eb !important; border-color: #2563eb !important; color: #ffffff !important; } .supabase-toggle-link { font-size: 11px; color: var(--text-muted); cursor: pointer; text-align: center; margin-top: 18px; text-decoration: underline; } .supabase-toggle-link:hover { color: var(--text-primary); } /* User Profile Modal View */ .auth-profile-view { text-align: center; } .auth-profile-avatar-large { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 12px auto; overflow: hidden; background: #2563eb; color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 800; } .auth-profile-avatar-large img { width: 100%; height: 100%; object-fit: cover; } .auth-profile-title { margin: 0 0 4px 0; font-size: 18px; font-weight: 800; color: var(--text-primary); } [data-theme="dark"] .auth-profile-title { color: #f8fafc !important; } .auth-profile-email { margin: 0 0 14px 0; font-size: 12px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; } .auth-sync-status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 20px; background: rgba(16, 185, 129, 0.12); border: 1px solid rgba(16, 185, 129, 0.3); color: #10b981; font-size: 11px; font-weight: 700; margin-bottom: 20px; } .auth-workspace-summary { display: flex; justify-content: space-around; padding: 12px; background: var(--bg-base); border-radius: 8px; border: 1px solid var(--border-default); } [data-theme="dark"] .auth-workspace-summary { background: #111827 !important; border-color: #1e293b !important; } .summary-item { display: flex; flex-direction: column; gap: 4px; font-size: 11px; } .summary-item span { color: var(--text-muted); } .summary-item strong { color: var(--text-primary); font-family: 'JetBrains Mono', monospace; } [data-theme="dark"] .summary-item strong { color: #f8fafc !important; } .btn-danger-ghost { padding: 8px 14px; border-radius: 6px; background: transparent; border: 1px solid rgba(239, 68, 68, 0.4); color: #ef4444; font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.2s ease; } .btn-danger-ghost:hover { background: #ef4444; color: #ffffff; } /* ========================================================================== 🏢 INSTITUTIONAL FOOTER STYLING ========================================================================== */ .terminal-footer { margin-top: 40px; padding: 40px 24px 24px 24px; background: var(--bg-card); border-top: 1px solid var(--border-default); border-radius: var(--radius-lg) var(--radius-lg) 0 0; } [data-theme="dark"] .terminal-footer, body.theme-dark .terminal-footer, body.night-theme .terminal-footer { background: #0d121d !important; border-color: #1e293b !important; } [data-theme="light"] .terminal-footer, body.theme-light .terminal-footer, body.light-theme .terminal-footer, body.white-theme .terminal-footer { background: #ffffff !important; border-color: #e2e8f0 !important; } .footer-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 32px; margin-bottom: 32px; } .footer-col-brand { max-width: 380px; } .footer-logo { font-size: 18px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.01em; margin-bottom: 10px; } [data-theme="dark"] .footer-logo { color: #f8fafc !important; } .footer-tagline { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin: 0 0 12px 0; } [data-theme="dark"] .footer-tagline { color: #94a3b8 !important; } .footer-regulatory { font-size: 11px; color: var(--text-muted); line-height: 1.4; margin: 0; font-style: italic; } .footer-col-links { display: flex; flex-wrap: wrap; gap: 40px; } .footer-link-group { display: flex; flex-direction: column; gap: 8px; } .footer-link-group h4 { margin: 0 0 4px 0; font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--text-primary); letter-spacing: 0.04em; } [data-theme="dark"] .footer-link-group h4 { color: #f8fafc !important; } .footer-link-group a { font-size: 13px; color: var(--text-secondary); text-decoration: none; transition: color 0.15s ease; } [data-theme="dark"] .footer-link-group a, body.theme-dark .footer-link-group a, body.night-theme .footer-link-group a { color: #94a3b8 !important; } [data-theme="light"] .footer-link-group a, body.theme-light .footer-link-group a, body.light-theme .footer-link-group a, body.white-theme .footer-link-group a { color: #475569 !important; } .footer-link-group a:hover { color: #2563eb; text-decoration: underline; } [data-theme="dark"] .footer-link-group a:hover, body.theme-dark .footer-link-group a:hover, body.night-theme .footer-link-group a:hover { color: #60a5fa !important; } .footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding-top: 20px; border-top: 1px solid var(--border-default); font-size: 11px; color: var(--text-muted); } /* Four-column navigation footer used by standalone pages. The markup carries inline grid rules, so these guards keep it legible at every viewport. */ .footer-four-columns { width: 100%; } .footer-link-group { min-width: 0; } .footer-link-group a { line-height: 1.4; overflow-wrap: anywhere; } @media (max-width: 980px) { .footer-four-columns { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 22px !important; } } @media (max-width: 640px) { .footer-four-columns { grid-template-columns: 1fr !important; gap: 20px !important; margin-bottom: 20px !important; } .footer-link-group a { display: block; padding: 3px 0; } } [data-theme="dark"] .footer-bottom, body.theme-dark .footer-bottom, body.night-theme .footer-bottom { border-color: #1e293b !important; color: #94a3b8 !important; } [data-theme="light"] .footer-bottom, body.theme-light .footer-bottom, body.light-theme .footer-bottom, body.white-theme .footer-bottom { border-color: #e2e8f0 !important; color: #64748b !important; } /* ========================================================================== HIGH-CONTRAST THEME ACCESSIBILITY ENFORCEMENT ========================================================================== */ html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6, html[data-theme="dark"] strong, html[data-theme="dark"] b { color: #f8fafc !important; } html[data-theme="dark"] p, html[data-theme="dark"] span:not(.badge):not(.pill):not([class*="positive"]):not([class*="negative"]):not([class*="green"]):not([class*="red"]), html[data-theme="dark"] div:not(.badge):not(.pill):not([class*="positive"]):not([class*="negative"]) { color: inherit; } html[data-theme="dark"] label { color: #cbd5e1 !important; } html[data-theme="dark"] .text-muted, html[data-theme="dark"] small { color: #94a3b8 !important; } html[data-theme="light"] h1, html[data-theme="light"] h2, html[data-theme="light"] h3, html[data-theme="light"] h4, html[data-theme="light"] h5, html[data-theme="light"] h6, html[data-theme="light"] strong, html[data-theme="light"] b { color: #0f172a !important; } html[data-theme="light"] label { color: #1e293b !important; } html[data-theme="light"] .text-muted, html[data-theme="light"] small { color: #64748b !important; } /* Enforce Card Surface & Borders */ html[data-theme="dark"] .card, html[data-theme="dark"] .sm-card, html[data-theme="dark"] .control-band, html[data-theme="dark"] .controls, html[data-theme="dark"] .options-control-band, html[data-theme="dark"] .settings-section-card, html[data-theme="dark"] .settings-card, html[data-theme="dark"] .panel-card, html[data-theme="dark"] .dashboard-card, html[data-theme="dark"] .stat-hero-card, html[data-theme="dark"] .metric-card, html[data-theme="dark"] .opt-metric-item { background: #0c1427 !important; border-color: #1e2d4d !important; color: #f8fafc !important; } html[data-theme="light"] .card, html[data-theme="light"] .sm-card, html[data-theme="light"] .control-band, html[data-theme="light"] .controls, html[data-theme="light"] .options-control-band, html[data-theme="light"] .settings-section-card, html[data-theme="light"] .settings-card, html[data-theme="light"] .panel-card, html[data-theme="light"] .dashboard-card, html[data-theme="light"] .stat-hero-card, html[data-theme="light"] .metric-card, html[data-theme="light"] .opt-metric-item { background: #ffffff !important; border-color: #cbd5e1 !important; color: #0f172a !important; } /* Enforce Inputs & Selects */ html[data-theme="dark"] input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]), html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: #060b17 !important; color: #f8fafc !important; border-color: #1e2d4d !important; } html[data-theme="light"] input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]), html[data-theme="light"] select, html[data-theme="light"] textarea { background: #ffffff !important; color: #0f172a !important; border-color: #cbd5e1 !important; } /* ========================================================================== Opstra-Style Synchronized Dual-Subplot WPCR & Stock Price Chart ========================================================================== */ .opstra-header-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 4px 10px; border-bottom: 1px solid rgba(0, 0, 0, 0.08); margin-bottom: 6px; flex-wrap: wrap; gap: 8px; } html[data-theme="dark"] .opstra-header-row { border-bottom-color: rgba(255, 255, 255, 0.08); } .opstra-zoom-group { display: flex; align-items: center; gap: 4px; } .opstra-zoom-label { font-size: 11px; font-weight: 600; color: #64748b; margin-right: 2px; } .opstra-zoom-btn { background: #f1f5f9; border: 1px solid #e2e8f0; color: #334155; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 4px; cursor: pointer; transition: all 0.15s ease; } .opstra-zoom-btn:hover { background: #e2e8f0; color: #0f172a; } .opstra-zoom-btn.active { background: #cbd5e1; border-color: #94a3b8; color: #0f172a; font-weight: 700; } html[data-theme="dark"] .opstra-zoom-btn { background: #1e293b; border-color: #334155; color: #cbd5e1; } html[data-theme="dark"] .opstra-zoom-btn.active { background: #334155; border-color: #64748b; color: #ffffff; } .opstra-symbol-title { font-family: var(--font-sans, sans-serif); font-size: 18px; font-weight: 800; color: #0f172a; letter-spacing: 0.5px; text-align: center; } html[data-theme="dark"] .opstra-symbol-title { color: #f8fafc; } .opstra-date-group { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #64748b; } .opstra-date-label { font-weight: 600; } .opstra-date-box { background: #ffffff !important; border: 1px solid #cbd5e1 !important; border-radius: 4px; padding: 3px 8px; font-size: 11px; font-family: monospace; color: #334155 !important; width: 105px; text-align: center; } html[data-theme="dark"] .opstra-date-box { background: #0f172a !important; border-color: #334155 !important; color: #cbd5e1 !important; } .opstra-menu-btn { background: transparent; border: 1px solid #cbd5e1; border-radius: 4px; padding: 2px 7px; font-size: 13px; cursor: pointer; color: #475569; } .opstra-dual-chart-container { display: flex; flex-direction: column; background: #fbfbfa; border: 1px solid #e2e8f0; border-radius: 6px; position: relative; overflow: hidden; } html[data-theme="dark"] .opstra-dual-chart-container { background: #090d16; border-color: rgba(255, 255, 255, 0.08); } .opstra-pane { position: relative; width: 100%; } .opstra-pane-price { height: 260px; } .opstra-pane-pcr { height: 210px; border-top: 1px solid rgba(0, 0, 0, 0.08); } html[data-theme="dark"] .opstra-pane-pcr { border-top-color: rgba(255, 255, 255, 0.08); } .opstra-chart-tooltip { position: absolute; pointer-events: none; background: rgba(255, 255, 255, 0.96); border: 1px solid #cbd5e1; border-radius: 4px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); padding: 4px 9px; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; color: #0f172a; z-index: 10; white-space: nowrap; } html[data-theme="dark"] .opstra-chart-tooltip { background: rgba(15, 23, 42, 0.96); border-color: #334155; color: #f8fafc; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5); } /* ========================================================================== INSTITUTIONAL HEADER — Professional Mega-Menu Navigation ========================================================================== Supports: - Dark mode (default): deep navy/black background - Light mode: clean white with subtle borders - Dropdown mega-menus with column groups - Active state underline indicator (blue glow) - Dashboard panel with KPI cards + module grid ========================================================================== */ /* ── Institutional Header Container ── */ .inst-header { position: sticky; top: 0; z-index: 1000; background: rgba(8, 12, 23, 0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(56, 189, 248, 0.18); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.6); transition: background 0.2s ease, border-color 0.2s ease; } html[data-theme="light"] .inst-header, body[data-theme="light"] .inst-header { background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid #e2e8f0; box-shadow: 0 2px 14px rgba(15, 23, 42, 0.08); } /* ── Brand Bar (Row 1) ── */ .inst-brand-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 24px; gap: 16px; } .inst-brand-left { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .inst-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; text-decoration: none; } .inst-brand-logo-img { height: 32px; width: auto; max-width: 220px; display: block; object-fit: contain; transition: transform 0.2s ease, filter 0.2s ease; } .inst-brand:hover .inst-brand-logo-img { transform: scale(1.02); filter: drop-shadow(0 2px 10px rgba(56, 189, 248, 0.45)); } html[data-theme="light"] .inst-brand:hover .inst-brand-logo-img, body[data-theme="light"] .inst-brand:hover .inst-brand-logo-img { filter: drop-shadow(0 2px 8px rgba(2, 132, 199, 0.28)); } .inst-brand-logo-dark { display: block; } .inst-brand-logo-light { display: none !important; } html[data-theme="light"] .inst-brand-logo-dark, body[data-theme="light"] .inst-brand-logo-dark { display: none !important; } html[data-theme="light"] .inst-brand-logo-light, body[data-theme="light"] .inst-brand-logo-light { display: block !important; } .inst-brand-fallback-text .fallback-traders { color: #ffffff; } .inst-brand-fallback-text .fallback-desk { color: #38bdf8; } html[data-theme="light"] .inst-brand-fallback-text .fallback-traders { color: #0f172a !important; } html[data-theme="light"] .inst-brand-fallback-text .fallback-desk { color: #0284c7 !important; } .inst-terminal-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; background: rgba(56, 189, 248, 0.08); border: 1px solid rgba(56, 189, 248, 0.28); border-radius: 6px; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 800; color: #38bdf8; letter-spacing: 0.8px; } html[data-theme="light"] .inst-terminal-tag { background: rgba(2, 132, 199, 0.08); border-color: rgba(2, 132, 199, 0.3); color: #0284c7; } .inst-tag-pulse { width: 6px; height: 6px; border-radius: 50%; background: #10b981; box-shadow: 0 0 8px #10b981; animation: pulseLive 1.8s ease-in-out infinite; } /* ── Center: Live Market Clock & Session Pill ── */ .inst-market-clock-wrap { display: flex; align-items: center; gap: 8px; background: rgba(15, 23, 42, 0.65); border: 1px solid rgba(255, 255, 255, 0.08); padding: 4px 12px; border-radius: 24px; } html[data-theme="light"] .inst-market-clock-wrap { background: #f1f5f9; border-color: #e2e8f0; } .inst-market-pill { display: inline-flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 800; padding: 2.5px 8px; border-radius: 12px; letter-spacing: 0.4px; } .inst-market-pill.open { background: rgba(16, 185, 129, 0.15); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.35); } .inst-market-pill.closed { background: rgba(244, 63, 94, 0.15); color: #f43f5e; border: 1px solid rgba(244, 63, 94, 0.35); } .market-dot { width: 7px; height: 7px; border-radius: 50%; } .inst-market-pill.open .market-dot { background: #10b981; box-shadow: 0 0 8px #10b981; animation: pulseLive 1.8s infinite; } .inst-market-pill.closed .market-dot { background: #f43f5e; } .inst-clock-pill { display: inline-flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 700; color: #e2e8f0; } html[data-theme="light"] .inst-clock-pill { color: #334155; } /* ── Right Controls ── */ .inst-right-controls { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .inst-api-status { padding: 4px 10px; border-radius: 20px; font-size: 11px; font-family: 'JetBrains Mono', monospace; font-weight: 600; background: rgba(16, 185, 129, 0.08); border: 1px solid rgba(16, 185, 129, 0.28); color: #10b981; } html[data-theme="light"] .inst-api-status { background: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.35); } .inst-util-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; font-size: 11.5px; font-weight: 600; cursor: pointer; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.09); color: #cbd5e1; transition: all 0.18s ease; text-decoration: none; font-family: 'Inter', sans-serif; } .inst-util-btn:hover { background: rgba(56, 189, 248, 0.14); border-color: rgba(56, 189, 248, 0.38); color: #ffffff; transform: translateY(-1px); } html[data-theme="light"] .inst-util-btn { background: #f1f5f9; border-color: #cbd5e1; color: #334155; } html[data-theme="light"] .inst-util-btn:hover { background: #e2e8f0; color: #0f172a; } .theme-toggle-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; font-size: 11.5px; font-weight: 600; cursor: pointer; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.09); color: #cbd5e1; transition: all 0.18s ease; font-family: 'Inter', sans-serif; } .theme-toggle-btn:hover { background: rgba(255, 255, 255, 0.1); color: #ffffff; transform: translateY(-1px); } html[data-theme="light"] .theme-toggle-btn { background: #f1f5f9; border-color: #cbd5e1; color: #334155; } /* ── Mega-Menu Navigation (Row 2) ── */ .inst-nav { display: flex; align-items: stretch; gap: 3px; padding: 4px 18px; background: rgba(10, 15, 28, 0.95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid rgba(255, 255, 255, 0.05); border-bottom: 1px solid rgba(255, 255, 255, 0.08); overflow: visible; scrollbar-width: none; } .inst-nav::-webkit-scrollbar { display: none; } html[data-theme="light"] .inst-nav { background: #f8fafc; border-top: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; } .inst-nav-item { position: relative; display: flex; align-items: stretch; } .inst-nav-btn { display: flex; align-items: center; gap: 7px; padding: 8px 14px; background: transparent; border: 1px solid transparent; border-radius: 8px; color: rgba(241, 245, 249, 0.7); font-size: 12.5px; font-weight: 600; font-family: 'Inter', sans-serif; cursor: pointer; transition: all 0.16s ease; white-space: nowrap; letter-spacing: 0.15px; text-decoration: none; } html[data-theme="light"] .inst-nav-btn { color: #64748b; } .inst-nav-btn:hover { color: #ffffff; background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); } html[data-theme="light"] .inst-nav-btn:hover { color: #1e293b; background: rgba(15, 23, 42, 0.05); } .inst-nav-btn.active { color: #38bdf8 !important; background: rgba(56, 189, 248, 0.12) !important; border-color: rgba(56, 189, 248, 0.35) !important; font-weight: 700; box-shadow: 0 0 16px rgba(56, 189, 248, 0.2); } html[data-theme="light"] .inst-nav-btn.active { color: #0284c7 !important; background: rgba(2, 132, 199, 0.08) !important; border-color: rgba(2, 132, 199, 0.28) !important; box-shadow: none; } .inst-nav-btn-highlight { background: rgba(16, 185, 129, 0.08) !important; border: 1px solid rgba(16, 185, 129, 0.32) !important; color: #34d399 !important; } .inst-nav-btn-highlight:hover { background: rgba(16, 185, 129, 0.18) !important; border-color: rgba(16, 185, 129, 0.55) !important; color: #ffffff !important; } .inst-nav-btn-rose { background: rgba(244, 63, 94, 0.08) !important; border: 1px solid rgba(244, 63, 94, 0.3) !important; color: #fb7185 !important; } .inst-nav-btn-rose:hover { background: rgba(244, 63, 94, 0.18) !important; border-color: rgba(244, 63, 94, 0.55) !important; color: #ffffff !important; } .inst-nav-btn-cyan { background: rgba(6, 182, 212, 0.08) !important; border: 1px solid rgba(6, 182, 212, 0.3) !important; color: #22d3ee !important; } .inst-nav-btn-cyan:hover { background: rgba(6, 182, 212, 0.18) !important; border-color: rgba(6, 182, 212, 0.55) !important; color: #ffffff !important; } .inst-nav-btn-blue { background: rgba(14, 165, 233, 0.08) !important; border: 1px solid rgba(14, 165, 233, 0.3) !important; color: #38bdf8 !important; } .inst-nav-btn-blue:hover { background: rgba(14, 165, 233, 0.18) !important; border-color: rgba(14, 165, 233, 0.55) !important; color: #ffffff !important; } /* ── Badges ── */ .p2-badge-teal { background: #10b981; color: #040814; font-weight: 800; font-size: 9.5px; padding: 1.5px 6px; border-radius: 4px; box-shadow: 0 0 8px rgba(16, 185, 129, 0.4); } .p2-badge-rose { background: #f43f5e; color: #ffffff; font-weight: 800; font-size: 9.5px; padding: 1.5px 6px; border-radius: 4px; } .p2-badge-cyan { background: #06b6d4; color: #040814; font-weight: 800; font-size: 9.5px; padding: 1.5px 6px; border-radius: 4px; } .p2-badge-blue { background: #0ea5e9; color: #040814; font-weight: 800; font-size: 9.5px; padding: 1.5px 6px; border-radius: 4px; } .inst-nav-icon { font-size: 13px; line-height: 1; } .inst-nav-arrow { font-size: 10px; opacity: 0.6; transition: transform 0.2s ease; } .inst-nav-item:hover .inst-nav-arrow { transform: rotate(180deg); opacity: 1; } /* ── Dropdowns (Mega-Menu) ── */ .inst-dropdown { display: none; position: absolute; top: 100%; left: 0; min-width: 480px; background: #090e1a !important; border: 1px solid rgba(56, 189, 248, 0.3) !important; border-top: 2px solid #38bdf8 !important; border-radius: 0 0 14px 14px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.95), 0 4px 16px rgba(0, 0, 0, 0.7) !important; z-index: 99999 !important; padding: 16px 18px !important; gap: 18px !important; flex-direction: row !important; flex-wrap: nowrap !important; box-sizing: border-box !important; animation: dropIn 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .inst-dropdown.inst-dropdown-sm { min-width: 340px; } .inst-dropdown.inst-dropdown-md { min-width: 540px; } html[data-theme="light"] .inst-dropdown, body.white-theme .inst-dropdown, body.light-theme .inst-dropdown, body.theme-light .inst-dropdown { background: #ffffff !important; border-color: #cbd5e1 !important; border-top-color: #0284c7 !important; box-shadow: 0 16px 40px rgba(15, 23, 42, 0.15) !important; } .inst-nav-item.has-dropdown:hover .inst-dropdown, .inst-nav-item.has-dropdown:focus-within .inst-dropdown { display: flex !important; } .inst-nav-item:last-child .inst-dropdown, .inst-nav-item:nth-last-child(2) .inst-dropdown { left: auto; right: 0; } .inst-dropdown-col { display: flex !important; flex-direction: column !important; gap: 8px !important; flex: 1 1 250px !important; min-width: 240px !important; box-sizing: border-box !important; } .inst-dropdown-col + .inst-dropdown-col { border-left: 1px solid rgba(255, 255, 255, 0.1) !important; padding-left: 18px !important; } html[data-theme="light"] .inst-dropdown-col + .inst-dropdown-col, body.white-theme .inst-dropdown-col + .inst-dropdown-col, body.light-theme .inst-dropdown-col + .inst-dropdown-col, body.theme-light .inst-dropdown-col + .inst-dropdown-col { border-left: 1px solid #e2e8f0 !important; padding-left: 18px !important; } .inst-dropdown-header { display: block !important; font-size: 10.5px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.8px !important; color: #38bdf8 !important; padding: 0 4px 8px 4px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; margin-bottom: 4px !important; box-sizing: border-box !important; } html[data-theme="light"] .inst-dropdown-header, body.white-theme .inst-dropdown-header, body.light-theme .inst-dropdown-header, body.theme-light .inst-dropdown-header { color: #0284c7 !important; border-bottom-color: #e2e8f0 !important; } /* Individual Dropdown Item / Card - Critical Height & Contrast Reset */ .inst-dd-item, button.inst-dd-item, a.inst-dd-item { display: flex !important; align-items: center !important; gap: 12px !important; padding: 10px 12px !important; height: auto !important; min-height: 52px !important; max-height: none !important; box-sizing: border-box !important; background: #0f172a !important; /* Solid dark card in night mode - never transparent */ border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 8px !important; cursor: pointer !important; text-align: left !important; justify-content: flex-start !important; transition: all 0.16s ease !important; width: 100% !important; text-decoration: none !important; color: inherit !important; margin: 0 !important; overflow: visible !important; font-family: inherit !important; font-size: 12px !important; line-height: normal !important; } .inst-dd-item:hover, button.inst-dd-item:hover, a.inst-dd-item:hover { background: rgba(56, 189, 248, 0.14) !important; border-color: rgba(56, 189, 248, 0.45) !important; transform: translateX(3px) !important; } html[data-theme="light"] .inst-dd-item, body.white-theme .inst-dd-item, body.light-theme .inst-dd-item, body.theme-light .inst-dd-item { background: #f8fafc !important; border-color: #e2e8f0 !important; color: #334155 !important; } html[data-theme="light"] .inst-dd-item:hover, body.white-theme .inst-dd-item:hover, body.light-theme .inst-dd-item:hover, body.theme-light .inst-dd-item:hover { background: #f0f9ff !important; border-color: #38bdf8 !important; color: #0f172a !important; } .dd-icon { font-size: 18px !important; line-height: 1 !important; flex-shrink: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 24px !important; height: 24px !important; margin: 0 !important; } .dd-text { display: flex !important; flex-direction: column !important; gap: 3px !important; flex: 1 1 auto !important; min-width: 0 !important; text-align: left !important; box-sizing: border-box !important; } .dd-title { display: flex !important; align-items: center !important; gap: 6px !important; font-size: 13px !important; font-weight: 700 !important; color: #f8fafc !important; line-height: 1.3 !important; font-family: 'Inter', -apple-system, sans-serif !important; margin: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .inst-dd-item:hover .dd-title, button.inst-dd-item:hover .dd-title, a.inst-dd-item:hover .dd-title { color: #38bdf8 !important; } html[data-theme="light"] .dd-title, body.white-theme .dd-title, body.light-theme .dd-title, body.theme-light .dd-title { color: #0f172a !important; } html[data-theme="light"] .inst-dd-item:hover .dd-title, body.white-theme .inst-dd-item:hover .dd-title, body.light-theme .inst-dd-item:hover .dd-title, body.theme-light .inst-dd-item:hover .dd-title { color: #0284c7 !important; } .dd-sub { display: block !important; font-size: 11px !important; font-weight: 400 !important; color: #94a3b8 !important; line-height: 1.35 !important; white-space: normal !important; font-family: 'Inter', -apple-system, sans-serif !important; margin: 0 !important; } .inst-dd-item:hover .dd-sub, button.inst-dd-item:hover .dd-sub, a.inst-dd-item:hover .dd-sub { color: #e2e8f0 !important; } html[data-theme="light"] .dd-sub, body.white-theme .dd-sub, body.light-theme .dd-sub, body.theme-light .dd-sub { color: #64748b !important; } html[data-theme="light"] .inst-dd-item:hover .dd-sub, body.white-theme .inst-dd-item:hover .dd-sub, body.light-theme .inst-dd-item:hover .dd-sub, body.theme-light .inst-dd-item:hover .dd-sub { color: #334155 !important; } /* ── DASHBOARD PANEL (LAUNCH EDITION) ── */ .inst-dashboard-panel { padding: 24px 28px 60px 28px; background: #070a13; min-height: calc(100vh - 105px); } html[data-theme="light"] .inst-dashboard-panel { background: #f8fafc; } /* Hero Section */ .inst-dash-hero { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; padding: 24px 28px; background: linear-gradient(135deg, rgba(15, 23, 42, 0.85) 0%, rgba(10, 16, 31, 0.95) 100%); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; margin-bottom: 24px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35); } html[data-theme="light"] .inst-dash-hero { background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%); border-color: #e2e8f0; box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06); } .inst-dash-hero-left { display: flex; flex-direction: column; gap: 4px; } .dash-hero-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: rgba(56, 189, 248, 0.1); border: 1px solid rgba(56, 189, 248, 0.3); border-radius: 6px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 800; color: #38bdf8; letter-spacing: 0.8px; width: fit-content; margin-bottom: 6px; } .tag-pulse { width: 6px; height: 6px; border-radius: 50%; background: #38bdf8; box-shadow: 0 0 8px #38bdf8; animation: pulseLive 1.8s infinite; } .inst-dash-title { font-size: 26px; font-weight: 800; color: #ffffff; letter-spacing: -0.4px; margin: 0; line-height: 1.2; } html[data-theme="light"] .inst-dash-title { color: #0f172a; } .inst-dash-subtitle { font-size: 13px; font-weight: 500; color: #94a3b8; margin: 0; line-height: 1.5; } html[data-theme="light"] .inst-dash-subtitle { color: #64748b; } .inst-dash-hero-right { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; } .dash-session-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 20px; font-size: 11.5px; font-weight: 700; font-family: 'JetBrains Mono', monospace; } .dash-session-badge.live { background: rgba(16, 185, 129, 0.14); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.35); } .dash-session-badge.closed { background: rgba(244, 63, 94, 0.14); color: #f43f5e; border: 1px solid rgba(244, 63, 94, 0.35); } .session-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .dash-hero-meta-row { display: flex; align-items: center; gap: 10px; } .dash-hero-clock-box { display: flex; flex-direction: column; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.08); padding: 6px 14px; border-radius: 8px; } html[data-theme="light"] .dash-hero-clock-box { background: #f1f5f9; border-color: #cbd5e1; } .clock-label { font-size: 9px; font-weight: 800; color: #64748b; letter-spacing: 0.5px; } .clock-val { font-size: 13.5px; font-weight: 800; color: #f8fafc; font-family: 'JetBrains Mono', monospace; } html[data-theme="light"] .clock-val { color: #0f172a; } .dash-refresh-action-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 8px; background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%); border: 1px solid #38bdf8; color: #ffffff; font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.18s ease; box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35); font-family: 'Inter', sans-serif; } .dash-refresh-action-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(2, 132, 199, 0.5); filter: brightness(1.1); } /* Macro Ribbon Strip */ .inst-macro-strip-wrap { margin-bottom: 24px; } .inst-macro-strip-label { font-size: 10.5px; font-weight: 800; letter-spacing: 0.6px; color: #64748b; margin-bottom: 8px; font-family: 'JetBrains Mono', monospace; } .inst-macro-ribbon { display: flex; align-items: center; gap: 12px; overflow-x: auto; padding: 2px 0 8px 0; scrollbar-width: none; } .inst-macro-ribbon::-webkit-scrollbar { display: none; } .macro-pill { display: flex; align-items: center; gap: 8px; background: rgba(15, 23, 42, 0.75); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 8px 16px; font-family: 'JetBrains Mono', monospace; font-size: 12px; white-space: nowrap; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); transition: all 0.2s ease; } html[data-theme="light"] .macro-pill { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05); } .macro-pill:hover { border-color: rgba(56, 189, 248, 0.5); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); } .macro-pill .mp-lbl { font-weight: 800; font-size: 10px; color: #94a3b8; letter-spacing: 0.4px; } .macro-pill .mp-val { font-weight: 800; color: #ffffff; } html[data-theme="light"] .macro-pill .mp-val { color: #0f172a; } .macro-pill .mp-chg { font-size: 10.5px; font-weight: 800; padding: 2px 6px; border-radius: 4px; } .macro-pill .mp-chg.positive { color: #10b981; background: rgba(16, 185, 129, 0.14); } .macro-pill .mp-chg.negative { color: #ef4444; background: rgba(239, 68, 68, 0.14); } /* Section Headings */ .inst-section-heading { display: flex; align-items: center; gap: 8px; margin: 28px 0 16px 0; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } html[data-theme="light"] .inst-section-heading { border-bottom-color: #e2e8f0; } .section-title-icon { font-size: 16px; } .section-title-text { font-size: 12.5px; font-weight: 800; letter-spacing: 0.8px; color: #e2e8f0; text-transform: uppercase; font-family: 'Inter', sans-serif; } html[data-theme="light"] .section-title-text { color: #1e293b; } .section-live-dot { font-size: 10.5px; font-weight: 800; color: #10b981; font-family: 'JetBrains Mono', monospace; margin-left: auto; } .section-subtitle-tag { font-size: 9.5px; font-weight: 800; color: #38bdf8; background: rgba(56, 189, 248, 0.1); border: 1px solid rgba(56, 189, 248, 0.25); padding: 2px 7px; border-radius: 4px; margin-left: auto; } /* ── 4 Major Benchmark Cards ── */ .inst-indices-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px; } @media (max-width: 1024px) { .inst-indices-row { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 580px) { .inst-indices-row { grid-template-columns: 1fr; } } .inst-idx-card { background: rgba(15, 23, 42, 0.75); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 14px; padding: 18px 20px; cursor: pointer; transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; gap: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25); } html[data-theme="light"] .inst-idx-card { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05); } .inst-idx-card:hover { transform: translateY(-3px); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45); border-color: rgba(56, 189, 248, 0.5); } .idx-card-nifty { border-top: 3px solid #10b981; } .idx-card-banknifty { border-top: 3px solid #38bdf8; } .idx-card-finnifty { border-top: 3px solid #818cf8; } .idx-card-sensex { border-top: 3px solid #f59e0b; } .idx-card-top { display: flex; align-items: center; justify-content: space-between; } .idx-title-group { display: flex; align-items: center; gap: 6px; } .idx-name { font-size: 13.5px; font-weight: 800; color: #ffffff; letter-spacing: 0.2px; } html[data-theme="light"] .idx-name { color: #0f172a; } .idx-spot-block { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .idx-spot { font-size: 26px; font-weight: 800; color: #ffffff; font-family: 'JetBrains Mono', monospace; line-height: 1.1; letter-spacing: -0.5px; } html[data-theme="light"] .idx-spot { color: #0f172a; } .idx-chg { font-size: 12px; font-weight: 700; font-family: 'JetBrains Mono', monospace; padding: 3px 8px; border-radius: 6px; } .idx-chg.positive { color: #10b981; background: rgba(16, 185, 129, 0.12); } .idx-chg.negative { color: #ef4444; background: rgba(239, 68, 68, 0.12); } .idx-meta-strip { display: flex; align-items: center; gap: 8px; } .idx-meta-pill { flex: 1; background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(255, 255, 255, 0.06); padding: 6px 10px; border-radius: 6px; font-size: 11px; color: #94a3b8; font-family: 'JetBrains Mono', monospace; } html[data-theme="light"] .idx-meta-pill { background: #f8fafc; border-color: #e2e8f0; color: #64748b; } .idx-meta-pill b { color: #ffffff; font-weight: 700; } html[data-theme="light"] .idx-meta-pill b { color: #0f172a; } .idx-card-cta { display: flex; align-items: center; justify-content: flex-end; font-size: 11px; font-weight: 700; color: #38bdf8; transition: transform 0.16s ease; } .inst-idx-card:hover .idx-card-cta { transform: translateX(3px); } /* ── Executive KPI Row ── */ .inst-kpi-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-bottom: 28px; } @media (max-width: 1200px) { .inst-kpi-row { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 650px) { .inst-kpi-row { grid-template-columns: repeat(2, 1fr); } } .inst-kpi-card { background: rgba(15, 23, 42, 0.7); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 14px 16px; cursor: pointer; transition: all 0.2s ease; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); } html[data-theme="light"] .inst-kpi-card { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05); } .inst-kpi-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); border-color: rgba(56, 189, 248, 0.4); } .kpi-card-breadth { border-top: 3px solid #10b981; } .kpi-card-vix { border-top: 3px solid #38bdf8; } .kpi-card-gift { border-top: 3px solid #6366f1; } .kpi-card-fii { border-top: 3px solid #a855f7; } .kpi-card-mtf { border-top: 3px solid #f59e0b; } .kpi-card-deliv { border-top: 3px solid #14b8a6; } .kpi-card-header { display: flex; align-items: center; gap: 8px; } .inst-kpi-icon { font-size: 16px; line-height: 1; } .inst-kpi-label { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: #94a3b8; } html[data-theme="light"] .inst-kpi-label { color: #64748b; } .inst-kpi-val { font-size: 22px; font-weight: 800; color: #ffffff; font-family: 'JetBrains Mono', monospace; line-height: 1.1; } html[data-theme="light"] .inst-kpi-val { color: #0f172a; } .inst-kpi-sub { font-size: 10.5px; color: #64748b; font-weight: 600; } /* ── 8 Specialized Modules Grid ── */ .inst-dash-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 32px; } @media (max-width: 1200px) { .inst-dash-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .inst-dash-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 580px) { .inst-dash-grid { grid-template-columns: 1fr; } } .inst-dash-module { background: rgba(15, 23, 42, 0.75); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 0; cursor: pointer; display: flex; flex-direction: column; overflow: hidden; transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25); } html[data-theme="light"] .inst-dash-module { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05); } .inst-dash-module:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); } .inst-dm--emerald:hover { border-color: rgba(16, 185, 129, 0.6); box-shadow: 0 16px 40px rgba(16, 185, 129, 0.15); } .inst-dm--cyan:hover { border-color: rgba(6, 182, 212, 0.6); box-shadow: 0 16px 40px rgba(6, 182, 212, 0.15); } .inst-dm--rose:hover { border-color: rgba(244, 63, 94, 0.6); box-shadow: 0 16px 40px rgba(244, 63, 94, 0.15); } .inst-dm--blue:hover { border-color: rgba(14, 165, 233, 0.6); box-shadow: 0 16px 40px rgba(14, 165, 233, 0.15); } .inst-dm--purple:hover { border-color: rgba(168, 85, 247, 0.6); box-shadow: 0 16px 40px rgba(168, 85, 247, 0.15); } .inst-dm--amber:hover { border-color: rgba(245, 158, 11, 0.6); box-shadow: 0 16px 40px rgba(245, 158, 11, 0.15); } .inst-dm--teal:hover { border-color: rgba(20, 184, 166, 0.6); box-shadow: 0 16px 40px rgba(20, 184, 166, 0.15); } .inst-dm--indigo:hover { border-color: rgba(99, 102, 241, 0.6); box-shadow: 0 16px 40px rgba(99, 102, 241, 0.15); } .inst-dm-header { display: flex; align-items: center; gap: 12px; padding: 18px 20px 14px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } html[data-theme="light"] .inst-dm-header { border-bottom-color: #f1f5f9; } .inst-dm-icon-wrap { width: 40px; height: 40px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; } html[data-theme="light"] .inst-dm-icon-wrap { background: #f1f5f9; border-color: #e2e8f0; } .inst-dm-title-box { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .inst-dm-title { font-size: 14.5px; font-weight: 700; color: #ffffff; } html[data-theme="light"] .inst-dm-title { color: #0f172a; } .inst-dm-desc-tag { font-size: 10.5px; font-weight: 600; color: #94a3b8; } html[data-theme="light"] .inst-dm-desc-tag { color: #64748b; } .inst-dm-badge { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; padding: 2.5px 7px; border-radius: 4px; flex-shrink: 0; } .inst-dm-badge--green { background: rgba(16, 185, 129, 0.15); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3); } .inst-dm-badge--cyan { background: rgba(6, 182, 212, 0.15); color: #06b6d4; border: 1px solid rgba(6, 182, 212, 0.3); } .inst-dm-badge--rose { background: rgba(244, 63, 94, 0.15); color: #f43f5e; border: 1px solid rgba(244, 63, 94, 0.3); } .inst-dm-badge--blue { background: rgba(14, 165, 233, 0.15); color: #0ea5e9; border: 1px solid rgba(14, 165, 233, 0.3); } .inst-dm-badge--purple{ background: rgba(168, 85, 247, 0.15); color: #a855f7; border: 1px solid rgba(168, 85, 247, 0.3); } .inst-dm-badge--amber { background: rgba(245, 158, 11, 0.15); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.3); } .inst-dm-badge--teal { background: rgba(20, 184, 166, 0.15); color: #14b8a6; border: 1px solid rgba(20, 184, 166, 0.3); } .inst-dm-badge--indigo{ background: rgba(99, 102, 241, 0.15); color: #6366f1; border: 1px solid rgba(99, 102, 241, 0.3); } .inst-dm-body { padding: 14px 20px; flex: 1; } .inst-dm-body p { font-size: 12.5px; color: #94a3b8; line-height: 1.6; margin: 0; } html[data-theme="light"] .inst-dm-body p { color: #64748b; } .inst-dm-footer { padding: 12px 20px 16px 20px; display: flex; align-items: center; } .inst-dm-go { font-size: 12.5px; font-weight: 700; color: #38bdf8; transition: transform 0.16s ease; } .inst-dash-module:hover .inst-dm-go { transform: translateX(4px); } /* ── Platform Highlights Banner ── */ .inst-platform-banner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 24px; background: rgba(15, 23, 42, 0.5); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 14px; margin-top: 10px; } html[data-theme="light"] .inst-platform-banner { background: #ffffff; border-color: #e2e8f0; } @media (max-width: 990px) { .inst-platform-banner { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 580px) { .inst-platform-banner { grid-template-columns: 1fr; } } .inst-pb-item { display: flex; align-items: flex-start; gap: 12px; } .pb-icon { font-size: 22px; line-height: 1; flex-shrink: 0; } .pb-content h4 { font-size: 13px; font-weight: 700; color: #f8fafc; margin: 0 0 4px 0; } html[data-theme="light"] .pb-content h4 { color: #0f172a; } .pb-content p { font-size: 11.5px; color: #64748b; line-height: 1.45; margin: 0; } /* ── Utility: Hidden tab buttons ── */ .inst-hidden-tab { display: none !important; visibility: hidden !important; pointer-events: none !important; } /* ========================================================================== 📱 ULTRA-PRO MOBILE RESPONSIVE ENGINE (320px - 860px) Transforms the terminal into a native mobile trading workstation ========================================================================== */ /* 1. Global Viewport & Container Lock — prevents horizontal wobble/page shaking */ html, body { overflow-x: hidden !important; max-width: 100vw !important; width: 100% !important; -webkit-text-size-adjust: 100%; } @media (max-width: 860px) { .app { width: 100% !important; max-width: 100vw !important; padding: 0 0 40px 0 !important; overflow-x: hidden !important; } /* 2. Brand Bar on Mobile: 2 clean compact rows */ .inst-brand-bar { padding: 8px 12px 6px 12px !important; flex-wrap: wrap !important; gap: 8px !important; row-gap: 6px !important; } .inst-brand { order: 1 !important; gap: 8px !important; } .inst-brand-logo-img { height: 30px !important; max-width: 170px !important; } .inst-brand-icon { width: 30px !important; height: 30px !important; font-size: 14px !important; border-radius: 7px !important; } .inst-brand-name { font-size: 13.5px !important; } .inst-brand-tagline { display: none !important; /* Hide long tagline on mobile to save space */ } .inst-brand-left { order: 1 !important; flex: 1 !important; display: flex !important; align-items: center !important; gap: 8px !important; } .inst-terminal-tag { display: none !important; /* Save space on small mobile screens */ } .inst-right-controls { order: 2 !important; gap: 6px !important; display: flex !important; align-items: center !important; } .inst-api-status { display: none !important; /* Hide verbose API status text on mobile */ } .auth-btn-text, .theme-btn-text { display: none !important; /* Icons only for compact touch buttons */ } .auth-signin-btn, .auth-signup-btn { padding: 6px 9px !important; font-size: 12px !important; } .theme-toggle-btn { padding: 6px 9px !important; font-size: 12px !important; } .inst-global-search-trigger { order: 3 !important; width: 100% !important; max-width: 100% !important; margin: 4px 0 !important; padding: 6px 12px !important; } .inst-market-clock-wrap { order: 4 !important; width: 100% !important; justify-content: center !important; margin: 2px 0 0 0 !important; padding: 3px 10px !important; } /* Sub-row: Pulse Strip centered with horizontal scroll */ .inst-pulse-strip { order: 5 !important; width: 100% !important; margin: 0 !important; justify-content: center !important; padding: 3px 10px !important; font-size: 10px !important; overflow-x: auto !important; scrollbar-width: none !important; border-radius: 6px !important; box-sizing: border-box !important; } .inst-pulse-strip::-webkit-scrollbar { display: none; } /* 3. Navigation Bar (Row 2) on Mobile */ .inst-nav { padding: 4px 8px !important; gap: 4px !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; white-space: nowrap !important; } .inst-nav::-webkit-scrollbar { display: none !important; } .inst-nav-btn { padding: 7px 11px !important; font-size: 12px !important; gap: 5px !important; flex-shrink: 0 !important; } .inst-nav-arrow { font-size: 9px !important; opacity: 0.7 !important; } /* Mobile / Tablet: Dropdowns are cleanly delegated to the full Mobile Drawer */ .inst-dropdown, .inst-nav-item.has-dropdown .inst-dropdown, .inst-nav-item.has-dropdown.mobile-open .inst-dropdown { display: none !important; } /* 4. Dashboard Panel on Mobile */ .inst-dashboard-panel { padding: 10px 10px 30px 10px !important; } .inst-dash-hero { margin-bottom: 10px !important; padding: 4px 0 0 0 !important; } .inst-dash-title { font-size: 17px !important; } .inst-dash-subtitle { font-size: 11px !important; } /* Macro ribbon on mobile */ .inst-macro-ribbon { gap: 6px !important; padding: 2px 0 10px 0 !important; -webkit-overflow-scrolling: touch !important; } .macro-pill { padding: 4px 9px !important; font-size: 10.5px !important; gap: 5px !important; } /* 5 KPI Cards: 2-col grid on mobile with 5th card spanning 2 cols */ .inst-kpi-row { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; margin-bottom: 12px !important; } .inst-kpi-card { padding: 9px 11px !important; border-radius: 9px !important; gap: 2px !important; } .inst-kpi-card:nth-child(5) { grid-column: span 2 !important; } .inst-kpi-icon { font-size: 15px !important; margin-bottom: 2px !important; } .inst-kpi-label { font-size: 9px !important; letter-spacing: 0.3px !important; } .inst-kpi-val { font-size: 16px !important; line-height: 1.15 !important; word-break: break-word !important; } .inst-kpi-sub { font-size: 9.5px !important; } /* 4 Key Indices Row: 2-column grid on mobile */ .inst-indices-row { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; margin-bottom: 12px !important; } .inst-idx-card { padding: 9px 11px !important; border-radius: 9px !important; gap: 3px !important; } .idx-name { font-size: 11.5px !important; } .idx-badge { font-size: 8px !important; padding: 1px 4px !important; } .idx-spot { font-size: 15.5px !important; } .idx-chg { font-size: 10.5px !important; } .idx-meta { font-size: 9px !important; padding-top: 4px !important; } /* 8 Quick Access Modules: 2-column grid on mobile */ .inst-dash-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; } .inst-dash-module { border-radius: 9px !important; } .inst-dm-header { padding: 8px 10px 5px 10px !important; gap: 5px !important; } .inst-dm-icon { font-size: 14px !important; } .inst-dm-title { font-size: 11px !important; } .inst-dm-badge { font-size: 7.5px !important; padding: 1px 3px !important; } .inst-dm-body { padding: 4px 10px 6px 10px !important; } .inst-dm-body p { font-size: 10px !important; line-height: 1.35 !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .inst-dm-footer { padding: 2px 10px 8px 10px !important; } .inst-dm-go { font-size: 10px !important; } /* 5. Control Bands & Forms on Mobile */ .control-band, .options-control-band, .tool-control-band, .sm-controls { padding: 8px 10px !important; gap: 6px !important; border-radius: 9px !important; flex-direction: column !important; align-items: stretch !important; } .ctrl-group { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; width: 100% !important; } .ctrl-group label { font-size: 10px !important; width: 100% !important; display: flex !important; flex-direction: column !important; } .ctrl-group select, .ctrl-group input { font-size: 13px !important; height: 34px !important; padding: 4px 6px !important; border-radius: 6px !important; width: 100% !important; box-sizing: border-box !important; } .ctrl-group button, .control-band button, .options-control-band button { height: 36px !important; font-size: 12px !important; font-weight: 700 !important; border-radius: 6px !important; } /* 6. Metric Strips & KPI Rows across all tabs */ .metrics, .opt-metrics-grid, .sm-metrics, .stat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; } .metric, .metric-card, .opt-metric-item, .sm-card { padding: 8px 10px !important; border-radius: 8px !important; } .metric span:first-child, .stat-lbl, .opt-metric-label { font-size: 9.5px !important; } .metric b, .stat-val, .opt-metric-value { font-size: 15px !important; } /* 7. Canvas Charts Responsive */ canvas { width: 100% !important; max-width: 100% !important; height: auto !important; } .chart-card, .card { padding: 8px !important; border-radius: 9px !important; margin-bottom: 8px !important; } /* Opstra Dual Chart on Mobile */ .opstra-header-row { flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; padding: 4px 2px 8px !important; } .opstra-zoom-group { width: 100% !important; overflow-x: auto !important; white-space: nowrap !important; -webkit-overflow-scrolling: touch !important; padding-bottom: 2px !important; scrollbar-width: none !important; } .opstra-zoom-group::-webkit-scrollbar { display: none; } .opstra-zoom-btn { padding: 3px 6px !important; font-size: 10px !important; flex-shrink: 0 !important; } .opstra-symbol-title { font-size: 14px !important; } .opstra-date-group { font-size: 10px !important; width: 100% !important; justify-content: space-between !important; } .opstra-date-box { width: 85px !important; font-size: 10px !important; padding: 2px 4px !important; } .opstra-pane-price { height: 190px !important; } .opstra-pane-pcr { height: 150px !important; } /* 8. Table Containers — Smooth Touch Scrolling */ .table-scroll, .wpcr-table-wrap, .deliv-table-wrap, [style*="overflow-x:auto"] { width: 100% !important; max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; margin-bottom: 8px !important; border-radius: 8px !important; } table, .wpcr-data-table, .opt-table, .sm-table, .deliv-table, .mtf-table { font-size: 11px !important; } table th, .wpcr-data-table th, .opt-table th { padding: 6px 8px !important; font-size: 9.5px !important; } table td, .wpcr-data-table td, .opt-table td { padding: 6px 8px !important; font-size: 11px !important; } /* 9. Sub-tabs (MTF, Tools, etc.) */ .mta-inner-tabs, .tool-subtabs { overflow-x: auto !important; white-space: nowrap !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; padding: 2px 4px !important; gap: 4px !important; } .mta-inner-tabs::-webkit-scrollbar, .tool-subtabs::-webkit-scrollbar { display: none; } .mta-inner-tab, .tool-subtab { padding: 6px 10px !important; font-size: 11px !important; flex-shrink: 0 !important; } /* 10. Footer Mobile */ .terminal-footer { padding: 16px 10px !important; } .footer-inner { flex-direction: column !important; gap: 14px !important; } .footer-col-links { flex-direction: column !important; gap: 12px !important; } .footer-bottom { flex-direction: column !important; gap: 6px !important; text-align: center !important; } } /* Extra small mobile screens (< 420px) */ @media (max-width: 420px) { .inst-kpi-val { font-size: 14.5px !important; } .idx-spot { padding: 2px 10px 8px 10px !important; } .inst-dm-go { font-size: 10px !important; } /* 5. Control Bands & Forms on Mobile */ .control-band, .options-control-band, .tool-control-band, .sm-controls { padding: 8px 10px !important; gap: 6px !important; border-radius: 9px !important; flex-direction: column !important; align-items: stretch !important; } .ctrl-group { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; width: 100% !important; } .ctrl-group label { font-size: 10px !important; width: 100% !important; display: flex !important; flex-direction: column !important; } .ctrl-group select, .ctrl-group input { font-size: 13px !important; height: 34px !important; padding: 4px 6px !important; border-radius: 6px !important; width: 100% !important; box-sizing: border-box !important; } .ctrl-group button, .control-band button, .options-control-band button { height: 36px !important; font-size: 12px !important; font-weight: 700 !important; border-radius: 6px !important; } /* 6. Metric Strips & KPI Rows across all tabs */ .metrics, .opt-metrics-grid, .sm-metrics, .stat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; } .metric, .metric-card, .opt-metric-item, .sm-card { padding: 8px 10px !important; border-radius: 8px !important; } .metric span:first-child, .stat-lbl, .opt-metric-label { font-size: 9.5px !important; } .metric b, .stat-val, .opt-metric-value { font-size: 15px !important; } /* 7. Canvas Charts Responsive */ canvas { width: 100% !important; max-width: 100% !important; height: auto !important; } .chart-card, .card { padding: 8px !important; border-radius: 9px !important; margin-bottom: 8px !important; } /* Opstra Dual Chart on Mobile */ .opstra-header-row { flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; padding: 4px 2px 8px !important; } .opstra-zoom-group { width: 100% !important; overflow-x: auto !important; white-space: nowrap !important; -webkit-overflow-scrolling: touch !important; padding-bottom: 2px !important; scrollbar-width: none !important; } .opstra-zoom-group::-webkit-scrollbar { display: none; } .opstra-zoom-btn { padding: 3px 6px !important; font-size: 10px !important; flex-shrink: 0 !important; } .opstra-symbol-title { font-size: 14px !important; } .opstra-date-group { font-size: 10px !important; width: 100% !important; justify-content: space-between !important; } .opstra-date-box { width: 85px !important; font-size: 10px !important; padding: 2px 4px !important; } .opstra-pane-price { height: 190px !important; } .opstra-pane-pcr { height: 150px !important; } /* 8. Table Containers — Smooth Touch Scrolling */ .table-scroll, .wpcr-table-wrap, .deliv-table-wrap, [style*="overflow-x:auto"] { width: 100% !important; max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; margin-bottom: 8px !important; border-radius: 8px !important; } table, .wpcr-data-table, .opt-table, .sm-table, .deliv-table, .mtf-table { font-size: 11px !important; } table th, .wpcr-data-table th, .opt-table th { padding: 6px 8px !important; font-size: 9.5px !important; } table td, .wpcr-data-table td, .opt-table td { padding: 6px 8px !important; font-size: 11px !important; } /* 9. Sub-tabs (MTF, Tools, etc.) */ .mta-inner-tabs, .tool-subtabs { overflow-x: auto !important; white-space: nowrap !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; padding: 2px 4px !important; gap: 4px !important; } .mta-inner-tabs::-webkit-scrollbar, .tool-subtabs::-webkit-scrollbar { display: none; } .mta-inner-tab, .tool-subtab { padding: 6px 10px !important; font-size: 11px !important; flex-shrink: 0 !important; } /* 10. Footer Mobile */ .terminal-footer { padding: 16px 10px !important; } .footer-inner { flex-direction: column !important; gap: 14px !important; } .footer-col-links { flex-direction: column !important; gap: 12px !important; } .footer-bottom { flex-direction: column !important; gap: 6px !important; text-align: center !important; } } /* Extra small mobile screens (< 420px) */ @media (max-width: 420px) { .inst-kpi-val { font-size: 14.5px !important; } .idx-spot { font-size: 14px !important; } .inst-dm-title { font-size: 10px !important; } .inst-nav-btn { padding: 7px 9px !important; font-size: 11px !important; } } /* ============================================================================== ⚡ Upstox Option Chain Pro Desk - Modern Institutional Derivatives Matrix ============================================================================== */ .upstox-chain-desk { margin-top: 6px; display: flex; flex-direction: column; gap: 12px; max-width: 100%; box-sizing: border-box; overflow-x: hidden; } /* Upstox Hero Banner */ .upstox-hero-banner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 12px 18px; box-shadow: var(--shadow-sm); } .upstox-hero-left { display: flex; align-items: center; gap: 12px; } .upstox-hero-icon { font-size: 24px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: rgba(16, 185, 129, 0.12); border: 1px solid rgba(16, 185, 129, 0.25); flex-shrink: 0; } .upstox-hero-title { margin: 0; font-size: 16px; font-weight: 800; color: var(--text-primary); display: flex; align-items: center; gap: 8px; letter-spacing: -0.2px; } .upstox-hero-desc { margin: 2px 0 0 0; font-size: 11.5px; color: var(--text-muted); } /* Controls Bar - Clean Horizontal Flex Toolbar */ .upstox-ctrl-bar { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 10px 16px; box-shadow: var(--shadow-sm); } .upstox-ctrl-group { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; } .upstox-ctrl-item { display: flex; flex-direction: column; gap: 4px; } .upstox-ctrl-item label { font-size: 10.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; } .upstox-select { background: var(--bg-subtle); color: var(--text-primary); border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: 5px 12px; font-size: 12px; font-weight: 600; font-family: inherit; outline: none; cursor: pointer; height: 34px; box-sizing: border-box; transition: all 0.15s ease; } .upstox-select:hover { border-color: var(--border-hover); } .upstox-select:focus { border-color: #10b981; box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2); } /* ------------------------------------------------------------- Searchable Instrument Combobox Dropdown Component ------------------------------------------------------------- */ .upstox-combo-wrapper { position: relative; } .upstox-combo-trigger { display: flex; align-items: center; justify-content: space-between; background: var(--bg-subtle, #0b1329); border: 1px solid var(--border-default, #334155); border-radius: var(--radius-sm, 6px); padding: 6px 12px; height: 36px; cursor: pointer; user-select: none; transition: all 0.15s ease; outline: none; box-sizing: border-box; } .upstox-combo-trigger:hover, .upstox-combo-trigger.is-open { border-color: #38bdf8; box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.22); } .upstox-combo-selected { display: flex; align-items: center; gap: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; } .combo-icon { font-size: 14px; line-height: 1; } .combo-text { font-size: 12.5px; font-weight: 700; color: var(--text-primary, #f8fafc); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .combo-badge { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.2; } .combo-badge.badge-idx { background: rgba(56, 189, 248, 0.18); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.35); } .combo-badge.badge-stock { background: rgba(16, 185, 129, 0.18); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.35); } .combo-badge.badge-bse { background: rgba(245, 158, 11, 0.18); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.35); } .combo-arrow { color: #94a3b8; font-size: 12px; transition: transform 0.2s ease, color 0.15s ease; margin-left: 8px; line-height: 1; } .upstox-combo-trigger.is-open .combo-arrow { transform: rotate(180deg); color: #38bdf8; } /* Combobox Popover Dropdown Menu */ .upstox-combo-menu { position: absolute; top: calc(100% + 4px); left: 0; width: 100%; min-width: 380px; max-width: 520px; background: var(--bg-card, #0f172a); border: 1px solid var(--border-default, #334155); border-radius: 8px; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.05); z-index: 1050; display: flex; flex-direction: column; overflow: hidden; animation: comboFadeIn 0.15s ease-out; } @keyframes comboFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .upstox-combo-search-wrap { position: relative; padding: 10px; background: var(--bg-subtle, #0b1329); border-bottom: 1px solid var(--border-subtle, #1e293b); display: flex; align-items: center; } .upstox-combo-search-wrap input { width: 100%; background: var(--bg-base, #020617); border: 1px solid var(--border-default, #334155); border-radius: 6px; padding: 8px 12px; padding-right: 90px; font-size: 12.5px; color: var(--text-primary, #f8fafc); outline: none; font-family: inherit; transition: border-color 0.15s, box-shadow 0.15s; } .upstox-combo-search-wrap input:focus { border-color: #38bdf8; box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2); } .combo-match-count { position: absolute; right: 20px; font-size: 11px; color: #64748b; font-weight: 700; pointer-events: none; } .upstox-combo-categories { display: flex; gap: 5px; padding: 6px 10px; background: var(--bg-subtle, #0a0f1d); border-bottom: 1px solid var(--border-subtle, #1e293b); overflow-x: auto; } .combo-cat-btn { background: #1e293b; border: 1px solid #334155; border-radius: 4px; color: #94a3b8; font-size: 11px; font-weight: 600; padding: 3px 8px; cursor: pointer; white-space: nowrap; transition: all 0.12s ease; } .combo-cat-btn:hover { background: #334155; color: #f8fafc; } .combo-cat-btn.active { background: #2563eb; border-color: #3b82f6; color: #ffffff; } .upstox-combo-list { max-height: 340px; overflow-y: auto; padding: 4px 0; } .combo-group-header { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; color: #64748b; padding: 8px 12px 4px 12px; background: rgba(15, 23, 42, 0.95); position: sticky; top: 0; z-index: 2; border-bottom: 1px solid rgba(255, 255, 255, 0.03); } .combo-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; cursor: pointer; transition: background 0.1s ease; border-bottom: 1px solid rgba(255, 255, 255, 0.02); } .combo-item:hover, .combo-item.is-highlighted { background: rgba(56, 189, 248, 0.12); } .combo-item.is-selected { background: rgba(16, 185, 129, 0.15); border-left: 3px solid #10b981; } .combo-item-left { display: flex; flex-direction: column; gap: 2px; overflow: hidden; } .combo-item-title { display: flex; align-items: center; gap: 6px; } .combo-item-sym { font-weight: 800; font-size: 13px; color: #38bdf8; font-family: 'JetBrains Mono', monospace; } .combo-item-name { font-size: 11.5px; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 230px; } .combo-item-right { display: flex; align-items: center; gap: 8px; font-size: 11px; } .combo-item-sector { color: #64748b; font-size: 10.5px; background: rgba(255, 255, 255, 0.03); padding: 2px 6px; border-radius: 3px; } .combo-item-lot { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: #34d399; background: rgba(16, 185, 129, 0.1); padding: 2px 6px; border-radius: 3px; font-weight: 700; } .combo-no-results { padding: 28px 16px; text-align: center; color: #64748b; font-size: 12.5px; } /* Institutional KPI Metric Strip - 8-Column Responsive Grid */ .upstox-kpi-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)) !important; gap: 10px; margin-bottom: 2px; } @media (max-width: 1300px) { .upstox-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } } @media (max-width: 700px) { .upstox-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } .upstox-kpi-card { background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; box-shadow: var(--shadow-sm); transition: border-color 0.15s ease, transform 0.15s ease; } .upstox-kpi-card:hover { border-color: #38bdf8; transform: translateY(-1px); } .upstox-kpi-label { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .upstox-kpi-val { font-size: 16px; font-weight: 800; font-family: 'JetBrains Mono', monospace; line-height: 1.2; } .upstox-kpi-sub { font-size: 10px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Visualizer Banner / Header */ .opt-vis-banner { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; padding: 4px 2px; } .opt-vis-banner-title { font-size: 12px; font-weight: 800; color: var(--text-primary); letter-spacing: 0.3px; } .opt-vis-banner-badge { font-size: 9.5px; background: rgba(124, 58, 237, 0.15); color: #7c3aed; border: 1px solid rgba(124, 58, 237, 0.3); padding: 1px 6px; border-radius: 4px; font-weight: 700; } html[data-theme="dark"] .opt-vis-banner-badge, body[data-theme="dark"] .opt-vis-banner-badge { background: rgba(124, 58, 237, 0.25); color: #c4b5fd; border-color: rgba(124, 58, 237, 0.4); } .opt-vis-toggle-btn { padding: 4px 12px; font-size: 11px; font-weight: 600; background: var(--bg-card); color: var(--text-secondary); border: 1px solid var(--border-default); border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all 0.15s ease; box-shadow: var(--shadow-sm); } .opt-vis-toggle-btn:hover { background: var(--bg-subtle); border-color: var(--border-hover); color: var(--text-primary); } /* ============================================================================== ☀️ UPSTOX OPTION CHAIN PRO - ULTRA CRISP DAY / LIGHT THEME STYLES ============================================================================== */ html[data-theme="light"] .upstox-chain-desk, body[data-theme="light"] .upstox-chain-desk, [data-theme="light"] .upstox-chain-desk { background: transparent; color: #0f172a; } /* 1. Hero Banner in Day Mode */ html[data-theme="light"] .upstox-hero-banner, body[data-theme="light"] .upstox-hero-banner, [data-theme="light"] .upstox-hero-banner { background: #ffffff !important; border: 1px solid #cbd5e1 !important; box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05) !important; } html[data-theme="light"] .upstox-hero-title, body[data-theme="light"] .upstox-hero-title, [data-theme="light"] .upstox-hero-title { color: #0f172a !important; } html[data-theme="light"] .upstox-hero-desc, body[data-theme="light"] .upstox-hero-desc, [data-theme="light"] .upstox-hero-desc { color: #475569 !important; } html[data-theme="light"] #upstoxLiveStatus, body[data-theme="light"] #upstoxLiveStatus, [data-theme="light"] #upstoxLiveStatus { background: #f8fafc !important; border: 1px solid #cbd5e1 !important; color: #0f172a !important; } html[data-theme="light"] #upstoxLastUpdated, body[data-theme="light"] #upstoxLastUpdated, [data-theme="light"] #upstoxLastUpdated { color: #0284c7 !important; font-weight: 700; } /* 2. Controls Toolbar in Day Mode */ html[data-theme="light"] .upstox-ctrl-bar, body[data-theme="light"] .upstox-ctrl-bar, [data-theme="light"] .upstox-ctrl-bar { background: #ffffff !important; border: 1px solid #cbd5e1 !important; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important; } html[data-theme="light"] .upstox-ctrl-item label, body[data-theme="light"] .upstox-ctrl-item label, [data-theme="light"] .upstox-ctrl-item label { color: #64748b !important; } html[data-theme="light"] .upstox-select, body[data-theme="light"] .upstox-select, [data-theme="light"] .upstox-select { background: #f8fafc !important; color: #0f172a !important; border: 1px solid #cbd5e1 !important; } html[data-theme="light"] .upstox-select:hover, body[data-theme="light"] .upstox-select:hover, [data-theme="light"] .upstox-select:hover { border-color: #059669 !important; } /* 3. KPI Metric Cards in Day Mode */ html[data-theme="light"] .upstox-kpi-card, body[data-theme="light"] .upstox-kpi-card, [data-theme="light"] .upstox-kpi-card { background: #ffffff !important; border: 1px solid #cbd5e1 !important; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important; } html[data-theme="light"] .upstox-kpi-card:hover, body[data-theme="light"] .upstox-kpi-card:hover, [data-theme="light"] .upstox-kpi-card:hover { border-color: #0284c7 !important; box-shadow: 0 4px 12px rgba(2, 132, 199, 0.1) !important; } html[data-theme="light"] .upstox-kpi-label, body[data-theme="light"] .upstox-kpi-label, [data-theme="light"] .upstox-kpi-label { color: #64748b !important; } html[data-theme="light"] .upstox-kpi-sub, body[data-theme="light"] .upstox-kpi-sub, [data-theme="light"] .upstox-kpi-sub { color: #64748b !important; } /* 4. Option Chain Table & Wrapper in Day Mode */ html[data-theme="light"] .upstox-table-wrapper, body[data-theme="light"] .upstox-table-wrapper, [data-theme="light"] .upstox-table-wrapper { background: #ffffff !important; border: 1px solid #cbd5e1 !important; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important; } html[data-theme="light"] .upstox-table, body[data-theme="light"] .upstox-table, [data-theme="light"] .upstox-table { background: #ffffff !important; color: #0f172a !important; } html[data-theme="light"] .upstox-table th, body[data-theme="light"] .upstox-table th, [data-theme="light"] .upstox-table th { border-color: #cbd5e1 !important; } html[data-theme="light"] .upstox-table thead, body[data-theme="light"] .upstox-table thead, [data-theme="light"] .upstox-table thead { background: #f8fafc !important; } html[data-theme="light"] .upstox-table thead tr.head-group th, body[data-theme="light"] .upstox-table thead tr.head-group th, [data-theme="light"] .upstox-table thead tr.head-group th { border-bottom: 1px solid #cbd5e1 !important; } html[data-theme="light"] .upstox-table thead tr.head-sub th, body[data-theme="light"] .upstox-table thead tr.head-sub th, [data-theme="light"] .upstox-table thead tr.head-sub th { background: #f1f5f9 !important; color: #475569 !important; border-bottom: 2px solid #cbd5e1 !important; border-right: 1px solid #e2e8f0 !important; } html[data-theme="light"] .th-calls, body[data-theme="light"] .th-calls, [data-theme="light"] .th-calls { background: #ecfdf5 !important; color: #047857 !important; border-right: 1px solid #cbd5e1 !important; } html[data-theme="light"] .th-puts, body[data-theme="light"] .th-puts, [data-theme="light"] .th-puts { background: #fef2f2 !important; color: #b91c1c !important; border-left: 1px solid #cbd5e1 !important; } html[data-theme="light"] .th-strike, body[data-theme="light"] .th-strike, [data-theme="light"] .th-strike { background: #e0f2fe !important; color: #0369a1 !important; border-left: 1px solid #cbd5e1 !important; border-right: 1px solid #cbd5e1 !important; } html[data-theme="light"] .col-strike, body[data-theme="light"] .col-strike, [data-theme="light"] .col-strike { background: #f0f9ff !important; color: #0284c7 !important; border-left: 1px solid #cbd5e1 !important; border-right: 1px solid #cbd5e1 !important; } html[data-theme="light"] .upstox-table td, body[data-theme="light"] .upstox-table td, [data-theme="light"] .upstox-table td { border-bottom: 1px solid #f1f5f9 !important; color: #0f172a !important; } html[data-theme="light"] .upstox-table tr:hover td, body[data-theme="light"] .upstox-table tr:hover td, [data-theme="light"] .upstox-table tr:hover td { background: #f0f9ff !important; } /* ITM Amber Tints for Calls and Puts */ html[data-theme="light"] .upstox-chain-row.call-itm td.td-ce, body[data-theme="light"] .upstox-chain-row.call-itm td.td-ce, [data-theme="light"] .upstox-chain-row.call-itm td.td-ce { background: #fffbeb !important; } html[data-theme="light"] .upstox-chain-row.put-itm td.td-pe, body[data-theme="light"] .upstox-chain-row.put-itm td.td-pe, [data-theme="light"] .upstox-chain-row.put-itm td.td-pe { background: #fffbeb !important; } /* ATM Row Highlight in Day Mode */ html[data-theme="light"] .upstox-chain-row.is-atm td, body[data-theme="light"] .upstox-chain-row.is-atm td, [data-theme="light"] .upstox-chain-row.is-atm td { background: #fef3c7 !important; border-top: 1px solid #f59e0b !important; border-bottom: 1px solid #f59e0b !important; } html[data-theme="light"] .upstox-chain-row.is-atm td.col-strike, body[data-theme="light"] .upstox-chain-row.is-atm td.col-strike, [data-theme="light"] .upstox-chain-row.is-atm td.col-strike { background: #f59e0b !important; color: #ffffff !important; } html[data-theme="light"] .upstox-chain-row.is-atm td.col-strike .strike-num, body[data-theme="light"] .upstox-chain-row.is-atm td.col-strike .strike-num, [data-theme="light"] .upstox-chain-row.is-atm td.col-strike .strike-num { color: #ffffff !important; font-weight: 900; } /* Table Footer in Day Mode */ html[data-theme="light"] .upstox-table tfoot, body[data-theme="light"] .upstox-table tfoot, [data-theme="light"] .upstox-table tfoot { background: #f8fafc !important; } html[data-theme="light"] .upstox-foot-row td, body[data-theme="light"] .upstox-foot-row td, [data-theme="light"] .upstox-foot-row td { background: #f1f5f9 !important; color: #0f172a !important; border-top: 2px solid #cbd5e1 !important; } /* 5. Visualizer in Day Mode */ html[data-theme="light"] .opt-vis-card, body[data-theme="light"] .opt-vis-card, [data-theme="light"] .opt-vis-card { background: #ffffff !important; border: 1px solid #cbd5e1 !important; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important; } html[data-theme="light"] .opt-vis-title, body[data-theme="light"] .opt-vis-title, [data-theme="light"] .opt-vis-title { color: #0f172a !important; } html[data-theme="light"] .opt-vis-sub, body[data-theme="light"] .opt-vis-sub, [data-theme="light"] .opt-vis-sub { color: #64748b !important; } html[data-theme="light"] .opt-vis-pill, body[data-theme="light"] .opt-vis-pill, [data-theme="light"] .opt-vis-pill { background: #f8fafc !important; border: 1px solid #cbd5e1 !important; color: #334155 !important; } html[data-theme="light"] .opt-vis-pill.active, body[data-theme="light"] .opt-vis-pill.active, [data-theme="light"] .opt-vis-pill.active { background: #7c3aed !important; color: #ffffff !important; border-color: #6d28d9 !important; } /* Badge Live */ .upstox-badge-live { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px; letter-spacing: 0.3px; display: inline-flex; align-items: center; gap: 4px; } .upstox-badge-live.is-live { background: rgba(16, 185, 129, 0.15); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.3); } .upstox-badge-live.is-demo { background: rgba(245, 158, 11, 0.15); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.3); } .upstox-badge-live.is-error { background: rgba(239, 68, 68, 0.15); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); } .upstox-badge-live.is-closed { background: rgba(148, 163, 184, 0.15); color: #94a3b8; border: 1px solid rgba(148, 163, 184, 0.3); } .upstox-subtitle { font-size: 11px; color: #64748b; margin-top: 1px; } /* Quick Index Switcher Pills */ .upstox-asset-pills { display: flex; align-items: center; gap: 6px; background: #040814; border: 1px solid #1e293b; border-radius: 8px; padding: 3px 4px; } .upstox-asset-quick-bar { display: flex; align-items: center; gap: 6px; background: #040814; border: 1px solid #1e293b; border-radius: 8px; padding: 6px 10px; overflow-x: auto; white-space: nowrap; margin-bottom: 12px; scrollbar-width: thin; } .upstox-pills-label { font-size: 10px; font-weight: 800; letter-spacing: 0.5px; color: #64748b; margin-right: 4px; flex-shrink: 0; } .upstox-pill-btn { background: rgba(255, 255, 255, 0.03); border: 1px solid #1e293b; color: #94a3b8; font-size: 11.5px; font-weight: 700; padding: 5px 12px; border-radius: 6px; cursor: pointer; transition: all 0.15s ease; white-space: nowrap; flex-shrink: 0; } .upstox-pill-btn:hover { color: #f8fafc; background: rgba(255, 255, 255, 0.08); border-color: #334155; } .upstox-pill-btn.active { background: #10b981; color: #040814; border-color: #10b981; box-shadow: 0 0 10px rgba(16, 185, 129, 0.3); } .upstox-pill-btn.bse-pill { border-color: rgba(245, 158, 11, 0.3); color: #fbbf24; } .upstox-pill-btn.bse-pill.active { background: #f59e0b; color: #040814; border-color: #f59e0b; box-shadow: 0 0 10px rgba(245, 158, 11, 0.4); } .upstox-pill-btn.stock-pill { border-color: rgba(96, 165, 250, 0.25); color: #93c5fd; } .upstox-pill-btn.stock-pill.active { background: #3b82f6; color: #ffffff; border-color: #3b82f6; box-shadow: 0 0 10px rgba(59, 130, 246, 0.4); } /* Right Actions */ .upstox-right-actions { display: flex; align-items: center; gap: 8px; } .upstox-tick-info { font-size: 11px; font-family: 'JetBrains Mono', monospace; display: flex; gap: 4px; align-items: center; } .upstox-tick-val { color: #f8fafc; font-weight: 600; } .upstox-ctrl-select { padding: 5px 10px; border-radius: 6px; background: #040814; border: 1px solid #27354f; color: #f8fafc; font-size: 11.5px; font-weight: 600; outline: none; cursor: pointer; } .upstox-ctrl-select:focus { border-color: #10b981; } .select-expiry { border-color: rgba(16, 185, 129, 0.4); color: #34d399; font-weight: 700; } .upstox-action-btn { background: #10b981; color: #040814; border: none; border-radius: 6px; padding: 5px 12px; font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; transition: all 0.15s ease; } .upstox-action-btn:hover { background: #34d399; box-shadow: 0 0 12px rgba(16, 185, 129, 0.4); } /* Segmented Buttons (View Toggle) */ .upstox-view-toggle { display: flex; background: #040814; border: 1px solid #1e293b; border-radius: 6px; padding: 2px; gap: 2px; } .upstox-view-btn { background: transparent; border: none; color: #94a3b8; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 4px; cursor: pointer; transition: all 0.15s ease; white-space: nowrap; } .upstox-view-btn:hover { color: #fff; } .upstox-view-btn.active { background: rgba(59, 130, 246, 0.25); color: #60a5fa; box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.4); } /* Depth Bar Mode & Moneyness Toggles */ .upstox-depth-toggle, .upstox-money-toggle { display: flex; background: #040814; border: 1px solid #1e293b; border-radius: 6px; padding: 2px; gap: 2px; } .upstox-depth-btn, .upstox-money-btn { background: transparent; border: none; color: #94a3b8; font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 4px; cursor: pointer; transition: all 0.15s ease; white-space: nowrap; } .upstox-depth-btn:hover, .upstox-money-btn:hover { color: #fff; } .upstox-depth-btn.active { background: rgba(16, 185, 129, 0.22); color: #34d399; box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.4); } .upstox-money-btn.active { background: rgba(251, 191, 36, 0.22); color: #fbbf24; box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.4); } /* PCR Meter in Ticker Card */ .upstox-pcr-meter-track { width: 100%; height: 4px; background: rgba(255, 255, 255, 0.08); border-radius: 2px; margin-top: 4px; overflow: hidden; position: relative; } .upstox-pcr-meter-fill { height: 100%; border-radius: 2px; transition: width 0.3s ease, background 0.3s ease; } /* Range Filter Pills */ .upstox-range-pills { display: flex; background: #040814; border: 1px solid #1e293b; border-radius: 6px; padding: 2px; gap: 2px; } .upstox-range-btn { background: transparent; border: none; color: #94a3b8; font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 4px; cursor: pointer; transition: all 0.15s ease; } .upstox-range-btn:hover { color: #fff; } .upstox-range-btn.active { background: #1e293b; color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.3); } /* Strike Search */ .upstox-search-box { display: flex; align-items: center; background: #040814; border: 1px solid #27354f; border-radius: 6px; padding: 4px 8px; gap: 6px; } .upstox-search-box .search-icon { font-size: 11px; color: #64748b; } .upstox-search-input { background: transparent; border: none; color: #f8fafc; font-size: 11.5px; width: 90px; outline: none; font-family: 'JetBrains Mono', monospace; } .upstox-search-input::placeholder { color: #475569; } /* Center ATM Button */ .upstox-center-atm-btn { background: rgba(56, 189, 248, 0.15); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.4); padding: 5px 12px; border-radius: 6px; font-size: 11.5px; font-weight: 700; cursor: pointer; transition: all 0.15s ease; white-space: nowrap; } .upstox-center-atm-btn:hover { background: rgba(56, 189, 248, 0.3); box-shadow: 0 0 10px rgba(56, 189, 248, 0.3); } /* 1. GoCharting Style Options Desk Header */ .go-options-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; background: #080d1e; border: 1px solid #1a253c; border-radius: 8px; padding: 8px 12px; } .go-header-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .go-brand { display: flex; align-items: center; gap: 8px; } .go-logo-icon { font-size: 16px; color: #34d399; } .go-desk-title { font-size: 14px; font-weight: 800; color: #f8fafc; letter-spacing: -0.01em; } .go-header-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .go-ctrl-item { display: flex; align-items: center; gap: 6px; } .go-ctrl-item label { font-size: 9.5px; font-weight: 800; color: #64748b; letter-spacing: 0.4px; } .go-refresh-group { display: flex; align-items: center; gap: 4px; } /* 2. GoCharting Style Sleek Horizontal Summary Ribbon */ .go-summary-ribbon { display: flex; align-items: center; gap: 12px; background: #050a17; border: 1px solid #162035; border-radius: 6px; padding: 6px 14px; overflow-x: auto; white-space: nowrap; font-family: 'JetBrains Mono', monospace; font-size: 11px; } .ribbon-item { display: flex; align-items: center; gap: 5px; } .ribbon-lbl { font-size: 9.5px; font-weight: 800; color: #64748b; text-transform: uppercase; letter-spacing: 0.4px; } .ribbon-val { font-size: 12px; font-weight: 800; color: #f8fafc; } .ribbon-val.spot { color: #60a5fa; } .ribbon-val.atm { color: #fbbf24; } .ribbon-val.straddle { color: #f59e0b; } .ribbon-val.pcr { color: #34d399; } .ribbon-val.pain { color: #c084fc; } .ribbon-val.vix { color: #fbbf24; } .ribbon-val.exp { color: #38bdf8; } .ribbon-chg { font-size: 10.5px; font-weight: 700; } .ribbon-badge { font-size: 9.5px; font-weight: 800; padding: 1px 5px; border-radius: 3px; } .ribbon-divider { width: 1px; height: 16px; background: #1e293b; flex-shrink: 0; } .oi-ratio-micro { display: flex; width: 50px; height: 5px; background: #020617; border-radius: 2.5px; overflow: hidden; margin: 0 4px; border: 1px solid rgba(255, 255, 255, 0.05); } .oi-ratio-micro .ratio-ce { background: linear-gradient(90deg, #10b981 0%, #059669 100%); transition: width 0.3s ease; } .oi-ratio-micro .ratio-pe { background: linear-gradient(90deg, #dc2626 0%, #ef4444 100%); transition: width 0.3s ease; } /* 4. Option Chain Table */ .upstox-table-wrapper { background: #050a17; border: 1px solid #1a2744; border-radius: 8px; overflow-x: auto; max-height: 720px; position: relative; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); } .upstox-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 11.5px; font-family: 'JetBrains Mono', monospace; text-align: right; white-space: nowrap; } .upstox-table th, .upstox-table td { padding: 5px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); } /* Sticky Headers */ .upstox-table thead { position: sticky; top: 0; z-index: 20; } .upstox-table thead tr.head-group th { font-size: 11.5px; font-weight: 800; letter-spacing: 0.5px; padding: 8px 10px; border-bottom: 1px solid #1e293b; } .upstox-table thead tr.head-sub th { font-size: 10px; font-weight: 700; color: #94a3b8; text-transform: uppercase; background: #060c1c; border-bottom: 2px solid #1e293b; padding: 6px 8px; } .group-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; } .dot-call { background: #10b981; box-shadow: 0 0 6px #10b981; } .dot-put { background: #ef4444; box-shadow: 0 0 6px #ef4444; } .th-calls { background: rgba(16, 185, 129, 0.12) !important; color: #34d399 !important; border-right: 1px solid #1e293b; } .th-puts { background: rgba(239, 68, 68, 0.12) !important; color: #f87171 !important; border-left: 1px solid #1e293b; } .th-strike { background: #030712 !important; color: #38bdf8 !important; width: 80px; text-align: center !important; border-left: 1px solid #1e293b; border-right: 1px solid #1e293b; font-weight: 800; } /* Center Strike Column */ .col-strike { text-align: center !important; font-weight: 800; background: #030712; color: #38bdf8; border-left: 1px solid #1e293b; border-right: 1px solid #1e293b; font-size: 12.5px; padding: 4px 8px; } .strike-wrap { display: flex; align-items: center; justify-content: center; gap: 4px; } .strike-num { letter-spacing: -0.01em; } .atm-tag { font-size: 8.5px; font-weight: 900; background: #10b981; color: #040814; padding: 1px 4px; border-radius: 3px; letter-spacing: 0.3px; } .atm-strike-badge { background: rgba(251, 191, 36, 0.22) !important; color: #fbbf24 !important; box-shadow: inset 0 0 0 1.5px rgba(251, 191, 36, 0.6); } /* Institutional ITM Shading (Sensibull / Opstra Warm Amber Diagonal) */ .upstox-chain-row.call-itm td.td-ce { background: rgba(245, 158, 11, 0.075) !important; } .upstox-chain-row.call-itm td.col-oi-bar:first-child { border-left: 2px solid rgba(245, 158, 11, 0.6); } .upstox-chain-row.put-itm td.td-pe { background: rgba(245, 158, 11, 0.075) !important; } .upstox-chain-row.put-itm td.col-oi-bar:last-child { border-right: 2px solid rgba(245, 158, 11, 0.6); } .upstox-chain-row:hover td { background: rgba(59, 130, 246, 0.12) !important; } .upstox-chain-row.is-atm td { background: rgba(251, 191, 36, 0.12) !important; border-top: 1px solid rgba(251, 191, 36, 0.4) !important; border-bottom: 1px solid rgba(251, 191, 36, 0.4) !important; } .upstox-chain-row.is-atm td.col-strike { background: #f59e0b !important; color: #040814 !important; font-weight: 900 !important; box-shadow: 0 0 12px rgba(245, 158, 11, 0.5); } .upstox-chain-row.is-atm td.col-strike .strike-num { color: #040814 !important; font-weight: 900 !important; } /* Major Wall Highlights */ .upstox-chain-row.is-max-ce-oi td.td-ce { box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.4); } .upstox-chain-row.is-max-pe-oi td.td-pe { box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.4); } /* Institutional Wall Badges */ .wall-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 8px; font-weight: 800; padding: 1px 4px; border-radius: 3px; letter-spacing: 0.3px; line-height: 1.2; } .wall-res { background: rgba(239, 68, 68, 0.25); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.5); box-shadow: 0 0 8px rgba(239, 68, 68, 0.25); } .wall-sup { background: rgba(16, 185, 129, 0.25); color: #6ee7b7; border: 1px solid rgba(16, 185, 129, 0.5); box-shadow: 0 0 8px rgba(16, 185, 129, 0.25); } .wall-vol { background: rgba(168, 85, 247, 0.25); color: #d8b4fe; border: 1px solid rgba(168, 85, 247, 0.5); } /* Horizontal Depth Bars (OI & Volume) */ .oi-bar, .vol-bar { position: absolute; top: 2px; bottom: 2px; border-radius: 2px; pointer-events: none; } .oi-bar { opacity: 0.28; } .vol-bar { opacity: 0.22; } .oi-bar-call { right: 2px; background: linear-gradient(90deg, transparent 0%, #10b981 100%); } .oi-bar-put { left: 2px; background: linear-gradient(270deg, transparent 0%, #ef4444 100%); } .vol-bar-call { right: 2px; background: linear-gradient(90deg, transparent 0%, #38bdf8 100%); } .vol-bar-put { left: 2px; background: linear-gradient(270deg, transparent 0%, #38bdf8 100%); } .oi-text { position: relative; z-index: 2; } /* Strike PCR Mini Pill */ .strike-pcr-pill { font-size: 8px; font-weight: 700; padding: 1px 4px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); color: #94a3b8; letter-spacing: 0.2px; } .strike-pcr-pill.bull { color: #34d399; background: rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.3); } .strike-pcr-pill.bear { color: #f87171; background: rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.3); } /* Buildup Badges */ .buildup-tag { font-size: 9.5px; font-weight: 800; padding: 1.5px 5px; border-radius: 3px; letter-spacing: 0.4px; display: inline-block; } .buildup-lb { background: rgba(16, 185, 129, 0.2); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.4); } .buildup-sb { background: rgba(239, 68, 68, 0.2); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.4); } .buildup-sc { background: rgba(56, 189, 248, 0.2); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.4); } .buildup-lu { background: rgba(245, 158, 11, 0.2); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.4); } .buildup-none { color: #64748b; } /* Spot Horizontal Line Row */ .upstox-spot-line-row td { padding: 0 !important; background: transparent !important; border: none !important; } .upstox-spot-line { position: relative; height: 2px; background: linear-gradient(90deg, rgba(56, 189, 248, 0.1) 0%, rgba(56, 189, 248, 0.9) 50%, rgba(56, 189, 248, 0.1) 100%); display: flex; align-items: center; justify-content: center; margin: 3px 0; box-shadow: 0 0 10px rgba(56, 189, 248, 0.7); } .spot-pill { background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%); color: #fff; font-size: 9.5px; font-weight: 800; padding: 2px 12px; border-radius: 12px; letter-spacing: 0.4px; box-shadow: 0 0 12px rgba(2, 132, 199, 0.9); display: inline-flex; align-items: center; gap: 6px; } .spot-pill .pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: #38bdf8; box-shadow: 0 0 6px #38bdf8; animation: upstox-pulse 1.2s ease-in-out infinite; } @keyframes upstox-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } } /* Sticky Totals Footer */ .upstox-table tfoot { position: sticky; bottom: 0; z-index: 15; } .upstox-foot-row td { background: #060b19 !important; border-top: 2px solid #1e293b; border-bottom: 2px solid #1e293b; font-size: 11px; padding: 6px 8px; } .up-tick { color: #34d399; } .down-tick { color: #f87171; } .text-green { color: #34d399; } .text-red { color: #f87171; } @keyframes upstox-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .loading-spin { animation: upstox-spin 0.8s linear infinite; } .refresh-icon.spin { display: inline-block; animation: upstox-spin 0.8s linear infinite; } /* ========================================================================== ⚡ INSTITUTIONAL FUTURES INTELLIGENCE DESK (KOTAK NEO DERIVATIVES ENGINE) ========================================================================== */ .futures-desk { padding: 16px; display: flex; flex-direction: column; gap: 16px; animation: fadeIn 0.25s ease-out; } /* ============================================================================== Institutional Futures Intelligence Terminal (Modern Dark UI) ============================================================================== */ .futures-desk { display: flex; flex-direction: column; gap: 14px; animation: fadeIn 0.2s ease-out; color: #e2e8f0; } /* 1. Top Bar */ .fut-top-bar { display: flex; justify-content: space-between; align-items: center; background: #090e1a; border: 1px solid #1a2538; border-radius: 10px; padding: 12px 18px; gap: 16px; flex-wrap: wrap; } .fut-title-group { display: flex; align-items: center; gap: 12px; } .fut-brand-icon { font-size: 24px; width: 42px; height: 42px; background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.3); border-radius: 8px; display: flex; align-items: center; justify-content: center; } .fut-heading { margin: 0; font-size: 16px; font-weight: 800; color: #f8fafc; display: flex; align-items: center; gap: 10px; letter-spacing: 0.5px; } .fut-broker-tag { font-size: 10px; background: #ef4444; color: #ffffff; font-weight: 800; padding: 2px 7px; border-radius: 4px; letter-spacing: 0.5px; } .fut-count-pill { font-size: 10px; background: rgba(56, 189, 248, 0.15); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.3); padding: 2px 8px; border-radius: 12px; font-family: 'JetBrains Mono', monospace; font-weight: 700; } .fut-subheading { margin: 2px 0 0 0; font-size: 11.5px; color: #94a3b8; } .fut-controls-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .fut-search-box { display: flex; align-items: center; background: #060a12; border: 1px solid #1e293b; border-radius: 6px; padding: 0 10px; gap: 6px; } .fut-search-box input { background: transparent; border: none; outline: none; color: #f8fafc; font-size: 12px; font-family: 'JetBrains Mono', monospace; padding: 7px 0; min-width: 220px; } .fut-pulse-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; padding: 6px 10px; border-radius: 6px; background: rgba(16, 185, 129, 0.12); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3); font-weight: 700; font-family: 'JetBrains Mono', monospace; } .fut-refresh-select { padding: 7px 10px; font-size: 12px; background: #060a12; border: 1px solid #1e293b; color: #f8fafc; border-radius: 6px; } .fut-refresh-btn { background: #ef4444; border: none; color: #ffffff; padding: 7px 14px; font-size: 12px; border-radius: 6px; font-weight: 700; cursor: pointer; transition: opacity 0.15s ease; } .fut-refresh-btn:hover { opacity: 0.9; } /* 2. Index Ribbon */ .fut-index-strip-wrapper { background: #090e1a; border: 1px solid #1a2538; border-radius: 10px; padding: 12px 14px; } .fut-index-strip-header { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 800; color: #64748b; letter-spacing: 0.6px; margin-bottom: 0px; text-transform: uppercase; cursor: pointer; user-select: none; transition: all 0.15s ease; } .fut-index-strip-header:hover { color: #38bdf8; } [data-theme="light"] .fut-index-strip-header:hover { color: #0284c7 !important; } .fut-index-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; } .fut-index-card { background: #0d1524; border: 1px solid #1e293d; border-radius: 8px; padding: 10px 12px; cursor: pointer; transition: all 0.15s ease; } .fut-index-card:hover { border-color: #38bdf8; background: #111a2d; transform: translateY(-1px); } .fut-index-card.active-focus { border-color: #10b981; box-shadow: 0 0 10px rgba(16, 185, 129, 0.2); } .fut-ic-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .fut-ic-sym { font-size: 13px; font-weight: 800; color: #f8fafc; } .fut-ic-exp { font-size: 10px; color: #64748b; margin-left: 5px; } .fut-ic-ltp-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; } .fut-ic-ltp { font-size: 15px; font-weight: 800; font-family: 'JetBrains Mono', monospace; } .fut-ic-chg { font-size: 11px; font-weight: 700; font-family: 'JetBrains Mono', monospace; } .fut-ic-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; font-size: 10px; border-top: 1px solid #1a2538; padding-top: 6px; } .fut-ic-stat-item { display: flex; justify-content: space-between; color: #94a3b8; } .fut-ic-stat-val { font-weight: 700; color: #cbd5e1; font-family: 'JetBrains Mono', monospace; } /* 3. Navigation & Filtering Ribbon */ .fut-nav-container { display: flex; flex-direction: column; gap: 10px; background: #090e1a; border: 1px solid #1a2538; border-radius: 10px; padding: 12px 14px; } .fut-primary-tabs { display: none !important; } .fut-tab-btn { background: #0d1524; border: 1px solid #1e293d; color: #94a3b8; padding: 8px 14px; border-radius: 6px; font-size: 12.5px; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 7px; transition: all 0.15s ease; } .fut-tab-btn:hover { background: #131c30; color: #f8fafc; } .fut-tab-btn.active { background: #1e293b; border-color: #38bdf8; color: #ffffff; box-shadow: 0 0 12px rgba(56, 189, 248, 0.2); } .fut-tab-counter { font-size: 10px; background: rgba(255, 255, 255, 0.1); padding: 1px 6px; border-radius: 10px; font-family: 'JetBrains Mono', monospace; } /* Sector Filter Pills */ .fut-filter-ribbon { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .fut-sec-pill { background: #060a12; border: 1px solid #1a2336; color: #94a3b8; font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 20px; cursor: pointer; transition: all 0.12s ease; } .fut-sec-pill:hover { background: #111a2d; color: #f8fafc; border-color: #334155; } .fut-sec-pill.active { background: rgba(56, 189, 248, 0.15); border-color: #38bdf8; color: #38bdf8; font-weight: 700; } .fut-sec-pill.highlight { border-color: rgba(239, 68, 68, 0.4); } .fut-sec-pill.highlight.active { background: rgba(239, 68, 68, 0.2); border-color: #ef4444; color: #fca5a5; } /* Signal / Flow Ribbon */ .fut-signal-ribbon { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding-top: 4px; } .fut-sig-label { font-size: 11px; color: #64748b; font-weight: 700; text-transform: uppercase; margin-right: 4px; } .fut-sig-pill { background: #060a12; border: 1px solid #1a2336; color: #94a3b8; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 4px; cursor: pointer; transition: all 0.12s ease; font-family: 'JetBrains Mono', monospace; } .fut-sig-pill:hover { border-color: #475569; color: #f8fafc; } .fut-sig-pill.active { border-color: #cbd5e1; color: #ffffff; background: #1e293b; } .fut-sig-pill.lb.active { background: rgba(16, 185, 129, 0.2); border-color: #10b981; color: #34d399; } .fut-sig-pill.sb.active { background: rgba(239, 68, 68, 0.2); border-color: #ef4444; color: #f87171; } .fut-sig-pill.sc.active { background: rgba(59, 130, 246, 0.2); border-color: #3b82f6; color: #60a5fa; } .fut-sig-pill.lu.active { background: rgba(245, 158, 11, 0.2); border-color: #f59e0b; color: #fbbf24; } .fut-sig-pill.prem.active { background: rgba(168, 85, 247, 0.2); border-color: #a855f7; color: #c084fc; } .fut-sig-pill.disc.active { background: rgba(244, 63, 94, 0.2); border-color: #f43f5e; color: #fb7185; } /* Macro Summary Bar */ .fut-macro-bar { display: flex; align-items: center; background: #0c1322; border: 1px solid #1a2538; border-radius: 8px; padding: 8px 14px; gap: 16px; margin-bottom: 10px; flex-wrap: wrap; } .fut-mb-item { display: flex; flex-direction: column; gap: 2px; } .fmb-lbl { font-size: 10px; color: #64748b; text-transform: uppercase; font-weight: 700; } .fmb-val { font-size: 13.5px; font-weight: 800; font-family: 'JetBrains Mono', monospace; } .fut-mb-sep { width: 1px; height: 24px; background: #1e293b; } .fut-ratio-bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: #1e293b; margin-top: 4px; } /* ========================================================================== OPSTRA DERIVATIVES MOVERS & BUZZERS MATRIX HUB ========================================================================== */ .fut-movers-section { background: #0b1120; border: 1px solid #1e293b; border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); } .fut-movers-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid #162032; margin-bottom: 12px; } .fut-movers-title-box { display: flex; flex-direction: column; gap: 3px; } .fut-movers-badge { font-size: 9.5px; font-weight: 800; letter-spacing: 0.8px; padding: 2px 7px; border-radius: 4px; background: rgba(56, 189, 248, 0.15); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.3); text-transform: uppercase; } .fut-movers-title { margin: 0; font-size: 13.5px; font-weight: 800; color: #f8fafc; letter-spacing: 0.3px; } .fut-movers-subtitle { font-size: 11px; color: #64748b; } .fut-movers-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .fut-movers-pills { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .fut-mover-pill { background: #111a2e; border: 1px solid #233554; color: #94a3b8; padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.15s ease; user-select: none; } .fut-mover-pill:hover { background: #1a253c; color: #e2e8f0; border-color: #3b82f6; } .fut-mover-pill.active { background: #1e2e4a; color: #38bdf8; border-color: #38bdf8; box-shadow: 0 0 10px rgba(56, 189, 248, 0.2); } .fut-movers-limit-wrap { display: flex; align-items: center; background: #080d18; border: 1px solid #1e293b; border-radius: 6px; overflow: hidden; } .fut-limit-btn { background: transparent; border: none; color: #64748b; font-size: 10.5px; font-weight: 700; padding: 4px 8px; cursor: pointer; transition: all 0.15s ease; } .fut-limit-btn:hover { color: #f1f5f9; } .fut-limit-btn.active { background: #1e293b; color: #38bdf8; } /* Movers Grid */ .fut-movers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(295px, 1fr)); gap: 10px; } .fut-movers-grid.cat-price, .fut-movers-grid.cat-oi, .fut-movers-grid.cat-iv { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); } .fut-movers-grid.cat-volume { grid-template-columns: 1fr; max-width: 600px; } /* Individual Mover Card */ .fut-mover-card { background: #0c1322; border: 1px solid #1a2538; border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; transition: transform 0.15s ease, border-color 0.15s ease; } .fut-mover-card:hover { border-color: #2e4162; } .fut-mover-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .fut-mover-card-title-box { display: flex; align-items: center; gap: 8px; } .fut-mover-card-icon { font-size: 16px; } .fut-mover-card-title { font-size: 12px; font-weight: 800; color: #f1f5f9; letter-spacing: 0.3px; display: block; } .fut-mover-card-sub { font-size: 10px; color: #64748b; display: block; } .fut-card-badge { font-size: 9px; font-weight: 800; padding: 2px 6px; border-radius: 4px; letter-spacing: 0.5px; text-transform: uppercase; } .fut-card-badge-bull { background: rgba(16, 185, 129, 0.15); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3); } .fut-card-badge-bear { background: rgba(239, 68, 68, 0.15); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.3); } .fut-card-badge-oi-up { background: rgba(6, 182, 212, 0.15); color: #06b6d4; border: 1px solid rgba(6, 182, 212, 0.3); } .fut-card-badge-oi-down { background: rgba(245, 158, 11, 0.15); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.3); } .fut-card-badge-vol { background: rgba(59, 130, 246, 0.15); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.3); } .fut-card-badge-iv-up { background: rgba(168, 85, 247, 0.15); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.3); } .fut-card-badge-iv-down { background: rgba(20, 184, 166, 0.15); color: #2dd4bf; border: 1px solid rgba(20, 184, 166, 0.3); } .fut-mover-card-cols-hdr { display: flex; align-items: center; font-size: 9.5px; font-weight: 700; color: #64748b; text-transform: uppercase; padding: 4px 6px; background: #080d18; border-radius: 4px; margin-bottom: 4px; } .fut-mover-rows-wrap { display: flex; flex-direction: column; gap: 3px; } .fut-mover-row { display: flex; align-items: center; padding: 5px 6px; border-radius: 5px; transition: background 0.12s ease; cursor: pointer; border-bottom: 1px solid rgba(255, 255, 255, 0.02); } .fut-mover-row:hover { background: rgba(56, 189, 248, 0.08); } .fut-mover-rank { width: 18px; font-size: 10px; font-weight: 800; color: #64748b; } .fut-mover-sym-col { flex: 1.2; display: flex; flex-direction: column; min-width: 0; } .fut-mover-sym { font-size: 11.5px; font-weight: 700; color: #f8fafc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fut-mover-sec { font-size: 9.5px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fut-mover-ltp-col { flex: 1; text-align: right; padding-right: 6px; } .fut-mover-ltp { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 600; color: #cbd5e1; } .fut-mover-metric-col { flex: 1.4; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; } .fut-mover-val-pill { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 800; padding: 1.5px 6px; border-radius: 4px; white-space: nowrap; } .fut-pill-pos { background: rgba(16, 185, 129, 0.15); color: #10b981; } .fut-pill-neg { background: rgba(239, 68, 68, 0.15); color: #ef4444; } .fut-pill-warn { background: rgba(245, 158, 11, 0.15); color: #f59e0b; } .fut-pill-blue { background: rgba(59, 130, 246, 0.15); color: #60a5fa; } .fut-pill-purple { background: rgba(168, 85, 247, 0.15); color: #c084fc; } .fut-pill-teal { background: rgba(20, 184, 166, 0.15); color: #2dd4bf; } .fut-mover-metric-sub { font-size: 9px; color: #64748b; font-family: 'JetBrains Mono', monospace; } .fut-mover-tag-col { width: 28px; display: flex; justify-content: center; align-items: center; } .fut-mover-empty { padding: 18px 10px; text-align: center; color: #64748b; font-size: 11px; font-style: italic; } /* Light Theme Overrides */ [data-theme="light"] .fut-movers-section { background: #ffffff; border-color: #cbd5e1; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } [data-theme="light"] .fut-movers-header { border-bottom-color: #e2e8f0; } [data-theme="light"] .fut-movers-title { color: #0f172a; } [data-theme="light"] .fut-movers-subtitle { color: #64748b; } [data-theme="light"] .fut-mover-pill { background: #f8fafc; border-color: #cbd5e1; color: #475569; } [data-theme="light"] .fut-mover-pill:hover { background: #e2e8f0; color: #0f172a; } [data-theme="light"] .fut-mover-pill.active { background: #e0f2fe; color: #0284c7; border-color: #0284c7; } [data-theme="light"] .fut-movers-limit-wrap { background: #f1f5f9; border-color: #cbd5e1; } [data-theme="light"] .fut-limit-btn { color: #64748b; } [data-theme="light"] .fut-limit-btn.active { background: #ffffff; color: #0284c7; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } [data-theme="light"] .fut-mover-card { background: #f8fafc; border-color: #e2e8f0; } [data-theme="light"] .fut-mover-card-title { color: #0f172a; } [data-theme="light"] .fut-mover-card-cols-hdr { background: #e2e8f0; color: #475569; } [data-theme="light"] .fut-mover-row:hover { background: #e0f2fe; } [data-theme="light"] .fut-mover-sym { color: #0f172a; } [data-theme="light"] .fut-mover-ltp { color: #1e293b; } /* ========================================================================== FUTURE OPEN INTEREST & BUILDUP TERMINAL (NIFTY PRO CANVAS SUITE) ========================================================================== */ .fut-oi-wrap { max-width: 100%; margin: auto; } .fut-oi-header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: flex-end; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #162032; } .fut-oi-ttl { font-size: 18px; font-weight: 800; margin: 0; color: #f8fafc; } .fut-oi-sub { color: #64748b; font-size: 11.5px; margin-top: 2px; } .fut-oi-price-block { display: flex; flex-direction: column; margin-top: 4px; } .fut-oi-price-row { display: flex; align-items: baseline; gap: 8px; } .fut-oi-px { font-size: 26px; font-weight: 800; font-family: 'JetBrains Mono', monospace; color: #f8fafc; } .fut-oi-chg { font-size: 13.5px; font-weight: 700; font-family: 'JetBrains Mono', monospace; } .fut-oi-basis-row { font-size: 12px; font-weight: 600; color: #94a3b8; margin-top: 2px; display: flex; align-items: center; gap: 8px; } .fut-oi-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; } .fut-oi-bar .sep { width: 1px; height: 20px; background: #1e293b; margin: 0 4px; } .fut-oi-b { background: #0c1322; color: #94a3b8; border: 1px solid #1e293b; padding: 5px 12px; border-radius: 7px; cursor: pointer; font-size: 11.5px; font-weight: 600; transition: all 0.15s ease; user-select: none; } .fut-oi-b:hover { background: #162032; color: #f8fafc; border-color: #38bdf8; } .fut-oi-b.on { background: #38bdf8; color: #0b1120; border-color: #38bdf8; font-weight: 700; } .fut-oi-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(115px, 1fr)); gap: 8px; margin-bottom: 10px; } .fut-oi-stat { background: #0c1322; border: 1px solid #1a2538; border-radius: 8px; padding: 8px 10px; } .fut-oi-stat b { display: block; font-size: 14px; font-weight: 800; font-family: 'JetBrains Mono', monospace; color: #f8fafc; margin-top: 2px; } .fut-oi-stat span { color: #64748b; font-size: 10px; font-weight: 700; text-transform: uppercase; } .fut-oi-box { position: relative; background: #090e1a; border: 1px solid #1a2538; border-radius: 10px; padding: 6px; margin-bottom: 8px; } #futOiCanvas { width: 100%; height: 600px; display: block; cursor: crosshair; touch-action: pan-y; } #futOiTip { position: absolute; pointer-events: none; background: #080d18; border: 1px solid #233554; border-radius: 8px; padding: 8px 12px; font-size: 11.5px; display: none; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); white-space: nowrap; z-index: 50; line-height: 1.45; } .fut-oi-leg { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 12px 0; font-size: 11.5px; color: #64748b; } .fut-oi-leg i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; } .fut-oi-lb { background: #0c1322; border: 1px solid #1e293b; color: #cbd5e1; border-radius: 16px; padding: 4px 12px; cursor: pointer; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; transition: all 0.15s ease; user-select: none; } .fut-oi-lb:hover { border-color: #38bdf8; } .fut-oi-lb.off { opacity: 0.35; text-decoration: line-through; } .fut-oi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; margin-top: 10px; } .fut-oi-card { background: #0c1322; border: 1px solid #1a2538; border-radius: 10px; padding: 12px; display: flex; flex-direction: column; } .fut-oi-card h3 { margin: 0 0 10px; font-size: 12px; font-weight: 800; color: #f1f5f9; text-transform: uppercase; letter-spacing: 0.3px; } .fut-oi-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 11.5px; } .fut-oi-row .t { flex: 1; height: 8px; background: #162032; border-radius: 4px; overflow: hidden; } .fut-oi-row .t i { display: block; height: 100%; border-radius: 4px; } .fut-oi-row span:first-child { width: 125px; color: #94a3b8; font-size: 11px; } .fut-oi-row span:last-child { width: 42px; text-align: right; font-family: 'JetBrains Mono', monospace; font-weight: 700; color: #cbd5e1; } #futOiOcCanvas { width: 100%; height: 190px; display: block; } .fut-oi-gauge { height: 8px; border-radius: 4px; background: linear-gradient(90deg, #ef4444, #f59e0b, #10b981); position: relative; margin: 12px 0 10px 0; } .fut-oi-gauge i { position: absolute; top: -5px; width: 4px; height: 18px; background: #ffffff; border-radius: 2px; transform: translateX(-2px); box-shadow: 0 0 6px rgba(255, 255, 255, 0.6); transition: left 0.3s ease; } .fut-oi-big { font-size: 22px; font-weight: 800; font-family: 'JetBrains Mono', monospace; } .fut-oi-srch { position: relative; margin-bottom: 10px; max-width: 520px; } #futOiSearchInput { width: 100%; padding: 8px 12px; border-radius: 8px; border: 1px solid #1e293b; background: #0c1322; color: #f8fafc; font-size: 12.5px; outline: none; transition: border-color 0.15s; } #futOiSearchInput:focus { border-color: #38bdf8; box-shadow: 0 0 8px rgba(56, 189, 248, 0.2); } #futOiSearchDropdown { position: absolute; z-index: 50; left: 0; right: 0; top: 100%; margin-top: 4px; background: #080d18; border: 1px solid #233554; border-radius: 8px; max-height: 280px; overflow-y: auto; display: none; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); } #futOiSearchDropdown div { padding: 8px 12px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.03); } #futOiSearchDropdown div.hi, #futOiSearchDropdown div:hover { background: #162032; color: #38bdf8; } .fut-oi-wl { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 10px; } .fut-oi-wl .fut-oi-b { white-space: nowrap; flex: none; font-size: 11px; } /* Light Theme Overrides */ [data-theme="light"] .fut-oi-ttl, [data-theme="light"] .fut-oi-px { color: #0f172a; } [data-theme="light"] .fut-oi-b { background: #f8fafc; color: #475569; border-color: #cbd5e1; } [data-theme="light"] .fut-oi-b:hover { background: #e2e8f0; color: #0f172a; } [data-theme="light"] .fut-oi-b.on { background: #0284c7; color: #ffffff; border-color: #0284c7; } [data-theme="light"] .fut-oi-stat { background: #f8fafc; border-color: #e2e8f0; } [data-theme="light"] .fut-oi-stat b { color: #0f172a; } [data-theme="light"] .fut-oi-box { background: #ffffff; border-color: #cbd5e1; } [data-theme="light"] #futOiTip { background: #ffffff; border-color: #cbd5e1; color: #0f172a; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); } [data-theme="light"] .fut-oi-lb { background: #f8fafc; border-color: #cbd5e1; color: #475569; } [data-theme="light"] .fut-oi-card { background: #f8fafc; border-color: #e2e8f0; } [data-theme="light"] .fut-oi-card h3 { color: #0f172a; } [data-theme="light"] .fut-oi-row .t { background: #e2e8f0; } [data-theme="light"] .fut-oi-row span:last-child { color: #0f172a; } [data-theme="light"] #futOiSearchInput { background: #ffffff; border-color: #cbd5e1; color: #0f172a; } [data-theme="light"] #futOiSearchDropdown { background: #ffffff; border-color: #cbd5e1; } [data-theme="light"] #futOiSearchDropdown div.hi, [data-theme="light"] #futOiSearchDropdown div:hover { background: #f1f5f9; color: #0284c7; } /* Responsive Mobile Layout for Future Open Interest */ @media (max-width: 768px) { .fut-oi-wrap { display: flex; flex-direction: column; width: 100%; gap: 0; } .fut-oi-header { order: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 8px; padding-bottom: 8px; } .fut-oi-header > div:first-child { width: 100%; } .fut-oi-ttl { font-size: 15px; line-height: 1.3; } .fut-oi-price-row { display: flex; align-items: baseline; gap: 6px; } .fut-oi-px { font-size: 20px; } .fut-oi-chg { font-size: 11.5px; } .fut-oi-basis-row { font-size: 11px; margin-top: 2px; } .fut-oi-bar#futOiRangeBar { order: 2; display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; margin-bottom: 8px; gap: 6px; scrollbar-width: none; } .fut-oi-srch { order: 3; max-width: 100%; margin-bottom: 8px; } #futOiSearchInput { font-size: 11.5px; padding: 7px 10px; } .fut-oi-wl { order: 4; display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 6px; margin-bottom: 8px; padding-bottom: 4px; scrollbar-width: none; } .fut-oi-bar#futOiIndicatorBar { order: 5; display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 5px; padding: 2px 0 8px 0; margin-bottom: 8px; scrollbar-width: none; } .fut-oi-bar::-webkit-scrollbar, .fut-oi-wl::-webkit-scrollbar { display: none; } .fut-oi-b { flex: 0 0 auto; white-space: nowrap; padding: 5px 10px; font-size: 10.5px; } .fut-oi-box#futOiCanvasBox { order: 6; margin-bottom: 8px; padding: 4px; overflow: hidden; } #futOiCanvas { display: block; width: 100% !important; } .fut-oi-leg#futOiLegend { order: 7; display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px 0; } .fut-oi-lb { font-size: 10px; padding: 3px 8px; } .fut-oi-stats#futOiStatsGrid { order: 8; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: 12px; } .fut-oi-stat { padding: 6px 8px; } .fut-oi-stat span { font-size: 9.5px; } .fut-oi-stat b { font-size: 12.5px; } .fut-oi-disclaimer { order: 10; margin-top: 14px; font-size: 10.5px; } .fut-oi-grid { order: 9; grid-template-columns: 1fr; gap: 10px; margin-top: 4px; } .fut-oi-card { padding: 10px; } .fut-oi-row span:first-child { width: 95px; font-size: 10.5px; } .fut-oi-row span:last-child { width: 36px; font-size: 10.5px; } } /* Table Styling */ .fut-table-wrap { overflow-x: auto; background: #090e1a; border: 1px solid #1a2538; border-radius: 8px; } .fut-table { width: 100%; border-collapse: collapse; font-size: 12px; } .fut-table th { background: #0d1424; color: #94a3b8; font-weight: 700; text-align: left; padding: 9px 10px; border-bottom: 1px solid #1e293d; white-space: nowrap; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; } .fut-table th.sortable { cursor: pointer; user-select: none; } .fut-table th.sortable:hover { color: #38bdf8; } .fut-table td { padding: 7px 10px; border-bottom: 1px solid #121929; color: #e2e8f0; white-space: nowrap; font-family: 'JetBrains Mono', monospace; } .fut-table tbody tr { cursor: pointer; transition: background 0.1s ease; } .fut-table tbody tr:hover td { background: rgba(255, 255, 255, 0.04) !important; } /* Badges */ .fut-badge { display: inline-block; font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 3px; text-transform: uppercase; font-family: 'JetBrains Mono', monospace; } .fut-badge-lb { background: rgba(16, 185, 129, 0.18); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.35); } .fut-badge-sb { background: rgba(239, 68, 68, 0.18); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.35); } .fut-badge-sc { background: rgba(59, 130, 246, 0.18); color: #3b82f6; border: 1px solid rgba(59, 130, 246, 0.35); } .fut-badge-lu { background: rgba(245, 158, 11, 0.18); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.35); } .fut-badge-neutral { background: rgba(148, 163, 184, 0.15); color: #94a3b8; border: 1px solid rgba(148, 163, 184, 0.3); } /* Day Range Mini Bar */ .fut-day-range { display: flex; align-items: center; gap: 6px; font-size: 10px; color: #64748b; min-width: 130px; } .fut-dr-bar-wrap { flex: 1; height: 4px; background: #1e293b; border-radius: 2px; position: relative; } .fut-dr-marker { position: absolute; top: -3px; width: 3px; height: 10px; background: #38bdf8; border-radius: 1px; } /* Quadrants */ .fut-quad-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; } .fut-quad-card { background: #090e1a; border: 1px solid #1a2538; border-radius: 8px; padding: 12px; } .fut-quad-card.lb { border-top: 3px solid #10b981; } .fut-quad-card.sb { border-top: 3px solid #ef4444; } .fut-quad-card.sc { border-top: 3px solid #3b82f6; } .fut-quad-card.lu { border-top: 3px solid #f59e0b; } .fut-quad-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; border-bottom: 1px solid #162032; padding-bottom: 8px; } .fut-quad-title { margin: 0; font-size: 13px; font-weight: 800; } .fut-quad-sub { margin: 2px 0 0 0; font-size: 10.5px; color: #64748b; } .quad-count-badge { font-size: 11px; font-weight: 800; font-family: 'JetBrains Mono', monospace; background: #1e293b; padding: 2px 7px; border-radius: 4px; color: #f8fafc; } .fut-quad-list { display: flex; flex-direction: column; gap: 5px; max-height: 380px; overflow-y: auto; } .fut-quad-item { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; background: #0d1524; border: 1px solid #172236; border-radius: 6px; font-size: 11.5px; cursor: pointer; transition: all 0.1s ease; } .fut-quad-item:hover { background: #141f35; border-color: #38bdf8; } /* Heatmap */ .fut-heatmap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; } .fut-heatmap-tile { padding: 8px; border-radius: 6px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; transition: transform 0.1s ease; min-height: 60px; } .fut-heatmap-tile:hover { transform: scale(1.03); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); } /* MWPL */ .fut-mwpl-pbar { height: 5px; background: #1e293b; border-radius: 3px; overflow: hidden; } .fut-mwpl-pfill { height: 100%; border-radius: 3px; } /* Animations */ .tick-flash-up { animation: tickFlashGreen 1.1s ease-out forwards !important; } .tick-flash-down { animation: tickFlashRed 1.1s ease-out forwards !important; } @keyframes tickFlashGreen { 0% { background-color: rgba(16, 185, 129, 0.45) !important; color: #10b981 !important; } 100% { background-color: transparent; } } @keyframes tickFlashRed { 0% { background-color: rgba(239, 68, 68, 0.45) !important; color: #ef4444 !important; } 100% { background-color: transparent; } } /* Institutional Admin Navigation Button & Command Center Styles */ .inst-admin-btn { background: linear-gradient(135deg, rgba(37, 99, 235, 0.2) 0%, rgba(30, 58, 138, 0.35) 100%); color: #60a5fa !important; border: 1px solid rgba(59, 130, 246, 0.4); font-weight: 700; letter-spacing: 0.2px; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); } .inst-admin-btn:hover { background: linear-gradient(135deg, rgba(37, 99, 235, 0.35) 0%, rgba(30, 58, 138, 0.5) 100%); border-color: #60a5fa; color: #ffffff !important; box-shadow: 0 0 16px rgba(59, 130, 246, 0.4); transform: translateY(-1px); } .inst-admin-btn:active { transform: translateY(0); } /* ========================================================================== ⚡ UPSTOX PRO OPTION CHAIN - Institutional Terminal & Strike Radar Modal ========================================================================== */ .upstox-chain-pro { display: flex; flex-direction: column; gap: 12px; background: var(--bg-card, #0f172a); border: 1px solid var(--border-default, #1e293b); border-radius: 12px; padding: 16px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #e2e8f0; } /* Top Toolbar & Index Selector Pills */ .upstox-top-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .upstox-asset-pills { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .u-asset-pill { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12); color: #94a3b8; font-size: 11.5px; font-weight: 700; padding: 6px 14px; border-radius: 20px; cursor: pointer; transition: all 0.18s ease; letter-spacing: 0.3px; } .u-asset-pill:hover { background: rgba(59, 130, 246, 0.15); color: #60a5fa; border-color: rgba(59, 130, 246, 0.4); } .u-asset-pill.active { background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #ffffff; border-color: #3b82f6; box-shadow: 0 2px 10px rgba(37, 99, 235, 0.4); } .upstox-status-cluster { display: flex; align-items: center; gap: 12px; } .u-live-indicator { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 6px; } .upstox-badge-live.is-live { background: rgba(16, 185, 129, 0.12); border: 1px solid rgba(16, 185, 129, 0.3); color: #34d399; } .upstox-badge-live.is-demo { background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.3); color: #fbbf24; } .upstox-badge-live.is-error { background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.3); color: #f87171; } .u-update-badge { font-size: 11px; color: #94a3b8; font-family: 'JetBrains Mono', monospace; } .u-btn-refresh { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.15); color: #cbd5e1; padding: 5px 10px; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; transition: all 0.15s ease; } .u-btn-refresh:hover { background: rgba(59, 130, 246, 0.2); border-color: #3b82f6; color: #ffffff; } .u-btn-refresh.loading-spin .refresh-icon { animation: spin 1s linear infinite; } @keyframes spin { 100% { transform: rotate(360deg); } } /* Secondary Sub-Toolbar */ .upstox-sub-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; background: rgba(15, 23, 42, 0.6); padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.05); } .u-sub-left, .u-sub-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .u-expiry-badge { display: flex; align-items: center; gap: 6px; } .u-expiry-badge select { background: #1e293b; border: 1px solid #334155; color: #f1f5f9; font-size: 11.5px; font-weight: 700; padding: 4px 8px; border-radius: 6px; outline: none; cursor: pointer; } .u-segmented-control { display: inline-flex; background: rgba(0, 0, 0, 0.3); padding: 2px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.08); } .u-view-btn { background: transparent; border: none; color: #94a3b8; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 4px; cursor: pointer; transition: all 0.15s ease; } .u-view-btn.active { background: #3b82f6; color: #ffffff; box-shadow: 0 1px 4px rgba(59, 130, 246, 0.4); } .u-strike-filter { display: inline-flex; align-items: center; gap: 3px; background: rgba(0, 0, 0, 0.3); padding: 2px 4px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.08); } .u-range-btn { background: transparent; border: none; color: #94a3b8; font-size: 10.5px; font-weight: 700; font-family: 'JetBrains Mono', monospace; padding: 3px 6px; border-radius: 4px; cursor: pointer; } .u-range-btn.active { background: rgba(255, 255, 255, 0.15); color: #ffffff; } .u-strike-input { background: #1e293b; border: 1px solid #334155; color: #f1f5f9; font-size: 11px; padding: 4px 8px; border-radius: 6px; width: 105px; outline: none; } .u-btn-atm { background: rgba(124, 58, 237, 0.2); border: 1px solid rgba(124, 58, 237, 0.4); color: #c084fc; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 6px; cursor: pointer; transition: all 0.15s ease; } .u-btn-atm:hover { background: rgba(124, 58, 237, 0.4); color: #ffffff; } /* Institutional Ticker Strip */ .upstox-ticker-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; background: linear-gradient(180deg, rgba(30, 41, 59, 0.5) 0%, rgba(15, 23, 42, 0.6) 100%); padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.07); } .u-strip-stat { display: flex; flex-direction: column; gap: 2px; } .u-strip-stat .u-stat-lbl { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #94a3b8; } .u-strip-stat .u-stat-val { font-size: 14px; font-weight: 800; font-family: 'JetBrains Mono', monospace; color: #f8fafc; } .u-strip-stat .u-stat-sub { font-size: 10px; font-weight: 700; font-family: 'JetBrains Mono', monospace; color: #64748b; } .u-oi-split-wrap { min-width: 140px; } .u-oi-split-track { display: flex; height: 14px; background: rgba(0, 0, 0, 0.4); border-radius: 3px; overflow: hidden; margin-top: 4px; } .u-oi-split-ce { background: #ef4444; color: #ffffff; font-size: 8.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; transition: width 0.3s ease; } .u-oi-split-pe { background: #10b981; color: #ffffff; font-size: 8.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; transition: width 0.3s ease; } /* Matrix Table Styling */ .upstox-chain-table-container { overflow-x: auto; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; background: #090d16; max-height: 650px; } .upstox-matrix-table { width: 100%; border-collapse: collapse; font-size: 11px; font-family: 'JetBrains Mono', -apple-system, BlinkMacSystemFont, monospace; white-space: nowrap; } .upstox-matrix-table th { background: #111827; color: #94a3b8; font-weight: 700; padding: 6px 8px; text-align: right; border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-right: 1px solid rgba(255, 255, 255, 0.05); position: sticky; top: 0; z-index: 5; } .upstox-matrix-table th.col-strike { background: #1e293b; color: #f8fafc; text-align: center; border-left: 2px solid #334155; border-right: 2px solid #334155; z-index: 6; } .upstox-matrix-table th.side-header-ce { background: rgba(239, 68, 68, 0.15); color: #f87171; text-align: center; font-weight: 800; letter-spacing: 0.5px; font-size: 11.5px; } .upstox-matrix-table th.side-header-pe { background: rgba(16, 185, 129, 0.15); color: #34d399; text-align: center; font-weight: 800; letter-spacing: 0.5px; font-size: 11.5px; } .upstox-matrix-table td { padding: 4px 8px; text-align: right; border-bottom: 1px solid rgba(255, 255, 255, 0.04); border-right: 1px solid rgba(255, 255, 255, 0.03); color: #cbd5e1; } .upstox-chain-row:hover td { background-color: rgba(59, 130, 246, 0.14) !important; } /* ITM Shading */ .upstox-chain-row.call-itm td:nth-child(-n+11) { background-color: rgba(245, 158, 11, 0.05); } .upstox-chain-row.put-itm td:nth-child(n+13) { background-color: rgba(59, 130, 246, 0.05); } /* Strike Pillar Column */ .upstox-matrix-table td.col-strike { background: #111827; color: #f8fafc; font-weight: 800; text-align: center; border-left: 2px solid #334155; border-right: 2px solid #334155; cursor: pointer; position: relative; } .upstox-chain-row.is-atm td.col-strike { background: #7c3aed !important; color: #ffffff !important; box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5); } .strike-wrap { display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: 100%; } .atm-tag { background: #fbbf24; color: #0f172a; font-size: 8.5px; font-weight: 900; padding: 1px 4px; border-radius: 3px; } .strike-click-hint { font-size: 10px; opacity: 0.4; transition: opacity 0.15s ease; } .upstox-chain-row:hover .strike-click-hint { opacity: 1; } /* Spot Line Divider Row */ .upstox-spot-line-row td { padding: 0 !important; background: transparent !important; border: none !important; } .upstox-spot-line { position: relative; display: flex; align-items: center; justify-content: center; height: 22px; background: linear-gradient(90deg, rgba(59, 130, 246, 0.05) 0%, rgba(59, 130, 246, 0.4) 50%, rgba(59, 130, 246, 0.05) 100%); border-top: 1px dashed #3b82f6; border-bottom: 1px dashed #3b82f6; } .spot-pill { background: #2563eb; color: #ffffff; font-size: 10px; font-weight: 900; padding: 2px 12px; border-radius: 12px; letter-spacing: 0.5px; box-shadow: 0 0 10px rgba(37, 99, 235, 0.6); } /* OI Depth Bars */ .oi-bar { position: absolute; top: 1px; bottom: 1px; opacity: 0.25; pointer-events: none; } .oi-bar-call { right: 0; background: #ef4444; } .oi-bar-put { left: 0; background: #10b981; } .oi-text { position: relative; z-index: 2; font-weight: 700; } /* Buildup Tags */ .buildup-tag { display: inline-block; font-size: 9px; font-weight: 900; padding: 1px 4px; border-radius: 3px; letter-spacing: 0.3px; } .buildup-lb { background: rgba(16, 185, 129, 0.2); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.4); } .buildup-sb { background: rgba(239, 68, 68, 0.2); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.4); } .buildup-sc { background: rgba(59, 130, 246, 0.2); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.4); } .buildup-lu { background: rgba(245, 158, 11, 0.2); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.4); } /* Quant Matrix Specific Columns */ .col-day-oi, .col-pctile, .col-flow, .col-vol, .col-prem, .col-prem-skew, .col-write-skew, .col-force, .col-cp, .col-iv-skew, .col-turnover { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; white-space: nowrap; } .col-prem-skew, .col-write-skew, .col-force, .col-cp, .col-iv-skew { text-align: center !important; } .mp-tag { background: #a855f7; color: #ffffff; font-size: 8px; font-weight: 900; padding: 1px 4px; border-radius: 3px; letter-spacing: 0.3px; } .upstox-chain-table-foot td { background: #111827; font-weight: 800; color: #f8fafc; border-top: 2px solid #334155; position: sticky; bottom: 0; z-index: 5; } /* Text Highlights */ .text-green { color: #34d399 !important; } .text-red { color: #f87171 !important; } /* ========================================================================== 🎯 STRIKE INTELLIGENCE RADAR MODAL (Click to Detail) ========================================================================== */ .upstox-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(4, 7, 18, 0.78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: 99999; padding: 20px; animation: modalFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes modalFadeIn { 0% { opacity: 0; transform: scale(0.97); } 100% { opacity: 1; transform: scale(1); } } .upstox-modal-card { background: #0f172a; border: 1px solid rgba(59, 130, 246, 0.35); border-radius: 14px; max-width: 760px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.8), 0 0 30px rgba(59, 130, 246, 0.15); display: flex; flex-direction: column; color: #f1f5f9; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .modal-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); background: linear-gradient(180deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0) 100%); } .modal-title-left { display: flex; flex-direction: column; gap: 5px; } .modal-badges-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .modal-badge { font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 4px; letter-spacing: 0.4px; font-family: 'JetBrains Mono', monospace; } .modal-badge.atm { background: #7c3aed; color: #ffffff; } .modal-badge.itm-ce { background: rgba(245, 158, 11, 0.2); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.4); } .modal-badge.itm-pe { background: rgba(59, 130, 246, 0.2); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.4); } .modal-dist-badge { font-size: 10.5px; color: #94a3b8; font-family: 'JetBrains Mono', monospace; } .modal-title-left h3 { margin: 0; font-size: 18px; font-weight: 900; letter-spacing: -0.2px; color: #f8fafc; } .modal-subtext { font-size: 11px; color: #64748b; margin: 0; font-family: 'JetBrains Mono', monospace; } .modal-close-btn { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); color: #94a3b8; font-size: 14px; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s ease; } .modal-close-btn:hover { background: rgba(239, 68, 68, 0.25); color: #f87171; border-color: rgba(239, 68, 68, 0.4); } .modal-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; } /* Straddle & Directional Force Section */ .modal-straddle-box { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; background: rgba(30, 41, 59, 0.5); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; padding: 14px; } @media (max-width: 640px) { .modal-straddle-box { grid-template-columns: 1fr; } } .m-straddle-left, .m-force-right { display: flex; flex-direction: column; gap: 4px; } .m-section-lbl { font-size: 10px; font-weight: 800; text-transform: uppercase; color: #94a3b8; letter-spacing: 0.5px; } .m-straddle-val { font-size: 22px; font-weight: 900; font-family: 'JetBrains Mono', monospace; color: #a78bfa; } .m-range-sub { font-size: 11px; color: #cbd5e1; font-family: 'JetBrains Mono', monospace; } .m-range-sub strong { color: #ffffff; } .m-skew-sub { font-size: 10.5px; font-weight: 700; font-family: 'JetBrains Mono', monospace; } .m-force-val { font-size: 22px; font-weight: 900; font-family: 'JetBrains Mono', monospace; } .m-force-sig { font-size: 11px; font-weight: 800; color: #38bdf8; letter-spacing: 0.5px; } .m-force-hint { font-size: 10px; color: #64748b; } /* 6-Box Quant Metrics Grid */ .modal-metrics-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } @media (max-width: 600px) { .modal-metrics-grid { grid-template-columns: 1fr; } } .m-metric-card { background: rgba(15, 23, 42, 0.7); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } .m-card-title { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.4px; } .m-card-split-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; } .m-side-box { display: flex; flex-direction: column; gap: 2px; flex: 1; } .m-side-box.pe { align-items: flex-end; text-align: right; } .m-tag-lbl { font-size: 9.5px; font-weight: 800; color: #64748b; } .m-side-box.ce .m-tag-lbl { color: #f87171; } .m-side-box.pe .m-tag-lbl { color: #34d399; } .m-side-val { font-size: 14px; font-weight: 800; font-family: 'JetBrains Mono', monospace; color: #f8fafc; } .m-side-desc { font-size: 10px; font-weight: 700; color: #94a3b8; font-family: 'JetBrains Mono', monospace; } .m-pill { display: inline-block; font-size: 9.5px; font-weight: 800; padding: 1px 6px; border-radius: 4px; font-family: 'JetBrains Mono', monospace; } .m-pill.green { background: rgba(16, 185, 129, 0.2); color: #34d399; } .m-pill.red { background: rgba(239, 68, 68, 0.2); color: #f87171; } .m-card-note { font-size: 10.5px; color: #94a3b8; font-style: italic; margin-top: 2px; } /* Greeks Sensitivity Section */ .modal-greeks-section { background: rgba(30, 41, 59, 0.35); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 8px; padding: 12px; } .modal-greeks-table { width: 100%; border-collapse: collapse; font-size: 11.5px; font-family: 'JetBrains Mono', monospace; } .modal-greeks-table th { padding: 6px 8px; color: #94a3b8; font-size: 10.5px; text-transform: uppercase; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .modal-greeks-table th.th-ce { text-align: left; color: #f87171; } .modal-greeks-table th.th-param { text-align: center; color: #cbd5e1; } .modal-greeks-table th.th-pe { text-align: right; color: #34d399; } .modal-greeks-table td { padding: 6px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); } .modal-greeks-table td:nth-child(1) { text-align: left; color: #f8fafc; font-weight: 700; } .modal-greeks-table td:nth-child(2) { text-align: center; color: #94a3b8; font-weight: 600; font-size: 10px; } .modal-greeks-table td:nth-child(3) { text-align: right; color: #f8fafc; font-weight: 700; } /* ========================================================================== FUTURES ROLLOVER MATRIX DESK STYLES ========================================================================== */ .fut-rollover-header-card { display: flex; justify-content: space-between; align-items: center; background: #090e1a; border: 1px solid #1a2538; border-radius: 10px; padding: 14px 18px; margin-bottom: 12px; gap: 16px; flex-wrap: wrap; } .fut-ro-head-left { display: flex; flex-direction: column; gap: 4px; } .fut-ro-title-row { display: flex; align-items: center; gap: 10px; } .fut-ro-badge { font-size: 9.5px; font-weight: 800; text-transform: uppercase; background: rgba(56, 189, 248, 0.12); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.28); padding: 2px 7px; border-radius: 4px; letter-spacing: 0.5px; } .fut-ro-title { margin: 0; font-size: 16px; font-weight: 800; color: #f8fafc; display: flex; align-items: center; gap: 6px; } .fut-ro-subtitle { margin: 0; font-size: 12px; color: #94a3b8; } .fut-ro-stats-strip { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .fut-ro-stat-box { background: #0d1524; border: 1px solid #1e293d; border-radius: 8px; padding: 6px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 100px; } .fut-ro-stat-box .fro-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; color: #64748b; letter-spacing: 0.3px; } .fut-ro-stat-box .fro-val { font-size: 15px; font-weight: 800; font-family: 'JetBrains Mono', 'Fira Code', monospace; } /* Controls Bar */ .fut-ro-controls-bar { display: flex; justify-content: space-between; align-items: center; background: #070c16; border: 1px solid #162032; border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; gap: 10px; flex-wrap: wrap; } .fut-select-control { padding: 7px 12px; font-size: 12px; background: #0d1524; border: 1px solid #1e293b; color: #f8fafc; border-radius: 6px; outline: none; cursor: pointer; } .fut-select-control:focus { border-color: #38bdf8; } .fut-clear-search-btn { background: transparent; border: none; color: #94a3b8; font-size: 12px; cursor: pointer; padding: 2px 8px; } .fut-clear-search-btn:hover { color: #f8fafc; } .fut-action-btn { padding: 7px 14px; font-size: 12px; font-weight: 700; background: #0f1c30; border: 1px solid #223755; color: #38bdf8; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all 0.2s ease; } .fut-action-btn:hover { background: #172a48; border-color: #38bdf8; color: #7dd3fc; } /* Rollover Table & Sticky Symbol Column */ .fut-rollover-table-wrapper { overflow-x: auto; overflow-y: auto; max-height: calc(100vh - 270px); border: 1px solid #162032; border-radius: 8px; background: #060911; position: relative; } .fut-rollover-table-wrapper::-webkit-scrollbar { height: 8px; width: 8px; } .fut-rollover-table-wrapper::-webkit-scrollbar-track { background: #070c16; } .fut-rollover-table-wrapper::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 4px; } .fut-rollover-table-wrapper::-webkit-scrollbar-thumb:hover { background: #334155; } .fut-rollover-matrix-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; } .fut-rollover-matrix-table th { background: #0a1120; color: #cbd5e1; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; padding: 10px 14px; border-bottom: 2px solid #1e293b; white-space: nowrap; position: sticky; top: 0; z-index: 10; } .fut-rollover-matrix-table th.sortable { cursor: pointer; user-select: none; } .fut-rollover-matrix-table th.sortable:hover { color: #38bdf8; background: #0f1c30; } .fut-rollover-matrix-table th.sticky-col { position: sticky; left: 0; top: 0; z-index: 20; background: #080d18; border-right: 2px solid #1e293b; min-width: 130px; text-align: left; } .fut-rollover-matrix-table td { padding: 8px 14px; border-bottom: 1px solid #10192a; white-space: nowrap; } .fut-rollover-matrix-table tr:hover td { background: #0d1728 !important; } .fut-rollover-matrix-table td.sticky-col { position: sticky; left: 0; z-index: 5; background: #070c16; border-right: 2px solid #1e293b; cursor: pointer; } .ro-sym-name { font-weight: 800; color: #f8fafc; font-size: 12.5px; letter-spacing: 0.3px; } .ro-sym-cell:hover .ro-sym-name { color: #38bdf8; } .ro-sym-sector { font-size: 9.5px; color: #64748b; margin-top: 1px; } .ro-val-cell { font-family: 'JetBrains Mono', 'Fira Code', monospace; text-align: right; font-size: 12px; font-weight: 600; color: #94a3b8; letter-spacing: 0.3px; } .ro-val-cell.ro-high { color: #34d399; font-weight: 700; } .ro-val-cell.ro-good { color: #f1f5f9; } .ro-val-cell.ro-low { color: #f87171; font-weight: 700; } .ro-val-cell.ro-dash { color: #475569; font-weight: 400; } .ro-val-cell.ro-avg { font-weight: 700; background: rgba(56, 189, 248, 0.04); } .ro-val-cell.ro-curr { background: rgba(56, 189, 248, 0.06); } /* ================================================================ ⚡ GOCHARTING-STYLE SUB-NAV & QUANT DESK PANES FOR UPSTOX OPTION CHAIN ================================================================ */ .go-subnav-bar { display: flex; align-items: center; gap: 8px; background: #080e1e; border: 1px solid #162035; border-radius: 6px; padding: 4px 6px; overflow-x: auto; white-space: nowrap; } .go-subtab-btn { display: inline-flex; align-items: center; gap: 6px; background: transparent; color: #94a3b8; border: 1px solid transparent; border-radius: 5px; padding: 6px 14px; font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.15s ease; font-family: inherit; } .go-subtab-btn:hover { color: #f8fafc; background: rgba(255, 255, 255, 0.04); } .go-subtab-btn.active { background: #1e293b; color: #38bdf8; border-color: #38bdf8; box-shadow: 0 2px 8px rgba(56, 189, 248, 0.15); } .go-subtab-pill { font-size: 9px; font-weight: 800; padding: 1px 6px; border-radius: 4px; background: rgba(56, 189, 248, 0.2); color: #38bdf8; letter-spacing: 0.5px; } .upstox-tab-pane { display: none; animation: fadeInPane 0.2s ease; } .upstox-tab-pane.active { display: block; } @keyframes fadeInPane { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .upstox-pane-container { display: flex; flex-direction: column; gap: 14px; } .upstox-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; } .upstox-card { background: #050a17; border: 1px solid #162035; border-radius: 6px; padding: 14px 16px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); } .upstox-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .upstox-card-header .card-title { margin: 0; font-size: 13px; font-weight: 800; color: #f8fafc; letter-spacing: 0.3px; } .upstox-card-header .card-badge { font-size: 9.5px; font-weight: 800; padding: 2px 7px; border-radius: 4px; letter-spacing: 0.4px; } /* ========================================================================== ⚡ Upstox Multi-Strike Option Visualizer Tool (Image 15 Style) ========================================================================== */ .upstox-vis-panel { margin-bottom: 16px; display: flex; flex-direction: column; gap: 12px; } /* 14-Metric Pill Bar */ .opt-vis-pill-bar { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 4px 0; } .opt-vis-pill-bar::-webkit-scrollbar { display: none; } .opt-pill-group { display: flex; align-items: center; gap: 5px; flex-shrink: 0; } .opt-pill-sep { width: 1px; height: 20px; background: var(--border-default); margin: 0 4px; flex-shrink: 0; } .opt-vis-pill { padding: 5px 12px; font-size: 11.5px; font-weight: 600; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; border-radius: 6px; cursor: pointer; border: 1px solid var(--border-default); background: var(--bg-card); color: var(--text-secondary); transition: all 0.15s ease; white-space: nowrap; } .opt-vis-pill:hover { border-color: #7c3aed; color: #7c3aed; background: rgba(124, 58, 237, 0.08); } .opt-vis-pill.active { background: #7c3aed !important; color: #ffffff !important; border-color: #6d28d9 !important; font-weight: 700; box-shadow: 0 2px 10px rgba(124, 58, 237, 0.45); } html[data-theme="dark"] .opt-vis-pill, body[data-theme="dark"] .opt-vis-pill { background: #0c1527; border-color: #1e293b; color: #94a3b8; } html[data-theme="dark"] .opt-vis-pill:hover, body[data-theme="dark"] .opt-vis-pill:hover { border-color: #8b5cf6; color: #c4b5fd; background: rgba(139, 92, 246, 0.1); } /* Visualizer Card */ .opt-vis-card { background: var(--bg-card); border: 1px solid var(--border-default); border-radius: 10px; padding: 16px 20px; box-shadow: var(--shadow-md); position: relative; } html[data-theme="dark"] .opt-vis-card, body[data-theme="dark"] .opt-vis-card { background: #060b19; border-color: #18243d; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35); } .opt-vis-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .opt-vis-title { margin: 0; font-size: 15px; font-weight: 800; color: var(--text-primary); font-family: 'Inter', sans-serif; letter-spacing: 0.2px; } .opt-vis-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; display: block; } .opt-vis-actions { display: flex; align-items: center; gap: 8px; } .opt-vis-lock-btn { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; font-size: 11px; font-weight: 700; font-family: 'JetBrains Mono', monospace; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.05); color: #94a3b8; cursor: pointer; transition: all 0.2s ease; } .opt-vis-lock-btn:hover { background: rgba(255, 255, 255, 0.12); color: #f8fafc; } .opt-vis-lock-btn.locked { background: rgba(239, 68, 68, 0.18); border-color: rgba(239, 68, 68, 0.5); color: #f87171; } .opt-vis-atm-badge { font-size: 10.5px; font-weight: 800; font-family: 'JetBrains Mono', monospace; background: rgba(251, 191, 36, 0.15); color: #fbbf24; border: 1px solid rgba(251, 191, 36, 0.4); padding: 3px 8px; border-radius: 4px; } .opt-vis-chart-canvas-wrap { position: relative; width: 100%; height: 320px; } .opt-vis-chart-canvas-wrap canvas { width: 100% !important; height: 100% !important; display: block; cursor: crosshair; } .opt-vis-tooltip { position: absolute; pointer-events: none; background: rgba(5, 10, 24, 0.96); border: 1px solid #38bdf8; border-radius: 6px; padding: 8px 12px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #f8fafc; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7); z-index: 100; transform: translate(-50%, -115%); transition: opacity 0.1s ease; white-space: nowrap; } html[data-theme="light"] .opt-vis-tooltip, body[data-theme="light"] .opt-vis-tooltip { background: rgba(255, 255, 255, 0.98); border-color: #2563eb; color: #0f172a; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.15); } .opt-vis-legend { display: flex; justify-content: center; align-items: center; gap: 28px; margin-top: 14px; font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; } .opt-vis-view-tabs { display: flex; align-items: center; gap: 6px; background: rgba(15, 23, 42, 0.6); padding: 3px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1); } html[data-theme="light"] .opt-vis-view-tabs, body[data-theme="light"] .opt-vis-view-tabs { background: #f1f5f9; border-color: #cbd5e1; } .opt-vis-vtab { background: transparent; border: none; color: var(--text-muted); font-size: 11.5px; font-weight: 700; padding: 5px 12px; border-radius: 6px; cursor: pointer; transition: all 0.15s ease; font-family: 'Inter', sans-serif; display: inline-flex; align-items: center; gap: 5px; } .opt-vis-vtab:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.08); } .opt-vis-vtab.active { background: #2563eb; color: #ffffff; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4); } .legend-chip { display: flex; align-items: center; gap: 8px; } .legend-chip.cyan { color: #22d3ee; } .legend-chip.yellow { color: #fbbf24; } .legend-chip.green { color: #10b981; } .legend-chip.red { color: #ef4444; } .legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .legend-dot.cyan { background: #06b6d4; box-shadow: 0 0 8px #06b6d4; } .legend-dot.yellow { background: #f59e0b; box-shadow: 0 0 8px #f59e0b; } .legend-dot.green { background: #10b981; box-shadow: 0 0 8px rgba(16, 185, 129, 0.6); } .legend-dot.red { background: #ef4444; box-shadow: 0 0 8px rgba(239, 68, 68, 0.6); } /* ========================================================================== 🔍 Strike Intelligence Radar Modal ========================================================================== */ .upstox-modal-overlay { position: fixed; inset: 0; background: rgba(2, 6, 18, 0.78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 16px; } .upstox-modal-box { background: #091224; border: 1px solid #2563eb; border-radius: 12px; width: 680px; max-width: 95vw; max-height: 90vh; overflow-y: auto; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.85); animation: dropIn 0.2s cubic-bezier(0.16, 1, 0.3, 1); } html[data-theme="light"] .upstox-modal-box, body[data-theme="light"] .upstox-modal-box { background: #ffffff; border-color: #cbd5e1; box-shadow: 0 20px 48px rgba(15, 23, 42, 0.2); } .upstox-modal-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 16px 20px; border-bottom: 1px solid #1a2744; background: #070e1d; } html[data-theme="light"] .upstox-modal-header, body[data-theme="light"] .upstox-modal-header { background: #f8fafc; border-bottom-color: #e2e8f0; } .upstox-modal-title { margin: 0; font-size: 15px; font-weight: 900; color: #f8fafc; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.5px; } html[data-theme="light"] .upstox-modal-title, body[data-theme="light"] .upstox-modal-title { color: #0f172a; } .upstox-modal-sub { margin: 4px 0 0 0; font-size: 11px; color: #94a3b8; font-family: 'JetBrains Mono', monospace; } .upstox-modal-close { background: transparent; border: 1px solid #1e293b; color: #94a3b8; font-size: 14px; width: 28px; height: 28px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s ease; } .upstox-modal-close:hover { background: #ef4444; color: #fff; border-color: #ef4444; } .upstox-modal-body { padding: 16px 20px; } .modal-section-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } @media (max-width: 600px) { .modal-section-grid { grid-template-columns: repeat(2, 1fr); } } .modal-metric-card { background: #060b19; border: 1px solid #18243d; border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; font-family: 'JetBrains Mono', monospace; } html[data-theme="light"] .modal-metric-card, body[data-theme="light"] .modal-metric-card { background: #f8fafc; border-color: #e2e8f0; } .mm-lbl { font-size: 9.5px; color: #94a3b8; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } .mm-val { font-size: 14px; font-weight: 900; color: #f8fafc; } html[data-theme="light"] .mm-val, body[data-theme="light"] .mm-val { color: #0f172a; } .mm-sub { font-size: 9.5px; color: #64748b; } .modal-badge { font-size: 9px; font-weight: 800; padding: 2px 6px; border-radius: 4px; } .modal-badge.atm { background: rgba(251, 191, 36, 0.2); color: #fbbf24; border: 1px solid rgba(251, 191, 36, 0.4); } .modal-badge.itm-ce { background: rgba(16, 185, 129, 0.2); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.4); } .modal-badge.itm-pe { background: rgba(239, 68, 68, 0.2); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.4); } .modal-badge.distance { background: rgba(56, 189, 248, 0.15); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.3); } .m-pill { font-size: 8.5px; font-weight: 800; padding: 1px 5px; border-radius: 3px; margin-left: 4px; } .m-pill.green { background: rgba(16, 185, 129, 0.2); color: #34d399; } .m-pill.red { background: rgba(239, 68, 68, 0.2); color: #f87171; } /* ========================================================================== ⚡ UNIFIED CROSS-TAB THEME ADAPTATION SYSTEM (LIGHT & DARK MODE) ========================================================================== */ /* --- Universal Dark Mode Component Polish --- */ html[data-theme="dark"] body, [data-theme="dark"] body { background-color: #060a14 !important; color: #f8fafc !important; } [data-theme="dark"] .card, [data-theme="dark"] .sm-card, [data-theme="dark"] .chart-section, [data-theme="dark"] .stat-hero-card, [data-theme="dark"] .metric-card, [data-theme="dark"] .opt-metric-item, [data-theme="dark"] .fut-quad-card, [data-theme="dark"] .fut-card, [data-theme="dark"] .upstox-kpi-card, [data-theme="dark"] .upstox-panel, [data-theme="dark"] .stats-card, [data-theme="dark"] .deliv-card, [data-theme="dark"] .mta-card, [data-theme="dark"] .deliv-section, [data-theme="dark"] .sector-card { background: #0b1325 !important; border-color: #1a2948 !important; color: #f8fafc !important; } [data-theme="dark"] .control-band, [data-theme="dark"] .controls, [data-theme="dark"] .options-control-band, [data-theme="dark"] .sm-controls, [data-theme="dark"] .fut-controls, [data-theme="dark"] .upstox-filter-bar { background: #0d172e !important; border-color: #1e2f52 !important; color: #f8fafc !important; } [data-theme="dark"] select, [data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]) { background: #070d1a !important; border-color: #1e2f52 !important; color: #f8fafc !important; } [data-theme="dark"] .chart-header h2, [data-theme="dark"] .chart-header h3, [data-theme="dark"] .chart-header h4 { color: #f8fafc !important; } [data-theme="dark"] .chart-tooltip, [data-theme="dark"] .opt-vis-tooltip { background: rgba(11, 19, 37, 0.95) !important; border-color: #2b4170 !important; color: #f8fafc !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7) !important; } /* --- Universal Light Mode Component Polish --- */ html[data-theme="light"] body, [data-theme="light"] body { background-color: #f1f5f9 !important; color: #0f172a !important; } [data-theme="light"] .card, [data-theme="light"] .sm-card, [data-theme="light"] .chart-section, [data-theme="light"] .stat-hero-card, [data-theme="light"] .metric-card, [data-theme="light"] .opt-metric-item, [data-theme="light"] .fut-quad-card, [data-theme="light"] .fut-card, [data-theme="light"] .upstox-kpi-card, [data-theme="light"] .upstox-panel, [data-theme="light"] .stats-card, [data-theme="light"] .deliv-card, [data-theme="light"] .mta-card, [data-theme="light"] .deliv-section, [data-theme="light"] .sector-card { background: #ffffff !important; border-color: #e2e8f0 !important; color: #0f172a !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important; } [data-theme="light"] .control-band, [data-theme="light"] .controls, [data-theme="light"] .options-control-band, [data-theme="light"] .sm-controls, [data-theme="light"] .fut-controls, [data-theme="light"] .upstox-filter-bar { background: #f8fafc !important; border-color: #cbd5e1 !important; color: #0f172a !important; } [data-theme="light"] select, [data-theme="light"] input:not([type="checkbox"]):not([type="radio"]) { background: #ffffff !important; border-color: #cbd5e1 !important; color: #0f172a !important; } [data-theme="light"] .chart-header h2, [data-theme="light"] .chart-header h3, [data-theme="light"] .chart-header h4 { color: #0f172a !important; } [data-theme="light"] .chart-header p { color: #64748b !important; } [data-theme="light"] .chart-tooltip, [data-theme="light"] .opt-vis-tooltip { background: rgba(255, 255, 255, 0.98) !important; border-color: #cbd5e1 !important; color: #0f172a !important; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12) !important; } /* Light mode override for inline hardcoded light text across all tabs */ [data-theme="light"] [style*="color:#f8fafc"], [data-theme="light"] [style*="color: #f8fafc"], [data-theme="light"] [style*="color:#ffffff"], [data-theme="light"] [style*="color: #ffffff"], [data-theme="light"] [style*="color:#cbd5e1"], [data-theme="light"] [style*="color: #cbd5e1"], [data-theme="light"] [style*="color:#e2e8f0"], [data-theme="light"] [style*="color: #e2e8f0"] { color: #0f172a !important; } /* Exception: Keep topbar branding and primary action buttons white in light mode */ [data-theme="light"] .topbar, [data-theme="light"] .topbar *, [data-theme="light"] .btn-adm-primary, [data-theme="light"] .btn-primary, [data-theme="light"] .badge-primary { color: #ffffff !important; } [data-theme="light"] [style*="color:#94a3b8"], [data-theme="light"] [style*="color: #94a3b8"] { color: #475569 !important; } /* Tab buttons in Topbar - High contrast in both themes */ [data-theme="dark"] .tab-btn { color: rgba(255, 255, 255, 0.65) !important; } [data-theme="dark"] .tab-btn:hover { color: #ffffff !important; } [data-theme="dark"] .tab-btn.active { color: #38bdf8 !important; border-bottom: 2px solid #38bdf8 !important; } [data-theme="light"] .tab-btn { color: rgba(255, 255, 255, 0.85) !important; } [data-theme="light"] .tab-btn:hover { color: #ffffff !important; } [data-theme="light"] .tab-btn.active { color: #ffffff !important; border-bottom: 2px solid #ffffff !important; } /* Macro Pills & Market Ticker Chips */ [data-theme="dark"] .macro-pill, [data-theme="dark"] .ticker-chip { background: #0d172e !important; border-color: #1e2f52 !important; } [data-theme="light"] .macro-pill, [data-theme="light"] .ticker-chip { background: #ffffff !important; border-color: #cbd5e1 !important; } /* ========================================================================== 📋 Participant-Wise OI Desk (Trendlyne-Style) ========================================================================== */ #p1FiiSubtabOi { color: var(--text-primary); } #p1FiiSubtabOi .poi-mode-btn-group { background: var(--bg-subtle); border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: 2px; gap: 2px; } #p1FiiSubtabOi .poi-mode-btn-group .ctrl-btn { font-size: 11.5px; padding: 5px 12px; font-weight: 700; border-radius: 4px; border: none; cursor: pointer; background: transparent; color: var(--text-secondary); transition: all 0.15s ease; } #p1FiiSubtabOi .poi-mode-btn-group .ctrl-btn:hover { color: var(--text-primary); background: rgba(37, 99, 235, 0.08); } #p1FiiSubtabOi .poi-mode-btn-group .ctrl-btn.active { background: var(--primary) !important; color: #ffffff !important; box-shadow: 0 1px 3px rgba(37, 99, 235, 0.3); } #poiSignalRow .sm-card { background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 12px 14px; box-shadow: var(--shadow-sm); } #poiDivergenceCard { background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } #poiMainTable { border-collapse: collapse; width: 100%; background: var(--bg-card); } #poiMainTable th { user-select: none; background: var(--table-th-bg); color: var(--table-th-text); border-bottom: 2px solid var(--table-border); } /* Normal row */ #poiMainTable tr.poi-row-norm { background: var(--bg-card); border-bottom: 1px solid var(--table-border); transition: background 0.15s ease; } #poiMainTable tr.poi-row-norm:hover td { background: var(--table-tr-hover) !important; } /* Net row (highlighted) */ #poiMainTable tr.poi-row-net { background: var(--poi-net-row-bg, rgba(37, 99, 235, 0.05)); border-bottom: 1px solid var(--table-border); transition: background 0.15s ease; } #poiMainTable tr.poi-row-net:hover td { background: var(--table-tr-hover) !important; } /* Sticky first column */ #poiMainTable td.poi-sticky-cell { position: sticky; left: 0; z-index: 2; white-space: nowrap; background: var(--bg-card); color: var(--text-primary); font-weight: 500; border-right: 1px solid var(--table-border); box-shadow: 2px 0 6px rgba(0, 0, 0, 0.06); transition: background 0.15s ease; } /* Sticky cell in Net rows */ #poiMainTable td.poi-net-cell { background: var(--poi-net-sticky-bg, #f0f7ff); color: var(--poi-net-label, #1d4ed8); font-weight: 800; } html[data-theme="dark"] #poiMainTable td.poi-net-cell, body[data-theme="dark"] #poiMainTable td.poi-net-cell { background: var(--poi-net-sticky-bg, #0d1a33); color: var(--cyan, #38bdf8); box-shadow: 2px 0 6px rgba(0, 0, 0, 0.35); } html[data-theme="light"] #poiMainTable td.poi-net-cell, body[data-theme="light"] #poiMainTable td.poi-net-cell { background: #f0f7ff; color: #1d4ed8; box-shadow: 2px 0 6px rgba(0, 0, 0, 0.05); } /* Separator Row */ #poiMainTable tr.poi-sep-row td { height: 3px; padding: 0; background: var(--table-border); border-bottom: 1px solid var(--table-border); } #poiAutoRefreshBadge { animation: poi-pulse 2s ease-in-out infinite; } @keyframes poi-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } /* ============================================================================== 🌐 GLOBAL MARKETS & MACRO INTELLIGENCE DESK (DASHBOARD CARDS VIEW) ============================================================================== */ .inst-global-desk-wrap { margin: 16px 0 20px 0; background: #090e1a; border: 1px solid #1a2538; border-radius: 12px; padding: 16px 18px; } .inst-global-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; } .igh-left { display: flex; align-items: center; gap: 10px; } .igh-icon { font-size: 22px; } .igh-title { margin: 0; font-size: 15px; font-weight: 800; color: #f8fafc; letter-spacing: 0.3px; } .igh-subtitle { font-size: 11.5px; color: #94a3b8; } .igh-right { display: flex; align-items: center; gap: 10px; } .igh-live-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; padding: 4px 9px; border-radius: 6px; background: rgba(16, 185, 129, 0.12); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3); font-family: 'JetBrains Mono', monospace; } .igh-view-all-btn { background: rgba(59, 130, 246, 0.12); border: 1px solid rgba(59, 130, 246, 0.35); color: #60a5fa; padding: 6px 13px; font-size: 11.5px; font-weight: 700; border-radius: 6px; cursor: pointer; transition: all 0.15s ease; } .igh-view-all-btn:hover { background: rgba(59, 130, 246, 0.25); color: #93c5fd; border-color: #60a5fa; } .inst-global-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: 10px; } .global-card { background: #0d1524; border: 1px solid #1e293d; border-radius: 8px; padding: 10px 12px; cursor: pointer; transition: all 0.15s ease; } .global-card:hover { background: #111a2d; border-color: #38bdf8; transform: translateY(-1px); } .gc-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .gc-flag { font-size: 14px; } .gc-name { font-size: 11px; font-weight: 800; color: #94a3b8; letter-spacing: 0.5px; flex: 1; margin-left: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gc-status { font-size: 9px; font-weight: 800; padding: 1px 5px; border-radius: 3px; background: rgba(148, 163, 184, 0.15); color: #94a3b8; } .gc-status.live { background: rgba(16, 185, 129, 0.15); color: #10b981; } .gc-val { font-size: 15px; font-weight: 800; color: #f8fafc; font-family: 'JetBrains Mono', monospace; margin-bottom: 4px; } .gc-chg-row { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-family: 'JetBrains Mono', monospace; } .gc-chg { font-weight: 700; } .gc-chg.positive { color: #10b981; } .gc-chg.negative { color: #ef4444; } .gc-sub { font-size: 10px; color: #64748b; } /* Day Mode (Light Theme) for Global Desk */ [data-theme="light"] .inst-global-desk-wrap { background: #ffffff !important; border-color: #cbd5e1 !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important; } [data-theme="light"] .igh-title { color: #0f172a !important; } [data-theme="light"] .igh-subtitle { color: #64748b !important; } [data-theme="light"] .global-card { background: #f8fafc !important; border-color: #e2e8f0 !important; } [data-theme="light"] .global-card:hover { background: #f1f5f9 !important; border-color: #0284c7 !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important; } [data-theme="light"] .gc-name { color: #475569 !important; } [data-theme="light"] .gc-val { color: #0f172a !important; } [data-theme="light"] .gc-sub { color: #64748b !important; } [data-theme="light"] .gc-status { background: #e2e8f0 !important; color: #475569 !important; } /* ============================================================================== ⚡ UPSTOX CARD DAY MODE CONTRAST FIX ============================================================================== */ .inst-dash-module--upstox { border-color: rgba(16, 185, 129, 0.35) !important; background: linear-gradient(180deg, rgba(16, 185, 129, 0.08) 0%, rgba(11, 19, 41, 0.85) 100%) !important; } [data-theme="light"] .inst-dash-module--upstox { border-color: rgba(16, 185, 129, 0.45) !important; background: linear-gradient(180deg, rgba(16, 185, 129, 0.09) 0%, #ffffff 100%) !important; box-shadow: 0 2px 10px rgba(16, 185, 129, 0.08) !important; } [data-theme="light"] .inst-dash-module--upstox .inst-dm-title { color: #0f172a !important; } [data-theme="light"] .inst-dash-module--upstox .inst-dm-body p { color: #475569 !important; } [data-theme="light"] .inst-dash-module--upstox .inst-dm-go { color: #059669 !important; font-weight: 700 !important; } /* ============================================================================== ☀️ DAY MODE (LIGHT THEME) OVERRIDES FOR FUTURES INTELLIGENCE DESK ============================================================================== */ [data-theme="light"] .futures-desk { color: #0f172a !important; } [data-theme="light"] .fut-top-bar { background: #ffffff !important; border-color: #cbd5e1 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important; } [data-theme="light"] .fut-heading { color: #0f172a !important; } [data-theme="light"] .fut-subheading { color: #64748b !important; } [data-theme="light"] .fut-search-box { background: #f8fafc !important; border-color: #cbd5e1 !important; } [data-theme="light"] .fut-search-box input { color: #0f172a !important; } [data-theme="light"] .fut-search-box input::placeholder { color: #94a3b8 !important; } [data-theme="light"] .fut-refresh-select { background: #f8fafc !important; border-color: #cbd5e1 !important; color: #0f172a !important; } [data-theme="light"] .fut-index-strip-wrapper { background: #ffffff !important; border-color: #cbd5e1 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important; } [data-theme="light"] .fut-index-strip-header { color: #64748b !important; } [data-theme="light"] .fut-index-card { background: #f8fafc !important; border-color: #e2e8f0 !important; } [data-theme="light"] .fut-index-card:hover { background: #f1f5f9 !important; border-color: #0284c7 !important; } [data-theme="light"] .fut-index-card.active-focus { border-color: #10b981 !important; background: #f0fdf4 !important; } [data-theme="light"] .fut-ic-sym { color: #0f172a !important; } [data-theme="light"] .fut-ic-exp { color: #64748b !important; } [data-theme="light"] .fut-ic-ltp { color: #0f172a !important; } [data-theme="light"] .fut-ic-stats { border-top-color: #e2e8f0 !important; } [data-theme="light"] .fut-ic-stat-item { color: #64748b !important; } [data-theme="light"] .fut-ic-stat-val { color: #1e293b !important; } [data-theme="light"] .fut-nav-container { background: #ffffff !important; border-color: #cbd5e1 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important; } [data-theme="light"] .fut-primary-tabs { border-bottom-color: #e2e8f0 !important; } [data-theme="light"] .fut-tab-btn { background: #f8fafc !important; border-color: #cbd5e1 !important; color: #475569 !important; } [data-theme="light"] .fut-tab-btn:hover { background: #f1f5f9 !important; color: #0f172a !important; } [data-theme="light"] .fut-tab-btn.active { background: #e0f2fe !important; border-color: #0284c7 !important; color: #0369a1 !important; box-shadow: 0 2px 8px rgba(2, 132, 199, 0.15) !important; } [data-theme="light"] .fut-tab-counter { background: rgba(0, 0, 0, 0.06) !important; color: #0369a1 !important; } [data-theme="light"] .fut-sec-pill { background: #f8fafc !important; border-color: #cbd5e1 !important; color: #475569 !important; } [data-theme="light"] .fut-sec-pill:hover { background: #f1f5f9 !important; color: #0f172a !important; } [data-theme="light"] .fut-sec-pill.active { background: #e0f2fe !important; border-color: #0284c7 !important; color: #0369a1 !important; } [data-theme="light"] .fut-sig-label { color: #64748b !important; } [data-theme="light"] .fut-sig-pill { background: #f8fafc !important; border-color: #cbd5e1 !important; color: #475569 !important; } [data-theme="light"] .fut-sig-pill:hover { background: #f1f5f9 !important; color: #0f172a !important; } [data-theme="light"] .fut-sig-pill.active { border-color: #64748b !important; color: #0f172a !important; background: #e2e8f0 !important; } [data-theme="light"] .fut-macro-bar { background: #ffffff !important; border-color: #cbd5e1 !important; } [data-theme="light"] .fmb-lbl { color: #64748b !important; } [data-theme="light"] .fmb-val { color: #0f172a !important; } [data-theme="light"] .fut-mb-sep { background: #e2e8f0 !important; } [data-theme="light"] .fut-ratio-bar { background: #e2e8f0 !important; } [data-theme="light"] .fut-table-wrap { background: #ffffff !important; border-color: #cbd5e1 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important; } [data-theme="light"] .fut-table th { background: #f8fafc !important; color: #475569 !important; border-bottom-color: #e2e8f0 !important; } [data-theme="light"] .fut-table td { border-bottom-color: #f1f5f9 !important; color: #0f172a !important; } [data-theme="light"] .fut-table tbody tr:hover td { background: #f8fafc !important; } [data-theme="light"] .fut-day-range { color: #64748b !important; } [data-theme="light"] .fut-dr-bar-wrap { background: #e2e8f0 !important; } [data-theme="light"] .fut-quad-card { background: #ffffff !important; border-color: #cbd5e1 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important; } [data-theme="light"] .fut-quad-header { border-bottom-color: #f1f5f9 !important; } [data-theme="light"] .fut-quad-sub { color: #64748b !important; } [data-theme="light"] .quad-count-badge { background: #f1f5f9 !important; color: #0f172a !important; } [data-theme="light"] .fut-quad-item { background: #f8fafc !important; border-color: #e2e8f0 !important; color: #0f172a !important; } [data-theme="light"] .fut-quad-item:hover { background: #f1f5f9 !important; border-color: #0284c7 !important; } [data-theme="light"] .fut-mwpl-pbar { background: #e2e8f0 !important; } [data-theme="light"] #futHeatmapGrid .fut-heatmap-tile { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important; } [data-theme="light"] #futHeatmapGrid .fut-heatmap-tile strong { color: #0f172a !important; } [data-theme="light"] #panelFutures h4, [data-theme="light"] #panelFutures h5 { color: #0f172a !important; } /* Futures Desk Base Classes & Light Mode Consistency */ .fut-sector-badge { font-size: 11px; color: #94a3b8; background: #0c1424; border: 1px solid #1a2538; padding: 2px 6px; border-radius: 3px; white-space: nowrap; } .fut-hm-neutral-box { background: #1e293b; border: 1px solid #334155; } .fut-idx-card-title { margin: 0; font-size: 16px; font-weight: 800; color: #f8fafc; } .fut-idx-price-box { background: #080c14; border: 1px solid #1a2538; } .fut-idx-spot-num { color: #cbd5e1; } .fut-idx-grid-stats { border-top: 1px solid #1a2538; } .fut-idx-oi-num, .fut-idx-vwap-num { color: #f8fafc; } .fut-alert-card { background: #0c1322; } [data-theme="light"] .fut-sector-badge { color: #475569 !important; background: #f1f5f9 !important; border-color: #cbd5e1 !important; } [data-theme="light"] .fut-hm-neutral-box { background: #e2e8f0 !important; border-color: #cbd5e1 !important; } [data-theme="light"] .fut-idx-card-title { color: #0f172a !important; } [data-theme="light"] .fut-idx-price-box { background: #f1f5f9 !important; border-color: #cbd5e1 !important; } [data-theme="light"] .fut-idx-spot-num { color: #0f172a !important; } [data-theme="light"] .fut-idx-grid-stats { border-top-color: #e2e8f0 !important; } [data-theme="light"] .fut-idx-oi-num, [data-theme="light"] .fut-idx-vwap-num { color: #0f172a !important; } [data-theme="light"] .fut-alert-card { background: #fffbeb !important; border-color: #f59e0b !important; } [data-theme="light"] .fut-alert-card strong { color: #92400e !important; } /* ============================================================================== 🌟 ULTRA-CLEAN MODERN OPTION CHAIN DESK (TARGET DESIGN REPLICATION) ============================================================================== */ .modern-opt-desk-wrap { width: 100%; display: flex; flex-direction: column; gap: 10px; box-sizing: border-box; } /* 1. Modern Top Command Bar */ .modern-opt-topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 14px; background: var(--bg-card, #ffffff); border: 1px solid var(--border-default, #cbd5e1); border-radius: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); } .modern-opt-presets, .modern-opt-modes, .modern-opt-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .modern-pill-btn { background: var(--bg-card, #ffffff); border: 1px solid var(--border-default, #cbd5e1); color: var(--text-muted, #475569); font-size: 12px; font-weight: 600; padding: 5px 14px; border-radius: 20px; cursor: pointer; transition: all 0.15s ease; outline: none; user-select: none; font-family: inherit; } .modern-pill-btn:hover { border-color: #3b82f6; color: #2563eb; background: #f8fafc; } .modern-pill-btn.active { background: #2563eb !important; border-color: #2563eb !important; color: #ffffff !important; font-weight: 700 !important; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.28); } .modern-icon-btn { width: 32px; height: 32px; border-radius: 50%; background: var(--bg-card, #ffffff); border: 1px solid var(--border-default, #cbd5e1); font-size: 13px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.15s ease; } .modern-icon-btn:hover { border-color: #2563eb; background: #f0f7ff; transform: translateY(-1px); } /* Dropdown Menu for Custom Range */ .modern-dropdown-menu { position: absolute; top: calc(100% + 4px); left: 0; background: var(--bg-card, #ffffff); border: 1px solid var(--border-default, #cbd5e1); border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); z-index: 60; min-width: 175px; padding: 6px 0; } .modern-dropdown-title { font-size: 10px; font-weight: 800; color: #64748b; padding: 4px 12px; letter-spacing: 0.5px; } .modern-dropdown-item { padding: 6px 14px; font-size: 12px; font-weight: 600; color: var(--text-primary, #0f172a); cursor: pointer; transition: background 0.1s ease; } .modern-dropdown-item:hover { background: #e0f2fe; color: #0284c7; } .modern-dropdown-item.active { background: #2563eb; color: #ffffff; } /* 2. Sub-Bar: DTE Horizon & Macro Stats */ .modern-opt-substrip { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; padding: 6px 14px; background: var(--bg-subtle, #f8fafc); border: 1px solid var(--border-subtle, #e2e8f0); border-radius: 8px; } .modern-dte-list { display: flex; align-items: center; gap: 4px; overflow-x: auto; max-width: 100%; } .modern-dte-pill { padding: 2px 8px; font-size: 11px; font-weight: 700; border-radius: 4px; border: none; background: transparent; color: var(--text-muted, #64748b); cursor: pointer; transition: all 0.12s ease; white-space: nowrap; font-family: inherit; } .modern-dte-pill:hover { background: rgba(37, 99, 235, 0.1); color: #2563eb; } .modern-dte-pill.active { background: #2563eb !important; color: #ffffff !important; box-shadow: 0 1px 4px rgba(37, 99, 235, 0.3); } .modern-inline-stats { display: flex; align-items: center; gap: 14px; font-size: 11.5px; color: var(--text-muted, #64748b); flex-wrap: wrap; } .modern-inline-stats strong { color: var(--text-primary, #0f172a); font-family: 'JetBrains Mono', monospace; } .modern-live-dot { font-size: 10px; cursor: help; } /* 3. Modern Option Chain Table */ .modern-opt-table-wrap { background: var(--bg-card, #ffffff); border: 1px solid var(--border-default, #cbd5e1); border-radius: 10px; overflow-x: auto; overflow-y: auto; max-height: 620px; position: relative; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04); } .modern-opt-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .modern-opt-table thead { position: sticky; top: 0; z-index: 40; } .modern-opt-table th { position: sticky; top: 0; z-index: 40; padding: 9px 10px; font-size: 11px; font-weight: 700; color: #475569; background: #f8fafc !important; border-bottom: 2px solid #cbd5e1 !important; white-space: nowrap; user-select: none; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } .modern-opt-table tfoot { position: sticky; bottom: 0; z-index: 35; } .modern-opt-table tfoot td { position: sticky; bottom: 0; z-index: 35; background: #f8fafc !important; border-top: 2px solid #cbd5e1 !important; box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.05); } .modern-opt-table td { padding: 7px 10px; border-bottom: 1px solid #f1f5f9; white-space: nowrap; } .modern-opt-table tr:hover td { background: rgba(37, 99, 235, 0.035) !important; } /* Strike Column */ .modern-th-strike { position: sticky; top: 0; z-index: 45; background: #f1f5f9 !important; color: #0f172a !important; font-weight: 800; border-left: 1px solid #cbd5e1 !important; border-right: 1px solid #cbd5e1 !important; } .modern-cell-strike { text-align: center; border-left: 1px solid #e2e8f0; border-right: 1px solid #e2e8f0; background: #ffffff; } .modern-strike-num { color: #2563eb; font-size: 12.5px; font-weight: 800; font-family: 'JetBrains Mono', monospace; } /* Spot Divider Row */ .modern-spot-divider-row { height: 38px; background: rgba(254, 243, 199, 0.15); } .modern-spot-divider-bar { border-bottom: 2px dashed #f59e0b; } .modern-spot-divider-cell { text-align: center; vertical-align: middle; padding: 3px 6px; background: transparent; border-left: 1px solid #e2e8f0; border-right: 1px solid #e2e8f0; } .modern-spot-pill { display: inline-block; background: #fef3c7; border: 1px solid #fde68a; border-radius: 4px; padding: 3px 12px; font-size: 12px; font-weight: 800; color: #1e293b; font-family: 'JetBrains Mono', monospace; box-shadow: 0 1px 4px rgba(245, 158, 11, 0.2); } /* Mini Bar inside OI cell */ .modern-cell-oi { position: relative; z-index: 1; min-width: 85px; } .modern-oi-fill { position: absolute; top: 3px; bottom: 3px; background: rgba(59, 130, 246, 0.16); border-radius: 3px; z-index: -1; pointer-events: none; } .modern-oi-fill.ce { right: 4px; } .modern-oi-fill.pe { left: 4px; } .modern-oi-text { font-weight: 700; font-family: 'JetBrains Mono', monospace; } /* Sentiment / OI Sense typography */ .sense-sb { color: #ef4444; font-weight: 700; } .sense-lb { color: #10b981; font-weight: 700; } .sense-sc { color: #2563eb; font-weight: 700; } .sense-lu { color: #f59e0b; font-weight: 700; } .modern-num-green { color: #10b981; font-weight: 700; font-family: 'JetBrains Mono', monospace; } .modern-num-red { color: #ef4444; font-weight: 700; font-family: 'JetBrains Mono', monospace; } .modern-prob-val { color: #64748b; font-size: 11px; font-family: 'JetBrains Mono', monospace; } /* Footer Totals */ .modern-foot-row td { padding: 10px 10px; background: #f8fafc; border-top: 2px solid #cbd5e1; font-size: 11.5px; } .modern-foot-strike { background: #f1f5f9 !important; border-left: 1px solid #cbd5e1 !important; border-right: 1px solid #cbd5e1 !important; text-align: center !important; font-weight: 800 !important; font-size: 12px !important; color: #2563eb !important; letter-spacing: 0.5px; } /* Dark Theme Overrides for Modern Option Chain Desk */ [data-theme="dark"] .modern-opt-topbar, [data-theme="dark"] .modern-opt-table-wrap { background: #0b1325 !important; border-color: #1e293b !important; } [data-theme="dark"] .modern-opt-substrip { background: #070c18 !important; border-color: #15223c !important; } [data-theme="dark"] .modern-pill-btn { background: #0b1325 !important; border-color: #1e293b !important; color: #94a3b8 !important; } [data-theme="dark"] .modern-pill-btn:hover { background: #111e38 !important; color: #60a5fa !important; } [data-theme="dark"] .modern-pill-btn.active { background: #2563eb !important; border-color: #2563eb !important; color: #ffffff !important; } [data-theme="dark"] .modern-icon-btn { background: #0b1325 !important; border-color: #1e293b !important; color: #f8fafc !important; } [data-theme="dark"] .modern-dropdown-menu { background: #0b1325 !important; border-color: #1e293b !important; } [data-theme="dark"] .modern-dropdown-item { color: #f8fafc !important; } [data-theme="dark"] .modern-dropdown-item:hover { background: #172554 !important; color: #60a5fa !important; } [data-theme="dark"] .modern-inline-stats strong { color: #f8fafc !important; } [data-theme="dark"] .modern-opt-table th { background: #0f1b33 !important; color: #94a3b8 !important; border-color: #1e293b !important; } [data-theme="dark"] .modern-opt-table td { border-color: #15223c !important; color: #f8fafc !important; } [data-theme="dark"] .modern-cell-strike { background: #0b1325 !important; border-color: #1e293b !important; } [data-theme="dark"] .modern-th-strike { background: #132240 !important; color: #f8fafc !important; border-color: #1e293b !important; } [data-theme="dark"] .modern-opt-table tfoot td { background: #0f1b33 !important; color: #f8fafc !important; border-color: #1e293b !important; } [data-theme="dark"] .modern-strike-num { color: #60a5fa !important; } [data-theme="dark"] .modern-foot-strike { background: #132240 !important; border-left: 1px solid #1e293b !important; border-right: 1px solid #1e293b !important; color: #60a5fa !important; } [data-theme="dark"] .modern-spot-pill { background: #1e293b !important; border-color: #334155 !important; color: #f8fafc !important; } [data-theme="dark"] .modern-foot-row td { background: #0f1b33 !important; border-color: #1e293b !important; } [data-theme="dark"] .modern-foot-strike { background: #132240 !important; border-color: #1e293b !important; } /* ========================================================================== ⚡ MODERN OPTION CHAIN: IMAGE 1 & IMAGE 2 COMPLIANCE + DECLINE DRAWER STYLES ========================================================================== */ /* 1. Strike Number & Action Buttons (Image 1 Style) */ .modern-strike-num { color: #2563eb !important; font-size: 12.5px; font-weight: 800; font-family: 'JetBrains Mono', monospace; letter-spacing: -0.2px; } [data-theme="dark"] .modern-strike-num { color: #60a5fa !important; } .modern-strike-cell-wrap { display: flex; align-items: center; justify-content: center; gap: 6px; position: relative; min-width: 125px; } .modern-strike-actions { display: inline-flex; align-items: center; gap: 3px; opacity: 0.25; transition: opacity 0.15s ease-in-out; } .modern-opt-row:hover .modern-strike-actions, .modern-opt-row.is-selected .modern-strike-actions { opacity: 1; } .st-act-btn { width: 18px; height: 18px; border-radius: 3px; border: none; font-size: 9px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; line-height: 1; transition: transform 0.1s ease, filter 0.1s ease; } .st-act-btn:hover { transform: scale(1.15); } .st-act-btn.buy { background: #10b981; color: #ffffff; } .st-act-btn.sell { background: #ef4444; color: #ffffff; } .st-act-btn.chart { background: #2563eb; color: #ffffff; font-size: 10px; } /* 2. LTP Shading (Image 1 Style: Pink for down, Green for up) */ .modern-ltp-pill { display: inline-block; padding: 2px 7px; border-radius: 4px; font-weight: 700; font-family: 'JetBrains Mono', monospace; font-size: 12px; min-width: 58px; text-align: right; transition: background-color 0.2s ease; } .modern-ltp-pill.down { background: #fee2e2; color: #dc2626; } .modern-ltp-pill.up { background: #dcfce7; color: #16a34a; } [data-theme="dark"] .modern-ltp-pill.down { background: rgba(239, 68, 68, 0.22); color: #f87171; } [data-theme="dark"] .modern-ltp-pill.up { background: rgba(16, 185, 129, 0.22); color: #34d399; } /* 3. Mini Bars for Volume & OI */ .modern-cell-vol { position: relative; min-width: 75px; } .modern-vol-fill { position: absolute; top: 3px; bottom: 3px; background: rgba(14, 165, 233, 0.15); border-radius: 3px; z-index: 0; pointer-events: none; } .modern-vol-fill.ce { right: 4px; } .modern-vol-fill.pe { left: 4px; } .modern-vol-text { position: relative; z-index: 1; font-weight: 700; font-family: 'JetBrains Mono', monospace; color: #334155; } [data-theme="dark"] .modern-vol-text { color: #cbd5e1; } /* 4. GEX-OI & GEX-Volume Image 2 Columns */ .modern-gex-cell { position: relative; min-width: 105px; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 700; white-space: nowrap; } .modern-gex-bar { position: absolute; top: 3px; bottom: 3px; border-radius: 3px; z-index: 0; pointer-events: none; } .modern-gex-bar.neg { right: 4px; background: #fee2e2; } .modern-gex-bar.pos { left: 4px; background: #d1fae5; } [data-theme="dark"] .modern-gex-bar.neg { background: rgba(239, 68, 68, 0.25); } [data-theme="dark"] .modern-gex-bar.pos { background: rgba(16, 185, 129, 0.25); } .modern-gex-val { position: relative; z-index: 1; } .modern-gex-val.neg { color: #ef4444; } .modern-gex-val.pos { color: #10b981; } /* 5. Custom Dropdown Checkboxes */ .modern-dropdown-checkbox-item { display: flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 11.5px; color: #334155; cursor: pointer; user-select: none; } .modern-dropdown-checkbox-item:hover { background: #f1f5f9; } [data-theme="dark"] .modern-dropdown-checkbox-item { color: #e2e8f0; } [data-theme="dark"] .modern-dropdown-checkbox-item:hover { background: #1e293b; } /* 6. Modern Decline / Decay Chart Drawer */ .modern-decline-drawer { margin-top: 18px; background: var(--bg-card, #ffffff); border: 1px solid var(--border-default, #cbd5e1); border-radius: 10px; padding: 16px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); } [data-theme="dark"] .modern-decline-drawer { background: #0b1325; border-color: #1e293b; } .modern-decline-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; border-bottom: 1px solid #e2e8f0; padding-bottom: 12px; } [data-theme="dark"] .modern-decline-header { border-color: #1e293b; } .modern-decline-badge { font-size: 10px; font-weight: 800; background: rgba(168, 85, 247, 0.12); color: #9333ea; padding: 3px 8px; border-radius: 4px; display: inline-block; margin-bottom: 4px; letter-spacing: 0.5px; } [data-theme="dark"] .modern-decline-badge { background: rgba(168, 85, 247, 0.22); color: #c084fc; } .modern-decline-title { font-size: 15px; font-weight: 800; color: var(--text-heading, #0f172a); margin: 0; } [data-theme="dark"] .modern-decline-title { color: #f8fafc; } .modern-decline-sub { font-size: 11px; color: #64748b; } .modern-decline-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .modern-decline-strike-chips { display: inline-flex; align-items: center; gap: 5px; background: #f1f5f9; padding: 3px 6px; border-radius: 6px; } [data-theme="dark"] .modern-decline-strike-chips { background: #070c18; } .md-strike-chip { padding: 3px 8px; font-size: 11px; font-weight: 700; font-family: 'JetBrains Mono', monospace; border: 1px solid transparent; border-radius: 4px; background: #ffffff; color: #475569; cursor: pointer; transition: all 0.15s ease; } [data-theme="dark"] .md-strike-chip { background: #0f1b33; color: #94a3b8; } .md-strike-chip:hover { border-color: #9333ea; color: #9333ea; } .md-strike-chip.active { background: #9333ea; color: #ffffff; border-color: #9333ea; } .modern-decline-toggle-btn { background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 6px; padding: 5px 10px; font-size: 11px; font-weight: 700; color: #475569; cursor: pointer; } [data-theme="dark"] .modern-decline-toggle-btn { background: #0f1b33; border-color: #1e293b; color: #cbd5e1; } .modern-decline-ribbon { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin: 12px 0; } .md-ribbon-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: 8px 10px; } [data-theme="dark"] .md-ribbon-card { background: #070c18; border-color: #15223c; } .md-lbl { font-size: 10px; font-weight: 700; color: #64748b; text-transform: uppercase; display: block; } .md-val { font-size: 13.5px; font-weight: 800; font-family: 'JetBrains Mono', monospace; color: #0f172a; display: block; margin-top: 2px; } [data-theme="dark"] .md-val { color: #f8fafc; } .modern-decline-toggles-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 11.5px; flex-wrap: wrap; gap: 8px; } .md-toggles-left { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; } .md-toggle-item { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font-weight: 600; color: #475569; } [data-theme="dark"] .md-toggle-item { color: #94a3b8; } .md-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .md-dot.purple { background: #a855f7; } .md-dot.orange { background: #f59e0b; } .md-dot.green { background: #10b981; } .md-dot.red { background: #ef4444; } .modern-decline-canvas-wrap { position: relative; width: 100%; height: 280px; background: #fafafa; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; } [data-theme="dark"] .modern-decline-canvas-wrap { background: #060913; border-color: #15223c; } .modern-decline-tooltip { position: absolute; pointer-events: none; background: rgba(15, 23, 42, 0.95); color: #ffffff; padding: 8px 12px; border-radius: 6px; font-size: 11px; font-family: 'JetBrains Mono', monospace; box-shadow: 0 4px 14px rgba(0,0,0,0.25); border: 1px solid #334155; z-index: 10; min-width: 160px; } /* 7. Modern Option Chain Settings Modal */ .modern-opt-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(4, 8, 20, 0.65); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 10000; } .modern-opt-modal-box { background: #ffffff; border: 1px solid #cbd5e1; border-radius: 12px; width: 440px; max-width: 95vw; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25); overflow: hidden; animation: modalScaleIn 0.2s cubic-bezier(0.16, 1, 0.3, 1); } [data-theme="dark"] .modern-opt-modal-box { background: #0b1325; border-color: #1e293b; } @keyframes modalScaleIn { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } } .modern-opt-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid #e2e8f0; background: #f8fafc; } [data-theme="dark"] .modern-opt-modal-header { background: #0f1b33; border-color: #1e293b; } .modern-opt-modal-title { font-size: 14px; font-weight: 800; color: #0f172a; margin: 0; } [data-theme="dark"] .modern-opt-modal-title { color: #f8fafc; } .modern-opt-modal-body { padding: 18px; display: flex; flex-direction: column; gap: 16px; } .modern-modal-field { display: flex; flex-direction: column; gap: 6px; } .modern-modal-field label { font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; } .modern-modal-select { padding: 8px 12px; font-size: 12.5px; font-weight: 600; border: 1px solid #cbd5e1; border-radius: 6px; background: #ffffff; color: #0f172a; } [data-theme="dark"] .modern-modal-select { background: #070c18; border-color: #1e293b; color: #f8fafc; } .modern-modal-range-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .modern-modal-range-btn { padding: 7px 4px; font-size: 11.5px; font-weight: 700; border: 1px solid #cbd5e1; border-radius: 6px; background: #f8fafc; color: #475569; cursor: pointer; text-align: center; transition: all 0.15s ease; } .modern-modal-range-btn:hover { border-color: #2563eb; color: #2563eb; } .modern-modal-range-btn.active { background: #2563eb; color: #ffffff; border-color: #2563eb; } [data-theme="dark"] .modern-modal-range-btn { background: #070c18; border-color: #1e293b; color: #94a3b8; } [data-theme="dark"] .modern-modal-range-btn.active { background: #2563eb; color: #ffffff; } .modern-opt-modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid #e2e8f0; background: #f8fafc; } [data-theme="dark"] .modern-opt-modal-footer { background: #0f1b33; border-color: #1e293b; } /* ========================================================================== 📱 Mobile Responsiveness Polish: MTF, Delivery & Suite Desks ========================================================================== */ @media (max-width: 768px) { .delivery-subtabs { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 6px; } .delivery-subtabs::-webkit-scrollbar { display: none; } .deliv-search-container { width: 100% !important; max-width: 100% !important; } .deliv-search-field { width: 100% !important; } .deliv-indices-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important; } .page2-suite-tabs { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; max-width: 100%; } .page2-suite-tabs::-webkit-scrollbar { display: none; } .page2-nav-bar { flex-direction: column; align-items: stretch; gap: 8px; } .page2-nav-left, .page2-nav-right { width: 100%; justify-content: space-between; flex-wrap: wrap; } .mta-inner-tabs { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; } .mta-inner-tabs::-webkit-scrollbar { display: none; } .mta-calc-grid, .mta-compare-desk-grid { grid-template-columns: 1fr !important; } } /* ========================================================================== 🔍 GLOBAL SEARCH & MULTI-DESK JUMP PALETTE STYLES (Light & Dark Mode) ========================================================================== */ /* 1. Header Trigger Bar */ .inst-global-search-trigger { display: flex; align-items: center; gap: 10px; background: rgba(15, 23, 42, 0.65); border: 1px solid rgba(255, 255, 255, 0.14); padding: 6px 14px; border-radius: 20px; cursor: pointer; max-width: 360px; width: 100%; margin: 0 14px; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); user-select: none; } .inst-global-search-trigger:hover { background: rgba(30, 41, 59, 0.85); border-color: #38bdf8; box-shadow: 0 0 16px rgba(56, 189, 248, 0.22); transform: translateY(-1px); } .gsearch-icon { font-size: 14px; opacity: 0.9; } .gsearch-text { flex: 1; font-size: 12.5px; font-weight: 500; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gsearch-kbd { display: flex; gap: 3px; align-items: center; } .gsearch-kbd kbd { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 4px; padding: 1.5px 5.5px; font-size: 10px; font-family: 'JetBrains Mono', monospace; color: #cbd5e1; font-weight: 700; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); } /* Light Theme Header Trigger Overrides */ html[data-theme="light"] .inst-global-search-trigger, body[data-theme="light"] .inst-global-search-trigger { background: #ffffff; border: 1px solid #cbd5e1; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); } html[data-theme="light"] .inst-global-search-trigger:hover, body[data-theme="light"] .inst-global-search-trigger:hover { background: #f8fafc; border-color: #0284c7; box-shadow: 0 0 12px rgba(2, 132, 199, 0.2); } html[data-theme="light"] .inst-global-search-trigger .gsearch-text, body[data-theme="light"] .inst-global-search-trigger .gsearch-text { color: #475569; } html[data-theme="light"] .gsearch-kbd kbd, body[data-theme="light"] .gsearch-kbd kbd { background: #f1f5f9; border-color: #cbd5e1; color: #334155; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); } /* 2. Global Search Command Palette Modal */ .gsearch-modal-backdrop { position: fixed; inset: 0; background: rgba(8, 12, 22, 0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 100000; display: flex; justify-content: center; align-items: flex-start; padding-top: 70px; padding-left: 16px; padding-right: 16px; padding-bottom: 24px; overflow-y: auto; animation: gsFadeIn 0.15s ease-out; } @keyframes gsFadeIn { from { opacity: 0; } to { opacity: 1; } } .gsearch-modal-box { background: #0f172a; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 14px; width: 100%; max-width: 720px; box-shadow: 0 25px 65px rgba(0, 0, 0, 0.55), 0 0 20px rgba(56, 189, 248, 0.12); display: flex; flex-direction: column; overflow: hidden; animation: gsScaleIn 0.18s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes gsScaleIn { from { transform: scale(0.97) translateY(-8px); opacity: 0.5; } to { transform: scale(1) translateY(0); opacity: 1; } } /* Input Row */ .gsearch-input-wrap { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); background: rgba(15, 23, 42, 0.95); } .gsearch-input-icon { font-size: 18px; opacity: 0.85; } .gsearch-modal-input { flex: 1; background: transparent; border: none; outline: none; font-size: 15.5px; font-weight: 600; color: #f8fafc; font-family: inherit; } .gsearch-modal-input::placeholder { color: #64748b; font-weight: 500; } .gsearch-clear-btn { background: transparent; border: none; color: #94a3b8; font-size: 20px; cursor: pointer; padding: 0 6px; line-height: 1; transition: color 0.15s; } .gsearch-clear-btn:hover { color: #f8fafc; } .gsearch-esc-badge { cursor: pointer; } .gsearch-esc-badge kbd { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 4px; padding: 2px 6px; font-size: 10px; font-family: 'JetBrains Mono', monospace; color: #94a3b8; font-weight: 700; } /* Filter Pills */ .gsearch-filter-pills { display: flex; gap: 8px; padding: 8px 18px; background: rgba(15, 23, 42, 0.6); border-bottom: 1px solid rgba(255, 255, 255, 0.06); overflow-x: auto; white-space: nowrap; } .gsearch-pill { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); color: #94a3b8; font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 6px; cursor: pointer; transition: all 0.15s ease; } .gsearch-pill:hover { background: rgba(255, 255, 255, 0.08); color: #f8fafc; } .gsearch-pill.active { background: rgba(37, 99, 235, 0.18); border-color: #3b82f6; color: #60a5fa; font-weight: 700; } /* Results Scroll List */ .gsearch-results-list { max-height: 420px; overflow-y: auto; padding: 6px; } .gsearch-item-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; transition: all 0.12s ease; margin-bottom: 4px; } .gsearch-item-row:hover, .gsearch-item-row.selected { background: rgba(30, 41, 59, 0.7); border-color: rgba(56, 189, 248, 0.25); } .gs-item-left { flex: 1; min-width: 0; } .gs-item-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .gs-item-sym { font-size: 14px; font-weight: 800; color: #f8fafc; letter-spacing: -0.2px; } .gs-item-name { font-size: 12px; color: #94a3b8; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gs-item-sector { font-size: 10.5px; color: #64748b; } /* Badges */ .gs-badge { font-size: 9.5px; font-weight: 800; padding: 1.5px 6px; border-radius: 4px; letter-spacing: 0.3px; } .gs-badge-index { background: rgba(139, 92, 246, 0.18); color: #a78bfa; border: 1px solid rgba(139, 92, 246, 0.35); } .gs-badge-fno { background: rgba(16, 185, 129, 0.18); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.35); } .gs-badge-eq { background: rgba(56, 189, 248, 0.16); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.3); } .gs-badge-desk { background: rgba(245, 158, 11, 0.16); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.3); } /* Cross-Desk Quick Action Jump Buttons */ .gs-actions-strip { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .gs-action-btn { font-size: 10.5px; font-weight: 700; padding: 4px 8px; border-radius: 5px; border: 1px solid transparent; cursor: pointer; transition: all 0.15s ease; white-space: nowrap; } .gs-action-btn:hover { transform: translateY(-1px); } .gs-action-btn.opt-jump { background: rgba(16, 185, 129, 0.15); color: #34d399; border-color: rgba(16, 185, 129, 0.35); } .gs-action-btn.opt-jump:hover { background: #10b981; color: #030712; box-shadow: 0 0 10px rgba(16, 185, 129, 0.4); } .gs-action-btn.deliv-jump { background: rgba(37, 99, 235, 0.15); color: #60a5fa; border-color: rgba(37, 99, 235, 0.35); } .gs-action-btn.deliv-jump:hover { background: #2563eb; color: #ffffff; box-shadow: 0 0 10px rgba(37, 99, 235, 0.4); } .gs-action-btn.mtf-jump { background: rgba(139, 92, 246, 0.15); color: #a78bfa; border-color: rgba(139, 92, 246, 0.35); } .gs-action-btn.mtf-jump:hover { background: #7c3aed; color: #ffffff; box-shadow: 0 0 10px rgba(124, 58, 237, 0.4); } .gs-action-btn.fut-jump { background: rgba(245, 158, 11, 0.15); color: #fbbf24; border-color: rgba(245, 158, 11, 0.35); } .gs-action-btn.fut-jump:hover { background: #d97706; color: #ffffff; box-shadow: 0 0 10px rgba(217, 119, 6, 0.4); } /* Footer Shortcuts */ .gsearch-modal-footer { display: flex; justify-content: space-between; align-items: center; padding: 10px 18px; background: rgba(15, 23, 42, 0.85); border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 11px; color: #64748b; flex-wrap: wrap; gap: 8px; } .gsearch-footer-shortcuts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .gsearch-footer-shortcuts span { display: inline-flex; align-items: center; gap: 4px; } .gsearch-footer-shortcuts kbd { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 3px; padding: 1px 4px; font-size: 9.5px; font-family: 'JetBrains Mono', monospace; color: #94a3b8; } .gsearch-empty-state { padding: 36px 20px; text-align: center; } /* Light Theme Modal Overrides */ html[data-theme="light"] .gsearch-modal-backdrop, body[data-theme="light"] .gsearch-modal-backdrop { background: rgba(15, 23, 42, 0.45); } html[data-theme="light"] .gsearch-modal-box, body[data-theme="light"] .gsearch-modal-box { background: #ffffff; border: 1px solid #cbd5e1; box-shadow: 0 25px 65px rgba(0, 0, 0, 0.18), 0 0 20px rgba(2, 132, 199, 0.12); } html[data-theme="light"] .gsearch-input-wrap, body[data-theme="light"] .gsearch-input-wrap { background: #ffffff; border-bottom: 1px solid #e2e8f0; } html[data-theme="light"] .gsearch-modal-input, body[data-theme="light"] .gsearch-modal-input { color: #0f172a; } html[data-theme="light"] .gsearch-modal-input::placeholder, body[data-theme="light"] .gsearch-modal-input::placeholder { color: #94a3b8; } html[data-theme="light"] .gsearch-clear-btn, body[data-theme="light"] .gsearch-clear-btn { color: #64748b; } html[data-theme="light"] .gsearch-esc-badge kbd, body[data-theme="light"] .gsearch-esc-badge kbd { background: #f1f5f9; border-color: #cbd5e1; color: #475569; } html[data-theme="light"] .gsearch-filter-pills, body[data-theme="light"] .gsearch-filter-pills { background: #f8fafc; border-bottom: 1px solid #e2e8f0; } html[data-theme="light"] .gsearch-pill, body[data-theme="light"] .gsearch-pill { background: #ffffff; border-color: #cbd5e1; color: #475569; } html[data-theme="light"] .gsearch-pill:hover, body[data-theme="light"] .gsearch-pill:hover { background: #f1f5f9; color: #0f172a; } html[data-theme="light"] .gsearch-pill.active, body[data-theme="light"] .gsearch-pill.active { background: #eff6ff; border-color: #2563eb; color: #1d4ed8; } html[data-theme="light"] .gsearch-item-row:hover, html[data-theme="light"] .gsearch-item-row.selected, body[data-theme="light"] .gsearch-item-row:hover, body[data-theme="light"] .gsearch-item-row.selected { background: #f1f5f9; border-color: #cbd5e1; } html[data-theme="light"] .gs-item-sym, body[data-theme="light"] .gs-item-sym { color: #0f172a; } html[data-theme="light"] .gs-item-name, body[data-theme="light"] .gs-item-name { color: #475569; } html[data-theme="light"] .gs-item-sector, body[data-theme="light"] .gs-item-sector { color: #64748b; } html[data-theme="light"] .gsearch-modal-footer, body[data-theme="light"] .gsearch-modal-footer { background: #f8fafc; border-top: 1px solid #e2e8f0; color: #64748b; } html[data-theme="light"] .gsearch-footer-shortcuts kbd, body[data-theme="light"] .gsearch-footer-shortcuts kbd { background: #ffffff; border-color: #cbd5e1; color: #334155; } /* 3. Stock Hub Cross-Desk Destination Modal */ .gsearch-hub-backdrop { position: fixed; inset: 0; background: rgba(8, 12, 22, 0.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 100005; display: flex; justify-content: center; align-items: center; padding: 20px; animation: gsFadeIn 0.15s ease-out; } .gsearch-hub-box { background: #0f172a; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 16px; width: 100%; max-width: 680px; padding: 22px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65), 0 0 25px rgba(56, 189, 248, 0.15); animation: gsScaleIn 0.18s cubic-bezier(0.16, 1, 0.3, 1); } .gsearch-hub-header { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding-bottom: 14px; margin-bottom: 14px; } .gsearch-hub-close { background: transparent; border: none; font-size: 26px; color: #94a3b8; cursor: pointer; line-height: 1; } .gsearch-hub-close:hover { color: #f8fafc; } .gsearch-hub-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 16px; } .ghub-metric-box { background: rgba(30, 41, 59, 0.5); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; padding: 8px 12px; } .ghub-m-lbl { display: block; font-size: 10px; color: #94a3b8; font-weight: 600; text-transform: uppercase; } .ghub-m-val { display: block; font-size: 13px; font-weight: 800; color: #f8fafc; margin-top: 2px; } /* 4 Action Cards Grid */ .gsearch-hub-cards-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } @media (max-width: 640px) { .gsearch-hub-cards-grid { grid-template-columns: 1fr; } } .gsearch-hub-action-card { border-radius: 12px; padding: 14px; cursor: pointer; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; justify-content: space-between; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(30, 41, 59, 0.4); } .gsearch-hub-action-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35); } .ghub-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .ghub-card-icon { font-size: 20px; } .ghub-card-badge { font-size: 9.5px; font-weight: 800; padding: 2px 6px; border-radius: 4px; letter-spacing: 0.5px; } .ghub-card-title { font-size: 15px; font-weight: 800; margin-bottom: 4px; color: #f8fafc; } .ghub-card-desc { font-size: 11px; line-height: 1.45; color: #94a3b8; margin-bottom: 12px; flex: 1; } .ghub-card-btn { width: 100%; padding: 7px 12px; font-size: 11.5px; font-weight: 700; border-radius: 6px; border: none; cursor: pointer; transition: all 0.15s ease; text-align: center; } /* Card Themes */ .opt-card { border-color: rgba(16, 185, 129, 0.25); background: rgba(16, 185, 129, 0.04); } .opt-card:hover { border-color: #10b981; background: rgba(16, 185, 129, 0.1); box-shadow: 0 8px 24px rgba(16, 185, 129, 0.2); } .opt-card .ghub-card-badge { background: rgba(16, 185, 129, 0.2); color: #34d399; } .opt-btn { background: #10b981; color: #040814; } .opt-card:hover .opt-btn { background: #34d399; } .deliv-card { border-color: rgba(37, 99, 235, 0.25); background: rgba(37, 99, 235, 0.04); } .deliv-card:hover { border-color: #2563eb; background: rgba(37, 99, 235, 0.1); box-shadow: 0 8px 24px rgba(37, 99, 235, 0.2); } .deliv-card .ghub-card-badge { background: rgba(37, 99, 235, 0.2); color: #60a5fa; } .deliv-btn { background: #2563eb; color: #ffffff; } .deliv-card:hover .deliv-btn { background: #3b82f6; } .mtf-card { border-color: rgba(139, 92, 246, 0.25); background: rgba(139, 92, 246, 0.04); } .mtf-card:hover { border-color: #8b5cf6; background: rgba(139, 92, 246, 0.1); box-shadow: 0 8px 24px rgba(139, 92, 246, 0.2); } .mtf-card .ghub-card-badge { background: rgba(139, 92, 246, 0.2); color: #c084fc; } .mtf-btn { background: #7c3aed; color: #ffffff; } .mtf-card:hover .mtf-btn { background: #8b5cf6; } .fut-card { border-color: rgba(245, 158, 11, 0.25); background: rgba(245, 158, 11, 0.04); } .fut-card:hover { border-color: #f59e0b; background: rgba(245, 158, 11, 0.1); box-shadow: 0 8px 24px rgba(245, 158, 11, 0.2); } .fut-card .ghub-card-badge { background: rgba(245, 158, 11, 0.2); color: #fbbf24; } .fut-btn { background: #d97706; color: #ffffff; } .fut-card:hover .fut-btn { background: #f59e0b; } /* Light Theme Stock Hub Overrides */ html[data-theme="light"] .gsearch-hub-backdrop, body[data-theme="light"] .gsearch-hub-backdrop { background: rgba(15, 23, 42, 0.5); } html[data-theme="light"] .gsearch-hub-box, body[data-theme="light"] .gsearch-hub-box { background: #ffffff; border: 1px solid #cbd5e1; box-shadow: 0 25px 70px rgba(0, 0, 0, 0.18); } html[data-theme="light"] .gsearch-hub-header, body[data-theme="light"] .gsearch-hub-header { border-bottom-color: #e2e8f0; } html[data-theme="light"] .ghub-metric-box, body[data-theme="light"] .ghub-metric-box { background: #f8fafc; border-color: #e2e8f0; } html[data-theme="light"] .ghub-m-lbl, body[data-theme="light"] .ghub-m-lbl { color: #64748b; } html[data-theme="light"] .ghub-m-val, body[data-theme="light"] .ghub-m-val { color: #0f172a; } html[data-theme="light"] .gsearch-hub-action-card, body[data-theme="light"] .gsearch-hub-action-card { background: #f8fafc; border-color: #e2e8f0; } html[data-theme="light"] .ghub-card-title, body[data-theme="light"] .ghub-card-title { color: #0f172a; } html[data-theme="light"] .ghub-card-desc, body[data-theme="light"] .ghub-card-desc { color: #475569; } /* ========================================================================== 🔄 INTERACTIVE DYNAMIC TABLE SORTING & FILTER CHIPS STYLING ========================================================================== */ .deliv-table th.deliv-sortable, .drill-sortable, .mtf-sortable { cursor: pointer !important; user-select: none !important; transition: background 0.15s ease, color 0.15s ease; white-space: nowrap; } .deliv-table th.deliv-sortable:hover, .drill-sortable:hover, .mtf-sortable:hover { background: rgba(37, 99, 235, 0.08) !important; color: #2563eb !important; } .deliv-table th.deliv-sortable .sort-icon, .drill-sortable .sort-icon, .mtf-sortable .sort-icon { display: inline-block; margin-left: 4px; font-size: 11px; opacity: 0.45; transition: opacity 0.15s ease, color 0.15s ease; } .deliv-table th.deliv-sortable:hover .sort-icon, .drill-sortable:hover .sort-icon, .mtf-sortable:hover .sort-icon { opacity: 0.9; } .deliv-table th.deliv-sortable.active-sort, .drill-sortable.active-sort, .mtf-sortable.active-sort { background: rgba(37, 99, 235, 0.12) !important; color: #1d4ed8 !important; font-weight: 800 !important; } .deliv-table th.deliv-sortable.active-sort .sort-icon, .drill-sortable.active-sort .sort-icon, .mtf-sortable.active-sort .sort-icon { opacity: 1 !important; color: #2563eb !important; font-weight: 900; } /* Dark Mode Sortable Headers */ [data-theme="dark"] .deliv-table th.deliv-sortable:hover, [data-theme="dark"] .drill-sortable:hover, [data-theme="dark"] .mtf-sortable:hover { background: rgba(56, 189, 248, 0.15) !important; color: #38bdf8 !important; } [data-theme="dark"] .deliv-table th.deliv-sortable.active-sort, [data-theme="dark"] .drill-sortable.active-sort, [data-theme="dark"] .mtf-sortable.active-sort { background: rgba(56, 189, 248, 0.2) !important; color: #38bdf8 !important; } [data-theme="dark"] .deliv-table th.deliv-sortable.active-sort .sort-icon, [data-theme="dark"] .drill-sortable.active-sort .sort-icon, [data-theme="dark"] .mtf-sortable.active-sort .sort-icon { color: #38bdf8 !important; } /* ========================================================================== 🏛️ PROFESSIONAL INSTITUTIONAL DELIVERY DESK REDESIGN ========================================================================== */ /* Sub-Navigation Tabs */ .delivery-subtabs-wrap { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 12px; } .delivery-subtabs { display: inline-flex; align-items: center; background: #f1f5f9; padding: 4px; border-radius: 12px; border: 1px solid #e2e8f0; gap: 4px; } .deliv-subtab-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; font-size: 13px; font-weight: 700; color: #64748b; background: transparent; border: none; border-radius: 8px; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); white-space: nowrap; } .deliv-subtab-btn:hover { color: #0f172a; background: rgba(255, 255, 255, 0.6); } .deliv-subtab-btn.active { color: #ffffff; background: #2563eb; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25); } .delivery-desk-tagline { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: #64748b; } .deliv-tagline-dot { width: 8px; height: 8px; border-radius: 50%; background: #10b981; box-shadow: 0 0 8px rgba(16, 185, 129, 0.6); display: inline-block; } /* Command Hub (Controls Header) */ .deliv-command-hub { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 16px 18px; margin-bottom: 16px; box-shadow: 0 2px 8px -2px rgba(15, 23, 42, 0.05); display: flex; flex-direction: column; gap: 14px; } .deliv-hub-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .deliv-ctrl-cluster { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; } .deliv-date-cluster { flex: 1 1 auto; } .deliv-univ-cluster { flex: 0 0 auto; } /* Field Boxes */ .deliv-field-box { display: flex; flex-direction: column; gap: 5px; } .deliv-field-label { font-size: 10px; font-weight: 800; letter-spacing: 0.5px; color: #64748b; text-transform: uppercase; } .deliv-field-inner { display: flex; align-items: center; background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 8px; padding: 0 10px; height: 38px; transition: all 0.2s ease; box-sizing: border-box; } .deliv-field-inner:focus-within { border-color: #2563eb; background: #ffffff; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); } .deliv-field-icon { font-size: 13px; margin-right: 6px; color: #64748b; } .deliv-ctrl-select, .deliv-ctrl-date { border: none; background: transparent; font-size: 12.5px; font-weight: 700; color: #0f172a; outline: none; cursor: pointer; height: 100%; } .deliv-ctrl-date { width: 135px !important; min-width: 130px !important; font-family: 'JetBrains Mono', monospace, sans-serif; letter-spacing: -0.2px; } .deliv-ctrl-select option { background: #ffffff; color: #0f172a; } /* Quick Date Pills */ .deliv-quick-dates-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .deliv-quick-dates-bar .sm-quick-btn { padding: 8px 12px; font-size: 11.5px; font-weight: 700; border-radius: 8px; border: 1px solid #e2e8f0; background: #f8fafc; color: #475569; cursor: pointer; transition: all 0.15s ease; white-space: nowrap; height: 38px; box-sizing: border-box; } .deliv-quick-dates-bar .sm-quick-btn:hover { background: #f1f5f9; color: #1e293b; border-color: #cbd5e1; } .deliv-quick-dates-bar .sm-quick-btn.active { background: #2563eb; color: #ffffff; border-color: #2563eb; box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25); } /* Primary Action Button (Scan Deliveries) */ .deliv-primary-action-btn { display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; height: 38px; background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); color: #ffffff; font-size: 13px; font-weight: 700; border: none; border-radius: 8px; cursor: pointer; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25); transition: all 0.2s ease; white-space: nowrap; box-sizing: border-box; } .deliv-primary-action-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35); background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); } .deliv-primary-action-btn:active { transform: translateY(0); } /* Tier 2: Search Container & Live Status */ .deliv-hub-search-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .deliv-search-container { position: relative; flex: 1; max-width: 640px; } .deliv-search-input-group { display: flex; align-items: center; background: #f8fafc; border: 1.5px solid #cbd5e1; border-radius: 10px; padding: 3px 4px 3px 12px; transition: all 0.2s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); } .deliv-search-input-group:focus-within { background: #ffffff; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12), 0 2px 8px rgba(0, 0, 0, 0.05); } .deliv-search-lens { font-size: 15px; margin-right: 8px; color: #64748b; } .deliv-search-field { flex: 1; border: none; background: transparent; font-size: 13px; font-weight: 600; color: #0f172a; outline: none; padding: 6px 0; min-width: 140px; } .deliv-search-field::placeholder { color: #94a3b8; font-weight: 500; } .deliv-inspect-action-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; font-size: 12.5px; font-weight: 700; background: #0f172a; color: #ffffff; border: none; border-radius: 8px; cursor: pointer; white-space: nowrap; transition: all 0.2s ease; } .deliv-inspect-action-btn:hover { background: #1e293b; transform: translateY(-1px); } /* Verified Status Badge */ .deliv-status-container { flex: 0 0 auto; } .deliv-verified-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 8px; font-size: 12px; font-weight: 700; color: #065f46; white-space: nowrap; } /* Major Indices Delivery Absorption Benchmark Strip */ .deliv-indices-strip-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04); } .deliv-indices-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; flex-wrap: wrap; gap: 8px; } .deliv-indices-title-wrap { display: flex; align-items: center; gap: 8px; } .deliv-sector-badge { background: rgba(37, 99, 235, 0.08); color: #2563eb; font-size: 9.5px; font-weight: 800; padding: 2px 7px; border-radius: 4px; letter-spacing: 0.4px; } .deliv-indices-title { margin: 0; font-size: 12.5px; font-weight: 800; color: #0f172a; letter-spacing: -0.2px; } .deliv-indices-hint-pill { font-size: 10.5px; font-weight: 600; color: #64748b; background: #f8fafc; padding: 3px 8px; border-radius: 12px; border: 1px solid #e2e8f0; } .deliv-indices-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(154px, 1fr)); gap: 10px; } /* Institutional Modern Index Benchmark Card */ .deliv-benchmark-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 12px; cursor: pointer; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; gap: 6px; position: relative; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03); } .deliv-benchmark-card:hover { transform: translateY(-2px); border-color: #cbd5e1; box-shadow: 0 6px 16px -2px rgba(15, 23, 42, 0.08); } .deliv-benchmark-card.selected { border: 1.5px solid #2563eb; background: rgba(37, 99, 235, 0.03); box-shadow: 0 2px 8px rgba(37, 99, 235, 0.12); } .deliv-benchmark-card.nifty-flag:not(.selected) { border-color: #93c5fd; background: rgba(59, 130, 246, 0.02); } .deliv-card-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; min-height: 20px; } .deliv-card-title { font-size: 12px; font-weight: 700; color: #0f172a; display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.2px; flex: 1; min-width: 0; } .deliv-star { color: #f59e0b; font-size: 11px; flex-shrink: 0; } .deliv-stance-pill { font-size: 8.5px; font-weight: 800; padding: 2px 5px; border-radius: 4px; letter-spacing: 0.3px; text-transform: uppercase; white-space: nowrap; flex-shrink: 0; line-height: 1.2; } .deliv-stance-pill.accum { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; } .deliv-stance-pill.distrib { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; } .deliv-stance-pill.neutral { background: #f8fafc; color: #64748b; border: 1px solid #e2e8f0; } .deliv-card-mid { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; margin-top: 1px; } .deliv-hero-pct { font-size: 16px; font-weight: 800; color: #0f172a; font-family: 'JetBrains Mono', monospace; letter-spacing: -0.3px; } .deliv-bm-delta { font-size: 11px; font-weight: 700; font-family: 'JetBrains Mono', monospace; } .deliv-delta-up { color: #059669; } .deliv-delta-down { color: #dc2626; } .deliv-delta-flat { color: #64748b; } .deliv-card-subline { display: flex; justify-content: space-between; align-items: center; font-size: 10px; color: #64748b; margin-top: 3px; padding-top: 5px; border-top: 1px solid #f1f5f9; } .deliv-hero-cr { font-size: 10.5px; font-weight: 700; color: #059669; font-family: 'JetBrains Mono', monospace; } .deliv-30d-lbl { font-size: 10px; color: #64748b; } .deliv-30d-lbl strong { color: #334155; font-weight: 700; font-family: 'JetBrains Mono', monospace; } /* Refined Filter Presets Bar */ .deliv-filter-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .filter-pill-group { display: flex; gap: 6px; flex-wrap: wrap; } .filter-pill { padding: 6px 14px; font-size: 11.5px; font-weight: 600; border-radius: 20px; border: 1px solid #e2e8f0; background: #ffffff; color: #475569; transition: all 0.15s ease; cursor: pointer; display: inline-flex; align-items: center; white-space: nowrap; } .filter-pill:hover { background: #f8fafc; color: #0f172a; border-color: #cbd5e1; } .filter-pill.active { background: #0f172a; color: #ffffff; border-color: #0f172a; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18); } .pill-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; } .pill-dot.green { background: #10b981; } .pill-dot.red { background: #ef4444; } .deliv-hint-text { font-size: 11px; color: #94a3b8; font-weight: 500; } /* ================================================================ Institutional Clean FII / DII Desk Styles ================================================================ */ .fii-dii-subtabs { display: flex; gap: 8px; margin-bottom: 16px; border-bottom: 1px solid #e2e8f0; padding-bottom: 10px; flex-wrap: wrap; } .fii-dii-subtab-btn { padding: 8px 18px; font-size: 12.5px; font-weight: 700; border-radius: 8px; border: 1px solid #e2e8f0; background: #ffffff; color: #64748b; cursor: pointer; transition: all 0.15s ease; white-space: nowrap; } .fii-dii-subtab-btn:hover { background: #f8fafc; color: #0f172a; border-color: #cbd5e1; } .fii-dii-subtab-btn.active { background: #0f172a !important; color: #ffffff !important; border-color: #0f172a !important; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.15); } .fii-controls-card { margin-bottom: 14px; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 14px; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03); } .fii-controls-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; } .fii-controls-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .fii-controls-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .fii-period-switcher, .fii-view-switcher { display: inline-flex; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 8px; padding: 2px; gap: 2px; } .fii-period-btn, .fii-view-btn { padding: 5px 12px; font-size: 11px; font-weight: 700; border: none; background: transparent; color: #64748b; border-radius: 6px; cursor: pointer; transition: all 0.15s ease; white-space: nowrap; } .fii-period-btn:hover, .fii-view-btn:hover { color: #0f172a; } .fii-period-btn.active, .fii-view-btn.active { background: #ffffff; color: #0f172a; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1); } .fii-range-label { font-size: 11.5px; color: #64748b; font-weight: 600; display: flex; align-items: center; gap: 6px; } .fii-ctrl-select { font-size: 11.5px; padding: 5px 10px; font-weight: 600; border-radius: 6px; border: 1px solid #cbd5e1; background: #ffffff; color: #0f172a; outline: none; cursor: pointer; } .p1-fii-kpi-row, .fii-deriv-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 16px; } .fii-kpi-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 13px 15px; display: flex; flex-direction: column; gap: 5px; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.02); transition: all 0.15s ease; } .fii-kpi-card:hover { border-color: #cbd5e1; box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.06); } .fii-kpi-head { display: flex; justify-content: space-between; align-items: center; } .fii-kpi-lbl { font-size: 10.5px; font-weight: 800; color: #64748b; letter-spacing: 0.5px; text-transform: uppercase; } .fii-kpi-pill { font-size: 9.5px; font-weight: 800; padding: 2px 7px; border-radius: 4px; letter-spacing: 0.3px; } .fii-kpi-pill.bullish { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; } .fii-kpi-pill.bearish { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; } .fii-kpi-pill.neutral { background: #f8fafc; color: #64748b; border: 1px solid #e2e8f0; } .fii-kpi-val { font-size: 20px; font-weight: 800; font-family: 'JetBrains Mono', monospace; letter-spacing: -0.3px; color: #059669; } .fii-kpi-val.bearish { color: #dc2626; } .fii-kpi-val.neutral { color: #0f172a; } .fii-kpi-sub { font-size: 11px; color: #64748b; margin-top: 2px; } .fii-kpi-sub strong { color: #334155; font-family: 'JetBrains Mono', monospace; } .fii-deriv-subtabs { display: flex; gap: 8px; margin-bottom: 14px; border-bottom: 1px solid #e2e8f0; padding-bottom: 10px; flex-wrap: wrap; } .fii-deriv-subtab-btn { padding: 7px 16px; font-size: 12px; font-weight: 700; border-radius: 6px; border: 1px solid #e2e8f0; background: #ffffff; color: #475569; cursor: pointer; transition: all 0.15s ease; white-space: nowrap; } .fii-deriv-subtab-btn:hover { background: #f8fafc; color: #0f172a; border-color: #cbd5e1; } .fii-deriv-subtab-btn.active { background: #0f172a !important; color: #ffffff !important; border-color: #0f172a !important; box-shadow: 0 1px 4px rgba(15, 23, 42, 0.15); } /* Dark Theme Overrides */ [data-theme="dark"] .delivery-subtabs { background: #0b1329; border-color: #1e293b; } [data-theme="dark"] .deliv-subtab-btn { color: #94a3b8; } [data-theme="dark"] .deliv-subtab-btn:hover { color: #f8fafc; background: rgba(255, 255, 255, 0.05); } [data-theme="dark"] .deliv-subtab-btn.active { color: #ffffff; background: #2563eb; } [data-theme="dark"] .deliv-command-hub, [data-theme="dark"] .deliv-indices-strip-card { background: #0b1329; border-color: #1e293b; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .deliv-field-inner, [data-theme="dark"] .deliv-search-input-group { background: #070d1e; border-color: #334155; } [data-theme="dark"] .deliv-field-inner:focus-within, [data-theme="dark"] .deliv-search-input-group:focus-within { border-color: #3b82f6; background: #0b1329; } [data-theme="dark"] .deliv-ctrl-select, [data-theme="dark"] .deliv-ctrl-date, [data-theme="dark"] .deliv-search-field, [data-theme="dark"] .deliv-indices-title { color: #f8fafc; } [data-theme="dark"] .deliv-ctrl-select option { background: #0b1329; color: #f8fafc; } [data-theme="dark"] .deliv-quick-dates-bar .sm-quick-btn { background: #070d1e; border-color: #1e293b; color: #94a3b8; } [data-theme="dark"] .deliv-quick-dates-bar .sm-quick-btn:hover { background: #1e293b; color: #f8fafc; } [data-theme="dark"] .deliv-quick-dates-bar .sm-quick-btn.active { background: #2563eb; color: #ffffff; } [data-theme="dark"] .deliv-inspect-action-btn { background: #1e293b; border: 1px solid #334155; } [data-theme="dark"] .deliv-inspect-action-btn:hover { background: #334155; } [data-theme="dark"] .deliv-verified-badge { background: rgba(16, 185, 129, 0.12); border-color: rgba(16, 185, 129, 0.25); color: #34d399; } [data-theme="dark"] .deliv-indices-icon-box { background: rgba(59, 130, 246, 0.15); } [data-theme="dark"] .deliv-indices-hint-pill { background: #070d1e; border-color: #1e293b; color: #94a3b8; } [data-theme="dark"] .deliv-benchmark-card { background: #070d1e; border-color: #1e293b; } [data-theme="dark"] .deliv-benchmark-card:hover { border-color: #3b82f6; box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .deliv-benchmark-card.selected { border-color: #3b82f6; background: linear-gradient(180deg, rgba(59, 130, 246, 0.12) 0%, rgba(59, 130, 246, 0.02) 100%); } [data-theme="dark"] .deliv-benchmark-card.nifty-flag:not(.selected) { border-color: rgba(59, 130, 246, 0.4); } [data-theme="dark"] .deliv-card-title { color: #f8fafc; } [data-theme="dark"] .deliv-hero-pct { color: #60a5fa; } [data-theme="dark"] .deliv-progress-track { background: #1e293b; } [data-theme="dark"] .deliv-card-subline { color: #94a3b8; } [data-theme="dark"] .deliv-card-subline strong { color: #f1f5f9; } [data-theme="dark"] .deliv-stance-pill.neutral { background: #1e293b; color: #94a3b8; border-color: #334155; } [data-theme="dark"] .deliv-stance-pill.accum { background: rgba(16, 185, 129, 0.15); color: #34d399; border-color: rgba(16, 185, 129, 0.3); } [data-theme="dark"] .deliv-stance-pill.distrib { background: rgba(239, 68, 68, 0.15); color: #f87171; border-color: rgba(239, 68, 68, 0.3); } /* ============================================================ COMPREHENSIVE MOBILE RESPONSIVE FIXES - TradersDesk.in Applied: Auto-generated by fix_mobile_comprehensive.py ============================================================ */ /* --- Global Mobile Resets --- */ @media (max-width: 768px) { * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); tap-highlight-color: rgba(0, 0, 0, 0); } body { overflow-x: hidden; -webkit-text-size-adjust: 100%; } /* All canvas elements responsive */ canvas { width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 200px; } /* All table containers must scroll */ .table-scroll, .option-chain-container, .upstox-chain-table-container, .mtf-table-wrap, .wpcr-table-wrap, .sm-table-wrap, .deliv-table-wrap, [class*="table-wrap"], [class*="table-container"], [class*="table-scroll"], .data-table-wrapper, .futures-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; max-width: 100vw !important; } /* Ensure ALL tables don't overflow */ table { min-width: max-content; } /* ---- HEADER / BRAND BAR ---- */ .inst-header { padding: 6px 10px !important; gap: 6px !important; } .inst-brand-name { font-size: 14px !important; } .inst-brand-tag { display: none !important; } /* ---- NAV BAR MOBILE ---- */ .inst-nav { padding: 0 6px !important; gap: 2px !important; scroll-snap-type: x mandatory; } .inst-nav-btn { padding: 6px 10px !important; font-size: 11.5px !important; white-space: nowrap !important; scroll-snap-align: start; min-height: 36px !important; } /* ---- MAIN CONTENT PADDING ---- */ .inst-main, #mainContent, .main-content { padding: 8px !important; } /* ---- KPI CARDS STRIP ---- */ .inst-kpi-strip { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; gap: 8px !important; padding-bottom: 6px !important; scroll-snap-type: x mandatory; } .inst-kpi-card { min-width: 130px !important; flex-shrink: 0 !important; scroll-snap-align: start; padding: 8px 10px !important; } .inst-kpi-label { font-size: 10px !important; } .inst-kpi-value { font-size: 16px !important; } /* ---- SECTION TABS (sub-nav tabs) ---- */ .section-tabs, .fii-dii-subtabs, .deliv-subtabs, .delivery-subtabs, [class*="subtabs"], [class*="sub-tabs"] { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; gap: 6px !important; padding-bottom: 4px !important; border-bottom: 1px solid var(--border-subtle) !important; scroll-snap-type: x mandatory; } .section-tab-btn, .fii-subtab-btn, .deliv-subtab-btn, [class*="subtab-btn"] { flex-shrink: 0 !important; white-space: nowrap !important; padding: 6px 12px !important; font-size: 12px !important; scroll-snap-align: start; min-height: 34px !important; } /* ---- CONTROL BANDS / FILTER BARS ---- */ .options-control-band, .sm-controls, .ctrl-bar, .filter-bar, [class*="control-band"], [class*="ctrl-bar"], [class*="filter-bar"], .deliv-command-hub, .wpcr-controls { padding: 10px !important; border-radius: 8px !important; gap: 8px !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; } .ctrl-group { flex-wrap: wrap !important; gap: 8px !important; } .ctrl-group label, .ctrl-group select, .ctrl-group input, .ctrl-group button { font-size: 12px !important; min-height: 34px !important; } /* ---- SELECTS & INPUTS TOUCH FRIENDLY ---- */ select, input[type="text"], input[type="number"], input[type="date"], input[type="search"] { min-height: 36px !important; font-size: 14px !important; /* iOS needs 16px to prevent zoom, 14px is compromise */ border-radius: 6px !important; } /* ---- BUTTONS ---- */ button, .btn, [class*="btn"] { min-height: 36px !important; touch-action: manipulation !important; } /* ---- OPTION CHAIN SPECIFIC ---- */ .option-chain-container { overflow: hidden !important; border-radius: 8px !important; } .table-scroll { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; max-height: 75vh !important; } .option-chain-table td, .option-chain-table th { padding: 5px 6px !important; font-size: 10px !important; } /* ---- UPSTOX OPTION CHAIN ---- */ .upstox-chain-table-container { max-height: 60vh !important; overflow: auto !important; -webkit-overflow-scrolling: touch !important; } /* ---- CHART CONTAINERS ---- */ .chart-wrap, .chart-container, .nifty-chart-card, .wpcr-chart-section, [class*="chart-wrap"], [class*="chart-container"] { overflow: hidden !important; border-radius: 8px !important; } /* ---- MODAL / OVERLAY ---- */ .modal, .modal-dialog, .settings-panel, [class*="modal-dialog"] { width: 95vw !important; max-width: 95vw !important; max-height: 90vh !important; overflow-y: auto !important; margin: 5vh auto !important; border-radius: 12px !important; } .modal-body, [class*="modal-body"] { overflow-y: auto !important; max-height: 70vh !important; -webkit-overflow-scrolling: touch !important; } /* ---- FUTURES DESK ---- */ .futures-matrix, .futures-grid, [class*="futures-matrix"], [class*="futures-grid"] { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; } /* ---- MTF ANALYTICS ---- */ .mtf-grid, [class*="mtf-grid"] { grid-template-columns: 1fr !important; } /* ---- DELIVERY ANALYTICS ---- */ .deliv-benchmark-grid, .deliv-indices-strip { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; } /* ---- FII DII SECTION ---- */ .fii-dii-subtabs { flex-wrap: nowrap !important; overflow-x: auto !important; } /* ---- WPCR SECTION ---- */ .wpcr-chart-section { padding: 8px !important; } /* ---- ADMIN & SETTINGS FORMS ---- */ .settings-form, [class*="settings-form"], .admin-form { display: flex !important; flex-direction: column !important; gap: 12px !important; } .form-row, [class*="form-row"] { flex-direction: column !important; gap: 8px !important; } /* ---- FOOTER ---- */ .inst-footer, footer { padding: 12px !important; text-align: center !important; } .footer-links { flex-wrap: wrap !important; justify-content: center !important; gap: 8px !important; } } /* --- Extra Small Mobile (360-480px) --- */ @media (max-width: 480px) { /* Brand */ .inst-logo-img { height: 24px !important; } /* Reduce KPI value size */ .inst-kpi-value { font-size: 14px !important; } /* Canvas minimum heights */ canvas { min-height: 180px !important; } /* Option chain even more compact */ .option-chain-table td, .option-chain-table th { padding: 4px 5px !important; font-size: 9.5px !important; } /* Table text smaller */ table td, table th { padding: 4px 6px !important; font-size: 11px !important; } /* Delivery cards grid to single column */ .deliv-benchmark-grid { grid-template-columns: 1fr !important; } /* Control bars full width items */ .ctrl-group select, .ctrl-group input { width: 100% !important; max-width: 100% !important; } /* Tab buttons smaller */ .inst-nav-btn { padding: 5px 8px !important; font-size: 11px !important; } } /* --- Touch device improvements --- */ @media (hover: none) and (pointer: coarse) { /* Increase touch targets */ .inst-nav-btn, .tab-btn, button, .btn, select, input[type="text"], input[type="date"], input[type="number"] { min-height: 40px !important; cursor: pointer !important; } /* Remove hover-only effects that block touch */ .inst-nav-item:hover .inst-dropdown { display: none !important; /* Let only mobile-open class show it on touch */ } /* Table rows larger for touch */ table tbody tr { min-height: 36px !important; } /* Remove problematic hover states on touch */ .inst-dd-item:hover, .deliv-benchmark-card:hover { transform: none !important; } } /* ============================================================ 6-DOT APP LAUNCHER / ALL MENUS & SUBMENUS DIRECTORY ============================================================ */ .inst-dot-menu-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; background: rgba(56, 189, 248, 0.12); border: 1px solid rgba(56, 189, 248, 0.35); border-radius: 8px; color: #38bdf8; font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.15s ease; user-select: none; min-height: 32px; } .inst-dot-menu-btn:hover { background: rgba(56, 189, 248, 0.22); border-color: #38bdf8; color: #ffffff; transform: translateY(-1px); } .inst-dot-menu-btn:active { transform: scale(0.97); } .dot-menu-icon { display: block; flex-shrink: 0; } .dot-menu-backdrop { position: fixed; inset: 0; z-index: 99999; background: rgba(2, 6, 23, 0.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; animation: dotMenuFadeIn 0.2s ease-out; } @keyframes dotMenuFadeIn { from { opacity: 0; } to { opacity: 1; } } .dot-menu-sheet { background: #090e1a; border: 1px solid rgba(56, 189, 248, 0.3); border-radius: 16px; width: 100%; max-width: 640px; max-height: 88vh; display: flex; flex-direction: column; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.05); overflow: hidden; animation: dotMenuSlideUp 0.22s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes dotMenuSlideUp { from { transform: translateY(24px) scale(0.97); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } [data-theme="light"] .dot-menu-sheet { background: #ffffff; border-color: #cbd5e1; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18); } .dot-menu-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.02); } [data-theme="light"] .dot-menu-header { border-bottom-color: #e2e8f0; background: #f8fafc; } .dot-menu-brand { display: flex; align-items: center; gap: 10px; } .dot-menu-header-title { font-size: 15px; font-weight: 800; color: #f1f5f9; letter-spacing: -0.2px; } [data-theme="light"] .dot-menu-header-title { color: #0f172a; } .dot-menu-header-subtitle { font-size: 11px; color: #94a3b8; } .dot-menu-close { background: transparent; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; color: #94a3b8; font-size: 22px; line-height: 1; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.15s; } .dot-menu-close:hover { background: rgba(239, 68, 68, 0.15); border-color: rgba(239, 68, 68, 0.4); color: #ef4444; } .dot-menu-quick-strip { display: flex; gap: 8px; padding: 10px 18px; background: rgba(0, 0, 0, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } [data-theme="light"] .dot-menu-quick-strip { background: #f1f5f9; border-bottom-color: #e2e8f0; } .dot-menu-quick-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 10px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; color: #cbd5e1; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s; } [data-theme="light"] .dot-menu-quick-btn { background: #ffffff; border-color: #cbd5e1; color: #334155; } .dot-menu-quick-btn:hover { background: rgba(56, 189, 248, 0.15); border-color: #38bdf8; color: #38bdf8; } .dot-menu-content { padding: 14px 18px; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 14px; } .dot-menu-section { display: flex; flex-direction: column; gap: 6px; } .dot-menu-section-header { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 800; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.5px; padding: 0 4px; } [data-theme="light"] .dot-menu-section-header { color: #64748b; } .dot-menu-main-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; text-decoration: none; transition: all 0.15s ease; } [data-theme="light"] .dot-menu-main-item { background: #f8fafc; border-color: #e2e8f0; } .dot-menu-main-item:hover { background: rgba(56, 189, 248, 0.08); border-color: rgba(56, 189, 248, 0.3); transform: translateX(2px); } .dot-menu-item-left { display: flex; align-items: center; gap: 12px; } .dot-menu-item-icon { font-size: 20px; } .dot-menu-item-title { font-size: 13.5px; font-weight: 700; color: #f8fafc; } [data-theme="light"] .dot-menu-item-title { color: #0f172a; } .dot-menu-item-desc { font-size: 11px; color: #94a3b8; margin-top: 2px; } .dot-menu-arrow { color: #64748b; font-weight: 700; } .dot-sub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; } @media (max-width: 480px) { .dot-sub-grid { grid-template-columns: 1fr; } } .dot-sub-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 8px; text-decoration: none; transition: all 0.15s ease; } [data-theme="light"] .dot-sub-item { background: #ffffff; border-color: #f1f5f9; } .dot-sub-item:hover { background: rgba(56, 189, 248, 0.08); border-color: rgba(56, 189, 248, 0.3); transform: translateX(2px); } .dot-sub-icon { font-size: 16px; margin-top: 1px; flex-shrink: 0; } .dot-sub-title { font-size: 12px; font-weight: 700; color: #e2e8f0; } [data-theme="light"] .dot-sub-title { color: #1e293b; } .dot-sub-desc { font-size: 10.5px; color: #94a3b8; line-height: 1.3; margin-top: 1px; } .dot-menu-footer { padding: 10px 18px; text-align: center; font-size: 10.5px; color: #64748b; border-top: 1px solid rgba(255, 255, 255, 0.06); background: rgba(0, 0, 0, 0.15); } [data-theme="light"] .dot-menu-footer { border-top-color: #e2e8f0; background: #f8fafc; } /* Desktop: HIDE 6-dot menu button completely */ @media (min-width: 861px) { .inst-dot-menu-btn, #mobileDotMenuBtn, #p2DotMenuBtn, #roDotMenuBtn { display: none !important; } } /* Mobile: SHOW 6-dot menu button */ @media (max-width: 860px) { .inst-dot-menu-btn, #mobileDotMenuBtn, #p2DotMenuBtn, #roDotMenuBtn { display: inline-flex !important; } /* Disable backdrop-filter on header on mobile to prevent containing block trap for fixed dropdowns */ .inst-header { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: #080c17 !important; } html[data-theme="light"] .inst-header, body[data-theme="light"] .inst-header { background: #ffffff !important; border-bottom: 1px solid #e2e8f0 !important; } } /* ============================================================ MOBILE RESPONSIVE UI & SUB-MENU PERFECTION FIX ============================================================ */ @media (max-width: 860px) { /* 1. On mobile, completely hide old desktop hover dropdowns to avoid clipping or sudden hiding */ .inst-dropdown, .inst-nav-item.has-dropdown .inst-dropdown, .inst-nav-item.has-dropdown.mobile-open .inst-dropdown { display: none !important; } /* 2. Full-Screen Edge-to-Edge Native Mobile Navigation Drawer */ .dot-menu-backdrop { padding: 0 !important; align-items: stretch !important; justify-content: stretch !important; background: rgba(2, 6, 23, 0.88) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; } .dot-menu-sheet { width: 100vw !important; max-width: 100vw !important; height: 100vh !important; max-height: 100vh !important; border-radius: 0 !important; border: none !important; display: flex !important; flex-direction: column !important; animation: none !important; } .dot-menu-header { padding: 12px 16px !important; flex: 0 0 auto !important; } .dot-menu-quick-strip { padding: 8px 14px !important; flex: 0 0 auto !important; } .dot-menu-content { flex: 1 1 auto !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; padding: 12px 14px 60px 14px !important; gap: 12px !important; } .dot-sub-grid { grid-template-columns: 1fr !important; gap: 6px !important; } .dot-sub-item { padding: 10px 12px !important; min-height: 48px !important; box-sizing: border-box !important; } .dot-sub-title { font-size: 13px !important; font-weight: 700 !important; } .dot-sub-desc { font-size: 11px !important; line-height: 1.3 !important; } .dot-menu-close { width: 38px !important; height: 38px !important; font-size: 26px !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* 3. Brand bar clean 1-row layout on mobile */ .inst-brand-bar { padding: 8px 12px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: nowrap !important; gap: 8px !important; row-gap: 0 !important; width: 100% !important; box-sizing: border-box !important; } .inst-brand-left { order: 1 !important; flex: 0 1 auto !important; display: flex !important; align-items: center !important; gap: 6px !important; visibility: visible !important; } .inst-brand { display: flex !important; align-items: center !important; text-decoration: none !important; visibility: visible !important; } .inst-brand-logo-img { height: 25px !important; max-width: 140px !important; width: auto !important; display: block !important; visibility: visible !important; object-fit: contain !important; } .inst-brand-logo-dark { display: block !important; } .inst-brand-logo-light { display: none !important; } html[data-theme="light"] .inst-brand-logo-dark, body[data-theme="light"] .inst-brand-logo-dark, [data-theme="light"] .inst-brand-logo-dark, body.theme-light .inst-brand-logo-dark, body.white-theme .inst-brand-logo-dark { display: none !important; } html[data-theme="light"] .inst-brand-logo-light, body[data-theme="light"] .inst-brand-logo-light, [data-theme="light"] .inst-brand-logo-light, body.theme-light .inst-brand-logo-light, body.white-theme .inst-brand-logo-light { display: block !important; visibility: visible !important; } .inst-right-controls { order: 2 !important; flex: 0 0 auto !important; display: flex !important; align-items: center !important; gap: 6px !important; } /* Hide redundant verbose items on mobile to keep layout clean & uncluttered */ #apiStatus, .inst-api-status, .status.inst-api-status, .inst-terminal-tag, .inst-global-search-trigger, .inst-market-clock-wrap, #btnTopRefresh { display: none !important; } /* Compact utility buttons on mobile */ .inst-util-btn { padding: 6px 8px !important; min-height: 32px !important; font-size: 11px !important; } .util-text, .auth-btn-text, .theme-btn-text { display: none !important; } .theme-toggle-btn { padding: 6px 8px !important; min-height: 32px !important; font-size: 11px !important; display: inline-flex !important; } .inst-dot-menu-btn { display: inline-flex !important; padding: 5px 9px !important; min-height: 32px !important; font-size: 11.5px !important; gap: 4px !important; } .inst-market-pill, .inst-clock-pill { padding: 3px 8px !important; font-size: 10.5px !important; } /* Navigation bar compact on mobile */ .inst-nav { padding: 4px 8px 6px 8px !important; gap: 5px !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; } .inst-nav::-webkit-scrollbar { display: none !important; } .inst-nav-btn { padding: 6px 10px !important; font-size: 11.5px !important; min-height: 32px !important; white-space: nowrap !important; flex-shrink: 0 !important; } /* ========================================================== ALL IN-DESK SUBTABS PERFECTION (NEVER CLIP OR CUT OFF) ========================================================== */ .fut-subtabs-nav, .options-subnav-bar, .opt-vis-view-tabs, .fii-dii-subtabs, .fii-deriv-subtabs, .delivery-subtabs, .tools-subnav-bar, .fut-filter-ribbon, .fut-signal-ribbon, .page2-suite-tabs, .ro-pills-row { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; gap: 6px !important; padding-bottom: 6px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .fut-subtabs-nav::-webkit-scrollbar, .options-subnav-bar::-webkit-scrollbar, .opt-vis-view-tabs::-webkit-scrollbar, .fii-dii-subtabs::-webkit-scrollbar, .fii-deriv-subtabs::-webkit-scrollbar, .delivery-subtabs::-webkit-scrollbar, .tools-subnav-bar::-webkit-scrollbar, .fut-filter-ribbon::-webkit-scrollbar, .fut-signal-ribbon::-webkit-scrollbar, .page2-suite-tabs::-webkit-scrollbar, .ro-pills-row::-webkit-scrollbar { display: none !important; } .fut-tab-btn, .opt-subtab-btn, .opt-vis-vtab, .fii-dii-subtab-btn, .fii-deriv-subtabs .ctrl-btn, .deliv-subtab-btn, .tool-subtab-btn, .fut-sec-pill, .fut-sig-pill, .page2-suite-btn, .ro-filter-pill { white-space: nowrap !important; flex-shrink: 0 !important; } /* Option Visualizer Header Stacking on Mobile */ .opt-vis-header { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; } .opt-vis-actions { display: flex !important; justify-content: space-between !important; width: 100% !important; } /* FII/DII Switchers Flex Shrink Protection */ .fii-period-switcher, .fii-view-switcher { flex-shrink: 0 !important; } /* Light Theme backgrounds for in-desk bars */ html[data-theme="light"] .fut-subtabs-nav, body[data-theme="light"] .fut-subtabs-nav { background: #f1f5f9 !important; border-color: #cbd5e1 !important; } html[data-theme="light"] .fut-tab-btn, body[data-theme="light"] .fut-tab-btn { background: #ffffff !important; border-color: #cbd5e1 !important; color: #1e293b !important; } html[data-theme="light"] .fut-tab-btn.active, body[data-theme="light"] .fut-tab-btn.active { background: #0284c7 !important; border-color: #0284c7 !important; color: #ffffff !important; } } /* Light Mode Overrides for #mobileDotMenuModal */ html[data-theme="light"] .dot-menu-backdrop, body[data-theme="light"] .dot-menu-backdrop { background: rgba(15, 23, 42, 0.65) !important; } html[data-theme="light"] .dot-menu-sheet, body[data-theme="light"] .dot-menu-sheet { background: #ffffff !important; border: 1px solid #cbd5e1 !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25) !important; } html[data-theme="light"] .dot-menu-header, body[data-theme="light"] .dot-menu-header { background: #f8fafc !important; border-bottom: 1px solid #e2e8f0 !important; } html[data-theme="light"] .dot-menu-header-title, body[data-theme="light"] .dot-menu-header-title { color: #0f172a !important; } html[data-theme="light"] .dot-menu-header-subtitle, body[data-theme="light"] .dot-menu-header-subtitle { color: #64748b !important; } html[data-theme="light"] .dot-menu-close, body[data-theme="light"] .dot-menu-close { background: #f1f5f9 !important; border-color: #cbd5e1 !important; color: #475569 !important; } html[data-theme="light"] .dot-menu-quick-strip, body[data-theme="light"] .dot-menu-quick-strip { background: #f1f5f9 !important; border-bottom: 1px solid #e2e8f0 !important; } html[data-theme="light"] .dot-menu-quick-btn, body[data-theme="light"] .dot-menu-quick-btn { background: #ffffff !important; border: 1px solid #cbd5e1 !important; color: #334155 !important; } html[data-theme="light"] .dot-menu-section-header, body[data-theme="light"] .dot-menu-section-header { color: #475569 !important; } html[data-theme="light"] .dot-menu-main-item, body[data-theme="light"] .dot-menu-main-item { background: #f8fafc !important; border: 1px solid #e2e8f0 !important; } html[data-theme="light"] .dot-menu-item-title, body[data-theme="light"] .dot-menu-item-title { color: #0f172a !important; } html[data-theme="light"] .dot-menu-item-desc, body[data-theme="light"] .dot-menu-item-desc { color: #64748b !important; } html[data-theme="light"] .dot-sub-item, body[data-theme="light"] .dot-sub-item { background: #f8fafc !important; border: 1px solid #e2e8f0 !important; } html[data-theme="light"] .dot-sub-title, body[data-theme="light"] .dot-sub-title { color: #0f172a !important; } html[data-theme="light"] .dot-sub-desc, body[data-theme="light"] .dot-sub-desc { color: #64748b !important; } html[data-theme="light"] .dot-menu-footer, body[data-theme="light"] .dot-menu-footer { background: #f8fafc !important; border-top: 1px solid #e2e8f0 !important; color: #64748b !important; } /* Highlight pulse when section is focused from nav click */ .dot-section-highlight { outline: 2px solid #38bdf8 !important; border-radius: 10px !important; background: rgba(56, 189, 248, 0.08) !important; transition: all 0.3s ease !important; } html[data-theme="light"] .inst-dot-menu-btn, body[data-theme="light"] .inst-dot-menu-btn { background: #f1f5f9 !important; border: 1px solid #cbd5e1 !important; color: #0284c7 !important; } html[data-theme="light"] .inst-dot-menu-btn:hover, body[data-theme="light"] .inst-dot-menu-btn:hover { background: #e2e8f0 !important; border-color: #0284c7 !important; color: #0369a1 !important; } /* Dark Theme Enhancements for FII/DII and Delivery */ [data-theme="dark"] .filter-pill, [data-theme="dark"] .fii-dii-subtab-btn, [data-theme="dark"] .fii-deriv-subtab-btn { background: #070d1e; border-color: #1e293b; color: #94a3b8; } [data-theme="dark"] .filter-pill:hover, [data-theme="dark"] .fii-dii-subtab-btn:hover, [data-theme="dark"] .fii-deriv-subtab-btn:hover { background: #0f172a; color: #f8fafc; border-color: #334155; } [data-theme="dark"] .filter-pill.active, [data-theme="dark"] .fii-dii-subtab-btn.active, [data-theme="dark"] .fii-deriv-subtab-btn.active { background: #2563eb !important; color: #ffffff !important; border-color: #2563eb !important; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35); } [data-theme="dark"] .fii-controls-card, [data-theme="dark"] .fii-kpi-card { background: #0b1329; border-color: #1e293b; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .fii-period-switcher, [data-theme="dark"] .fii-view-switcher { background: #070d1e; border-color: #1e293b; } [data-theme="dark"] .fii-period-btn.active, [data-theme="dark"] .fii-view-btn.active { background: #1e293b; color: #f8fafc; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .fii-ctrl-select { background: #070d1e; border-color: #334155; color: #f8fafc; } [data-theme="dark"] .fii-kpi-val.neutral { color: #f8fafc; } [data-theme="dark"] .fii-kpi-sub strong { color: #cbd5e1; } #seoDynamicCrawlContent, .seo-crawler-content { display: none !important; } /* Google Mobile SEO & Lighthouse Audit Optimizations */ @media (max-width: 860px) { /* 1. Ensure legible font sizes: prevent text < 12px from failing Lighthouse mobile legible font audit */ .p2-badge, .inst-nav-badge, .dot-sub-desc, .inst-stat-label, .stat-label, .metric-label, .card-sub, .tbl-cell-sub, small, .text-xs { font-size: max(12px, 0.75rem) !important; } /* 2. Accessible Tap Targets: Ensure interactive buttons & links are at least 44px tap area on mobile */ .inst-nav-btn, .inst-dot-menu-btn, .dot-sub-item, .dot-menu-main-item, .tab-btn, .seo-pill-btn, .gsearch-hub-action-card button, .footer-links a { min-height: 44px; display: inline-flex; align-items: center; } } /* ========================================================================== 📱 Mobile Bottom Navigation Bar & Institutional Watchlist Buttons ========================================================================== */ .deliv-star-btn, .gs-star-btn { background: transparent; border: none; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 4px; transition: transform 0.12s ease, color 0.12s ease; user-select: none; -webkit-user-select: none; } .deliv-star-btn:hover, .gs-star-btn:hover { transform: scale(1.25); color: #eab308 !important; } .deliv-star-btn.starred, .gs-star-btn.starred { color: #eab308 !important; } .mobile-bottom-nav, .mobile-bottom-dock { display: none !important; } @media (max-width: 768px) { body { padding-bottom: 64px !important; } .mobile-bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; height: 56px; background: rgba(15, 23, 42, 0.95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4); z-index: 9999; align-items: center; justify-content: space-around; padding: 0 4px; } html[data-theme="light"] .mobile-bottom-nav { background: rgba(255, 255, 255, 0.95); border-top-color: #cbd5e1; box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.08); } .mob-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; background: transparent; border: none; color: #94a3b8; padding: 6px 0; cursor: pointer; transition: all 0.15s ease; text-decoration: none; -webkit-tap-highlight-color: transparent; } html[data-theme="light"] .mob-nav-item { color: #64748b; } .mob-nav-icon { font-size: 18px; line-height: 1.2; margin-bottom: 2px; } .mob-nav-label { font-size: 10px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; } .mob-nav-item:hover, .mob-nav-item.active { color: #38bdf8 !important; } html[data-theme="light"] .mob-nav-item.active { color: #2563eb !important; } .mob-nav-item.active .mob-nav-icon { transform: scale(1.15); } } /* ================================================================ FUTURE INTRADAY PRICE vs OI — Clean Dual-Theme Institutional Desk ================================================================ */ .fut-intraday-wrap { display: flex; flex-direction: column; gap: 12px; padding: 0 2px; } /* Horizontal Index Selector Ribbon (No Cards, Sleek Segmented Buttons) */ .fut-intraday-index-ribbon { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 8px 12px; background: #0b1325; border: 1px solid #1e2f52; border-radius: 8px; } [data-theme="light"] .fut-intraday-index-ribbon { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 1px 3px rgba(0,0,0,0.04); } .fut-intraday-idx-btn { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 6px; border: 1px solid #1e2f52; background: #0d172e; color: #f8fafc; cursor: pointer; transition: all 0.15s ease; font-size: 12px; white-space: nowrap; user-select: none; } .fut-intraday-idx-btn:hover { border-color: #3b82f6; background: #111c36; } .fut-intraday-idx-btn.active { border-color: #3b82f6; background: rgba(59, 130, 246, 0.16); font-weight: 700; box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.4); } [data-theme="light"] .fut-intraday-idx-btn { background: #f8fafc; border-color: #cbd5e1; color: #0f172a; } [data-theme="light"] .fut-intraday-idx-btn:hover { background: #f1f5f9; border-color: #2563eb; } [data-theme="light"] .fut-intraday-idx-btn.active { background: #eff6ff; border-color: #2563eb; color: #1d4ed8; box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.3); } .fut-intraday-idx-btn .pill-sym { font-weight: 700; letter-spacing: 0.3px; } .fut-intraday-idx-btn .pill-ltp { font-family: 'JetBrains Mono', monospace; font-weight: 700; } .fut-intraday-idx-btn .pill-chg { font-size: 11px; font-weight: 700; padding: 1px 5px; border-radius: 3px; } /* Controls Bar */ .fut-intraday-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 12px 14px; background: #0b1325; border: 1px solid #1e2f52; border-radius: 8px; } [data-theme="light"] .fut-intraday-controls { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 1px 3px rgba(0,0,0,0.04); } .fut-intraday-header-left { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 220px; } #futIntradayTitle { font-weight: 800; font-size: 17px; color: #f8fafc; } [data-theme="light"] #futIntradayTitle { color: #0f172a; } #futIntradayLtp { font-size: 24px; font-weight: 800; font-family: 'JetBrains Mono', monospace; color: #ffffff; } [data-theme="light"] #futIntradayLtp { color: #0f172a; } /* Stats Cards (Adaptive Light/Dark Grid) */ .fut-intraday-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; } .fut-intraday-stat-item { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; background: #0d172e; border: 1px solid #1e2f52; border-radius: 6px; } [data-theme="light"] .fut-intraday-stat-item { background: #f8fafc; border-color: #e2e8f0; } .fut-intraday-stat-label { font-size: 11px; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.5px; } [data-theme="light"] .fut-intraday-stat-label { color: #64748b; } .fut-intraday-stat-val { font-size: 14px; font-weight: 800; font-family: 'JetBrains Mono', monospace; color: #f8fafc; } [data-theme="light"] .fut-intraday-stat-val { color: #0f172a; } .fut-intraday-stat-sub { font-size: 10px; font-weight: 600; color: #64748b; } /* Detailed Intraday Table */ .fut-intraday-table-wrap { overflow-x: auto; border-radius: 8px; border: 1px solid #1e2f52; background: #0b1325; } [data-theme="light"] .fut-intraday-table-wrap { border-color: #e2e8f0; background: #ffffff; box-shadow: 0 1px 3px rgba(0,0,0,0.04); } .fut-intraday-table { width: 100%; border-collapse: collapse; font-size: 12px; font-family: 'JetBrains Mono', monospace; } .fut-intraday-table th { padding: 9px 10px; background: #0f1b34; color: #94a3b8; text-align: right; font-weight: 700; font-size: 11px; white-space: nowrap; position: sticky; top: 0; z-index: 2; border-bottom: 1px solid #1e2f52; } .fut-intraday-table th:first-child { text-align: left; } [data-theme="light"] .fut-intraday-table th { background: #f1f5f9; color: #475569; border-bottom-color: #cbd5e1; } .fut-intraday-table td { padding: 7px 10px; text-align: right; border-bottom: 1px solid #15223c; white-space: nowrap; color: #cbd5e1; } .fut-intraday-table td:first-child { text-align: left; font-weight: 700; color: #f8fafc; } [data-theme="light"] .fut-intraday-table td { border-bottom-color: #f1f5f9; color: #1e293b; } [data-theme="light"] .fut-intraday-table td:first-child { color: #0f172a; } .fut-intraday-table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.015); } [data-theme="light"] .fut-intraday-table tbody tr:nth-child(even) td { background: #f8fafc; } .fut-intraday-table tr:hover td { background: rgba(56, 189, 248, 0.06) !important; } [data-theme="light"] .fut-intraday-table tr:hover td { background: #f1f5f9 !important; } /* Regime Badges */ .fut-intraday-table .regime-badge { display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 4px; letter-spacing: 0.3px; white-space: nowrap; } @media (max-width: 768px) { .fut-intraday-idx-btn { font-size: 11px; padding: 5px 10px; } .fut-intraday-controls { gap: 8px; } } /* ========================================================================== FUTURE VS OPEN INTEREST (PRICE VS OI) TERMINAL DUAL-THEME STYLING ========================================================================== */ .pvo-terminal-wrap { display: flex; flex-direction: column; gap: 16px; width: 100%; margin: 0 auto; } /* Header & Meta */ .pvo-header-row { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 18px 20px; border-radius: 12px; border: 1px solid var(--border-color, #334155); background: var(--card-bg, #1e293b); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); } html[data-theme="light"] .pvo-header-row { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); } .pvo-badge-tag { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 0.8px; padding: 3px 8px; border-radius: 6px; background: rgba(56, 189, 248, 0.15); color: #38bdf8; margin-bottom: 6px; } html[data-theme="light"] .pvo-badge-tag { background: #eff6ff; color: #2563eb; } .pvo-title { margin: 0 0 6px 0; font-size: 22px; font-weight: 800; color: var(--text-color, #f8fafc); letter-spacing: -0.3px; } html[data-theme="light"] .pvo-title { color: #0f172a; } .pvo-subtitle { margin: 0; font-size: 13px; color: var(--text-muted, #94a3b8); max-width: 820px; line-height: 1.5; } html[data-theme="light"] .pvo-subtitle { color: #64748b; } .pvo-header-meta { display: flex; align-items: center; gap: 10px; } .pvo-live-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 20px; background: rgba(16, 185, 129, 0.15); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3); } .pvo-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #10b981; box-shadow: 0 0 8px #10b981; animation: pvoPulse 1.8s infinite; } @keyframes pvoPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.85); } } .pvo-timestamp { font-size: 12px; font-weight: 600; color: var(--text-muted, #94a3b8); padding: 5px 10px; background: rgba(0, 0, 0, 0.2); border-radius: 6px; } html[data-theme="light"] .pvo-timestamp { background: #f1f5f9; color: #475569; } .pvo-btn-refresh { padding: 6px 14px; border-radius: 6px; border: 1px solid var(--border-color, #334155); background: var(--bg-hover, #334155); color: var(--text-color, #f8fafc); font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; } .pvo-btn-refresh:hover { background: #38bdf8; color: #0f172a; } html[data-theme="light"] .pvo-btn-refresh { background: #f8fafc; border-color: #cbd5e1; color: #1e293b; } html[data-theme="light"] .pvo-btn-refresh:hover { background: #2563eb; color: #ffffff; } /* Selector Bar: Indices & Stock Search */ .pvo-selector-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 10px 14px; border-radius: 10px; background: var(--card-bg, #1e293b); border: 1px solid var(--border-color, #334155); } html[data-theme="light"] .pvo-selector-bar { background: #ffffff; border-color: #e2e8f0; } .pvo-indices-ribbon { display: flex; align-items: center; gap: 6px; overflow-x: auto; padding: 2px 0; } .pvo-idx-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 8px; border: 1px solid var(--border-color, #334155); background: rgba(15, 23, 42, 0.4); color: var(--text-muted, #94a3b8); font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: all 0.18s ease; } .pvo-idx-btn:hover { background: rgba(56, 189, 248, 0.12); color: #38bdf8; border-color: rgba(56, 189, 248, 0.4); } .pvo-idx-btn.active { background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%); color: #ffffff; border-color: #38bdf8; box-shadow: 0 2px 10px rgba(2, 132, 199, 0.4); } html[data-theme="light"] .pvo-idx-btn { background: #f8fafc; border-color: #cbd5e1; color: #475569; } html[data-theme="light"] .pvo-idx-btn:hover { background: #eff6ff; color: #2563eb; border-color: #93c5fd; } html[data-theme="light"] .pvo-idx-btn.active { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); color: #ffffff; border-color: #2563eb; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25); } .pvo-idx-lot { font-size: 10px; opacity: 0.75; font-weight: 500; } .pvo-stock-select-wrap { display: flex; align-items: center; gap: 8px; position: relative; min-width: 260px; } .pvo-search-icon { position: absolute; left: 10px; font-size: 12px; opacity: 0.6; } .pvo-stock-input { width: 100%; padding: 8px 12px 8px 30px; border-radius: 8px; border: 1px solid var(--border-color, #334155); background: rgba(15, 23, 42, 0.5); color: var(--text-color, #f8fafc); font-size: 12px; font-weight: 600; outline: none; transition: all 0.2s ease; } .pvo-stock-input:focus { border-color: #38bdf8; box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2); } html[data-theme="light"] .pvo-stock-input { background: #f8fafc; border-color: #cbd5e1; color: #0f172a; } html[data-theme="light"] .pvo-stock-input:focus { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15); } /* Toolbar Row: Mode, Granularity, Expiry */ .pvo-toolbar-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 10px 14px; border-radius: 10px; background: var(--card-bg, #1e293b); border: 1px solid var(--border-color, #334155); } html[data-theme="light"] .pvo-toolbar-row { background: #ffffff; border-color: #e2e8f0; } .pvo-mode-group { display: flex; align-items: center; background: rgba(15, 23, 42, 0.5); padding: 3px; border-radius: 8px; border: 1px solid var(--border-color, #334155); } html[data-theme="light"] .pvo-mode-group { background: #f1f5f9; border-color: #e2e8f0; } .pvo-mode-btn { padding: 6px 14px; border-radius: 6px; border: none; background: transparent; color: var(--text-muted, #94a3b8); font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.15s ease; } .pvo-mode-btn.active { background: #0284c7; color: #ffffff; box-shadow: 0 2px 6px rgba(2, 132, 199, 0.35); } html[data-theme="light"] .pvo-mode-btn { color: #64748b; } html[data-theme="light"] .pvo-mode-btn.active { background: #2563eb; color: #ffffff; box-shadow: 0 2px 6px rgba(37, 99, 235, 0.2); } .pvo-granularity-group { display: flex; align-items: center; gap: 4px; } .pvo-gran-label { font-size: 11px; font-weight: 700; color: var(--text-muted, #94a3b8); margin-right: 4px; } .pvo-tf-btn, .pvo-day-btn { padding: 5px 10px; border-radius: 6px; border: 1px solid var(--border-color, #334155); background: rgba(15, 23, 42, 0.4); color: var(--text-muted, #94a3b8); font-size: 11px; font-weight: 700; cursor: pointer; transition: all 0.15s ease; } .pvo-tf-btn:hover, .pvo-day-btn:hover { color: #38bdf8; border-color: #38bdf8; } .pvo-tf-btn.active, .pvo-day-btn.active { background: #38bdf8; color: #0f172a; border-color: #38bdf8; } html[data-theme="light"] .pvo-tf-btn, html[data-theme="light"] .pvo-day-btn { background: #f8fafc; border-color: #cbd5e1; color: #475569; } html[data-theme="light"] .pvo-tf-btn:hover, html[data-theme="light"] .pvo-day-btn:hover { color: #2563eb; border-color: #2563eb; } html[data-theme="light"] .pvo-tf-btn.active, html[data-theme="light"] .pvo-day-btn.active { background: #2563eb; color: #ffffff; border-color: #2563eb; } .pvo-expiry-pill { padding: 5px 12px; border-radius: 6px; background: rgba(56, 189, 248, 0.1); border: 1px solid rgba(56, 189, 248, 0.25); color: #38bdf8; font-size: 12px; font-weight: 600; } html[data-theme="light"] .pvo-expiry-pill { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; } /* 5 Institutional Stat Cards */ .pvo-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; } .pvo-stat-card { padding: 14px 16px; border-radius: 10px; background: var(--card-bg, #1e293b); border: 1px solid var(--border-color, #334155); transition: all 0.2s ease; } html[data-theme="light"] .pvo-stat-card { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); } .pvo-stat-label { font-size: 10.5px; font-weight: 800; letter-spacing: 0.6px; color: var(--text-muted, #94a3b8); margin-bottom: 6px; } html[data-theme="light"] .pvo-stat-label { color: #64748b; } .pvo-stat-val { font-size: 20px; font-weight: 800; color: var(--text-color, #f8fafc); margin-bottom: 4px; font-variant-numeric: tabular-nums; } html[data-theme="light"] .pvo-stat-val { color: #0f172a; } .pvo-stat-val.oi-highlight { color: #38bdf8; } html[data-theme="light"] .pvo-stat-val.oi-highlight { color: #2563eb; } .pvo-stat-sub { font-size: 11.5px; font-weight: 600; color: var(--text-muted, #94a3b8); } html[data-theme="light"] .pvo-stat-sub { color: #64748b; } /* Chart Controls & Replay Box */ .pvo-chart-controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 10px 14px; border-radius: 10px; background: var(--card-bg, #1e293b); border: 1px solid var(--border-color, #334155); } html[data-theme="light"] .pvo-chart-controls { background: #ffffff; border-color: #e2e8f0; } .pvo-chart-toggles { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .pvo-toggle-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--text-color, #f8fafc); cursor: pointer; user-select: none; } html[data-theme="light"] .pvo-toggle-label { color: #334155; } .pvo-toggle-label input[type="checkbox"] { cursor: pointer; } .pvo-toggle-indicator { display: inline-block; width: 12px; height: 3px; border-radius: 2px; } .price-ind { background: #38bdf8; } html[data-theme="light"] .price-ind { background: #0284c7; } .oi-ind { background: #a855f7; } html[data-theme="light"] .oi-ind { background: #7c3aed; } .vwap-ind { background: #fbbf24; } html[data-theme="light"] .vwap-ind { background: #d97706; } .regime-ind { background: #10b981; } .pvo-replay-box { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 8px; background: rgba(15, 23, 42, 0.4); border: 1px solid var(--border-color, #334155); } html[data-theme="light"] .pvo-replay-box { background: #f8fafc; border-color: #cbd5e1; } .pvo-replay-btn, .pvo-replay-reset { padding: 5px 12px; border-radius: 6px; border: 1px solid #0284c7; background: #0284c7; color: #ffffff; font-size: 11px; font-weight: 700; cursor: pointer; transition: all 0.15s ease; } .pvo-replay-btn:hover { background: #0369a1; } html[data-theme="light"] .pvo-replay-btn { background: #2563eb; border-color: #2563eb; } html[data-theme="light"] .pvo-replay-btn:hover { background: #1d4ed8; } .pvo-replay-reset { padding: 5px 8px; background: transparent; color: var(--text-muted, #94a3b8); border-color: var(--border-color, #334155); } .pvo-replay-slider { width: 140px; cursor: pointer; } .pvo-replay-time { font-size: 11px; font-weight: 700; color: var(--text-muted, #94a3b8); white-space: nowrap; } .pvo-replay-speed { padding: 3px 6px; border-radius: 4px; font-size: 11px; font-weight: 700; background: rgba(15, 23, 42, 0.6); color: var(--text-color, #f8fafc); border: 1px solid var(--border-color, #334155); } html[data-theme="light"] .pvo-replay-speed { background: #ffffff; color: #0f172a; border-color: #cbd5e1; } /* Dual-Axis Chart Card */ .pvo-chart-card { display: flex; flex-direction: column; padding: 14px 18px; border-radius: 12px; background: var(--card-bg, #1e293b); border: 1px solid var(--border-color, #334155); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); } html[data-theme="light"] .pvo-chart-card { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04); } .pvo-chart-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } .pvo-chart-legend { display: flex; align-items: center; gap: 16px; font-size: 12px; font-weight: 700; } .pvo-legend-item { display: inline-flex; align-items: center; gap: 6px; color: var(--text-color, #f8fafc); } html[data-theme="light"] .pvo-legend-item { color: #334155; } .legend-swatch { width: 14px; height: 3px; border-radius: 2px; } .price-swatch { background: #94a3b8; } html[data-theme="light"] .price-swatch { background: #1e293b; } .oi-swatch { background: #38bdf8; } html[data-theme="light"] .oi-swatch { background: #2563eb; } .vwap-swatch { background: #fbbf24; } html[data-theme="light"] .vwap-swatch { background: #d97706; } .pvo-chart-hint { font-size: 11px; color: var(--text-muted, #94a3b8); font-weight: 500; } .pvo-canvas-wrapper { position: relative; width: 100%; height: 520px; } #pvoChartCanvas { width: 100%; height: 100%; display: block; } /* Tooltip HUD */ .pvo-tooltip { position: absolute; pointer-events: none; z-index: 50; padding: 10px 14px; border-radius: 8px; background: rgba(15, 23, 42, 0.94); border: 1px solid #38bdf8; color: #f8fafc; font-size: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); backdrop-filter: blur(8px); min-width: 220px; line-height: 1.6; } html[data-theme="light"] .pvo-tooltip { background: rgba(255, 255, 255, 0.96); border-color: #2563eb; color: #0f172a; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); } /* Matrix Guide Section */ .pvo-matrix-section, .pvo-table-section { display: flex; flex-direction: column; border-radius: 10px; background: var(--card-bg, #1e293b); border: 1px solid var(--border-color, #334155); overflow: hidden; } html[data-theme="light"] .pvo-matrix-section, html[data-theme="light"] .pvo-table-section { background: #ffffff; border-color: #e2e8f0; } .pvo-section-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; cursor: pointer; background: rgba(15, 23, 42, 0.3); user-select: none; transition: background 0.15s ease; } .pvo-section-header:hover { background: rgba(15, 23, 42, 0.5); } html[data-theme="light"] .pvo-section-header { background: #f8fafc; } html[data-theme="light"] .pvo-section-header:hover { background: #f1f5f9; } .pvo-sec-title { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 700; color: var(--text-color, #f8fafc); } html[data-theme="light"] .pvo-sec-title { color: #0f172a; } .pvo-sec-tag { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 12px; background: rgba(56, 189, 248, 0.15); color: #38bdf8; } html[data-theme="light"] .pvo-sec-tag { background: #eff6ff; color: #2563eb; } .pvo-toggle-icon { font-size: 12px; color: var(--text-muted, #94a3b8); } .pvo-matrix-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; padding: 16px; } .pvo-matrix-card { padding: 14px 16px; border-radius: 8px; border: 1px solid var(--border-color, #334155); background: rgba(15, 23, 42, 0.35); transition: all 0.2s ease; } .pvo-matrix-card.highlight { border-color: #38bdf8; box-shadow: 0 0 14px rgba(56, 189, 248, 0.3); transform: translateY(-2px); } html[data-theme="light"] .pvo-matrix-card { background: #f8fafc; border-color: #e2e8f0; } html[data-theme="light"] .pvo-matrix-card.highlight { border-color: #2563eb; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15); } .pm-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .pm-name { font-size: 13px; color: var(--text-color, #f8fafc); } html[data-theme="light"] .pm-name { color: #0f172a; } .pm-pill { margin-left: auto; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 4px; } .lb-pill { background: rgba(16, 185, 129, 0.15); color: #10b981; } .sb-pill { background: rgba(239, 68, 68, 0.15); color: #ef4444; } .sc-pill { background: rgba(6, 182, 212, 0.15); color: #06b6d4; } .lu-pill { background: rgba(245, 158, 11, 0.15); color: #f59e0b; } .pm-desc { margin: 0; font-size: 11.5px; color: var(--text-muted, #94a3b8); line-height: 1.45; } html[data-theme="light"] .pm-desc { color: #64748b; } /* Time-Series Table Drawer */ .pvo-table-wrap { padding: 12px 16px; overflow-x: auto; max-height: 480px; } .pvo-data-table { width: 100%; border-collapse: collapse; font-size: 12px; } .pvo-data-table th { padding: 9px 12px; border-bottom: 1px solid var(--border-color, #334155); color: var(--text-muted, #94a3b8); font-weight: 700; white-space: nowrap; background: var(--card-bg, #1e293b); position: sticky; top: 0; z-index: 5; } html[data-theme="light"] .pvo-data-table th { background: #ffffff; color: #64748b; border-color: #e2e8f0; } .pvo-data-table td { padding: 8px 12px; border-bottom: 1px solid rgba(51, 65, 85, 0.4); color: var(--text-color, #f8fafc); white-space: nowrap; font-variant-numeric: tabular-nums; } html[data-theme="light"] .pvo-data-table td { color: #0f172a; border-color: #f1f5f9; } .pvo-data-table tbody tr:hover { background: rgba(56, 189, 248, 0.06); } html[data-theme="light"] .pvo-data-table tbody tr:hover { background: #f8fafc; } /* ============================================================================== NATIVE MOBILE APP REDESIGN — FUTURES DESK, INTRADAY & PRICE vs OI Active strictly on mobile screens (max-width: 768px). Desktop is 100% untouched. ============================================================================== */ @media (max-width: 768px) { /* 1. Header Command Bar: Clean, Compact Native Mobile Feel */ .fut-top-bar { padding: 10px 12px !important; gap: 8px !important; border-radius: 10px !important; margin-bottom: 8px !important; } .fut-subheading { display: none !important; /* Hide long 3-line static description paragraph on mobile */ } .fut-brand-icon { display: none !important; /* Save space on mobile */ } .fut-heading { font-size: 14px !important; flex-wrap: wrap !important; gap: 6px !important; margin: 0 !important; } .fut-count-pill { font-size: 9.5px !important; padding: 2px 6px !important; } .fut-controls-group { width: 100% !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; } .fut-refresh-select { display: none !important; /* Hide verbose select dropdown on mobile */ } .fut-pulse-pill { padding: 4px 8px !important; font-size: 10.5px !important; } .fut-refresh-btn { padding: 5px 12px !important; font-size: 11px !important; border-radius: 6px !important; } .fut-search-box { width: 100% !important; margin-bottom: 4px !important; } .fut-search-box input { font-size: 11.5px !important; padding: 6px 10px 6px 28px !important; } /* 2. Sub-Tabs Navigation Ribbon: Sleek Horizontal Native Pill Slider */ .fut-subtabs-nav { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; gap: 6px !important; padding: 4px 2px !important; margin: 0 0 10px 0 !important; } .fut-subtabs-nav::-webkit-scrollbar { display: none !important; } .fut-tab-btn { flex-shrink: 0 !important; padding: 6px 13px !important; font-size: 11.5px !important; font-weight: 700 !important; border-radius: 20px !important; white-space: nowrap !important; } /* 3. FUTURE INTRADAY VIEW: Mobile Overhaul */ .fut-intraday-wrap { gap: 10px !important; } .fut-intraday-index-ribbon { flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; padding: 6px 8px !important; gap: 6px !important; border-radius: 8px !important; } .fut-intraday-index-ribbon::-webkit-scrollbar { display: none !important; } .fut-intraday-idx-btn { flex-shrink: 0 !important; padding: 5px 10px !important; font-size: 11px !important; gap: 6px !important; border-radius: 6px !important; } .fut-intraday-idx-btn .pill-sym { font-size: 11px !important; } .fut-intraday-idx-btn .pill-ltp { font-size: 11px !important; } .fut-intraday-idx-btn .pill-chg { font-size: 10px !important; padding: 1px 4px !important; } .fut-intraday-controls { padding: 10px 12px !important; gap: 8px !important; border-radius: 10px !important; } .fut-intraday-header-left { width: 100% !important; min-width: auto !important; gap: 2px !important; } #futIntradayTitle { font-size: 15px !important; } #futIntradayLtp { font-size: 22px !important; } #futIntradayChg { font-size: 12px !important; } #futIntradayControlBar { width: 100% !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 6px !important; } #futIntradayIntervalBar { gap: 3px !important; } .fut-oi-b { padding: 4px 7px !important; font-size: 11px !important; } #futIntradayDateSel { min-width: 100px !important; max-width: 130px !important; padding: 4px 6px !important; font-size: 11px !important; } #futIntradayRefreshBtn { padding: 4px 8px !important; font-size: 11px !important; } #futIntradayHelpMsg { display: none !important; /* Hide verbose counter text */ } /* Compact 3-Column Micro Stats Grid on Mobile */ .fut-intraday-stats-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; margin-bottom: 4px !important; } .fut-intraday-stat-item { padding: 6px 4px !important; border-radius: 6px !important; text-align: center !important; } .fut-intraday-stat-label { font-size: 9px !important; margin-bottom: 2px !important; letter-spacing: 0.3px !important; } .fut-intraday-stat-val { font-size: 12px !important; font-weight: 800 !important; line-height: 1.2 !important; } .fut-intraday-stat-sub { font-size: 8.5px !important; line-height: 1.1 !important; } /* Table: Sticky Time Column + Touch Optimized */ .fut-intraday-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; border-radius: 8px !important; max-height: 480px !important; } .fut-intraday-table { font-size: 11px !important; } .fut-intraday-table th, .fut-intraday-table td { padding: 6px 8px !important; white-space: nowrap !important; } .fut-intraday-table th:first-child, .fut-intraday-table td:first-child { position: sticky !important; left: 0 !important; z-index: 4 !important; background: #0b1325 !important; box-shadow: 2px 0 6px rgba(0, 0, 0, 0.4) !important; } [data-theme="light"] .fut-intraday-table th:first-child, [data-theme="light"] .fut-intraday-table td:first-child { background: #ffffff !important; box-shadow: 2px 0 6px rgba(0, 0, 0, 0.08) !important; } .fut-intraday-table .regime-badge { font-size: 9.5px !important; padding: 2px 6px !important; } /* 4. FUTURE VS OPEN INTEREST (PRICE vs OI): Mobile Overhaul */ .pvo-terminal-wrap { gap: 10px !important; } .pvo-header-row { padding: 12px 14px !important; gap: 8px !important; border-radius: 10px !important; } .pvo-subtitle, .pvo-badge-tag { display: none !important; /* Hide giant paragraphs and decorative tags */ } .pvo-title { font-size: 16px !important; margin: 0 !important; } .pvo-header-meta { width: 100% !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 6px !important; } .pvo-live-badge { font-size: 10.5px !important; padding: 4px 8px !important; } .pvo-timestamp { font-size: 10.5px !important; padding: 4px 8px !important; } .pvo-btn-refresh { padding: 4px 10px !important; font-size: 11px !important; } /* Selector Bar */ .pvo-selector-bar { padding: 8px 10px !important; gap: 8px !important; border-radius: 8px !important; } .pvo-indices-ribbon { width: 100% !important; flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; gap: 6px !important; } .pvo-indices-ribbon::-webkit-scrollbar { display: none !important; } .pvo-idx-btn { flex-shrink: 0 !important; padding: 5px 10px !important; font-size: 11px !important; border-radius: 6px !important; } .pvo-stock-select-wrap { width: 100% !important; min-width: auto !important; } .pvo-stock-input { font-size: 11.5px !important; padding: 7px 10px 7px 28px !important; } /* Toolbar: Mode & Intervals */ .pvo-toolbar-row { padding: 8px 10px !important; gap: 8px !important; border-radius: 8px !important; } .pvo-mode-group { width: 100% !important; display: flex !important; gap: 4px !important; background: rgba(15, 23, 42, 0.4) !important; } .pvo-mode-btn { flex: 1 !important; text-align: center !important; padding: 7px 8px !important; font-size: 11.5px !important; border-radius: 6px !important; } .pvo-granularity-group { width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; justify-content: flex-start !important; gap: 4px !important; padding: 2px 0 !important; } .pvo-granularity-group::-webkit-scrollbar { display: none !important; } .pvo-tf-btn, .pvo-day-btn { flex-shrink: 0 !important; padding: 4px 9px !important; font-size: 10.5px !important; } .pvo-expiry-pill { padding: 4px 8px !important; font-size: 10.5px !important; width: 100% !important; text-align: center !important; } /* Stat Cards on Mobile: 2x2 Grid + 1 Full Width */ .pvo-stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; } .pvo-stat-card { padding: 10px 12px !important; border-radius: 8px !important; } .pvo-stat-card:last-child { grid-column: span 2 !important; } .pvo-stat-label { font-size: 9.5px !important; margin-bottom: 2px !important; } .pvo-stat-val { font-size: 16px !important; margin-bottom: 2px !important; } .pvo-stat-sub { font-size: 10px !important; } /* Dual-Axis Chart on Mobile */ .pvo-chart-card { padding: 10px 12px !important; border-radius: 10px !important; } .pvo-chart-header { flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; margin-bottom: 6px !important; } .pvo-chart-legend { gap: 10px !important; font-size: 10.5px !important; flex-wrap: wrap !important; } .pvo-chart-hint { display: none !important; } .pvo-canvas-wrapper { height: 300px !important; } /* Chart Controls & Replay on Mobile */ .pvo-chart-controls { padding: 8px 10px !important; flex-direction: column !important; align-items: stretch !important; gap: 8px !important; border-radius: 8px !important; } .pvo-chart-toggles { gap: 8px !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; padding: 2px 0 !important; } .pvo-chart-toggles::-webkit-scrollbar { display: none !important; } .pvo-toggle-label { flex-shrink: 0 !important; font-size: 11px !important; } .pvo-replay-box { width: 100% !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 6px !important; } .pvo-replay-slider { flex: 1 !important; width: auto !important; } .pvo-replay-time { font-size: 10.5px !important; } /* Matrix Guide: 1 Column on Mobile */ .pvo-matrix-cards { grid-template-columns: 1fr !important; gap: 8px !important; padding: 10px !important; } .pvo-matrix-card { padding: 10px 12px !important; } .pm-desc { font-size: 10.5px !important; } /* Table on Mobile: Sticky First Column */ .pvo-table-wrap { padding: 6px !important; max-height: 420px !important; } .pvo-data-table { font-size: 11px !important; } .pvo-data-table th, .pvo-data-table td { padding: 6px 7px !important; white-space: nowrap !important; } .pvo-data-table th:first-child, .pvo-data-table td:first-child { position: sticky !important; left: 0 !important; z-index: 4 !important; background: var(--card-bg, #1e293b) !important; box-shadow: 2px 0 6px rgba(0, 0, 0, 0.4) !important; } html[data-theme="light"] .pvo-data-table th:first-child, html[data-theme="light"] .pvo-data-table td:first-child { background: #ffffff !important; box-shadow: 2px 0 6px rgba(0, 0, 0, 0.08) !important; } } /* Feature Flag Controlled Elements (Hidden by default when disabled) */ [data-feature-flag], .inst-dd-item[data-feature-flag], a.inst-dd-item[data-feature-flag], .fut-tab-btn[data-feature-flag], a.fut-tab-btn[data-feature-flag] { display: none !important; } .inst-dd-item[data-feature-flag].feature-active, a.inst-dd-item[data-feature-flag].feature-active { display: flex !important; } .fut-tab-btn[data-feature-flag].feature-active, a.fut-tab-btn[data-feature-flag].feature-active { display: inline-flex !important; } /* ============================================================ MOBILE NAV FIX — All changes strictly inside max-width: 860px ============================================================ */ @media (max-width: 860px) { /* ── MOBILE NAV FIX: Hide horizontal nav row below logo ── The 6-dot hamburger Menu button in the header handles all navigation on mobile. The desktop nav row is redundant. */ .inst-nav, nav.inst-nav, #mainInstNav { display: none !important; } } @media (max-width: 768px) { /* ── Mobile Search Center Button — subtle highlight ── */ .mob-nav-search-center { position: relative; } .mob-nav-search-center .mob-nav-icon { font-size: 22px !important; } .mob-nav-search-center:hover, .mob-nav-search-center.active { color: #38bdf8 !important; } /* ── Mobile Global Search Modal — Full Screen Optimized ── */ .gsearch-modal-backdrop { padding-top: 0 !important; padding-left: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; align-items: flex-start !important; background: rgba(8, 12, 22, 0.92) !important; } .gsearch-modal-box { width: 100% !important; max-width: 100% !important; height: 100dvh !important; height: 100vh !important; border-radius: 0 !important; border: none !important; display: flex; flex-direction: column; overflow: hidden; } /* ── Search Input Row — Large & Easy to Tap ── */ .gsearch-input-wrap { padding: 14px 16px !important; gap: 10px !important; flex-shrink: 0; border-bottom: 1px solid rgba(255,255,255,0.1) !important; min-height: 60px; } .gsearch-modal-input { font-size: 16px !important; /* Prevents iOS auto-zoom on focus */ font-weight: 500 !important; height: 44px !important; line-height: 44px !important; } .gsearch-input-icon { font-size: 20px !important; } /* ── ESC badge replaced by visible Close text on mobile ── */ .gsearch-esc-badge { min-width: 44px; min-height: 44px; display: flex !important; align-items: center; justify-content: center; background: rgba(255,255,255,0.08); border-radius: 8px; padding: 0 10px !important; } .gsearch-esc-badge kbd { font-size: 12px !important; padding: 3px 8px !important; background: transparent !important; border: none !important; color: #94a3b8 !important; font-family: inherit !important; } .gsearch-esc-badge::after { content: "Close"; font-size: 12px; color: #94a3b8; margin-left: 4px; } /* ── Filter Pills — Horizontally Scrollable ── */ .gsearch-filter-pills { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; gap: 6px !important; padding: 10px 14px !important; flex-shrink: 0; border-bottom: 1px solid rgba(255,255,255,0.06); } .gsearch-filter-pills::-webkit-scrollbar { display: none; } .gsearch-pill { white-space: nowrap !important; flex-shrink: 0 !important; min-height: 36px !important; padding: 6px 14px !important; font-size: 12px !important; border-radius: 20px !important; } /* ── Results List — Full Remaining Height, scrollable, NO fixed max-height ── */ .gsearch-results-list { flex: 1 1 0 !important; min-height: 0 !important; /* critical for flex child to scroll */ max-height: none !important; /* remove the 420px desktop cap */ overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; padding: 6px 0 !important; } /* ── Result Row: Stack vertically on mobile to prevent content merge ── */ .gsearch-item-row { flex-direction: column !important; /* symbol on top, actions below */ align-items: flex-start !important; gap: 8px !important; padding: 12px 14px !important; min-height: unset !important; } /* Left content takes full width */ .gs-item-left { width: 100% !important; min-width: 0 !important; } /* Right action strip: full width row below symbol */ .gs-item-right { width: 100% !important; } /* Action buttons strip wraps on mobile */ .gs-actions-strip { flex-wrap: wrap !important; gap: 6px !important; width: 100% !important; } /* Action buttons: compact on mobile */ .gs-action-btn { font-size: 11px !important; padding: 5px 10px !important; min-height: 32px !important; border-radius: 6px !important; flex-shrink: 0; } /* Symbol text stays on one line */ .gs-item-sym { font-size: 15px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Name slightly smaller on mobile */ .gs-item-name { font-size: 12px !important; white-space: normal !important; /* allow wrap for long names */ } /* Sector tag */ .gs-item-sector { font-size: 10px !important; } /* ── Footer — Hidden on mobile to save space ── */ .gsearch-modal-footer { display: none !important; } /* ── Empty State ── */ .gsearch-empty-state { padding: 40px 20px !important; text-align: center; } } /* ============================================================================ INSTITUTIONAL MOBILE TERMINAL UI SYSTEM (TradersDesk Mobile 2.0) Strictly scoped to max-width: 768px (Desktop remains 100% untouched) ============================================================================ */ @media (max-width: 768px) { /* ── Universal Body Padding for Fixed Bottom Navigation ── */ body { padding-bottom: 70px !important; } /* ── Clean Top Brand Bar Across All Pages ── */ .inst-brand-bar, .page2-header, .cs-header { height: 54px !important; min-height: 54px !important; padding: 0 14px !important; } .inst-brand-logo, .inst-brand img, .cs-brand img { height: 24px !important; max-height: 24px !important; width: auto !important; } /* Light theme logo & header adjustments */ [data-theme="light"] .inst-header, [data-theme="light"] .page2-header, [data-theme="light"] .cs-header, html[data-theme="light"] .inst-brand-bar, body.white-theme .page2-header { background: #ffffff !important; border-bottom: 1px solid #e2e8f0 !important; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important; } /* ── Static Pages Responsive Header (About, Contact, Terms, etc.) ── */ .static-brand-header, header.inst-header > div[style*="max-width: 1200px"] { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; padding: 6px 0 !important; } header.inst-header div[style*="gap:16px"] { display: flex !important; align-items: center !important; gap: 6px !important; flex-wrap: wrap !important; } header.inst-header div[style*="gap:16px"] a { font-size: 11px !important; padding: 4px 8px !important; border-radius: 6px !important; background: rgba(255, 255, 255, 0.05); white-space: nowrap !important; } /* ── 1. Benchmark Indices (1-Column Sleek Institutional Cards) ── */ .inst-indices-row { grid-template-columns: 1fr !important; gap: 12px !important; margin-bottom: 18px !important; } .inst-idx-card { padding: 14px 16px !important; border-radius: 12px !important; gap: 10px !important; background: rgba(15, 23, 42, 0.85) !important; border: 1px solid rgba(255, 255, 255, 0.09) !important; } [data-theme="light"] .inst-idx-card { background: #ffffff !important; border-color: #e2e8f0 !important; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important; } .idx-card-top { display: flex !important; align-items: center !important; justify-content: space-between !important; } .idx-title-group { display: flex !important; align-items: center !important; gap: 8px !important; } .idx-name { font-size: 15px !important; font-weight: 800 !important; letter-spacing: -0.2px !important; } .idx-badge { font-size: 10px !important; padding: 2px 8px !important; border-radius: 4px !important; } .idx-spot-block { display: flex !important; align-items: baseline !important; justify-content: space-between !important; gap: 12px !important; margin: 4px 0 !important; } .idx-spot { font-size: 22px !important; font-weight: 800 !important; letter-spacing: -0.5px !important; line-height: 1 !important; } .idx-chg { font-size: 12.5px !important; font-weight: 700 !important; padding: 3px 8px !important; border-radius: 6px !important; } .idx-meta-strip { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; margin-top: 4px !important; } .idx-meta-pill { padding: 6px 10px !important; font-size: 11.5px !important; border-radius: 6px !important; background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; display: flex !important; align-items: center !important; justify-content: space-between !important; } [data-theme="light"] .idx-meta-pill { background: #f8fafc !important; border-color: #e2e8f0 !important; } .idx-card-cta { margin-top: 6px !important; text-align: right !important; } .idx-card-cta span { font-size: 12px !important; font-weight: 700 !important; color: #38bdf8 !important; } /* ── 2. Market Sentiment & Surveillance Desk (Clean 2-Column Balanced Grid) ── */ .inst-kpi-row { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; margin-bottom: 20px !important; } .inst-kpi-card { padding: 12px 14px !important; border-radius: 10px !important; min-height: 82px !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; } /* Reset the nth-child(5) span that was causing the 6th card to be orphaned */ .inst-kpi-card:nth-child(5) { grid-column: span 1 !important; } .inst-kpi-label { font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.3px !important; } .inst-kpi-val { font-size: 18px !important; font-weight: 800 !important; margin: 3px 0 !important; } .inst-kpi-sub { font-size: 10px !important; opacity: 0.8 !important; } /* ── 3. Institutional Quantitative Suites (1-Column Modern App Cards) ── */ .inst-dash-grid { grid-template-columns: 1fr !important; gap: 12px !important; margin-bottom: 24px !important; } .inst-dash-module { border-radius: 12px !important; background: rgba(15, 23, 42, 0.85) !important; border: 1px solid rgba(255, 255, 255, 0.09) !important; overflow: hidden !important; } [data-theme="light"] .inst-dash-module { background: #ffffff !important; border-color: #e2e8f0 !important; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important; } .inst-dm-header { padding: 12px 14px 8px 14px !important; display: flex !important; align-items: center !important; gap: 10px !important; } .inst-dm-icon-wrap { width: 36px !important; height: 36px !important; border-radius: 8px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } .inst-dm-title-box { flex: 1 !important; min-width: 0 !important; } .inst-dm-title { font-size: 14.5px !important; font-weight: 800 !important; color: #f8fafc !important; display: block !important; } [data-theme="light"] .inst-dm-title { color: #0f172a !important; } .inst-dm-desc-tag { font-size: 11px !important; color: #94a3b8 !important; display: block !important; } .inst-dm-badge { font-size: 9.5px !important; padding: 2px 7px !important; border-radius: 4px !important; flex-shrink: 0 !important; } .inst-dm-body { padding: 0 14px 10px 14px !important; } .inst-dm-body p { font-size: 12px !important; line-height: 1.5 !important; color: #94a3b8 !important; margin: 0 !important; } [data-theme="light"] .inst-dm-body p { color: #64748b !important; } /* Card Footer with clean non-overlapping links */ .inst-dm-footer { padding: 10px 14px !important; border-top: 1px solid rgba(255, 255, 255, 0.06) !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; background: rgba(0, 0, 0, 0.15) !important; } [data-theme="light"] .inst-dm-footer { border-top-color: #f1f5f9 !important; background: #f8fafc !important; } .inst-dm-go { font-size: 12.5px !important; font-weight: 700 !important; color: #38bdf8 !important; } [data-theme="light"] .inst-dm-go { color: #2563eb !important; } /* ── 4. Horizontal Touch-Scroll Ribbons for Filters & Category Pills ── */ .fut-intraday-index-ribbon, .category-pill-ribbon, .cs-filters, .inst-tab-ribbon { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; gap: 8px !important; padding: 8px 12px !important; margin: 8px 0 !important; } .fut-intraday-index-ribbon::-webkit-scrollbar, .category-pill-ribbon::-webkit-scrollbar, .cs-filters::-webkit-scrollbar { display: none !important; } .fut-intraday-idx-btn, .category-pill-btn { flex-shrink: 0 !important; white-space: nowrap !important; padding: 6px 12px !important; font-size: 11.5px !important; } /* ── 5. Responsive Institutional Tables ── */ .table-responsive, .inst-table-wrap, .table-container { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; max-width: 100% !important; border-radius: 8px !important; } /* ── 6. CMS Articles & Handbook Readability ── */ .cms-container, .article-container { padding: 16px 14px !important; max-width: 100% !important; } .cms-title, .article-title { font-size: 22px !important; line-height: 1.3 !important; } .cms-body p, .article-body p { font-size: 14.5px !important; line-height: 1.65 !important; } /* ── 7. Universal Bottom Navigation Bar (Fixed 5-item Dock) ── */ .mobile-bottom-nav, .mobile-bottom-dock { display: flex !important; position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; height: 58px !important; background: rgba(10, 15, 28, 0.96) !important; backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important; border-top: 1px solid rgba(255, 255, 255, 0.1) !important; box-shadow: 0 -4px 25px rgba(0, 0, 0, 0.5) !important; z-index: 99999 !important; align-items: center !important; justify-content: space-around !important; padding: 0 4px !important; } html[data-theme="light"] .mobile-bottom-nav, body.white-theme .mobile-bottom-nav { background: rgba(255, 255, 255, 0.96) !important; border-top-color: #cbd5e1 !important; box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.08) !important; } .mob-nav-item { flex: 1 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; background: transparent !important; border: none !important; color: #94a3b8 !important; padding: 6px 0 !important; cursor: pointer !important; text-decoration: none !important; -webkit-tap-highlight-color: transparent !important; } html[data-theme="light"] .mob-nav-item, body.white-theme .mob-nav-item { color: #64748b !important; } .mob-nav-icon { font-size: 18px !important; line-height: 1.2 !important; margin-bottom: 2px !important; } .mob-nav-label { font-size: 9.5px !important; font-weight: 700 !important; letter-spacing: 0.3px !important; text-transform: uppercase !important; } .mob-nav-item:hover, .mob-nav-item.active { color: #38bdf8 !important; } html[data-theme="light"] .mob-nav-item.active, body.white-theme .mob-nav-item.active { color: #2563eb !important; } .mob-nav-item.active .mob-nav-icon { transform: scale(1.15) !important; } .mob-nav-search-center .mob-nav-icon { font-size: 21px !important; } } /* ============================================================================ STATIC PAGES MOBILE FIX (about, contact, terms, privacy, disclaimer) Strictly scoped to max-width: 768px - Desktop 100% untouched ============================================================================ */ @media (max-width: 768px) { /* ── Static page header (inline-style headers in about/contact/terms) ── */ header.inst-header { padding: 10px 14px !important; } /* The inner flex wrapper of static headers */ header.inst-header > div, header.inst-header > div[style] { flex-wrap: wrap !important; gap: 8px !important; } /* Logo image in static headers */ header.inst-header img { height: 24px !important; width: auto !important; } /* Back links / nav links in static headers */ header.inst-header div[style*="gap:16px"], header.inst-header div[style*="gap: 16px"] { gap: 6px !important; flex-wrap: wrap !important; } header.inst-header div[style*="gap:16px"] a, header.inst-header div[style*="gap: 16px"] a { font-size: 11px !important; padding: 4px 10px !important; border-radius: 6px !important; background: rgba(255, 255, 255, 0.06) !important; white-space: nowrap !important; } /* ── Static Content Sections ── */ .static-page-content, main.static-main, .about-wrap, .contact-wrap { padding: 20px 14px !important; max-width: 100% !important; } /* ── Futures Rollover Page: Filter tabs → scrollable ── */ .fut-fw-header-row, .fut-fw-tab-strip, .fut-tab-btn-group { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; gap: 6px !important; padding-bottom: 4px !important; } .fut-fw-header-row::-webkit-scrollbar, .fut-fw-tab-strip::-webkit-scrollbar { display: none !important; } .fut-fw-tab-btn, .fut-tab-btn { flex-shrink: 0 !important; white-space: nowrap !important; font-size: 11.5px !important; padding: 6px 12px !important; } /* ── OI Page: Tabs and filters ── */ .oi-tab-row, .oi-filter-row, .oi-strike-row { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; gap: 6px !important; padding: 4px 0 !important; } .oi-tab-row::-webkit-scrollbar, .oi-filter-row::-webkit-scrollbar { display: none !important; } /* ── CMS pages (blog, handbook, custom pages) ── */ .cms-container { padding: 16px 14px 80px 14px !important; max-width: 100% !important; } .cms-container h1 { font-size: 22px !important; line-height: 1.3 !important; } .cms-container h2 { font-size: 18px !important; line-height: 1.35 !important; } .cms-container h3 { font-size: 15px !important; } .cms-container p, .cms-container li { font-size: 14.5px !important; line-height: 1.7 !important; } .cms-container pre, .cms-container code { font-size: 12px !important; overflow-x: auto !important; } .cms-container table { display: block !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; font-size: 12.5px !important; } /* ── Blog Index Page ── */ .blog-grid, .blog-cards-wrap { grid-template-columns: 1fr !important; gap: 16px !important; } .blog-card, .post-card { border-radius: 12px !important; } .blog-card-title, .post-card-title { font-size: 17px !important; line-height: 1.35 !important; } .blog-card-excerpt, .post-card-excerpt { font-size: 13px !important; } /* ── Calendar Studio Page ── */ .cs-header { padding: 10px 14px !important; flex-wrap: wrap !important; } .cs-brand { gap: 8px !important; } .cs-brand img { height: 22px !important; width: auto !important; } .cs-filters { gap: 6px !important; overflow-x: auto !important; flex-wrap: nowrap !important; padding: 8px 12px !important; scrollbar-width: none !important; } .cs-filters::-webkit-scrollbar { display: none; } /* ── Futures Tab Buttons at top of page ── */ .fut-tab-bar { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; gap: 6px !important; padding: 8px 0 !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; } .fut-tab-bar::-webkit-scrollbar { display: none; } .fut-tab-btn { flex-shrink: 0 !important; white-space: nowrap !important; font-size: 12px !important; padding: 7px 14px !important; border-radius: 8px !important; min-height: 36px !important; } /* ── Tables in Futures / OI pages ── */ .fut-mw-table-wrap, .oi-table-wrap, .mw-table-container { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; border-radius: 8px !important; } .fut-mw-table, .oi-table, .mw-table { font-size: 11.5px !important; min-width: 600px !important; } .fut-mw-table th, .fut-mw-table td, .oi-table th, .oi-table td { padding: 8px 10px !important; white-space: nowrap !important; } /* ── CMS/Blog article page top nav header ── */ .page2-header { padding: 8px 14px !important; min-height: 50px !important; } .page2-header .inst-nav-row { display: none !important; } .page2-header nav.inst-nav { display: none !important; } .page2-theme-toggle-btn { padding: 5px 10px !important; font-size: 11px !important; border-radius: 7px !important; } /* ── Section Headings consistent mobile size ── */ .inst-section-heading { margin-bottom: 12px !important; padding: 0 !important; } .section-title-text { font-size: 12px !important; letter-spacing: 0.5px !important; } .section-subtitle-tag { font-size: 9px !important; padding: 2px 7px !important; } /* ── Macro ribbon pills scroll fix ── */ .inst-macro-ribbon { flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; padding-bottom: 6px !important; } .inst-macro-ribbon::-webkit-scrollbar { display: none; } .macro-pill { flex-shrink: 0 !important; white-space: nowrap !important; font-size: 11px !important; } /* ── Open Interest strike selector pills ── */ .oi-strike-pills { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; scrollbar-width: none !important; gap: 6px !important; padding: 6px 0 !important; } .oi-strike-pills::-webkit-scrollbar { display: none; } /* ── Dashboard refresh button on mobile (smaller) ── */ .inst-hero-refresh-btn { padding: 8px 16px !important; font-size: 12px !important; border-radius: 8px !important; } /* ── Card row inside inst-dash panels ── */ .inst-dash-hero { padding: 10px 0 0 0 !important; margin-bottom: 12px !important; } /* Announcement / info banners */ .inst-announce-bar, .info-bar, .update-bar { font-size: 11px !important; padding: 8px 12px !important; text-align: center !important; } } /* ================================================================ SYSTEMATIC SUBMENU AUTO-LAYOUT (Zero Empty Space System) ================================================================ */ .inst-dropdown-col.is-empty { display: none !important; } .inst-dropdown.is-single-col { min-width: 320px !important; max-width: 380px !important; } .inst-dropdown.is-single-col .inst-dropdown-col { border-left: none !important; padding-left: 0 !important; min-width: 100% !important; } /* Subtle smooth transition for systematic balancing */ .inst-dropdown-col { transition: all 0.15s ease-out; } /* Accessibility & SEO Screen-Reader Heading (Visually Hidden) */ .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* Dedicated MTF Sub-Desk Header Card (Individual & Focused) */ .mta-desk-header-card { display: flex; align-items: center; justify-content: space-between; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px 20px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04); transition: all 0.2s ease; } .mta-desk-header-left { display: flex; align-items: center; gap: 14px; } .mta-desk-header-icon { font-size: 26px; line-height: 1; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: #f1f5f9; border-radius: 8px; } .mta-desk-header-title { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; color: #0f172a; margin: 0 0 3px 0; text-transform: uppercase; } .mta-desk-header-desc { font-size: 11.5px; color: #64748b; margin: 0; line-height: 1.4; } .mta-desk-header-right { display: flex; align-items: center; gap: 8px; } [data-theme="dark"] .mta-desk-header-card { background: #111827; border-color: #1f2937; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); } [data-theme="dark"] .mta-desk-header-icon { background: #1f2937; } [data-theme="dark"] .mta-desk-header-title { color: #f8fafc; } [data-theme="dark"] .mta-desk-header-desc { color: #94a3b8; } /* ========================================================================== UNIFIED 5-COL FOOTER WITH LEFT BRAND LOGO COLUMN & 4 NAVIGATION COLUMNS ========================================================================== */ .footer-layout-wrapper { display: grid; grid-template-columns: 280px 1fr; gap: 36px; margin-bottom: 28px; align-items: start; } .footer-brand-col { display: flex; flex-direction: column; gap: 12px; max-width: 280px; } .footer-brand-logo { display: inline-flex; align-items: center; text-decoration: none; } .footer-brand-desc { font-size: 12.5px; color: #94a3b8; line-height: 1.55; margin: 0; } body.theme-light .footer-brand-desc, body.light-theme .footer-brand-desc, body.white-theme .footer-brand-desc, [data-theme="light"] .footer-brand-desc { color: #64748b; } .footer-brand-badges { display: flex; flex-wrap: wrap; gap: 6px; } .footer-system-status { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #64748b; font-weight: 600; } .footer-status-dot { width: 7px; height: 7px; background: #10b981; border-radius: 50%; box-shadow: 0 0 8px rgba(16, 185, 129, 0.6); display: inline-block; } .footer-four-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; width: 100%; } .footer-copy-text { font-size: 12px; color: #94a3b8; font-weight: 500; } body.theme-light .footer-copy-text, body.light-theme .footer-copy-text, body.white-theme .footer-copy-text, [data-theme="light"] .footer-copy-text { color: #475569; } .footer-sebi-text { font-size: 11px; color: #64748b; font-style: italic; max-width: 600px; } @media (max-width: 1024px) { .footer-layout-wrapper { grid-template-columns: 1fr; gap: 26px; } .footer-brand-col { max-width: 100%; } } @media (max-width: 640px) { .footer-four-columns { grid-template-columns: 1fr !important; gap: 20px !important; } .footer-bottom { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; } }