/*
 * report-mobile.css
 * Mobile-first responsive styles for all report pages
 * (racecard, commentary, incident, track-report, hotline, etc.)
 *
 * ROOT CAUSE this file addresses:
 * The report content is generated server-side as raw HTML with hardcoded
 * inline pixel widths (for PDF compatibility). We cannot change those
 * inline styles without breaking PDF output. Instead we:
 *   1. Wrap report content in a horizontal scroll container
 *   2. Scale fonts/spacing with relative units at mobile breakpoints
 *   3. Fix Bootstrap column classes
 *   4. Fix @media print so report data stays within the printed page
 */

/* ============================================================
   BASE / MOBILE-FIRST (applies to all screens, small first)
   ============================================================ */

/* Report content scroll wrapper — applied to #print-section .card-body */
.report-scroll-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
}

/* Visible scroll indicator on mobile */
.report-scroll-wrapper::after {
    content: 'Swipe → to see more';
    display: block;
    text-align: center;
    font-size: 0.7rem;
    color: #999;
    padding: 6px 0 2px;
    letter-spacing: 0.5px;
}

/* The inner content that may be wider than the viewport */
.report-scroll-inner {
    min-width: 700px;
    /* ensures the inline-styled content has room */
    padding: 0 4px;
}

/* Report page heading */
.tabber .raceheading h2 {
    font-size: clamp(0.9rem, 3vw, 1.5rem);
    word-break: break-word;
}

/* Navigation button group — stack on small screens */
.tabber .btn-group {
    display: flex !important;
    flex-wrap: wrap;
    gap: 4px;
}

.tabber .btn-group .btn {
    flex: 0 1 auto;
    white-space: nowrap;
    font-size: 0.7rem;
    padding: 6px 10px;
}

/* Report headings inside card */
.tabber .heading h3 {
    font-size: clamp(0.85rem, 3vw, 1.7rem);
}

.tabber .heading h4,
.tabber .heading h5 {
    font-size: clamp(0.75rem, 2.5vw, 1.3rem);
}

/* Report data rows — general */
.tabber .h_st {
    font-size: clamp(0.8rem, 2.5vw, 1.125rem);
    font-weight: 700;
    line-height: 1.4;
}

.tabber .h_st span {
    font-size: clamp(1rem, 3vw, 1.8rem);
    position: relative;
    left: auto;
    top: auto;
}

/* Font sizing for report content */
.tabber .font-17 {
    font-size: clamp(0.8rem, 2.5vw, 1.0625rem) !important;
}

.tabber .font-20 {
    font-size: clamp(0.85rem, 2.5vw, 1.25rem);
}

/* Last-report rows (past runs / track data) — desktop/base size */
.tabber .last-report div {
    font-size: clamp(0.75rem, 1.6vw, 0.875rem) !important;
    /* Do NOT override width here — inline widths are needed for desktop/PDF layout */
}

/* Small font divs inside report */
.tabber .small-font div {
    font-size: clamp(0.7rem, 2vw, 0.888rem);
}

/* sub elements */
.tabber sub {
    font-size: 0.75em;
}

/* Racecard header image */
#print-section img[src*="racecard_header"] {
    width: 100%;
    max-width: 1200px;
    height: 250px !important;
    object-fit: fill;
    display: block;
    margin: 0 auto;
}

/* Race number anchor links */
.tabber .btn-group .btn-primary {
    min-width: 32px;
    padding: 5px 8px;
    font-size: 0.75rem;
}


/* ============================================================
   SMALL PHONES (320px – 479px)
   ============================================================ */
