/**
 * Horizon CRM — Global Mobile Fixes
 * =====================================
 * 
 * Catches common mobile-breaking patterns that exist across many pages
 * (analytics, dashboards, settings, etc.) without requiring per-template fixes.
 * 
 * Strategy: Aggressively override patterns that don't render well on phones:
 *   - Oversized headings (h1.display-*, inline font-size > 2rem)
 *   - Card grids that don't stack properly
 *   - Tables overflowing the viewport (forces horizontal scroll)
 *   - Button groups & filter rows that don't wrap
 *   - Chart canvases with fixed huge heights
 *   - Inline styled containers with fixed widths
 * 
 * Loaded via base.html with `media="(max-width: 768px)"` so zero desktop impact.
 * Created: June 2026 - Mobile audit follow-up
 */

@media (max-width: 768px) {


/* ============================================================
   1. CONTAINER & LAYOUT — prevent horizontal overflow
   ============================================================ */

html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
}

/* CRITICAL: Bootstrap's `.col` (used by base.html `<main class="col">`) is a flex
   item, and flex items default to `min-width: auto` which means they REFUSE to
   shrink below their content's intrinsic size. So a long word, a wide table,
   a chart canvas, or a select with long option text inside <main> will force
   <main> to expand wider than the viewport, causing the right-side overflow
   the user is seeing.
   
   Setting min-width: 0 on flex items lets them shrink properly. */
main, main.col,
.d-flex > main,
.d-flex > .col,
.d-flex > [class*="col-"] {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    flex: 1 1 100% !important;
}

/* Apply to all flex children defensively */
.d-flex > * {
    min-width: 0;
}

/* Universal box-sizing — eliminates any element exceeding parent due to padding */
*, *::before, *::after {
    box-sizing: border-box;
}

