/* ============================================
   CORREÇÕES COMPLETAS DESKTOP E MOBILE
   Todas as páginas alinhadas e ajustadas
   ============================================ */

/* ============================================
   RESET GLOBAL
   ============================================ */
* {
    box-sizing: border-box !important;
}

html {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100% !important;
    -ms-text-size-adjust: 100% !important;
}

body {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
}

body > * {
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

/* ============================================
   DESKTOP (1024px+)
   ============================================ */
@media (min-width: 1024px) {
    /* Containers Desktop */
    .container,
    .container.mx-auto,
    .mx-auto,
    main,
    section,
    article,
    .content-wrapper,
    .page-content,
    .page-content-wrapper,
    [class*="max-w"] {
        width: 100% !important;
        max-width: 1280px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 2rem !important;
        padding-right: 2rem !important;
        box-sizing: border-box !important;
    }
    
    /* Header Desktop */
    header,
    .modern-header {
        width: 100% !important;
        max-width: 100vw !important;
        padding: 1rem 2rem !important;
        box-sizing: border-box !important;
    }
    
    header nav,
    .modern-header nav {
        max-width: 1280px !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }
    
    /* Hero Section Desktop */
    .modern-hero,
    .hero-section,
    section.modern-hero {
        width: 100% !important;
        max-width: 100vw !important;
        padding: 6rem 2rem 4rem !important;
        box-sizing: border-box !important;
    }
    
    .modern-hero-content,
    .hero-content {
        max-width: 1200px !important;
        margin: 0 auto !important;
        padding: 0 2rem !important;
    }
    
    /* Grids Desktop */
    .grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-3,
    .grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-4 {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 2rem !important;
        max-width: 1200px !important;
        margin: 0 auto !important;
    }
    
    .grid.grid-cols-1.md\\:grid-cols-2 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2rem !important;
    }
    
    /* Cards Desktop */
    .modern-card,
    .card,
    .card-modern,
    .service-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 2rem !important;
        box-sizing: border-box !important;
    }
    
    /* Botões Desktop */
    button,
    .btn,
    .modern-btn,
    a.button,
    a.btn {
        padding: 0.875rem 1.75rem !important;
        font-size: 1rem !important;
        white-space: nowrap !important;
    }
    
    /* Formulários Desktop */
    form {
        max-width: 800px !important;
        margin: 0 auto !important;
    }
    
    .form-group,
    .input-group {
        margin-bottom: 1.5rem !important;
    }
    
    input,
    textarea,
    select {
        padding: 0.875rem 1rem !important;
        font-size: 1rem !important;
    }
    
    /* Tabelas Desktop */
    table {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Cliente Dashboard Desktop */
    .cliente-main-content {
        width: calc(100% - 280px) !important;
        margin-left: 280px !important;
        padding: 2rem !important;
    }
    
    .cliente-sidebar {
        width: 280px !important;
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        height: 100vh !important;
    }
    
    .cliente-topbar {
        width: calc(100% - 280px) !important;
        margin-left: 280px !important;
        padding: 1.5rem 2rem !important;
    }
    
    /* Orçamentos, Contratos, Projetos Desktop */
    .orcamentos-grid,
    .contratos-grid,
    .projetos-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2rem !important;
        max-width: 1200px !important;
        margin: 0 auto !important;
    }
    
    /* Espaçamentos Desktop */
    .mb-10,
    .mb-12,
    .mb-16,
    .mb-20 {
        margin-bottom: 3rem !important;
    }
    
    .mt-10,
    .mt-12,
    .mt-16,
    .mt-20 {
        margin-top: 3rem !important;
    }
    
    .p-8,
    .p-10,
    .p-12 {
        padding: 2rem !important;
    }
}

/* ============================================
   TABLET (768px - 1023px)
   ============================================ */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Containers Tablet */
    .container,
    .container.mx-auto,
    .mx-auto,
    main,
    section {
        width: 100% !important;
        max-width: 100vw !important;
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
        box-sizing: border-box !important;
    }
    
    /* Grids Tablet */
    .grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-3,
    .grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem !important;
    }
    
    /* Cards Tablet */
    .modern-card,
    .card {
        padding: 1.5rem !important;
    }
    
    /* Cliente Dashboard Tablet */
    .cliente-main-content {
        width: 100% !important;
        margin-left: 0 !important;
        padding: 1.5rem !important;
    }
    
    .cliente-sidebar {
        width: 260px !important;
        transform: translateX(-100%) !important;
    }
    
    .cliente-sidebar.open {
        transform: translateX(0) !important;
    }
    
    .cliente-topbar {
        width: 100% !important;
        margin-left: 0 !important;
        padding: 1rem 1.5rem !important;
    }
}

/* ============================================
   MOBILE (até 767px)
   ============================================ */
