/**
 * Mobile Optimizations - iPhone & Mobile Devices
 * Otimizações específicas para melhorar visualização em dispositivos móveis
 */

/* ============================================
   CONFIGURAÇÕES PADRÃO (DESKTOP)
   ============================================ */

/* Desktop: Mostrar tabelas, esconder cards */
.ingredients-table-wrapper {
    display: block;
}

.ingredients-mobile-cards {
    display: none;
}

/* ============================================
   CONFIGURAÇÕES GLOBAIS PARA MOBILE
   ============================================ */

@media only screen and (max-width: 768px) {

    /* Base - Prevenir zoom automático em inputs */
    input, select, textarea {
        font-size: 16px !important; /* Previne zoom no iOS */
    }

    /* Body - Melhor scroll e espaçamento */
    body {
        -webkit-text-size-adjust: 100%;
        -webkit-font-smoothing: antialiased;
        touch-action: manipulation;
    }

    /* Container principal - Melhor padding */
    #root > div {
        padding: 12px !important;
        padding-bottom: 130px !important; /* Espaço para navegação fixa inferior */
    }

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

    /* Header principal */
    header, .header {
        padding: 12px 16px !important;
        min-height: 60px !important;
    }

    /* Título do header */
    h1, .text-2xl {
        font-size: 20px !important;
        line-height: 1.4 !important;
    }

    /* Versão no header */
    .text-gray-500, .text-gray-400 {
        font-size: 13px !important;
    }

    /* Tabs de navegação */
    nav button, .nav-button {
        padding: 12px 16px !important;
        min-height: 48px !important;
        font-size: 15px !important;
        gap: 8px !important;
    }

    /* Ícones nas tabs */
    nav button svg, .nav-button svg {
        width: 20px !important;
        height: 20px !important;
    }

    /* ============================================
       FORMULÁRIOS E INPUTS
       ============================================ */

    /* Inputs gerais */
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="tel"],
    select,
    textarea {
        min-height: 48px !important;
        padding: 12px 16px !important;
        font-size: 16px !important;
        border-radius: 8px !important;
    }

    /* Labels */
    label {
        font-size: 15px !important;
        font-weight: 600 !important;
        margin-bottom: 8px !important;
        display: block;
    }

    /* Grupos de formulário */
    .form-group, .space-y-4 > div {
        margin-bottom: 20px !important;
    }

    /* ============================================
       BOTÕES
       ============================================ */

    /* Botões gerais */
    button {
        min-height: 48px !important;
        padding: 12px 20px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        touch-action: manipulation;
    }

    /* Botões pequenos */
    button.text-sm, .btn-sm {
        min-height: 44px !important;
        padding: 10px 16px !important;
        font-size: 15px !important;
    }

    /* Botões com ícones */
    button svg {
        width: 20px !important;
        height: 20px !important;
    }

    /* Botões de ação primária */
    .bg-blue-600, .bg-green-600, .bg-orange-600 {
        font-weight: 700 !important;
    }

    /* ============================================
       TABELAS E LISTAS
       ============================================ */

    /* Tabelas - o scroll horizontal fica por conta do wrapper
       .overflow-x-auto de cada componente. Nao forcamos mais
       "display: block" na table: isso quebrava o alinhamento de
       colunas entre thead e tbody (cada linha virava uma "tabela
       anonima" independente no WebKit), bagunçando o cabecalho em
       varias telas (Apoio & Logistica, Itens do Evento, etc). */
    table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: 14px !important;
    }

    /* Células da tabela */
    td, th {
        padding: 12px 10px !important;
        min-width: 80px;
        white-space: nowrap;
    }

    /* Primeira coluna: fica fixa ao rolar tabelas largas horizontalmente,
       mas sem forcar uma largura minima de 140px - isso quebrava tabelas
       cuja 1a coluna e so um checkbox (ex: Apoio & Logistica) */
    td:first-child, th:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
    }

    /* So a celula de dados (td) recebe fundo branco solido, pra tapar
       as colunas que passam por baixo dela ao rolar. A celula de
       cabecalho (th) NAO pode receber fundo forcado: cabecalhos
       coloridos (gradiente laranja com texto branco, ex: Itens do
       Evento, Apoio & Logistica) ficavam com o texto branco invisivel
       sobre esse fundo branco forcado. Sem o override, o th herda o
       fundo do proprio <tr>/<thead> (gradiente ou cinza), que e o
       comportamento correto. */
    td:first-child {
        background: white;
    }

    /* Linhas de tabela */
    tbody tr {
        min-height: 52px !important;
    }

    /* Lista de ingredientes e itens */
    .ingredients-list > div,
    .items-list > div {
        padding: 16px !important;
        margin-bottom: 12px !important;
        border-radius: 10px !important;
    }

    /* ============================================
       CARDS E CONTAINERS
       ============================================ */

    /* Cards gerais */
    .bg-white, .card {
        border-radius: 12px !important;
        padding: 16px 12px !important;
        margin-bottom: 12px !important;
    }

    /* Título dos cards */
    .card h2, .card h3 {
        font-size: 18px !important;
        margin-bottom: 16px !important;
    }

    /* Espaçamento entre elementos */
    .space-y-4 > * {
        margin-top: 16px !important;
    }

    .space-y-6 > * {
        margin-top: 24px !important;
    }

    /* ============================================
       RESUMO DE CUSTOS
       ============================================ */

    /* Grid de custos */
    .costs-summary .grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Itens de custo */
    .cost-item {
        padding: 16px !important;
        font-size: 15px !important;
    }

    /* Valores de custo */
    .cost-value {
        font-size: 18px !important;
        font-weight: 700 !important;
    }

    /* Total final */
    .final-total {
        font-size: 24px !important;
        padding: 20px !important;
    }

    /* ============================================
       MODAIS E POPUPS
       ============================================ */

    /* Modal container */
    .modal, [role="dialog"] {
        margin: 8px !important;
        max-height: 85vh !important;
        max-width: calc(100vw - 16px) !important;
        overflow-y: auto !important;
        border-radius: 12px !important;
    }

    /* Overlay do modal - centralizar */
    .fixed.inset-0 > .bg-white,
    .fixed.inset-0 > div > .bg-white {
        max-height: 85vh !important;
        overflow-y: auto !important;
        margin: 8px !important;
        border-radius: 12px !important;
    }

    /* Conteúdo do modal */
    .modal-content {
        padding: 20px 16px !important;
    }

    /* Botões do modal */
    .modal-footer button {
        width: 100% !important;
        margin-bottom: 10px !important;
    }

    /* ============================================
       LISTA DE EVENTOS SALVOS
       ============================================ */

    /* Cards de eventos */
    .event-card {
        padding: 16px !important;
        margin-bottom: 12px !important;
    }

    /* Nome do evento */
    .event-name {
        font-size: 17px !important;
        font-weight: 600 !important;
    }

    /* Data e informações */
    .event-info {
        font-size: 14px !important;
        margin-top: 8px !important;
    }

    /* Botões de ação do evento */
    .event-actions button {
        padding: 10px 14px !important;
        font-size: 14px !important;
    }

    /* ============================================
       BANCO DE INGREDIENTES
       ============================================ */

    /* Container de ingredientes */
    .ingredients-database {
        padding: 16px !important;
    }

    /* Busca de ingredientes */
    .ingredients-search input {
        min-height: 48px !important;
        font-size: 16px !important;
        padding-left: 44px !important; /* Espaço para ícone de busca */
    }

    /* Categorias */
    .category-filter button {
        padding: 10px 16px !important;
        font-size: 14px !important;
        min-height: 42px !important;
    }

    /* Item de ingrediente */
    .ingredient-item {
        padding: 16px 12px !important;
        min-height: 60px !important;
    }

    .ingredient-name {
        font-size: 16px !important;
        font-weight: 600 !important;
    }

    .ingredient-details {
        font-size: 14px !important;
        margin-top: 6px !important;
    }

    /* ============================================
       FORMULÁRIO DE TRANSPORTE E MÃO DE OBRA
       ============================================ */

    /* Grids multi-coluna viram 1 ou 2 colunas */
    .grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    .grid-cols-3 {
        grid-template-columns: 1fr 1fr !important;
    }

    .grid-cols-4,
    .grid-cols-5 {
        grid-template-columns: 1fr 1fr !important;
    }

    /* Campos numéricos grandes */
    input[type="number"].cost-input {
        font-size: 20px !important;
        text-align: center !important;
        font-weight: 700 !important;
    }

    /* ============================================
       BARRA DE PESQUISA - PRATOS E PROPOSTAS
       ============================================ */

    /* Toolbar com busca - empilhar verticalmente no mobile */
    .dish-search-toolbar,
    .proposal-search-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    /* Container da busca - largura total no mobile */
    .dish-search-container,
    .proposal-search-container {
        max-width: 100% !important;
        width: 100% !important;
        flex-basis: 100% !important;
    }

    /* ============================================
       PROPOSTAS
       ============================================ */

    /* Lista de propostas */
    .proposal-card {
        padding: 18px !important;
        margin-bottom: 14px !important;
    }

    /* Nome da proposta */
    .proposal-name {
        font-size: 17px !important;
        font-weight: 600 !important;
        margin-bottom: 10px !important;
    }

    /* Valor da proposta */
    .proposal-value {
        font-size: 22px !important;
        font-weight: 700 !important;
        color: #059669 !important;
    }

    /* ============================================
       MELHORIAS DE UX
       ============================================ */

    /* Área de toque maior para checkboxes e radios */
    input[type="checkbox"],
    input[type="radio"] {
        width: 24px !important;
        height: 24px !important;
        cursor: pointer;
    }

    /* Links e botões de texto */
    a, button.link {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    /* Scroll suave */
    * {
        -webkit-overflow-scrolling: touch;
    }

    /* Melhor toque em elementos clicáveis */
    button, a, input, select, textarea {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    }

    /* Desabilitar seleção de texto em botões */
    button {
        -webkit-user-select: none;
        user-select: none;
    }

    /* ============================================
       ESPAÇAMENTOS ESPECÍFICOS
       ============================================ */

    /* Margem entre seções */
    section {
        margin-bottom: 24px !important;
    }

    /* Padding do container principal */
    .container, .max-w-7xl {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Gap entre elementos flex */
    .flex.gap-2 {
        gap: 12px !important;
    }

    .flex.gap-4 {
        gap: 16px !important;
    }

    /* ============================================
       TEXTOS E TIPOGRAFIA
       ============================================ */

    /* Títulos grandes */
    h1 {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }

    h2 {
        font-size: 20px !important;
        line-height: 1.4 !important;
    }

    h3 {
        font-size: 18px !important;
        line-height: 1.4 !important;
    }

    /* Texto do corpo */
    p, .text-base {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }

    /* Texto pequeno */
    .text-sm {
        font-size: 14px !important;
    }

    .text-xs {
        font-size: 14px !important;
    }

    /* ============================================
       AJUSTES DE LAYOUT ESPECÍFICOS
       ============================================ */

    /* Esconder elementos desnecessários em mobile */
    .hide-mobile {
        display: none !important;
    }

    /* Largura total em mobile */
    .mobile-full-width {
        width: 100% !important;
    }

    /* Stack vertical em mobile */
    .mobile-stack {
        flex-direction: column !important;
    }

    /* Padding reduzido em mobile */
    .mobile-compact {
        padding: 12px !important;
    }

    /* ============================================
       ANIMAÇÕES E TRANSIÇÕES
       ============================================ */

    /* Transições suaves */
    button, a, input, select {
        transition: all 0.2s ease !important;
    }

    /* Feedback visual ao tocar */
    button:active, a:active {
        transform: scale(0.98);
        opacity: 0.9;
    }

    /* ============================================
       NAVEGAÇÃO INFERIOR MOBILE
       ============================================ */

    /* Container da nav fixa inferior */
    .fixed.bottom-0.left-0.right-0 {
        padding-bottom: env(safe-area-inset-bottom) !important;
    }

    /* Botões da nav inferior - override dos botões gerais */
    .fixed.bottom-0 button {
        min-height: 44px !important;
        padding: 4px 2px !important;
        font-size: 10px !important;
        border-radius: 6px !important;
    }

    /* Ícones SVG da nav inferior */
    .fixed.bottom-0 button svg {
        width: 20px !important;
        height: 20px !important;
    }

    /* Emojis/spans como ícones na nav inferior */
    .fixed.bottom-0 button > .text-sm {
        font-size: 18px !important;
    }

    /* Labels da nav inferior */
    .fixed.bottom-0 button > span:last-child {
        font-size: 10px !important;
        line-height: 1.2 !important;
    }
}

/* ============================================
   OTIMIZAÇÕES PARA IPHONE (específico)
   ============================================ */

@media only screen
    and (max-width: 430px)
    and (-webkit-min-device-pixel-ratio: 2) {

    /* iPhone - Ajustes finos */
    body {
        font-size: 16px;
    }

    /* Safe area para iPhone com notch */
    #root {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    /* Botões no rodapé do iPhone */
    .bottom-actions {
        padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    }
}

/* ============================================
   LANDSCAPE MODE (iPhone deitado)
   ============================================ */

@media only screen
    and (max-height: 450px)
    and (orientation: landscape) {

    /* Reduzir paddings verticais */
    header, .header {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        min-height: 48px !important;
    }

    /* Reduzir altura de botões */
    button {
        min-height: 40px !important;
        padding: 8px 16px !important;
    }

    /* Reduzir margens */
    section {
        margin-bottom: 16px !important;
    }
}

/* ============================================
   DARK MODE (Opcional - para futuro)
   ============================================ */

@media (prefers-color-scheme: dark) {
    /* Ajustes para modo escuro podem ser adicionados aqui */
}

/* ============================================
   BARRA DE NAVEGAÇÃO INFERIOR (mobile, 2 linhas)
   A barra é fixed e tem ~100px de altura + a área do indicador
   de início do iPhone. O conteúdo só reservava 80px (pb-20), então
   o fim das telas (botões de salvar/excluir etc.) ficava escondido
   atrás da barra. Reserva espaço suficiente e afasta a barra do
   indicador de início.
   ============================================ */
@media (max-width: 1023px) {
    .mobile-bottom-nav {
        padding-bottom: env(safe-area-inset-bottom);
        /* Abaixo das janelas em tela cheia (z-50), ex: pré-visualização da proposta -
           antes a barra ficava por cima e tampava o fim da proposta */
        z-index: 40 !important;
    }
    /* Barra de botões da pré-visualização da proposta: no celular ocupava metade
       da tela e ficava fixa no topo, sobrando pouco espaço pra ver a proposta */
    .proposal-preview-toolbar {
        position: static !important;
    }
    .mobile-nav-spacer {
        padding-bottom: calc(130px + env(safe-area-inset-bottom)) !important;
    }
    /* Botões fixos do Cardápio (sticky) ficavam escondidos atrás da barra inferior */
    .menu-actions-sticky {
        bottom: calc(110px + env(safe-area-inset-bottom)) !important;
    }
}

/* ============================================
   CARDS DE INGREDIENTES - celular e iPad
   (antes só abaixo de 768px; no iPad a tabela ficava com a coluna
   Ações fora da tela)
   ============================================ */
@media only screen and (max-width: 1279px) {
    /* MOBILE CARD VIEW - Esconder tabela e mostrar cards */
    .ingredients-table-wrapper {
        display: none !important; /* Esconder tabela em mobile */
    }

    .ingredients-mobile-cards {
        display: block !important; /* Mostrar cards em mobile */
    }

    .ingredient-card {
        background: white;
        border-radius: 12px;
        padding: 16px;
        margin-bottom: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        border: 1px solid #e5e7eb;
        transition: all 0.2s ease;
    }

    .ingredient-card:active {
        transform: scale(0.98);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    }

    .ingredient-card-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 12px;
        gap: 12px;
    }

    .ingredient-card-title {
        font-size: 17px !important;
        font-weight: 700 !important;
        color: #1f2937;
        margin: 0;
        flex: 1;
        line-height: 1.3;
    }

    .ingredient-card-badge {
        display: inline-flex;
        align-items: center;
        padding: 6px 12px;
        border-radius: 6px;
        font-size: 13px !important;
        font-weight: 600;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .ingredient-card-body {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-bottom: 12px;
    }

    .ingredient-card-field {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .ingredient-card-field-label {
        font-size: 12px !important;
        font-weight: 600;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .ingredient-card-field-value {
        font-size: 15px !important;
        font-weight: 600;
        color: #111827;
    }

    .ingredient-card-field-value.highlight {
        font-size: 18px !important;
        color: #059669;
        font-weight: 700;
    }

    .ingredient-card-actions {
        display: flex;
        gap: 8px;
        padding-top: 12px;
        border-top: 1px solid #e5e7eb;
    }

    .ingredient-card-actions button {
        flex: 1;
        min-height: 44px !important;
        padding: 10px 16px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        transition: all 0.2s ease;
    }

    .ingredient-card-actions button svg {
        width: 18px !important;
        height: 18px !important;
    }

    /* Formulário de edição em card */
    .ingredient-edit-card {
        background: #fef3c7;
        border: 2px solid #fbbf24;
    }

    .ingredient-edit-card input,
    .ingredient-edit-card select {
        width: 100%;
        min-height: 44px !important;
        padding: 10px 12px !important;
        font-size: 15px !important;
        border: 1px solid #d1d5db;
        border-radius: 6px;
        background: white;
    }

    .ingredient-edit-card .ingredient-card-body {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .ingredient-edit-card .ingredient-card-field {
        width: 100%;
    }
}