/* ================================================================
 * responsive-tier1.css — Tier-1 additive baseline for cross-viewport fit
 * SAFETY: every rule is viewport-gated + additive. Deleting this file
 * returns the app to its exact prior behaviour.
 * ================================================================ */

:root {
    --bp-narrow: 1366px;
    --bp-mid:    1600px;
    --bp-wide:   1920px;
    --bp-huge:   2400px;
    --content-max-w: 1800px;
}

/* 1. Cap page-content on ultra-wide monitors (27"+). Nothing analytical
 *    needs to be wider than 1800px, and widgets read poorly when stretched. */
@media (min-width: 1900px) {
    .page-content {
        max-width: var(--content-max-w);
        margin-left: auto;
        margin-right: auto;
    }
}

/* 2. Confine wide tables inside their own scroll containers so they
 *    don't force the whole page to horizontal-scroll on narrow laptops. */
.ioc-table-wrap,
.apik-table-wrap,
.report-table-wrap,
.cb-hm-wrap,
[class*="-table-wrap"] {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.page-content > table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* 3. Prevent horizontal page overflow on 14" laptops (1366px). Contains
 *    misbehaving inline min-widths without breaking position:sticky. */
@media (max-width: 1366px) {
    .main-content {
        max-width: 100vw;
        overflow-x: hidden;
    }
    .toolbar[style*="min-width"],
    .filter-bar[style*="min-width"] {
        min-width: 0 !important;
        flex-wrap: wrap;
    }
}

/* 4. Font-size floor for 14"/125% OS scaling. */
@media (max-width: 1366px) {
    body { font-size: 14px; }
    .kg-input, .apik-btn, .cb-pills button {
        font-size: max(0.72rem, 11px);
    }
}

/* 5. Cap oversized SVG visualisations on 27"+ so they stay readable
 *    as a single glanceable image, not a wall-sized poster. */
@media (min-width: 2000px) {
    .cb-hm-wrap svg,
    .cb-sun-svg,
    .cb-map-svg,
    .ga-svg,
    .stl-svg,
    .radar-svg,
    #intel360-pyramid svg {
        max-width: 1400px;
        margin: 0 auto;
        display: block;
    }
}

/* 6. Prevent sticky-hover on touch trackpads (Safari, Windows tablet mode). */
@media (hover: none) {
    .nav-item:hover { background: inherit; }
}