/* ═══════════════════════════════════════════════════════════════════════ ZPL × INTERCOM DESIGN SYSTEM — App-wide unified theme Reference: desingn md/intercom/{DESIGN.md, preview.html, preview-dark.html} ═══════════════════════════════════════════════════════════════════════ This file is the SINGLE source of truth for fonts, sizes, colours and geometry across every page, tab and sub-tab in the app. It is loaded by layout.html AFTER zpl_design.css, so it wins by cascade and remaps the existing --zpl-* tokens (which the rest of the codebase consumes) onto the warm Intercom palette. Both light and dark themes are derived from the design preview HTML reference. - Light/dark switched via [data-zpl-theme="light"|"dark"] on - Inter font (locally hosted at /static/vendor/inter.css) - 4px button radius, 6px nav radius, 8px card radius - Scale(1.04) hover, scale(0.96) active on interactive elements - Warm-cream surface (#faf9f6) with off-black ink (#111111) - Fin Orange (#ff5600) reserved for brand/accent only */ /* ── Inter font (already vendored at /static/vendor/inter.css) ────────── */ @import url("/static/vendor/inter.css"); /* ── Intercom palette · LIGHT (default) ───────────────────────────────── */ :root, [data-zpl-theme="light"] { color-scheme: light; /* Brand palette */ --ic-cream: #faf9f6; /* page background */ --ic-white: #ffffff; /* surfaces / cards */ --ic-ink: #111111; /* primary text + dark buttons */ --ic-orange: #ff5600; /* Fin Orange — accent only */ --ic-oat: #dedbd6; /* warm border */ --ic-sand: #d3cec6; /* light warm neutral */ --ic-gray80: #313130; --ic-gray60: #626260; --ic-gray50: #7b7b78; /* Report palette (data-viz) */ --ic-blue: #65b5ff; --ic-green: #0bdf50; --ic-red: #c41c1c; --ic-pink: #ff2067; --ic-lime: #b3e01c; /* ── Map onto existing --zpl-* tokens used across the codebase ─── */ --zpl-bg: var(--ic-cream); --zpl-bg2: #f3f1ec; --zpl-surface: var(--ic-white); --zpl-surface2: var(--ic-cream); --zpl-hdr: var(--ic-ink); --zpl-hdr2: #1e1e1d; --zpl-acc: var(--ic-orange); --zpl-acc-bg: rgba(255,86,0,.08); --zpl-acc-bdr: rgba(255,86,0,.26); --zpl-good: #0d7a43; --zpl-good-bg: rgba(11,223,80,.10); --zpl-good-bdr: rgba(11,223,80,.30); --zpl-bad: var(--ic-red); --zpl-bad-bg: rgba(196,28,28,.08); --zpl-bad-bdr: rgba(196,28,28,.26); --zpl-warn: #b86c00; --zpl-warn-bg: rgba(255,86,0,.08); --zpl-warn-bdr: rgba(255,86,0,.22); --zpl-ink: var(--ic-ink); --zpl-mid: var(--ic-gray60); --zpl-muted: var(--ic-gray50); --zpl-line: var(--ic-oat); /* Geometry */ --zpl-h: 30px; --zpl-r: 6px; /* nav-item radius */ --zpl-r-lg: 8px; /* card radius */ --zpl-r-sm: 4px; /* button radius (Intercom signature) */ --zpl-fs: 0.78rem; --zpl-fs-body: 0.82rem; /* Fonts (Inter is loaded above) */ --zpl-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, ui-sans-serif, system-ui, sans-serif; --zpl-mono: 'JetBrains Mono', 'SF Mono', 'Consolas', 'Fira Mono', ui-monospace, monospace; } /* ── Intercom palette · DARK ──────────────────────────────────────────── */ [data-zpl-theme="dark"] { color-scheme: dark; --ic-cream: #111111; /* page background */ --ic-white: #1a1a1a; /* surfaces / cards */ --ic-ink: #faf9f6; /* primary text */ --ic-orange: #ff5600; --ic-oat: #313130; --ic-sand: #3a3835; --ic-gray80: #c8c8c5; --ic-gray60: #b3b3af; --ic-gray50: #9c9c98; --zpl-bg: var(--ic-cream); --zpl-bg2: #161616; --zpl-surface: var(--ic-white); --zpl-surface2: #222222; --zpl-hdr: #0a0a0a; --zpl-hdr2: #141414; --zpl-acc: var(--ic-orange); --zpl-acc-bg: rgba(255,86,0,.18); --zpl-acc-bdr: rgba(255,86,0,.40); --zpl-good: #0bdf50; --zpl-good-bg: rgba(11,223,80,.18); --zpl-good-bdr: rgba(11,223,80,.36); --zpl-bad: #ff5b5b; --zpl-bad-bg: rgba(255,91,91,.16); --zpl-bad-bdr: rgba(255,91,91,.36); --zpl-warn: #ffbe55; --zpl-warn-bg: rgba(255,190,85,.14); --zpl-warn-bdr: rgba(255,190,85,.32); --zpl-ink: var(--ic-ink); --zpl-mid: var(--ic-gray60); --zpl-muted: var(--ic-gray50); --zpl-line: var(--ic-oat); } /* ═════════════════════════════════════════════════════════════════════ BASE / TYPOGRAPHY ═════════════════════════════════════════════════════════════════════ */ html, body { font-family: var(--zpl-font); font-size: var(--zpl-fs-body); color: var(--zpl-ink); background: var(--zpl-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-family: var(--zpl-font); color: var(--zpl-ink); font-weight: 600; line-height: 1.05; letter-spacing: -0.01em; margin: 0 0 0.5rem 0; } h1 { font-size: 1.6rem; letter-spacing: -0.025em; } h2 { font-size: 1.35rem; letter-spacing: -0.02em; } h3 { font-size: 1.15rem; letter-spacing: -0.015em; } h4 { font-size: 1rem; } h5 { font-size: .9rem; } h6 { font-size: .82rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--zpl-muted); } a { color: var(--zpl-acc); text-decoration: none; } a:hover { color: var(--zpl-acc); text-decoration: underline; } code, kbd, pre, samp { font-family: var(--zpl-mono); font-size: .78em; } .text-muted { color: var(--zpl-muted) !important; } .text-secondary { color: var(--zpl-mid) !important; } hr { border-color: var(--zpl-line); opacity: 1; } /* ═════════════════════════════════════════════════════════════════════ BOOTSTRAP OVERRIDES — buttons, forms, cards, tables, nav, badge, alert These selectors are intentionally global so every page that uses Bootstrap classes adopts the Intercom look without code changes. ═════════════════════════════════════════════════════════════════════ */ /* ── Buttons — sharp 4px radius, scale hover (Intercom signature) ───── */ .btn { font-family: var(--zpl-font) !important; font-size: .78rem !important; font-weight: 500 !important; border-radius: var(--zpl-r-sm) !important; padding: .42rem .85rem !important; border: 1px solid transparent; transition: transform .15s ease, background-color .15s, color .15s, border-color .15s, filter .15s; letter-spacing: 0; } .btn:hover { transform: scale(1.04); } .btn:active { transform: scale(0.96); } .btn:focus, .btn:focus-visible { box-shadow: 0 0 0 3px rgba(255,86,0,.18) !important; outline: none; } .btn-primary, .btn-oracle-primary { background: var(--ic-ink) !important; color: var(--ic-white) !important; border-color: var(--ic-ink) !important; } .btn-primary:hover, .btn-oracle-primary:hover { background: var(--ic-orange) !important; border-color: var(--ic-orange) !important; color: var(--ic-white) !important; } .btn-secondary, .btn-oracle { background: var(--ic-cream) !important; color: var(--ic-ink) !important; border-color: var(--ic-oat) !important; } .btn-secondary:hover, .btn-oracle:hover { background: var(--ic-white) !important; border-color: var(--ic-ink) !important; color: var(--ic-ink) !important; } .btn-outline-primary { background: transparent !important; color: var(--ic-ink) !important; border-color: var(--ic-ink) !important; } .btn-outline-primary:hover { background: var(--ic-ink) !important; color: var(--ic-white) !important; } .btn-outline-secondary { background: transparent !important; color: var(--zpl-mid) !important; border-color: var(--ic-oat) !important; } .btn-outline-secondary:hover { background: var(--ic-cream) !important; border-color: var(--zpl-mid) !important; color: var(--ic-ink) !important; } .btn-success, .btn-outline-success { background: var(--ic-white) !important; color: #0d7a43 !important; border: 1px solid #0d7a43 !important; } .btn-success:hover, .btn-outline-success:hover { background: #0d7a43 !important; color: var(--ic-white) !important; } .btn-danger, .btn-outline-danger { background: var(--ic-white) !important; color: var(--ic-red) !important; border: 1px solid var(--ic-red) !important; } .btn-danger:hover, .btn-outline-danger:hover { background: var(--ic-red) !important; color: var(--ic-white) !important; } .btn-warning, .btn-outline-warning { background: var(--ic-white) !important; color: #b86c00 !important; border: 1px solid #b86c00 !important; } .btn-warning:hover, .btn-outline-warning:hover { background: var(--ic-orange) !important; border-color: var(--ic-orange) !important; color: var(--ic-white) !important; } .btn-sm { padding: .28rem .65rem !important; font-size: .72rem !important; } .btn-lg { padding: .55rem 1.1rem !important; font-size: .9rem !important; } /* ── Forms ───────────────────────────────────────────────────────────── */ .form-control, .form-select, .form-control-sm, .form-select-sm { font-family: var(--zpl-font) !important; font-size: .78rem !important; background: var(--zpl-surface) !important; color: var(--zpl-ink) !important; border: 1px solid var(--zpl-line) !important; border-radius: var(--zpl-r-sm) !important; padding: .38rem .65rem !important; box-shadow: none !important; } .form-control:focus, .form-select:focus { border-color: var(--ic-ink) !important; background: var(--zpl-surface) !important; box-shadow: 0 0 0 3px rgba(17,17,17,.08) !important; } .form-label, label.form-label { font-size: .7rem !important; font-weight: 600 !important; color: var(--zpl-mid) !important; margin-bottom: .25rem !important; letter-spacing: 0; text-transform: none; } .form-text { font-size: .68rem; color: var(--zpl-muted); } .form-check-input { border-color: var(--zpl-line); background: var(--zpl-surface); } .form-check-input:checked { background-color: var(--ic-ink); border-color: var(--ic-ink); } .form-check-input:focus { box-shadow: 0 0 0 3px rgba(17,17,17,.08); border-color: var(--ic-ink); } .form-check-label { color: var(--zpl-ink); font-size: .78rem; } .input-group-text { background: var(--zpl-bg2); border: 1px solid var(--zpl-line); color: var(--zpl-mid); font-size: .72rem; border-radius: var(--zpl-r-sm); } /* ── Cards ───────────────────────────────────────────────────────────── */ .card { background: var(--zpl-surface) !important; border: 1px solid var(--zpl-line) !important; border-radius: var(--zpl-r-lg) !important; box-shadow: none !important; color: var(--zpl-ink); } .card-header { background: var(--zpl-bg) !important; border-bottom: 1px solid var(--zpl-line) !important; color: var(--zpl-mid) !important; font-size: .68rem !important; font-weight: 700 !important; letter-spacing: .07em !important; text-transform: uppercase !important; padding: .55rem .85rem !important; border-radius: var(--zpl-r-lg) var(--zpl-r-lg) 0 0 !important; } .card-body { padding: .85rem !important; color: var(--zpl-ink); } .card-footer { background: var(--zpl-bg) !important; border-top: 1px solid var(--zpl-line) !important; color: var(--zpl-muted); font-size: .72rem; border-radius: 0 0 var(--zpl-r-lg) var(--zpl-r-lg) !important; } /* ── Tables ──────────────────────────────────────────────────────────── */ .table { font-size: .76rem !important; color: var(--zpl-ink) !important; --bs-table-bg: var(--zpl-surface); --bs-table-color: var(--zpl-ink); --bs-table-border-color: var(--zpl-line); --bs-table-striped-bg: var(--zpl-bg); --bs-table-striped-color: var(--zpl-ink); --bs-table-hover-bg: var(--zpl-bg2); --bs-table-hover-color: var(--zpl-ink); } .table > :not(caption) > * > * { background-color: transparent; border-bottom-color: var(--zpl-line); } .table thead th { background: var(--zpl-bg) !important; color: var(--zpl-muted) !important; font-size: .65rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .06em !important; border-bottom: 1px solid var(--zpl-line) !important; padding: .45rem .65rem !important; white-space: nowrap; } .table tbody td { padding: .35rem .65rem !important; border-bottom: 1px solid var(--zpl-line) !important; } .table-bordered, .table-bordered td, .table-bordered th { border-color: var(--zpl-line) !important; } .table-light, .table-light > th, .table-light > td { background: var(--zpl-bg) !important; color: var(--zpl-mid) !important; } /* ── Badges / pills ──────────────────────────────────────────────────── */ .badge { font-size: .62rem !important; font-weight: 600 !important; padding: .28em .55em !important; border-radius: var(--zpl-r-sm) !important; letter-spacing: .03em; } .badge.bg-primary { background: var(--ic-ink) !important; color: var(--ic-white) !important; } .badge.bg-secondary { background: var(--zpl-bg2) !important; color: var(--zpl-mid) !important; } .badge.bg-success { background: rgba(11,223,80,.15) !important; color: #0d7a43 !important; } .badge.bg-danger { background: rgba(196,28,28,.10) !important; color: var(--ic-red) !important; } .badge.bg-warning { background: rgba(255,86,0,.12) !important; color: #b86c00 !important; } .badge.bg-info { background: rgba(101,181,255,.15) !important; color: #0e62a8 !important; } /* ── Alerts ──────────────────────────────────────────────────────────── */ .alert { font-size: .78rem !important; border-radius: var(--zpl-r-sm) !important; padding: .55rem .85rem !important; border: 1px solid var(--zpl-line); } .alert-success { background: rgba(11,223,80,.08) !important; color: #0d7a43 !important; border-color: rgba(11,223,80,.28) !important; } .alert-danger { background: rgba(196,28,28,.06) !important; color: var(--ic-red) !important; border-color: rgba(196,28,28,.28) !important; } .alert-warning { background: rgba(255,86,0,.06) !important; color: #b86c00 !important; border-color: rgba(255,86,0,.28) !important; } .alert-info { background: rgba(101,181,255,.08) !important; color: #0e62a8 !important; border-color: rgba(101,181,255,.30) !important; } /* ── Nav tabs / nav pills ────────────────────────────────────────────── */ .nav-tabs { border-bottom: 1px solid var(--zpl-line) !important; gap: 2px; } .nav-tabs .nav-link { color: var(--zpl-mid) !important; border: none !important; border-bottom: 2px solid transparent !important; margin-bottom: -1px !important; padding: .42rem .85rem !important; font-size: .76rem !important; font-weight: 500 !important; background: transparent !important; border-radius: 0 !important; transition: color .15s, border-color .15s; } .nav-tabs .nav-link:hover { color: var(--zpl-ink) !important; border-color: transparent !important; } .nav-tabs .nav-link.active { color: var(--ic-ink) !important; border-bottom-color: var(--ic-ink) !important; background: transparent !important; font-weight: 700 !important; } .nav-pills { gap: 4px; border-bottom: 1px solid var(--zpl-line) !important; padding-bottom: 0 !important; } .nav-pills .nav-link { color: var(--zpl-mid) !important; background: transparent !important; border: 1px solid transparent !important; border-radius: var(--zpl-r-sm) var(--zpl-r-sm) 0 0 !important; padding: .35rem .75rem !important; font-size: .74rem !important; font-weight: 500 !important; margin-bottom: -1px; } .nav-pills .nav-link:hover { color: var(--ic-ink) !important; background: var(--zpl-bg) !important; } .nav-pills .nav-link.active { color: var(--ic-ink) !important; background: var(--zpl-surface) !important; border-color: var(--zpl-line) var(--zpl-line) var(--zpl-surface) !important; font-weight: 700 !important; } /* ── Dropdowns ───────────────────────────────────────────────────────── */ .dropdown-menu { background: var(--zpl-surface) !important; border: 1px solid var(--zpl-line) !important; border-radius: var(--zpl-r) !important; box-shadow: 0 4px 16px rgba(17,17,17,.08) !important; font-size: .76rem; padding: .25rem; } .dropdown-item { color: var(--zpl-ink) !important; padding: .35rem .65rem !important; border-radius: var(--zpl-r-sm); } .dropdown-item:hover, .dropdown-item:focus { background: var(--zpl-bg) !important; color: var(--ic-ink) !important; } .dropdown-divider { border-top-color: var(--zpl-line); } /* ── Modals ──────────────────────────────────────────────────────────── */ .modal-content { background: var(--zpl-surface) !important; border: 1px solid var(--zpl-line) !important; border-radius: var(--zpl-r-lg) !important; color: var(--zpl-ink); } .modal-header { background: var(--zpl-bg) !important; border-bottom: 1px solid var(--zpl-line) !important; color: var(--zpl-ink); } .modal-body { background: var(--zpl-surface); color: var(--zpl-ink); } .modal-footer { background: var(--zpl-bg) !important; border-top: 1px solid var(--zpl-line) !important; } .btn-close { filter: var(--zpl-btn-close-filter, none); } [data-zpl-theme="dark"] .btn-close { filter: invert(1); } /* ── Sidebar (layout.html driven) ────────────────────────────────────── */ .sidebar { background: var(--zpl-surface) !important; border-right: 1px solid var(--zpl-line) !important; } .sidebar .nav-link { color: var(--zpl-mid) !important; border-left: 3px solid transparent; background: transparent !important; } .sidebar .nav-link:hover { color: var(--ic-ink) !important; background: var(--zpl-bg) !important; } .sidebar .nav-link.active { color: var(--ic-ink) !important; background: var(--zpl-bg) !important; border-left-color: var(--ic-orange) !important; font-weight: 600; } .sidebar-group-toggle { color: var(--zpl-mid) !important; background: transparent !important; } .sidebar-group-toggle:hover { background: var(--zpl-bg) !important; color: var(--ic-ink) !important; } .sidebar-group.is-active > .sidebar-group-toggle { color: var(--ic-ink) !important; } .sidebar-group.is-active > .sidebar-group-toggle .sidebar-group-caret { color: var(--ic-orange) !important; } /* ── Header bar ─────────────────────────────────────────────────────── */ .header-bar { background: var(--ic-ink) !important; color: var(--ic-cream) !important; border-bottom: 1px solid var(--zpl-line); } .header-brand { color: var(--ic-cream) !important; letter-spacing: .04em; font-weight: 700; } .header-bar a, .header-bar .small { color: var(--ic-cream) !important; opacity: .85; } .header-bar a:hover { opacity: 1; } /* ── Theme toggle button (added to layout.html header) ───────────────── */ #zplThemeToggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--zpl-r-sm); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: var(--ic-cream); cursor: pointer; font-size: 14px; line-height: 1; transition: transform .15s, background .15s; } #zplThemeToggle:hover { background: rgba(255,255,255,.16); transform: scale(1.06); } /* ── List groups ─────────────────────────────────────────────────────── */ .list-group { border-radius: var(--zpl-r-lg); } .list-group-item { background: var(--zpl-surface) !important; border-color: var(--zpl-line) !important; color: var(--zpl-ink) !important; font-size: .78rem; } /* ── Misc utility classes used by Bootstrap-derived elements ─────────── */ .bg-light { background: var(--zpl-bg) !important; } .bg-white { background: var(--zpl-surface) !important; } .bg-dark { background: var(--ic-ink) !important; color: var(--ic-cream) !important; } .bg-body { background: var(--zpl-bg) !important; } .border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--zpl-line) !important; } .text-primary { color: var(--ic-ink) !important; } .text-success { color: #0d7a43 !important; } .text-danger { color: var(--ic-red) !important; } .text-warning { color: #b86c00 !important; } .text-info { color: #0e62a8 !important; } /* ── Scrollbars ──────────────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--zpl-line); border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: var(--zpl-muted); } /* ── Page-specific spot fixes that need the new tokens ───────────────── */ /* Zerodha Connect / Combo Builder — kill duplicate top whitespace. Already handled in zerodha_connect.html, but make sure it inherits the new background even when toggled to dark mode. */ .zterm-page, .zterm-shell { background: var(--zpl-bg); color: var(--zpl-ink); } .zterm-page .card { background: var(--zpl-surface); } /* Zerodha Map / algo_execution.html — the .tk strip + tabbar should read the new palette so dark theme renders the strip correctly. */ .tk { background: var(--zpl-bg) !important; color: var(--zpl-ink) !important; } .tk-strip { background: var(--zpl-surface) !important; border-bottom-color: var(--zpl-line) !important; } .tk-stat { border-right-color: var(--zpl-line) !important; color: var(--zpl-ink) !important; } .tk-stat .sk { color: var(--zpl-muted) !important; } .tk-stat .sv { color: var(--zpl-ink) !important; } .tk-tabbar { background: var(--zpl-surface) !important; border-bottom-color: var(--zpl-line) !important; } .tk-tabbar .tt { color: var(--zpl-mid); } .tk-tabbar .tt:hover { color: var(--ic-ink); } .tk-tabbar .tt.act { color: var(--ic-ink); border-bottom-color: var(--ic-ink); } .tk-pane { color: var(--zpl-ink); } .tk-form-row, .tk-section, .tk-tile, .tk-empty { background: var(--zpl-surface) !important; border-color: var(--zpl-line) !important; color: var(--zpl-ink) !important; } .tk-section-head { color: var(--zpl-muted) !important; border-bottom-color: var(--zpl-line) !important; } .tk-inp, .tk-sel { background: var(--zpl-surface) !important; color: var(--zpl-ink) !important; border-color: var(--zpl-line) !important; } .tk-inp:focus, .tk-sel:focus { border-color: var(--ic-ink) !important; box-shadow: 0 0 0 3px rgba(17,17,17,.08) !important; } .tk-wrap { background: var(--zpl-surface) !important; border-color: var(--zpl-line) !important; } .tk-wrap thead th { background: var(--zpl-bg) !important; color: var(--zpl-muted) !important; border-bottom-color: var(--zpl-line) !important; } .tk-wrap tbody td { border-bottom-color: var(--zpl-line) !important; color: var(--zpl-ink); } .tk-wrap tbody tr:hover td { background: var(--zpl-bg2) !important; } .tk-btn.p { background: var(--ic-ink) !important; border-color: var(--ic-ink) !important; } .tk-btn.p:hover { background: var(--ic-orange) !important; border-color: var(--ic-orange) !important; } .tk-btn.g { background: var(--zpl-surface) !important; color: var(--zpl-mid) !important; border-color: var(--zpl-line) !important; } .tk-btn.g:hover { background: var(--zpl-bg) !important; color: var(--ic-ink) !important; } /* Force Bootstrap dark-mode containers used by some pages */ [data-zpl-theme="dark"] body { color: var(--zpl-ink); background: var(--zpl-bg); } [data-zpl-theme="dark"] .card, [data-zpl-theme="dark"] .modal-content, [data-zpl-theme="dark"] .dropdown-menu { background: var(--zpl-surface) !important; color: var(--zpl-ink) !important; } [data-zpl-theme="dark"] .table { color: var(--zpl-ink); --bs-table-color: var(--zpl-ink); } [data-zpl-theme="dark"] .form-control, [data-zpl-theme="dark"] .form-select { background: var(--zpl-surface) !important; color: var(--zpl-ink) !important; border-color: var(--zpl-line) !important; } [data-zpl-theme="dark"] .form-control::placeholder { color: var(--zpl-muted); } [data-zpl-theme="dark"] .alert-success { background: rgba(11,223,80,.10) !important; color: #4ade80 !important; } [data-zpl-theme="dark"] .alert-danger { background: rgba(255,91,91,.10) !important; color: #ff8585 !important; } [data-zpl-theme="dark"] .alert-warning { background: rgba(255,190,85,.10) !important; color: #ffbe55 !important; } [data-zpl-theme="dark"] .alert-info { background: rgba(101,181,255,.10) !important; color: #65b5ff !important; } [data-zpl-theme="dark"] .text-primary { color: var(--ic-ink) !important; } [data-zpl-theme="dark"] .badge.bg-secondary { background: var(--zpl-bg2) !important; color: var(--zpl-mid) !important; } /* ═════════════════════════════════════════════════════════════════════ DARK-MODE INLINE-STYLE NEUTRALISER Many templates have inline style="background:#fff" / "color:#000" / "background:#f8f8f8" hardcodes that bypass tokens. These attribute selectors catch the most common variants in dark mode and remap them onto the theme tokens, so dark mode renders cleanly even where the inline style hasn't been migrated to var(--zpl-*) yet. ═════════════════════════════════════════════════════════════════════ */ [data-zpl-theme="dark"] [style*="background:#fff"]:not([style*="background:#fff0"]):not([style*="background:#fff1"]):not([style*="background:#fff8"]), [data-zpl-theme="dark"] [style*="background: #fff"]:not([style*="background: #fff0"]):not([style*="background: #fff1"]):not([style*="background: #fff8"]), [data-zpl-theme="dark"] [style*="background:white"], [data-zpl-theme="dark"] [style*="background: white"], [data-zpl-theme="dark"] [style*="background-color:#fff"]:not([style*="background-color:#fff0"]):not([style*="background-color:#fff1"]):not([style*="background-color:#fff8"]), [data-zpl-theme="dark"] [style*="background-color: #fff"]:not([style*="background-color: #fff0"]):not([style*="background-color: #fff1"]):not([style*="background-color: #fff8"]), [data-zpl-theme="dark"] [style*="background-color:white"], [data-zpl-theme="dark"] [style*="background-color: white"], [data-zpl-theme="dark"] [style*="background:#FFFFFF"], [data-zpl-theme="dark"] [style*="background:#ffffff"], [data-zpl-theme="dark"] [style*="background: #ffffff"], [data-zpl-theme="dark"] [style*="background-color:#ffffff"], [data-zpl-theme="dark"] [style*="background-color: #ffffff"] { background: var(--zpl-surface) !important; background-color: var(--zpl-surface) !important; } [data-zpl-theme="dark"] [style*="background:#f8"]:not([style*="background:#f8a"]):not([style*="background:#f8b"]), [data-zpl-theme="dark"] [style*="background: #f8"]:not([style*="background: #f8a"]):not([style*="background: #f8b"]), [data-zpl-theme="dark"] [style*="background:#fafa"], [data-zpl-theme="dark"] [style*="background: #fafa"], [data-zpl-theme="dark"] [style*="background:#f0"]:not([style*="background:#f00"]):not([style*="background:#f0a"]):not([style*="background:#f0c"]), [data-zpl-theme="dark"] [style*="background: #f0"]:not([style*="background: #f00"]):not([style*="background: #f0a"]):not([style*="background: #f0c"]), [data-zpl-theme="dark"] [style*="background:#f1"]:not([style*="background:#f1a"]), [data-zpl-theme="dark"] [style*="background: #f1"]:not([style*="background: #f1a"]), [data-zpl-theme="dark"] [style*="background:#f3"]:not([style*="background:#f3a"]), [data-zpl-theme="dark"] [style*="background: #f3"]:not([style*="background: #f3a"]), [data-zpl-theme="dark"] [style*="background:#f4"]:not([style*="background:#f4a"]), [data-zpl-theme="dark"] [style*="background: #f4"]:not([style*="background: #f4a"]), [data-zpl-theme="dark"] [style*="background:#f5"]:not([style*="background:#f5a"]), [data-zpl-theme="dark"] [style*="background: #f5"]:not([style*="background: #f5a"]), [data-zpl-theme="dark"] [style*="background:#f6"]:not([style*="background:#f6a"]), [data-zpl-theme="dark"] [style*="background: #f6"]:not([style*="background: #f6a"]), [data-zpl-theme="dark"] [style*="background:#f7"]:not([style*="background:#f7a"]), [data-zpl-theme="dark"] [style*="background: #f7"]:not([style*="background: #f7a"]), [data-zpl-theme="dark"] [style*="background:#e2e8f0"], [data-zpl-theme="dark"] [style*="background:#e2e2e2"], [data-zpl-theme="dark"] [style*="background:#ececec"], [data-zpl-theme="dark"] [style*="background:#dee2e6"] { background: var(--zpl-bg2) !important; background-color: var(--zpl-bg2) !important; } [data-zpl-theme="dark"] [style*="color:#000"]:not([style*="color:#000a"]):not([style*="color:#000b"]), [data-zpl-theme="dark"] [style*="color: #000"]:not([style*="color: #000a"]):not([style*="color: #000b"]), [data-zpl-theme="dark"] [style*="color:black"], [data-zpl-theme="dark"] [style*="color: black"], [data-zpl-theme="dark"] [style*="color:#1e293b"], [data-zpl-theme="dark"] [style*="color: #1e293b"], [data-zpl-theme="dark"] [style*="color:#303030"], [data-zpl-theme="dark"] [style*="color: #303030"], [data-zpl-theme="dark"] [style*="color:#1a2332"], [data-zpl-theme="dark"] [style*="color: #1a2332"] { color: var(--zpl-ink) !important; } [data-zpl-theme="dark"] [style*="border:1px solid #e"], [data-zpl-theme="dark"] [style*="border: 1px solid #e"], [data-zpl-theme="dark"] [style*="border:1px solid #d"]:not([style*="border:1px solid #d0"]):not([style*="border:1px solid #d1"]):not([style*="border:1px solid #d2"]):not([style*="border:1px solid #d3"]), [data-zpl-theme="dark"] [style*="border: 1px solid #d"]:not([style*="border: 1px solid #d0"]):not([style*="border: 1px solid #d1"]):not([style*="border: 1px solid #d2"]):not([style*="border: 1px solid #d3"]), [data-zpl-theme="dark"] [style*="border-color:#e"], [data-zpl-theme="dark"] [style*="border-color: #e"] { border-color: var(--zpl-line) !important; } /* Catch-all for very common Bootstrap "table-light" / "bg-light" leak */ [data-zpl-theme="dark"] .table-light, [data-zpl-theme="dark"] .table-light > th, [data-zpl-theme="dark"] .table-light > td, [data-zpl-theme="dark"] .bg-light, [data-zpl-theme="dark"] .bg-white, [data-zpl-theme="dark"] .bg-body, [data-zpl-theme="dark"] .bg-body-tertiary, [data-zpl-theme="dark"] .bg-body-secondary { background: var(--zpl-bg2) !important; background-color: var(--zpl-bg2) !important; color: var(--zpl-ink) !important; } /* Native form input dark mode */ [data-zpl-theme="dark"] input, [data-zpl-theme="dark"] textarea, [data-zpl-theme="dark"] select { background-color: var(--zpl-surface) !important; color: var(--zpl-ink) !important; border-color: var(--zpl-line) !important; color-scheme: dark; } /* Pre/code blocks */ [data-zpl-theme="dark"] pre, [data-zpl-theme="dark"] code, [data-zpl-theme="dark"] .font-monospace { background: var(--zpl-bg2) !important; color: var(--zpl-ink); } /* ═════════════════════════════════════════════════════════════════════ COMBO BUILDER ZERO-PADDING MODIFIER When the user lands on Combo Builder via the top-level nav, the page header is hidden and there's no Zerodha Connect sub-tab strip — so we want the combo content to sit FLUSH at the top of .main-content, matching the visual density of Zerodha Map. The .zterm-page--combo class is added in zerodha_connect.html when active_main_tab=='combo' (see template). It cancels every layer of stacked padding/gutter that the default Sessions view needs. ═════════════════════════════════════════════════════════════════════ */ .zterm-page--combo, .zterm-page--combo .zterm-shell { padding: 0 !important; margin: 0 !important; background: var(--zpl-bg) !important; } .zterm-page--combo .row, .zterm-page--combo .row.g-3 { --bs-gutter-y: 0 !important; --bs-gutter-x: 0 !important; margin: 0 !important; } .zterm-page--combo .col-12 { padding: 0 !important; } .zterm-page--combo #zerodhaTabsContent { padding: 0 !important; margin: 0 !important; border: none !important; } .zterm-page--combo .tab-content, .zterm-page--combo .tab-content.border { padding: 0 !important; margin: 0 !important; border: none !important; background: var(--zpl-bg) !important; } .zterm-page--combo .tab-pane#zt-combo { padding: .35rem .5rem !important; } .zterm-page--combo #comboSubTabs { margin-top: 0 !important; margin-bottom: .35rem !important; } .zterm-page--combo .zpl-page-head { display: none !important; } /* ═════════════════════════════════════════════════════════════════════ GLOBAL TIGHTENING — pull every page tight to the top like Zerodha Map ═════════════════════════════════════════════════════════════════════ */ .main-content { padding: .35rem !important; } @media (max-width: 991.98px) { .main-content { padding: .25rem !important; } } /* For Zerodha Connect (non-combo) — keep the sub-tab strip near the top */ .zterm-page .zterm-shell { padding: 0 !important; } .zterm-page #zerodhaTabsContent { padding: .25rem 0 0 !important; } .zterm-page .tab-content.border { padding: .5rem !important; } .zterm-page .row.g-3 { --bs-gutter-y: .25rem !important; } /* For all .tk-* pages (algo_execution + matching_engines) */ .tk { padding: 0 !important; } .tk-pane { padding: .35rem .5rem !important; }