/* =========================================================================
   Reports page — mobile makeover.
   Scoped to #reports and only fires under 768px, so desktop layout is
   untouched. Same visual language used elsewhere (Partners / Invoices):
   compact stat cards, softened surface, tables converted to cards,
   full-width sections, sticky bottom actions on the sub-modals.
   ========================================================================= */

@media (max-width: 767px) {

    /* -----------------------------------------------------------------
       Page shell — remove horizontal overflow and tighten container.
       ----------------------------------------------------------------- */
    #reports {
        padding: 8px !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    #reports .modern-content-card {
        padding: 12px !important;
        margin: 0 0 10px 0 !important;
        border-radius: 12px !important;
    }
    /* Hide the page title + subtitle to reclaim top space on mobile —
       the section is already labelled in the bottom nav. */
    #reports #reportFiltersCard > .card-header {
        display: none !important;
    }
    #reports .modern-section-header {
        margin-bottom: 8px !important;
    }
    #reports .modern-section-title {
        font-size: 0.95rem !important;
    }

    /* -----------------------------------------------------------------
       Filters card — stack primary row, hide the desktop button strip
       on mobile (Export lives in a sticky action later), and let the
       "More Filters" toggle drop the extras panel.
       ----------------------------------------------------------------- */
    #reports #reportFiltersCard .modern-filter-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        margin-bottom: 0 !important;
    }
    #reports #reportFiltersCard .modern-filter-grid .form-group {
        margin-bottom: 0 !important;
        min-width: 0 !important;
    }
    #reports #reportFiltersCard .modern-filter-grid label {
        font-size: 0.75rem !important;
        font-weight: 600 !important;
        color: #6b7280 !important;
        margin-bottom: 4px !important;
    }
    #reports #reportFiltersCard select,
    #reports #reportFiltersCard input[type="date"],
    #reports #reportFiltersCard input[type="text"] {
        width: 100% !important;
        min-height: 40px !important;
        padding: 6px 10px !important;
        border: 1px solid #d1d5db !important;
        border-radius: 8px !important;
        font-size: 0.9rem !important;
        background: #fff !important;
        box-sizing: border-box !important;
    }
    #reports #reportFiltersCard select:focus,
    #reports #reportFiltersCard input:focus {
        outline: none !important;
        border-color: #6366f1 !important;
    }

    /* Primary filters row — Period spans full width (long labels),
       Service + Status on one row, More Filters + Actions on next.
       We reset any earlier grid-column pins from mobile-optimized.css
       so autoflow places Service+Status side-by-side after Period.   */
    #reports #reportFiltersCard #reportPeriod {
        min-height: 40px !important;
    }
    #reports .modern-filter-grid {
        grid-auto-flow: row dense !important;
    }
    #reports .modern-filter-grid > .form-group {
        grid-column: auto !important;
    }
    #reports #reportFiltersCard > .modern-filter-grid > .form-group:first-child {
        grid-column: 1 / -1 !important;
    }
    /* More Filters button block — full width */
    #reports #reportMoreFiltersBtnWrap {
        grid-column: 1 / -1 !important;
    }
    #reports #reportMoreFiltersBtnWrap > label {
        display: none !important;
    }
    #reports #reportMoreFiltersBtn {
        width: 100% !important;
        height: 40px !important;
        border-radius: 8px !important;
        font-size: 0.85rem !important;
        justify-content: space-between !important;
    }
    /* Actions block (Export + Scheduled + Reset) — stack full width */
    #reports #reportActionsBtnWrap {
        grid-column: 1 / -1 !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        align-items: stretch !important;
    }
    #reports #reportActionsBtnWrap .btn,
    #reports #reportActionsBtnWrap .report-export-btn {
        width: 100% !important;
        height: 42px !important;
        margin: 0 !important;
        border-radius: 10px !important;
        font-size: 0.85rem !important;
        justify-content: center !important;
        white-space: nowrap !important;
    }
    #reports #reportResetFiltersBtn {
        grid-column: 1 / -1 !important;
    }
    #reports .report-export-dropdown {
        width: 100% !important;
    }
    #reports .report-export-menu {
        right: 0 !important;
        left: auto !important;
        min-width: 200px !important;
    }

    /* More Filters panel — single column */
    #reports #reportMoreFiltersPanel .modern-filter-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    /* -----------------------------------------------------------------
       Report Sections picker — 2 columns of checkboxes fits mobile OK.
       ----------------------------------------------------------------- */
    #reports #reportSectionsPickerBody > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px 12px !important;
    }
    #reports .cb-label {
        font-size: 0.8rem !important;
    }

    /* -----------------------------------------------------------------
       Custom Report Builder — stack Metrics + Group By.
       ----------------------------------------------------------------- */
    #reports .custom-builder-grid,
    #reports #customBuilderBody > div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    #reports #customReportName {
        width: 100% !important;
    }
    #reports #customBuilderBody > div[style*="display:flex;gap:0.75rem"] {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    #reports #customBuilderBody > div[style*="display:flex;gap:0.75rem"] .btn {
        width: 100% !important;
        margin: 0 !important;
    }

    /* -----------------------------------------------------------------
       Charts — force to full width, cap height so canvas stays readable.
       ----------------------------------------------------------------- */
    #reports .charts-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    #reports .chart-card {
        padding: 12px !important;
    }
    #reports .chart-container {
        width: 100% !important;
        height: 240px !important;
        max-height: 240px !important;
        position: relative !important;
    }
    #reports .chart-container canvas {
        max-width: 100% !important;
        height: 100% !important;
    }

    /* -----------------------------------------------------------------
       Stats grids — 2×2 tight grid, compact tiles matching Partners.
       ----------------------------------------------------------------- */
    #reports .stats-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        margin: 0 0 10px 0 !important;
    }
    /* Stat-card interior sizing/layout lives in shared css/stat-cards-mobile.css */

    /* -----------------------------------------------------------------
       Retention + Commission combined card — stack halves.
       ----------------------------------------------------------------- */
    #reports #reportSection_retentionCommissions > div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    #reports #reportSection_retentionCommissions > div > div:first-child {
        border-right: none !important;
        border-bottom: 1px solid var(--border-color, #e5e7eb) !important;
        padding: 12px !important;
    }
    #reports #reportSection_retentionCommissions > div > div:last-child {
        padding: 12px !important;
    }
    #reports #customerRetentionSection,
    #reports #commissionSummaryInner {
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
        text-align: center !important;
    }

    /* -----------------------------------------------------------------
       Booking Status Breakdown — table + doughnut stacked.
       ----------------------------------------------------------------- */
    #reports #reportSection_bookingStatus > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    #reports #reportSection_bookingStatus canvas {
        max-width: 200px !important;
        margin: 0 auto !important;
        display: block !important;
    }

    /* -----------------------------------------------------------------
       Data tables → cards.
       All modern-content-card > .table-container tables inside #reports
       collapse into stacked cards where the first cell is the title.
       ----------------------------------------------------------------- */
    #reports .table-container {
        overflow-x: visible !important;
        margin: 0 !important;
        border: none !important;
        max-width: 100% !important;
    }
    #reports .data-table {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        background: transparent !important;
        border: none !important;
        border-collapse: separate !important;
    }
    #reports .data-table thead {
        display: none !important;
    }
    #reports .data-table tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    #reports .data-table tbody tr {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        gap: 4px 12px !important;
        background: #fff !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 10px !important;
        padding: 10px 12px !important;
    }
    /* Empty state / loader row keeps single-cell layout */
    #reports .data-table tbody tr:has(td[colspan]) {
        display: block !important;
        text-align: center !important;
        padding: 20px 12px !important;
        color: #9ca3af !important;
    }
    #reports .data-table tbody tr:has(td[colspan]) td {
        display: block !important;
        padding: 0 !important;
        border: none !important;
        text-align: center !important;
    }
    #reports .data-table tbody td {
        display: block !important;
        padding: 0 !important;
        border: none !important;
        font-size: 0.85rem !important;
        color: #4b5563 !important;
    }
    #reports .data-table tbody td:first-child {
        grid-column: 1 / -1 !important;
        font-weight: 700 !important;
        color: #111827 !important;
        font-size: 0.9rem !important;
        margin-bottom: 4px !important;
    }
    /* Give each subsequent cell a label:value feel by prepending the
       column header text via CSS. Uses data-label attribute if present,
       otherwise browsers won't render anything (silent fallback). */
    #reports .data-table tbody td[data-label]::before {
        content: attr(data-label) ": ";
        color: #6b7280 !important;
        font-weight: 600 !important;
        margin-right: 4px !important;
    }
    /* Badges / status pills stay compact, don't stretch */
    #reports .data-table tbody td .badge,
    #reports .data-table tbody td .status-badge {
        font-size: 0.7rem !important;
        padding: 2px 8px !important;
    }

    /* -----------------------------------------------------------------
       Raw Export modal — full-viewport frame, same modernisation as
       the other detail modals.
       ----------------------------------------------------------------- */
    #rawExportModal.modal-overlay {
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
    }
    #rawExportModal .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }
    #rawExportModal .modal-header {
        background: #fff !important;
        color: #111827 !important;
        border-bottom: 1px solid #f3f4f6 !important;
        padding: 14px 20px !important;
        flex-shrink: 0 !important;
        border-radius: 0 !important;
    }
    #rawExportModal .modal-title {
        color: #111827 !important;
        font-size: 1.05rem !important;
        font-weight: 700 !important;
        margin: 0 !important;
    }
    #rawExportModal .modal-close {
        background: #f3f4f6 !important;
        color: #6b7280 !important;
        border: none !important;
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.15rem !important;
    }
    #rawExportModal .modal-body {
        padding: 12px !important;
        background: #f9fafb !important;
        overflow-y: auto !important;
        flex: 1 !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        transform: translateZ(0);
        contain: paint;
    }
    #rawExportModal .modal-body > div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    #rawExportModal .modal-body .cb-label {
        background: #fff !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 10px !important;
        padding: 10px 12px !important;
        font-size: 0.85rem !important;
    }
    #rawExportModal .modal-body > div[style*="display:flex;gap:0.5rem"]:last-of-type {
        flex-direction: column !important;
        gap: 8px !important;
        margin-top: 12px !important;
    }
    #rawExportModal .modal-body .btn {
        width: 100% !important;
        height: 44px !important;
        border-radius: 10px !important;
        font-weight: 600 !important;
        font-size: 0.9rem !important;
        margin: 0 !important;
    }

    /* -----------------------------------------------------------------
       Loading overlay — smaller card.
       ----------------------------------------------------------------- */
    #reportsLoadingOverlay > div {
        padding: 1rem 1.25rem !important;
        border-radius: 10px !important;
    }
}