/* ═══════════════════════════════════════════════════════════════
   CloudFran Agents — Global Mobile Responsive Stylesheet
   Item 3: Mobile Responsive Audit
   Targets common patterns: stat-card, stats-grid, tab-button,
   filter-bar, data-table, hero-banner, sidebar, forms, modals
   ═══════════════════════════════════════════════════════════════ */

/* ─── TABLET (≤1024px) ─── */
@media (max-width: 1024px) {
    /* Stats grids: 2 columns */
    .stats-grid, .stat-cards, .stats-container, .metrics-grid,
    .summary-cards, .kpi-grid, .dashboard-stats {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    /* Sidebar layouts */
    .page-layout, .content-layout, .main-layout {
        flex-direction: column !important;
    }
    .sidebar, .left-sidebar, .nav-sidebar, .side-nav {
        width: 100% !important;
        max-width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid #e2e8f0 !important;
    }

    /* Tables: enable horizontal scroll */
    .table-container, .data-table-container, .table-responsive-custom {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    table, .data-table {
        min-width: 600px;
    }

    /* Tab buttons: smaller */
    .tab-button, .tab-btn {
        padding: 8px 14px !important;
        font-size: 0.8rem !important;
    }

    /* Hero banners */
    .hero-banner, .page-hero, .hero-section {
        padding: 20px !important;
        flex-direction: column !important;
    }
    .hero-banner h1, .page-hero h1, .hero-section h1 {
        font-size: 1.5rem !important;
    }

    /* Filter bars: wrap */
    .filter-bar, .filter-row, .filter-controls, .toolbar {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .filter-bar select, .filter-bar input, .filter-controls select, .filter-controls input {
        min-width: 140px !important;
    }
}

/* ─── MOBILE (≤768px) ─── */
@media (max-width: 768px) {
    /* Stats grids: single column */
    .stats-grid, .stat-cards, .stats-container, .metrics-grid,
    .summary-cards, .kpi-grid, .dashboard-stats {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* Stat cards: compact */
    .stat-card, .metric-card, .kpi-card, .summary-card, .info-card {
        padding: 14px !important;
    }
    .stat-card h3, .metric-card h3, .stat-value, .metric-value {
        font-size: 1.3rem !important;
    }

    /* Tabs: horizontal scroll */
    .tab-container, .tabs, .tab-buttons, .tab-navigation,
    .tab-header, .nav-tabs-custom {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
        flex-wrap: nowrap !important;
        padding-bottom: 4px !important;
        scrollbar-width: thin !important;
    }
    .tab-button, .tab-btn {
        flex-shrink: 0 !important;
        padding: 7px 12px !important;
        font-size: 0.75rem !important;
    }

    /* Tables: card-style on small screens */
    .data-table th, .data-table td, table th, table td {
        padding: 8px 10px !important;
        font-size: 0.8rem !important;
    }

    /* Hero banners: compact */
    .hero-banner, .page-hero, .hero-section {
        padding: 16px !important;
        text-align: center !important;
    }
    .hero-banner h1, .page-hero h1 {
        font-size: 1.25rem !important;
    }
    .hero-banner p, .page-hero p {
        font-size: 0.85rem !important;
    }

    /* Filter bars: stack */
    .filter-bar, .filter-row, .filter-controls, .toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .filter-bar select, .filter-bar input,
    .filter-controls select, .filter-controls input {
        width: 100% !important;
        min-width: unset !important;
    }

    /* Forms: full width */
    .form-group, .form-row, .input-group {
        flex-direction: column !important;
    }
    .form-group input, .form-group select, .form-group textarea,
    .form-row input, .form-row select {
        width: 100% !important;
    }

    /* Buttons: stack on mobile */
    .button-row, .btn-group-custom, .action-buttons {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .button-row button, .button-row a,
    .action-buttons button, .action-buttons a {
        width: 100% !important;
        text-align: center !important;
    }

    /* Cards grid: single column */
    .cards-grid, .card-grid, .grid-3, .grid-4, .agent-grid {
        grid-template-columns: 1fr !important;
    }

    /* Two-column layouts */
    .two-col, .split-layout, .col-2-layout, .detail-grid {
        grid-template-columns: 1fr !important;
    }

    /* Modal / dialog adjustments */
    .modal-content, .dialog-content, .popup-content {
        width: 95vw !important;
        max-width: 95vw !important;
        margin: 10px auto !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
    }

    /* Pagination: compact */
    .pagination, .paging, .page-links {
        flex-wrap: wrap !important;
        gap: 4px !important;
        justify-content: center !important;
    }
    .pagination a, .page-links a {
        padding: 6px 10px !important;
        font-size: 0.8rem !important;
    }

    /* Charts: constrain */
    canvas, .chart-container, .chart-wrapper {
        max-width: 100% !important;
        height: auto !important;
        min-height: 200px !important;
    }

    /* Main content padding */
    .page-content, .main-content, .content-area {
        padding: 12px !important;
    }

    /* Hide non-essential columns on mobile */
    .hide-mobile, .mobile-hide, .desktop-only {
        display: none !important;
    }

    /* Show mobile-only elements */
    .show-mobile, .mobile-only, .mobile-show {
        display: block !important;
    }
}

/* ─── SMALL MOBILE (≤480px) ─── */
@media (max-width: 480px) {
    /* Extra compact stat cards */
    .stat-card, .metric-card, .kpi-card {
        padding: 10px !important;
    }
    .stat-card h3, .stat-value {
        font-size: 1.1rem !important;
    }
    .stat-card p, .stat-label {
        font-size: 0.7rem !important;
    }

    /* Tab buttons: icon-only option */
    .tab-button span.tab-text, .tab-btn span.tab-text {
        display: none !important;
    }

    /* Tables: extra compact */
    .data-table th, .data-table td, table th, table td {
        padding: 6px 8px !important;
        font-size: 0.75rem !important;
    }

    /* Font sizing */
    h1 { font-size: 1.2rem !important; }
    h2 { font-size: 1.05rem !important; }
    h3 { font-size: 0.95rem !important; }

    /* Hero: minimal */
    .hero-banner, .page-hero {
        padding: 12px !important;
    }
    .hero-banner h1, .page-hero h1 {
        font-size: 1.1rem !important;
    }
}

/* ─── PRINT (already in some pages, global fallback) ─── */
@media print {
    .no-print, .sidebar, .nav-sidebar, .left-sidebar,
    .tab-container, .tabs, .filter-bar, .filter-controls,
    .button-row, .action-buttons, .pagination, .hero-banner,
    .mobile-only, nav, footer, .chat-widget {
        display: none !important;
    }
    body {
        font-size: 11px !important;
        color: #000 !important;
        background: #fff !important;
    }
    .page-content, .main-content, .content-area {
        padding: 0 !important;
        margin: 0 !important;
    }
    table { border-collapse: collapse !important; }
    table th, table td { border: 1px solid #000 !important; padding: 4px 6px !important; }
    .stat-card, .metric-card { border: 1px solid #ccc !important; break-inside: avoid !important; }
}

/* ─── UTILITY CLASSES ─── */
.mobile-hide { } /* shown by default, hidden at 768px */
.mobile-only { display: none; } /* hidden by default, shown at 768px */
.desktop-only { } /* shown by default, hidden at 768px */
.touch-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }