/*
 * NETCAP Global Market Watch — Frontend Styles
 * Network Capital Limited  ·  v1.1.14
 *
 * SCROLL PREVENTION STRATEGY
 * ═══════════════════════════════════════════════════════════════════════════
 * The TradingView <tv-market-data> web component renders an internal Shadow
 * DOM and creates an iframe. Because the iframe lives inside Shadow DOM, you
 * cannot target it directly with CSS selectors. This means traditional
 * approaches like .widget iframe { max-width:100% } have no effect.
 *
 * The solution is a three-layer containment stack:
 *
 *  1. .netcap-market-card
 *     max-width: 1200px — approved compact desktop width.
 *     margin: 0 auto    — centre the card instead of stretching full-page.
 *     overflow: hidden  — legacy clip for browsers that don't support "clip".
 *
 *  2. .netcap-tv-scroll-guard   ← NEW in v1.1.0
 *     overflow: clip            — hard clip, no scrollbar created at all.
 *     contain: paint            — "paint containment" traps the Shadow DOM
 *                                  iframe so it cannot escape this boundary.
 *     position: relative        — needed for contain:paint to take effect.
 *
 *  3. tv-market-data (the custom element itself)
 *     min-width: 0              — allows the element to shrink below the
 *                                  browser's or component's own minimum width.
 *                                  THIS IS THE PRIMARY HORIZONTAL-SCROLL FIX.
 *     max-width: 100%           — hard cap on width.
 *     display: block            — flex/grid children need this or they may
 *                                  revert to inline sizing.
 *
 * ResizeObserver (in assets/js/netcap-market-pulse.js) handles vertical sizing so
 * no internal TradingView scrollbar ever appears regardless of symbol count.
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ── Card shell ───────────────────────────────────────────────────────────── */

.netcap-market-card {
    font-family: Inter, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

    /* Approved compact desktop width.
       The earlier patched version used a centred 1200px card; do not
       stretch this widget full-page because it makes the table visually
       too wide on desktop monitors. */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;

    /* Visual presentation. The audited NETCAP component intentionally uses
       a fixed light corporate palette so its shell remains consistent with the
       TradingView surface instead of switching independently with OS dark mode. */
    color-scheme: light;
    background: #ffffff;
    border: 1px solid #d5dfec;
    border-radius: 14px;
    overflow: hidden;       /* Clips anything that escapes inner layers. */
    box-shadow: 0 4px 20px rgba(15, 43, 91, 0.09),
                0 1px 4px  rgba(15, 43, 91, 0.06);

    /* Prevent the card from growing a horizontal scrollbar.
       "clip" is preferred over "hidden" because it does not create a new
       scroll container — content is hard-clipped without a scrollbar. */
    overflow-x: clip;

    /* Block display so width:100% works correctly inside flex/grid parents. */
    display: block;

    /* Guard against box-sizing differences from theme resets. */
    box-sizing: border-box;
}

/* ── Header ───────────────────────────────────────────────────────────────── */

