/*
 * Mobile-first responsive overrides.
 *
 * Default desktop layout is preserved; everything below is gated on
 * `max-width: 768px`. The strategy for data tables is the
 * "row-becomes-card" transform — each <tr> stacks into a vertical
 * block and each <td> renders as a labelled key/value pair using its
 * `data-label` attribute (injected at runtime by mobile-tables.js
 * from the corresponding <th> text).
 *
 * Forms collapse to one column; the navbar Bootstrap collapse handles
 * itself; primary action buttons go full-width.
 */

@media (max-width: 768px) {
    /* Tighter container so we don't waste edge pixels. */
    .container,
    main.container {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    /* Headings shrink so a single page heading doesn't dominate. */
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.25rem; }
    h3 { font-size: 1.1rem; }

    /* --- table → card transform --- */
    /* Opt-OUT with class="no-mobile-cards" if a table is already
       designed for narrow viewports (e.g. horizontal scroll wins). */
    table:not(.no-mobile-cards) {
        display: block;
        width: 100%;
        border: 0;
    }
    table:not(.no-mobile-cards) thead {
        /* Headers live in :before pseudo-elements on each cell;
           the original thead row would just clutter the stack. */
        display: none;
    }
    table:not(.no-mobile-cards) tbody {
        display: block;
        width: 100%;
    }
    table:not(.no-mobile-cards) tr {
        display: block;
        width: 100%;
        margin-bottom: 0.6rem;
        padding: 0.5rem 0.6rem;
        border: 1px solid rgba(0, 0, 0, 0.12);
        border-radius: 0.4rem;
        background: #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }
    table:not(.no-mobile-cards) tr.matcher-row,
    table:not(.no-mobile-cards) tr.bet-row,
    table:not(.no-mobile-cards) tr.scrape-row {
        /* Apps occasionally hover-style rows for desktop. Keep
           backgrounds visible inside the card transform. */
        background: #fff;
    }
    table:not(.no-mobile-cards) td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 0.75rem;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 0.25rem 0;
        border: 0;
        text-align: right;
    }
    table:not(.no-mobile-cards) td:not(:last-child) {
        border-bottom: 1px dashed rgba(0, 0, 0, 0.07);
    }
    table:not(.no-mobile-cards) td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #555;
        text-transform: none;
        text-align: left;
        flex: 0 0 40%;
        word-break: break-word;
    }
    /* Cells with no label (data-label="" or missing) get no leader
       and span the row. Used for action-button cells. */
    table:not(.no-mobile-cards) td[data-label=""],
    table:not(.no-mobile-cards) td:not([data-label]) {
        justify-content: flex-start;
        text-align: left;
        flex-wrap: wrap;
    }
    table:not(.no-mobile-cards) td[data-label=""]::before,
    table:not(.no-mobile-cards) td:not([data-label])::before {
        content: none;
    }

    /* Inputs / selects that lived inside table cells should not
       inflate beyond their parent on mobile. */
    table:not(.no-mobile-cards) td input,
    table:not(.no-mobile-cards) td select,
    table:not(.no-mobile-cards) td .form-control,
    table:not(.no-mobile-cards) td .form-select {
        max-width: 60%;
    }

    /* Specific overrides for "horizontal scroll wins" cases. The
       opt-out class is reserved — apply with class="no-mobile-cards"
       to keep the wide-table behaviour. */
    table.no-mobile-cards {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* --- forms --- */
    /* Bootstrap rows in forms — collapse to one column. */
    form .row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 0.5rem;
    }

    /* Inline form groups stack. */
    .form-inline,
    form.form-inline {
        flex-direction: column;
        align-items: stretch;
    }
    .form-inline > * {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    /* Grids of filter inputs (matcher, bet tracker) — let them wrap. */
    .filter-bar,
    .filter-row,
    .controls-row {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .filter-bar > *,
    .filter-row > *,
    .controls-row > * {
        flex: 1 1 calc(50% - 0.5rem);
        min-width: 0;
    }

    /* Primary action buttons fill the row on mobile to cut the
       chance of mis-taps. */
    .btn-primary,
    .btn-success,
    .btn-danger {
        width: 100%;
        margin-bottom: 0.4rem;
    }
    /* …unless they're inside a table card row (already adjacent). */
    table:not(.no-mobile-cards) td .btn,
    .btn-group .btn,
    .btn-toolbar .btn {
        width: auto;
        margin-bottom: 0;
    }

    /* Two-column dashboards / side-by-side panels collapse. */
    .row.dashboard,
    .two-pane,
    .side-by-side {
        flex-direction: column;
    }
    .row.dashboard > *,
    .two-pane > *,
    .side-by-side > * {
        width: 100%;
        max-width: 100%;
    }

    /* --- navbar / top bar --- */
    .navbar-brand {
        font-size: 1.05rem;
    }

    /* Modals / cards take full width. */
    .modal-dialog {
        margin: 0.4rem;
    }

    /* Tighter alert spacing. */
    .alert {
        padding: 0.5rem 0.75rem;
        font-size: 0.95rem;
    }

    /* Code-ish blocks that hold a lot of data scroll horizontally. */
    pre, code, .pre-scroll {
        overflow-x: auto;
        max-width: 100%;
    }
}

/* ---------- page-specific overrides ---------- */
@media (max-width: 768px) {
    /* odds_matcher: the toolbar is a custom flex bar with input
       boxes. Stack it vertically and let the boxes wrap. The 100vh
       wrap below it caps the table viewport — on mobile we drop
       the cap so the table grows naturally to its content. */
    .matcher-wrap {
        height: auto !important;
        padding: 0 !important;
    }
    .matcher-toolbar {
        flex-wrap: wrap;
        gap: 0.4rem;
        padding: 0.4rem 0 0.6rem;
    }
    .matcher-toolbar h2 { width: 100%; }
    .matcher-toolbar .commission-box,
    .matcher-toolbar .stale-box,
    .matcher-toolbar .preset-box {
        flex: 0 1 auto;
        flex-wrap: wrap;
    }
    .matcher-toolbar .refresh-status { margin-left: 0; width: 100%; }
    .matcher-toolbar .preset-box select { max-width: 100%; }

    /* Inside the matcher table: the back/lay cells use cell tinting
       to colour-code direction. On mobile that tint reads as a
       full-row background which is too loud; tone it down. */
    table.matcher td.back,
    table.matcher td.lay {
        padding: 0.25rem 0;
    }
    /* The age pill + odds + lay-meta inside a single mobile card row
       still want to align on a single visible value, so re-flow them. */
    table.matcher td .odds-row {
        justify-content: flex-end;
        flex-wrap: wrap;
    }
    /* The matcher table is wide; it would scroll horizontally if we
       let it. The card-transform (default) keeps everything readable.
       But the inner scroll container caps height — undo that. */
    .matcher-table-scroll {
        overflow: visible !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /* scrape_control: the .scrapes table has explicit per-column
       widths set inline (220px, 130px, …). On mobile those widths
       are nullified by our generic td override; that's already
       enough. The page also has a wide PRE block of recent runs
       — already handled by the generic pre rule. */

    /* bet_tracker: the form for adding a new bet is two-column on
       desktop. Generic .row > .col-* rule handles it. */

    /* odds_list / matched_list / manual_match: pure tables, the
       generic transform covers them. */

    /* acca_builder: also a card-list page — generic handling fits. */
}

/* Always: never let an image bust the viewport. */
img { max-width: 100%; height: auto; }

/* Bookie logos in tables stay tiny on mobile so the row stays compact. */
@media (max-width: 768px) {
    table img.bookie-logo,
    table img[alt*="logo"],
    table img[src*="/logos/"] {
        max-width: 40px;
        max-height: 24px;
    }
}