/* ================================================
   SWEEP MOBILE FIXES - UTILITÁRIOS RESPONSIVOS
   ================================================
   Arquivo criado para corrigir problemas específicos
   reportados por usuários mobile em produção.
   ================================================ */

/* ================================================
   0. NAVBAR MOBILE (HAMBURGUER MENU)
   ================================================ */

/* Desktop: Menu sempre visível, layout horizontal */
.navbar-collapse {
    display: flex !important;
    flex-basis: auto;
    justify-content: space-between;  /* Logo esquerda, menu centro, botões direita */
    align-items: center;
    flex-grow: 1;  /* Ocupa espaço disponível */
}

/* Desktop: Menu user à direita */
.sweep-user-menu {
    margin-left: auto;  /* Empurra para a direita */
}

/* Esconder botão hamburguer em desktop */
.navbar-toggler {
    display: none;
    border: none;
    background: transparent;
    padding: 0.5rem;
    cursor: pointer;
}

/* Ícone do hamburguer (3 barras) */
.navbar-toggler-icon {
    display: block;
    width: 30px;
    height: 3px;
    background-color: var(--sweep-primary);
    position: relative;
}

.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
    content: '';
    display: block;
    width: 30px;
    height: 3px;
    background-color: var(--sweep-primary);
    position: absolute;
    left: 0;
}

.navbar-toggler-icon::before {
    top: -8px;
}

.navbar-toggler-icon::after {
    top: 8px;
}

/* Mobile: Mostrar hamburguer, collapse funciona */
@media (max-width: 991px) {
    .navbar-toggler {
        display: block;
    }

    /* Menu collapse - comportamento mobile */
    .navbar-collapse {
        display: none !important;
        position: absolute;
        top: 70px;
        left: 0;
        right: 0;
        background: var(--sweep-white);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        padding: 1rem;
        z-index: 999;
    }

    /* Quando menu está aberto (classe .show do Bootstrap) */
    .navbar-collapse.show {
        display: block !important;
    }

    /* Menu links - empilhar verticalmente */
    .sweep-nav-links {
        flex-direction: column;
        gap: 0.5rem !important;
        margin-bottom: 1rem;
    }

    .sweep-nav-links li {
        width: 100%;
    }

    .sweep-nav-link {
        display: block;
        padding: 0.75rem 1rem;
        width: 100%;
    }

    /* User menu - empilhar verticalmente */
    .sweep-user-menu {
        flex-direction: column;
        gap: 0.75rem !important;
        align-items: stretch !important;
        padding-top: 1rem;
        border-top: 1px solid var(--sweep-light-gray);
    }

    .sweep-user-menu span {
        text-align: center;
        font-size: 14px;
        padding: 0.5rem;
    }

    .sweep-user-menu .sweep-btn {
        width: 100%;
        justify-content: center;
        min-height: 44px;
    }
}

/* ================================================
   1. PREVENÇÃO DE ZOOM AUTOMÁTICO (iOS Safari)
   ================================================ */

/* iOS faz zoom automático em inputs com font-size < 16px
   Esta regra previne isso mantendo legibilidade */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
textarea,
select,
.form-control,
.form-select {
    font-size: 16px !important;
}

/* ================================================
   2. BOTÕES MOBILE-FRIENDLY
   ================================================ */

