/**
 * ============================================
 * RESOLVEJÁ - Responsividade Avançada
 * ============================================
 * Ajustes finos para todas as telas
 */

/* ── Impressão ────────────────────────────── */
@media print {
    .navbar, .sidebar, .panel-topbar, .footer,
    .btn, .filters-bar, .pagination, .mobile-menu,
    .sidebar-overlay { display: none !important; }
    .panel-wrapper { margin-left: 0 !important; }
    .panel-content { padding: 0 !important; }
    body { font-size: 12pt; color: #000; }
    .card { border: 1px solid #ccc; break-inside: avoid; }
}

/* ── Tablet landscape (1024px) ────────────── */
@media (max-width: 1024px) {
    .hero-title { font-size: 2rem; }
    .providers-grid { grid-template-columns: repeat(2, 1fr); }
    .categories-grid { grid-template-columns: repeat(4, 1fr); }
    .plans-grid { grid-template-columns: repeat(2, 1fr); }
    .dashboard-grid { grid-template-columns: 1fr; }
    .search-layout { grid-template-columns: 1fr; }
    .filters-sidebar { position: static; }

    /* Profile page */
    .profile-body { grid-template-columns: 1fr; }
    .services-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Tablet portrait (768px) ──────────────── */
@media (max-width: 768px) {
    /* Typography */
    h1 { font-size: 1.6rem; }
    h2 { font-size: 1.3rem; }
    h3 { font-size: 1.1rem; }

    /* Container */
    .container { padding: 0 16px; }

    /* Hero */
    .hero { padding: 30px 0 24px; }
    .hero-title { font-size: 1.65rem; line-height: 1.2; }
    .hero-subtitle { font-size: 0.9rem; }
    .hero-trust { flex-direction: column; gap: 12px; }
    .search-input-group { flex-direction: column; border-radius: var(--radius); }
    .search-location { border-left: none; border-top: 1px solid var(--gray-200); max-width: 100%; }
    .btn-search { border-radius: 0 0 var(--radius) var(--radius) !important; width: 100%; }

    /* Categories */
    .categories-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
    .category-card { padding: 12px 6px; }
    .category-icon { width: 40px; height: 40px; font-size: 1.1rem; }
    .category-name { font-size: 0.75rem; }

    /* Provider cards */
    .providers-grid { grid-template-columns: 1fr; }
    .provider-card { display: flex; flex-direction: row; gap: 14px; align-items: center; }
    .provider-card-header { margin-bottom: 0; flex: 1; }
    .provider-card-footer { flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 12px; }

    /* Steps */
    .steps-grid { grid-template-columns: 1fr; gap: 16px; }

    /* Navbar */
    .navbar-menu { display: none; }
    .navbar-toggle { display: flex; }
    .navbar-actions .btn { display: none; }
    .user-name-nav { display: none; }
    .navbar-actions .nav-icon-btn:not(:last-child) { display: none; }

    /* Footer */
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }

    /* Sections */
    .section { padding: 36px 0; }
    .section-header { flex-direction: column; align-items: flex-start; gap: 8px; }

    /* Cards */
    .card-body { padding: 16px; }
    .card-header { padding: 12px 16px; }

    /* Stats */
    .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .stat-card { padding: 14px; }
    .stat-value { font-size: 1.3rem; }
    .stat-icon { width: 40px; height: 40px; font-size: 1rem; }

    /* Tables */
    .table th, .table td { padding: 10px 8px; font-size: 0.8rem; }
    .table th:nth-child(n+5), .table td:nth-child(n+5) { display: none; }

    /* Search results */
    .result-card { grid-template-columns: 60px 1fr; gap: 10px; }
    .result-avatar { width: 60px; height: 60px; }
    .result-meta { grid-column: 1 / -1; display: flex; justify-content: space-between; }
    .result-actions { grid-column: 1 / -1; flex-direction: row; }
    .result-actions .btn { flex: 1; font-size: 0.8rem; padding: 8px 12px; }
    .search-topbar { top: 68px; }

    /* Panel */
    .sidebar { transform: translateX(-100%); }
    .sidebar.open { transform: translateX(0); }
    .sidebar-overlay.show { display: block; }
    .panel-wrapper { margin-left: 0; }
    .panel-content { padding: 16px; }
    .panel-topbar { padding: 0 16px; }
    .sidebar-toggle { display: flex; }
    .topbar-user-info { display: none; }
    .panel-title { font-size: 1.25rem; }

    /* Toolbar */
    .toolbar { flex-direction: column; align-items: stretch; }
    .toolbar-search { max-width: 100%; }
    .filters-bar { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }

    /* Forms */
    .form-row { grid-template-columns: 1fr; }

    /* Profile page */
    .profile-banner { height: 160px; margin-bottom: -30px; }
    .profile-header { padding: 0 16px 16px; flex-direction: column; align-items: center; text-align: center; }
    .profile-avatar { width: 80px; height: 80px; }
    .profile-name { font-size: 1.15rem; justify-content: center; }
    .profile-actions { margin: 16px; }
    .profile-actions .btn { flex: 1; padding: 10px 16px; font-size: 0.85rem; }
    .profile-tabs { overflow-x: auto; }
    .profile-tab { white-space: nowrap; padding: 10px 14px; font-size: 0.82rem; }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }

    /* Plans */
    .plans-grid { grid-template-columns: 1fr; max-width: 380px; }
    .plan-card { padding: 24px 20px; }

    /* Auth pages */
    .auth-page { padding: 20px 16px; }

    /* Chat */
    .chat-page { height: calc(100vh - 80px); border-radius: 0; margin: -16px; }
    .chat-msg { max-width: 90%; }

    /* Pagination */
    .pagination { gap: 4px; }
    .page-link { min-width: 34px; height: 34px; font-size: 0.82rem; }

    /* How it works */
    .how-step { grid-template-columns: 1fr; gap: 20px; }
    .how-step:nth-child(even) { direction: ltr; }

    /* Modals */
    .modal { max-width: 95vw; margin: 10px; }
}

/* ── Mobile small (480px) ─────────────────── */
@media (max-width: 480px) {
    .container { padding: 0 12px; }
    h1 { font-size: 1.4rem; }
    .hero-title { font-size: 1.4rem; }

    .categories-grid { grid-template-columns: repeat(2, 1fr); }

    .stats-grid { grid-template-columns: 1fr; }

    .navbar-container { padding: 0 12px; }
    .brand-text { font-size: 1.2rem; }

    .footer-grid { grid-template-columns: 1fr; }

    .btn-lg { padding: 12px 20px; font-size: 0.9rem; }
    .btn-sm { padding: 6px 12px; font-size: 0.78rem; }

    /* Tabelas responsivas como cards */
    .table-as-cards thead { display: none; }
    .table-as-cards tr {
        display: block; padding: 14px; margin-bottom: 8px;
        border: 1px solid var(--gray-200); border-radius: var(--radius);
    }
    .table-as-cards td {
        display: flex; justify-content: space-between;
        padding: 4px 0; border: none;
    }
    .table-as-cards td::before {
        content: attr(data-label);
        font-weight: 600; color: var(--gray-600); font-size: 0.8rem;
    }

    /* Profile trust */
    .profile-trust { flex-direction: column; align-items: center; gap: 8px; }
    .profile-trust-item { font-size: 0.75rem; }

    /* Botões empilhados */
    .result-actions { flex-direction: column; }
    .result-meta { text-align: left; }

    /* Sidebar do perfil como pilha */
    .rating-summary, .trust-box { margin-bottom: 16px; }

    /* Panel list responsivo */
    .panel-list-item { flex-wrap: wrap; gap: 8px; }
    .panel-list-meta { width: 100%; display: flex; justify-content: space-between; }
}

/* ── Acessibilidade ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

@media (prefers-contrast: high) {
    :root {
        --primary: #0a5c56;
        --gray-500: #333;
        --gray-400: #555;
    }
    .btn { border-width: 2px; }
    .card { border-width: 2px; }
}

/* ── Touch targets ────────────────────────── */
@media (pointer: coarse) {
    .btn { min-height: 44px; }
    .nav-link { min-height: 44px; display: flex; align-items: center; }
    .sidebar-link { min-height: 44px; }
    .filter-option { min-height: 40px; }
    .form-control { min-height: 44px; }
    .page-link { min-width: 44px; min-height: 44px; }
}

/* ── Dark mode prep (opcional) ────────────── */
@media (prefers-color-scheme: dark) {
    /* Descomentar para suporte a dark mode:
    :root {
        --white: #0f172a;
        --gray-50: #1e293b;
        --gray-100: #334155;
        --gray-200: #475569;
        --gray-300: #64748b;
        --gray-400: #94a3b8;
        --gray-500: #cbd5e1;
        --gray-600: #e2e8f0;
        --gray-700: #f1f5f9;
        --gray-800: #f8fafc;
        --gray-900: #ffffff;
    }
    */
}