@media (max-width: 767px) {
    /* Reset Mobile */
    * {
        max-width: 100vw !important;
    }
    
    html,
    body {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Containers Mobile */
    .container,
    .container.mx-auto,
    .mx-auto,
    main,
    section,
    article,
    .content-wrapper,
    .page-content,
    .page-content-wrapper,
    [class*="max-w"] {
        width: 100% !important;
        max-width: 100vw !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    
    main {
        padding: 1rem 0.75rem !important;
    }
    
    /* Header Mobile */
    header,
    .modern-header {
        width: 100% !important;
        max-width: 100vw !important;
        padding: 0.75rem 1rem !important;
        box-sizing: border-box !important;
    }
    
    header nav,
    .modern-header nav {
        width: 100% !important;
        max-width: 100vw !important;
        padding: 0.5rem 1rem !important;
    }
    
    header nav > div,
    .modern-header nav > div {
        width: 100% !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
    
    /* Hero Section Mobile */
    .modern-hero,
    .hero-section,
    section.modern-hero {
        width: 100% !important;
        max-width: 100vw !important;
        padding: 2rem 1rem !important;
        box-sizing: border-box !important;
    }
    
    .modern-hero-content,
    .hero-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        text-align: center !important;
    }
    
    .modern-hero h1,
    .hero-content h1 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
        padding: 0 0.5rem !important;
    }
    
    .modern-hero p,
    .hero-content p {
        font-size: 1rem !important;
        padding: 0 0.5rem !important;
    }
    
    /* Grids Mobile - Forçar 1 coluna */
    .grid,
    [class*="grid-cols"],
    [class*="md:grid-cols"],
    [class*="lg:grid-cols"],
    [class*="sm:grid-cols"],
    .grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-3,
    .grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-4 {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Flex Mobile */
    .flex {
        flex-wrap: wrap !important;
    }
    
    .flex-row {
        flex-direction: column !important;
    }
    
    /* Cards Mobile */
    .modern-card,
    .card,
    .card-modern,
    .service-card,
    .stat-card,
    [class*="card"],
    .bg-white,
    div[class*="border"] {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 1rem !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    
    /* Botões Mobile */
    button,
    .btn,
    .modern-btn,
    a.button,
    a.btn,
    [type="button"],
    [type="submit"],
    input[type="submit"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 0.75rem 1rem !important;
        font-size: 1rem !important;
        min-height: 44px !important;
        white-space: normal !important;
        word-wrap: break-word !important;
    }
    
    /* Botões em grupos Mobile */
    .flex.gap-2 button,
    .flex.gap-3 button,
    .flex.gap-4 button,
    .flex.gap-6 button,
    .orcamento-actions button,
    .contrato-actions button,
    .projeto-actions button {
        width: 100% !important;
        margin: 0.25rem 0 !important;
    }
    
    .orcamento-actions,
    .contrato-actions,
    .projeto-actions,
    .payment-actions {
        flex-direction: column !important;
        gap: 0.5rem !important;
        width: 100% !important;
    }
    
    /* Formulários Mobile */
    form {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
    
    .form-group,
    .form-row,
    .input-group {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 1rem !important;
    }
    
    input,
    textarea,
    select {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        font-size: 16px !important;
        -webkit-appearance: none !important;
        padding: 0.75rem !important;
    }
    
    label {
        width: 100% !important;
        display: block !important;
        margin-bottom: 0.5rem !important;
    }
    
    .flex input,
    .flex-row input {
        width: 100% !important;
        margin: 0.25rem 0 !important;
    }
    
    /* Tabelas Mobile */
    table {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    thead,
    tbody,
    tr {
        display: block !important;
        width: 100% !important;
    }
    
    th,
    td {
        display: block !important;
        width: 100% !important;
        padding: 0.5rem !important;
        text-align: left !important;
        box-sizing: border-box !important;
    }
    
    th {
        font-weight: 700 !important;
        background: rgba(0, 0, 0, 0.05) !important;
        border-bottom: 2px solid rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Textos Mobile */
    h1,
    .text-4xl,
    .text-5xl,
    .text-6xl,
    .text-7xl {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    h2,
    .text-3xl {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
        word-wrap: break-word !important;
    }
    
    h3,
    .text-2xl {
        font-size: 1.25rem !important;
        line-height: 1.3 !important;
    }
    
    h4,
    .text-xl {
        font-size: 1.125rem !important;
        line-height: 1.4 !important;
    }
    
    p,
    .text-base,
    .text-lg {
        font-size: 1rem !important;
        line-height: 1.6 !important;
        word-wrap: break-word !important;
    }
    
    p,
    span,
    div {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
    }
    
    /* Espaçamentos Mobile */
    .mb-10,
    .mb-12,
    .mb-16,
    .mb-20 {
        margin-bottom: 1.5rem !important;
    }
    
    .mt-10,
    .mt-12,
    .mt-16,
    .mt-20 {
        margin-top: 1.5rem !important;
    }
    
    .mb-8 {
        margin-bottom: 1.25rem !important;
    }
    
    .mt-8 {
        margin-top: 1.25rem !important;
    }
    
    .mb-6 {
        margin-bottom: 1rem !important;
    }
    
    .mt-6 {
        margin-top: 1rem !important;
    }
    
    .p-8,
    .p-10,
    .p-12 {
        padding: 1rem !important;
    }
    
    .p-6 {
        padding: 0.75rem !important;
    }
    
    .px-8,
    .px-10,
    .px-12 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    .py-8,
    .py-10,
    .py-12 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    
    /* Imagens Mobile */
    img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
    }
    
    video,
    iframe,
    embed,
    object {
        max-width: 100% !important;
        height: auto !important;
    }
    
    #qrcode,
    #qrcode canvas,
    #qrcode img {
        max-width: 100% !important;
        width: auto !important;
        height: auto !important;
    }
    
    /* Cliente Dashboard Mobile */
    .cliente-main-content {
        width: 100% !important;
        max-width: 100vw !important;
        margin-left: 0 !important;
        padding: 0 !important;
    }
    
    .cliente-topbar {
        width: 100% !important;
        max-width: 100vw !important;
        padding: 0.75rem 1rem !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 999 !important;
    }
    
    .cliente-topbar h1 {
        font-size: 1.125rem !important;
        max-width: calc(100vw - 120px) !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    
    .cliente-sidebar {
        width: 100% !important;
        max-width: 100vw !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 10000 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease !important;
    }
    
    .cliente-sidebar.open {
        transform: translateX(0) !important;
    }
    
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9999;
    }
    
    .cliente-sidebar.open ~ .sidebar-overlay {
        display: block;
    }
    
    .cliente-sidebar-nav a {
        width: 100% !important;
        padding: 0.75rem 1rem !important;
    }
    
    /* Orçamentos, Contratos, Projetos Mobile */
    .orcamentos-grid,
    .contratos-grid,
    .projetos-grid,
    .payment-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .orcamento-card,
    .contrato-card,
    .projeto-card,
    .payment-card,
    .pagamento-card {
        width: 100% !important;
        padding: 1rem !important;
    }
    
    /* Modais Mobile */
    .modal,
    .popup,
    [class*="modal"],
    [class*="popup"] {
        width: 100% !important;
        max-width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        margin: 0 !important;
        padding: 1rem !important;
        box-sizing: border-box !important;
        border-radius: 0 !important;
    }
    
    .modal-content,
    .popup-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 1rem !important;
        box-sizing: border-box !important;
    }
    
    /* Footer Mobile */
    footer,
    .modern-footer {
        width: 100% !important;
        max-width: 100vw !important;
        padding: 2rem 1rem !important;
        box-sizing: border-box !important;
    }
    
    footer .container,
    .modern-footer .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
    
    footer .grid,
    .modern-footer .grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
}

/* ============================================
   MOBILE PEQUENO (até 480px)
   ============================================ */
@media (max-width: 480px) {
    html,
    body {
        font-size: 14px !important;
    }
    
    .container,
    main,
    section {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    .page-content-wrapper {
        padding: 0.75rem 0.5rem !important;
    }
    
    h1 {
        font-size: 1.5rem !important;
    }
    
    h2 {
        font-size: 1.25rem !important;
    }
    
    .modern-card,
    .card {
        padding: 0.75rem !important;
    }
    
    button,
    .btn {
        padding: 0.625rem 0.875rem !important;
        font-size: 0.9rem !important;
    }
}

/* ============================================
   CORREÇÕES ESPECÍFICAS DE ELEMENTOS
   ============================================ */
/* Evitar overflow horizontal */
* {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* Links longos */
a {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

/* Códigos e textos técnicos */
code,
pre,
.code-block {
    word-wrap: break-word !important;
    overflow-x: auto !important;
    max-width: 100% !important;
}

/* Badges e tags */
.badge,
.tag,
span[class*="badge"],
span[class*="tag"] {
    display: inline-block !important;
    word-wrap: break-word !important;
    max-width: 100% !important;
}

/* ============================================
   PWA - SAFE AREA (iPhone X+)
   ============================================ */
@supports (padding: max(0px)) {
    @media (max-width: 1023px) {
        .cliente-topbar {
            padding-top: max(0.75rem, env(safe-area-inset-top)) !important;
        }
        
        .page-content-wrapper {
            padding-bottom: max(1rem, env(safe-area-inset-bottom)) !important;
        }
        
        .cliente-sidebar {
            padding-top: max(0px, env(safe-area-inset-top)) !important;
            padding-bottom: max(0px, env(safe-area-inset-bottom)) !important;
        }
        
        footer {
            padding-bottom: max(2rem, env(safe-area-inset-bottom)) !important;
        }
    }
}

/* ============================================
   PREVENIR ZOOM iOS
   ============================================ */
@media (max-width: 1023px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="url"],
    textarea,
    select {
        font-size: 16px !important;
        -webkit-appearance: none !important;
    }
}

/* ============================================
   SCROLL SUAVE
   ============================================ */
@media (max-width: 1023px) {
    html {
        scroll-behavior: smooth !important;
    }
    
    * {
        -webkit-overflow-scrolling: touch !important;
    }
}

/* ============================================
   FIX FINAL - GARANTIR QUE NADA ULTRAPASSE
   ============================================ */
@media (max-width: 1023px) {
    * {
        max-width: 100vw !important;
    }
    
    body,
    html {
        overflow-x: hidden !important;
        position: relative !important;
    }
    
    body > * {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
}