@media (max-width: 768px) {
    /* Botões com altura mínima para toque fácil (44px recomendado Apple/Android) */
    .btn,
    button,
    a.btn {
        min-height: 44px;
        padding: 0.75rem 1rem;
        font-size: 16px;
    }
    
    /* Botões de ação primária - full width em mobile */
    .btn-primary,
    .btn-success,
    .btn-danger {
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    /* Container de botões - empilhar verticalmente */
    .d-flex.justify-content-between,
    .d-flex.justify-content-end,
    .d-flex.gap-2,
    .d-flex.gap-3 {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    .d-flex.justify-content-between > *,
    .d-flex.justify-content-end > *,
    .d-flex.gap-2 > *,
    .d-flex.gap-3 > * {
        width: 100% !important;
    }
    
    /* Exceção: manter inline para badges e tags pequenas */
    .d-flex.flex-wrap {
        flex-direction: row !important;
    }
}

/* ================================================
   3. INPUT GROUPS RESPONSIVOS
   ================================================ */

@media (max-width: 480px) {
    /* Input groups quebram em duas linhas no mobile */
    .input-group {
        flex-wrap: wrap;
    }
    
    .input-group > .form-control,
    .input-group > .form-select {
        flex: 1 1 100%;
        min-width: 100%;
        border-radius: 0.375rem !important; /* Arredondar todos os cantos */
    }
    
    .input-group > .btn,
    .input-group > .input-group-text {
        flex: 1 1 100%;
        border-radius: 0.375rem !important;
        margin-top: 0.5rem;
    }
    
    /* Botão de copiar PIX - full width */
    .input-group > .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ================================================
   4. CARDS E CONTAINERS
   ================================================ */

@media (max-width: 768px) {
    /* Remover cols do Bootstrap - forçar full width */
    .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    
    .row {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }
    
    .row > [class*='col-'] {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    /* Cards - padding reduzido */
    .card {
        margin-bottom: 1rem;
    }
    
    .card-body {
        padding: 1rem;
    }
    
    .card-header {
        padding: 0.75rem 1rem;
    }
    
    /* Resumo de pedido - compacto */
    .card.bg-light .d-flex {
        font-size: 0.9rem;
    }
    
    .card.bg-light .fs-5 {
        font-size: 1.1rem !important;
    }
}

@media (max-width: 480px) {
    .container {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    .card-body {
        padding: 0.75rem;
    }
    
    .card-header {
        padding: 0.625rem 0.75rem;
        font-size: 0.95rem;
    }
}

/* ================================================
   5. GRID DE CARDS (Meus Serviços, etc.)
   ================================================ */

@media (max-width: 768px) {
    /* Forçar 1 coluna em grids de cards */
    .row > .col-md-6,
    .row > .col-md-4,
    .row > .col-md-3 {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }
}

/* ================================================
   6. FORMULÁRIOS RESPONSIVOS
   ================================================ */

@media (max-width: 768px) {
    /* Campos de formulário - full width */
    .row > .col-md-8,
    .row > .col-md-6,
    .row > .col-md-4,
    .row > .col-md-3 {
        width: 100%;
        max-width: 100%;
    }
    
    /* Labels e textos de ajuda */
    .form-label {
        font-size: 0.9rem;
        margin-bottom: 0.25rem;
    }
    
    .form-text,
    small {
        font-size: 0.8rem;
    }
    
    /* Alertas compactos */
    .alert {
        padding: 0.75rem;
        font-size: 0.9rem;
    }
    
    .alert-heading {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }
}

/* ================================================
   7. TABELAS RESPONSIVAS
   ================================================ */

@media (max-width: 768px) {
    /* Forçar scroll horizontal em tabelas grandes */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    table {
        font-size: 0.85rem;
    }
    
    th, td {
        padding: 0.5rem !important;
        white-space: nowrap;
    }
}

/* ================================================
   8. MODAL E OVERLAYS
   ================================================ */

@media (max-width: 768px) {
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }
    
    .modal-content {
        border-radius: 12px;
    }
    
    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 1rem;
    }
}

/* ================================================
   9. IMAGENS E MÍDIAS
   ================================================ */

@media (max-width: 768px) {
    /* Imagens sempre responsivas */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* QR Code PIX - tamanho otimizado para mobile */
    img[alt*="QR Code"],
    img[src*="qrcode"] {
        max-width: 250px !important;
        width: 100%;
    }
}

@media (max-width: 480px) {
    img[alt*="QR Code"],
    img[src*="qrcode"] {
        max-width: 200px !important;
    }
}

/* ================================================
   10. NAVEGAÇÃO E HEADER
   ================================================ */

@media (max-width: 768px) {
    /* Header/título de página - compacto */
    .d-flex.justify-content-between.align-items-center {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem;
    }
    
    .d-flex.justify-content-between.align-items-center > * {
        width: 100%;
    }
    
    /* Botões do header (Voltar, etc) */
    .d-flex.justify-content-between.align-items-center .btn {
        width: 100%;
    }
}

/* ================================================
   11. BADGES E TAGS
   ================================================ */

@media (max-width: 480px) {
    .badge,
    .sweep-badge {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
    
    /* Container de badges - quebrar linha se necessário */
    .d-flex.flex-wrap.gap-2 {
        gap: 0.25rem !important;
    }
}

/* ================================================
   12. AJUSTES DE TIPOGRAFIA
   ================================================ */

@media (max-width: 768px) {
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    h4 { font-size: 1.125rem; }
    h5 { font-size: 1rem; }
    
    p, li, span {
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.35rem; }
    h3 { font-size: 1.15rem; }
    
    p, li, span {
        font-size: 0.9rem;
    }
}

/* ================================================
   13. FIX ESPECÍFICO: COPIAR PIX
   ================================================ */

@media (max-width: 480px) {
    /* Botão copiar PIX - garantir visibilidade */
    #pixCopiaCola {
        font-size: 12px !important;
        padding: 0.625rem 0.5rem;
    }
    
    /* Feedback de cópia - mais visível */
    .alert-success,
    .alert-warning {
        font-weight: 600;
        padding: 0.75rem;
        margin-top: 0.5rem;
    }
    
    .alert-success small,
    .alert-warning small {
        font-size: 0.85rem;
        display: block;
        margin-top: 0.25rem;
    }
}

/* ================================================
   14. SCROLL SUAVE E TOUCH
   ================================================ */

/* Melhorar scroll em dispositivos touch */
* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}

html {
    scroll-behavior: smooth;
}

/* Scroll horizontal em containers específicos */
.calendario-container,
.slots-grid,
.table-responsive {
    -webkit-overflow-scrolling: touch;
}

/* ================================================
   15. ORIENTAÇÃO LANDSCAPE (MOBILE DEITADO)
   ================================================ */

@media (max-height: 500px) and (orientation: landscape) {
    /* Reduzir padding vertical quando deitado */
    .sweep-main-content {
        padding: 0.5rem;
    }
    
    .card {
        margin-bottom: 0.5rem;
    }
    
    .card-header,
    .card-body {
        padding: 0.5rem;
    }
    
    /* Alertas mais compactos */
    .alert {
        padding: 0.5rem;
        font-size: 0.85rem;
    }
    
    /* Remover margens excessivas */
    h1, h2, h3, h4, h5 {
        margin-bottom: 0.5rem;
    }
}

/* ================================================
   16. ACESSIBILIDADE TOUCH
   ================================================ */

/* Aumentar área de toque em elementos interativos */
@media (max-width: 768px) {
    a, button, .btn, input[type="checkbox"], input[type="radio"] {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Checkboxes e radios maiores */
    input[type="checkbox"],
    input[type="radio"],
    .form-check-input {
        width: 24px;
        height: 24px;
    }
}

/* ================================================
   17. FIX OVERFLOW EM MOBILE
   ================================================ */

/* Prevenir overflow horizontal */
body {
    overflow-x: hidden;
}

.container,
.container-fluid,
.row,
.card,
.modal,
.alert {
    max-width: 100%;
    overflow-x: hidden;
}

/* Textos longos - quebrar linha */
@media (max-width: 768px) {
    p, span, div {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    /* Códigos/links longos - permitir scroll */
    pre, code, .code-block {
        overflow-x: auto;
        white-space: pre-wrap;
        word-break: break-all;
    }
}