.landing {
    --pnl-positive: #16c784;
    --pnl-negative: #ea3943;
    --pnl-neutral: gray;
    font-family: IBM Plex Sans, -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;

    --pnl-bg-positive: #d4edda;
    --pnl-bg-negative: #f8d7da;
}

.landing .badge.bg-success {
    background-color: var(--pnl-bg-positive) !important;
    color: black;
}

.landing .badge.bg-danger {
    background-color: var(--pnl-bg-negative) !important;
    color: black;
}

.landing .badge.bg-secondary {
    background-color: #E0E0E0 !important;
    color: black;
}

.text-pnl-positive {
    color: var(--pnl-positive);
}

.text-pnl-negative {
    color: var(--pnl-negative);
}

.text-pnl-neutral {
    color: var(--pnl-neutral);
}

/* ============================================================
   Unified type scale & vertical rhythm for the public dashboards
   (home "/", "/live/", "/live-hidden/", PO pages). One fluid clamp()
   ramp replaces the old per-breakpoint overrides so title size and
   section spacing scale smoothly from ~360px phones up to desktop with
   no hard jump at 768px. Selectors are prefixed with `.landing` so they
   win over the section/hero padding declared in base.html's inline
   <style>.
   ============================================================ */

/* Section titles: single fluid size, ~1.4rem on phones → 2rem on
   desktop. Covers both headline h2 (P&L Chart / Today …) and section
   h2 (Key statistics, Monthly P&L, …) so every title matches. */
.landing h2 {
    font-size: clamp(1.4rem, 0.95rem + 1.9vw, 2rem);
    line-height: 1.2;
}

/* Vertical rhythm: ~28px between sections on phones → ~52px on desktop
   (tighter than the old 60px to balance the alternating-background
   bands and remove large empty gaps). */
.landing section {
    padding: clamp(1.75rem, 4vw, 3.25rem) 0;
}

/* Hero scales on the same ramp (56px phone → 100px desktop). */
.landing .hero {
    padding: clamp(56px, 10vw, 100px) 16px;
}

/* Consistent heading → content gap. Headline titles (h2.mb-0, e.g.
   "P&L Chart") intentionally sit flush above their chart and keep mb-0. */
.landing section h2.mb-4 {
    /* `!important` to override Bootstrap's `.mb-4 { ... !important }`. */
    margin-bottom: clamp(0.9rem, 2vw, 1.5rem) !important;
}

/* The fixed navbar overlays the top of the page, so the first dashboard
   section needs top clearance for its heading on every width. */
.landing #dashboard.mt-5 {
    margin-top: 0 !important;
    padding-top: clamp(72px, 9vw, 96px);
}

/* ============================================================
   Charts: give every chart a CSS-sized container so Chart.js
   (maintainAspectRatio:false) fills it reliably. A bare canvas in
   an inline-block wrapper collapses to ~2:1 on phones; an explicit
   container height keeps the plot readable and lets all charts on a
   page share the same width so their axes line up.
   ============================================================ */
.chart-box {
    position: relative;
    width: 100%;
}

.chart-box--pnl   { height: 500px; }
.chart-box--net   { height: 300px; }
.chart-box--gross { height: 200px; }

@media (max-width: 768px) {
    .chart-box--pnl   { height: 300px; }
    .chart-box--net   { height: 230px; }
    .chart-box--gross { height: 160px; }
}

@media (max-width: 480px) {
    .chart-box--pnl   { height: 260px; }
    .chart-box--net   { height: 200px; }
    .chart-box--gross { height: 150px; }
}

/* ============================================================
   Compact metric blocks on mobile (Today P&L, Monthly P&L,
   P&L by Metals). On phones the desktop card grid stacks into one
   tall card per item, which is a lot of scrolling. Collapse each
   card into a single compact row: name + RIC on the left, the %/$
   value as a coloured pill on the right. Desktop is unchanged.
   ============================================================ */
