/**
 * report-responsive.css
 *
 * Shared responsive rules for Blade-only report pages.
 * Targets common patterns across Revenue Recovery, PourScore Analysis,
 * After Hours Sales, Location Reports, Brand Comparison, Line Reporting,
 * and other legacy UserReporting views.
 *
 * Breakpoints align with config/design.php:
 *   sm=576  md=768  lg=992  xl=1200  2xl=1400
 */

/* ── Nav tabs (horizontal scroll on phone instead of wrapping badly) ─────── */
@media (max-width: 768px) {
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-bottom-width: 1px;
        padding-bottom: 1px;
        scrollbar-width: none; /* Firefox */
    }
    .nav-tabs::-webkit-scrollbar { display: none; }
    .nav-tabs .nav-link {
        white-space: nowrap;
        padding: 10px 14px;
        font-size: 0.85rem;
    }
}

/* ── Chart and data containers — reduce padding on smaller screens ───────── */
@media (max-width: 992px) {
    .chart-container,
    .data-table-container {
        padding: 16px;
    }
}

@media (max-width: 576px) {
    .chart-container,
    .data-table-container {
        padding: 12px;
        border-radius: 6px;
    }

    /* Chart titles stack icon + text cleanly */
    .chart-title {
        font-size: 1rem;
        flex-wrap: wrap;
        gap: 6px;
    }
}

/* ── Pagination container wraps on phone ─────────────────────────────────── */
@media (max-width: 768px) {
    .pagination-container {
        flex-wrap: wrap;
        gap: 8px;
    }
    .pagination-container .pagination {
        justify-content: center;
    }
}

/* ── Statistics / rounded KPI cards — prevent hover transform on touch ───── */
@media (hover: none) {
    .rounded-card:hover,
    .chart-container:hover,
    .data-table-container:hover {
        transform: none;
    }
}

/* ── Filter rows — give selects proper touch targets on phone ───────────── */
@media (max-width: 576px) {
    .form-group label { font-size: 0.82rem; }
    .form-group .form-control,
    .form-group select.form-control {
        min-height: 44px;
        font-size: 1rem; /* Prevents iOS auto-zoom on focus */
    }

    /* Apply/Search buttons full-width on phone */
    .btn-block,
    button[type="submit"].btn,
    button#applyFilters {
        width: 100%;
    }
}

/* ── Tables — prevent horizontal overflow from breaking layout ───────────── */
@media (max-width: 992px) {
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Reduce custom-table cell padding so data fits better on tablet */
    .custom-table th,
    .custom-table td {
        padding: 8px 8px;
        font-size: 0.82rem;
    }
}

@media (max-width: 576px) {
    .custom-table th,
    .custom-table td {
        padding: 6px 6px;
        white-space: nowrap;
    }
}

/* ── Section cards — reduce outer gutters on phone ───────────────────────── */
@media (max-width: 576px) {
    .section-card {
        padding: 12px;
        margin-bottom: 12px;
    }
}

/* ── Summary/metrics grids used in several reports ───────────────────────── */
@media (max-width: 576px) {
    /* Ensure 2-col grid is used on small phones (Bootstrap col-sm-6 handles tablet+) */
    .row.justify-content-center > .col-12:not([class*="col-sm"]) {
        flex: 0 0 100%;
        max-width: 100%;
    }
}