/*
 * responsive.css — global mobile/responsive layer (v1)
 *
 * Loaded on every tenant page:
 *   - navbar.php emits <link rel="stylesheet" href="responsive.css"> (all pages include navbar)
 *   - theme_loader.php's themeLink() also emits it AFTER the tenant theme CSS,
 *     so these rules win ties against theme rules by source order.
 *
 * Scope: LAYOUT ONLY. No font-family, font-size*, or color changes — this file
 * also loads on invoicing.php, which is intentionally untheme'd; its fonts,
 * colors, pills and table chrome must never be touched from here.
 * (*one exception: tap-target sizing uses min-height, not font metrics.)
 *
 * Breakpoints:
 *   ≤768px — phones / small tablets (containers, nav, tables, grids → 2-col)
 *   ≤480px — phones portrait (forms full-width, grids → 1-col)
 *
 * History note: the global mobile rules that used to live in navbar.php's
 * <style> block (95%-width containers, fixed-layout table hacks) were migrated
 * here; the per-column td width hacks were replaced by the horizontal-scroll
 * table pattern below.
 */

/* ════════════════ ≤768px — phones & small tablets ════════════════ */
@media (max-width: 768px) {

    /* ── 1. Content images never overflow their container ── */
    .content img,
    .account-section img,
    .section img,
    #auction-container img,
    .description-container img,
    header img,
    footer img {
        max-width: 100% !important;
        height: auto;
    }
    .site-logo {
        max-width: 100% !important;
    }

    /* ── 2. 80%-width page containers widen to ~96%, lighter padding ──
       Matches the shared container pattern used by index.php,
       view_auction.php, my_account.php, buyer_checkout.php, login.php,
       settings.php, auction_info.php, etc. Pages emit these widths in
       per-page <style> blocks, hence the !important. */
    header,
    footer,
    .content,
    .section,
    .account-section,
    .carousel-box,
    .tag-section,
    #auction-container,
    #settings-container,
    .info-container,
    .info-section,
    .description-container,
    .login-form {
        width: 96% !important;
        padding: 12px !important;
        box-sizing: border-box !important;
    }

    /* view_auction.php description block: full-bleed and centered (migrated
       verbatim from the old navbar.php mobile block). */
    .description-container {
        text-align: center !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .description-container * {
        text-align: center !important;
    }

    /* Lot thumbnails + share buttons (view_auction.php) */
    .content .thumbnail {
        width: 80px !important;
        height: auto !important;
        display: inline-block !important;
        margin: 5px !important;
    }
    .share-buttons a {
        padding: 8px 12px !important;
        margin: 3px !important;
    }

    /* Carousel strips (index.php) */
    .carousel-box img,
    .carousel-item img {
        max-width: 60px !important;
        height: auto !important;
    }

    /* Forms fill their container; navbar.php re-overrides its own login
       form (later in source order) so the top-bar form is unaffected. */
    form {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* ── 3. Data tables — horizontal scroll (safe v1) ──
       Big listing/account tables become block-level scroll regions instead
       of squishing. Scoped to the public/account containers; invoicing.php's
       #buyers-table lives inside .buyers-table-wrap (not a direct child of
       .section), so it only gets the wrapper-scroll rule below — no display
       change, no font/color change. Inner layout tables inside invoicing's
       panels are also excluded by the direct-child .section selector. */
    .content table,
    .account-section table,
    #auction-container table,
    .section > table,
    table.responsive-stack {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
        width: 100% !important;
        white-space: nowrap;
    }
    /* Cells may wrap internally up to a cap so a long description column
       doesn't force a mile of sideways scroll. */
    .content table td,
    .account-section table td,
    #auction-container table td,
    .section > table td,
    table.responsive-stack td {
        white-space: normal;
        overflow-wrap: break-word;
        max-width: 240px;
        vertical-align: top;
    }
    /* Generic scroll wrapper — layout-only, safe on invoicing.php. */
    .buyers-table-wrap,
    .responsive-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
    /* Thumbnails inside listing tables stay small (migrated from navbar.php). */
    table img {
        max-width: 70px !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
    }

    /* ── 4. Tap targets ── */
    .content button,
    .content input[type="submit"],
    .account-section button,
    .account-section input[type="submit"],
    .login-form button,
    .login-form input[type="submit"] {
        min-height: 44px;
    }

    /* ── 5. Card grids → 2 columns ──
       theme_modern / theme_gallery / theme_boutique all build their listing
       grid as .lot-grid (auto-fill minmax). This wins over their own ≤768px
       rules by source order. .lot-card is shared by all three. */
    .lot-grid {
        grid-template-columns: repeat(2, 1fr);
        width: 96% !important;
        gap: 14px;
    }
    /* buyer_checkout.php payment-method picker stacks */
    .method-picker .method-card {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* ════════════════ ≤480px — portrait phones ════════════════ */
@media (max-width: 480px) {

    /* Card grids → single column */
    .lot-grid {
        grid-template-columns: 1fr;
    }

    /* Forms: controls go full-width with comfortable tap targets.
       Scoped to page content containers so the navbar login row and
       invoicing.php's dense .btn-sm action stacks are untouched. */
    .content input:not([type="checkbox"]):not([type="radio"]),
    .content select,
    .content textarea,
    .content button,
    .account-section input:not([type="checkbox"]):not([type="radio"]),
    .account-section select,
    .account-section textarea,
    .account-section button,
    #auction-container input:not([type="checkbox"]):not([type="radio"]),
    #auction-container select,
    #auction-container textarea,
    #auction-container button,
    .login-form input:not([type="checkbox"]):not([type="radio"]),
    .login-form select,
    .login-form textarea,
    .login-form button {
        width: 100% !important;
        box-sizing: border-box !important;
        min-height: 44px;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Slightly tighter container padding on the smallest screens */
    header,
    footer,
    .content,
    .account-section,
    #auction-container {
        padding: 10px !important;
    }
}