.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl {
    padding-left: 12px !important;
    padding-right: 12px !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Bootstrap rows often have negative margins — keep them sane on mobile */
.row {
    margin-left: -8px !important;
    margin-right: -8px !important;
    max-width: calc(100% + 16px) !important;
}

.row > [class*="col-"] {
    padding-left: 8px !important;
    padding-right: 8px !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

/* Wrappers that base.html adds: <div class="px-4 pt-3"> around block content */
.px-4 {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

.px-5 {
    padding-left: 14px !important;
    padding-right: 14px !important;
}

/* Catch any element with explicit large pixel widths via inline style */
[style*="width: 100vw"],
[style*="width:100vw"] {
    width: 100% !important;
    max-width: 100% !important;
}

/* ============================================================
   2. OVERSIZED TYPOGRAPHY — shrink display & inline-styled headings
   ============================================================ */

/* Bootstrap display headings */
.display-1 { font-size: 2.5rem !important; }
.display-2 { font-size: 2.25rem !important; }
.display-3 { font-size: 2rem !important; }
.display-4 { font-size: 1.75rem !important; }
.display-5 { font-size: 1.5rem !important; }
.display-6 { font-size: 1.35rem !important; }

/* Beat back inline `style="font-size: 2.5rem"` and friends on h1/h2 */
h1[style*="font-size"],
h1.display-1, h1.display-2, h1.display-3, h1.display-4 {
    font-size: 1.75rem !important;
    line-height: 1.25 !important;
}

h2[style*="font-size"] {
    font-size: 1.4rem !important;
    line-height: 1.3 !important;
}

h3[style*="font-size"] {
    font-size: 1.2rem !important;
    line-height: 1.3 !important;
}

/* "Lead" paragraphs (page subtitles) */
.lead {
    font-size: 1rem !important;
    line-height: 1.5 !important;
}

/* Page hero titles often use big inline font sizes */
.analytics-title,
.dashboard-title,
.page-title {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
}

.analytics-subtitle,
.dashboard-subtitle,
.page-subtitle {
    font-size: 0.95rem !important;
}

/* Stat card big numbers — keep readable but not screen-filling */
.card h1, .card h2, .card .h1, .card .h2 {
    font-size: 1.5rem !important;
}

.stat-card h3,
.stat-card .h3,
.metric-value,
.kpi-value {
    font-size: 1.4rem !important;
}

/* ============================================================
   3. STAT CARDS / KPI GRIDS — ensure they stack properly
   ============================================================ */

/* When devs use col-md-3 stat cards, they stack at <768px (default Bootstrap),
   but we want a 2-up grid on phones — so they don't take the entire screen each. */
@media (min-width: 380px) {
    .row > .col-md-3.stat-col,
    .row > [class*="col-md"] > .stat-card {
        /* No-op fallback — kept for documentation */
    }
}

/* Reduce stat-card padding on mobile so two can fit in a row when appropriate */
.stat-card .card-body,
.metric-card .card-body,
.kpi-card .card-body {
    padding: 12px !important;
}

.stat-card,
.metric-card,
.kpi-card {
    margin-bottom: 12px !important;
}

/* The "icon next to value" pattern often overflows */
.source-icon,
.metric-icon,
.kpi-icon,
.financial-icon {
    width: 36px !important;
    height: 36px !important;
    font-size: 1.1rem !important;
    flex-shrink: 0 !important;
}

/* ============================================================
   4. TABLES — force horizontal scroll on unwrapped tables
   ============================================================ */

/* When a <table> is NOT inside .table-responsive, force it to scroll
   horizontally so it can't break the viewport */
.card-body > table,
.card-body > .table,
section > table,
main > table,
.tab-pane > table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
    max-width: 100% !important;
}

/* Existing .table-responsive needs to actually scroll */
.table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
}

/* Tables themselves: sane minimum cell padding */
.table > :not(caption) > * > * {
    padding: 8px 10px !important;
    font-size: 0.85rem !important;
}

.table thead th {
    font-size: 0.75rem !important;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Pagination inside tables */
.pagination {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 4px;
}

.pagination .page-link {
    padding: 6px 10px !important;
    font-size: 0.85rem !important;
    min-width: 36px;
    text-align: center;
}

/* ============================================================
   5. FILTER ROWS / BUTTON GROUPS — let them wrap
   ============================================================ */

/* Filter sections with multiple controls in one row */
.filter-section,
.filters-row,
form.filter-form .row,
.card-header form .row {
    gap: 8px !important;
}

.filter-section [class*="col-md"],
.filter-section [class*="col-lg"] {
    width: 100% !important;
    margin-bottom: 8px !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

/* Bootstrap btn-groups that don't fit — let them wrap */
.btn-group:not(.dropdown):not(.btn-group-sm-no-wrap),
.btn-toolbar {
    flex-wrap: wrap !important;
    gap: 4px !important;
}

.btn-group > .btn,
.btn-toolbar .btn {
    border-radius: 6px !important; /* lose connected look so wrapping looks good */
    margin: 2px !important;
}

/* d-flex justify-between with too many items — let them wrap */
.card-header.d-flex,
.d-flex.justify-content-between,
.d-flex.justify-content-end {
    flex-wrap: wrap !important;
    gap: 8px !important;
}

/* ============================================================
   6. CHARTS — sensible heights, prevent overflow
   ============================================================ */

.chart-container,
.chart-container-large,
.chart-wrapper,
.chart-box {
    height: 260px !important;
    max-height: 320px !important;
    position: relative !important;
}

/* Chart canvases */
canvas[id*="hart"],
canvas[id*="hart" i],
.card-body > canvas {
    max-width: 100% !important;
    height: auto !important;
    max-height: 280px !important;
}

/* ============================================================
   7. CARDS & SECTIONS — consistent spacing
   ============================================================ */

.card {
    margin-bottom: 12px !important;
    border-radius: 8px !important;
}

.card-header {
    padding: 12px 14px !important;
}

.card-header h5,
.card-header h6,
.card-header .h5,
.card-header .h6 {
    font-size: 0.95rem !important;
    margin-bottom: 0 !important;
}

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

/* Forcefully shrink py-4/py-5 so first viewport isn't wasted */
.py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-5 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }
.mb-4 { margin-bottom: 1rem !important; }
.mb-5 { margin-bottom: 1.25rem !important; }
.mt-4 { margin-top: 1rem !important; }
.mt-5 { margin-top: 1.25rem !important; }

/* ============================================================
   8. BADGES & TAGS
   ============================================================ */

.badge {
    font-size: 0.7rem !important;
    padding: 4px 8px !important;
    white-space: normal !important;
}

/* ============================================================
   9. INLINE STYLE OVERRIDES — common offenders
   ============================================================ */

/* Inline width/min-width above viewport — neutralize */
[style*="min-width: 1"],
[style*="min-width:1"] {
    min-width: auto !important;
    max-width: 100% !important;
}

[style*="width: 1000px"],
[style*="width: 800px"],
[style*="width: 700px"],
[style*="width: 600px"],
[style*="width: 500px"] {
    width: 100% !important;
    max-width: 100% !important;
}

/* Anything with `overflow: visible` that breaks scroll containment */
[style*="overflow: visible"]:not(.dropdown):not(.dropdown-menu) {
    overflow: hidden !important;
}

/* ============================================================
   10. INPUTS / FORMS — common analytics/filter pages
   ============================================================ */

.form-select,
.form-control,
input[type="text"],
input[type="email"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="tel"],
input[type="url"],
textarea,
select {
    font-size: 16px !important; /* prevents iOS auto-zoom */
    min-height: 44px;
}

textarea { min-height: 80px; }

label.form-label,
.form-label {
    font-size: 0.85rem !important;
    margin-bottom: 4px !important;
}

/* ============================================================
   11. TABS — wrap tabs that don't fit
   ============================================================ */

.nav-tabs,
.nav-pills {
    flex-wrap: wrap !important;
    border-bottom: 1px solid #dee2e6;
}

.nav-tabs .nav-link,
.nav-pills .nav-link {
    padding: 8px 12px !important;
    font-size: 0.85rem !important;
    white-space: nowrap;
}

/* If you want horizontal scroll for tabs instead of wrapping, add .nav-scroll */
.nav-tabs.nav-scroll,
.nav-pills.nav-scroll {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* ============================================================
   12. DROPDOWN MENUS — keep inside viewport
   ============================================================ */

.dropdown-menu {
    max-width: calc(100vw - 24px) !important;
    font-size: 0.9rem;
}

.dropdown-menu-end {
    right: 0 !important;
    left: auto !important;
}

/* ============================================================
   13. ALERTS & NOTIFICATIONS
   ============================================================ */

.alert {
    padding: 10px 12px !important;
    font-size: 0.9rem !important;
    margin-bottom: 12px !important;
}

/* ============================================================
   14. MODALS — re-affirm full-screen pattern (mobile-modals.css supplement)
   ============================================================ */

.modal-dialog:not(.modal-dialog-centered):not(.modal-fullscreen) {
    margin: 8px !important;
    max-width: calc(100vw - 16px) !important;
}

.modal-body {
    padding: 14px !important;
}

/* ============================================================
   15. TEXT-CENTER HEADERS — keep readable
   ============================================================ */

.text-center.mb-4 h1,
.text-center.mb-4 .display-4,
.text-center.mb-5 h1 {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
}

/* ============================================================
   16. UTILITY — hide elements only useful on desktop
   ============================================================ */

.d-mobile-none {
    display: none !important;
}

/* ============================================================
   17. EMAIL ANALYTICS / DASHBOARD SPECIFIC RESCUES
   ============================================================ */

/* Filter card with collapse — make whole header tappable, ensure chevron visible */
.card-header[data-bs-toggle="collapse"] {
    min-height: 48px;
    align-items: center !important;
}

/* Quick filter buttons (event type filters) */
.event-filter-btn {
    flex: 1 0 auto !important;
    min-width: 0 !important;
    font-size: 0.75rem !important;
    padding: 6px 10px !important;
}

/* Sequence/recipient table rows often have many columns; wrap content */
table .badge,
table small,
table .text-muted {
    white-space: nowrap;
}

/* Score circles (engagement) */
.score-circle {
    width: 36px !important;
    height: 36px !important;
    font-size: 0.85rem !important;
}

/* ============================================================
   18. FIX FIXED-POSITION ELEMENTS THAT COLLIDE WITH BOTTOM NAV
   ============================================================ */

/* App has a mobile bottom nav (~64px). Push toast/floating elements above it. */
.toast-container.position-fixed,
.fab-container,
.floating-action,
.scroll-to-top {
    bottom: 80px !important;
}

/* Page main content needs space above bottom nav */
main, .main-content, .container-fluid.py-4 {
    padding-bottom: 80px !important;
}
}