@media (max-width: 479px) {
    .report-scroll-inner {
        min-width: auto;
        overflow: hidden;
    }
    
    /* For Fixtures and Results tables */
    .table-responsive {
        /* Removed overflow-x: hidden to allow table to be visible/scrollable if absolutely necessary, 
           but applying tight font scaling to avoid it */
        width: 100%;
    }
    /* Results / Fixtures DataTable — small font, no extra scroll */
    .results_content table,
    .results_content .table {
        font-size: 0.7rem !important;
        white-space: normal;
    }
    .results_content table td,
    .results_content table th,
    .results_content .table td,
    .results_content .table th {
        padding: 5px 3px !important;
        vertical-align: middle;
    }
    /* Make the action button smaller on mobile */
    .results_content .btn-view-result {
        font-size: 0.65rem !important;
        padding: 3px 8px !important;
    }
    /* Allow table-responsive to scroll if absolutely needed */
    .results_content .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .global-scale-wrapper {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .global-scale-inner {
        font-size: 0.7rem;
        padding: 0 15px;
        /* Owner names and other text can wrap — only past-runs rows are locked */
    }
    
    /* ── Past runs rows: stay on ONE line, shrink font, tighten widths ── */
    .last-report {
        white-space: nowrap;
        overflow: hidden;           /* clip any tiny overflow, no scroll */
    }

    /* Shrink the font inside each inline-block cell; keep the inline-block
       display that holds the columns together, but let JS scaling handle widths.
       We do NOT use width:auto because that breaks column alignment. */
    .last-report .col-lg-12 > div,
    .last-report [style*="display: inline-block"],
    .last-report [style*="display:inline-block"] {
        font-size: 0.6rem !important;
        display: inline-block;
    }

    .tabber .raceheading {
        padding: 4px;
    }

    .tabber .raceheading h2 {
        font-size: 0.9rem;
    }

    /* Stack the navigation buttons in a grid */
    .tabber .btn-group {
        gap: 3px;
    }

    .tabber .btn-group .btn {
        font-size: 0.65rem;
        padding: 5px 7px;
    }

    .tabber .btn-group .btn-secondary {
        flex: 1 1 calc(50% - 3px);
        text-align: center;
    }

    /* Report card body */
    .tabber .card-body {
        padding: 8px !important;
    }

    /* Row spacing */
    .tabber .m_tb_5 {
        margin-top: 3px;
        margin-bottom: 3px;
    }

    .tabber .border_bottom {
        padding-bottom: 3px;
    }

    /* H_ST font fixes */
    .tabber .h_st {
        font-size: 0.55rem;
        line-height: 1.1;
        white-space: nowrap;
    }

    .tabber .h_st span {
        font-size: 0.65rem;
    }
    
    .tabber .font-17 {
        font-size: 0.65rem !important;
    }

    /* Hide scroll indicator on larger screens (show only on small) */
    .report-scroll-wrapper::after {
        display: block;
    }
}


/* ============================================================
   MEDIUM PHONES (480px – 767px)
   ============================================================ */
@media (min-width: 480px) and (max-width: 767px) {
    .report-scroll-inner {
        min-width: 650px;
    }

    .tabber .raceheading h2 {
        font-size: 1rem;
    }

    .tabber .btn-group .btn {
        font-size: 0.7rem;
        padding: 6px 10px;
    }

    .tabber .btn-group .btn-secondary {
        flex: 0 1 auto;
    }

    .tabber .card-body {
        padding: 10px !important;
    }
}


/* ============================================================
   TABLETS (768px+)
   ============================================================ */
@media (min-width: 768px) {
    .report-scroll-wrapper::after {
        display: none;
        /* hide swipe indicator on tablets/desktop */
    }

    .report-scroll-inner {
        min-width: 0;
        /* no forced min-width, content fits naturally */
    }

    .tabber .btn-group .btn {
        font-size: 0.75rem;
        padding: 8px 14px;
    }

    .tabber .card-body {
        padding: 1.25rem !important;
    }
}


/* ============================================================
   DESKTOP (1024px+)
   ============================================================ */
@media (min-width: 1024px) {
    .report-scroll-wrapper {
        overflow-x: visible;
        /* no scroll needed on desktop */
    }

    .report-scroll-inner {
        min-width: 0;
    }
}


/* ============================================================
   PRINT / PDF FIX
   When the user clicks "Print" or saves as PDF:
   - Reset all scroll containers to visible (no clipping)
   - Reset forced min-widths so content fits the printed page
   - Use landscape A4 with small margins to maximize usable width
   - Scale the inline-block data rows to fit within page bounds
   ============================================================ */
@media print {

    /* Page setup: landscape gives ~270mm usable width which accommodates
       the widest racecard rows (~900px at 96dpi ≈ 238mm at 90dpi) */
    @page {
        size: A4 landscape;
        margin: 0.8cm 0.5cm;
    }

    /* Reset ALL scroll wrappers — no clipping on print */
    .report-scroll-wrapper,
    .racecard-scroll-wrapper {
        overflow: visible !important;
        width: 100% !important;
    }

    /* Remove the "Swipe → to see more" hint from print */
    .report-scroll-wrapper::after {
        display: none !important;
    }

    /* Reset min-widths — the @page landscape gives enough room */
    .report-scroll-inner,
    .racecard-scroll-inner {
        min-width: 0 !important;
        width: 100% !important;
        padding: 0 !important;
    }

    /* Reset inline scroll wrappers (racecard uses inline style) */
    [style*="overflow-x: auto"],
    [style*="overflow-x:auto"] {
        overflow: visible !important;
    }

    [style*="min-width: 900px"],
    [style*="min-width:900px"],
    [style*="min-width: 700px"],
    [style*="min-width:700px"],
    [style*="min-width: 680px"],
    [style*="min-width:680px"],
    [style*="min-width: 520px"],
    [style*="min-width:520px"] {
        min-width: 0 !important;
        width: 100% !important;
    }

    /* Scale down the last-report rows (past-run data) for PDF/print.
       A4 landscape usable width ≈ 1122px at 96dpi.
       The inline-block cells sum to ~870px; scale 0.92 fits comfortably. */
    .last-report {
        overflow: visible !important;
        white-space: nowrap !important;   /* keep each row on one line */
    }

    /* Undo the mobile scaleX transform — let original inline widths
       drive layout on paper */
    .last-report .col-lg-12 > div,
    .last-report [style*="display: inline-block"],
    .last-report [style*="display:inline-block"] {
        transform: none !important;       /* reset mobile compress */
        font-size: 0.75rem !important;    /* readable on A4 */
    }

    /* Slight whole-row scale so ~870px fits A4 landscape */
    .last-report .col-lg-12 {
        transform: scale(0.92);
        transform-origin: left top;
        display: block !important;
        white-space: nowrap;
    }

    /* Collapse card body padding for print */
    .card-body {
        padding: 6px !important;
    }

    .tabber .card-body {
        padding: 6px !important;
    }

    /* Ensure report card fills page width */
    .card {
        border: none !important;
        box-shadow: none !important;
    }

    #print-section .card {
        width: 100% !important;
    }

    /* Header/footer and nav hide on print */
    header,
    footer,
    .hidden_header,
    .tabber .raceheading,
    .float,
    .report-scroll-wrapper::after,
    .navbar,
    .top_bar {
        display: none !important;
    }

    /* Make #print-section fill the full print area */
    #print-section {
        display: block !important;
        visibility: visible !important;
        position: static !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    #print-section * {
        visibility: visible !important;
    }

    /* Force text colors to print properly */
    .color-blue,
    .color_red,
    .color-black {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Avoid page breaks inside single horse / race entries */
    .border_bottom,
    .last-report,
    .row.border_bottom {
        page-break-inside: avoid;
    }

    /* Racecard header image — keep it small in print */
    #print-section img[src*="racecard_header"] {
        max-height: 120px !important;
        width: auto !important;
    }
}


/* ============================================================
   BOOTSTRAP 4 col-xs POLYFILL
   The original views use col-xs-* which doesn't exist in BS4.
   These rules replicate the intended behavior.
   ============================================================ */
.col-xs-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
}

.col-xs-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
}

.col-xs-3 {
    flex: 0 0 25%;
    max-width: 25%;
}

.col-xs-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}

.col-xs-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
}

.col-xs-6 {
    flex: 0 0 50%;
    max-width: 50%;
}

.col-xs-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
}

.col-xs-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
}

.col-xs-9 {
    flex: 0 0 75%;
    max-width: 75%;
}

.col-xs-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
}

.col-xs-11 {
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
}

.col-xs-12 {
    flex: 0 0 100%;
    max-width: 100%;
}

/* Global Scale Wrapper for Mobile Zoom-Out View */
.global-scale-wrapper {
    width: 100%;
    overflow: hidden;
}

.global-scale-inner {
    width: 100%;
    transform-origin: top left;
}