@media (max-width: 768px) {
    .metric-grid {
        --bs-gutter-y: 0.5rem;
    }

    .metric-grid .card {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        text-align: left !important;
        box-shadow: none !important;
        padding: 0.45rem 0.8rem;
    }

    .metric-grid .card-body {
        padding: 0;
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 0.1rem 0.5rem;
        flex: 1 1 auto;
        min-width: 0;
    }

    .metric-grid .card-title {
        font-size: 0.95rem;
        margin: 0;
    }

    .metric-grid .card-subtitle {
        font-size: 0.75rem;
        margin: 0 !important;
    }

    /* The %/$ value (rendered as a .card-footer by pnl_div) becomes a
       compact coloured pill aligned to the right of the row. */
    .metric-grid .card-footer {
        border-top: 0 !important;
        padding: 0.2rem 0.6rem !important;
        border-radius: 999px;
        white-space: nowrap;
        flex: 0 0 auto;
        font-size: 0.9rem;
    }
}

/* ============================================================
   Wide tables on mobile: keep the full data set but make the
   horizontal scroll obvious and keep the first (label) column
   in view while scrolling.
   ============================================================ */

/* Edge "there is more →" shadows. The .table-scroll wrapper and the
   two shadow elements are injected by JS (see landing/base.html); the
   shadows only light up when the table actually overflows, so desktop
   tables that fit show nothing. */
.table-scroll {
    position: relative;
    width: 100%;
}

.table-scroll__shadow {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 22px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 4;
}

.table-scroll__shadow--left {
    left: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0));
}

.table-scroll__shadow--right {
    right: 0;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0));
}

.table-scroll.has-left .table-scroll__shadow--left {
    opacity: 1;
}

.table-scroll.has-right .table-scroll__shadow--right {
    opacity: 1;
}

/* One-time "swipe" affordance shown over a wide table on mobile until the
   user scrolls it horizontally (toggled by the JS in base.html). */
.table-scroll__hint {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 5;
    display: none;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(0, 55, 86, 0.85);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    pointer-events: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.table-scroll.has-hint .table-scroll__hint { display: inline-flex; }

/* Key statistics: fixed layout keeps the four columns balanced at every width
   (the label column a touch wider, the three value columns equal). */
.key-stats-table {
    table-layout: fixed;
}
.key-stats-table col:first-child {
    width: 28%;
}
.key-stats-table th,
.key-stats-table td {
    vertical-align: middle;
}

/* Mobile transposed Monthly P&L table: even, monospaced digit widths so the
   percentage columns line up cleanly down the page. */
.monthly-matrix-mobile th,
.monthly-matrix-mobile td {
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
}

/* Slightly tighter rows so the 12-month list reads denser, not as a long strip. */
.monthly-matrix-mobile > :not(caption) > * > * {
    padding: 0.4rem 0.7rem;
}

/* Finance-style numeric alignment: values flush right (decimals line up down
   each column), the month/Total labels stay left. */
.monthly-matrix-mobile thead th:not(:first-child),
.monthly-matrix-mobile tbody td {
    text-align: right;
}

/* Separate the summary from the monthly data with a stronger divider. */
.monthly-matrix-mobile .monthly-total > tr > * {
    border-top: 2px solid #adb5bd;
}

/* Collapsible months: by default only the header + Total row show (compact);
   the toggle reveals the 12 month rows. Total is never hidden. */
.monthly-matrix-mobile-wrap.collapsed .monthly-months {
    display: none;
}

.monthly-matrix-mobile-wrap .monthly-toggle-show,
.monthly-matrix-mobile-wrap.collapsed .monthly-toggle-hide {
    display: none;
}

.monthly-matrix-mobile-wrap.collapsed .monthly-toggle-show {
    display: inline;
}

.monthly-matrix-mobile-wrap .monthly-toggle {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: #6c757d;
}

.monthly-matrix-mobile-wrap .monthly-toggle:hover {
    color: #343a40;
}

/* No lingering blue focus box after a mouse/touch tap; keep a ring only for
   keyboard navigation (accessibility). */
.monthly-matrix-mobile-wrap .monthly-toggle:focus {
    box-shadow: none;
}

.monthly-matrix-mobile-wrap .monthly-toggle:focus-visible {
    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.3);
    border-radius: 0.25rem;
}

