/* ============================================================
   mobile.css — responsive overrides for bond-math-viz
   Inline styles in the app use !important overrides below.
   ============================================================ */

/* ── Tablet and below (≤768px) ─────────────────────────────── */
@media (max-width: 768px) {

    /* --- Root layout: full height scrollable instead of locked ---  */
    #_dash-app-content > div,
    #react-entry-point  > div {
        height: auto !important;
        overflow: visible !important;
    }

    /* --- Body: sidebar stacks above main content --- */
    #app-body {
        flex-direction: column !important;
        overflow: visible !important;
        height: auto !important;
    }

    /* --- Sidebar: full-width horizontal strip with scroll --- */
    #app-sidebar {
        width: 100% !important;
        min-width: 0 !important;
        max-height: 220px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        border-right: none !important;
        border-bottom: 1px solid #252840 !important;
        padding: 12px 14px !important;
        flex-shrink: 0 !important;
    }

    /* --- Par rate inputs: 4-column grid --- */
    #par-inputs-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 6px 8px !important;
    }

    /* Each par input wrapper: remove bottom margin (grid handles spacing) */
    #par-inputs-grid > div {
        margin-bottom: 0 !important;
    }

    /* Par input labels: smaller in grid layout */
    #par-inputs-grid label {
        font-size: 9px !important;
        margin-bottom: 2px !important;
        display: block;
    }

    /* --- Main panel: allow vertical scroll --- */
    #app-body > div:last-child {
        flex: 1 1 auto !important;
        overflow: visible !important;
        min-height: 0;
    }

    /* --- Tab labels: compact --- */
    .custom-tabs .tab,
    .custom-tabs .tab--selected {
        padding: 8px 10px !important;
        font-size: 10px !important;
    }

    /* --- Tab content areas: allow natural height --- */
    .custom-tabs + div,
    [id$="-tab"] {
        overflow: visible !important;
        height: auto !important;
    }

    /* --- Metric strips: horizontal scroll, no wrap --- */
    #dur-metrics-strip,
    #rd-metrics-strip,
    #pricer-metrics-strip,
    #ps-summary-strip,
    #yc-summary-strip {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }

    /* Prevent metric cards from shrinking to nothing */
    #dur-metrics-strip    > div,
    #rd-metrics-strip     > div,
    #pricer-metrics-strip > div,
    #ps-summary-strip     > div,
    #yc-summary-strip     > div {
        flex-shrink: 0 !important;
        min-width: 80px !important;
    }

    /* --- Side-by-side chart pairs: stack vertically --- */
    /* Yield curve: par+spot chart and forward chart are already full-width */
    /* Duration, Roll-Down, Portfolio use flex rows of cards */
    [id$="-tab"] > div[style*="display: flex"],
    [id$="-tab"] > div > div[style*="display: flex"] {
        flex-direction: column !important;
    }

    /* Cards (chart wrappers) go full width */
    [id$="-tab"] .dash-graph {
        width: 100% !important;
    }

    /* --- Data tables: horizontal scroll --- */
    .dash-spreadsheet-container,
    table {
        overflow-x: auto !important;
        display: block !important;
        max-width: 100%;
    }

    /* Wrapper divs around tables */
    div[style*="overflowX: auto"],
    div[style*="overflow-x: auto"] {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* --- Chart heights: reduce on small screens --- */
    .js-plotly-plot,
    .plotly {
        min-height: 200px;
    }

    /* --- Tab description header: wrap text --- */
    #tab-header {
        white-space: normal !important;
        padding: 8px 14px !important;
    }

    /* --- Dropdown menus: full width --- */
    .Select-control,
    .dash-dropdown {
        width: 100% !important;
    }

    /* --- Sliders: ensure touch targets are big enough --- */
    .rc-slider-handle {
        width: 16px !important;
        height: 16px !important;
        margin-top: -6px !important;
    }
}


/* ── Phone (≤480px) — tighter spacing ──────────────────────── */
@media (max-width: 480px) {

    /* Even smaller sidebar */
    #app-sidebar {
        max-height: 200px !important;
        padding: 10px 10px !important;
        font-size: 10px !important;
    }

    /* Par grid: 4 columns still, but tighter */
    #par-inputs-grid {
        gap: 4px 6px !important;
    }

    #par-inputs-grid input {
        font-size: 10px !important;
        padding: 3px 5px !important;
    }

    /* Tab labels: minimal */
    .custom-tabs .tab,
    .custom-tabs .tab--selected {
        padding: 6px 7px !important;
        font-size: 9px !important;
    }

    /* Metric cards: smaller text */
    #dur-metrics-strip    > div,
    #rd-metrics-strip     > div,
    #pricer-metrics-strip > div,
    #ps-summary-strip     > div,
    #yc-summary-strip     > div {
        min-width: 70px !important;
        padding: 6px 8px !important;
    }

    /* Headline big cards (Price, BPV) */
    #dur-metrics-strip > div > div:last-child {
        font-size: 16px !important;
    }

    /* Chart minimum height on phone */
    .js-plotly-plot,
    .plotly {
        min-height: 180px;
    }

    /* Tab description: smaller */
    #tab-header {
        font-size: 10px !important;
        padding: 6px 10px !important;
    }

    /* Sidebar section labels */
    #app-sidebar > div[style*="letterSpacing"] {
        font-size: 8px !important;
    }

    /* Reduce section label spacing */
    #app-sidebar > div[style*="marginBottom: 16px"],
    #app-sidebar > div[style*="marginBottom: 14px"] {
        margin-bottom: 8px !important;
    }
}