.netcap-market-header {
    /* NCL brand gradient: Navy #0F2B5B → Blue #1D5FA8 */
    background: linear-gradient(135deg, #0F2B5B 0%, #1D5FA8 65%, #3a82d0 100%);
    color: #ffffff;
    padding: 18px 24px 16px;
}

.netcap-market-header .netcap-market-title {
    margin: 0;
    padding: 0;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #ffffff;
    border: none;
    background: none;
    box-shadow: none;
}

.netcap-market-header .netcap-market-sub {
    margin: 6px 0 0;
    padding: 0;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
    opacity: 0.92;
}


/* ── TradingView section row colours ────────────────────────────────────────
 *
 * The actual configured section-title rows are rendered inside TradingView's
 * web component. assets/js/netcap-market-pulse.js applies reusable colour-tone
 * bands directly to those rows when the component exposes an open Shadow DOM.
 * A separate chip legend is intentionally not rendered because the section
 * rows themselves should carry the distinction.
 */

/* ── LAYER 2: Scroll guard container ─────────────────────────────────────── */

.netcap-tv-scroll-guard {
    /*
     * Hard containment boundary.
     *
     * overflow:clip — Nothing inside this element can ever trigger a
     *   scrollbar on this element or on any ancestor. This is the key
     *   property that stops the Shadow DOM iframe from causing page scroll.
     *
     * contain:paint — Tells the browser that painting for this element and
     *   all descendants is clipped to this element's border-box. The browser
     *   will not paint the Shadow DOM iframe outside this boundary.
     *
     * position:relative — Required for contain:paint to take effect.
     */
    position: relative;
    overflow: clip;
    contain: paint;

    /* Ensure it fills the card horizontally. */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* ── LAYER 3: Widget inner wrapper ────────────────────────────────────────── */

.netcap-tv-market-pulse {
    position: relative;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background: #ffffff;

    /*
     * overflow:clip prevents this element from becoming a scroll container.
     * The height is set here as a safe CSS fallback; the ResizeObserver
     * script overrides it with the actual rendered height once the web
     * component has painted.
     */
    overflow: clip;

    /*
     * Compact fallback height.
     * The external sizing script calculates a symbol-count-based height and
     * expands only when TradingView needs more vertical space.
     */
    height: 1248px;
    min-height: 980px;

    /* Smooth height transitions when ResizeObserver updates the height. */
    transition: height 0.25s ease;
}

/* ── LAYER 4: The TradingView custom element ──────────────────────────────── */

.netcap-tv-market-pulse tv-market-data {
    /*
     * display:block is critical — without it, the custom element may default
     * to inline-block sizing and ignore width constraints.
     */
    display: block;

    /*
     * Width rules:
     *   width:100%     — fill the parent.
     *   max-width:100% — hard cap so it never exceeds the parent.
     *   min-width:0    — THIS IS THE PRIMARY HORIZONTAL-SCROLL FIX.
     *                    Browser default for replaced/inline elements is
     *                    min-width:auto which allows elements to be wider
     *                    than their container. Setting min-width:0 lets
     *                    the element shrink to fit any container width.
     */
    width: 100%;
    max-width: 100%;
    min-width: 0;

    /* Same height as parent — ResizeObserver updates both together. */
    height: 100%;

    /* Text colour for any visible text rendered by the component. */
    color: #111827;
}


/* Defensive scrollbar suppression for the host/wrapper layers.
 * The TradingView iframe content itself is cross-origin, but when a browser
 * exposes a host-element scrollbar, these rules prevent the thin right-edge
 * line from appearing. Height buffering above remains the primary fix. */
.netcap-tv-scroll-guard,
.netcap-tv-market-pulse,
.netcap-tv-market-pulse tv-market-data {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.netcap-tv-scroll-guard::-webkit-scrollbar,
.netcap-tv-market-pulse::-webkit-scrollbar,
.netcap-tv-market-pulse tv-market-data::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}


/* ── Failure fallback ─────────────────────────────────────────────────────── */

.netcap-market-fallback {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 24px;
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 650;
    color: #475467;
    background: #f9fafb;
    box-sizing: border-box;
}

.netcap-market-fallback[hidden] {
    display: none;
}

.netcap-market-is-unavailable tv-market-data {
    visibility: hidden;
}

/* ── Footer / attribution ─────────────────────────────────────────────────── */

.netcap-market-source {
    padding: 9px 20px 11px;
    text-align: center;
    font-size: 11.5px;
    line-height: 1.45;
    color: #667085;
    background: #f9fafb;
    border-top: 1px solid #eef2f7;
    font-style: italic;
    letter-spacing: 0.01em;
}


/* Finite external-CSS height buckets avoid runtime style attributes under CSP. */
.netcap-tv-market-pulse.netcap-gmw-height-1250 { height: 1250px; }
.netcap-tv-market-pulse.netcap-gmw-height-1300 { height: 1300px; }
.netcap-tv-market-pulse.netcap-gmw-height-1350 { height: 1350px; }
.netcap-tv-market-pulse.netcap-gmw-height-1400 { height: 1400px; }
.netcap-tv-market-pulse.netcap-gmw-height-1450 { height: 1450px; }
.netcap-tv-market-pulse.netcap-gmw-height-1500 { height: 1500px; }
.netcap-tv-market-pulse.netcap-gmw-height-1550 { height: 1550px; }
.netcap-tv-market-pulse.netcap-gmw-height-1600 { height: 1600px; }
.netcap-tv-market-pulse.netcap-gmw-height-1650 { height: 1650px; }
.netcap-tv-market-pulse.netcap-gmw-height-1700 { height: 1700px; }
.netcap-tv-market-pulse.netcap-gmw-height-1750 { height: 1750px; }
.netcap-tv-market-pulse.netcap-gmw-height-1800 { height: 1800px; }
.netcap-tv-market-pulse.netcap-gmw-height-1850 { height: 1850px; }
.netcap-tv-market-pulse.netcap-gmw-height-1900 { height: 1900px; }
.netcap-tv-market-pulse.netcap-gmw-height-1950 { height: 1950px; }
.netcap-tv-market-pulse.netcap-gmw-height-2000 { height: 2000px; }
.netcap-tv-market-pulse.netcap-gmw-height-2050 { height: 2050px; }
.netcap-tv-market-pulse.netcap-gmw-height-2100 { height: 2100px; }
.netcap-tv-market-pulse.netcap-gmw-height-2150 { height: 2150px; }
.netcap-tv-market-pulse.netcap-gmw-height-2200 { height: 2200px; }
.netcap-tv-market-pulse.netcap-gmw-height-2250 { height: 2250px; }
.netcap-tv-market-pulse.netcap-gmw-height-2300 { height: 2300px; }
.netcap-tv-market-pulse.netcap-gmw-height-2350 { height: 2350px; }
.netcap-tv-market-pulse.netcap-gmw-height-2400 { height: 2400px; }
.netcap-tv-market-pulse.netcap-gmw-height-2450 { height: 2450px; }
.netcap-tv-market-pulse.netcap-gmw-height-2500 { height: 2500px; }
.netcap-tv-market-pulse.netcap-gmw-height-2550 { height: 2550px; }
.netcap-tv-market-pulse.netcap-gmw-height-2600 { height: 2600px; }
.netcap-tv-market-pulse.netcap-gmw-height-2650 { height: 2650px; }
.netcap-tv-market-pulse.netcap-gmw-height-2700 { height: 2700px; }
.netcap-tv-market-pulse.netcap-gmw-height-2750 { height: 2750px; }
.netcap-tv-market-pulse.netcap-gmw-height-2800 { height: 2800px; }
.netcap-tv-market-pulse.netcap-gmw-height-2850 { height: 2850px; }
.netcap-tv-market-pulse.netcap-gmw-height-2900 { height: 2900px; }
.netcap-tv-market-pulse.netcap-gmw-height-2950 { height: 2950px; }
.netcap-tv-market-pulse.netcap-gmw-height-3000 { height: 3000px; }
.netcap-tv-market-pulse.netcap-gmw-height-3050 { height: 3050px; }
.netcap-tv-market-pulse.netcap-gmw-height-3100 { height: 3100px; }
.netcap-tv-market-pulse.netcap-gmw-height-3150 { height: 3150px; }
.netcap-tv-market-pulse.netcap-gmw-height-3200 { height: 3200px; }
.netcap-tv-market-pulse.netcap-gmw-height-3250 { height: 3250px; }
.netcap-tv-market-pulse.netcap-gmw-height-3300 { height: 3300px; }
.netcap-tv-market-pulse.netcap-gmw-height-3350 { height: 3350px; }
.netcap-tv-market-pulse.netcap-gmw-height-3400 { height: 3400px; }
.netcap-tv-market-pulse.netcap-gmw-height-3450 { height: 3450px; }
.netcap-tv-market-pulse.netcap-gmw-height-3500 { height: 3500px; }
.netcap-tv-market-pulse.netcap-gmw-height-3550 { height: 3550px; }
.netcap-tv-market-pulse.netcap-gmw-height-3600 { height: 3600px; }
.netcap-tv-market-pulse.netcap-gmw-height-3650 { height: 3650px; }
.netcap-tv-market-pulse.netcap-gmw-height-3700 { height: 3700px; }
.netcap-tv-market-pulse.netcap-gmw-height-3750 { height: 3750px; }
.netcap-tv-market-pulse.netcap-gmw-height-3800 { height: 3800px; }
.netcap-tv-market-pulse.netcap-gmw-height-3850 { height: 3850px; }
.netcap-tv-market-pulse.netcap-gmw-height-3900 { height: 3900px; }
.netcap-tv-market-pulse.netcap-gmw-height-3950 { height: 3950px; }
.netcap-tv-market-pulse.netcap-gmw-height-4000 { height: 4000px; }
.netcap-tv-market-pulse.netcap-gmw-height-4250 { height: 4250px; }
.netcap-tv-market-pulse.netcap-gmw-height-4500 { height: 4500px; }
.netcap-tv-market-pulse.netcap-gmw-height-4750 { height: 4750px; }
.netcap-tv-market-pulse.netcap-gmw-height-5000 { height: 5000px; }
.netcap-tv-market-pulse.netcap-gmw-height-5250 { height: 5250px; }
.netcap-tv-market-pulse.netcap-gmw-height-5500 { height: 5500px; }
.netcap-tv-market-pulse.netcap-gmw-height-5750 { height: 5750px; }
.netcap-tv-market-pulse.netcap-gmw-height-6000 { height: 6000px; }
.netcap-tv-market-pulse.netcap-gmw-height-6250 { height: 6250px; }
.netcap-tv-market-pulse.netcap-gmw-height-6500 { height: 6500px; }
.netcap-tv-market-pulse.netcap-gmw-height-6750 { height: 6750px; }
.netcap-tv-market-pulse.netcap-gmw-height-7000 { height: 7000px; }
.netcap-tv-market-pulse.netcap-gmw-height-7250 { height: 7250px; }
.netcap-tv-market-pulse.netcap-gmw-height-7500 { height: 7500px; }
.netcap-tv-market-pulse.netcap-gmw-height-7750 { height: 7750px; }
.netcap-tv-market-pulse.netcap-gmw-height-8000 { height: 8000px; }
.netcap-tv-market-pulse.netcap-gmw-height-8250 { height: 8250px; }
.netcap-tv-market-pulse.netcap-gmw-height-8500 { height: 8500px; }
.netcap-tv-market-pulse.netcap-gmw-height-8750 { height: 8750px; }
.netcap-tv-market-pulse.netcap-gmw-height-9000 { height: 9000px; }
.netcap-tv-market-pulse.netcap-gmw-height-9250 { height: 9250px; }
.netcap-tv-market-pulse.netcap-gmw-height-9500 { height: 9500px; }
.netcap-tv-market-pulse.netcap-gmw-height-9750 { height: 9750px; }
.netcap-tv-market-pulse.netcap-gmw-height-10000 { height: 10000px; }
.netcap-tv-market-pulse.netcap-gmw-height-10250 { height: 10250px; }
.netcap-tv-market-pulse.netcap-gmw-height-10500 { height: 10500px; }
.netcap-tv-market-pulse.netcap-gmw-height-10750 { height: 10750px; }
.netcap-tv-market-pulse.netcap-gmw-height-11000 { height: 11000px; }
.netcap-tv-market-pulse.netcap-gmw-height-11250 { height: 11250px; }
.netcap-tv-market-pulse.netcap-gmw-height-11500 { height: 11500px; }
.netcap-tv-market-pulse.netcap-gmw-height-11750 { height: 11750px; }
.netcap-tv-market-pulse.netcap-gmw-height-12000 { height: 12000px; }

/* ── Responsive breakpoints ───────────────────────────────────────────────── */

/*
 * Breakpoint 1: tablets and small desktops (< 1024px)
 * Slight header reduction, no layout change.
 */
@media screen and (max-width: 1024px) {
    .netcap-market-header {
        padding: 16px 20px 14px;
    }

    .netcap-market-header .netcap-market-title {
        font-size: 21px;
    }
}

/*
 * Breakpoint 2: large phones and small tablets (< 768px)
 * At these widths TradingView may reconfigure its internal layout which
 * can increase the rendered height. We increase our fallback height to
 * compensate. ResizeObserver still overrides this dynamically.
 */
@media screen and (max-width: 768px) {
    .netcap-market-card {
        border-radius: 10px;
    }

    .netcap-market-header {
        padding: 14px 18px 13px;
    }

    .netcap-market-header .netcap-market-title {
        font-size: 19px;
    }

    .netcap-market-header .netcap-market-sub {
        font-size: 12px;
    }

    /*
     * On mobile the TradingView widget stacks each row taller,
     * so we increase the fallback height.
     */
    .netcap-tv-market-pulse {
        height: 1450px;
        min-height: 1120px;
    }


    .netcap-market-source {
        font-size: 11px;
        padding: 8px 14px 10px;
    }
}

/*
 * Breakpoint 3: narrow phones (< 480px)
 * Tighten the header and further increase fallback height in case
 * TradingView widens individual rows at very narrow viewports.
 */
@media screen and (max-width: 480px) {
    .netcap-market-header {
        padding: 12px 14px 11px;
    }

    .netcap-market-header .netcap-market-title {
        font-size: 17px;
        letter-spacing: -0.01em;
    }

    .netcap-market-header .netcap-market-sub {
        font-size: 11.5px;
        margin-top: 4px;
    }


    .netcap-tv-market-pulse {
        height: 1640px;
        min-height: 1260px;
    }
}


/*
 * Accessibility: respect users who request reduced motion.
 * The ResizeObserver can update the widget height several times while
 * TradingView loads; users with reduced-motion preference should not see
 * animated height changes.
 */
@media (prefers-reduced-motion: reduce) {
    .netcap-tv-market-pulse {
        transition: none;
    }
}

/*
 * Print styles — hide the widget in print output since TradingView data
 * is live and would be meaningless in a printed document.
 */
@media print {
    .netcap-market-card {
        display: none;
    }
}