.monthly-matrix-mobile-wrap .monthly-toggle .bi {
    display: inline-block;
    margin-left: 0.35rem;
    font-size: 0.7rem;
    transition: transform 0.2s ease;
}

.monthly-matrix-mobile-wrap:not(.collapsed) .monthly-toggle .bi {
    transform: rotate(180deg);
}

/* Sticky first column + compact cells — phones/tablets only. */
@media (max-width: 768px) {
    /* Pin the label column (Date / metric name) so the numbers a user
       scrolls to stay attached to their row header. The cell needs a
       solid background to cover the columns sliding underneath. */
    .table-sticky-col > thead > tr:first-child > th:first-child,
    .table-sticky-col > tbody > tr > th:first-child,
    .table-sticky-col > tbody > tr > td:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        background-color: #f1f3f5;
        box-shadow: 1px 0 0 0 #dee2e6;
    }

    .table-sticky-col > thead > tr:first-child > th:first-child {
        z-index: 3;
    }

    /* Reclaim width: smaller font + tighter padding on wide tables. */
    .table-responsive .table {
        font-size: 0.8rem;
    }

    .table-responsive .table > :not(caption) > * > * {
        padding: 0.4rem 0.5rem;
    }

    /* Key statistics on phones: the whole table fits the screen (no horizontal
       scroll). The label column gets the room it needs and wraps to at most two
       lines, while the numeric cells stay on a single line so rows look even.
       The "Bloomberg Commodity Index" header collapses to "BCOM" (see partial). */
    .key-stats-table col:first-child {
        width: 37%;
    }
    .key-stats-table thead th,
    .key-stats-table tbody th {
        white-space: normal;
    }
    .key-stats-table tbody td {
        white-space: nowrap;
    }

    .dark-mode .table-sticky-col > thead > tr:first-child > th:first-child,
    .dark-mode .table-sticky-col > tbody > tr > th:first-child,
    .dark-mode .table-sticky-col > tbody > tr > td:first-child {
        background-color: #2a2a2a;
        box-shadow: 1px 0 0 0 #444;
    }

    /* Pin the trailing summary column (e.g. "Total") to the right edge so it
       stays visible without scrolling to the end of a wide table. Mirrors the
       left sticky column above. The body cell keeps an opaque background so the
       scrolling columns slide underneath it (its coloured pill sits on top). */
    .table-sticky-col-right > thead > tr:first-child > th:last-child,
    .table-sticky-col-right > tbody > tr > td:last-child {
        position: sticky;
        right: 0;
        z-index: 2;
        background-color: #fff;
        box-shadow: -1px 0 0 0 #dee2e6;
    }

    .table-sticky-col-right > thead > tr:first-child > th:last-child {
        z-index: 3;
        background-color: #f1f3f5;
    }

    .dark-mode .table-sticky-col-right > thead > tr:first-child > th:last-child,
    .dark-mode .table-sticky-col-right > tbody > tr > td:last-child {
        background-color: #2a2a2a;
        box-shadow: -1px 0 0 0 #444;
    }

    /* The floating controls (the %/$ pill bottom-left on /live/ and the
       back-to-top button bottom-right) are pinned ~20px from the bottom edge.
       At the very end of the page they sat on top of the footer text and the
       last section's content, which the user can no longer scroll out from
       under them. Reserve clearance below the footer so the page can scroll a
       little further and nothing important stays trapped behind the controls. */
    .landing .footer {
        padding-bottom: 84px;
    }
}